@kvdbil/components 16.0.8 → 17.0.0

package/cjs/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),s=require("../../shared/helpers.js"),o=require("../../theme.js"),i=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");require("../../shared/media-queries.js"),require("../../utils/utils.js");var l,t=(l=r)&&l.__esModule?l:{default:l};const d={regular:r.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),o=require("../../shared/helpers.js"),s=require("../../theme.js"),i=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");require("../../shared/media-queries.js"),require("../../utils/utils.js");var l,d=(l=r)&&l.__esModule?l:{default:l};const t={regular:r.css`
   .circle {
     &--outer {
       height: 24px;
@@ -29,43 +29,43 @@
 
   .circle {
     &--inner {
-      background-color: ${o.default.colors.grayscaleToned.light2};
+      background-color: ${s.default.colors.grayscaleToned.light2};
     }
 
     &--outer {
-      border: 2px solid ${o.default.colors.grayscaleToned.light2};
+      border: 2px solid ${s.default.colors.grayscaleToned.light2};
     }
   }
 `,n=r.css`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${o.default.colors.grayscaleToned.light2};
+      background-color: ${s.default.colors.grayscaleToned.light2};
     }
   }
-`,u=t.default.div`
+`,u=d.default.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
-`,h=t.default.span`
+`,h=d.default.span`
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
 
-  ${e=>d[e.size]};
+  ${e=>t[e.size]};
 
-  ${e=>!e.isDisabled&&e.isChecked&&((e,s,i)=>r.css`
+  ${e=>!e.isDisabled&&e.isChecked&&((e,o,i)=>r.css`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${o.default.colors[e][s]};
+      background-color: ${s.default.colors[e][o]};
     }
 
     &--outer {
       border: 2px solid
-        ${i?o.default.colors.error.dark:o.default.colors[e][s]};
+        ${i?s.default.colors.error.dark:s.default.colors[e][o]};
     }
   }
 `)(e.$color,e.$colorShade,e.$hasError)};
@@ -79,21 +79,21 @@
     transition: background-color 400ms;
     ${a.BackgroundStyles}
   }
-`,b=t.default.input`
+`,b=d.default.input`
   position: absolute;
   opacity: 0;
   margin: 0;
   ${e=>!e.isDisabled&&"cursor: pointer;"}
   z-index: 1;
-  ${e=>d[e.$size]};
-`,p=t.default.span`
+  ${e=>t[e.$size]};
+`,p=d.default.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
   border: 2px solid
-    ${e=>e.$hasError?o.default.colors.error.dark:o.default.colors.grayscaleToned.dark5};
-`,x=t.default.span`
+    ${e=>e.$hasError?s.default.colors.error.dark:s.default.colors.grayscaleToned.dark5};
+`,x=d.default.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
@@ -102,9 +102,9 @@
   position: absolute;
   top: 0;
   left: 0;
-`,f=t.default(i.BodyText)`
+`,f=d.default(i.BodyText)`
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,g=({name:r=s.generateNameHash("radio-button"),size:o="regular",checked:i=!1,isDisabled:a=!1,color:l="secondary",colorShade:t="mainAlt",label:d,hasError:c,...n})=>e.jsxs(u,{children:[e.jsxs(h,{size:o,$color:l,$colorShade:t,isChecked:i,isDisabled:a,$hasError:c,children:[e.jsx(b,{"data-validate":"checked",checked:i,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":i,className:"circle circle--outer",$size:o,isDisabled:a,$color:l,$colorShade:t,...n}),e.jsx(p,{className:"circle circle--outer",$hasError:c,children:e.jsx(x,{className:"circle circle--inner"})})]}),d&&e.jsx(f,{as:"label",htmlFor:r,isDisabled:a,children:d})]});exports.RadioButton=g,exports.default=g;
+`,g=({name:r=o.generateNameHash("radio-button"),size:s="regular",checked:i=!1,isDisabled:a=!1,color:l="secondary",colorShade:d="mainAlt",label:t,hasError:c,...n})=>e.jsxs(u,{children:[e.jsxs(h,{size:s,$color:l,$colorShade:d,isChecked:i,isDisabled:a,$hasError:c,children:[e.jsx(b,{"data-validate":"checked",checked:i,type:"radio",name:r,id:r,disabled:a,"aria-label":t?void 0:r,"aria-checked":i,"aria-invalid":c||void 0,className:"circle circle--outer",$size:s,isDisabled:a,$color:l,$colorShade:d,...n}),e.jsx(p,{className:"circle circle--outer",$hasError:c,children:e.jsx(x,{className:"circle circle--inner"})})]}),t&&e.jsx(f,{as:"label",htmlFor:r,isDisabled:a,children:t})]});exports.RadioButton=g,exports.default=g;

package/cjs/components/RegistrationPlate/index.js

@@ -17,7 +17,7 @@
     font-size: 11px;
     align-self: center;
   }
