@kvdbil/components 16.0.2 → 16.0.3

package/esm/components/Card/index.js

@@ -1,14 +1,14 @@
-import{jsxs as s,jsx as i}from"react/jsx-runtime";import l from"styled-components";import n from"../../theme.js";const c=l.div``,m=l.div`
-  background: ${({topBorder:o})=>o};
+import{jsxs as n,jsx as t}from"react/jsx-runtime";import d from"styled-components";import m from"../../theme.js";const h=d.div``,g=d.div`
+  background: ${({theme:e,$customColor:o,$color:r="secondary",$colorShade:l})=>o||e.colors[r][l]};
   height: 0.25rem;
-`,p=l.div`
-  background: ${n.colors.background.light};
+`,p=d.div`
+  background: ${m.colors.background.light};
 
-  ${({noFrame:o,topBorder:r,lineBorder:e,theme:d})=>!r&&(!o||e)&&`border-top: 1px solid ${d.colors.grayscaleToned.light5};`}
+  ${({noFrame:e,topBorder:o,lineBorder:r,theme:l})=>!o&&(!e||r)&&`border-top: 1px solid ${l.colors.grayscaleToned.light5};`}
 
-  ${({noFrame:o,lineBorder:r,theme:e})=>(!o||r)&&`border-bottom: 1px solid ${e.colors.grayscaleToned.light5};
+  ${({noFrame:e,lineBorder:o,theme:r})=>(!e||o)&&`border-bottom: 1px solid ${r.colors.grayscaleToned.light5};
   `}
 
-  ${({noFrame:o,lineBorder:r,theme:e})=>!o&&!r&&`border-right: 1px solid ${e.colors.grayscaleToned.light5};
-     border-left: 1px solid ${e.colors.grayscaleToned.light5};`}
-`,t=({children:o,topBorder:r,noFrame:e=!1,lineBorder:d=!1,as:a="div"})=>s(c,{as:a,children:[r&&i(m,{topBorder:r}),i(p,{topBorder:r,noFrame:e,lineBorder:d,children:o})]});export{t as Card,t as default};
+  ${({noFrame:e,lineBorder:o,theme:r})=>!e&&!o&&`border-right: 1px solid ${r.colors.grayscaleToned.light5};
+     border-left: 1px solid ${r.colors.grayscaleToned.light5};`}
+`,a=({children:e,topBorder:o,topBorderColor:r,topBorderColorShade:l="mainAlt",noFrame:i=!1,lineBorder:s=!1,as:c="div"})=>n(h,{as:c,children:[(o||r)&&t(g,{$customColor:o,$color:r,$colorShade:l}),t(p,{topBorder:o,noFrame:i,lineBorder:s,children:e})]});export{a as Card,a as default};

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled-components";import m from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as g}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as f}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";import"../../utils/utils.js";const k=r`
+import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled-components";import g from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as $}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as f}from"../../typography/BodyText/index.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";import"../../utils/utils.js";const k=r`
   width: 24px;
   height: 24px;
 
@@ -6,7 +6,7 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
     width: 15px;
     height: 15px;
   }
-`,$=r`
+`,y=r`
   width: 32px;
   height: 32px;
 
@@ -14,10 +14,10 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
     width: 22px;
     height: 22px;
   }
-`,n={regular:k,large:$},y=r`
+`,h={regular:k,large:y},v=r`
   cursor: default;
   border: 2px solid ${i.colors.grayscaleToned.light2};
-`,v=e=>r`
+`,z=(e,o)=>r`
   svg {
     opacity: 1;
   }
@@ -25,12 +25,12 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
   :hover {
   }
 
-  background: ${i.colors[e].main};
-  border: 2px solid ${i.colors[e].main};
-`,z=r`
+  background: ${i.colors[e][o]};
+  border: 2px solid ${i.colors[e][o]};
+`,D=r`
   background: ${i.colors.grayscaleToned.light2};
   z-index: 1;
-`,D=r`
+`,S=r`
   border: 2px solid ${i.colors.error.dark};
 `,w=a.div`
   display: flex;
@@ -47,13 +47,14 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
   outline: none;
   cursor: pointer;
   z-index: 1;
