Extract from 05b898af12d06e4c2eac677cb8b437eb9298562d

.storybook/preview-head.html

@@ -1,4 +1,4 @@
-<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet" />
 <style>
     @font-face {
         font-family: 'Flag Emoji';

lib/components/Button/Button.js

@@ -34,8 +34,8 @@
   border-width: 1px;
   font-size: ${t.getFontSize("default")};
   font-weight: 400;
-  text-transform: none;
-  border-radius: 4px;
+  text-transform: uppercase;
+  border-radius: 16px;
   border-style: solid;
   padding: ${({$size:o})=>o==="small"?"0 10px":"0 15px"};
   height: ${({$size:o})=>o==="small"?"24px":"32px"};
@@ -58,8 +58,8 @@
   border-width: 1px;
   font-size: ${t.getFontSize("default")};
   font-weight: 400;
-  text-transform: none;
-  border-radius: 4px;
+  text-transform: uppercase;
+  border-radius: 16px;
   border-style: solid;
   padding: ${({$size:o})=>o==="small"?"0 10px":"0 15px"};
   height: ${({$size:o})=>o==="small"?"24px":"32px"};
@@ -75,4 +75,4 @@
   }
 
   ${E}
-`,M=i.forwardRef((D,F)=>{var w=D,{level:o="primary",ghost:e=!1,disabled:r=!1,active:n=!1,size:g="default",href:p,ariaDescribedBy:f,ariaLabel:b,ariaLabelledBy:x,children:C,onClick:$,type:m="button"}=w,h=z(w,["level","ghost","disabled","active","size","href","ariaDescribedBy","ariaLabel","ariaLabelledBy","children","onClick","type"]);const y=l=>{r||$===void 0||$(l)};return p!==void 0?_.jsx(B,d(u({$level:o,$ghost:e,$active:n,$size:g,disabled:r,"aria-describedby":f,"aria-disabled":r,"aria-label":b,"aria-labelledby":x,ref:F,role:"button",type:m,onClick:y,href:r?void 0:p},h),{children:i.Children.map(C,l=>{var a;return i.isValidElement(l)?i.cloneElement(l,{size:(a=l.props.size)!=null?a:18}):l})})):_.jsx(V,d(u({$level:o,$ghost:e,$active:n,$size:g,disabled:r,"aria-describedby":f,"aria-disabled":r,"aria-label":b,"aria-labelledby":x,ref:F,role:"button",type:m,onClick:y},h),{children:i.Children.map(C,l=>{var a;return i.isValidElement(l)?i.cloneElement(l,{size:(a=l.props.size)!=null?a:18}):l})}))});exports.Button=M;
+`,M=i.forwardRef((D,F)=>{var w=D,{level:o="primary",ghost:e=!1,disabled:r=!1,active:n=!1,size:p="default",href:g,ariaDescribedBy:f,ariaLabel:b,ariaLabelledBy:x,children:C,onClick:$,type:m="button"}=w,h=z(w,["level","ghost","disabled","active","size","href","ariaDescribedBy","ariaLabel","ariaLabelledBy","children","onClick","type"]);const y=l=>{r||$===void 0||$(l)};return g!==void 0?_.jsx(B,d(u({$level:o,$ghost:e,$active:n,$size:p,disabled:r,"aria-describedby":f,"aria-disabled":r,"aria-label":b,"aria-labelledby":x,ref:F,role:"button",type:m,onClick:y,href:r?void 0:g},h),{children:i.Children.map(C,l=>{var a;return i.isValidElement(l)?i.cloneElement(l,{size:(a=l.props.size)!=null?a:18}):l})})):_.jsx(V,d(u({$level:o,$ghost:e,$active:n,$size:p,disabled:r,"aria-describedby":f,"aria-disabled":r,"aria-label":b,"aria-labelledby":x,ref:F,role:"button",type:m,onClick:y},h),{children:i.Children.map(C,l=>{var a;return i.isValidElement(l)?i.cloneElement(l,{size:(a=l.props.size)!=null?a:18}):l})}))});exports.Button=M;