-`,s=i.default.div`
+`,a=i.default.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,10 +30,10 @@
   border-left: none;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
-`,a=i.default.div`
+`,s=i.default.div`
   color: ${({theme:e})=>e.colors.text.light};
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 10px;
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
   line-height: 1;
-`;exports.default=({regNumber:t})=>e.jsxs(l,{children:[e.jsxs(d,{children:[e.jsx(r.default,{}),e.jsx(a,{children:"S"})]}),e.jsx(s,{children:(e=>{const t=e.replace(/\s+/g,"").slice(0,6);return`${t.slice(0,3)} ${t.slice(3)}`})(t)})]});
+`;exports.default=({regNumber:t})=>e.jsxs(l,{role:"text","aria-label":`Registration plate: ${t}`,children:[e.jsxs(d,{"aria-hidden":"true",children:[e.jsx(r.default,{"aria-hidden":"true"}),e.jsx(s,{children:"S"})]}),e.jsx(a,{children:(e=>{const t=e.replace(/\s+/g,"").slice(0,6);return`${t.slice(0,3)} ${t.slice(3)}`})(t)})]});

package/cjs/components/Snackbar/index.js

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

package/cjs/components/Spinner/index.js

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

package/cjs/components/SpinnerThin/index.js

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("styled-components"),s=require("../../icons/components/CheckmarkIcon.js"),n=require("../../icons/components/CloseIcon.js"),t=require("../Spinner/index.js");require("../../theme.js"),require("../../utils/utils.js");var r,o=(r=i)&&r.__esModule?r:{default:r};const a=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("styled-components"),r=require("../../icons/components/CheckmarkIcon.js"),s=require("../../icons/components/CloseIcon.js"),t=require("../Spinner/index.js");require("../../theme.js"),require("../../utils/utils.js");var n,o=(n=i)&&n.__esModule?n:{default:n};const a=o.default.div`
   position: absolute;
 `,l=o.default(t.default)`
   position: absolute;
 
-  ${({size:e})=>e&&`\n      width: ${e}rem;\n      height: ${e}rem;\n      margin-left: -${e/2}rem;\n  `}
+  ${({$size:e})=>`\n      width: ${e}rem;\n      height: ${e}rem;\n      margin-left: -${e/2}rem;\n  `}
 
   border-width: 1px;
   transition:
     all 0.02s ease-in-out !important,
     width transition 0s !important;
 
-  ${({isLoading:e,theme:i})=>!e&&`\n        animation: none;\n        border: 1px solid ${i.colors.grayscaleToned.dark3};\n    `}
+  ${({$isLoading:e,theme:i})=>!e&&`\n        animation: none;\n        border: 1px solid ${i.colors.grayscaleToned.dark3};\n    `}
 `,d=o.default.div`
   position: absolute;
   display: flex;
@@ -19,8 +19,7 @@
   left: 1px;
   top: 1px;
 
-  ${({size:e})=>`\n      width: ${e}rem;\n      height: ${e}rem;\n      margin-left: -${e/2}rem;\n      font-size: ${e/2}rem;\n  `}
-
+  ${({$size:e})=>`\n      width: ${e}rem;\n      height: ${e}rem;\n      margin-left: -${e/2}rem;\n      font-size: ${e/2}rem;\n  `}
   transition: opacity 500ms ease-in-out;
