@kvdbil/components 17.2.2 → 17.3.0

package/cjs/utils/utils.js

@@ -6,4 +6,8 @@
   font-family: inherit;
   outline: none;
   padding: 0;
+
+  &:focus-visible {
+    outline: revert;
+  }
 `,r=e=>({darker:e.colors.grayscaleNeutral.dark1,dark:e.colors.grayscaleNeutral.dark1,mainAlt:e.colors.grayscaleToned.dark1,main:e.colors.grayscaleToned.dark1,light:e.colors.grayscaleToned.light1,lighter:e.colors.grayscaleToned.light2,lighter2:e.colors.grayscaleToned.light3,lighter3:e.colors.grayscaleToned.light4}),t=["darker","dark","mainAlt","main","light","lighter","lighter2","lighter3"];exports.getDarkerShade=e=>{const r=t.indexOf(e);return r>0?t[r-1]:e},exports.getLighterShade=e=>{const r=t.indexOf(e);return r>=0&&r<t.length-1?t[r+1]:e},exports.getLuminosity=e=>{let r=0,t=0,a=0;return 4===e.length?(r=parseInt("0x"+e[1]+e[1]),t=parseInt("0x"+e[2]+e[2]),a=parseInt("0x"+e[3]+e[3])):7===e.length&&(r=parseInt("0x"+e[1]+e[2]),t=parseInt("0x"+e[3]+e[4]),a=parseInt("0x"+e[5]+e[6])),(Math.max(Number(r/255),Number(t/255),Number(a/255))+Math.min(Number(r/255),Number(t/255),Number(a/255)))/2*100},exports.hexToRGB=(e,r=1)=>`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${r})`,exports.neutralColorSwap=r,exports.resetButtonStyle=e,exports.resolveColorWithNeutral=(e,t)=>"neutral"===t?r(e):e.colors[t];

package/esm/components/Accordion/index.js

@@ -1,20 +1,20 @@
-import{jsx as r,jsxs as c}from"react/jsx-runtime";import{useState as u,useRef as $}from"react";import i from"styled-components";import{UnmountClosed as x}from"react-collapse";import{mq as b}from"../../shared/media-queries.js";import w from"../../icons/components/ArrowDownIcon.js";import{generateNameHash as k}from"../../shared/helpers.js";const v=i.div`
+import{jsx as i,jsxs as d}from"react/jsx-runtime";import{useState as $}from"react";import r from"styled-components";import{UnmountClosed as u}from"react-collapse";import{mq as x}from"../../shared/media-queries.js";import b from"../../icons/components/ArrowDownIcon.js";import{useNameAndId as w}from"../../hooks/useNameAndId.js";import"../../shared/helpers.js";const k=r.div`
   display: flex;
   flex-direction: column;
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,O=i.ul`
+`,O=r.ul`
   margin: 0;
   padding: 0;
   list-style: none;