lib/components/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-"use strict";var S=Object.defineProperty,T=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var y=(e,o,r)=>o in e?S(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,u=(e,o)=>{for(var r in o||(o={}))$.call(o,r)&&y(e,r,o[r]);if(i)for(var r of i(o))p.call(o,r)&&y(e,r,o[r]);return e},f=(e,o)=>T(e,D(o));var v=(e,o)=>{var r={};for(var t in e)$.call(e,t)&&o.indexOf(t)<0&&(r[t]=e[t]);if(e!=null&&i)for(var t of i(e))o.indexOf(t)<0&&p.call(e,t)&&(r[t]=e[t]);return r};var c=require("react/jsx-runtime"),F=require("react"),s=require("styled-components"),a=require("../../theme/theme.js"),M=require("../../icons/CheckIcon.js"),K=require("../../icons/CheckPartialIcon.js"),m=require("../../hooks/useId.js"),L=require("../../hooks/useShortcut.js"),A=require("../../shared/key.js");function I(e){return e&&e.__esModule?e:{default:e}}var B=I(F),n=I(s);const E=s.keyframes`
+"use strict";var S=Object.defineProperty,T=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var l=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var y=(e,o,r)=>o in e?S(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,u=(e,o)=>{for(var r in o||(o={}))$.call(o,r)&&y(e,r,o[r]);if(l)for(var r of l(o))p.call(o,r)&&y(e,r,o[r]);return e},f=(e,o)=>T(e,D(o));var v=(e,o)=>{var r={};for(var t in e)$.call(e,t)&&o.indexOf(t)<0&&(r[t]=e[t]);if(e!=null&&l)for(var t of l(e))o.indexOf(t)<0&&p.call(e,t)&&(r[t]=e[t]);return r};var c=require("react/jsx-runtime"),F=require("react"),s=require("styled-components"),a=require("../../theme/theme.js"),M=require("../../icons/CheckIcon.js"),K=require("../../icons/CheckPartialIcon.js"),m=require("../../hooks/useId.js"),L=require("../../hooks/useShortcut.js"),A=require("../../shared/key.js");function I(e){return e&&e.__esModule?e:{default:e}}var B=I(F),n=I(s);const E=s.keyframes`
   to {
     stroke-dashoffset: 0;
   }
@@ -20,7 +20,7 @@
   background-color: transparent;
   height: 20px;
   width: 20px;
-  border: 1px solid ${a.getColor("blue100")};
+  border: 1px solid ${a.getColor("grey80")};
   border-radius: 3px;
   overflow: hidden;
   background-color: ${a.getColor("grey20")};
@@ -43,14 +43,13 @@
     `}
 
   ${e=>e.checked&&e.readOnly&&s.css`
-      background-color: ${a.getColor("grey20")};
-      border-color: ${a.getColor("grey40")};
-      color: ${a.getColor("grey40")};
+      background-color: ${a.getColor("blue20")};
+      border-color: ${a.getColor("blue40")};
     `}
 
   ${e=>!e.checked&&e.readOnly&&s.css`
-      background-color: ${a.getColor("grey20")};
-      border-color: ${a.getColor("grey40")};
+      background-color: ${a.getColor("grey60")};
+      border-color: ${a.getColor("grey100")};
     `}
 `,N=n.default.label`
   color: ${a.getColor("grey140")};
@@ -61,4 +60,4 @@
   ${e=>e.readOnly&&s.css`
       color: ${a.getColor("grey100")};
     `}
-`,O=B.default.forwardRef((Q,z)=>{var h=Q,{checked:e=!1,onChange:o,readOnly:r=!1,children:t,title:_,"aria-label":w,tabIndex:k}=h,j=v(h,["checked","onChange","readOnly","children","title","aria-label","tabIndex"]);const b=m.useId("checkbox_"),g=m.useId("label_"),x=e===!0,C=e==="mixed",d=l=>{if(!(!o||r)){switch(e){case!0:o(!1,l);break;case"mixed":case!1:o(!0,l);break}l.preventDefault(),l.stopPropagation()}},P=L.useShortcut(A.Key.Space,d,z),R=t?{"aria-labelledby":g,id:b}:{};return c.jsxs(H,f(u({},j),{children:[c.jsx(J,f(u({checked:x||C,readOnly:r,title:_,role:"checkbox",ref:P,"aria-checked":x,tabIndex:k!==void 0?k:r?-1:0,onClick:d,"aria-label":w},R),{children:C?c.jsx(K.CheckPartialIcon,{size:18}):c.jsx(q,{size:18})})),t?c.jsx(N,{onClick:d,id:g,readOnly:r,htmlFor:b,children:t}):null]}))});exports.Checkbox=O;
+`,O=B.default.forwardRef((Q,z)=>{var b=Q,{checked:e=!1,onChange:o,readOnly:r=!1,children:t,title:_,"aria-label":w,tabIndex:k}=b,j=v(b,["checked","onChange","readOnly","children","title","aria-label","tabIndex"]);const h=m.useId("checkbox_"),g=m.useId("label_"),x=e===!0,C=e==="mixed",d=i=>{if(!(!o||r)){switch(e){case!0:o(!1,i);break;case"mixed":case!1:o(!0,i);break}i.preventDefault(),i.stopPropagation()}},P=L.useShortcut(A.Key.Space,d,z),R=t?{"aria-labelledby":g,id:h}:{};return c.jsxs(H,f(u({},j),{children:[c.jsx(J,f(u({checked:x||C,readOnly:r,title:_,role:"checkbox",ref:P,"aria-checked":x,tabIndex:k!==void 0?k:r?-1:0,onClick:d,"aria-label":w},R),{children:C?c.jsx(K.CheckPartialIcon,{size:18}):c.jsx(q,{size:18})})),t?c.jsx(N,{onClick:d,id:g,readOnly:r,htmlFor:h,children:t}):null]}))});exports.Checkbox=O;

lib/components/Collapse/Collapse.js

@@ -1,6 +1,6 @@
 "use strict";var P=Object.defineProperty,S=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var l=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var p=(e,o,t)=>o in e?P(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,C=(e,o)=>{for(var t in o||(o={}))m.call(o,t)&&p(e,t,o[t]);if(l)for(var t of l(o))v.call(o,t)&&p(e,t,o[t]);return e},w=(e,o)=>S(e,k(o));var I=(e,o)=>{var t={};for(var r in e)m.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&l)for(var r of l(e))o.indexOf(r)<0&&v.call(e,r)&&(t[r]=e[r]);return t};var n=require("react/jsx-runtime"),i=require("react"),z=require("styled-components"),s=require("../../theme/theme.js"),N=require("../IconButton/IconButton.js"),B=require("../../icons/CheckPartialIcon.js"),D=require("../../icons/PlusIcon.js");function $(e){return e&&e.__esModule?e:{default:e}}var L=$(i),a=$(z);const b=100,M=a.default.div`
   width: 100%;
-  border: solid ${s.getColor("grey",60)};
+  border: solid ${s.getColor("grey",40)};
   border-width: 0 0 1px 0;
 
   &:first-child {

lib/components/IconCard/IconCard.js

@@ -1,6 +1,6 @@
-"use strict";var k=Object.defineProperty,j=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var c=(e,o,r)=>o in e?k(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,u=(e,o)=>{for(var r in o||(o={}))s.call(o,r)&&c(e,r,o[r]);if(a)for(var r of a(o))g.call(o,r)&&c(e,r,o[r]);return e},x=(e,o)=>j(e,_(o));var f=(e,o)=>{var r={};for(var i in e)s.call(e,i)&&o.indexOf(i)<0&&(r[i]=e[i]);if(e!=null&&a)for(var i of a(e))o.indexOf(i)<0&&g.call(e,i)&&(r[i]=e[i]);return r};var l=require("react/jsx-runtime"),p=require("react"),v=require("styled-components"),t=require("../../theme/theme.js");function C(e){return e&&e.__esModule?e:{default:e}}var b=C(p),n=C(v);const z=n.default.div`
+"use strict";var k=Object.defineProperty,j=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var a=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var c=(e,o,r)=>o in e?k(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,u=(e,o)=>{for(var r in o||(o={}))s.call(o,r)&&c(e,r,o[r]);if(a)for(var r of a(o))g.call(o,r)&&c(e,r,o[r]);return e},x=(e,o)=>j(e,_(o));var b=(e,o)=>{var r={};for(var i in e)s.call(e,i)&&o.indexOf(i)<0&&(r[i]=e[i]);if(e!=null&&a)for(var i of a(e))o.indexOf(i)<0&&g.call(e,i)&&(r[i]=e[i]);return r};var l=require("react/jsx-runtime"),p=require("react"),v=require("styled-components"),t=require("../../theme/theme.js");function C(e){return e&&e.__esModule?e:{default:e}}var f=C(p),n=C(v);const z=n.default.div`
   min-height: 80px;
-  border: 1px ${t.getColor("grey",60)} solid;
+  border: 1px ${t.getColor("grey",40)} solid;
   box-sizing: border-box;
   display: -ms-flexbox;
   display: inline-flex;
@@ -10,7 +10,7 @@
 }
 
 :hover {
-  border-color: ${({disabled:e})=>!e&&t.getColor("grey",100)};
+  border-color: ${({disabled:e})=>!e&&t.getColor("grey",60)};
   background: ${({disabled:e})=>!e&&t.getColor("grey",20)};
 }
 
@@ -46,7 +46,7 @@
   overflow: hidden;
   word-break: break-word;
 `,R=n.default.div`
-  color: ${t.getColor("grey",140)};
+  color: ${t.getColor("brand",100)};
   font-size: ${t.getFontSize("big")};
   margin-bottom: 2px;
 
@@ -60,4 +60,4 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 20px;
-`,G=b.default.forwardRef((M,h)=>{var d=M,{icon:e,label:o,content:r,onClick:i,disabled:y=!1}=d,$=f(d,["icon","label","content","onClick","disabled"]);const w=p.isValidElement(e)&&b.default.cloneElement(e,{size:30});return l.jsxs(z,x(u({role:"button",ref:h,disabled:y,onClick:i},$),{children:[l.jsx(I,{children:w}),l.jsxs(q,{children:[l.jsx(R,{children:o}),r&&l.jsx(E,{children:r})]})]}))});exports.IconCard=G;exports.IconCardGrid=F;
+`,G=f.default.forwardRef((M,h)=>{var d=M,{icon:e,label:o,content:r,onClick:i,disabled:y=!1}=d,$=b(d,["icon","label","content","onClick","disabled"]);const w=p.isValidElement(e)&&f.default.cloneElement(e,{size:30});return l.jsxs(z,x(u({role:"button",ref:h,disabled:y,onClick:i},$),{children:[l.jsx(I,{children:w}),l.jsxs(q,{children:[l.jsx(R,{children:o}),r&&l.jsx(E,{children:r})]})]}))});exports.IconCard=G;exports.IconCardGrid=F;

lib/components/Information/Information.js

@@ -1,11 +1,11 @@
-"use strict";var y=Object.defineProperty,_=Object.defineProperties;var $=Object.getOwnPropertyDescriptors;var l=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var s=(e,t,r)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,f=(e,t)=>{for(var r in t||(t={}))g.call(t,r)&&s(e,r,t[r]);if(l)for(var r of l(t))c.call(t,r)&&s(e,r,t[r]);return e},u=(e,t)=>_(e,$(t));var p=(e,t)=>{var r={};for(var i in e)g.call(e,i)&&t.indexOf(i)<0&&(r[i]=e[i]);if(e!=null&&l)for(var i of l(e))t.indexOf(i)<0&&c.call(e,i)&&(r[i]=e[i]);return r};var a=require("react/jsx-runtime"),h=require("react"),b=require("styled-components"),n=require("../../theme/theme.js");function m(e){return e&&e.__esModule?e:{default:e}}var x=m(h),o=m(b);const j=o.default.div`
+"use strict";var y=Object.defineProperty,_=Object.defineProperties;var $=Object.getOwnPropertyDescriptors;var l=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var s=(e,t,r)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,u=(e,t)=>{for(var r in t||(t={}))g.call(t,r)&&s(e,r,t[r]);if(l)for(var r of l(t))c.call(t,r)&&s(e,r,t[r]);return e},f=(e,t)=>_(e,$(t));var p=(e,t)=>{var r={};for(var i in e)g.call(e,i)&&t.indexOf(i)<0&&(r[i]=e[i]);if(e!=null&&l)for(var i of l(e))t.indexOf(i)<0&&c.call(e,i)&&(r[i]=e[i]);return r};var a=require("react/jsx-runtime"),h=require("react"),b=require("styled-components"),n=require("../../theme/theme.js");function m(e){return e&&e.__esModule?e:{default:e}}var x=m(h),o=m(b);const j=o.default.div`
   align-items: stretch;
   display: flex;
   font-weight: 400;
   padding-right: 15px;
   color: ${n.getColor("grey120")};
   min-height: 100px;
-  background-color: ${n.getColor("brand20")};
+  background-color: ${n.getColor("blue10")};
 `,q=o.default.span`
   min-height: 80px;
   display: flex;
@@ -19,6 +19,6 @@
   font-weight: 700;
 `,I=o.default.div`
   padding: 20px 0px;
-`,R=x.default.forwardRef((H,v)=>{var d=H,{illustration:e,title:t,children:r}=d,i=p(d,["illustration","title","children"]);const C=h.isValidElement(e)&&x.default.cloneElement(e,{size:80});return a.jsxs(j,u(f({ref:v},i),{children:[a.jsx(q,{children:C}),a.jsxs(I,{children:[a.jsx(z,{children:t}),r]})]}))}),w=o.default.span`
+`,R=x.default.forwardRef((H,v)=>{var d=H,{illustration:e,title:t,children:r}=d,i=p(d,["illustration","title","children"]);const C=h.isValidElement(e)&&x.default.cloneElement(e,{size:80});return a.jsxs(j,f(u({ref:v},i),{children:[a.jsx(q,{children:C}),a.jsxs(I,{children:[a.jsx(z,{children:t}),r]})]}))}),w=o.default.span`
   color: ${n.getColor("brand",100)};
 `;exports.HighlightTitle=w;exports.Information=R;

lib/components/List/List.js

@@ -15,16 +15,16 @@
           width: ${e}px;
         `};
 `,w=r.default(f)`
-  color: ${s.getColor("grey",140)};
-  font-weight: bold;
+  color: ${s.getColor("purple",100)};
+  font-style: italic;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 `,A=r.default(f)`
   opacity: 0;
   display: flex;
   gap: 10px;
-`,E=r.default(f)``,h=l=>{var o=l,{children:e}=o,t=c(o,["children"]);return a.jsx(E,p(u({width:"auto"},t),{children:e}))},F=r.default.div`
+`,E=r.default(f)``,R=l=>{var o=l,{children:e}=o,t=c(o,["children"]);return a.jsx(E,p(u({width:"auto"},t),{children:e}))},F=r.default.div`
   display: flex;
   margin-left: 30px;
   gap: 10px;
@@ -68,4 +68,4 @@
   flex-direction: column;
   gap: 4px;
   margin-bottom: 10px;
-`,z=g=>{var n=g,{children:e,isMultiline:t=!1,isSelected:l=!1}=n,o=c(n,["children","isMultiline","isSelected"]);const y=[],$=[],b=[];return C.default.Children.forEach(e,i=>{m.isValidElement(i)&&(i.type===h||i.type===R)?y.push(i):m.isValidElement(i)&&i.type===N?b.push(i):$.push(i)}),a.jsxs(M,p(u({isMultiline:t,tabIndex:0,isSelected:l},o),{children:[a.jsxs(S,{children:[a.jsx(G,{children:$}),y.length>0&&a.jsx(F,{children:y})]}),b]}))},B=g=>{var n=g,{title:e,width:t,children:l}=n,o=c(n,["title","width","children"]);return e=e===void 0&&typeof l=="string"?l:e,a.jsx(f,p(u({width:t,title:e},o),{children:l}))},R=l=>{var o=l,{children:e}=o,t=c(o,["children"]);const g=C.default.Children.map(e,n=>C.default.isValidElement(n)&&(n.type===k.Button||n.type===D.IconButton)?C.default.cloneElement(n,{size:"small",ghost:!0,level:"tertiary"}):n);return a.jsx(A,p(u({},t),{children:g}))},d=l=>{var o=l,{children:e}=o,t=c(o,["children"]);return a.jsx(H,p(u({},t),{children:e}))};z.displayName="List.Row";B.displayName="List.Cell";w.displayName="List.TitleCell";R.displayName="List.ActionCell";h.displayName="List.RemoveCell";d.Row=z;d.Cell=B;d.TitleCell=w;d.ActionCell=R;d.RemoveCell=h;d.RowHelpers=N;exports.List=d;
+`,z=y=>{var n=y,{children:e,isMultiline:t=!1,isSelected:l=!1}=n,o=c(n,["children","isMultiline","isSelected"]);const g=[],$=[],b=[];return C.default.Children.forEach(e,i=>{m.isValidElement(i)&&(i.type===R||i.type===h)?g.push(i):m.isValidElement(i)&&i.type===N?b.push(i):$.push(i)}),a.jsxs(M,p(u({isMultiline:t,tabIndex:0,isSelected:l},o),{children:[a.jsxs(S,{children:[a.jsx(G,{children:$}),g.length>0&&a.jsx(F,{children:g})]}),b]}))},B=y=>{var n=y,{title:e,width:t,children:l}=n,o=c(n,["title","width","children"]);return e=e===void 0&&typeof l=="string"?l:e,a.jsx(f,p(u({width:t,title:e},o),{children:l}))},h=l=>{var o=l,{children:e}=o,t=c(o,["children"]);const y=C.default.Children.map(e,n=>C.default.isValidElement(n)&&(n.type===k.Button||n.type===D.IconButton)?C.default.cloneElement(n,{size:"small",ghost:!0,level:"tertiary"}):n);return a.jsx(A,p(u({},t),{children:y}))},d=l=>{var o=l,{children:e}=o,t=c(o,["children"]);return a.jsx(H,p(u({},t),{children:e}))};z.displayName="List.Row";B.displayName="List.Cell";w.displayName="List.TitleCell";h.displayName="List.ActionCell";R.displayName="List.RemoveCell";d.Row=z;d.Cell=B;d.TitleCell=w;d.ActionCell=h;d.RemoveCell=R;d.RowHelpers=N;exports.List=d;