-  opacity: ${({isDone:e,isError:i})=>e||i?"1":"0"};
-`,u=({isLoading:i=!0,isDone:t=!1,isError:r=!1,size:o=3.5,...u})=>e.jsxs(a,{"data-testid":"spinner-thin","aria-label":"Loading...",children:[e.jsx(d,{size:o,isDone:t,children:e.jsx(s.default,{})}),e.jsx(d,{isClose:!0,size:o,isError:r,children:e.jsx(n.default,{})}),e.jsx(l,{size:o,speed:"fast",color:"neutral",isLoading:i,...u})]});exports.SpinnerThin=u,exports.default=u;
+  opacity: ${({$isDone:e,$isError:i})=>e||i?"1":"0"};
+`,u=({isLoading:i=!0,isDone:t=!1,isError:n=!1,size:o=3.5,ariaLabels:u={},...p})=>e.jsxs(a,{"data-testid":"spinner-thin",role:"status","aria-live":"polite","aria-label":t?u?.isDone??"Completed":n?u?.isError??"Error":u?.isError??"Loading...","aria-busy":i,children:[e.jsx(d,{$size:o,$isDone:t,children:e.jsx(r.default,{})}),e.jsx(d,{$size:o,$isError:n,children:e.jsx(s.default,{})}),e.jsx(l,{size:o,speed:"fast",color:"neutral",...p,$size:o,$isLoading:i,useAria:!1})]});exports.SpinnerThin=u,exports.default=u;

package/cjs/components/Stepper/index.js

@@ -1,9 +1,9 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("styled-components"),o=require("../../typography/Heading/index.js"),r=require("../../icons/components/CheckmarkIcon.js");require("../../shared/media-queries.js");var t,l=(t=i)&&t.__esModule?t:{default:t};const s=l.default.div`
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("styled-components"),o=require("../../typography/Heading/index.js"),t=require("../../icons/components/CheckmarkIcon.js"),l=require("../../shared/helpers.js");require("../../shared/media-queries.js");var s,a=(s=r)&&s.__esModule?s:{default:s};const n=a.default.div`
   display: flex;
   flex-direction: ${({isHorizontal:e})=>e?"row":"column"};
   min-height: 4rem;
   margin: 0 auto;
-`,n=l.default.div`
+`,c=a.default.div`
   display: flex;
   flex-direction: ${({isHorizontal:e})=>e?"column":"row"};
   column-gap: 0.75rem;
@@ -19,7 +19,7 @@
     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]};
+    background: ${({theme:e,$color:i,$colorShade:r})=>e.colors[i][r]};
   }
 
   &:not(:last-child) :after {
@@ -32,9 +32,9 @@
     ${({isHorizontal:e,$size:i})=>!e&&`\n      left: calc(${i/2}rem + 1px);\n    `}
     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]};
+    background: ${({theme:e,$color:i,$colorShade:r})=>e.colors[i][r]};
   }