-`,B=i.div`
+`,v=r.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
   margin: 0.5rem 0;
-`,N=i.div`
+`,B=r.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,30 +22,30 @@ import{jsx as r,jsxs as c}from"react/jsx-runtime";import{useState as u,useRef as
   color: ${({theme:e})=>e.colors.text.dark};
   transition: 200ms ease-in-out;
   transform: ${({isOpen:e})=>`rotate(${e?"180deg":"0deg"})`};
-`,T=i.li`
+`,I=r.li`
   border-top: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
   padding: ${({isOpen:e})=>e?"0.5rem 0 1rem 0":"0.5rem 0"};
 
   &:last-child {
     border-bottom: ${({theme:e})=>`1px solid ${e.colors.grayscaleToned.light2}`};
   }
-`,j=i.span`
+`,N=r.span`
   color: ${({theme:e})=>e.colors.text.dark};
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 0.9375rem;
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
-`,C=i.div`
+`,T=r.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   color: ${({theme:e})=>e.colors.text.dark};
   font-size: 0.9375rem;
   font-weight: ${({theme:e})=>e.typography.fontBaseRegularWeight};
   line-height: 1.3;
   transition: 200ms ease-in-out;
-  ${b("tablet")} {
+  ${x("tablet")} {
     padding: 0;
   }
   & > * {
     margin-top: 0;
     margin-bottom: 0;
   }
-`,d=({items:e,...p})=>{const[h,f]=u({}),a=$(k("accordion")),s=o=>{f(t=>({...t,[o]:!t[o]}))},g=o=>()=>{s(o)},y=o=>t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(o))};return r(v,{...p,children:r(O,{className:"accordionList",children:e.map((o,t)=>{const n=!!h[t],l=`${a.current}-${t}-header`,m=`${a.current}-${t}-content`;return c(T,{isOpen:n,className:"accordionItem",children:[c(B,{id:l,onClick:g(t),onKeyDown:y(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":n,"aria-controls":m,children:[r(j,{as:"span",children:o.title}),r(N,{isOpen:n,children:r(w,{})})]}),r(x,{isOpened:n,children:r(C,{id:m,"aria-labelledby":l,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:o.text}})},t)]},o.title)})})})};export{d as Accordion,d as default};
+`,c=({items:e,...p})=>{const[h,f]=$({}),{id:a}=w("accordion"),s=o=>{f(t=>({...t,[o]:!t[o]}))},g=o=>()=>{s(o)},y=o=>t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(o))};return i(k,{...p,children:i(O,{className:"accordionList",children:e.map((o,t)=>{const n=!!h[t],l=`${a}-${t}-header`,m=`${a}-${t}-content`;return d(I,{isOpen:n,className:"accordionItem",children:[d(v,{id:l,onClick:g(t),onKeyDown:y(t),className:"accordionItemTitle",role:"button",tabIndex:0,"aria-expanded":n,"aria-controls":m,children:[i(N,{as:"span",children:o.title}),i(B,{isOpen:n,children:i(b,{})})]}),i(u,{isOpened:n,children:i(T,{id:m,"aria-labelledby":l,role:"region",className:"wysiwyg",dangerouslySetInnerHTML:{__html:o.text}})},t)]},o.title)})})})};export{c as Accordion,c as default};

package/esm/components/Breadcrumbs/index.js

@@ -1,7 +1,7 @@
-import{jsx as r}from"react/jsx-runtime";import{useRef as m}from"react";import l from"styled-components";import s from"./BreadcrumbsItem.js";import p from"../../icons/components/NextIcon.js";import{generateNameHash as d}from"../../shared/helpers.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const c=l.ol`
+import{jsx as r}from"react/jsx-runtime";import m from"styled-components";import p from"./BreadcrumbsItem.js";import l from"../../icons/components/NextIcon.js";import{useNameAndId as d}from"../../hooks/useNameAndId.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";import"react";import"../../shared/helpers.js";const s=m.ol`
   display: flex;
   align-items: center;
   padding: 0;
   white-space: nowrap;
   overflow: hidden;
-`,f=({links:e,separator:o=r(p,{}),onlyLastTruncated:n=!1})=>{const t=m(d("breadcrumb"));return r("nav",{"aria-label":"Breadcrumb",id:t.current,children:r(c,{children:e.map((i,a)=>r(s,{link:i,separator:o,isLast:a===e.length-1,onlyLastTruncated:n},`${t.current}-${a}`))})})};export{f as default};
+`,c=({links:a,separator:e=r(l,{}),onlyLastTruncated:i=!1})=>{const{id:o}=d("breadcrumb");return r("nav",{"aria-label":"Breadcrumb",id:o,children:r(s,{children:a.map((n,t)=>r(p,{link:n,separator:e,isLast:t===a.length-1,onlyLastTruncated:i},`${o}-${t}`))})})};export{c as default};

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-import{jsxs as m,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`
+import{jsxs as u,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled-components";import f from"../../icons/components/CheckmarkIcon.js";import i from"../../theme.js";import{BodyText as $}from"../../typography/BodyText/index.js";import{BackgroundStyles as k}from"../IconButton.js";import{useNameAndId as v}from"../../hooks/useNameAndId.js";import"../../shared/media-queries.js";import"../../utils/utils.js";import"react";import"../../shared/helpers.js";const y=r`
   width: 24px;
   height: 24px;
 
@@ -6,7 +6,7 @@ import{jsxs as m,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
     width: 15px;
     height: 15px;
   }
-`,v=r`
+`,z=r`
   width: 32px;
   height: 32px;
 
@@ -14,10 +14,10 @@ import{jsxs as m,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
     width: 22px;
     height: 22px;
   }
-`,p={regular:k,large:v},y=r`
+`,b={regular:y,large:z},D=r`
   cursor: default;
   border: 2px solid ${i.colors.grayscaleToned.light2};
-`,z=(e,o)=>r`
+`,S=(e,o)=>r`
   svg {
     opacity: 1;
   }
@@ -27,17 +27,17 @@ import{jsxs as m,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
 
   background: ${i.colors[e][o]};
   border: 2px solid ${i.colors[e][o]};
-`,D=r`
+`,w=r`
   background: ${i.colors.grayscaleToned.light2};
   z-index: 1;
-`,S=r`
+`,C=r`
   border: 2px solid ${i.colors.error.dark};
-`,w=a.div`
+`,T=a.div`
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
   position: relative;
-`,C=a.input.attrs({type:"checkbox"})`
+`,j=a.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -47,14 +47,17 @@ import{jsxs as m,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
   outline: none;
   cursor: pointer;
   z-index: 1;
-  ${e=>p[e.boxSize]};
+  ${e=>b[e.boxSize]};
 
   &:hover,
   &:focus {
     transition: background-color 400ms;
-    ${u}
+    ${k}
   }
-`,T=a.span`
+  &:focus-visible {
+    outline: revert;
+  }
+`,B=a.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -65,21 +68,21 @@ import{jsxs as m,jsx as s}from"react/jsx-runtime";import a,{css as r}from"styled
 
   border: 2px solid ${i.colors.grayscaleToned.dark5};
 
-  ${e=>p[e.size]};
+  ${e=>b[e.size]};
 
   svg {
     opacity: 0;
     color: ${({theme:e})=>e.colors.common.white};
   }
 
-  ${e=>e.isChecked&&z(e.$color,e.$colorShade)};
-  ${e=>e.isDisabled&&y};
-  ${e=>e.hasError&&S};
-  ${e=>e.isChecked&&e.isDisabled&&D};
-`,j=a(f)`
+  ${e=>e.isChecked&&S(e.$color,e.$colorShade)};
+  ${e=>e.isDisabled&&D};
+  ${e=>e.hasError&&C};
+  ${e=>e.isChecked&&e.isDisabled&&w};
+`,E=a($)`
   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;
-`,x=({name:e=$("check-box"),isDisabled:o=!1,size:d="regular",checked:l=!1,color:c="secondary",colorShade:n="mainAlt",hasError:h=!1,label:t,...b})=>m(w,{children:[s(C,{...b,type:"checkbox",checked:l,"data-validate":"checked",name:e,id:e,$color:c,$colorShade:n,disabled:o,isDisabled:o,boxSize:d,"aria-label":t?void 0:e,"aria-checked":l,"aria-invalid":h||void 0}),s(T,{size:d,$color:c,$colorShade:n,isChecked:l,isDisabled:o,hasError:h,children:s(g,{})}),t&&s(j,{as:"label",htmlFor:e,isDisabled:o,children:t})]});export{x as CheckBox,x as default};
+`,m=({name:e,isDisabled:o=!1,size:d="regular",checked:l=!1,color:c="secondary",colorShade:n="mainAlt",hasError:h=!1,label:t,...g})=>{const{name:p,id:x}=v("check-box",e);return u(T,{children:[s(j,{...g,type:"checkbox",checked:l,"data-validate":"checked",name:p,id:x,$color:c,$colorShade:n,disabled:o,isDisabled:o,boxSize:d,"aria-label":t?void 0:p,"aria-checked":l,"aria-invalid":h||void 0}),s(B,{size:d,$color:c,$colorShade:n,isChecked:l,isDisabled:o,hasError:h,children:s(f,{})}),t&&s(E,{as:"label",htmlFor:x,isDisabled:o,children:t})]})};export{m as CheckBox,m as default};

package/esm/components/EditRow/index.js

@@ -1,4 +1,4 @@
-import{jsxs as m,Fragment as Q,jsx as t}from"react/jsx-runtime";import{useState as s,useEffect as R}from"react";import i from"styled-components";import v from"../../theme.js";import{BodyLink as U,BodyText as V}from"../../typography/BodyText/index.js";import{Button as f}from"../Button/index.js";import{Chip as W}from"../Chip/index.js";import{TextField as X}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../shared/helpers.js";const Y=i.div`
+import{jsxs as m,Fragment as Q,jsx as t}from"react/jsx-runtime";import{useState as s,useEffect as R}from"react";import i from"styled-components";import v from"../../theme.js";import{BodyLink as U,BodyText as V}from"../../typography/BodyText/index.js";import{Button as f}from"../Button/index.js";import{Chip as W}from"../Chip/index.js";import{TextField as X}from"../Textfield/index.js";import"../../shared/media-queries.js";import"../Spinner/index.js";import"../../utils/utils.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../icons/components/CloseIcon.js";import"../Chip/styles.js";import"../FieldLabel.js";import"../../hooks/useNameAndId.js";import"../../shared/helpers.js";const Y=i.div`
   display: flex;
   border-bottom: 1px solid ${v.colors.grayscaleToned.light5};
 `,Z=i.form`

package/esm/components/Modal/index.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect as b}from"react";import{createPortal as y}from"react-dom";import{CSSTransition as v}from"react-transition-group";import e,{css as k,createGlobalStyle as d}from"styled-components";import T from"../../icons/components/CloseIcon.js";import{resetButtonStyle as E}from"../../utils/utils.js";import{FocusTrap as C}from"../FocusTrap.js";const s=k`
+import{jsx as t,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect as g}from"react";import{createPortal as y}from"react-dom";import{CSSTransition as v}from"react-transition-group";import e,{css as k,createGlobalStyle as d}from"styled-components";import T from"../../icons/components/CloseIcon.js";import{resetButtonStyle as E}from"../../utils/utils.js";import{FocusTrap as C}from"../FocusTrap.js";const s=k`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -24,16 +24,20 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
   top: 0;
   left: 0;
   z-index: 200;
+`,j=e.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `,P=e.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`,$=e.div`
+`,z=e.div`
   position: relative;
-  max-width: 512px;
-  max-height: 90vh;
   overflow-y: auto;
 
   padding: 1rem;
@@ -45,17 +49,9 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
     0px 11px 15px rgba(0, 0, 0, 0.15);
 
   margin: 1rem;
-  margin-top: 50vh;
-  transform: translateY(-50%);
-  margin-left: 1rem;
-  margin-right: 1rem;
-
-  @media (min-width: 500px) {
-    margin-left: auto;
-    margin-right: auto;
-    min-width: 355px;
-  }
-`,j=e.button`
+  width: 80vw;
+  max-width: 512px;
+`,F=e.button`
   ${E}
   display: flex;
   justify-self: flex-end;
@@ -71,7 +67,7 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
   svg {
     font-size: 1.5rem;
   }
-`,z=d`
+`,O=d`
   body {
     overflow: hidden;
 
@@ -79,6 +75,6 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
         padding-right: 15px !important;
     `}
   }
-`,F=d`
+`,L=d`
   ${s}
-`,l=({children:c,isOpen:o,contentStyles:p,withPortal:m=!1,withCloseIcon:u=!0,onClose:i,focusTrapProps:g={},...h})=>{b(()=>{const a=x=>{x.key==="Escape"&&o&&i()};return o&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,o]);const f=!!(typeof window<"u"&&window.document&&window.document.createElement),n=t(v,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:r(w,{children:[t(F,{}),r(S,{...h,children:[t(P,{"data-testid":"background",onClick:i}),t(C,{pause:!o,...g,children:r($,{style:p,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[u&&t(j,{onClick:i,"data-testid":"close",type:"button","aria-label":"Close dialog",children:t(T,{})}),c]})}),t(z,{})]})]})});return m&&f?y(n,document.body):n};export{l as Modal,l as default};
+`,c=({children:l,isOpen:o,contentStyles:p,withPortal:u=!1,withCloseIcon:m=!0,onClose:i,focusTrapProps:f={},...w})=>{g(()=>{const a=x=>{x.key==="Escape"&&o&&i()};return o&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,o]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),r=t(v,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:n(b,{children:[t(L,{}),n(S,{...w,children:[t(P,{"data-testid":"background",onClick:i}),t(C,{pause:!o,...f,children:t(j,{children:n(z,{style:p,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[m&&t(F,{onClick:i,"data-testid":"close",type:"button","aria-label":"Close dialog",children:t(T,{})}),l]})})}),t(O,{})]})]})});return u&&h?y(r,document.body):r};export{c as Modal,c as default};

package/esm/components/RadioButton/index.js

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

package/esm/components/Stepper/index.js

@@ -1,9 +1,9 @@
-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`
+import{jsx as a,jsxs as x}from"react/jsx-runtime";import t from"styled-components";import{TinyTitleRegular as f}from"../../typography/Heading/index.js";import H from"../../icons/components/CheckmarkIcon.js";import{useNameAndId as b}from"../../hooks/useNameAndId.js";import"../../shared/media-queries.js";import"react";import"../../shared/helpers.js";const S=t.div`
   display: flex;
   flex-direction: ${({isHorizontal:e})=>e?"row":"column"};
   min-height: 4rem;
   margin: 0 auto;
-`,w=t.div`
+`,v=t.div`
   display: flex;
   flex-direction: ${({isHorizontal:e})=>e?"column":"row"};
   column-gap: 0.75rem;
@@ -42,7 +42,7 @@ import{jsx as a,jsxs as f}from"react/jsx-runtime";import{useRef as x}from"react"
     height: ${({isHorizontal:e,$size:i})=>e?"2px":`calc(50% - ${i/2}rem)`};
     background: ${({theme:e,$color:i,$colorShade:o})=>e.colors[i][o]};
   }
-`,y=t.div``,k=t.div`
+`,w=t.div``,y=t.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,9 +55,9 @@ import{jsx as a,jsxs as f}from"react/jsx-runtime";import{useRef as x}from"react"
   ${({theme:e,isFilled:i,$color:o,$colorShade:c})=>i&&`
     background-color: ${e.colors[o][c]};
   `}
-`,j=t(H)`
+`,k=t(f)`
   font-size: ${({size:e})=>`${e/2}rem`};
   line-height: 1;
-`,C=t(b)`
+`,j=t(H)`
   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};
+`,A=({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",{id:z}=b("stepper");return a(S,{isHorizontal:d,...m,role:"list","aria-Label":s?.list??"Step progress",children:e.map((u,r)=>{const $=l&&r<l,g=$||o==="solid";return x(v,{$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(w,{children:a(y,{$color:c,$colorShade:p,isFilled:g,size:n,role:"img",children:$?a(j,{size:n,"aria-hidden":"true"}):a(k,{as:"span",size:n,"aria-hidden":"true",children:r+1})})}),u]},`${z}-${r}`)})})};export{A as Stepper};

package/esm/components/StepperAccordion/index.js

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

package/esm/components/TextArea/index.js

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

package/esm/components/Textfield/index.js

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

package/esm/hooks/useNameAndId.js

@@ -0,0 +1 @@
+import{useRef as r}from"react";import{generateNameHash as t}from"../shared/helpers.js";const u=(n,o)=>{const e=r(o??t(n)),m=r(`${e.current}-${t()}`);return{name:e.current,id:m.current}};export{u as useNameAndId};