-  ${e=>n[e.boxSize]};
+  ${e=>h[e.boxSize]};
 
-  :focus-visible {
+  &:hover,
+  &:focus {
     transition: background-color 400ms;
     ${u}
   }
-`,S=a.span`
+`,T=a.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -64,21 +65,21 @@ import{jsxs as b,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
 
   border: 2px solid ${i.colors.grayscaleToned.dark5};
 
-  ${e=>n[e.size]};
+  ${e=>h[e.size]};
 
   svg {
     opacity: 0;
     color: ${({theme:e})=>e.colors.common.white};
   }
 
-  ${e=>e.isChecked&&v(e.color)};
-  ${e=>e.isDisabled&&y};
-  ${e=>e.hasError&&D};
-  ${e=>e.isChecked&&e.isDisabled&&z};
-`,T=a(f)`
+  ${e=>e.isChecked&&z(e.$color,e.$colorShade)};
+  ${e=>e.isDisabled&&v};
+  ${e=>e.hasError&&S};
+  ${e=>e.isChecked&&e.isDisabled&&D};
+`,j=a(f)`
   flex: 1;
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,h=({name:e=g("check-box"),isDisabled:o=!1,size:t="regular",checked:l=!1,color:d="secondary",hasError:p=!1,label:c,...x})=>b(w,{children:[s(C,{...x,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,color:d,disabled:o,isDisabled:o,boxSize:t}),s(S,{size:t,color:d,isChecked:l,isDisabled:o,hasError:p,children:s(m,{})}),c&&s(T,{as:"label",htmlFor:e,isDisabled:o,children:c})]});export{h as CheckBox,h as default};
+`,p=({name:e=$("check-box"),isDisabled:o=!1,size:l="regular",checked:t=!1,color:d="secondary",colorShade:c="mainAlt",hasError:x=!1,label:n,...m})=>b(w,{children:[s(C,{...m,type:"checkbox",checked:t,"data-validate":"checked",name:e,id:e,$color:d,$colorShade:c,disabled:o,isDisabled:o,boxSize:l}),s(T,{size:l,$color:d,$colorShade:c,isChecked:t,isDisabled:o,hasError:x,children:s(g,{})}),n&&s(j,{as:"label",htmlFor:e,isDisabled:o,children:n})]});export{p as CheckBox,p as default};

package/esm/components/DayPicker/index.js

@@ -1,4 +1,4 @@
-import{jsx as l}from"react/jsx-runtime";import{useState as p}from"react";import y from"styled-components";import t from"../../theme.js";import{DayPicker as u}from"react-day-picker";import*as c from"date-fns/locale";import{isToday as h}from"date-fns";import k from"./style.js";const g=y.div`
+import{jsx as i}from"react/jsx-runtime";import{useState as y}from"react";import h from"styled-components";import t from"../../theme.js";import{DayPicker as u}from"react-day-picker";import*as m from"date-fns/locale";import{isToday as g}from"date-fns";import k from"./style.js";const D=h.div`
   ${k}
 
   .rdp-chevron {
@@ -6,4 +6,4 @@ import{jsx as l}from"react/jsx-runtime";import{useState as p}from"react";import
   }
 
   font-family: ${({theme:o})=>o.typography.fontAlternativeFamily};
-`,D=(o,r)=>{const e=r&&h(r)?t.colors.background.light:t.colors[o].main;return{selected:{color:t.colors.text.light,background:t.colors[o].main},today:{color:e}}},m=({locale:o="sv",color:r="primary",selectedDay:e,disabledDays:s,...n})=>{const[i,d]=p(e);function f(a){a&&d(a)}return l(g,{children:l(u,{...n,mode:"single",selected:i,onSelect:f,locale:c[o]||c.enGB,modifiersStyles:D(r,i),disabled:s})})};export{m as DayPicker,m as default};
+`,$=(o,r,e)=>{const l=e&&g(e)?t.colors.background.light:t.colors[o][r];return{selected:{color:t.colors.text.light,background:t.colors[o][r]},today:{color:l}}},s=({locale:o="sv",color:r="primary",colorShade:e="mainAlt",selectedDay:l,disabledDays:d,...n})=>{const[a,f]=y(l);function p(c){c&&f(c)}return i(D,{children:i(u,{...n,mode:"single",selected:a,onSelect:p,locale:m[o]||m.enGB,modifiersStyles:$(r,e,a),disabled:d})})};export{s as DayPicker,s as default};

package/esm/components/ErrorMessage/index.js

@@ -1,10 +1,10 @@
-import{jsx as n}from"react/jsx-runtime";import i from"styled-components";const a=i.div`
+import{jsx as n}from"react/jsx-runtime";import a from"styled-components";const i=a.div`
   font-family: ${({theme:e})=>e.typography.fontAlternativeFamily};
   font-weight: ${({theme:e})=>e.typography.fontAlternativeRegularWeight};
-  background: ${({theme:e})=>e.colors.error.main};
-  color: white;
+  background: ${({theme:e})=>e.colors.error.lighter};
+  color: ${({theme:e})=>e.colors.text.dark};
   border-radius: 0.25rem;
   font-size: 13px;
   padding: 10px;
   ${({centered:e})=>e&&"text-align: center;"}
-`,r=({children:e,centered:t,...o})=>n(a,{centered:t,...o,children:e});export{r as ErrorMessage,r as default};
+`,r=({children:e,centered:t,...o})=>n(i,{centered:t,...o,children:e});export{r as ErrorMessage,r as default};

package/esm/components/FieldLabel.js

@@ -1,51 +1,51 @@
-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});
+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,e)=>t`
+  transform: translateY(${o});
   line-height: 0.875rem;
   font-size: 0.75rem;
   transform-origin: 0 0;
   padding: 0 5px;
   left: 0.5rem;
-  color: ${({theme:r})=>o?r.colors.error.dark:r.colors.text.dark};
-`,n=t`
-  color: ${({theme:e,hasError:o})=>o?e.colors.error.dark:e.colors.text.dark};
+  color: ${({theme:r})=>e?r.colors.error.dark:r.colors.text.dark};
 `,c=t`
-  color: ${({theme:e})=>e.colors.text.disabled};
+  color: ${({theme:o,hasError:e})=>e?o.colors.error.dark:o.colors.text.dark};
+`,n=t`
+  color: ${({theme:o})=>o.colors.text.disabled};
 `,d=t`
   width: max-content;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-`,h=a.label`
+`,h=s.label`
   ${i}
   pointer-events: none;
   position: absolute;
   max-width: calc(100% - 2rem);
   z-index: 1;
-  top: ${({height:e})=>e?`${e}rem`:"0.75rem"};
+  top: ${({height:o})=>o?`calc(${o}rem - 5px)`:"12px"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-  color: ${({theme:e})=>e.colors.text.dark};
+  color: ${({theme:o})=>o.colors.text.dark};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   background: transparent;
 
-  ${({theme:e,hasValue:o,isFocused:r})=>(o||r)&&`
+  ${({theme:o,hasValue:e,isFocused:r})=>(e||r)&&`
   span {
     display: block;
     width: 100%;
     height: 8px;
     position: absolute;
-    top: 5px;
+    top: 6px;
     left: 0;
-    background-color: ${e.colors.background.light};
+    background-color: ${o.colors.background.light};
     z-index: -1;
   }
   `}
 