-`,a=l.default.div``,c=l.default.div`
+`,d=a.default.div``,$=a.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,12 +42,12 @@
   height: ${({size:e})=>e}rem;
   border-radius: 50%;
   border: 2px solid
-    ${({theme:e,$color:i,$colorShade:o})=>e.colors[i][o]};
+    ${({theme:e,$color:i,$colorShade:r})=>e.colors[i][r]};
   color: ${({theme:e,isFilled:i})=>i?e.colors.text.light:e.colors.text.dark};
-  ${({theme:e,isFilled:i,$color:o,$colorShade:r})=>i&&`\n    background-color: ${e.colors[o][r]};\n  `}
-`,d=l.default(o.TinyTitleRegular)`
+  ${({theme:e,isFilled:i,$color:r,$colorShade:o})=>i&&`\n    background-color: ${e.colors[r][o]};\n  `}
+`,p=a.default(o.TinyTitleRegular)`
   font-size: ${({size:e})=>e/2+"rem"};
   line-height: 1;
-`,$=l.default(r.default)`
+`,h=a.default(t.default)`
   font-size: ${({size:e})=>`calc(${e/2}rem + 6px)`};
-`;exports.Stepper=({children:i,orientation:o="vertical",variant:r="solid",color:t="primary",colorShade:l="mainAlt",size:h=2,activeStep:m,...z})=>{const p=i.length,u="horizontal"===o;return e.jsx(s,{isHorizontal:u,...z,children:i.map(((i,o)=>{const s=m&&o<m;return e.jsxs(n,{$color:t,$colorShade:l,$size:h,stepsNumber:p,isHorizontal:u,children:[e.jsx(a,{children:e.jsx(c,{$color:t,$colorShade:l,isFilled:s||"solid"===r,size:h,children:s?e.jsx($,{size:h}):e.jsx(d,{as:"span",size:h,children:o+1})})}),i]},o)}))})};
+`;exports.Stepper=({children:r,orientation:o="vertical",variant:t="solid",color:s="primary",colorShade:a="mainAlt",size:m=2,activeStep:u,ariaLabels:z={},...x})=>{const g=r.length,f="horizontal"===o,H=i.useRef(l.generateNameHash("stepper"));return e.jsx(n,{isHorizontal:f,...x,role:"list","aria-Label":z?.list??"Step progress",children:r.map(((i,r)=>{const o=u&&r<u,l=o||"solid"===t;return e.jsxs(c,{$color:s,$colorShade:a,$size:m,stepsNumber:g,isHorizontal:f,role:"listitem","aria-disabled":o?"true":void 0,"aria-current":u===r?"step":void 0,"aria-Label":(void 0===u?`${z?.step??"Step %s"}`:`${z?.stepUpcoming??"Upcoming step, step %s"}`).replaceAll("%s",String(r+1)),children:[e.jsx(d,{children:e.jsx($,{$color:s,$colorShade:a,isFilled:l,size:m,role:"img",children:o?e.jsx(h,{size:m,"aria-hidden":"true"}):e.jsx(p,{as:"span",size:m,"aria-hidden":"true",children:r+1})})}),i]},`${H}-${r}`)}))})};

package/cjs/components/StepperAccordion/index.js

@@ -1,31 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("styled-components"),s=require("../../theme.js"),o=require("../../typography/Heading/index.js"),t=require("../Icons/CheckIcon.js"),l=require("../Icons/Arrow.js"),a=require("../../shared/helpers.js"),d=require("react-collapse");require("../../shared/media-queries.js");var n,c=(n=i)&&n.__esModule?n:{default:n};const u="200ms",p=c.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("styled-components"),t=require("../../theme.js"),i=require("../../typography/Heading/index.js"),s=require("../../shared/helpers.js"),l=require("react-collapse"),a=require("../../icons/components/CheckmarkIcon.js"),n=require("../../icons/components/ShowMoreIcon.js");require("../../shared/media-queries.js");var d,c=(d=o)&&d.__esModule?d:{default:d};const u="200ms",f=c.default.div`
   .ReactCollapse--collapse {
     transition: height ${u} ease-in-out;
   }
-`,m=i.css`
-  margin-top: 0.25rem;
+`,p=o.css`
   transform: rotate(-180deg);
-`,f=c.default.div`
+`,h=c.default.div`
   display: flex;
   align-items: center;
   height: 4rem;
 
-  color: ${e=>e.isDisabled?s.default.colors.text.disabled:s.default.colors.text.dark};
-`,h=c.default(o.Title)`
+  color: ${e=>e.$isDisabled?t.default.colors.text.disabled:t.default.colors.text.dark};
+`,m=c.default(i.Title)`
   margin: 0;
-`,g=c.default(l.default)`
+`,x=c.default(n.default)`
+  font-size: 2rem;
   margin-left: auto;
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-top: -0.75rem;
-
-  fill: currentColor;
 
   transition: ${u};
   transform: rotate(0deg);
   transform-origin: center;
-  ${e=>e.isExpanded&&m};
-`,x=c.default.div`
+  ${e=>e.isExpanded&&p};
+`,$=c.default.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   display: flex;
   align-items: center;
@@ -36,12 +31,11 @@
   width: 2rem;
   height: 2rem;
   border-radius: 2rem;
-  border: 2px solid ${e=>s.default.colors[e.$color][e.$colorShade]};
+  border: 2px solid ${e=>t.default.colors[e.$color][e.$colorShade]};
 
   svg {
-    fill: currentColor;
-    height: 1rem;
-    width: 1rem;
+    height: 1.5rem;
+    width: 1.5rem;
 
     /* Kvd.se compatible stuff */
     margin: 0;
@@ -56,14 +50,14 @@
   }
 
   transition: background-color ${u};
-  ${e=>e.isComplete&&((e,r)=>i.css`
+  ${e=>e.isComplete&&((e,r)=>o.css`
   color: white;
-  background-color: ${s.default.colors[e][r]};
+  background-color: ${t.default.colors[e][r]};
 `)(e.$color,e.$colorShade)};
