@kvdbil/components 15.1.4 → 16.0.0

package/esm/components/DayPicker/style.js

@@ -55,7 +55,7 @@ import{css as o}from"styled-components";var r=o`
     background-position: center;
     background-size: 50%;
     background-repeat: no-repeat;
-    color: ${({theme:e})=>e.colors.gray.light1};
+    color: ${({theme:e})=>e.colors.grayscaleToned.light1};
     cursor: pointer;
   }
 
@@ -100,11 +100,11 @@ import{css as o}from"styled-components";var r=o`
   }
 
   .DayPicker-Weekday {
-    color: ${({theme:e})=>e.colors.gray.light1};
+    color: ${({theme:e})=>e.colors.grayscaleToned.light1};
     width: 35px;
     display: table-cell;
     padding: 0.5em;
-    color: ${({theme:e})=>e.colors.gray.light1};
+    color: ${({theme:e})=>e.colors.grayscaleToned.light1};
     text-align: center;
     font-size: 0.875em;
   }
@@ -150,8 +150,8 @@ import{css as o}from"styled-components";var r=o`
     display: table-cell;
     padding: 0.5em;
     min-width: 1em;
-    border-right: 1px solid ${({theme:e})=>e.colors.gray.light5};
-    color: ${({theme:e})=>e.colors.gray.light5};
+    border-right: 1px solid ${({theme:e})=>e.colors.grayscaleToned.light5};
+    color: ${({theme:e})=>e.colors.grayscaleToned.light5};
     vertical-align: middle;
     text-align: right;
     font-size: 0.75em;
@@ -179,7 +179,7 @@ import{css as o}from"styled-components";var r=o`
   /* Default modifiers */
 
   .DayPicker-Day--outside {
-    color: ${({theme:e})=>e.colors.gray.light2} !important;
+    color: ${({theme:e})=>e.colors.grayscaleToned.light2} !important;
     cursor: default;
   }
 
@@ -199,7 +199,7 @@ import{css as o}from"styled-components";var r=o`
   /* Example modifiers */
 
   .DayPicker-Day--sunday {
-    background-color: ${({theme:e})=>e.colors.gray.light6};
+    background-color: ${({theme:e})=>e.colors.grayscaleToned.light6};
   }
 
   .DayPicker-Day--selected.DayPicker-Day--today {
@@ -207,7 +207,7 @@ import{css as o}from"styled-components";var r=o`
   }
 
   .DayPicker-Day--sunday:not(.DayPicker-Day--today) {
-    color: ${({theme:e})=>e.colors.gray.light5};
+    color: ${({theme:e})=>e.colors.grayscaleToned.light5};
   }
 
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
@@ -216,7 +216,7 @@ import{css as o}from"styled-components";var r=o`
     position: relative;
 
     background-color: ${({theme:e})=>e.colors.info.main};
-    color: ${({theme:e})=>e.colors.gray.light6};
+    color: ${({theme:e})=>e.colors.grayscaleToned.light6};
   }
 
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(

package/esm/components/EditRow/index.js

@@ -1,6 +1,6 @@
-import{jsxs as m,Fragment as Q,jsx as t}from"react/jsx-runtime";import{useState as s,useEffect as R}from"react";import i from"styled-components";import v from"../../theme.js";import{BodyLink as U,BodyText as V}from"../../typography/BodyText/index.js";import{Button as f}from"../Button/index.js";import{Chip as W}from"../Chip/index.js";import{TextField as X}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../shared/helpers.js";const Y=i.div`
+import{jsxs as m,Fragment as Q,jsx as t}from"react/jsx-runtime";import{useState as s,useEffect as R}from"react";import i from"styled-components";import v from"../../theme.js";import{BodyLink as U,BodyText as V}from"../../typography/BodyText/index.js";import{Button as f}from"../Button/index.js";import{Chip as W}from"../Chip/index.js";import{TextField as X}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../shared/helpers.js";const Y=i.div`
   display: flex;
-  border-bottom: 1px solid ${v.colors.gray.light5};
+  border-bottom: 1px solid ${v.colors.grayscaleToned.light5};
 `,Z=i.form`
   flex: 1;
   flex-direction: column;