-  ${({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}
+  ${({hasValue:o,isFocused:e,height:r,hasError:a})=>(o||e)&&l(`${r?`calc(-${r}rem - 2px)`:"-18px"}`,a)}
+  ${({centered:o,hasValue:e,isFocused:r})=>(e||r)&&o&&d}
+  ${({isFocused:o})=>o&&c}
+  ${({disabled:o})=>o&&n}
 `;export{h as Label};

package/esm/components/IconButton.js

@@ -1,10 +1,9 @@
-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`
+import{jsxs as u,jsx as b}from"react/jsx-runtime";import n,{css as a}from"styled-components";import{hexToRGB as m,resolveColorWithNeutral as f}from"../utils/utils.js";const h=a`
   background-color: transparent;
-`,l="400ms",f="1500ms",k="750ms",r=a`
-  background-color: ${({theme:e,color:c})=>b(e,c).main};
-  opacity: 0.1;
-  ${e=>e.isDisabled&&m};
-`,v=n.div`
+`,l="400ms",k="1500ms",v="750ms",r=a`
+  background-color: ${({theme:e,$color:c,$colorShade:i})=>m(f(e,c)[i],.1)};
+  ${e=>e.isDisabled&&h};
+`,$=n.div`
   cursor: ${e=>e.isDisabled?"default":"pointer"};
   outline: none;
 
@@ -17,24 +16,24 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
     }
   }
 
-  :hover {
+  &:hover {
     .button-background {
       transition: background-color ${l};
       ${r}
     }
   }
 
-  :focus {
+  &:focus {
     .button-background {
       transition: background-color ${l};
-      animation: FocusRipple ${f} 0ms infinite alternate-reverse;
+      animation: FocusRipple ${k} 0ms infinite alternate-reverse;
       ${r}
     }
   }
 
-  :active {
+  &:active {
     .button-background {
-      animation: ActiveRipple ${k};
+      animation: ActiveRipple ${v};
       ${r}
     }
   }
@@ -62,7 +61,7 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
       clip-path: circle(50%);
     }
   }
-`,h=n.div`
+`,g=n.div`
   top: 0;
   left: 0;
 
@@ -72,4 +71,4 @@ import{jsxs as u,jsx as d}from"react/jsx-runtime";import n,{css as a}from"styled
 
   position: absolute;
   border-radius: 10rem;
-`,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};
+`,y=({children:e,isActive:c,isDisabled:i,onClick:t,noTabIndex:s=!1,color:p,colorShade:d="mainAlt"})=>u($,{$color:p,$colorShade:d,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:[b(g,{className:"button-background"}),e]});export{r as BackgroundStyles,y as default};

package/esm/components/RadioButton/index.js

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

package/esm/components/Select/index.js

@@ -1,7 +1,7 @@
-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`
+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 A}from"../FieldLabel.js";import"../../shared/media-queries.js";const W=m.div`
   font-family: ${({theme:o})=>o.typography.fontBaseFamily};
   position: relative;
-`,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`
+`,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},_=o=>o&&{border:`2px solid ${r.colors.error.dark}`},P=m.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
@@ -13,7 +13,7 @@ import{jsxs as u,jsx as a,Fragment as M}from"react/jsx-runtime";import{useState
   ${o=>o.isDisabled&&` fill: ${r.colors.grayscaleToned.light1}; `}
 
   ${o=>o.isFocused&&` fill: ${o.theme.colors.text.dark}; `}
-`,P=m.span`
+`,U=m.span`
   ${R}
   display: block;
   margin-top: 0.25rem;
@@ -36,4 +36,4 @@ import{jsxs as u,jsx as a,Fragment as M}from"react/jsx-runtime";import{useState
   transform: ${o=>o.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
 
   transform-origin: 50% 60%;
-`,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};
+`,Z=(o,t)=>t?r.colors.error.dark:o?r.colors.text.dark:r.colors.grayscaleToned.light1,q=({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",colorShade:p="mainAlt",forwardRef:w,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),[B,z]=F(""),O=(e,l)=>{C(e,l),z(e)},$=({isSelected:e,isFocused:l,isDisabled:h})=>e?r.colors[t][p]:h?r.colors.background.light:l?r.colors.background.gray:r.colors.background.light,E=e=>{b(!0),v(e)},H=e=>{b(!1),L(e)},x=Z(c,s),y=!i.label;return u(W,{className:o,children:[!y&&i.label&&a(A,{htmlFor:g,height:n,isFocused:c,hasValue:!!(i.value||B),disabled:d,theme:r,hasError:s,children:u(M,{children:[i.label,a("span",{})]})}),i.prefix&&a(P,{isDisabled:d,isFocused:c,children:i.prefix}),a(N,{...i,id:"react-select",inputId:g,name:g,ref:w,isDisabled:d,onInputChange:O,placeholder:I,onFocus:E,onBlur:H,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),..._(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:q,...i.components??{}}}),f&&a(U,{hasError:s,children:f})]})}export{D as Select,D as default};

package/esm/components/Snackbar/index.js

@@ -1,15 +1,15 @@
-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`
+import{jsx as t,jsxs as $}from"react/jsx-runtime";import{useEffect as y}from"react";import n,{css as i}from"styled-components";import v from"../Icons/CheckCircle.js";import b 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:i`
     top: 0;
-  `,bottom:r`
+  `,bottom:i`
     bottom: 0;
-  `},N={right:r`
+  `},N={right:i`
     right: 0;
-  `,center:r`
+  `,center:i`
     left: 50%;
     transform: translate(-50%, 0);
-  `,left:r`
+  `,left:i`
     left: 0;
-  `},s=200,i="anim",O=n.div`
+  `},c=200,o="anim",O=n.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: fixed;
   display: flex;
@@ -27,24 +27,25 @@ import{jsx as t,jsxs as y}from"react/jsx-runtime";import{useEffect as $}from"rea
   font-size: 0.875rem;
 
   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};
+  background-color: ${({theme:e,$color:r})=>r!=="none"?C(e,r).lighter:e.colors.background.light};
+
+  color: ${({theme:e})=>e.colors.text.dark};
 
   ${e=>B[e.origin.vertical||"bottom"]}
   ${e=>N[e.origin.horizontal||"left"]}
 
-  transition: opacity ${s}ms ease-in;
+  transition: opacity ${c}ms ease-in;
 
-  &.${i}-enter {
+  &.${o}-enter {
     opacity: 0;
   }
-  &.${i}-enter-active {
+  &.${o}-enter-active {
     opacity: 1;
   }
-  &.${i}-exit {
+  &.${o}-exit {
     opacity: 1;
   }
-  &.${i}-exit-active {
+  &.${o}-exit-active {
     opacity: 0;
   }
 `,g=n.div`
@@ -57,7 +58,7 @@ import{jsx as t,jsxs as y}from"react/jsx-runtime";import{useEffect as $}from"rea
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    fill: ${({theme:e,color:o})=>o!=="none"?e.colors.background.light:e.colors.background.dark};
+    fill: ${({theme:e})=>e.colors.text.dark};
   }
 `,S=n(g)`
   cursor: pointer;
@@ -75,4 +76,4 @@ import{jsx as t,jsxs as y}from"react/jsx-runtime";import{useEffect as $}from"rea
   }
 `,T=n.span`
   flex: 1;
-`,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};
+`,W={error:t(k,{}),success:t(v,{}),info:t(E,{}),text:""},p=({message:e,color:r="none",type:a="info",action:l,isOpen:h,origin:d={},onClose:m=()=>{},onExited:f=()=>{},autoHideDuration:s=4e3,...u})=>(y(()=>{const x=setTimeout(m,s);return()=>clearTimeout(x)},[s,m]),t(w,{in:h,timeout:c,mountOnEnter:!0,unmountOnExit:!0,onExited:f,classNames:o,children:$(O,{...u,$color:r,origin:d,children:[t(g,{type:a,children:W[a]}),t(T,{children:e}),l&&l,t(S,{onClick:m,children:t(b,{})})]})}));export{p as Snackbar,p as default};

package/esm/components/Spinner/index.js

@@ -1,4 +1,4 @@
-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`
+import{jsx as i}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);
   }
@@ -8,7 +8,7 @@ import{jsx as l}from"react/jsx-runtime";import s,{keyframes as m}from"styled-com
 `,p=s.div`
   display: inline-block;
   border-radius: 50%;
-  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-top: ${({theme:e,color:r,customColor:t,size:a})=>`${o(a)/10}em solid ${t??r==="neutral"?n(e).mainAlt:e.colors?.[r]?.mainAlt}`};
   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);`};
@@ -16,4 +16,4 @@ import{jsx as l}from"react/jsx-runtime";import s,{keyframes as m}from"styled-com
   height: ${({size:e})=>o(e)}em;
   animation: ${f} ${({speed:e})=>u(e)} infinite linear;
   will-change: transform;
-`,$=({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};
+`,$=({size:e="regular",color:r="primary",speed:t="default",customColor:a,...l})=>i(p,{"aria-label":"loading",role:"status","aria-live":"polite","aria-busy":"true",...l,size:e,speed:t,color:r,customColor:a,theme:d});export{$ as default};