-  ${e=>e.isDisabled&&((e,r,o)=>i.css`
+  ${e=>e.isDisabled&&((e,r,i)=>o.css`
   fill: white;
-  border: 2px solid ${a.fadedColor(s.default.colors[r][o],.2)};
+  border: 2px solid ${s.fadedColor(t.default.colors[r][i],.2)};
 
-  ${e&&`\n      border: 2px solid ${a.fadedColor(s.default.colors[r][o],0)};\n      background-color: ${a.fadedColor(s.default.colors[r][o],.5)};\n    `}
+  ${e&&`\n      border: 2px solid ${s.fadedColor(t.default.colors[r][i],0)};\n      background-color: ${s.fadedColor(t.default.colors[r][i],.5)};\n    `}
 `)(e.isComplete,e.$color,e.$colorShade)};
-`,$=i=>{const[s,o]=r.useState(i.isExpanded||!1),l=r.useCallback((()=>{i.isDisabled||o((e=>!e))}),[i.isDisabled]);r.useEffect((()=>{o(i.isExpanded||!1)}),[i.isDisabled,i.isExpanded]);const a=i.step||0===i.step;return e.jsxs(p,{children:[e.jsxs(f,{...i,onClick:e=>{const r=i.onClick||l;i.isDisabled||r(e)},isExpanded:s,isDisabled:i.isDisabled||!1,children:[a&&e.jsx(x,{isComplete:i.isComplete||!1,isDisabled:i.isDisabled||!1,$color:i.color||"primary",$colorShade:i.colorShade||"main",children:i.isComplete?e.jsx(t.default,{}):e.jsx("span",{children:i.step})}),e.jsx(h,{children:i.title}),e.jsx(g,{isExpanded:s})]}),e.jsx(d.Collapse,{isOpened:s,children:i.children}),i.closedChildren&&i.closedChildren]})};exports.StepperAccordion=$,exports.default=$;
+`,g=({step:o,isExpanded:t,isDisabled:i,isComplete:n,onClick:d,color:c,colorShade:u,title:p,children:g,closedChildren:b,...j})=>{const[y,C]=r.useState(t||!1),k=r.useRef(s.generateNameHash("stepper")),q=r.useCallback((()=>{i||C((e=>!e))}),[i]);r.useEffect((()=>{C(t||!1)}),[i,t]);const v=o||0===o,S=`${k.current}-header`,D=`${k.current}-content`;return e.jsxs(f,{children:[e.jsxs(h,{...j,id:S,onClick:e=>{i||(d||q)(e)},onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&!i&&(e.preventDefault(),q())},$isDisabled:i||!1,role:"button",tabIndex:0,"aria-expanded":y,"aria-controls":D,children:[v&&e.jsx($,{isComplete:n||!1,isDisabled:i||!1,$color:c||"primary",$colorShade:u||"main",children:n?e.jsx(a.default,{}):e.jsx("span",{children:o})}),e.jsx(m,{children:p}),e.jsx(x,{isExpanded:y})]}),e.jsx(l.Collapse,{isOpened:y,children:e.jsx("div",{id:D,role:"region","aria-labelledby":S,children:g})}),b&&b]})};exports.StepperAccordion=g,exports.default=g;

package/cjs/components/Switcher/index.js

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

package/cjs/components/Table/index.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),a=require("styled-components"),t=require("../../shared/media-queries.js"),l=require("../../theme.js");var d,o=(d=a)&&d.__esModule?d:{default:d};const i=o.default.div`
-  ${t.mq("mobileS","tablet")} {
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),r=require("styled-components"),l=require("../../shared/media-queries.js"),t=require("../../theme.js");var d,o=(d=r)&&d.__esModule?d:{default:d};const i=o.default.div`
+  ${l.mq("mobileS","tablet")} {
     display: block;
     max-width: -moz-fit-content;
     max-width: fit-content;
@@ -9,16 +9,16 @@
   }
 `,s=o.default.table`
   border-collapse: collapse;
-  border: 1px solid ${l.default.colors.grayscaleToned.light3};
-  font-family: ${l.default.typography.fontBaseFamily};
+  border: 1px solid ${t.default.colors.grayscaleToned.light3};
+  font-family: ${t.default.typography.fontBaseFamily};
   text-align: left;
 `,n=o.default.thead``,c=o.default.th`
-  border: 1px solid ${l.default.colors.grayscaleToned.light3};
+  border: 1px solid ${t.default.colors.grayscaleToned.light3};
   padding: 0.75rem;
   vertical-align: top;
-  background-color: ${l.default.colors.background.gray};
-`,u=o.default.tbody``,h=o.default.tr``,p=o.default.td`
-  border: 1px solid ${l.default.colors.grayscaleToned.light3};
+  background-color: ${t.default.colors.background.gray};
+`,u=o.default.tbody``,p=o.default.tr``,h=o.default.td`
+  border: 1px solid ${t.default.colors.grayscaleToned.light3};
   padding: 0.5rem 0.75rem;
   vertical-align: top;
-`,f=a=>e.jsx(h,{children:r.Children.toArray(a.map(((r,a)=>e.jsx(c,{children:r},a))))},"RowHead"),m=(r,a)=>a.length?r.map((r=>a?.map((a=>e.jsx(p,{children:r[a]},a))))):r.map((r=>Object.entries(r).map((([r,a])=>e.jsx(p,{children:a},r))))),x=a=>r.Children.toArray(a.map(((a,t)=>e.jsx(h,{children:r.Children.toArray(a)},t))));exports.default=({columns:r,data:a})=>e.jsx(i,{children:e.jsxs(s,{children:[r&&e.jsx(n,{children:f(r)}),a&&e.jsx(u,{children:x(m(a,r??[]))})]})});
+`,f=r=>e.jsx(p,{children:a.Children.toArray(r.map(((a,r)=>e.jsx(c,{scope:"col",children:a},r))))},"RowHead"),m=(a,r)=>r.length?a.map((a=>r?.map((r=>e.jsx(h,{children:a[r]},r))))):a.map((a=>Object.entries(a).map((([a,r])=>e.jsx(h,{children:r},a))))),x=r=>a.Children.toArray(r.map(((r,l)=>e.jsx(p,{children:a.Children.toArray(r)},l))));exports.default=({columns:a,data:r,ariaLabel:l})=>e.jsx(i,{children:e.jsxs(s,{"aria-label":l,children:[a&&e.jsx(n,{children:f(a)}),r&&e.jsx(u,{children:x(m(r,a??[]))})]})});

package/cjs/components/Tabs/Tab.js

@@ -8,10 +8,9 @@
     transition:
       color 0.3s ease,
       border 0.3s ease;
-    border-radius: unset;
 
     :focus-visible {
       ${({theme:e,isActive:r,$activeColor:t,$activeColorShade:o})=>!r&&`background-color: ${i.hexToRGB(e.colors[t][o],.1)};\n      `}
     }
   }
-`,d=o.forwardRef((({label:r,index:t=-1,isActive:o=!1,onClick:i,activeColor:a="secondary",activeColorShade:s="mainAlt",isDisabled:d=!1,onKeyUp:c},u)=>e.jsx(l,{role:"presentation",children:e.jsx(n,{tabIndex:o?0:-1,isActive:o,onClick:e=>i&&i(e,t),$activeColor:a,$activeColorShade:s,isDisabled:d,variant:"flat",color:o?a:"neutral",colorShade:s,id:`tab-${t}`,role:"tab","aria-selected":o?"true":"false","aria-controls":`tabpanel-${t}`,onKeyUp:e=>c&&c(e,t),ref:u,children:r})})));d.displayName="Tab",exports.default=d;
+`,d=o.forwardRef((({label:r,index:t=-1,isActive:o=!1,onClick:i,activeColor:a="secondary",activeColorShade:s="mainAlt",isDisabled:d=!1,onKeyUp:c},u)=>e.jsx(l,{role:"presentation",children:e.jsx(n,{id:`tab-${t}`,role:"tab","aria-selected":o,"aria-controls":`tabpanel-${t}`,tabIndex:o?0:-1,isActive:o,onClick:e=>i&&i(e,t),$activeColor:a,$activeColorShade:s,isDisabled:d,variant:"flat",color:o?a:"neutral",colorShade:s,onKeyUp:e=>c&&c(e,t),ref:u,noRadius:!0,children:r})})));d.displayName="Tab",exports.default=d;

package/cjs/components/Tabs/Tabs.js

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

package/cjs/components/TextArea/index.js

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

package/cjs/components/Textfield/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),s=require("../FieldLabel.js"),o=require("../../typography/BodyText/index.js"),t=require("../../shared/helpers.js");require("../../shared/media-queries.js");var a,d=(a=l)&&a.__esModule?a:{default:a};const i=l.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),s=require("../FieldLabel.js"),o=require("../../typography/BodyText/index.js"),a=require("../../shared/helpers.js");require("../../shared/media-queries.js");var t,d=(t=l)&&t.__esModule?t:{default:t};const i=l.css`
   border: 1px solid ${({theme:e})=>e.colors.grayscaleToned.light2};
   color: ${({theme:e})=>e.colors.text.disabled};
   fill: ${({theme:e})=>e.colors.text.disabled};
@@ -60,7 +60,7 @@
 `,b=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,g=d.default.span`
+`,$=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,f=({placeholder:l="",isDisabled:o=!1,centered:a=!1,hasError:d=!1,className:i,helperText:n,label:c="",onBlur:f=(()=>null),onFocus:y=(()=>null),forwardRef:$,suffix:j,name:k=t.generateNameHash("text-input"),errors:F,isAutoFocused:v=!1,...q})=>{const[T,B]=r.useState(!1),E=!!q.value,w=F&&Array.isArray(F)&&F?.length>0;return e.jsxs(h,{className:i,children:[e.jsxs(u,{isFocused:T,disabled:o,centered:a,hasError:d,hasPlaceholder:!!l,children:[e.jsx(x,{...q,id:k,name:k,"aria-label":c||k,ref:$,onFocus:e=>{B(!0),y(e)},onBlur:e=>{B(!1),f(e)},disabled:o,placeholder:c&&!T?"":l,autoFocus:v}),j&&e.jsx(m,{children:j})]}),c&&e.jsx(s.Label,{htmlFor:k,isFocused:T,centered:a,hasError:d,hasValue:E,disabled:o,children:e.jsxs(e.Fragment,{children:[c,e.jsx("span",{})]})}),(n||w)&&e.jsxs(p,{centered:a,children:[n&&e.jsx(b,{children:n}),w&&F.map((r=>e.jsx(g,{children:r},r)))]})]})};exports.TextField=f,exports.default=f;
+`,f=({placeholder:l="",isDisabled:o=!1,centered:t=!1,hasError:d=!1,className:i,helperText:n,label:c="",onBlur:f=(()=>null),onFocus:g=(()=>null),forwardRef:y,suffix:j,name:v=a.generateNameHash("text-input"),errors:k,isAutoFocused:F=!1,...q})=>{const[T,B]=r.useState(!1),E=!!q.value,w=k&&Array.isArray(k)&&k?.length>0,N=`${r.useRef(a.generateNameHash("text-input")).current}-${v}`,_=k?.map(((e,r)=>`${N}-error-${r}`))??[],A=[n?`${N}-helper`:null,..._].filter(Boolean).join(" ");return e.jsxs(h,{className:i,children:[e.jsxs(u,{isFocused:T,disabled:o,centered:t,hasError:d,hasPlaceholder:!!l,children:[e.jsx(x,{...q,id:N,name:v,"aria-labelledby":c?`${N}-label`:void 0,"aria-describedby":A||void 0,"aria-invalid":w||d,ref:y,onFocus:e=>{B(!0),g(e)},onBlur:e=>{B(!1),f(e)},disabled:o,placeholder:c&&!T?"":l,autoFocus:F}),j&&e.jsx(m,{children:j})]}),c&&e.jsx(s.Label,{id:`${N}-label`,htmlFor:N,isFocused:T,centered:t,hasError:d,hasValue:E,disabled:o,children:e.jsxs(e.Fragment,{children:[c,e.jsx("span",{})]})}),(n||w)&&e.jsxs(p,{centered:t,children:[n&&e.jsx(b,{id:`${N}-helper`,children:n}),w&&k.map(((r,l)=>e.jsx($,{id:`${N}-error-${l}`,role:"alert","aria-live":"assertive",children:r},`${N}-error-${l}`)))]})]})};exports.TextField=f,exports.default=f;