@kvdbil/components 16.0.8 → 17.0.0

package/esm/components/Snackbar/index.js

@@ -1,15 +1,15 @@
-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`
+import{jsx as t,jsxs as x}from"react/jsx-runtime";import{useEffect as $}from"react";import a,{css as o}from"styled-components";import{CSSTransition as y}from"react-transition-group";import{resolveColorWithNeutral as v,resetButtonStyle as b}from"../../utils/utils.js";import k from"../../icons/components/AlertIcon.js";import E from"../../icons/components/CheckCircleIcon.js";import B from"../../icons/components/CloseIcon.js";import C from"../../icons/components/InfoIcon.js";const S={top:o`
     top: 0;
-  `,bottom:i`
+  `,bottom:o`
     bottom: 0;
-  `},N={right:i`
+  `},z={right:o`
     right: 0;
-  `,center:i`
+  `,center:o`
     left: 50%;
     transform: translate(-50%, 0);
-  `,left:i`
+  `,left:o`
     left: 0;
-  `},c=200,o="anim",O=n.div`
+  `},c=200,r="anim",N=a.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: fixed;
   display: flex;
@@ -27,28 +27,28 @@ import{jsx as t,jsxs as $}from"react/jsx-runtime";import{useEffect as y}from"rea
   font-size: 0.875rem;
 
   box-shadow: ${({theme:e})=>e.elevations.elevation8};
-  background-color: ${({theme:e,$color:r})=>r!=="none"?C(e,r).lighter:e.colors.background.light};
+  background-color: ${({theme:e,$color:i})=>i!=="none"?v(e,i).lighter:e.colors.background.light};
 
   color: ${({theme:e})=>e.colors.text.dark};
 
-  ${e=>B[e.origin.vertical||"bottom"]}
-  ${e=>N[e.origin.horizontal||"left"]}
+  ${e=>S[e.origin.vertical||"bottom"]}
+  ${e=>z[e.origin.horizontal||"left"]}
 
   transition: opacity ${c}ms ease-in;
 
-  &.${o}-enter {
+  &.${r}-enter {
     opacity: 0;
   }
-  &.${o}-enter-active {
+  &.${r}-enter-active {
     opacity: 1;
   }
-  &.${o}-exit {
+  &.${r}-exit {
     opacity: 1;
   }
-  &.${o}-exit-active {
+  &.${r}-exit-active {
     opacity: 0;
   }
-`,g=n.div`
+`,O=a.div`
   display: inline-flex;
   margin: -0.25rem 0;
   margin-right: 0.75rem;
@@ -56,11 +56,12 @@ import{jsx as t,jsxs as $}from"react/jsx-runtime";import{useEffect as y}from"rea
   ${e=>e.type==="text"&&"margin-right: 0;"}
 
   svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    fill: ${({theme:e})=>e.colors.text.dark};
+    font-size: 1.5rem;
+    color: ${({theme:e})=>e.colors.text.dark};
   }
-`,S=n(g)`
+`,w=a.button`
+  ${b}
+  display: flex;
   cursor: pointer;
 
   /* Bigger click area */
@@ -71,9 +72,12 @@ import{jsx as t,jsxs as $}from"react/jsx-runtime";import{useEffect as y}from"rea
   margin-left: 0.5rem;
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    font-size: 1.5rem;
+  }
+
+  &:focus-visible {
+    outline: revert;
   }
-`,T=n.span`
+`,T=a.span`
   flex: 1;
-`,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};
+`,W={error:t(k,{}),success:t(E,{}),info:t(C,{}),text:""},p=({message:e,color:i="none",type:n="info",action:l,isOpen:f,origin:g={},onClose:m=()=>{},onExited:d=()=>{},autoHideDuration:s=4e3,...h})=>($(()=>{const u=setTimeout(m,s);return()=>clearTimeout(u)},[s,m]),t(y,{in:f,timeout:c,mountOnEnter:!0,unmountOnExit:!0,onExited:d,classNames:r,children:x(N,{...h,$color:i,origin:g,role:n==="error"?"alert":void 0,"aria-live":n==="error"?"assertive":"polite",children:[t(O,{type:n,children:W[n]}),t(T,{children:e}),l&&l,t(w,{onClick:m,"aria-label":"Close",type:"button",children:t(B,{})})]})}));export{p as Snackbar,p as default};

package/esm/components/Spinner/index.js

@@ -1,19 +1,19 @@
-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`
+import{jsx as m}from"react/jsx-runtime";import d,{keyframes as n}from"styled-components";import u from"../../theme.js";import{neutralColorSwap as f}from"../../utils/utils.js";const b=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},p=n`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`,p=s.div`
+`,$=d.div`
   display: inline-block;
   border-radius: 50%;
-  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-top: ${({theme:e,color:r,customColor:a,size:t})=>`${o(t)/10}em solid ${a??(r==="neutral"?f(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);`};
   width: ${({size:e})=>o(e)}em;
   height: ${({size:e})=>o(e)}em;
-  animation: ${f} ${({speed:e})=>u(e)} infinite linear;
+  animation: ${p} ${({speed:e})=>b(e)} infinite linear;
   will-change: transform;
-`,$=({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};
+`,g=({size:e="regular",color:r="primary",speed:a="default",customColor:t,ariaLabel:i,useAria:l=!0,...s})=>m($,{...l?{role:"status","aria-live":"polite","aria-label":i??"loading","aria-busy":"true"}:void 0,...s,size:e,speed:a,color:r,customColor:t,theme:u});export{g as default};

package/esm/components/SpinnerThin/index.js

@@ -1,9 +1,9 @@
-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`
+import{jsxs as p,jsx as o}from"react/jsx-runtime";import s from"styled-components";import d from"../../icons/components/CheckmarkIcon.js";import $ from"../../icons/components/CloseIcon.js";import f from"../Spinner/index.js";import"../../theme.js";import"../../utils/utils.js";const c=s.div`
   position: absolute;
-`,h=o(f)`
+`,h=s(f)`
   position: absolute;
 
-  ${({size:i})=>i&&`
+  ${({$size:i})=>`
       width: ${i}rem;
       height: ${i}rem;
       margin-left: -${i/2}rem;
@@ -14,11 +14,11 @@ import{jsxs as l,jsx as e}from"react/jsx-runtime";import o from"styled-component
     all 0.02s ease-in-out !important,
     width transition 0s !important;
 
-  ${({isLoading:i,theme:t})=>!i&&`
+  ${({$isLoading:i,theme:r})=>!i&&`
         animation: none;
-        border: 1px solid ${t.colors.grayscaleToned.dark3};
+        border: 1px solid ${r.colors.grayscaleToned.dark3};
     `}
-`,s=o.div`
+`,n=s.div`
   position: absolute;
   display: flex;
   align-items: center;
@@ -26,13 +26,12 @@ import{jsxs as l,jsx as e}from"react/jsx-runtime";import o from"styled-component
   left: 1px;
   top: 1px;
 
-  ${({size:i})=>`
+  ${({$size:i})=>`
       width: ${i}rem;
       height: ${i}rem;
       margin-left: -${i/2}rem;
       font-size: ${i/2}rem;
   `}
-
   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})=>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};
+  opacity: ${({$isDone:i,$isError:r})=>!i&&!r?"0":"1"};
+`,l=({isLoading:i=!0,isDone:r=!1,isError:a=!1,size:e=3.5,ariaLabels:t={},...m})=>p(c,{"data-testid":"spinner-thin",role:"status","aria-live":"polite","aria-label":r?t?.isDone??"Completed":a?t?.isError??"Error":t?.isError??"Loading...","aria-busy":i,children:[o(n,{$size:e,$isDone:r,children:o(d,{})}),o(n,{$size:e,$isError:a,children:o($,{})}),o(h,{size:e,speed:"fast",color:"neutral",...m,$size:e,$isLoading:i,useAria:!1})]});export{l as SpinnerThin,l as default};

package/esm/components/Stepper/index.js

@@ -1,63 +1,63 @@
-import{jsx as t,jsxs as p}from"react/jsx-runtime";import r from"styled-components";import{TinyTitleRegular as x}from"../../typography/Heading/index.js";import f from"../../icons/components/CheckmarkIcon.js";import"../../shared/media-queries.js";const g=r.div`
+import{jsx as a,jsxs as f}from"react/jsx-runtime";import{useRef as x}from"react";import t from"styled-components";import{TinyTitleRegular as H}from"../../typography/Heading/index.js";import b from"../../icons/components/CheckmarkIcon.js";import{generateNameHash as S}from"../../shared/helpers.js";import"../../shared/media-queries.js";const v=t.div`
   display: flex;
-  flex-direction: ${({isHorizontal:o})=>o?"row":"column"};
+  flex-direction: ${({isHorizontal:e})=>e?"row":"column"};
   min-height: 4rem;
   margin: 0 auto;
-`,u=r.div`
+`,w=t.div`
   display: flex;
-  flex-direction: ${({isHorizontal:o})=>o?"column":"row"};
+  flex-direction: ${({isHorizontal:e})=>e?"column":"row"};
   column-gap: 0.75rem;
   align-items: center;
-  padding: ${({isHorizontal:o})=>o?"0 0.5rem":"0.5rem 0"};
+  padding: ${({isHorizontal:e})=>e?"0 0.5rem":"0.5rem 0"};
   position: relative;
-  width: ${({isHorizontal:o,stepsNumber:i})=>o?`calc(100% / ${i})`:"100%"};
+  width: ${({isHorizontal:e,stepsNumber:i})=>e?`calc(100% / ${i})`:"100%"};
 
   &:not(:first-child) :before {
     position: absolute;
     content: '';
-    top: ${({isHorizontal:o,$size:i})=>o?`calc(${i/2}rem + 1px)`:"0"};
-    left: ${({isHorizontal:o,$size:i})=>o?"0":`calc(${i/2}rem + 1px)`};
-    width: ${({isHorizontal:o,$size:i})=>o?`calc(50% - ${i/2}rem)`:"2px"};
-    height: ${({isHorizontal:o,$size:i})=>o?"2px":`calc(50% - ${i/2}rem)`};
-    background: ${({theme:o,$color:i,$colorShade:e})=>o.colors[i][e]};
+    top: ${({isHorizontal:e,$size:i})=>e?`calc(${i/2}rem + 1px)`:"0"};
+    left: ${({isHorizontal:e,$size:i})=>e?"0":`calc(${i/2}rem + 1px)`};
+    width: ${({isHorizontal:e,$size:i})=>e?`calc(50% - ${i/2}rem)`:"2px"};
+    height: ${({isHorizontal:e,$size:i})=>e?"2px":`calc(50% - ${i/2}rem)`};
+    background: ${({theme:e,$color:i,$colorShade:o})=>e.colors[i][o]};
   }
 
   &:not(:last-child) :after {
     position: absolute;
     content: '';
 
-    ${({isHorizontal:o,$size:i})=>o&&`
+    ${({isHorizontal:e,$size:i})=>e&&`
       top: calc(${i/2}rem + 1px);
     `}
-    ${({isHorizontal:o})=>!o&&`
+    ${({isHorizontal:e})=>!e&&`
       bottom: 0;
     `}
-    ${({isHorizontal:o})=>o&&`
+    ${({isHorizontal:e})=>e&&`
       right: 0;
     `}
-    ${({isHorizontal:o,$size:i})=>!o&&`
+    ${({isHorizontal:e,$size:i})=>!e&&`
       left: calc(${i/2}rem + 1px);
     `}
-    width: ${({isHorizontal:o,$size:i})=>o?`calc(50% - ${i/2}rem)`:"2px"};
-    height: ${({isHorizontal:o,$size:i})=>o?"2px":`calc(50% - ${i/2}rem)`};
-    background: ${({theme:o,$color:i,$colorShade:e})=>o.colors[i][e]};
+    width: ${({isHorizontal:e,$size:i})=>e?`calc(50% - ${i/2}rem)`:"2px"};
+    height: ${({isHorizontal:e,$size:i})=>e?"2px":`calc(50% - ${i/2}rem)`};
+    background: ${({theme:e,$color:i,$colorShade:o})=>e.colors[i][o]};
   }
-`,H=r.div``,b=r.div`
+`,y=t.div``,k=t.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({size:o})=>o}rem;
-  height: ${({size:o})=>o}rem;
+  width: ${({size:e})=>e}rem;
+  height: ${({size:e})=>e}rem;
   border-radius: 50%;
   border: 2px solid
-    ${({theme:o,$color:i,$colorShade:e})=>o.colors[i][e]};
-  color: ${({theme:o,isFilled:i})=>i?o.colors.text.light:o.colors.text.dark};
-  ${({theme:o,isFilled:i,$color:e,$colorShade:l})=>i&&`
-    background-color: ${o.colors[e][l]};
+    ${({theme:e,$color:i,$colorShade:o})=>e.colors[i][o]};
+  color: ${({theme:e,isFilled:i})=>i?e.colors.text.light:e.colors.text.dark};
+  ${({theme:e,isFilled:i,$color:o,$colorShade:c})=>i&&`
+    background-color: ${e.colors[o][c]};
   `}
-`,S=r(x)`
-  font-size: ${({size:o})=>`${o/2}rem`};
+`,j=t(H)`
+  font-size: ${({size:e})=>`${e/2}rem`};
   line-height: 1;
-`,v=r(f)`
-  font-size: ${({size:o})=>`calc(${o/2}rem + 6px)`};
-`,w=({children:o,orientation:i="vertical",variant:e="solid",color:l="primary",colorShade:n="mainAlt",size:s=2,activeStep:a,...m})=>{const h=o.length,$=i==="horizontal";return t(g,{isHorizontal:$,...m,children:o.map((z,c)=>{const d=a&&c<a;return p(u,{$color:l,$colorShade:n,$size:s,stepsNumber:h,isHorizontal:$,children:[t(H,{children:t(b,{$color:l,$colorShade:n,isFilled:d||e==="solid",size:s,children:d?t(v,{size:s}):t(S,{as:"span",size:s,children:c+1})})}),z]},c)})})};export{w as Stepper};
+`,C=t(b)`
+  font-size: ${({size:e})=>`calc(${e/2}rem + 6px)`};
+`,F=({children:e,orientation:i="vertical",variant:o="solid",color:c="primary",colorShade:p="mainAlt",size:n=2,activeStep:l,ariaLabels:s={},...m})=>{const h=e.length,d=i==="horizontal",z=x(S("stepper"));return a(v,{isHorizontal:d,...m,role:"list","aria-Label":s?.list??"Step progress",children:e.map((g,r)=>{const $=l&&r<l,u=$||o==="solid";return f(w,{$color:c,$colorShade:p,$size:n,stepsNumber:h,isHorizontal:d,role:"listitem","aria-disabled":$?"true":void 0,"aria-current":l===r?"step":void 0,"aria-Label":(l===void 0?`${s?.step??"Step %s"}`:(l===r&&`${s?.stepCurrent??"Current step, step %s"}`,$&&`${s?.stepDone??"Completed step, step %s"}`,`${s?.stepUpcoming??"Upcoming step, step %s"}`)).replaceAll("%s",String(r+1)),children:[a(y,{children:a(k,{$color:c,$colorShade:p,isFilled:u,size:n,role:"img",children:$?a(C,{size:n,"aria-hidden":"true"}):a(j,{as:"span",size:n,"aria-hidden":"true",children:r+1})})}),g]},`${z}-${r}`)})})};export{F as Stepper};

package/esm/components/StepperAccordion/index.js

@@ -1,43 +1,38 @@
-import{jsxs as m,jsx as s}from"react/jsx-runtime";import{useState as g,useCallback as b,useEffect as u}from"react";import t,{css as a}from"styled-components";import i from"../../theme.js";import{Title as x}from"../../typography/Heading/index.js";import C from"../Icons/CheckIcon.js";import D from"../Icons/Arrow.js";import{fadedColor as n}from"../../shared/helpers.js";import{Collapse as y}from"react-collapse";import"../../shared/media-queries.js";const d="200ms",k=t.div`
+import{jsxs as u,jsx as t}from"react/jsx-runtime";import{useState as z,useRef as R,useCallback as B,useEffect as F}from"react";import a,{css as s}from"styled-components";import l from"../../theme.js";import{Title as I}from"../../typography/Heading/index.js";import{fadedColor as d,generateNameHash as K}from"../../shared/helpers.js";import{Collapse as O}from"react-collapse";import A from"../../icons/components/CheckmarkIcon.js";import H from"../../icons/components/ShowMoreIcon.js";import"../../shared/media-queries.js";const c="200ms",L=a.div`
   .ReactCollapse--collapse {
-    transition: height ${d} ease-in-out;
+    transition: height ${c} ease-in-out;
   }
-`,v=a`
-  margin-top: 0.25rem;
+`,N=s`
   transform: rotate(-180deg);
-`,E=t.div`
+`,T=a.div`
   display: flex;
   align-items: center;
   height: 4rem;
 
-  color: ${o=>o.isDisabled?i.colors.text.disabled:i.colors.text.dark};
-`,S=t(x)`
+  color: ${e=>e.$isDisabled?l.colors.text.disabled:l.colors.text.dark};
+`,U=a(I)`
   margin: 0;
-`,w=t(D)`
+`,_=a(H)`
+  font-size: 2rem;
   margin-left: auto;
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-top: -0.75rem;
 
-  fill: currentColor;
-
-  transition: ${d};
+  transition: ${c};
   transform: rotate(0deg);
   transform-origin: center;
-  ${o=>o.isExpanded&&v};
-`,j=(o,r)=>a`
+  ${e=>e.isExpanded&&N};
+`,q=(e,o)=>s`
   color: white;
-  background-color: ${i.colors[o][r]};
-`,z=(o,r,e)=>a`
+  background-color: ${l.colors[e][o]};
+`,G=(e,o,r)=>s`
   fill: white;
-  border: 2px solid ${n(i.colors[r][e],.2)};
+  border: 2px solid ${d(l.colors[o][r],.2)};
 
-  ${o&&`
-      border: 2px solid ${n(i.colors[r][e],0)};
-      background-color: ${n(i.colors[r][e],.5)};
+  ${e&&`
+      border: 2px solid ${d(l.colors[o][r],0)};
+      background-color: ${d(l.colors[o][r],.5)};
     `}
-`,T=t.div`
-  font-family: ${({theme:o})=>o.typography.fontBaseFamily};
+`,J=a.div`
+  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,12 +42,11 @@ import{jsxs as m,jsx as s}from"react/jsx-runtime";import{useState as g,useCallba
   width: 2rem;
   height: 2rem;
   border-radius: 2rem;
-  border: 2px solid ${o=>i.colors[o.$color][o.$colorShade]};
+  border: 2px solid ${e=>l.colors[e.$color][e.$colorShade]};
 
   svg {
-    fill: currentColor;
-    height: 1rem;
-    width: 1rem;
+    height: 1.5rem;
+    width: 1.5rem;
 
     /* Kvd.se compatible stuff */
     margin: 0;
@@ -66,7 +60,7 @@ import{jsxs as m,jsx as s}from"react/jsx-runtime";import{useState as g,useCallba
     margin-top: 0.1rem;
   }
 
-  transition: background-color ${d};
-  ${o=>o.isComplete&&j(o.$color,o.$colorShade)};
-  ${o=>o.isDisabled&&z(o.isComplete,o.$color,o.$colorShade)};
-`,c=o=>{const[r,e]=g(o.isExpanded||!1),p=b(()=>{o.isDisabled||e(l=>!l)},[o.isDisabled]);u(()=>{e(o.isExpanded||!1)},[o.isDisabled,o.isExpanded]);const f=o.step||o.step===0;return m(k,{children:[m(E,{...o,onClick:l=>{const h=o.onClick||p;o.isDisabled||h(l)},isExpanded:r,isDisabled:o.isDisabled||!1,children:[f&&s(T,{isComplete:o.isComplete||!1,isDisabled:o.isDisabled||!1,$color:o.color||"primary",$colorShade:o.colorShade||"main",children:o.isComplete?s(C,{}):s("span",{children:o.step})}),s(S,{children:o.title}),s(w,{isExpanded:r})]}),s(y,{isOpened:r,children:o.children}),o.closedChildren&&o.closedChildren]})};export{c as StepperAccordion,c as default};
+  transition: background-color ${c};
+  ${e=>e.isComplete&&q(e.$color,e.$colorShade)};
+  ${e=>e.isDisabled&&G(e.isComplete,e.$color,e.$colorShade)};
+`,x=({step:e,isExpanded:o,isDisabled:r,isComplete:m,onClick:y,color:C,colorShade:k,title:v,children:D,closedChildren:p,...S})=>{const[n,f]=z(o||!1),h=R(K("stepper")),$=B(()=>{r||f(i=>!i)},[r]);F(()=>{f(o||!1)},[r,o]);const w=e||e===0,E=i=>{r||(y||$)(i)},j=i=>{(i.key==="Enter"||i.key===" ")&&!r&&(i.preventDefault(),$())},g=`${h.current}-header`,b=`${h.current}-content`;return u(L,{children:[u(T,{...S,id:g,onClick:E,onKeyDown:j,$isDisabled:r||!1,role:"button",tabIndex:0,"aria-expanded":n,"aria-controls":b,children:[w&&t(J,{isComplete:m||!1,isDisabled:r||!1,$color:C||"primary",$colorShade:k||"main",children:m?t(A,{}):t("span",{children:e})}),t(U,{children:v}),t(_,{isExpanded:n})]}),t(O,{isOpened:n,children:t("div",{id:b,role:"region","aria-labelledby":g,children:D})}),p&&p]})};export{x as StepperAccordion,x as default};

package/esm/components/Switcher/index.js

@@ -1,23 +1,23 @@
-import{jsx as a}from"react/jsx-runtime";import s from"styled-components";import r from"../../theme.js";const n=s.button`
+import{jsx as d}from"react/jsx-runtime";import i from"styled-components";import a from"../../theme.js";const p=i.button`
   width: 46px;
   height: 24px;
   border-radius: 12px;
   border: none;
   padding: 2px;
-  background-color: ${({selected:o,disabled:e,$color:l,$colorShade:d})=>e?r.colors.grayscaleToned.light4:o?r.colors[l][d]:r.colors.grayscaleToned.dark5};
+  background-color: ${({$selected:o,disabled:e,$color:l,$colorShade:r})=>e?a.colors.grayscaleToned.light4:o?a.colors[l][r]:a.colors.grayscaleToned.dark5};
   display: flex;
   align-items: center;
-  justify-content: ${({selected:o})=>o?"flex-end":"flex-start"};
+  justify-content: ${({$selected:o})=>o?"flex-end":"flex-start"};
   cursor: ${({disabled:o})=>o?"not-allowed":"pointer"};
   opacity: ${({disabled:o})=>o?.6:1};
   transition: all 0.3s ease;
-`,p=s.div`
+`,b=i.div`
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background-color: ${({disabled:o})=>o?r.colors.grayscaleToned.light6:r.colors.common.white};
+  background-color: ${({disabled:o})=>o?a.colors.grayscaleToned.light6:a.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:l,color:d="info",colorShade:t="mainAlt",...c})=>a(n,{selected:o,disabled:e,$color:d,$colorShade:t,onClick:()=>{!e&&l&&l(!o)},...c,children:a(p,{disabled:e})});export{i as Switcher,i as default};
+`,s=({selected:o=!1,disabled:e=!1,onToggle:l,color:r="info",colorShade:c="mainAlt",ariaLabel:t,...n})=>d(p,{role:"switch","aria-checked":o,"aria-disabled":e,"aria-label":t??"Toggle",disabled:e,$selected:o,$color:r,$colorShade:c,onClick:()=>{!e&&l&&l(!o)},...n,children:d(b,{disabled:e})});export{s as Switcher,s as default};

package/esm/components/Table/index.js

@@ -1,4 +1,4 @@
-import{jsx as a,jsxs as p}from"react/jsx-runtime";import{Children as d}from"react";import l from"styled-components";import{mq as s}from"../../shared/media-queries.js";import e from"../../theme.js";const h=l.div`
+import{jsx as l,jsxs as p}from"react/jsx-runtime";import{Children as d}from"react";import t from"styled-components";import{mq as s}from"../../shared/media-queries.js";import e from"../../theme.js";const h=t.div`
   ${s("mobileS","tablet")} {
     display: block;
     max-width: -moz-fit-content;
@@ -7,18 +7,18 @@ import{jsx as a,jsxs as p}from"react/jsx-runtime";import{Children as d}from"reac
     overflow-x: auto;
     white-space: nowrap;
   }
-`,g=l.table`
+`,g=t.table`
   border-collapse: collapse;
   border: 1px solid ${e.colors.grayscaleToned.light3};
   font-family: ${e.typography.fontBaseFamily};
   text-align: left;
-`,f=l.thead``,y=l.th`
+`,f=t.thead``,y=t.th`
   border: 1px solid ${e.colors.grayscaleToned.light3};
   padding: 0.75rem;
   vertical-align: top;
   background-color: ${e.colors.background.gray};
-`,b=l.tbody``,n=l.tr``,c=l.td`
+`,b=t.tbody``,c=t.tr``,n=t.td`
   border: 1px solid ${e.colors.grayscaleToned.light3};
   padding: 0.5rem 0.75rem;
   vertical-align: top;
-`,x=r=>a(n,{children:d.toArray(r.map((o,t)=>a(y,{children:o},t)))},"RowHead"),u=(r,o)=>o.length?r.map(t=>o?.map(i=>a(c,{children:t[i]},i))):r.map(t=>Object.entries(t).map(([i,m])=>a(c,{children:m},i))),w=r=>d.toArray(r.map((o,t)=>a(n,{children:d.toArray(o)},t))),$=({columns:r,data:o})=>a(h,{children:p(g,{children:[r&&a(f,{children:x(r)}),o&&a(b,{children:w(u(o,r??[]))})]})});export{$ as default};
+`,x=r=>l(c,{children:d.toArray(r.map((o,a)=>l(y,{scope:"col",children:o},a)))},"RowHead"),u=(r,o)=>o.length?r.map(a=>o?.map(i=>l(n,{children:a[i]},i))):r.map(a=>Object.entries(a).map(([i,m])=>l(n,{children:m},i))),w=r=>d.toArray(r.map((o,a)=>l(c,{children:d.toArray(o)},a))),$=({columns:r,data:o,ariaLabel:a})=>l(h,{children:p(g,{"aria-label":a,children:[r&&l(f,{children:x(r)}),o&&l(b,{children:w(u(o,r??[]))})]})});export{$ as default};

package/esm/components/Tabs/Tab.js

@@ -1,6 +1,6 @@
-import{jsx as c}from"react/jsx-runtime";import d from"styled-components";import{Button as b}from"../Button/index.js";import{forwardRef as v}from"react";import{hexToRGB as f}from"../../utils/utils.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const $=d.li`
+import{jsx as c}from"react/jsx-runtime";import n from"styled-components";import{Button as v}from"../Button/index.js";import{forwardRef as b}from"react";import{hexToRGB as f}from"../../utils/utils.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const $=n.li`
   list-style-type: none;
-`,h=d(b)`
+`,h=n(v)`
   && {
     margin-bottom: -3px;
     padding: 0.875rem 1.375rem;
@@ -8,11 +8,10 @@ import{jsx as c}from"react/jsx-runtime";import d from"styled-components";import{
     transition:
       color 0.3s ease,
       border 0.3s ease;
-    border-radius: unset;
 
     :focus-visible {
       ${({theme:t,isActive:o,$activeColor:e,$activeColorShade:r})=>!o&&`background-color: ${f(t.colors[e][r],.1)};
       `}
     }
   }
-`,n=v(({label:t,index:o=-1,isActive:e=!1,onClick:r,activeColor:a="secondary",activeColorShade:l="mainAlt",isDisabled:m=!1,onKeyUp:s},p)=>c($,{role:"presentation",children:c(h,{tabIndex:e?0:-1,isActive:e,onClick:i=>r&&r(i,o),$activeColor:a,$activeColorShade:l,isDisabled:m,variant:"flat",color:e?a:"neutral",colorShade:l,id:`tab-${o}`,role:"tab","aria-selected":e?"true":"false","aria-controls":`tabpanel-${o}`,onKeyUp:i=>s&&s(i,o),ref:p,children:t})}));n.displayName="Tab";export{n as default};
+`,d=b(({label:t,index:o=-1,isActive:e=!1,onClick:r,activeColor:a="secondary",activeColorShade:l="mainAlt",isDisabled:m=!1,onKeyUp:s},p)=>c($,{role:"presentation",children:c(h,{id:`tab-${o}`,role:"tab","aria-selected":e,"aria-controls":`tabpanel-${o}`,tabIndex:e?0:-1,isActive:e,onClick:i=>r&&r(i,o),$activeColor:a,$activeColorShade:l,isDisabled:m,variant:"flat",color:e?a:"neutral",colorShade:l,onKeyUp:i=>s&&s(i,o),ref:p,noRadius:!0,children:t})}));d.displayName="Tab";export{d as default};

package/esm/components/Tabs/Tabs.js

@@ -25,4 +25,4 @@ import{jsx as n,jsxs as x}from"react/jsx-runtime";import{Children as W,useState
   display: flex;
 `,N=s.div`
   padding: 0.5rem 0;
-`,G=s.div``,g=({activeColor:o="secondary",activeColorShade:m="mainAlt",justify:p="end",activeIndex:u,initalActive:k,children:j=[],kbNavAutoOpen:h=!0,onTabClick:A,fullWidthBorder:$=!0,borderColor:D="light6",headline:b})=>{const l=W.map(j,e=>e),[d,c]=I(()=>k??l.findIndex(e=>!e.props.isDisabled)),v=S([]),w=!!l[d]?.props?.children,T=(e,r)=>{e.preventDefault(),c(r)};U(()=>{typeof u<"u"&&c(u)},[u]);const R=(e,r)=>{if(e.preventDefault(),(e.key==="Enter"||e.key===" ")&&!h&&c(r),e.key==="ArrowLeft"||e.key==="ArrowRight"){const t=h?d:r,i=e.key==="ArrowRight",a=i?t+1:0,B=i?l.length:t,C=l.slice(a,B);i||C.reverse();const y=C.findIndex(f=>!f.props.isDisabled);if(y!==-1){const f=i?t+(y+1):t-(y+1);h&&c(f),v.current[f].focus()}}};return n(O,{children:x(K,{isOpened:!0,children:[x(z,{fullWidthBorder:$,justify:b?"space-between":p,role:"tablist",borderColor:D,children:[b&&n(F,{children:b}),n(H,{children:l.map((e,r)=>{if(!e)return null;const t=d===r;return n(q,{label:e.props.label,isDisabled:e.props.isDisabled,index:r,id:r,isActive:d===r,activeColor:o,activeColorShade:m,onClick:(i,a)=>{!t&&!e.props.isDisabled&&(e.props.onClick?.(i,a),A?.(i,a),T(i,a))},onKeyUp:R,ref:i=>v.current[r]=i},r)})})]}),w&&n(N,{children:l.map((e,r)=>{const t=e.props.children&&d===r;return n(G,{id:`tabpanel-${r}`,role:"tabpanel","aria-labelledby":`tab-${r}`,"aria-hidden":t?"false":"true",children:t&&e.props.children},r)})})]})})};export{g as Tabs,g as default};
+`,G=s.div``,g=({activeColor:o="secondary",activeColorShade:m="mainAlt",justify:p="end",activeIndex:u,initalActive:k,children:j=[],kbNavAutoOpen:h=!0,onTabClick:A,fullWidthBorder:$=!0,borderColor:D="light6",headline:b})=>{const l=W.map(j,e=>e),[d,c]=I(()=>k??l.findIndex(e=>!e.props.isDisabled)),v=S([]),w=!!l[d]?.props?.children,T=(e,r)=>{e.preventDefault(),c(r)};U(()=>{typeof u<"u"&&c(u)},[u]);const R=(e,r)=>{if(e.preventDefault(),(e.key==="Enter"||e.key===" ")&&!h&&c(r),e.key==="ArrowLeft"||e.key==="ArrowRight"){const t=h?d:r,i=e.key==="ArrowRight",a=i?t+1:0,B=i?l.length:t,C=l.slice(a,B);i||C.reverse();const y=C.findIndex(f=>!f.props.isDisabled);if(y!==-1){const f=i?t+(y+1):t-(y+1);h&&c(f),v.current[f].focus()}}};return n(O,{children:x(K,{isOpened:!0,children:[x(z,{fullWidthBorder:$,justify:b?"space-between":p,role:"tablist",borderColor:D,children:[b&&n(F,{children:b}),n(H,{children:l.map((e,r)=>{if(!e)return null;const t=d===r;return n(q,{label:e.props.label,isDisabled:e.props.isDisabled,index:r,isActive:d===r,activeColor:o,activeColorShade:m,onClick:(i,a)=>{!t&&!e.props.isDisabled&&(e.props.onClick?.(i,a),A?.(i,a),T(i,a))},onKeyUp:R,ref:i=>v.current[r]=i},r)})})]}),w&&n(N,{children:l.map((e,r)=>{const t=e.props.children&&d===r;return n(G,{id:`tabpanel-${r}`,role:"tabpanel","aria-labelledby":`tab-${r}`,"aria-hidden":t?"false":"true",children:t&&e.props.children},r)})})]})})};export{g as Tabs,g as default};

package/esm/components/TextArea/index.js

@@ -1,18 +1,18 @@
-import{jsxs as i,jsx as l,Fragment as k}from"react/jsx-runtime";import{useState as T}from"react";import o,{css as p}from"styled-components";import r from"../../theme.js";import{Label as F}from"../FieldLabel.js";import{BodyTextStyle as v,CaptionStyle as E}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const z=p`
+import{jsxs as h,jsx as i,Fragment as z}from"react/jsx-runtime";import{useState as B,useRef as E}from"react";import l,{css as b}from"styled-components";import r from"../../theme.js";import{Label as j}from"../FieldLabel.js";import{BodyTextStyle as N,CaptionStyle as S}from"../../typography/BodyText/index.js";import{generateNameHash as w}from"../../shared/helpers.js";import"../../shared/media-queries.js";const C=b`
   border: 1px solid ${r.colors.grayscaleToned.light1};
   color: ${r.colors.grayscaleToned.dark1};
   fill: ${r.colors.grayscaleToned.light1};
-`,S=p`
+`,H=b`
   border: 1px solid ${r.colors.error.dark};
-`,B=p`
+`,L=b`
   color: ${r.colors.text.dark};
   border: 1px solid ${r.colors.text.dark};
   fill: ${r.colors.text.dark};
-`,j=o.div`
+`,R=l.div`
   position: relative;
   padding: 0;
   display: inline-block;
-`,w=o.div`
+`,A=l.div`
   display: inline-black;
 
   color: ${r.colors.grayscaleToned.light1};
@@ -24,12 +24,12 @@ import{jsxs as i,jsx as l,Fragment as k}from"react/jsx-runtime";import{useState
 
   padding: 0.7rem 0.75rem;
 
-  ${({hasError:e,isFocused:a})=>!e&&a&&B}
-  ${({disabled:e})=>e&&z}
-  ${({hasError:e})=>e&&S}
+  ${({hasError:e,isFocused:a})=>!e&&a&&L}
+  ${({disabled:e})=>e&&C}
+  ${({hasError:e})=>e&&H}
   ${({centered:e})=>e&&"text-align: center;"}
-`,C=o.textarea`
-  ${v}
+`,D=l.textarea`
+  ${N}
 
   width: 100%;
   cursor: text;
@@ -38,17 +38,17 @@ import{jsxs as i,jsx as l,Fragment as k}from"react/jsx-runtime";import{useState
   background-color: transparent;
 
   ${({resize:e})=>!e&&"resize: none;"}
-`,N=o.div`
+`,I=l.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-`,P=o.div`
-  ${E}
+`,P=l.div`
+  ${S}
   margin-top: 0.25rem;
 
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
-`,A=o.span`
+`,V=l.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,D=o.span`
+`,W=l.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,u=({placeholder:e="",isDisabled:a=!1,centered:d=!1,hasError:f=!1,className:$,helperText:c,label:s="",resize:x=!0,name:n,errors:h,...t})=>{const[m,g]=T(!1),y=!!t.value;return i(j,{className:$,children:[i(w,{isFocused:m,disabled:a,centered:d,hasError:f,hasPlaceholder:!!e,children:[l(C,{...t,name:n,"aria-label":s||n,resize:x,onFocus:()=>g(!0),onBlur:()=>g(!1),disabled:a,theme:r,placeholder:s&&!m?"":e}),t.suffix&&l(N,{children:t.suffix})]}),s&&l(F,{htmlFor:n,isFocused:m,centered:d,hasError:f,hasValue:y,disabled:a,theme:r,children:i(k,{children:[s,l("span",{})]})}),(c||h)&&i(P,{centered:d,children:[c&&l(A,{children:c}),h&&h.map(b=>l(D,{children:b},b))]})]})};export{u as TextArea,u as default};
+`,u=({placeholder:e="",isDisabled:a=!1,centered:m=!1,hasError:g=!1,className:y,helperText:t,label:d="",resize:k=!0,name:p,errors:s,...n})=>{const[$,f]=B(!1),v=!!n.value,o=`${E(w("textarea")).current}-${p}`,T=s?.map((x,c)=>`${o}-error-${c}`)??[],F=[t?`${o}-helper`:null,...T].filter(Boolean).join(" ");return h(R,{className:y,children:[h(A,{isFocused:$,disabled:a,centered:m,hasError:g,hasPlaceholder:!!e,children:[i(D,{...n,id:o,name:p,"aria-label":d?void 0:p,"aria-describedby":F||void 0,"aria-invalid":!!s?.length,resize:k,onFocus:()=>f(!0),onBlur:()=>f(!1),disabled:a,tabIndex:a?-1:0,theme:r,placeholder:d&&!$?"":e}),n.suffix&&i(I,{children:n.suffix})]}),d&&i(j,{htmlFor:o,isFocused:$,centered:m,hasError:g,hasValue:v,disabled:a,theme:r,children:h(z,{children:[d,i("span",{})]})}),(t||s)&&h(P,{centered:m,children:[t&&i(V,{id:`${o}-helper`,children:t}),s&&s.map((x,c)=>i(W,{id:`${o}-error-${c}`,role:"alert","aria-live":"assertive",children:x},`${o}-error-${c}`))]})]})};export{u as TextArea,u as default};

package/esm/components/Textfield/index.js

@@ -1,18 +1,18 @@
-import{jsxs as i,jsx as l,Fragment as T}from"react/jsx-runtime";import{useState as w}from"react";import r,{css as m}from"styled-components";import{Label as B}from"../FieldLabel.js";import{BodyTextStyle as A,CaptionStyle as N}from"../../typography/BodyText/index.js";import{generateNameHash as S}from"../../shared/helpers.js";import"../../shared/media-queries.js";const j=m`
+import{jsxs as c,jsx as t,Fragment as A}from"react/jsx-runtime";import{useState as R,useRef as H}from"react";import o,{css as $}from"styled-components";import{Label as P}from"../FieldLabel.js";import{BodyTextStyle as V,CaptionStyle as q}from"../../typography/BodyText/index.js";import{generateNameHash as y}from"../../shared/helpers.js";import"../../shared/media-queries.js";const C=$`
   border: 1px solid ${({theme:e})=>e.colors.grayscaleToned.light2};
   color: ${({theme:e})=>e.colors.text.disabled};
   fill: ${({theme:e})=>e.colors.text.disabled};
-`,z=m`
+`,D=$`
   border: 2px solid ${({theme:e})=>e.colors.error.dark};
-`,C=m`
+`,G=$`
   border: 2px solid ${({theme:e})=>e.colors.grayscaleToned.dark5};
   color: ${({theme:e})=>e.colors.text.dark};
   fill: ${({theme:e})=>e.colors.text.dark};
-`,L=r.div`
+`,I=o.div`
   position: relative;
   padding: 0;
   display: block;
-`,P=r.div`
+`,L=o.div`
   display: flex;
   text-align: center;
   align-items: center;
@@ -26,12 +26,12 @@ import{jsxs as i,jsx as l,Fragment as T}from"react/jsx-runtime";import{useState
 
   padding: 0.75rem 0.6rem;
 
-  ${({hasError:e,isFocused:t})=>!e&&t&&C}
-  ${({disabled:e})=>e&&j}
-  ${({hasError:e})=>e&&z}
+  ${({hasError:e,isFocused:a})=>!e&&a&&G}
+  ${({disabled:e})=>e&&C}
+  ${({hasError:e})=>e&&D}
   ${({centered:e})=>e&&"text-align: center;"}
-`,D=r.input`
-  ${A}
+`,M=o.input`
+  ${V}
   width: 100%;
   cursor: text;
   outline: none;
@@ -42,7 +42,7 @@ import{jsxs as i,jsx as l,Fragment as T}from"react/jsx-runtime";import{useState
     color: ${({theme:e})=>e.colors.text.disabled};
     fill: ${({theme:e})=>e.colors.text.disabled};
   }
-`,H=r.span`
+`,O=o.span`
   display: flex;
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 1.25rem;
@@ -52,15 +52,15 @@ import{jsxs as i,jsx as l,Fragment as T}from"react/jsx-runtime";import{useState
     width: 1.375rem;
     height: 1.375rem;
   }
-`,I=r.div`
-  ${N}
+`,_=o.div`
+  ${q}
   margin-top: 0.25rem;
 
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
-`,M=r.span`
+`,J=o.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,R=r.span`
+`,K=o.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,g=({placeholder:e="",isDisabled:t=!1,centered:n=!1,hasError:p=!1,className:$,helperText:c,label:a="",onBlur:y=()=>null,onFocus:k=()=>null,forwardRef:F,suffix:b,name:s=S("text-input"),errors:d,isAutoFocused:v=!1,...u})=>{const[h,f]=w(!1),E=!!u.value,x=d&&Array.isArray(d)&&d?.length>0;return i(L,{className:$,children:[i(P,{isFocused:h,disabled:t,centered:n,hasError:p,hasPlaceholder:!!e,children:[l(D,{...u,id:s,name:s,"aria-label":a||s,ref:F,onFocus:o=>{f(!0),k(o)},onBlur:o=>{f(!1),y(o)},disabled:t,placeholder:a&&!h?"":e,autoFocus:v}),b&&l(H,{children:b})]}),a&&l(B,{htmlFor:s,isFocused:h,centered:n,hasError:p,hasValue:E,disabled:t,children:i(T,{children:[a,l("span",{})]})}),(c||x)&&i(I,{centered:n,children:[c&&l(M,{children:c}),x&&d.map(o=>l(R,{children:o},o))]})]})};export{g as TextField,g as default};
+`,k=({placeholder:e="",isDisabled:a=!1,centered:h=!1,hasError:m=!1,className:v,helperText:s,label:d="",onBlur:F=()=>null,onFocus:T=()=>null,forwardRef:w,suffix:f,name:u=y("text-input"),errors:i,isAutoFocused:B=!1,...x})=>{const[p,g]=R(!1),E=!!x.value,b=i&&Array.isArray(i)&&i?.length>0,r=`${H(y("text-input")).current}-${u}`,j=i?.map((l,n)=>`${r}-error-${n}`)??[],N=[s?`${r}-helper`:null,...j].filter(Boolean).join(" "),S=l=>{g(!0),T(l)},z=l=>{g(!1),F(l)};return c(I,{className:v,children:[c(L,{isFocused:p,disabled:a,centered:h,hasError:m,hasPlaceholder:!!e,children:[t(M,{...x,id:r,name:u,"aria-labelledby":d?`${r}-label`:void 0,"aria-describedby":N||void 0,"aria-invalid":b||m,ref:w,onFocus:S,onBlur:z,disabled:a,placeholder:d&&!p?"":e,autoFocus:B}),f&&t(O,{children:f})]}),d&&t(P,{id:`${r}-label`,htmlFor:r,isFocused:p,centered:h,hasError:m,hasValue:E,disabled:a,children:c(A,{children:[d,t("span",{})]})}),(s||b)&&c(_,{centered:h,children:[s&&t(J,{id:`${r}-helper`,children:s}),b&&i.map((l,n)=>t(K,{id:`${r}-error-${n}`,role:"alert","aria-live":"assertive",children:l},`${r}-error-${n}`))]})]})};export{k as TextField,k as default};