@@ -31,4 +31,4 @@ import{jsxs as m,Fragment as Q,jsx as t}from"react/jsx-runtime";import{useState
   flex-wrap: wrap;
 `,ee=i(W)`
   margin: 0.5rem;
-`,re=({value:p,label:d,onChange:w,onEdit:u,options:j=[],inputProps:E={},isClearable:T=!1,isEditionDisabled:k=!1,editText:D,saveText:F,cancelText:S,noValueText:B,formatterFunc:h,isSingleSelect:I,color:c="secondary",isInitialEditing:$})=>{const[r,o]=s(p),[H,J]=s(p),[l,x]=s(!!$),a=typeof r=="string",K=h&&a?h?.(r):r,L=a?K:r.join(", "),g=r.length>0;R(()=>u?.(l),[u,l]);const b=()=>{l?o(H):J(r),x(e=>!e)},N=e=>{e.preventDefault(),w?.(r),x(!1)},O=e=>{if(typeof r!="object")throw new Error("Cannot toggle chip on other than array");if(I){if(r.includes(e)&&T){o([]);return}o([e]);return}if(r.includes(e)){const n=r.filter(P=>P!==e);o(n);return}o(n=>[...n,e])};return m(Y,{children:[!l&&m(Q,{children:[t(y,{children:d}),g&&t(C,{children:L}),!g&&t(G,{children:B}),t(f,{variant:"flat",color:c,onClick:b,isDisabled:k,children:D})]}),l&&m(Z,{onSubmit:N,children:[t(y,{children:d}),a&&t(_,{...E,autoFocus:!0,value:r,label:d,onChange:e=>o(e.target.value)}),!a&&t(M,{children:j.map(e=>t(ee,{color:c,onClick:n=>{n.preventDefault(),O(e)},variant:r.includes(e)?"solid":"outline",children:e},e))}),m(q,{children:[t(A,{type:"button",variant:"flat",color:"neutral",onClick:b,children:S}),t(z,{type:"submit",color:c,children:F})]})]})]})};export{re as default};
+`,re=({value:p,label:d,onChange:w,onEdit:u,options:T=[],inputProps:j={},isClearable:E=!1,isEditionDisabled:k=!1,editText:D,saveText:F,cancelText:S,noValueText:B,formatterFunc:h,isSingleSelect:I,color:c="secondary",isInitialEditing:$})=>{const[r,o]=s(p),[H,J]=s(p),[l,x]=s(!!$),a=typeof r=="string",K=h&&a?h?.(r):r,L=a?K:r.join(", "),g=r.length>0;R(()=>u?.(l),[u,l]);const b=()=>{l?o(H):J(r),x(e=>!e)},N=e=>{e.preventDefault(),w?.(r),x(!1)},O=e=>{if(typeof r!="object")throw new Error("Cannot toggle chip on other than array");if(I){if(r.includes(e)&&E){o([]);return}o([e]);return}if(r.includes(e)){const n=r.filter(P=>P!==e);o(n);return}o(n=>[...n,e])};return m(Y,{children:[!l&&m(Q,{children:[t(y,{children:d}),g&&t(C,{children:L}),!g&&t(G,{children:B}),t(f,{variant:"flat",color:c,onClick:b,isDisabled:k,children:D})]}),l&&m(Z,{onSubmit:N,children:[t(y,{children:d}),a&&t(_,{...j,autoFocus:!0,value:r,label:d,onChange:e=>o(e.target.value)}),!a&&t(M,{children:T.map(e=>t(ee,{color:c,onClick:n=>{n.preventDefault(),O(e)},variant:r.includes(e)?"solid":"outline",children:e},e))}),m(q,{children:[t(A,{type:"button",variant:"flat",color:"neutral",onClick:b,children:S}),t(z,{type:"submit",color:c,children:F})]})]})]})};export{re as default};

package/esm/components/FieldLabel.js

@@ -1,37 +1,37 @@
-import s,{css as t}from"styled-components";import{BodyTextStyle as i}from"../typography/BodyText/index.js";import"react/jsx-runtime";import"../shared/media-queries.js";const l=(o,r)=>t`
-  transform: translateY(${o});
+import a,{css as t}from"styled-components";import{BodyTextStyle as i}from"../typography/BodyText/index.js";import"react/jsx-runtime";import"../shared/media-queries.js";const l=(e,o)=>t`
+  transform: translateY(${e});
   line-height: 0.875rem;
   font-size: 0.75rem;
   transform-origin: 0 0;
   padding: 0 5px;
   left: 0.5rem;
-  color: ${({theme:e})=>r?e.colors.error.dark:e.colors.text.dark};
+  color: ${({theme:r})=>o?r.colors.error.dark:r.colors.text.dark};
 `,n=t`
-  color: ${({theme:o,hasError:r})=>r?o.colors.error.dark:o.colors.text.dark};
+  color: ${({theme:e,hasError:o})=>o?e.colors.error.dark:e.colors.text.dark};
 `,c=t`
-  color: ${({theme:o})=>o.colors.gray.light1};
+  color: ${({theme:e})=>e.colors.text.disabled};
 `,d=t`
   width: max-content;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-`,h=s.label`
+`,h=a.label`
   ${i}
   pointer-events: none;
   position: absolute;
   max-width: calc(100% - 2rem);
   z-index: 1;
-  top: ${({height:o})=>o?`${o}rem`:"0.75rem"};
+  top: ${({height:e})=>e?`${e}rem`:"0.75rem"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-  color: ${({theme:o})=>o.colors.gray.dark5};
+  color: ${({theme:e})=>e.colors.text.dark};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   background: transparent;
 
-  ${({theme:o,hasValue:r,isFocused:e})=>(r||e)&&`
+  ${({theme:e,hasValue:o,isFocused:r})=>(o||r)&&`
   span {
     display: block;
     width: 100%;
@@ -39,13 +39,13 @@ import s,{css as t}from"styled-components";import{BodyTextStyle as i}from"../typ
     position: absolute;
     top: 5px;
     left: 0;
-    background-color: ${o.colors.background.light};
+    background-color: ${e.colors.background.light};
     z-index: -1;
   }
   `}
 
-  ${({hasValue:o,isFocused:r,height:e=.7,hasError:a})=>(o||r)&&l(`-${e+.4}rem`,a)}
-  ${({centered:o,hasValue:r,isFocused:e})=>(r||e)&&o&&d}
-  ${({isFocused:o})=>o&&n}
-  ${({disabled:o})=>o&&c}
+  ${({hasValue:e,isFocused:o,height:r=.7,hasError:s})=>(e||o)&&l(`-${r+.4}rem`,s)}
+  ${({centered:e,hasValue:o,isFocused:r})=>(o||r)&&e&&d}
+  ${({isFocused:e})=>e&&n}
+  ${({disabled:e})=>e&&c}
 `;export{h as Label};

package/esm/components/Icon/index.js

@@ -1,7 +1,7 @@
-import{jsxs as c,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState as x}from"react";import i from"styled-components";import{Caption as b}from"../../typography/BodyText/index.js";import{Title as h}from"../../typography/Heading/index.js";import p from"../../theme.js";import{Snackbar as k}from"../Snackbar/index.js";import"../../shared/media-queries.js";import"../Icons/CheckCircle.js";import"../Icons/Close.js";import"../Icons/ErrorCircle.js";import"../Icons/InfoCircle.js";import"react-transition-group";const w=i.div`
+import{jsxs as c,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState as x}from"react";import i from"styled-components";import{Caption as h}from"../../typography/BodyText/index.js";import{Title as b}from"../../typography/Heading/index.js";import p from"../../theme.js";import{Snackbar as k}from"../Snackbar/index.js";import"../../shared/media-queries.js";import"../Icons/CheckCircle.js";import"../Icons/Close.js";import"../Icons/ErrorCircle.js";import"../Icons/InfoCircle.js";import"react-transition-group";import"../../utils/utils.js";const w=i.div`
   margin: 0 auto;
   max-width: 700px;
-`,y=i(h)`
+`,y=i(b)`
   margin: 0.5rem;
 `,O=i.ul`
   display: flex;
@@ -16,11 +16,11 @@ import{jsxs as c,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState
   align-items: center;
   width: calc(25% - 2px - 1.5rem);
   padding: 0 0.25rem;
-  border: 1px solid ${p.colors.gray.dark5};
+  border: 1px solid ${({theme:r})=>r.colors.grayscaleToned.dark5};
   border-radius: 3px;
   margin: 0.5rem;
   cursor: pointer;
-`,C=i(b)`
+`,C=i(h)`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;

package/esm/components/IconButton.js

@@ -1,10 +1,10 @@
-import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled-components";const b=a`
+import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled-components";import{resolveColorWithNeutral as b}from"../utils/utils.js";const m=a`
   background-color: transparent;
-`,s="400ms",m="1500ms",f="750ms",c=a`
-  background-color: ${({theme:e,color:r})=>e.colors[r].main};
+`,l="400ms",f="1500ms",k="750ms",r=a`
+  background-color: ${({theme:e,color:c})=>b(e,c).main};
   opacity: 0.1;
-  ${e=>e.isDisabled&&b};
-`,k=n.div`
+  ${e=>e.isDisabled&&m};
+`,v=n.div`
   cursor: ${e=>e.isDisabled?"default":"pointer"};
   outline: none;
 
@@ -19,23 +19,23 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
 
   :hover {
     .button-background {
-      transition: background-color ${s};
-      ${c}
+      transition: background-color ${l};
+      ${r}
     }
   }
 
   :focus {
     .button-background {
-      transition: background-color ${s};
-      animation: FocusRipple ${m} 0ms infinite alternate-reverse;
-      ${c}
+      transition: background-color ${l};
+      animation: FocusRipple ${f} 0ms infinite alternate-reverse;
+      ${r}
     }
   }
 
   :active {
     .button-background {
-      animation: ActiveRipple ${f};
-      ${c}
+      animation: ActiveRipple ${k};
+      ${r}
     }
   }
 
@@ -62,7 +62,7 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
       clip-path: circle(50%);
     }
   }
-`,g=n.div`
+`,h=n.div`
   top: 0;
   left: 0;
 
@@ -72,4 +72,4 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
 
   position: absolute;
   border-radius: 10rem;
-`,h=({children:e,isActive:r,isDisabled:i,onClick:t,noTabIndex:l=!1,color:p})=>u(k,{color:p,isActive:r,isDisabled:i,onClick:o=>{o.stopPropagation(),o.preventDefault(),o.persist(),!i&&typeof t=="function"&&t(o)},onKeyDown:o=>{o.key==="Enter"&&!i&&typeof t=="function"&&(o.persist(),t(o))},tabIndex:i||l?void 0:0,children:[d(g,{className:"button-background"}),e]});export{c as BackgroundStyles,h as default};
+`,g=({children:e,isActive:c,isDisabled:i,onClick:t,noTabIndex:s=!1,color:p})=>u(v,{color:p,isActive:c,isDisabled:i,onClick:o=>{o.stopPropagation(),o.preventDefault(),o.persist(),!i&&typeof t=="function"&&t(o)},onKeyDown:o=>{o.key==="Enter"&&!i&&typeof t=="function"&&(o.persist(),t(o))},tabIndex:i||s?void 0:0,children:[d(h,{className:"button-background"}),e]});export{r as BackgroundStyles,g as default};

package/esm/components/Logo/LogoEn.js

@@ -1 +1 @@
-import{jsxs as H,jsx as C}from"react/jsx-runtime";import o from"../../theme.js";const i=({color:l=o.colors.neutral.main})=>H("svg",{viewBox:"0 0 622 223",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"kvdlogo-en",children:[C("title",{id:"kvdlogo-en",children:"kvdcars.com"}),C("path",{d:"M563.63 130.23C561.82 127.17 559.53 124.57 556.81 122.52C554.18 120.54 551.29 118.87 548.23 117.57C545.36 116.35 542.64 115.15 540.14 113.99C537.8 112.9 535.83 111.71 534.29 110.44C533.08 109.44 532.52 108.24 532.52 106.67C532.52 105.1 533 103.96 534.02 103.11C535.07 102.24 536.56 101.77 538.46 101.73L561.94 109.52V87.83L560.57 87.35C556.81 86.02 553.15 84.93 549.69 84.12C546.16 83.29 542.26 82.86 538.12 82.86C533.98 82.86 530.19 83.43 526.85 84.55C523.47 85.69 520.55 87.34 518.16 89.44C515.76 91.56 513.88 94.13 512.56 97.09C511.24 100.04 510.58 103.34 510.58 106.9C510.58 111.77 511.52 115.84 513.38 118.99C515.2 122.07 517.48 124.61 520.18 126.56C522.79 128.44 525.66 130 528.73 131.18C531.61 132.3 534.3 133.42 536.71 134.52C539.01 135.57 540.96 136.75 542.49 138.01C543.7 139.01 544.26 140.31 544.26 142.11C544.26 144.1 543.67 145.47 542.4 146.43C541.05 147.45 539.09 147.99 536.59 148.04L511.34 139.22V161.63L512.59 162.16C515.97 163.59 519.84 164.8 524.09 165.77C528.38 166.75 532.95 167.24 537.67 167.24C541.8 167.24 545.64 166.67 549.08 165.55C552.56 164.42 555.62 162.77 558.18 160.64C560.78 158.48 562.82 155.81 564.26 152.7C565.69 149.6 566.42 146.03 566.42 142.1C566.44 137.37 565.49 133.38 563.63 130.23Z",fill:l}),C("path",{d:"M124.01 84.33H99.02L77.58 114.92V56.04H55.16V166.56H77.58V132.24L101.06 166.56H127.94L96.57 123.5L124.01 84.33Z",fill:l}),C("path",{d:"M235.3 144.12C224.78 144.12 216.25 135.59 216.25 125.07C216.25 114.55 224.78 106.02 235.3 106.02C245.83 106.02 254.35 114.55 254.35 125.07C254.35 135.59 245.82 144.12 235.3 144.12ZM255.53 88.9C249.48 85.46 242.49 83.5 235.04 83.5C212.11 83.5 193.52 102.09 193.52 125.02C193.52 147.95 212.11 166.54 235.04 166.54C242.49 166.54 249.49 164.58 255.53 161.14V166.56H277.95V56.04H255.53V88.9Z",fill:l}),C("path",{d:"M175.62 84.33L161.08 131.23L146.54 84.33H124.32L149.81 166.56H150.13H172.04H172.35L197.84 84.33H175.62Z",fill:l}),C("path",{d:"M411.58 144.12C401.06 144.12 392.53 135.59 392.53 125.07C392.53 114.55 401.06 106.02 411.58 106.02C422.1 106.02 430.63 114.55 430.63 125.07C430.63 135.59 422.11 144.12 411.58 144.12ZM411.31 83.5C388.38 83.5 369.79 102.08 369.79 125.01C369.79 147.94 388.38 166.53 411.31 166.53C418.86 166.53 425.94 164.52 432.04 161V166.55H454.46V84.33H432.04V89.03C425.94 85.52 418.86 83.5 411.31 83.5Z",fill:l}),C("path",{d:"M342.97 130.89C340.51 138.56 333.32 144.12 324.83 144.12C314.3 144.12 305.78 135.59 305.78 125.07C305.78 114.55 314.31 106.02 324.83 106.02C333.59 106.02 340.95 111.94 343.18 120H366.04C363.56 99.44 346.06 83.5 324.84 83.5C301.91 83.5 283.33 102.09 283.33 125.01C283.33 147.94 301.9 166.52 324.84 166.52C345.77 166.52 363.08 151.02 365.93 130.88H342.97V130.89Z",fill:l}),C("path",{d:"M505.29 83.5C498.52 83.5 492.15 85.14 486.5 88.01V84.33H464.08V166.55H486.5V161.92V125.07H486.51C486.51 114.55 495.04 106.02 505.56 106.02C505.95 106.02 506.34 106.06 506.72 106.08V83.55C506.25 83.53 505.77 83.5 505.29 83.5Z",fill:l})]});export{i as default};
+import{jsxs as H,jsx as C}from"react/jsx-runtime";import o from"../../theme.js";const t=({color:l=o.colors.text.dark})=>H("svg",{viewBox:"0 0 622 223",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"kvdlogo-en",children:[C("title",{id:"kvdlogo-en",children:"kvdcars.com"}),C("path",{d:"M563.63 130.23C561.82 127.17 559.53 124.57 556.81 122.52C554.18 120.54 551.29 118.87 548.23 117.57C545.36 116.35 542.64 115.15 540.14 113.99C537.8 112.9 535.83 111.71 534.29 110.44C533.08 109.44 532.52 108.24 532.52 106.67C532.52 105.1 533 103.96 534.02 103.11C535.07 102.24 536.56 101.77 538.46 101.73L561.94 109.52V87.83L560.57 87.35C556.81 86.02 553.15 84.93 549.69 84.12C546.16 83.29 542.26 82.86 538.12 82.86C533.98 82.86 530.19 83.43 526.85 84.55C523.47 85.69 520.55 87.34 518.16 89.44C515.76 91.56 513.88 94.13 512.56 97.09C511.24 100.04 510.58 103.34 510.58 106.9C510.58 111.77 511.52 115.84 513.38 118.99C515.2 122.07 517.48 124.61 520.18 126.56C522.79 128.44 525.66 130 528.73 131.18C531.61 132.3 534.3 133.42 536.71 134.52C539.01 135.57 540.96 136.75 542.49 138.01C543.7 139.01 544.26 140.31 544.26 142.11C544.26 144.1 543.67 145.47 542.4 146.43C541.05 147.45 539.09 147.99 536.59 148.04L511.34 139.22V161.63L512.59 162.16C515.97 163.59 519.84 164.8 524.09 165.77C528.38 166.75 532.95 167.24 537.67 167.24C541.8 167.24 545.64 166.67 549.08 165.55C552.56 164.42 555.62 162.77 558.18 160.64C560.78 158.48 562.82 155.81 564.26 152.7C565.69 149.6 566.42 146.03 566.42 142.1C566.44 137.37 565.49 133.38 563.63 130.23Z",fill:l}),C("path",{d:"M124.01 84.33H99.02L77.58 114.92V56.04H55.16V166.56H77.58V132.24L101.06 166.56H127.94L96.57 123.5L124.01 84.33Z",fill:l}),C("path",{d:"M235.3 144.12C224.78 144.12 216.25 135.59 216.25 125.07C216.25 114.55 224.78 106.02 235.3 106.02C245.83 106.02 254.35 114.55 254.35 125.07C254.35 135.59 245.82 144.12 235.3 144.12ZM255.53 88.9C249.48 85.46 242.49 83.5 235.04 83.5C212.11 83.5 193.52 102.09 193.52 125.02C193.52 147.95 212.11 166.54 235.04 166.54C242.49 166.54 249.49 164.58 255.53 161.14V166.56H277.95V56.04H255.53V88.9Z",fill:l}),C("path",{d:"M175.62 84.33L161.08 131.23L146.54 84.33H124.32L149.81 166.56H150.13H172.04H172.35L197.84 84.33H175.62Z",fill:l}),C("path",{d:"M411.58 144.12C401.06 144.12 392.53 135.59 392.53 125.07C392.53 114.55 401.06 106.02 411.58 106.02C422.1 106.02 430.63 114.55 430.63 125.07C430.63 135.59 422.11 144.12 411.58 144.12ZM411.31 83.5C388.38 83.5 369.79 102.08 369.79 125.01C369.79 147.94 388.38 166.53 411.31 166.53C418.86 166.53 425.94 164.52 432.04 161V166.55H454.46V84.33H432.04V89.03C425.94 85.52 418.86 83.5 411.31 83.5Z",fill:l}),C("path",{d:"M342.97 130.89C340.51 138.56 333.32 144.12 324.83 144.12C314.3 144.12 305.78 135.59 305.78 125.07C305.78 114.55 314.31 106.02 324.83 106.02C333.59 106.02 340.95 111.94 343.18 120H366.04C363.56 99.44 346.06 83.5 324.84 83.5C301.91 83.5 283.33 102.09 283.33 125.01C283.33 147.94 301.9 166.52 324.84 166.52C345.77 166.52 363.08 151.02 365.93 130.88H342.97V130.89Z",fill:l}),C("path",{d:"M505.29 83.5C498.52 83.5 492.15 85.14 486.5 88.01V84.33H464.08V166.55H486.5V161.92V125.07H486.51C486.51 114.55 495.04 106.02 505.56 106.02C505.95 106.02 506.34 106.06 506.72 106.08V83.55C506.25 83.53 505.77 83.5 505.29 83.5Z",fill:l})]});export{t as default};

package/esm/components/Logo/LogoSv.js

@@ -1 +1 @@
-import{jsxs as H,jsx as C}from"react/jsx-runtime";import i from"../../theme.js";const o=({color:l=i.colors.neutral.main})=>H("svg",{viewBox:"0 0 492 223",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"kvdlogo-sv",children:[C("title",{id:"kvdlogo-sv",children:"kvd.se"}),C("path",{d:"M124.94 84.11H99.78L78.2 114.91V55.63H55.63V166.89H78.2V132.34L101.83 166.89H128.89L97.32 123.54L124.94 84.11Z",fill:l}),C("path",{d:"M393.79 87.26C389.7 87.26 385.88 86.1 382.64 84.1H382.51V166.88H405.08V84.1H404.95C401.69 86.1 397.87 87.26 393.79 87.26Z",fill:l}),C("path",{d:"M436.21 55.59H413.64V166.89H436.21V55.59Z",fill:l}),C("path",{d:"M393.79 49.9C384.96 49.9 377.77 57.09 377.77 65.92C377.77 74.75 384.95 81.94 393.79 81.94C402.63 81.94 409.81 74.76 409.81 65.92C409.8 57.09 402.62 49.9 393.79 49.9ZM393.79 72.85C389.97 72.85 386.86 69.74 386.86 65.92C386.86 62.1 389.97 58.99 393.79 58.99C397.61 58.99 400.72 62.1 400.72 65.92C400.72 69.74 397.61 72.85 393.79 72.85Z",fill:l}),C("path",{d:"M336.08 83.27C328.48 83.27 321.36 85.3 315.22 88.84V55.63H292.65V166.89H315.22V161.3C321.36 164.84 328.49 166.87 336.08 166.87C359.16 166.87 377.88 148.16 377.88 125.07C377.87 101.98 359.16 83.27 336.08 83.27ZM335.81 144.3C325.22 144.3 316.63 135.71 316.63 125.12C316.63 114.53 325.22 105.94 335.81 105.94C346.4 105.94 354.99 114.53 354.99 125.12C354.99 135.71 346.4 144.3 335.81 144.3Z",fill:l}),C("path",{d:"M257.34 88.71C251.25 85.25 244.21 83.27 236.71 83.27C213.62 83.27 194.91 101.98 194.91 125.07C194.91 148.15 213.62 166.87 236.71 166.87C244.21 166.87 251.25 164.89 257.34 161.43V166.89H279.91V55.63H257.34V88.71ZM236.98 144.3C226.39 144.3 217.8 135.71 217.8 125.12C217.8 114.53 226.39 105.94 236.98 105.94C247.57 105.94 256.16 114.53 256.16 125.12C256.16 135.71 247.57 144.3 236.98 144.3Z",fill:l}),C("path",{d:"M176.9 84.11L162.26 131.32L147.62 84.11H125.25L150.92 166.89H151.23H173.29H173.6L199.27 84.11H176.9Z",fill:l})]});export{o as default};
+import{jsxs as H,jsx as C}from"react/jsx-runtime";import t from"../../theme.js";const o=({color:l=t.colors.text.dark})=>H("svg",{viewBox:"0 0 492 223",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"kvdlogo-sv",children:[C("title",{id:"kvdlogo-sv",children:"kvd.se"}),C("path",{d:"M124.94 84.11H99.78L78.2 114.91V55.63H55.63V166.89H78.2V132.34L101.83 166.89H128.89L97.32 123.54L124.94 84.11Z",fill:l}),C("path",{d:"M393.79 87.26C389.7 87.26 385.88 86.1 382.64 84.1H382.51V166.88H405.08V84.1H404.95C401.69 86.1 397.87 87.26 393.79 87.26Z",fill:l}),C("path",{d:"M436.21 55.59H413.64V166.89H436.21V55.59Z",fill:l}),C("path",{d:"M393.79 49.9C384.96 49.9 377.77 57.09 377.77 65.92C377.77 74.75 384.95 81.94 393.79 81.94C402.63 81.94 409.81 74.76 409.81 65.92C409.8 57.09 402.62 49.9 393.79 49.9ZM393.79 72.85C389.97 72.85 386.86 69.74 386.86 65.92C386.86 62.1 389.97 58.99 393.79 58.99C397.61 58.99 400.72 62.1 400.72 65.92C400.72 69.74 397.61 72.85 393.79 72.85Z",fill:l}),C("path",{d:"M336.08 83.27C328.48 83.27 321.36 85.3 315.22 88.84V55.63H292.65V166.89H315.22V161.3C321.36 164.84 328.49 166.87 336.08 166.87C359.16 166.87 377.88 148.16 377.88 125.07C377.87 101.98 359.16 83.27 336.08 83.27ZM335.81 144.3C325.22 144.3 316.63 135.71 316.63 125.12C316.63 114.53 325.22 105.94 335.81 105.94C346.4 105.94 354.99 114.53 354.99 125.12C354.99 135.71 346.4 144.3 335.81 144.3Z",fill:l}),C("path",{d:"M257.34 88.71C251.25 85.25 244.21 83.27 236.71 83.27C213.62 83.27 194.91 101.98 194.91 125.07C194.91 148.15 213.62 166.87 236.71 166.87C244.21 166.87 251.25 164.89 257.34 161.43V166.89H279.91V55.63H257.34V88.71ZM236.98 144.3C226.39 144.3 217.8 135.71 217.8 125.12C217.8 114.53 226.39 105.94 236.98 105.94C247.57 105.94 256.16 114.53 256.16 125.12C256.16 135.71 247.57 144.3 236.98 144.3Z",fill:l}),C("path",{d:"M176.9 84.11L162.26 131.32L147.62 84.11H125.25L150.92 166.89H151.23H173.29H173.6L199.27 84.11H176.9Z",fill:l})]});export{o as default};

package/esm/components/NotificationButton/index.js

@@ -1,4 +1,4 @@
-import{jsxs as n,jsx as i}from"react/jsx-runtime";import t from"styled-components";import{Badge as p}from"../Badge/index.js";import{Button as d}from"../Button/index.js";import"../../theme.js";import"react";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const m=t.div`
+import{jsxs as n,jsx as i}from"react/jsx-runtime";import t from"styled-components";import{Badge as p}from"../Badge/index.js";import{Button as d}from"../Button/index.js";import"../../theme.js";import"react";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const m=t.div`
   position: relative;
   display: inline-block;
 `,e=t(p)`

package/esm/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-import{jsxs as b,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as m}from"../../typography/BodyText/index.js";import{BackgroundStyles as x}from"../IconButton.js";import"../../shared/media-queries.js";const $=s`
+import{jsxs as b,jsx as l}from"react/jsx-runtime";import i,{css as s}from"styled-components";import{generateNameHash as u}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import{BackgroundStyles as x}from"../IconButton.js";import"../../shared/media-queries.js";import"../../utils/utils.js";const $=s`
   .circle {
     &--outer {
       height: 24px;
@@ -29,21 +29,21 @@ import{jsxs as b,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
 
   .circle {
     &--inner {
-      background-color: ${e.colors.gray.light1};
+      background-color: ${e.colors.grayscaleToned.light1};
     }
 
     &--outer {
-      border: 2px solid ${e.colors.gray.light1};
+      border: 2px solid ${e.colors.grayscaleToned.light1};
     }
   }
 `,k=s`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${e.colors.gray.light1};
+      background-color: ${e.colors.grayscaleToned.light1};
     }
   }
-`,D=(r,i)=>s`
+`,D=(r,o)=>s`
   .circle {
     &--inner {
       opacity: 1;
@@ -52,14 +52,14 @@ import{jsxs as b,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
 
     &--outer {
       border: 2px solid
-        ${i?e.colors.error.dark:e.colors[r].main};
+        ${o?e.colors.error.dark:e.colors[r].main};
     }
   }
-`,z=o.div`
+`,z=i.div`
   display: flex;
   align-items: center;
   box-sizing: border-box;
-`,E=o.span`
+`,T=i.span`
   cursor: pointer;
   display: flex;
   position: relative;
@@ -72,7 +72,7 @@ import{jsxs as b,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
   ${r=>r.isDisabled&&y};
 
   ${r=>r.isChecked&&r.isDisabled&&k};
-`,v=o.input`
+`,E=i.input`
   position: absolute;
   opacity: 0;
   margin: 0;
@@ -84,26 +84,26 @@ import{jsxs as b,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
     transition: background-color 400ms;
     ${x}
   }
-`,w=o.span`
+`,v=i.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
   border: 2px solid
-    ${r=>r.$hasError?e.colors.error.dark:e.colors.gray.light1};
-`,B=o.span`
+    ${r=>r.$hasError?e.colors.error.dark:e.colors.grayscaleToned.light1};
+`,w=i.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
   border-radius: 50%;
-  background-color: ${e.colors.gray.light1};
+  background-color: ${e.colors.grayscaleToned.light1};
 
   position: absolute;
   top: 0;
   left: 0;
-`,C=o(m)`
+`,B=i(g)`
   cursor: ${({isDisabled:r})=>r?"default":"pointer"};
   user-select: none;
-  color: ${({theme:r,isDisabled:i})=>i?r.colors.text.disabled:r.colors.text.dark};
+  color: ${({theme:r,isDisabled:o})=>o?r.colors.text.disabled:r.colors.text.dark};
   margin-left: 0.5rem;
-`,p=({name:r=g("radio-button"),size:i="regular",checked:c=!1,isDisabled:a=!1,color:t="secondary",label:d,hasError:n,...u})=>b(z,{children:[b(E,{size:i,color:t,isChecked:c,isDisabled:a,$hasError:n,children:[l(v,{"data-validate":"checked",checked:c,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":c,className:"circle circle--outer",$size:i,isDisabled:a,color:t,...u}),l(w,{className:"circle circle--outer",$hasError:n,children:l(B,{className:"circle circle--inner"})})]}),d&&l(C,{as:"label",htmlFor:r,isDisabled:a,children:d})]});export{p as RadioButton,p as default};
+`,p=({name:r=u("radio-button"),size:o="regular",checked:c=!1,isDisabled:a=!1,color:t="secondary",label:d,hasError:n,...m})=>b(z,{children:[b(T,{size:o,color:t,isChecked:c,isDisabled:a,$hasError:n,children:[l(E,{"data-validate":"checked",checked:c,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":c,className:"circle circle--outer",$size:o,isDisabled:a,color:t,...m}),l(v,{className:"circle circle--outer",$hasError:n,children:l(w,{className:"circle circle--inner"})})]}),d&&l(B,{as:"label",htmlFor:r,isDisabled:a,children:d})]});export{p as RadioButton,p as default};

package/esm/components/Select/index.js

@@ -1,29 +1,29 @@
-import{jsxs as u,jsx as t,Fragment as N}from"react/jsx-runtime";import{useState as F}from"react";import R from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import e from"../../theme.js";import{CaptionStyle as H}from"../../typography/BodyText/index.js";import{Label as M}from"../FieldLabel.js";import"../../shared/media-queries.js";const W=m.div`
+import{jsxs as u,jsx as a,Fragment as M}from"react/jsx-runtime";import{useState as F}from"react";import N from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import r from"../../theme.js";import{CaptionStyle as R}from"../../typography/BodyText/index.js";import{Label as H}from"../FieldLabel.js";import"../../shared/media-queries.js";const W=m.div`
   font-family: ${({theme:o})=>o.typography.fontBaseFamily};
   position: relative;
-`,D=o=>o&&{paddingLeft:"2.5rem"},j=o=>o&&{border:`1px solid ${e.colors.gray.light1}`,color:e.colors.gray.dark1,fill:e.colors.gray.light1},A=o=>o&&{border:`2px solid ${e.colors.error.dark}`},_=m.div`
+`,T=o=>o&&{paddingLeft:"2.5rem"},j=o=>o&&{border:`1px solid ${r.colors.grayscaleToned.light1}`,color:r.colors.grayscaleToned.dark1,fill:r.colors.grayscaleToned.light1},A=o=>o&&{border:`2px solid ${r.colors.error.dark}`},_=m.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
   margin: 0.35rem 0.75rem;
 
-  fill: ${e.colors.gray.dark5};
+  fill: ${r.colors.grayscaleToned.dark5};
   transition: ${S};
 
-  ${o=>o.isDisabled&&` fill: ${e.colors.gray.light1}; `}
+  ${o=>o.isDisabled&&` fill: ${r.colors.grayscaleToned.light1}; `}
 
   ${o=>o.isFocused&&` fill: ${o.theme.colors.text.dark}; `}
 `,P=m.span`
-  ${H}
+  ${R}
   display: block;
   margin-top: 0.25rem;
-  color: ${({hasError:o})=>o?e.colors.error.dark:e.colors.text.disabled};
-`,V=o=>u("svg",{...o,children:[t("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:t("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),t("use",{xlinkHref:"#icon-arrow"})]}),G=m(V)`
+  color: ${({hasError:o})=>o?r.colors.error.dark:r.colors.text.disabled};
+`,V=o=>u("svg",{...o,children:[a("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:a("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),a("use",{xlinkHref:"#icon-arrow"})]}),G=m(V)`
   width: 0.75rem;
   height: 0.75rem;
   margin: 0;
   ${o=>o.$isFocused&&`color: ${o.$theme.colors.text.dark}`}
-  ${o=>o.$isDisabled&&`color: ${o.$theme.colors.gray.dark1}`}
+  ${o=>o.$isDisabled&&`color: ${o.$theme.colors.grayscaleToned.dark1}`}
 
 
   path {
@@ -36,4 +36,4 @@ import{jsxs as u,jsx as t,Fragment as N}from"react/jsx-runtime";import{useState
   transform: ${o=>o.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
 
   transform-origin: 50% 60%;
-`,U=(o,l)=>l?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,Z=({selectProps:{menuIsOpen:o=!1},isFocused:l=!1,isDisabled:p})=>t(G,{$isDisabled:p,$isFocused:l,$isMenuOpen:o,$theme:e});function w({className:o,color:l="primary",forwardRef:p,hasError:s=!1,height:n,helperText:f,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,b]=F(!1),[T,B]=F(""),z=(r,a)=>{C(r,a),B(r)},$=({isSelected:r,isFocused:a,isDisabled:h})=>r?e.colors[l].main:h?e.colors.background.light:a?e.colors.background.gray:e.colors.background.light,E=r=>{b(!0),v(r)},O=r=>{b(!1),L(r)},x=U(c,s),y=!i.label;return u(W,{className:o,children:[!y&&i.label&&t(M,{htmlFor:g,height:n,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:s,children:u(N,{children:[i.label,t("span",{})]})}),i.prefix&&t(_,{isDisabled:d,isFocused:c,children:i.prefix}),t(R,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:O,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...j(d),...A(s),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const a={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return y?{...a,color:e.colors.text.dark,fontWeight:600}:{...a,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:a,isFocused:h,isDisabled:k})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:k?"not-allowed":"pointer","&:hover":{background:$({isSelected:a,isFocused:!0,isDisabled:k})},background:$({isSelected:a,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:n?`${n-1}rem 0 `:0,height:n?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:Z,...i.components??{}}}),f&&t(P,{hasError:s,children:f})]})}export{w as Select,w as default};
+`,U=(o,t)=>t?r.colors.error.main:o?r.colors.text.dark:r.colors.grayscaleToned.light1,Z=({selectProps:{menuIsOpen:o=!1},isFocused:t=!1,isDisabled:p})=>a(G,{$isDisabled:p,$isFocused:t,$isMenuOpen:o,$theme:r});function D({className:o,color:t="primary",forwardRef:p,hasError:s=!1,height:n,helperText:f,isDisabled:d=!1,onBlur:w=()=>null,onFocus:L=()=>null,onInputChange:v=()=>null,placeholder:C="",name:g,...i}){const[c,b]=F(!1),[I,B]=F(""),z=(e,l)=>{v(e,l),B(e)},$=({isSelected:e,isFocused:l,isDisabled:h})=>e?r.colors[t].main:h?r.colors.background.light:l?r.colors.background.gray:r.colors.background.light,E=e=>{b(!0),L(e)},O=e=>{b(!1),w(e)},x=U(c,s),y=!i.label;return u(W,{className:o,children:[!y&&i.label&&a(H,{htmlFor:g,height:n,isFocused:c,hasValue:!!(i.value||I),disabled:d,theme:r,hasError:s,children:u(M,{children:[i.label,a("span",{})]})}),i.prefix&&a(_,{isDisabled:d,isFocused:c,children:i.prefix}),a(N,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:C,onFocus:E,onBlur:O,styles:{control:e=>({...e,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:r.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...j(d),...A(s),...T(!!i.prefix)}),input:e=>({...e,height:"auto",margin:0,padding:0}),placeholder:e=>{const l={...e,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return y?{...l,color:r.colors.text.dark,fontWeight:600}:{...l,display:c?"static":"none"}},menuList:e=>({...e,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:e=>({...e,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(e,{isSelected:l,isFocused:h,isDisabled:k})=>({...e,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:k?"not-allowed":"pointer","&:hover":{background:$({isSelected:l,isFocused:!0,isDisabled:k})},background:$({isSelected:l,isFocused:h}),...T(!!i.prefix)}),valueContainer:e=>({...e,position:"static",padding:n?`${n-1}rem 0 `:0,height:n?"auto":"1.5rem"}),clearIndicator:e=>({...e,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:Z,...i.components??{}}}),f&&a(P,{hasError:s,children:f})]})}export{D as Select,D as default};

package/esm/components/Snackbar/index.js

@@ -1,16 +1,16 @@
-import{jsx as e,jsxs as $}from"react/jsx-runtime";import{useEffect as b}from"react";import n,{css as t}from"styled-components";import r from"../../theme.js";import k from"../Icons/CheckCircle.js";import v from"../Icons/Close.js";import E from"../Icons/ErrorCircle.js";import w from"../Icons/InfoCircle.js";import{CSSTransition as B}from"react-transition-group";const C={top:t`
+import{jsx as t,jsxs as y}from"react/jsx-runtime";import{useEffect as $}from"react";import n,{css as r}from"styled-components";import b from"../Icons/CheckCircle.js";import v from"../Icons/Close.js";import k from"../Icons/ErrorCircle.js";import E from"../Icons/InfoCircle.js";import{CSSTransition as w}from"react-transition-group";import{resolveColorWithNeutral as C}from"../../utils/utils.js";const B={top:r`
     top: 0;
-  `,bottom:t`
+  `,bottom:r`
     bottom: 0;
-  `},O={right:t`
+  `},N={right:r`
     right: 0;
-  `,center:t`
+  `,center:r`
     left: 50%;
     transform: translate(-50%, 0);
-  `,left:t`
+  `,left:r`
     left: 0;
-  `},g=200,i="anim",S=n.div`
-  font-family: ${({theme:o})=>o.typography.fontBaseFamily};
+  `},s=200,i="anim",O=n.div`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: fixed;
   display: flex;
   align-items: center;
@@ -23,17 +23,17 @@ import{jsx as e,jsxs as $}from"react/jsx-runtime";import{useEffect as b}from"rea
   border-radius: 0.4rem;
   padding: 1.15rem 1.25rem;
 
-  font-weight: ${({theme:o})=>o.typography.fontBaseBoldWeight};
+  font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
   font-size: 0.875rem;
 
-  box-shadow: ${r.elevations.elevation8};
-  background-color: ${o=>o.color!=="none"?r.colors[o.color].main:r.colors.background.light};
-  color: ${o=>o.color!=="none"?r.colors.text.light:r.colors.text.dark};
+  box-shadow: ${({theme:e})=>e.elevations.elevation8};
+  background-color: ${({theme:e,color:o})=>o!=="none"?C(e,o).main:e.colors.background.light};
+  color: ${({theme:e,color:o})=>o!=="none"?e.colors.text.light:e.colors.text.dark};
 
-  ${o=>C[o.origin.vertical||"bottom"]}
-  ${o=>O[o.origin.horizontal||"left"]}
+  ${e=>B[e.origin.vertical||"bottom"]}
+  ${e=>N[e.origin.horizontal||"left"]}
 
-  transition: opacity ${g}ms ease-in;
+  transition: opacity ${s}ms ease-in;
 
   &.${i}-enter {
     opacity: 0;
@@ -47,19 +47,19 @@ import{jsx as e,jsxs as $}from"react/jsx-runtime";import{useEffect as b}from"rea
   &.${i}-exit-active {
     opacity: 0;
   }
-`,p=n.div`
+`,g=n.div`
   display: inline-flex;
   margin: -0.25rem 0;
   margin-right: 0.75rem;
 
-  ${o=>o.type==="text"&&"margin-right: 0;"}
+  ${e=>e.type==="text"&&"margin-right: 0;"}
 
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    fill: ${o=>o.color!=="none"?r.colors.background.light:r.colors.background.dark};
+    fill: ${({theme:e,color:o})=>o!=="none"?e.colors.background.light:e.colors.background.dark};
   }
-`,N=n(p)`
+`,S=n(g)`
   cursor: pointer;
 
   /* Bigger click area */
@@ -75,4 +75,4 @@ import{jsx as e,jsxs as $}from"react/jsx-runtime";import{useEffect as b}from"rea
   }
 `,T=n.span`
   flex: 1;
-`,j={error:e(E,{}),success:e(k,{}),info:e(w,{}),text:""},d=({message:o,color:a="none",type:l="info",action:c,isOpen:f,origin:h={},onClose:m=()=>{},onExited:u=()=>{},autoHideDuration:s=4e3,...x})=>(b(()=>{const y=setTimeout(m,s);return()=>clearTimeout(y)},[s,m]),e(B,{in:f,timeout:g,mountOnEnter:!0,unmountOnExit:!0,onExited:u,classNames:i,children:$(S,{...x,color:a,origin:h,children:[e(p,{color:a,type:l,children:j[l]}),e(T,{children:o}),c&&c,e(N,{color:a??"none",onClick:m,children:e(v,{})})]})}));export{d as Snackbar,d as default};
+`,W={error:t(k,{}),success:t(b,{}),info:t(E,{}),text:""},h=({message:e,color:o="none",type:a="info",action:l,isOpen:p,origin:d={},onClose:m=()=>{},onExited:f=()=>{},autoHideDuration:c=4e3,...u})=>($(()=>{const x=setTimeout(m,c);return()=>clearTimeout(x)},[c,m]),t(w,{in:p,timeout:s,mountOnEnter:!0,unmountOnExit:!0,onExited:f,classNames:i,children:y(O,{...u,color:o,origin:d,children:[t(g,{color:o,type:a,children:W[a]}),t(T,{children:e}),l&&l,t(S,{color:o??"none",onClick:m,children:t(v,{})})]})}));export{h as Snackbar,h as default};

package/esm/components/Spinner/index.js

@@ -1,19 +1,19 @@
-import{jsx as s}from"react/jsx-runtime";import t,{keyframes as l}from"styled-components";import m from"../../theme.js";const d=e=>{const r={slow:"2s",default:"1s",fast:"0.5s"};return r[e]||r.default},o=e=>{const r={smaller:1,small:2,regular:3,large:4};return typeof e=="number"?e:r[e]||r.regular},n=l`
+import{jsx as l}from"react/jsx-runtime";import s,{keyframes as m}from"styled-components";import d from"../../theme.js";import{neutralColorSwap as n}from"../../utils/utils.js";const u=e=>{const r={slow:"2s",default:"1s",fast:"0.5s"};return r[e]||r.default},o=e=>{const r={smaller:1,small:2,regular:3,large:4};return typeof e=="number"?e:r[e]||r.regular},f=m`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`,f=t.div`
+`,p=s.div`
   display: inline-block;
   border-radius: 50%;
-  border-top: ${({theme:e,color:r,size:a})=>`${o(a)/10}em solid ${e.colors?.[r]?.main??r}`};
+  border-top: ${({theme:e,color:r,customColor:a,size:t})=>`${o(t)/10}em solid ${a??r==="neutral"?n(e).main:e.colors?.[r]?.main}`};
   border-bottom: ${({size:e})=>`${o(e)/10}em solid rgba(0, 0, 0, 0.1);`};
   border-right: ${({size:e})=>`${o(e)/10}em solid rgba(0, 0, 0, 0.1);`};
   border-left: ${({size:e})=>`${o(e)/10}em solid rgba(0, 0, 0, 0.1);`};
   width: ${({size:e})=>o(e)}em;
   height: ${({size:e})=>o(e)}em;
-  animation: ${n} ${({speed:e})=>d(e)} infinite linear;
+  animation: ${f} ${({speed:e})=>u(e)} infinite linear;
   will-change: transform;
-`,u=({size:e="regular",color:r="primary",speed:a="default",...i})=>s(f,{"aria-label":"loading",role:"status","aria-live":"polite","aria-busy":"true",...i,size:e,speed:a,color:r,theme:m});export{u as default};
+`,$=({size:e="regular",color:r="primary",speed:a="default",customColor:t,...i})=>l(p,{"aria-label":"loading",role:"status","aria-live":"polite","aria-busy":"true",...i,size:e,speed:a,color:r,customColor:t,theme:d});export{$ as default};

package/esm/components/SpinnerThin/index.js

@@ -1,6 +1,6 @@
-import{jsxs as d,jsx as e}from"react/jsx-runtime";import o from"styled-components";import l from"../../icons/components/CheckmarkIcon.js";import p from"../../icons/components/CloseIcon.js";import f from"../Spinner/index.js";import"../../theme.js";const h=o.div`
+import{jsxs as l,jsx as e}from"react/jsx-runtime";import o from"styled-components";import d from"../../icons/components/CheckmarkIcon.js";import p from"../../icons/components/CloseIcon.js";import f from"../Spinner/index.js";import"../../theme.js";import"../../utils/utils.js";const c=o.div`
   position: absolute;
-`,$=o(f)`
+`,h=o(f)`
   position: absolute;
 
   ${({size:i})=>i&&`
@@ -16,7 +16,7 @@ import{jsxs as d,jsx as e}from"react/jsx-runtime";import o from"styled-component
 
   ${({isLoading:i,theme:t})=>!i&&`
         animation: none;
-        border: 1px solid ${t.colors.gray.dark3};
+        border: 1px solid ${t.colors.grayscaleToned.dark3};
     `}
 `,s=o.div`
   position: absolute;
@@ -35,4 +35,4 @@ import{jsxs as d,jsx as e}from"react/jsx-runtime";import o from"styled-component
 
   transition: opacity 500ms ease-in-out;
   opacity: ${({isDone:i,isError:t})=>!i&&!t?"0":"1"};
-`,n=({isLoading:i=!0,isDone:t=!1,isError:a=!1,size:r=3.5,...m})=>d(h,{"data-testid":"spinner-thin","aria-label":"Loading...",children:[e(s,{size:r,isDone:t,children:e(l,{})}),e(s,{isClose:!0,size:r,isError:a,children:e(p,{})}),e($,{size:r,speed:"fast",color:"neutral",isLoading:i,...m})]});export{n as SpinnerThin,n as default};
+`,n=({isLoading:i=!0,isDone:t=!1,isError:a=!1,size:r=3.5,...m})=>l(c,{"data-testid":"spinner-thin","aria-label":"Loading...",children:[e(s,{size:r,isDone:t,children:e(d,{})}),e(s,{isClose:!0,size:r,isError:a,children:e(p,{})}),e(h,{size:r,speed:"fast",color:"neutral",isLoading:i,...m})]});export{n as SpinnerThin,n as default};

package/esm/components/Switcher/index.js

@@ -4,7 +4,7 @@ import{jsx as l}from"react/jsx-runtime";import a from"styled-components";import
   border-radius: 12px;
   border: none;
   padding: 2px;
-  background-color: ${({selected:o,disabled:e,color:d})=>e?r.colors.gray.light3:o?r.colors[d]?.main:r.colors.gray.dark5};
+  background-color: ${({selected:o,disabled:e,color:d})=>e?r.colors.grayscaleToned.light3:o?r.colors[d]?.main:r.colors.grayscaleToned.dark5};
   display: flex;
   align-items: center;
   justify-content: ${({selected:o})=>o?"flex-end":"flex-start"};
@@ -15,6 +15,9 @@ import{jsx as l}from"react/jsx-runtime";import a from"styled-components";import
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background-color: ${({disabled:o})=>o?r.colors.gray.light6:r.colors.common.white};
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.09), 0 1px 5px rgba(0, 0, 0, 0.15);
-`,i=({selected:o=!1,disabled:e=!1,onToggle:d,color:s="info",...t})=>l(c,{selected:o,disabled:e,color:s,onClick:()=>{!e&&d&&d(!o)},...t,children:l(n,{disabled:e})});export{i as Switcher,i as default};
+  background-color: ${({disabled:o})=>o?r.colors.grayscaleToned.light6:r.colors.common.white};
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.1),
+    0 2px 4px rgba(0, 0, 0, 0.09),
+    0 1px 5px rgba(0, 0, 0, 0.15);
+`,s=({selected:o=!1,disabled:e=!1,onToggle:d,color:i="info",...t})=>l(c,{selected:o,disabled:e,color:i,onClick:()=>{!e&&d&&d(!o)},...t,children:l(n,{disabled:e})});export{s as Switcher,s as default};