@alma-oss/spirit-web-react 4.4.2 → 4.5.0

package/dist/components/TextFieldBase/TextFieldBase.js

@@ -1,71 +1,81 @@
 "use client";
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import b from "classnames";
-import { forwardRef as m } from "react";
-import { Sizes as S } from "../../constants/dictionaries.js";
-import { useStyleProps as _ } from "../../hooks/styleProps.js";
-import { useAriaDescribedBy as g } from "../../hooks/useAriaDescribedBy.js";
-import A from "../Field/HelperText.js";
-import v from "../Field/Label.js";
-import I from "../Field/useAriaIds.js";
-import w from "../Field/ValidationText.js";
-import { useValidationTextRole as D } from "../Field/useValidationTextRole.js";
-import E from "./TextFieldBaseInput.js";
-import { useTextFieldBaseStyleProps as U } from "./useTextFieldBaseStyleProps.js";
-import V from "./withPasswordToggle.js";
-const R = m(
-  V(E)
-), j = (d, n) => {
+import { jsx as o, jsxs as i, Fragment as v } from "react/jsx-runtime";
+import A from "classnames";
+import { forwardRef as x } from "react";
+import { Sizes as E } from "../../constants/dictionaries.js";
+import { useStyleProps as w } from "../../hooks/styleProps.js";
+import { useAriaDescribedBy as I } from "../../hooks/useAriaIdRefs.js";
+import U from "../CharacterCounter/CharacterCounter.js";
+import C from "../Field/HelperText.js";
+import D from "../Field/Label.js";
+import V from "../Field/ValidationText.js";
+import { useValidationTextRole as z } from "../Field/useValidationTextRole.js";
+import R from "../Flex/Flex.js";
+import j from "./TextFieldBaseInput.js";
+import { useTextFieldBaseStyleProps as M } from "./useTextFieldBaseStyleProps.js";
+import W from "./withPasswordToggle.js";
+const $ = x(
+  W(j)
+), H = (f, h) => {
   const {
-    "aria-describedby": c = "",
-    hasValidationIcon: x,
-    helperText: T,
+    "aria-describedby": u = "",
+    counterProps: s,
+    hasValidationIcon: F,
+    helperText: n,
     id: e,
-    label: f,
-    size: s = S.MEDIUM,
+    label: g,
+    size: m = E.MEDIUM,
     validationState: t,
-    validationText: i,
-    ...h
-  } = d, { classProps: r, props: u } = U({
+    validationText: a,
+    ...N
+  } = f, { classProps: r, props: P } = M({
     id: e,
-    size: s,
+    size: m,
     validationState: t,
-    ...h
-  }), { styleProps: a, props: F } = _(u), [B, l] = I(c), N = g(B), P = D({
+    ...N
+  }), { styleProps: p, props: B } = w(P), [b, l] = I(u), y = z({
     validationState: t,
-    validationText: i
-  });
-  return /* @__PURE__ */ y("div", { ...a, className: b(r.root, a.className), children: [
-    /* @__PURE__ */ o(v, { htmlFor: e, UNSAFE_className: r.label, children: f }),
-    /* @__PURE__ */ o(R, { ...F, ...N, id: e, ref: n, size: s }),
-    /* @__PURE__ */ o(
-      A,
-      {
-        UNSAFE_className: r.helperText,
-        id: `${e}__helperText`,
-        registerAria: l,
-        helperText: T
-      }
-    ),
-    t && /* @__PURE__ */ o(
-      w,
-      {
-        UNSAFE_className: r.validationText,
-        elementType: "span",
-        ...x && { hasValidationStateIcon: t },
-        id: `${e}__validationText`,
-        validationText: i,
-        registerAria: l,
-        role: P
-      }
-    )
+    validationText: a
+  }), S = n || t && a, d = /* @__PURE__ */ o(
+    C,
+    {
+      UNSAFE_className: r.helperText,
+      id: `${e}__helper-text`,
+      registerAria: l,
+      helperText: n
+    }
+  ), c = t ? /* @__PURE__ */ o(
+    V,
+    {
+      UNSAFE_className: r.validationText,
+      elementType: "span",
+      ...F && { hasValidationStateIcon: t },
+      id: `${e}__validation-text`,
+      validationText: a,
+      registerAria: l,
+      role: y
+    }
+  ) : null, _ = s ? /* @__PURE__ */ o(U, { ...s, id: e, registerAria: l, UNSAFE_className: r.counter }) : null;
+  return /* @__PURE__ */ i("div", { ...p, className: A(r.root, p.className), children: [
+    /* @__PURE__ */ o(D, { htmlFor: e, UNSAFE_className: r.label, children: g }),
+    /* @__PURE__ */ o($, { ...B, ...b, id: e, ref: h, size: m }),
+    s ? /* @__PURE__ */ i(R, { direction: "horizontal", isWrapping: !1, alignmentX: "space-between", alignmentY: "top", children: [
+      S ? /* @__PURE__ */ i("div", { children: [
+        c,
+        d
+      ] }) : null,
+      _
+    ] }) : /* @__PURE__ */ i(v, { children: [
+      d,
+      c
+    ] })
   ] });
-}, p = m(
-  j
+}, T = x(
+  H
 );
-p.spiritComponent = "TextFieldBase";
-p.displayName = "TextFieldBase";
+T.spiritComponent = "TextFieldBase";
+T.displayName = "TextFieldBase";
 export {
-  p as default
+  T as default
 };
 //# sourceMappingURL=TextFieldBase.js.map

package/dist/components/TextFieldBase/TextFieldBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldBase.js","sources":["../../../src/components/TextFieldBase/TextFieldBase.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ForwardedRef, forwardRef } from 'react';\nimport { Sizes } from '../../constants';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport {\n  type ForwardRefComponent,\n  type SpiritTextFieldBaseProps,\n  type TextFieldBasePasswordToggleProps,\n} from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport TextFieldBaseInput from './TextFieldBaseInput';\nimport { useTextFieldBaseStyleProps } from './useTextFieldBaseStyleProps';\nimport withPasswordToggle from './withPasswordToggle';\n\nconst TextFieldBaseInputWithPasswordToggle = forwardRef(\n  withPasswordToggle<TextFieldBasePasswordToggleProps>(TextFieldBaseInput),\n);\n\nconst _TextFieldBase = (props: SpiritTextFieldBaseProps, ref: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>) => {\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    hasValidationIcon,\n    helperText,\n    id,\n    label,\n    size = Sizes.MEDIUM,\n    validationState,\n    validationText,\n    ...restProps\n  } = props;\n  const { classProps, props: modifiedProps } = useTextFieldBaseStyleProps({\n    id,\n    size,\n    validationState,\n    ...restProps,\n  });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const [ids, register] = useAriaIds(ariaDescribedBy);\n  const ariaDescribedByProp = useAriaDescribedBy(ids);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  return (\n    <div {...styleProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <TextFieldBaseInputWithPasswordToggle {...otherProps} {...ariaDescribedByProp} id={id} ref={ref} size={size} />\n      <HelperText\n        UNSAFE_className={classProps.helperText}\n        id={`${id}__helperText`}\n        registerAria={register}\n        helperText={helperText}\n      />\n      {validationState && (\n        <ValidationText\n          UNSAFE_className={classProps.validationText}\n          elementType=\"span\"\n          {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n          id={`${id}__validationText`}\n          validationText={validationText}\n          registerAria={register}\n          role={validationTextRole}\n        />\n      )}\n    </div>\n  );\n};\n\nconst TextFieldBase = forwardRef<HTMLInputElement | HTMLTextAreaElement, SpiritTextFieldBaseProps>(\n  _TextFieldBase,\n) as ForwardRefComponent<HTMLInputElement | HTMLTextAreaElement, SpiritTextFieldBaseProps>;\n\nTextFieldBase.spiritComponent = 'TextFieldBase';\nTextFieldBase.displayName = 'TextFieldBase';\n\nexport default TextFieldBase;\n"],"names":["TextFieldBaseInputWithPasswordToggle","forwardRef","withPasswordToggle","TextFieldBaseInput","_TextFieldBase","props","ref","ariaDescribedBy","hasValidationIcon","helperText","id","label","size","Sizes","validationState","validationText","restProps","classProps","modifiedProps","useTextFieldBaseStyleProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","Label","HelperText","ValidationText","TextFieldBase"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAMA,IAAuCC;AAAA,EAC3CC,EAAqDC,CAAkB;AACzE,GAEMC,IAAiB,CAACC,GAAiCC,MAA8D;AACrH,QAAM;AAAA,IACJ,oBAAoBC,IAAkB;AAAA,IACtC,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAOC,EAAM;AAAA,IACb,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDX,GACE,EAAE,YAAAY,GAAY,OAAOC,EAAA,IAAkBC,EAA2B;AAAA,IACtE,IAAAT;AAAA,IACA,MAAAE;AAAA,IACA,iBAAAE;AAAA,IACA,GAAGE;AAAA,EAAA,CACJ,GACK,EAAE,YAAAI,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,CAACK,GAAKC,CAAQ,IAAIC,EAAWlB,CAAe,GAC5CmB,IAAsBC,EAAmBJ,CAAG,GAC5CK,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAf;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAe,EAAC,OAAA,EAAK,GAAGV,GAAY,WAAWW,EAAWd,EAAW,MAAMG,EAAW,SAAS,GAC9E,UAAA;AAAA,IAAA,gBAAAY,EAACC,KAAM,SAASvB,GAAI,kBAAkBO,EAAW,OAC9C,UAAAN,GACH;AAAA,IACA,gBAAAqB,EAAChC,KAAsC,GAAGqB,GAAa,GAAGK,GAAqB,IAAAhB,GAAQ,KAAAJ,GAAU,MAAAM,GAAY;AAAA,IAC7G,gBAAAoB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,kBAAkBjB,EAAW;AAAA,QAC7B,IAAI,GAAGP,CAAE;AAAA,QACT,cAAcc;AAAA,QACd,YAAAf;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDK,KACC,gBAAAkB;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,kBAAkBlB,EAAW;AAAA,QAC7B,aAAY;AAAA,QACX,GAAIT,KAAqB,EAAE,wBAAwBM,EAAA;AAAA,QACpD,IAAI,GAAGJ,CAAE;AAAA,QACT,gBAAAK;AAAA,QACA,cAAcS;AAAA,QACd,MAAMI;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GAEJ;AAEJ,GAEMQ,IAAgBnC;AAAA,EACpBG;AACF;AAEAgC,EAAc,kBAAkB;AAChCA,EAAc,cAAc;"}
+{"version":3,"file":"TextFieldBase.js","sources":["../../../src/components/TextFieldBase/TextFieldBase.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ForwardedRef, forwardRef } from 'react';\nimport { Sizes } from '../../constants';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport {\n  type ForwardRefComponent,\n  type SpiritTextFieldBaseProps,\n  type TextFieldBasePasswordToggleProps,\n} from '../../types';\nimport { CharacterCounter } from '../CharacterCounter';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { Flex } from '../Flex';\nimport TextFieldBaseInput from './TextFieldBaseInput';\nimport { useTextFieldBaseStyleProps } from './useTextFieldBaseStyleProps';\nimport withPasswordToggle from './withPasswordToggle';\n\nconst TextFieldBaseInputWithPasswordToggle = forwardRef(\n  withPasswordToggle<TextFieldBasePasswordToggleProps>(TextFieldBaseInput),\n);\n\nconst _TextFieldBase = (props: SpiritTextFieldBaseProps, ref: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>) => {\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    counterProps,\n    hasValidationIcon,\n    helperText,\n    id,\n    label,\n    size = Sizes.MEDIUM,\n    validationState,\n    validationText,\n    ...restProps\n  } = props;\n  const { classProps, props: modifiedProps } = useTextFieldBaseStyleProps({\n    id,\n    size,\n    validationState,\n    ...restProps,\n  });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const hasTextContent = helperText || (validationState && validationText);\n\n  const helperTextElement = (\n    <HelperText\n      UNSAFE_className={classProps.helperText}\n      id={`${id}__helper-text`}\n      registerAria={register}\n      helperText={helperText}\n    />\n  );\n\n  const validationTextElement = validationState ? (\n    <ValidationText\n      UNSAFE_className={classProps.validationText}\n      elementType=\"span\"\n      {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n      id={`${id}__validation-text`}\n      validationText={validationText}\n      registerAria={register}\n      role={validationTextRole}\n    />\n  ) : null;\n\n  const counterElement = counterProps ? (\n    <CharacterCounter {...counterProps} id={id} registerAria={register} UNSAFE_className={classProps.counter} />\n  ) : null;\n\n  return (\n    <div {...styleProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <TextFieldBaseInputWithPasswordToggle {...otherProps} {...ariaDescribedByProp} id={id} ref={ref} size={size} />\n      {counterProps ? (\n        <Flex direction=\"horizontal\" isWrapping={false} alignmentX=\"space-between\" alignmentY=\"top\">\n          {hasTextContent ? (\n            <div>\n              {/* In counter layout, put validation first so the status message stays visually closest to the counter row. */}\n              {validationTextElement}\n              {helperTextElement}\n            </div>\n          ) : null}\n          {counterElement}\n        </Flex>\n      ) : (\n        <>\n          {/* Without counter, keep the default field text flow: helper first, then validation. */}\n          {helperTextElement}\n          {validationTextElement}\n        </>\n      )}\n    </div>\n  );\n};\n\nconst TextFieldBase = forwardRef<HTMLInputElement | HTMLTextAreaElement, SpiritTextFieldBaseProps>(\n  _TextFieldBase,\n) as ForwardRefComponent<HTMLInputElement | HTMLTextAreaElement, SpiritTextFieldBaseProps>;\n\nTextFieldBase.spiritComponent = 'TextFieldBase';\nTextFieldBase.displayName = 'TextFieldBase';\n\nexport default TextFieldBase;\n"],"names":["TextFieldBaseInputWithPasswordToggle","forwardRef","withPasswordToggle","TextFieldBaseInput","_TextFieldBase","props","ref","ariaDescribedBy","counterProps","hasValidationIcon","helperText","id","label","size","Sizes","validationState","validationText","restProps","classProps","modifiedProps","useTextFieldBaseStyleProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","validationTextRole","useValidationTextRole","hasTextContent","helperTextElement","jsx","HelperText","validationTextElement","ValidationText","counterElement","CharacterCounter","jsxs","classNames","Label","Flex","Fragment","TextFieldBase"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAMA,IAAuCC;AAAA,EAC3CC,EAAqDC,CAAkB;AACzE,GAEMC,IAAiB,CAACC,GAAiCC,MAA8D;AACrH,QAAM;AAAA,IACJ,oBAAoBC,IAAkB;AAAA,IACtC,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAOC,EAAM;AAAA,IACb,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDZ,GACE,EAAE,YAAAa,GAAY,OAAOC,EAAA,IAAkBC,EAA2B;AAAA,IACtE,IAAAT;AAAA,IACA,MAAAE;AAAA,IACA,iBAAAE;AAAA,IACA,GAAGE;AAAA,EAAA,CACJ,GACK,EAAE,YAAAI,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,CAACK,GAAqBC,CAAQ,IAAIC,EAAmBnB,CAAe,GACpEoB,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAb;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD,GAEKa,IAAiBnB,KAAeK,KAAmBC,GAEnDc,IACJ,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,kBAAkBd,EAAW;AAAA,MAC7B,IAAI,GAAGP,CAAE;AAAA,MACT,cAAcc;AAAA,MACd,YAAAf;AAAA,IAAA;AAAA,EAAA,GAIEuB,IAAwBlB,IAC5B,gBAAAgB;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,kBAAkBhB,EAAW;AAAA,MAC7B,aAAY;AAAA,MACX,GAAIT,KAAqB,EAAE,wBAAwBM,EAAA;AAAA,MACpD,IAAI,GAAGJ,CAAE;AAAA,MACT,gBAAAK;AAAA,MACA,cAAcS;AAAA,MACd,MAAME;AAAA,IAAA;AAAA,EAAA,IAEN,MAEEQ,IAAiB3B,IACrB,gBAAAuB,EAACK,GAAA,EAAkB,GAAG5B,GAAc,IAAAG,GAAQ,cAAcc,GAAU,kBAAkBP,EAAW,QAAA,CAAS,IACxG;AAEJ,SACE,gBAAAmB,EAAC,OAAA,EAAK,GAAGhB,GAAY,WAAWiB,EAAWpB,EAAW,MAAMG,EAAW,SAAS,GAC9E,UAAA;AAAA,IAAA,gBAAAU,EAACQ,KAAM,SAAS5B,GAAI,kBAAkBO,EAAW,OAC9C,UAAAN,GACH;AAAA,IACA,gBAAAmB,EAAC/B,KAAsC,GAAGsB,GAAa,GAAGE,GAAqB,IAAAb,GAAQ,KAAAL,GAAU,MAAAO,GAAY;AAAA,IAC5GL,IACC,gBAAA6B,EAACG,GAAA,EAAK,WAAU,cAAa,YAAY,IAAO,YAAW,iBAAgB,YAAW,OACnF,UAAA;AAAA,MAAAX,sBACE,OAAA,EAEE,UAAA;AAAA,QAAAI;AAAA,QACAH;AAAA,MAAA,EAAA,CACH,IACE;AAAA,MACHK;AAAA,IAAA,EAAA,CACH,IAEA,gBAAAE,EAAAI,GAAA,EAEG,UAAA;AAAA,MAAAX;AAAA,MACAG;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ,GAEMS,IAAgBzC;AAAA,EACpBG;AACF;AAEAsC,EAAc,kBAAkB;AAChCA,EAAc,cAAc;"}

package/dist/components/TextFieldBase/useTextFieldBaseStyleProps.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("classnames"),f=require("../../hooks/useClassNamePrefix.cjs");function q(i){const{isFluid:d,isMultiline:s,isLabelHidden:n,size:l,validationState:t,...a}=i,{isDisabled:r,isRequired:T}=a,e=f.useClassNamePrefix(s?"TextArea":"TextField"),c=`${e}--disabled`,x=`${e}--fluid`,u=`${e}--${l}`,_=`${e}--${t}`,g=`${e}__input`,p=`${e}__label`,F=`${e}__label--required`,B=`${e}__label--hidden`,C=`${e}__validationText`,b=`${e}__passwordToggle`,$=`${e}__passwordToggle__button`,P=`${e}__passwordToggle__icon`,w=`${e}__helperText`,S=o(e,{[c]:r,[x]:d,[_]:t,[u]:l}),y=o(p,{[F]:T,[B]:n});return{classProps:{root:S,label:y,input:g,helperText:w,validationText:C,passwordToggle:b,passwordToggleButton:$,passwordToggleIcon:P},props:{...a,isMultiline:s}}}exports.useTextFieldBaseStyleProps=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("classnames"),q=require("../../hooks/useClassNamePrefix.cjs");function m(i){const{isFluid:d,isMultiline:s,isLabelHidden:n,size:t,validationState:l,...a}=i,{isDisabled:r,isRequired:T}=a,e=q.useClassNamePrefix(s?"TextArea":"TextField"),c=`${e}--disabled`,u=`${e}--fluid`,x=`${e}--${t}`,_=`${e}--${l}`,g=`${e}__input`,p=`${e}__label`,F=`${e}__label--required`,B=`${e}__label--hidden`,C=`${e}__validationText`,$=`${e}__passwordToggle`,b=`${e}__passwordToggle__button`,P=`${e}__passwordToggle__icon`,w=`${e}__helperText`,S=o(e,{[c]:r,[u]:d,[_]:l,[x]:t}),y=o(p,{[F]:T,[B]:n}),f=`${e}__counter`;return{classProps:{root:S,label:y,input:g,helperText:w,validationText:C,passwordToggle:$,passwordToggleButton:b,passwordToggleIcon:P,counter:f},props:{...a,isMultiline:s}}}exports.useTextFieldBaseStyleProps=m;
 //# sourceMappingURL=useTextFieldBaseStyleProps.cjs.map

package/dist/components/TextFieldBase/useTextFieldBaseStyleProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTextFieldBaseStyleProps.cjs","sources":["../../../src/components/TextFieldBase/useTextFieldBaseStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTextFieldBaseProps, type TextFieldBaseProps } from '../../types';\n\nexport interface TextFieldBaseStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n    passwordToggle: string;\n    passwordToggleButton: string;\n    passwordToggleIcon: string;\n  };\n  /** props to be passed to the input element */\n  props: Omit<TextFieldBaseProps, 'label'>;\n}\n\nexport function useTextFieldBaseStyleProps(props: Omit<SpiritTextFieldBaseProps, 'label'>): TextFieldBaseStyles {\n  const { isFluid, isMultiline, isLabelHidden, size, validationState, ...restProps } = props;\n  const { isDisabled, isRequired } = restProps;\n\n  const TextFieldBaseClass = useClassNamePrefix(isMultiline ? 'TextArea' : 'TextField');\n  const TextFieldBaseDisabledClass = `${TextFieldBaseClass}--disabled`;\n  const TextFieldBaseFluidClass = `${TextFieldBaseClass}--fluid`;\n  const TextFieldBaseSizeClass = `${TextFieldBaseClass}--${size}`;\n  const TextFieldBaseValidationClass = `${TextFieldBaseClass}--${validationState}`;\n  const TextFieldBaseInputClass = `${TextFieldBaseClass}__input`;\n  const TextFieldBaseLabelClass = `${TextFieldBaseClass}__label`;\n  const TextFieldBaseLabelRequiredClass = `${TextFieldBaseClass}__label--required`;\n  const TextFieldBaseLabelHiddenClass = `${TextFieldBaseClass}__label--hidden`;\n  const TextFieldBaseValidationTextClass = `${TextFieldBaseClass}__validationText`;\n  const TextFieldBasePasswordToggleClass = `${TextFieldBaseClass}__passwordToggle`;\n  const TextFieldBasePasswordToggleButtonClass = `${TextFieldBaseClass}__passwordToggle__button`;\n  const TextFieldBasePasswordToggleIconClass = `${TextFieldBaseClass}__passwordToggle__icon`;\n  const TextFieldBaseHelperTextClass = `${TextFieldBaseClass}__helperText`;\n\n  const rootStyles = classNames(TextFieldBaseClass, {\n    [TextFieldBaseDisabledClass]: isDisabled,\n    [TextFieldBaseFluidClass]: isFluid,\n    [TextFieldBaseValidationClass]: validationState,\n    [TextFieldBaseSizeClass]: size,\n  });\n  const labelStyles = classNames(TextFieldBaseLabelClass, {\n    [TextFieldBaseLabelRequiredClass]: isRequired,\n    [TextFieldBaseLabelHiddenClass]: isLabelHidden,\n  });\n\n  return {\n    classProps: {\n      root: rootStyles,\n      label: labelStyles,\n      input: TextFieldBaseInputClass,\n      helperText: TextFieldBaseHelperTextClass,\n      validationText: TextFieldBaseValidationTextClass,\n      passwordToggle: TextFieldBasePasswordToggleClass,\n      passwordToggleButton: TextFieldBasePasswordToggleButtonClass,\n      passwordToggleIcon: TextFieldBasePasswordToggleIconClass,\n    },\n    props: {\n      ...restProps,\n      isMultiline,\n    },\n  };\n}\n"],"names":["useTextFieldBaseStyleProps","props","isFluid","isMultiline","isLabelHidden","size","validationState","restProps","isDisabled","isRequired","TextFieldBaseClass","useClassNamePrefix","TextFieldBaseDisabledClass","TextFieldBaseFluidClass","TextFieldBaseSizeClass","TextFieldBaseValidationClass","TextFieldBaseInputClass","TextFieldBaseLabelClass","TextFieldBaseLabelRequiredClass","TextFieldBaseLabelHiddenClass","TextFieldBaseValidationTextClass","TextFieldBasePasswordToggleClass","TextFieldBasePasswordToggleButtonClass","TextFieldBasePasswordToggleIconClass","TextFieldBaseHelperTextClass","rootStyles","classNames","labelStyles"],"mappings":"8JAoBO,SAASA,EAA2BC,EAAqE,CAC9G,KAAM,CAAE,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,KAAAC,EAAM,gBAAAC,EAAiB,GAAGC,GAAcN,EAC/E,CAAE,WAAAO,EAAY,WAAAC,CAAA,EAAeF,EAE7BG,EAAqBC,EAAAA,mBAAmBR,EAAc,WAAa,WAAW,EAC9ES,EAA6B,GAAGF,CAAkB,aAClDG,EAA0B,GAAGH,CAAkB,UAC/CI,EAAyB,GAAGJ,CAAkB,KAAKL,CAAI,GACvDU,EAA+B,GAAGL,CAAkB,KAAKJ,CAAe,GACxEU,EAA0B,GAAGN,CAAkB,UAC/CO,EAA0B,GAAGP,CAAkB,UAC/CQ,EAAkC,GAAGR,CAAkB,oBACvDS,EAAgC,GAAGT,CAAkB,kBACrDU,EAAmC,GAAGV,CAAkB,mBACxDW,EAAmC,GAAGX,CAAkB,mBACxDY,EAAyC,GAAGZ,CAAkB,2BAC9Da,EAAuC,GAAGb,CAAkB,yBAC5Dc,EAA+B,GAAGd,CAAkB,eAEpDe,EAAaC,EAAWhB,EAAoB,CAChD,CAACE,CAA0B,EAAGJ,EAC9B,CAACK,CAAuB,EAAGX,EAC3B,CAACa,CAA4B,EAAGT,EAChC,CAACQ,CAAsB,EAAGT,CAAA,CAC3B,EACKsB,EAAcD,EAAWT,EAAyB,CACtD,CAACC,CAA+B,EAAGT,EACnC,CAACU,CAA6B,EAAGf,CAAA,CAClC,EAED,MAAO,CACL,WAAY,CACV,KAAMqB,EACN,MAAOE,EACP,MAAOX,EACP,WAAYQ,EACZ,eAAgBJ,EAChB,eAAgBC,EAChB,qBAAsBC,EACtB,mBAAoBC,CAAA,EAEtB,MAAO,CACL,GAAGhB,EACH,YAAAJ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"useTextFieldBaseStyleProps.cjs","sources":["../../../src/components/TextFieldBase/useTextFieldBaseStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTextFieldBaseProps, type TextFieldBaseProps } from '../../types';\n\nexport interface TextFieldBaseStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n    passwordToggle: string;\n    passwordToggleButton: string;\n    passwordToggleIcon: string;\n    counter: string;\n  };\n  /** props to be passed to the input element */\n  props: Omit<TextFieldBaseProps, 'label'>;\n}\n\nexport function useTextFieldBaseStyleProps(props: Omit<SpiritTextFieldBaseProps, 'label'>): TextFieldBaseStyles {\n  const { isFluid, isMultiline, isLabelHidden, size, validationState, ...restProps } = props;\n  const { isDisabled, isRequired } = restProps;\n\n  const TextFieldBaseClass = useClassNamePrefix(isMultiline ? 'TextArea' : 'TextField');\n  const TextFieldBaseDisabledClass = `${TextFieldBaseClass}--disabled`;\n  const TextFieldBaseFluidClass = `${TextFieldBaseClass}--fluid`;\n  const TextFieldBaseSizeClass = `${TextFieldBaseClass}--${size}`;\n  const TextFieldBaseValidationClass = `${TextFieldBaseClass}--${validationState}`;\n  const TextFieldBaseInputClass = `${TextFieldBaseClass}__input`;\n  const TextFieldBaseLabelClass = `${TextFieldBaseClass}__label`;\n  const TextFieldBaseLabelRequiredClass = `${TextFieldBaseClass}__label--required`;\n  const TextFieldBaseLabelHiddenClass = `${TextFieldBaseClass}__label--hidden`;\n  const TextFieldBaseValidationTextClass = `${TextFieldBaseClass}__validationText`;\n  const TextFieldBasePasswordToggleClass = `${TextFieldBaseClass}__passwordToggle`;\n  const TextFieldBasePasswordToggleButtonClass = `${TextFieldBaseClass}__passwordToggle__button`;\n  const TextFieldBasePasswordToggleIconClass = `${TextFieldBaseClass}__passwordToggle__icon`;\n  const TextFieldBaseHelperTextClass = `${TextFieldBaseClass}__helperText`;\n\n  const rootStyles = classNames(TextFieldBaseClass, {\n    [TextFieldBaseDisabledClass]: isDisabled,\n    [TextFieldBaseFluidClass]: isFluid,\n    [TextFieldBaseValidationClass]: validationState,\n    [TextFieldBaseSizeClass]: size,\n  });\n  const labelStyles = classNames(TextFieldBaseLabelClass, {\n    [TextFieldBaseLabelRequiredClass]: isRequired,\n    [TextFieldBaseLabelHiddenClass]: isLabelHidden,\n  });\n  const counterStyles = `${TextFieldBaseClass}__counter`;\n\n  return {\n    classProps: {\n      root: rootStyles,\n      label: labelStyles,\n      input: TextFieldBaseInputClass,\n      helperText: TextFieldBaseHelperTextClass,\n      validationText: TextFieldBaseValidationTextClass,\n      passwordToggle: TextFieldBasePasswordToggleClass,\n      passwordToggleButton: TextFieldBasePasswordToggleButtonClass,\n      passwordToggleIcon: TextFieldBasePasswordToggleIconClass,\n      counter: counterStyles,\n    },\n    props: {\n      ...restProps,\n      isMultiline,\n    },\n  };\n}\n"],"names":["useTextFieldBaseStyleProps","props","isFluid","isMultiline","isLabelHidden","size","validationState","restProps","isDisabled","isRequired","TextFieldBaseClass","useClassNamePrefix","TextFieldBaseDisabledClass","TextFieldBaseFluidClass","TextFieldBaseSizeClass","TextFieldBaseValidationClass","TextFieldBaseInputClass","TextFieldBaseLabelClass","TextFieldBaseLabelRequiredClass","TextFieldBaseLabelHiddenClass","TextFieldBaseValidationTextClass","TextFieldBasePasswordToggleClass","TextFieldBasePasswordToggleButtonClass","TextFieldBasePasswordToggleIconClass","TextFieldBaseHelperTextClass","rootStyles","classNames","labelStyles","counterStyles"],"mappings":"8JAqBO,SAASA,EAA2BC,EAAqE,CAC9G,KAAM,CAAE,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,KAAAC,EAAM,gBAAAC,EAAiB,GAAGC,GAAcN,EAC/E,CAAE,WAAAO,EAAY,WAAAC,CAAA,EAAeF,EAE7BG,EAAqBC,EAAAA,mBAAmBR,EAAc,WAAa,WAAW,EAC9ES,EAA6B,GAAGF,CAAkB,aAClDG,EAA0B,GAAGH,CAAkB,UAC/CI,EAAyB,GAAGJ,CAAkB,KAAKL,CAAI,GACvDU,EAA+B,GAAGL,CAAkB,KAAKJ,CAAe,GACxEU,EAA0B,GAAGN,CAAkB,UAC/CO,EAA0B,GAAGP,CAAkB,UAC/CQ,EAAkC,GAAGR,CAAkB,oBACvDS,EAAgC,GAAGT,CAAkB,kBACrDU,EAAmC,GAAGV,CAAkB,mBACxDW,EAAmC,GAAGX,CAAkB,mBACxDY,EAAyC,GAAGZ,CAAkB,2BAC9Da,EAAuC,GAAGb,CAAkB,yBAC5Dc,EAA+B,GAAGd,CAAkB,eAEpDe,EAAaC,EAAWhB,EAAoB,CAChD,CAACE,CAA0B,EAAGJ,EAC9B,CAACK,CAAuB,EAAGX,EAC3B,CAACa,CAA4B,EAAGT,EAChC,CAACQ,CAAsB,EAAGT,CAAA,CAC3B,EACKsB,EAAcD,EAAWT,EAAyB,CACtD,CAACC,CAA+B,EAAGT,EACnC,CAACU,CAA6B,EAAGf,CAAA,CAClC,EACKwB,EAAgB,GAAGlB,CAAkB,YAE3C,MAAO,CACL,WAAY,CACV,KAAMe,EACN,MAAOE,EACP,MAAOX,EACP,WAAYQ,EACZ,eAAgBJ,EAChB,eAAgBC,EAChB,qBAAsBC,EACtB,mBAAoBC,EACpB,QAASK,CAAA,EAEX,MAAO,CACL,GAAGrB,EACH,YAAAJ,CAAA,CACF,CAEJ"}

package/dist/components/TextFieldBase/useTextFieldBaseStyleProps.d.ts

@@ -9,6 +9,7 @@ export interface TextFieldBaseStyles {
         passwordToggle: string;
         passwordToggleButton: string;
         passwordToggleIcon: string;
+        counter: string;
     };
     props: Omit<TextFieldBaseProps, 'label'>;
 }

package/dist/components/TextFieldBase/useTextFieldBaseStyleProps.js

@@ -1,25 +1,26 @@
 import o from "classnames";
-import { useClassNamePrefix as S } from "../../hooks/useClassNamePrefix.js";
+import { useClassNamePrefix as y } from "../../hooks/useClassNamePrefix.js";
 function q(i) {
-  const { isFluid: d, isMultiline: s, isLabelHidden: n, size: l, validationState: t, ...a } = i, { isDisabled: r, isRequired: T } = a, e = S(s ? "TextArea" : "TextField"), c = `${e}--disabled`, x = `${e}--fluid`, _ = `${e}--${l}`, p = `${e}--${t}`, g = `${e}__input`, u = `${e}__label`, F = `${e}__label--required`, B = `${e}__label--hidden`, C = `${e}__validationText`, $ = `${e}__passwordToggle`, b = `${e}__passwordToggle__button`, w = `${e}__passwordToggle__icon`, P = `${e}__helperText`, m = o(e, {
+  const { isFluid: d, isMultiline: s, isLabelHidden: n, size: l, validationState: t, ...a } = i, { isDisabled: r, isRequired: T } = a, e = y(s ? "TextArea" : "TextField"), c = `${e}--disabled`, x = `${e}--fluid`, _ = `${e}--${l}`, u = `${e}--${t}`, p = `${e}__input`, g = `${e}__label`, F = `${e}__label--required`, B = `${e}__label--hidden`, $ = `${e}__validationText`, C = `${e}__passwordToggle`, b = `${e}__passwordToggle__button`, w = `${e}__passwordToggle__icon`, P = `${e}__helperText`, m = o(e, {
     [c]: r,
     [x]: d,
-    [p]: t,
+    [u]: t,
     [_]: l
-  }), f = o(u, {
+  }), S = o(g, {
     [F]: T,
     [B]: n
-  });
+  }), f = `${e}__counter`;
   return {
     classProps: {
       root: m,
-      label: f,
-      input: g,
+      label: S,
+      input: p,
       helperText: P,
-      validationText: C,
-      passwordToggle: $,
+      validationText: $,
+      passwordToggle: C,
       passwordToggleButton: b,
-      passwordToggleIcon: w
+      passwordToggleIcon: w,
+      counter: f
     },
     props: {
       ...a,

package/dist/components/TextFieldBase/useTextFieldBaseStyleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTextFieldBaseStyleProps.js","sources":["../../../src/components/TextFieldBase/useTextFieldBaseStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTextFieldBaseProps, type TextFieldBaseProps } from '../../types';\n\nexport interface TextFieldBaseStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n    passwordToggle: string;\n    passwordToggleButton: string;\n    passwordToggleIcon: string;\n  };\n  /** props to be passed to the input element */\n  props: Omit<TextFieldBaseProps, 'label'>;\n}\n\nexport function useTextFieldBaseStyleProps(props: Omit<SpiritTextFieldBaseProps, 'label'>): TextFieldBaseStyles {\n  const { isFluid, isMultiline, isLabelHidden, size, validationState, ...restProps } = props;\n  const { isDisabled, isRequired } = restProps;\n\n  const TextFieldBaseClass = useClassNamePrefix(isMultiline ? 'TextArea' : 'TextField');\n  const TextFieldBaseDisabledClass = `${TextFieldBaseClass}--disabled`;\n  const TextFieldBaseFluidClass = `${TextFieldBaseClass}--fluid`;\n  const TextFieldBaseSizeClass = `${TextFieldBaseClass}--${size}`;\n  const TextFieldBaseValidationClass = `${TextFieldBaseClass}--${validationState}`;\n  const TextFieldBaseInputClass = `${TextFieldBaseClass}__input`;\n  const TextFieldBaseLabelClass = `${TextFieldBaseClass}__label`;\n  const TextFieldBaseLabelRequiredClass = `${TextFieldBaseClass}__label--required`;\n  const TextFieldBaseLabelHiddenClass = `${TextFieldBaseClass}__label--hidden`;\n  const TextFieldBaseValidationTextClass = `${TextFieldBaseClass}__validationText`;\n  const TextFieldBasePasswordToggleClass = `${TextFieldBaseClass}__passwordToggle`;\n  const TextFieldBasePasswordToggleButtonClass = `${TextFieldBaseClass}__passwordToggle__button`;\n  const TextFieldBasePasswordToggleIconClass = `${TextFieldBaseClass}__passwordToggle__icon`;\n  const TextFieldBaseHelperTextClass = `${TextFieldBaseClass}__helperText`;\n\n  const rootStyles = classNames(TextFieldBaseClass, {\n    [TextFieldBaseDisabledClass]: isDisabled,\n    [TextFieldBaseFluidClass]: isFluid,\n    [TextFieldBaseValidationClass]: validationState,\n    [TextFieldBaseSizeClass]: size,\n  });\n  const labelStyles = classNames(TextFieldBaseLabelClass, {\n    [TextFieldBaseLabelRequiredClass]: isRequired,\n    [TextFieldBaseLabelHiddenClass]: isLabelHidden,\n  });\n\n  return {\n    classProps: {\n      root: rootStyles,\n      label: labelStyles,\n      input: TextFieldBaseInputClass,\n      helperText: TextFieldBaseHelperTextClass,\n      validationText: TextFieldBaseValidationTextClass,\n      passwordToggle: TextFieldBasePasswordToggleClass,\n      passwordToggleButton: TextFieldBasePasswordToggleButtonClass,\n      passwordToggleIcon: TextFieldBasePasswordToggleIconClass,\n    },\n    props: {\n      ...restProps,\n      isMultiline,\n    },\n  };\n}\n"],"names":["useTextFieldBaseStyleProps","props","isFluid","isMultiline","isLabelHidden","size","validationState","restProps","isDisabled","isRequired","TextFieldBaseClass","useClassNamePrefix","TextFieldBaseDisabledClass","TextFieldBaseFluidClass","TextFieldBaseSizeClass","TextFieldBaseValidationClass","TextFieldBaseInputClass","TextFieldBaseLabelClass","TextFieldBaseLabelRequiredClass","TextFieldBaseLabelHiddenClass","TextFieldBaseValidationTextClass","TextFieldBasePasswordToggleClass","TextFieldBasePasswordToggleButtonClass","TextFieldBasePasswordToggleIconClass","TextFieldBaseHelperTextClass","rootStyles","classNames","labelStyles"],"mappings":";;AAoBO,SAASA,EAA2BC,GAAqE;AAC9G,QAAM,EAAE,SAAAC,GAAS,aAAAC,GAAa,eAAAC,GAAe,MAAAC,GAAM,iBAAAC,GAAiB,GAAGC,MAAcN,GAC/E,EAAE,YAAAO,GAAY,YAAAC,EAAA,IAAeF,GAE7BG,IAAqBC,EAAmBR,IAAc,aAAa,WAAW,GAC9ES,IAA6B,GAAGF,CAAkB,cAClDG,IAA0B,GAAGH,CAAkB,WAC/CI,IAAyB,GAAGJ,CAAkB,KAAKL,CAAI,IACvDU,IAA+B,GAAGL,CAAkB,KAAKJ,CAAe,IACxEU,IAA0B,GAAGN,CAAkB,WAC/CO,IAA0B,GAAGP,CAAkB,WAC/CQ,IAAkC,GAAGR,CAAkB,qBACvDS,IAAgC,GAAGT,CAAkB,mBACrDU,IAAmC,GAAGV,CAAkB,oBACxDW,IAAmC,GAAGX,CAAkB,oBACxDY,IAAyC,GAAGZ,CAAkB,4BAC9Da,IAAuC,GAAGb,CAAkB,0BAC5Dc,IAA+B,GAAGd,CAAkB,gBAEpDe,IAAaC,EAAWhB,GAAoB;AAAA,IAChD,CAACE,CAA0B,GAAGJ;AAAA,IAC9B,CAACK,CAAuB,GAAGX;AAAA,IAC3B,CAACa,CAA4B,GAAGT;AAAA,IAChC,CAACQ,CAAsB,GAAGT;AAAA,EAAA,CAC3B,GACKsB,IAAcD,EAAWT,GAAyB;AAAA,IACtD,CAACC,CAA+B,GAAGT;AAAA,IACnC,CAACU,CAA6B,GAAGf;AAAA,EAAA,CAClC;AAED,SAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAMqB;AAAA,MACN,OAAOE;AAAA,MACP,OAAOX;AAAA,MACP,YAAYQ;AAAA,MACZ,gBAAgBJ;AAAA,MAChB,gBAAgBC;AAAA,MAChB,sBAAsBC;AAAA,MACtB,oBAAoBC;AAAA,IAAA;AAAA,IAEtB,OAAO;AAAA,MACL,GAAGhB;AAAA,MACH,aAAAJ;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"useTextFieldBaseStyleProps.js","sources":["../../../src/components/TextFieldBase/useTextFieldBaseStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTextFieldBaseProps, type TextFieldBaseProps } from '../../types';\n\nexport interface TextFieldBaseStyles {\n  /** className props */\n  classProps: {\n    root: string;\n    label: string;\n    input: string;\n    helperText: string;\n    validationText: string;\n    passwordToggle: string;\n    passwordToggleButton: string;\n    passwordToggleIcon: string;\n    counter: string;\n  };\n  /** props to be passed to the input element */\n  props: Omit<TextFieldBaseProps, 'label'>;\n}\n\nexport function useTextFieldBaseStyleProps(props: Omit<SpiritTextFieldBaseProps, 'label'>): TextFieldBaseStyles {\n  const { isFluid, isMultiline, isLabelHidden, size, validationState, ...restProps } = props;\n  const { isDisabled, isRequired } = restProps;\n\n  const TextFieldBaseClass = useClassNamePrefix(isMultiline ? 'TextArea' : 'TextField');\n  const TextFieldBaseDisabledClass = `${TextFieldBaseClass}--disabled`;\n  const TextFieldBaseFluidClass = `${TextFieldBaseClass}--fluid`;\n  const TextFieldBaseSizeClass = `${TextFieldBaseClass}--${size}`;\n  const TextFieldBaseValidationClass = `${TextFieldBaseClass}--${validationState}`;\n  const TextFieldBaseInputClass = `${TextFieldBaseClass}__input`;\n  const TextFieldBaseLabelClass = `${TextFieldBaseClass}__label`;\n  const TextFieldBaseLabelRequiredClass = `${TextFieldBaseClass}__label--required`;\n  const TextFieldBaseLabelHiddenClass = `${TextFieldBaseClass}__label--hidden`;\n  const TextFieldBaseValidationTextClass = `${TextFieldBaseClass}__validationText`;\n  const TextFieldBasePasswordToggleClass = `${TextFieldBaseClass}__passwordToggle`;\n  const TextFieldBasePasswordToggleButtonClass = `${TextFieldBaseClass}__passwordToggle__button`;\n  const TextFieldBasePasswordToggleIconClass = `${TextFieldBaseClass}__passwordToggle__icon`;\n  const TextFieldBaseHelperTextClass = `${TextFieldBaseClass}__helperText`;\n\n  const rootStyles = classNames(TextFieldBaseClass, {\n    [TextFieldBaseDisabledClass]: isDisabled,\n    [TextFieldBaseFluidClass]: isFluid,\n    [TextFieldBaseValidationClass]: validationState,\n    [TextFieldBaseSizeClass]: size,\n  });\n  const labelStyles = classNames(TextFieldBaseLabelClass, {\n    [TextFieldBaseLabelRequiredClass]: isRequired,\n    [TextFieldBaseLabelHiddenClass]: isLabelHidden,\n  });\n  const counterStyles = `${TextFieldBaseClass}__counter`;\n\n  return {\n    classProps: {\n      root: rootStyles,\n      label: labelStyles,\n      input: TextFieldBaseInputClass,\n      helperText: TextFieldBaseHelperTextClass,\n      validationText: TextFieldBaseValidationTextClass,\n      passwordToggle: TextFieldBasePasswordToggleClass,\n      passwordToggleButton: TextFieldBasePasswordToggleButtonClass,\n      passwordToggleIcon: TextFieldBasePasswordToggleIconClass,\n      counter: counterStyles,\n    },\n    props: {\n      ...restProps,\n      isMultiline,\n    },\n  };\n}\n"],"names":["useTextFieldBaseStyleProps","props","isFluid","isMultiline","isLabelHidden","size","validationState","restProps","isDisabled","isRequired","TextFieldBaseClass","useClassNamePrefix","TextFieldBaseDisabledClass","TextFieldBaseFluidClass","TextFieldBaseSizeClass","TextFieldBaseValidationClass","TextFieldBaseInputClass","TextFieldBaseLabelClass","TextFieldBaseLabelRequiredClass","TextFieldBaseLabelHiddenClass","TextFieldBaseValidationTextClass","TextFieldBasePasswordToggleClass","TextFieldBasePasswordToggleButtonClass","TextFieldBasePasswordToggleIconClass","TextFieldBaseHelperTextClass","rootStyles","classNames","labelStyles","counterStyles"],"mappings":";;AAqBO,SAASA,EAA2BC,GAAqE;AAC9G,QAAM,EAAE,SAAAC,GAAS,aAAAC,GAAa,eAAAC,GAAe,MAAAC,GAAM,iBAAAC,GAAiB,GAAGC,MAAcN,GAC/E,EAAE,YAAAO,GAAY,YAAAC,EAAA,IAAeF,GAE7BG,IAAqBC,EAAmBR,IAAc,aAAa,WAAW,GAC9ES,IAA6B,GAAGF,CAAkB,cAClDG,IAA0B,GAAGH,CAAkB,WAC/CI,IAAyB,GAAGJ,CAAkB,KAAKL,CAAI,IACvDU,IAA+B,GAAGL,CAAkB,KAAKJ,CAAe,IACxEU,IAA0B,GAAGN,CAAkB,WAC/CO,IAA0B,GAAGP,CAAkB,WAC/CQ,IAAkC,GAAGR,CAAkB,qBACvDS,IAAgC,GAAGT,CAAkB,mBACrDU,IAAmC,GAAGV,CAAkB,oBACxDW,IAAmC,GAAGX,CAAkB,oBACxDY,IAAyC,GAAGZ,CAAkB,4BAC9Da,IAAuC,GAAGb,CAAkB,0BAC5Dc,IAA+B,GAAGd,CAAkB,gBAEpDe,IAAaC,EAAWhB,GAAoB;AAAA,IAChD,CAACE,CAA0B,GAAGJ;AAAA,IAC9B,CAACK,CAAuB,GAAGX;AAAA,IAC3B,CAACa,CAA4B,GAAGT;AAAA,IAChC,CAACQ,CAAsB,GAAGT;AAAA,EAAA,CAC3B,GACKsB,IAAcD,EAAWT,GAAyB;AAAA,IACtD,CAACC,CAA+B,GAAGT;AAAA,IACnC,CAACU,CAA6B,GAAGf;AAAA,EAAA,CAClC,GACKwB,IAAgB,GAAGlB,CAAkB;AAE3C,SAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAMe;AAAA,MACN,OAAOE;AAAA,MACP,OAAOX;AAAA,MACP,YAAYQ;AAAA,MACZ,gBAAgBJ;AAAA,MAChB,gBAAgBC;AAAA,MAChB,sBAAsBC;AAAA,MACtB,oBAAoBC;AAAA,MACpB,SAASK;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,GAAGrB;AAAA,MACH,aAAAJ;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Toggle/Toggle.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),R=require("classnames"),n=require("react"),C=require("../../hooks/styleProps.cjs"),k=require("../../hooks/useAriaDescribedBy.cjs"),D=require("../Field/HelperText.cjs"),V=require("../Field/Label.cjs"),B=require("../Field/useAriaIds.cjs"),F=require("../Field/ValidationText.cjs"),E=require("../Field/useValidationTextRole.cjs"),I=require("./useToggleStyleProps.cjs"),U=(d,u)=>{const{classProps:e,props:p}=I.useToggleStyleProps(d),{"aria-describedby":g="",hasValidationIcon:x,id:t,isDisabled:h,isChecked:T=!1,isRequired:y,label:b,helperText:m,onChange:q=()=>{},validationState:r,validationText:a,...N}=p,{styleProps:o,props:P}=C.useStyleProps(N),[S,l]=B.default(g),f=k.useAriaDescribedBy(S),[_,j]=n.useState(T),v=E.useValidationTextRole({validationState:r,validationText:a}),A=c=>{j(c.target.checked),q(c)};return s.jsxs("div",{style:o.style,className:R(e.root,o.className),children:[s.jsxs("div",{className:e.text,children:[s.jsx(V.default,{UNSAFE_className:e.label,htmlFor:t,children:b}),s.jsx(D.default,{UNSAFE_className:e.helperText,id:`${t}__helperText`,registerAria:l,helperText:m}),r&&s.jsx(F.default,{UNSAFE_className:e.validationText,...x&&{hasValidationStateIcon:r},id:`${t}__validationText`,validationText:a,registerAria:l,role:v})]}),s.jsx("input",{...P,...f,type:"checkbox",id:t,className:e.input,disabled:h,checked:_,required:y,onChange:A,ref:u})]})},i=n.forwardRef(U);i.spiritComponent="Toggle";i.displayName="Toggle";exports.default=i;
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),V=require("classnames"),u=require("react"),F=require("../../hooks/styleProps.cjs"),d=require("../../hooks/useAriaIdRefs.cjs"),I=require("../Field/HelperText.cjs"),$=require("../Field/Label.cjs"),B=require("../Field/ValidationText.cjs"),E=require("../Field/useValidationTextRole.cjs"),U=require("../InputDetails/InputDetails.cjs"),M=require("./useToggleStyleProps.cjs"),O=(p,g)=>{const{classProps:s,props:x}=M.useToggleStyleProps(p),{"aria-describedby":h="","aria-details":T,details:r,hasValidationIcon:y,id:t,isDisabled:m,isChecked:b=!1,isRequired:q,label:P,helperText:N,onChange:f=()=>{},validationState:a,validationText:l,...S}=x,{styleProps:o,props:A}=F.useStyleProps(S),[D,c]=d.useAriaDescribedBy(h),[_,j]=d.useAriaDetails(T),[v,R]=u.useState(b),C=E.useValidationTextRole({validationState:a,validationText:l}),k=n=>{R(n.target.checked),f(n)};return e.jsxs("div",{style:o.style,className:V(s.root,o.className),children:[e.jsxs("div",{className:s.text,children:[e.jsx($.default,{UNSAFE_className:s.label,htmlFor:t,children:P}),r&&e.jsx(U.default,{id:`${t}-details`,registerAriaDetails:j,children:r}),e.jsx(I.default,{UNSAFE_className:s.helperText,id:`${t}__helperText`,registerAria:c,helperText:N}),a&&e.jsx(B.default,{UNSAFE_className:s.validationText,...y&&{hasValidationStateIcon:a},id:`${t}__validationText`,validationText:l,registerAria:c,role:C})]}),e.jsx("input",{...A,...D,..._,type:"checkbox",id:t,className:s.input,disabled:m,checked:v,required:q,onChange:k,ref:g})]})},i=u.forwardRef(O);i.spiritComponent="Toggle";i.displayName="Toggle";exports.default=i;
 //# sourceMappingURL=Toggle.cjs.map

package/dist/components/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ChangeEvent, type ForwardedRef, forwardRef, useState } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritToggleProps } from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { useToggleStyleProps } from './useToggleStyleProps';\n\nconst _Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const { classProps, props: modifiedProps } = useToggleStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isChecked = false,\n    isRequired,\n    label,\n    helperText,\n    onChange = () => {},\n    validationState,\n    validationText,\n    ...restProps\n  } = modifiedProps;\n  const { styleProps, props: otherProps } = useStyleProps(restProps);\n  const [ids, register] = useAriaIds(ariaDescribedBy);\n  const ariaDescribedByProp = useAriaDescribedBy(ids);\n  const [checked, setChecked] = useState(isChecked);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n    onChange(event);\n  };\n\n  return (\n    <div style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <div className={classProps.text}>\n        <Label UNSAFE_className={classProps.label} htmlFor={id}>\n          {label}\n        </Label>\n        <HelperText\n          UNSAFE_className={classProps.helperText}\n          id={`${id}__helperText`}\n          registerAria={register}\n          helperText={helperText}\n        />\n        {validationState && (\n          <ValidationText\n            UNSAFE_className={classProps.validationText}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            id={`${id}__validationText`}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        checked={checked}\n        required={isRequired}\n        onChange={handleOnChange}\n        ref={ref}\n      />\n    </div>\n  );\n};\n\nconst Toggle = forwardRef<HTMLInputElement, SpiritToggleProps>(_Toggle) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritToggleProps\n>;\n\nToggle.spiritComponent = 'Toggle';\nToggle.displayName = 'Toggle';\n\nexport default Toggle;\n"],"names":["_Toggle","props","ref","classProps","modifiedProps","useToggleStyleProps","ariaDescribedBy","hasValidationIcon","id","isDisabled","isChecked","isRequired","label","helperText","onChange","validationState","validationText","restProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","checked","setChecked","useState","validationTextRole","useValidationTextRole","handleOnChange","event","jsxs","classNames","jsx","Label","HelperText","ValidationText","Toggle","forwardRef"],"mappings":"2gBAUMA,EAAU,CAACC,EAA0BC,IAAwC,CACjF,KAAM,CAAE,WAAAC,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,oBAAoBJ,CAAK,EAChE,CACJ,mBAAoBK,EAAkB,GACtC,kBAAAC,EACA,GAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,MAAAC,EACA,WAAAC,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,gBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDb,EACE,CAAA,WAAEc,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcH,CAAS,EAC3D,CAACI,EAAKC,CAAQ,EAAIC,EAAAA,QAAWjB,CAAe,EAC5CkB,EAAsBC,EAAAA,mBAAmBJ,CAAG,EAC5C,CAACK,EAASC,CAAU,EAAIC,EAAAA,SAASlB,CAAS,EAC1CmB,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAf,EACA,eAAAC,CAAA,CACD,EAEKe,EAAkBC,GAAyC,CAC/DL,EAAWK,EAAM,OAAO,OAAO,EAC/BlB,EAASkB,CAAK,CAChB,EAEA,OACEC,EAAAA,KAAC,MAAA,CAAI,MAAOf,EAAW,MAAO,UAAWgB,EAAW/B,EAAW,KAAMe,EAAW,SAAS,EACvF,SAAA,CAAAe,EAAAA,KAAC,MAAA,CAAI,UAAW9B,EAAW,KACzB,SAAA,CAAAgC,MAACC,EAAAA,SAAM,iBAAkBjC,EAAW,MAAO,QAASK,EACjD,SAAAI,EACH,EACAuB,EAAAA,IAACE,EAAAA,QAAA,CACC,iBAAkBlC,EAAW,WAC7B,GAAI,GAAGK,CAAE,eACT,aAAcc,EACd,WAAAT,CAAA,CAAA,EAEDE,GACCoB,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBnC,EAAW,eAC5B,GAAII,GAAqB,CAAE,uBAAwBQ,CAAA,EACpD,GAAI,GAAGP,CAAE,mBACT,eAAAQ,EACA,aAAcM,EACd,KAAMO,CAAA,CAAA,CACR,EAEJ,EACAM,EAAAA,IAAC,QAAA,CACE,GAAGhB,EACH,GAAGK,EACJ,KAAK,WACL,GAAAhB,EACA,UAAWL,EAAW,MACtB,SAAUM,EACV,QAAAiB,EACA,SAAUf,EACV,SAAUoB,EACV,IAAA7B,CAAA,CAAA,CACF,EACF,CAEJ,EAEMqC,EAASC,EAAAA,WAAgDxC,CAAO,EAKtEuC,EAAO,gBAAkB,SACzBA,EAAO,YAAc"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ChangeEvent, type ForwardedRef, forwardRef, useState } from 'react';\nimport { useAriaDescribedBy, useAriaDetails, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritToggleProps } from '../../types';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { InputDetails } from '../InputDetails';\nimport { useToggleStyleProps } from './useToggleStyleProps';\n\nconst _Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const { classProps, props: modifiedProps } = useToggleStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    'aria-details': ariaDetailsAttr,\n    details,\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isChecked = false,\n    isRequired,\n    label,\n    helperText,\n    onChange = () => {},\n    validationState,\n    validationText,\n    ...restProps\n  } = modifiedProps;\n  const { styleProps, props: otherProps } = useStyleProps(restProps);\n  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);\n  const [ariaDetailsProp, registerDetails] = useAriaDetails(ariaDetailsAttr);\n  const [checked, setChecked] = useState(isChecked);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n    onChange(event);\n  };\n\n  return (\n    <div style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <div className={classProps.text}>\n        <Label UNSAFE_className={classProps.label} htmlFor={id}>\n          {label}\n        </Label>\n        {details && (\n          <InputDetails id={`${id}-details`} registerAriaDetails={registerDetails}>\n            {details}\n          </InputDetails>\n        )}\n        <HelperText\n          UNSAFE_className={classProps.helperText}\n          id={`${id}__helperText`}\n          registerAria={register}\n          helperText={helperText}\n        />\n        {validationState && (\n          <ValidationText\n            UNSAFE_className={classProps.validationText}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            id={`${id}__validationText`}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        {...ariaDetailsProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        checked={checked}\n        required={isRequired}\n        onChange={handleOnChange}\n        ref={ref}\n      />\n    </div>\n  );\n};\n\nconst Toggle = forwardRef<HTMLInputElement, SpiritToggleProps>(_Toggle) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritToggleProps\n>;\n\nToggle.spiritComponent = 'Toggle';\nToggle.displayName = 'Toggle';\n\nexport default Toggle;\n"],"names":["_Toggle","props","ref","classProps","modifiedProps","useToggleStyleProps","ariaDescribedBy","ariaDetailsAttr","details","hasValidationIcon","id","isDisabled","isChecked","isRequired","label","helperText","onChange","validationState","validationText","restProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","ariaDetailsProp","registerDetails","useAriaDetails","checked","setChecked","useState","validationTextRole","useValidationTextRole","handleOnChange","event","jsxs","classNames","jsx","Label","InputDetails","HelperText","ValidationText","Toggle","forwardRef"],"mappings":"+gBAWMA,EAAU,CAACC,EAA0BC,IAAwC,CACjF,KAAM,CAAE,WAAAC,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,oBAAoBJ,CAAK,EAChE,CACJ,mBAAoBK,EAAkB,GACtC,eAAgBC,EAChB,QAAAC,EACA,kBAAAC,EACA,GAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,MAAAC,EACA,WAAAC,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,gBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDf,EACE,CAAA,WAAEgB,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcH,CAAS,EAC3D,CAACI,EAAqBC,CAAQ,EAAIC,EAAAA,mBAAmBnB,CAAe,EACpE,CAACoB,EAAiBC,CAAe,EAAIC,EAAAA,eAAerB,CAAe,EACnE,CAACsB,EAASC,CAAU,EAAIC,EAAAA,SAASnB,CAAS,EAC1CoB,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAhB,EACA,eAAAC,CAAA,CACD,EAEKgB,EAAkBC,GAAyC,CAC/DL,EAAWK,EAAM,OAAO,OAAO,EAC/BnB,EAASmB,CAAK,CAChB,EAEA,OACEC,EAAAA,KAAC,MAAA,CAAI,MAAOhB,EAAW,MAAO,UAAWiB,EAAWlC,EAAW,KAAMiB,EAAW,SAAS,EACvF,SAAA,CAAAgB,EAAAA,KAAC,MAAA,CAAI,UAAWjC,EAAW,KACzB,SAAA,CAAAmC,MAACC,EAAAA,SAAM,iBAAkBpC,EAAW,MAAO,QAASO,EACjD,SAAAI,EACH,EACCN,SACEgC,EAAAA,QAAA,CAAa,GAAI,GAAG9B,CAAE,WAAY,oBAAqBiB,EACrD,SAAAnB,CAAA,CACH,EAEF8B,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBtC,EAAW,WAC7B,GAAI,GAAGO,CAAE,eACT,aAAcc,EACd,WAAAT,CAAA,CAAA,EAEDE,GACCqB,EAAAA,IAACI,EAAAA,QAAA,CACC,iBAAkBvC,EAAW,eAC5B,GAAIM,GAAqB,CAAE,uBAAwBQ,CAAA,EACpD,GAAI,GAAGP,CAAE,mBACT,eAAAQ,EACA,aAAcM,EACd,KAAMQ,CAAA,CAAA,CACR,EAEJ,EACAM,EAAAA,IAAC,QAAA,CACE,GAAGjB,EACH,GAAGE,EACH,GAAGG,EACJ,KAAK,WACL,GAAAhB,EACA,UAAWP,EAAW,MACtB,SAAUQ,EACV,QAAAkB,EACA,SAAUhB,EACV,SAAUqB,EACV,IAAAhC,CAAA,CAAA,CACF,EACF,CAEJ,EAEMyC,EAASC,EAAAA,WAAgD5C,CAAO,EAKtE2C,EAAO,gBAAkB,SACzBA,EAAO,YAAc"}

package/dist/components/Toggle/Toggle.js

@@ -1,80 +1,84 @@
 "use client";
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import D from "classnames";
-import { forwardRef as F, useState as R } from "react";
-import { useStyleProps as V } from "../../hooks/styleProps.js";
-import { useAriaDescribedBy as B } from "../../hooks/useAriaDescribedBy.js";
-import E from "../Field/HelperText.js";
-import I from "../Field/Label.js";
-import U from "../Field/useAriaIds.js";
-import j from "../Field/ValidationText.js";
-import { useValidationTextRole as q } from "../Field/useValidationTextRole.js";
-import { useToggleStyleProps as $ } from "./useToggleStyleProps.js";
-const w = (n, m) => {
-  const { classProps: e, props: p } = $(n), {
-    "aria-describedby": h = "",
-    hasValidationIcon: g,
-    id: s,
-    isDisabled: f,
-    isChecked: x = !1,
-    isRequired: T,
-    label: u,
-    helperText: N,
-    onChange: b = () => {
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import V from "classnames";
+import { forwardRef as B, useState as E } from "react";
+import { useStyleProps as I } from "../../hooks/styleProps.js";
+import { useAriaDescribedBy as U, useAriaDetails as $ } from "../../hooks/useAriaIdRefs.js";
+import j from "../Field/HelperText.js";
+import q from "../Field/Label.js";
+import w from "../Field/ValidationText.js";
+import { useValidationTextRole as H } from "../Field/useValidationTextRole.js";
+import L from "../InputDetails/InputDetails.js";
+import { useToggleStyleProps as O } from "./useToggleStyleProps.js";
+const z = (p, m) => {
+  const { classProps: e, props: h } = O(p), {
+    "aria-describedby": g = "",
+    "aria-details": f,
+    details: r,
+    hasValidationIcon: u,
+    id: t,
+    isDisabled: x,
+    isChecked: T = !1,
+    isRequired: N,
+    label: b,
+    helperText: y,
+    onChange: D = () => {
     },
-    validationState: t,
-    validationText: r,
-    ...y
-  } = p, { styleProps: i, props: P } = V(y), [S, a] = U(h), _ = B(S), [A, v] = R(x), C = q({
-    validationState: t,
-    validationText: r
-  }), k = (l) => {
-    v(l.target.checked), b(l);
+    validationState: s,
+    validationText: a,
+    ...A
+  } = h, { styleProps: o, props: P } = I(A), [S, l] = U(g), [_, v] = $(f), [C, k] = E(T), F = H({
+    validationState: s,
+    validationText: a
+  }), R = (d) => {
+    k(d.target.checked), D(d);
   };
-  return /* @__PURE__ */ d("div", { style: i.style, className: D(e.root, i.className), children: [
-    /* @__PURE__ */ d("div", { className: e.text, children: [
-      /* @__PURE__ */ o(I, { UNSAFE_className: e.label, htmlFor: s, children: u }),
-      /* @__PURE__ */ o(
-        E,
+  return /* @__PURE__ */ c("div", { style: o.style, className: V(e.root, o.className), children: [
+    /* @__PURE__ */ c("div", { className: e.text, children: [
+      /* @__PURE__ */ i(q, { UNSAFE_className: e.label, htmlFor: t, children: b }),
+      r && /* @__PURE__ */ i(L, { id: `${t}-details`, registerAriaDetails: v, children: r }),
+      /* @__PURE__ */ i(
+        j,
         {
           UNSAFE_className: e.helperText,
-          id: `${s}__helperText`,
-          registerAria: a,
-          helperText: N
+          id: `${t}__helperText`,
+          registerAria: l,
+          helperText: y
         }
       ),
-      t && /* @__PURE__ */ o(
-        j,
+      s && /* @__PURE__ */ i(
+        w,
         {
           UNSAFE_className: e.validationText,
-          ...g && { hasValidationStateIcon: t },
-          id: `${s}__validationText`,
-          validationText: r,
-          registerAria: a,
-          role: C
+          ...u && { hasValidationStateIcon: s },
+          id: `${t}__validationText`,
+          validationText: a,
+          registerAria: l,
+          role: F
         }
       )
     ] }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ i(
       "input",
       {
         ...P,
+        ...S,
         ..._,
         type: "checkbox",
-        id: s,
+        id: t,
         className: e.input,
-        disabled: f,
-        checked: A,
-        required: T,
-        onChange: k,
+        disabled: x,
+        checked: C,
+        required: N,
+        onChange: R,
         ref: m
       }
     )
   ] });
-}, c = F(w);
-c.spiritComponent = "Toggle";
-c.displayName = "Toggle";
+}, n = B(z);
+n.spiritComponent = "Toggle";
+n.displayName = "Toggle";
 export {
-  c as default
+  n as default
 };
 //# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ChangeEvent, type ForwardedRef, forwardRef, useState } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritToggleProps } from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { useToggleStyleProps } from './useToggleStyleProps';\n\nconst _Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const { classProps, props: modifiedProps } = useToggleStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isChecked = false,\n    isRequired,\n    label,\n    helperText,\n    onChange = () => {},\n    validationState,\n    validationText,\n    ...restProps\n  } = modifiedProps;\n  const { styleProps, props: otherProps } = useStyleProps(restProps);\n  const [ids, register] = useAriaIds(ariaDescribedBy);\n  const ariaDescribedByProp = useAriaDescribedBy(ids);\n  const [checked, setChecked] = useState(isChecked);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n    onChange(event);\n  };\n\n  return (\n    <div style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <div className={classProps.text}>\n        <Label UNSAFE_className={classProps.label} htmlFor={id}>\n          {label}\n        </Label>\n        <HelperText\n          UNSAFE_className={classProps.helperText}\n          id={`${id}__helperText`}\n          registerAria={register}\n          helperText={helperText}\n        />\n        {validationState && (\n          <ValidationText\n            UNSAFE_className={classProps.validationText}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            id={`${id}__validationText`}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        checked={checked}\n        required={isRequired}\n        onChange={handleOnChange}\n        ref={ref}\n      />\n    </div>\n  );\n};\n\nconst Toggle = forwardRef<HTMLInputElement, SpiritToggleProps>(_Toggle) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritToggleProps\n>;\n\nToggle.spiritComponent = 'Toggle';\nToggle.displayName = 'Toggle';\n\nexport default Toggle;\n"],"names":["_Toggle","props","ref","classProps","modifiedProps","useToggleStyleProps","ariaDescribedBy","hasValidationIcon","id","isDisabled","isChecked","isRequired","label","helperText","onChange","validationState","validationText","restProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","checked","setChecked","useState","validationTextRole","useValidationTextRole","handleOnChange","event","jsxs","classNames","jsx","Label","HelperText","ValidationText","Toggle","forwardRef"],"mappings":";;;;;;;;;;;;AAUA,MAAMA,IAAU,CAACC,GAA0BC,MAAwC;AACjF,QAAM,EAAE,YAAAC,GAAY,OAAOC,EAAA,IAAkBC,EAAoBJ,CAAK,GAChE;AAAA,IACJ,oBAAoBK,IAAkB;AAAA,IACtC,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW,MAAM;AAAA,IAAC;AAAA,IAClB,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GACE,EAAE,YAAAc,GAAY,OAAOC,EAAA,IAAeC,EAAcH,CAAS,GAC3D,CAACI,GAAKC,CAAQ,IAAIC,EAAWjB,CAAe,GAC5CkB,IAAsBC,EAAmBJ,CAAG,GAC5C,CAACK,GAASC,CAAU,IAAIC,EAASlB,CAAS,GAC1CmB,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAf;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD,GAEKe,IAAiB,CAACC,MAAyC;AAC/D,IAAAL,EAAWK,EAAM,OAAO,OAAO,GAC/BlB,EAASkB,CAAK;AAAA,EAChB;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAOf,EAAW,OAAO,WAAWgB,EAAW/B,EAAW,MAAMe,EAAW,SAAS,GACvF,UAAA;AAAA,IAAA,gBAAAe,EAAC,OAAA,EAAI,WAAW9B,EAAW,MACzB,UAAA;AAAA,MAAA,gBAAAgC,EAACC,KAAM,kBAAkBjC,EAAW,OAAO,SAASK,GACjD,UAAAI,GACH;AAAA,MACA,gBAAAuB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,kBAAkBlC,EAAW;AAAA,UAC7B,IAAI,GAAGK,CAAE;AAAA,UACT,cAAcc;AAAA,UACd,YAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDE,KACC,gBAAAoB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,kBAAkBnC,EAAW;AAAA,UAC5B,GAAII,KAAqB,EAAE,wBAAwBQ,EAAA;AAAA,UACpD,IAAI,GAAGP,CAAE;AAAA,UACT,gBAAAQ;AAAA,UACA,cAAcM;AAAA,UACd,MAAMO;AAAA,QAAA;AAAA,MAAA;AAAA,IACR,GAEJ;AAAA,IACA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGhB;AAAA,QACH,GAAGK;AAAA,QACJ,MAAK;AAAA,QACL,IAAAhB;AAAA,QACA,WAAWL,EAAW;AAAA,QACtB,UAAUM;AAAA,QACV,SAAAiB;AAAA,QACA,UAAUf;AAAA,QACV,UAAUoB;AAAA,QACV,KAAA7B;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,GAEMqC,IAASC,EAAgDxC,CAAO;AAKtEuC,EAAO,kBAAkB;AACzBA,EAAO,cAAc;"}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ChangeEvent, type ForwardedRef, forwardRef, useState } from 'react';\nimport { useAriaDescribedBy, useAriaDetails, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritToggleProps } from '../../types';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { InputDetails } from '../InputDetails';\nimport { useToggleStyleProps } from './useToggleStyleProps';\n\nconst _Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const { classProps, props: modifiedProps } = useToggleStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    'aria-details': ariaDetailsAttr,\n    details,\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isChecked = false,\n    isRequired,\n    label,\n    helperText,\n    onChange = () => {},\n    validationState,\n    validationText,\n    ...restProps\n  } = modifiedProps;\n  const { styleProps, props: otherProps } = useStyleProps(restProps);\n  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);\n  const [ariaDetailsProp, registerDetails] = useAriaDetails(ariaDetailsAttr);\n  const [checked, setChecked] = useState(isChecked);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n    onChange(event);\n  };\n\n  return (\n    <div style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <div className={classProps.text}>\n        <Label UNSAFE_className={classProps.label} htmlFor={id}>\n          {label}\n        </Label>\n        {details && (\n          <InputDetails id={`${id}-details`} registerAriaDetails={registerDetails}>\n            {details}\n          </InputDetails>\n        )}\n        <HelperText\n          UNSAFE_className={classProps.helperText}\n          id={`${id}__helperText`}\n          registerAria={register}\n          helperText={helperText}\n        />\n        {validationState && (\n          <ValidationText\n            UNSAFE_className={classProps.validationText}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            id={`${id}__validationText`}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        {...ariaDetailsProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        checked={checked}\n        required={isRequired}\n        onChange={handleOnChange}\n        ref={ref}\n      />\n    </div>\n  );\n};\n\nconst Toggle = forwardRef<HTMLInputElement, SpiritToggleProps>(_Toggle) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritToggleProps\n>;\n\nToggle.spiritComponent = 'Toggle';\nToggle.displayName = 'Toggle';\n\nexport default Toggle;\n"],"names":["_Toggle","props","ref","classProps","modifiedProps","useToggleStyleProps","ariaDescribedBy","ariaDetailsAttr","details","hasValidationIcon","id","isDisabled","isChecked","isRequired","label","helperText","onChange","validationState","validationText","restProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","ariaDetailsProp","registerDetails","useAriaDetails","checked","setChecked","useState","validationTextRole","useValidationTextRole","handleOnChange","event","jsxs","classNames","jsx","Label","InputDetails","HelperText","ValidationText","Toggle","forwardRef"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,IAAU,CAACC,GAA0BC,MAAwC;AACjF,QAAM,EAAE,YAAAC,GAAY,OAAOC,EAAA,IAAkBC,EAAoBJ,CAAK,GAChE;AAAA,IACJ,oBAAoBK,IAAkB;AAAA,IACtC,gBAAgBC;AAAA,IAChB,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW,MAAM;AAAA,IAAC;AAAA,IAClB,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GACE,EAAE,YAAAgB,GAAY,OAAOC,EAAA,IAAeC,EAAcH,CAAS,GAC3D,CAACI,GAAqBC,CAAQ,IAAIC,EAAmBnB,CAAe,GACpE,CAACoB,GAAiBC,CAAe,IAAIC,EAAerB,CAAe,GACnE,CAACsB,GAASC,CAAU,IAAIC,EAASnB,CAAS,GAC1CoB,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAhB;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD,GAEKgB,IAAiB,CAACC,MAAyC;AAC/D,IAAAL,EAAWK,EAAM,OAAO,OAAO,GAC/BnB,EAASmB,CAAK;AAAA,EAChB;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAOhB,EAAW,OAAO,WAAWiB,EAAWlC,EAAW,MAAMiB,EAAW,SAAS,GACvF,UAAA;AAAA,IAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAWjC,EAAW,MACzB,UAAA;AAAA,MAAA,gBAAAmC,EAACC,KAAM,kBAAkBpC,EAAW,OAAO,SAASO,GACjD,UAAAI,GACH;AAAA,MACCN,uBACEgC,GAAA,EAAa,IAAI,GAAG9B,CAAE,YAAY,qBAAqBiB,GACrD,UAAAnB,EAAA,CACH;AAAA,MAEF,gBAAA8B;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,kBAAkBtC,EAAW;AAAA,UAC7B,IAAI,GAAGO,CAAE;AAAA,UACT,cAAcc;AAAA,UACd,YAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDE,KACC,gBAAAqB;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,kBAAkBvC,EAAW;AAAA,UAC5B,GAAIM,KAAqB,EAAE,wBAAwBQ,EAAA;AAAA,UACpD,IAAI,GAAGP,CAAE;AAAA,UACT,gBAAAQ;AAAA,UACA,cAAcM;AAAA,UACd,MAAMQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACR,GAEJ;AAAA,IACA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGjB;AAAA,QACH,GAAGE;AAAA,QACH,GAAGG;AAAA,QACJ,MAAK;AAAA,QACL,IAAAhB;AAAA,QACA,WAAWP,EAAW;AAAA,QACtB,UAAUQ;AAAA,QACV,SAAAkB;AAAA,QACA,UAAUhB;AAAA,QACV,UAAUqB;AAAA,QACV,KAAAhC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,GAEMyC,IAASC,EAAgD5C,CAAO;AAKtE2C,EAAO,kBAAkB;AACzBA,EAAO,cAAc;"}

package/dist/components/UNSTABLE_File/UNSTABLE_File.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),L=require("classnames"),U=require("../../hooks/styleProps.cjs"),R=require("../../hooks/useClassNamePrefix.cjs"),V=require("../../hooks/useI18n.cjs"),N=require("../ControlButton/ControlButton.cjs"),D=require("../Field/ValidationText.cjs"),O=require("../Field/useValidationTextRole.cjs"),z=require("../Flex/Flex.cjs"),a=require("../Icon/Icon.cjs"),T=require("../VisuallyHidden/VisuallyHidden.cjs"),j=require("./constants.cjs"),M=require("./useFileStyleProps.cjs"),w={elementType:"li",iconName:j.DEFAULT_FILE_ICON_NAME},o=f=>{const v={...w,...f},{t:r}=V.useI18n(),{editText:S,elementType:P,hasValidationIcon:_,helperText:c,iconName:q,id:n,isDisabled:d,label:y,onDismiss:u,onChange:m,previewSlot:C,removeText:F,validationState:s,validationText:x,...A}=v,E=S??r("attachment.edit"),I=F??r("attachment.remove"),{classProps:t}=M.useFileStyleProps({isDisabled:d,validationState:s}),{styleProps:p,props:b}=U.useStyleProps(A),g=O.useValidationTextRole({validationState:s,validationText:x}),h={size:"large",isSymmetrical:!0,isDisabled:d},i=m?e.jsxs(N.default,{...h,onClick:m,children:[e.jsx(T.default,{children:E}),e.jsx(a.default,{name:j.DEFAULT_FILE_ACTION_BUTTON_ICON_NAME,boxSize:16,"aria-hidden":"true"})]}):null,l=u?e.jsxs(N.default,{...h,onClick:u,children:[e.jsx(T.default,{children:I}),e.jsx(a.default,{name:"close",boxSize:16,"aria-hidden":"true"})]}):null,B=P;return e.jsxs(B,{...b,...p,...n!=null&&n!==""?{id:n}:{},className:L(t.root,p.className),children:[C??e.jsx("div",{className:t.preview,children:e.jsx(a.default,{name:q,boxSize:20,"aria-hidden":"true"})}),e.jsx("div",{className:t.content,children:e.jsxs("div",{className:t.text,children:[e.jsx("span",{className:t.name,children:e.jsx("span",{className:R.useClassNamePrefix("text-truncate"),children:y})}),c&&e.jsx("div",{className:t.helperText,children:c}),s&&e.jsx(D.default,{UNSAFE_className:t.validationText,elementType:"div",..._&&{hasValidationStateIcon:s},role:g,validationText:x})]})}),i&&l?e.jsxs(z.default,{alignmentX:{mobile:"stretch",tablet:"left"},alignmentY:"stretch",spacingX:"space-500",children:[i,l]}):e.jsxs(e.Fragment,{children:[i,l]})]})};o.spiritComponent="UNSTABLE_File";o.displayName="UNSTABLE_File";exports.default=o;
+//# sourceMappingURL=UNSTABLE_File.cjs.map

package/dist/components/UNSTABLE_File/UNSTABLE_File.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSTABLE_File.cjs","sources":["../../../src/components/UNSTABLE_File/UNSTABLE_File.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ElementType } from 'react';\nimport { useClassNamePrefix, useI18n, useStyleProps } from '../../hooks';\nimport { ControlButton } from '../ControlButton';\nimport { ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { Flex } from '../Flex';\nimport { Icon } from '../Icon';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { DEFAULT_FILE_ACTION_BUTTON_ICON_NAME, DEFAULT_FILE_ICON_NAME } from './constants';\nimport { type SpiritUnstableFileProps } from './types';\nimport { useFileStyleProps } from './useFileStyleProps';\n\nconst defaultProps = {\n  elementType: 'li' as const,\n  iconName: DEFAULT_FILE_ICON_NAME,\n};\n\nconst UNSTABLE_File = <E extends ElementType = 'li'>(props: SpiritUnstableFileProps<E>): JSX.Element => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const { t } = useI18n();\n  const {\n    editText,\n    elementType,\n    hasValidationIcon,\n    helperText,\n    iconName,\n    id,\n    isDisabled,\n    label,\n    onDismiss,\n    onChange,\n    previewSlot,\n    removeText,\n    validationState,\n    validationText,\n    ...restProps\n  } = propsWithDefaults;\n\n  const resolvedEditText = editText ?? t('attachment.edit');\n  const resolvedRemoveText = removeText ?? t('attachment.remove');\n  const { classProps } = useFileStyleProps({ isDisabled, validationState });\n  const { styleProps, props: transferProps } = useStyleProps(restProps);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  const fileRowControlButtonProps = {\n    size: 'large' as const,\n    isSymmetrical: true as const,\n    isDisabled,\n  };\n\n  const editActionButton = onChange ? (\n    <ControlButton {...fileRowControlButtonProps} onClick={onChange}>\n      <VisuallyHidden>{resolvedEditText}</VisuallyHidden>\n      <Icon name={DEFAULT_FILE_ACTION_BUTTON_ICON_NAME} boxSize={16} aria-hidden=\"true\" />\n    </ControlButton>\n  ) : null;\n\n  const dismissActionButton = onDismiss ? (\n    <ControlButton {...fileRowControlButtonProps} onClick={onDismiss}>\n      <VisuallyHidden>{resolvedRemoveText}</VisuallyHidden>\n      <Icon name=\"close\" boxSize={16} aria-hidden=\"true\" />\n    </ControlButton>\n  ) : null;\n\n  const Component = elementType as ElementType;\n\n  return (\n    <Component\n      {...transferProps}\n      {...styleProps}\n      {...(id != null && id !== '' ? { id } : {})}\n      className={classNames(classProps.root, styleProps.className)}\n    >\n      {previewSlot ?? (\n        <div className={classProps.preview}>\n          <Icon name={iconName} boxSize={20} aria-hidden=\"true\" />\n        </div>\n      )}\n      <div className={classProps.content}>\n        <div className={classProps.text}>\n          <span className={classProps.name}>\n            <span className={useClassNamePrefix('text-truncate')}>{label}</span>\n          </span>\n          {helperText && <div className={classProps.helperText}>{helperText}</div>}\n          {validationState && (\n            <ValidationText\n              UNSAFE_className={classProps.validationText}\n              elementType=\"div\"\n              {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n              role={validationTextRole}\n              validationText={validationText}\n            />\n          )}\n        </div>\n      </div>\n      {editActionButton && dismissActionButton ? (\n        <Flex alignmentX={{ mobile: 'stretch', tablet: 'left' }} alignmentY=\"stretch\" spacingX=\"space-500\">\n          {editActionButton}\n          {dismissActionButton}\n        </Flex>\n      ) : (\n        <>\n          {editActionButton}\n          {dismissActionButton}\n        </>\n      )}\n    </Component>\n  );\n};\n\nUNSTABLE_File.spiritComponent = 'UNSTABLE_File';\nUNSTABLE_File.displayName = 'UNSTABLE_File';\n\nexport default UNSTABLE_File;\n"],"names":["defaultProps","DEFAULT_FILE_ICON_NAME","UNSTABLE_File","props","propsWithDefaults","t","useI18n","editText","elementType","hasValidationIcon","helperText","iconName","id","isDisabled","label","onDismiss","onChange","previewSlot","removeText","validationState","validationText","restProps","resolvedEditText","resolvedRemoveText","classProps","useFileStyleProps","styleProps","transferProps","useStyleProps","validationTextRole","useValidationTextRole","fileRowControlButtonProps","editActionButton","jsxs","ControlButton","jsx","VisuallyHidden","Icon","DEFAULT_FILE_ACTION_BUTTON_ICON_NAME","dismissActionButton","Component","classNames","useClassNamePrefix","ValidationText","Flex","Fragment"],"mappings":"4mBAeMA,EAAe,CACnB,YAAa,KACb,SAAUC,EAAAA,sBACZ,EAEMC,EAA+CC,GAAmD,CACtG,MAAMC,EAAoB,CAAE,GAAGJ,EAAc,GAAGG,CAAA,EAC1C,CAAE,EAAAE,CAAA,EAAMC,UAAA,EACR,CACJ,SAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,SAAAC,EACA,GAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDjB,EAEEkB,EAAmBf,GAAYF,EAAE,iBAAiB,EAClDkB,EAAqBL,GAAcb,EAAE,mBAAmB,EACxD,CAAE,WAAAmB,CAAA,EAAeC,EAAAA,kBAAkB,CAAE,WAAAZ,EAAY,gBAAAM,EAAiB,EAClE,CAAA,WAAEO,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,cAAcP,CAAS,EAC9DQ,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAX,EACA,eAAAC,CAAA,CACD,EAEKW,EAA4B,CAChC,KAAM,QACN,cAAe,GACf,WAAAlB,CAAA,EAGImB,EAAmBhB,EACvBiB,EAAAA,KAACC,EAAAA,SAAe,GAAGH,EAA2B,QAASf,EACrD,SAAA,CAAAmB,EAAAA,IAACC,EAAAA,SAAgB,SAAAd,CAAA,CAAiB,QACjCe,EAAAA,QAAA,CAAK,KAAMC,EAAAA,qCAAsC,QAAS,GAAI,cAAY,MAAA,CAAO,CAAA,CAAA,CACpF,EACE,KAEEC,EAAsBxB,EAC1BkB,EAAAA,KAACC,EAAAA,SAAe,GAAGH,EAA2B,QAAShB,EACrD,SAAA,CAAAoB,EAAAA,IAACC,EAAAA,SAAgB,SAAAb,CAAA,CAAmB,QACnCc,EAAAA,QAAA,CAAK,KAAK,QAAQ,QAAS,GAAI,cAAY,MAAA,CAAO,CAAA,CAAA,CACrD,EACE,KAEEG,EAAYhC,EAElB,OACEyB,EAAAA,KAACO,EAAA,CACE,GAAGb,EACH,GAAGD,EACH,GAAId,GAAM,MAAQA,IAAO,GAAK,CAAE,GAAAA,CAAA,EAAO,CAAA,EACxC,UAAW6B,EAAWjB,EAAW,KAAME,EAAW,SAAS,EAE1D,SAAA,CAAAT,GACCkB,EAAAA,IAAC,MAAA,CAAI,UAAWX,EAAW,QACzB,SAAAW,EAAAA,IAACE,EAAAA,QAAA,CAAK,KAAM1B,EAAU,QAAS,GAAI,cAAY,OAAO,EACxD,EAEFwB,EAAAA,IAAC,OAAI,UAAWX,EAAW,QACzB,SAAAS,EAAAA,KAAC,MAAA,CAAI,UAAWT,EAAW,KACzB,SAAA,CAAAW,EAAAA,IAAC,OAAA,CAAK,UAAWX,EAAW,KAC1B,SAAAW,EAAAA,IAAC,OAAA,CAAK,UAAWO,EAAAA,mBAAmB,eAAe,EAAI,SAAA5B,CAAA,CAAM,EAC/D,EACCJ,GAAcyB,EAAAA,IAAC,MAAA,CAAI,UAAWX,EAAW,WAAa,SAAAd,EAAW,EACjES,GACCgB,EAAAA,IAACQ,EAAAA,QAAA,CACC,iBAAkBnB,EAAW,eAC7B,YAAY,MACX,GAAIf,GAAqB,CAAE,uBAAwBU,CAAA,EACpD,KAAMU,EACN,eAAAT,CAAA,CAAA,CACF,CAAA,CAEJ,CAAA,CACF,EACCY,GAAoBO,EACnBN,EAAAA,KAACW,EAAAA,QAAA,CAAK,WAAY,CAAE,OAAQ,UAAW,OAAQ,MAAA,EAAU,WAAW,UAAU,SAAS,YACpF,SAAA,CAAAZ,EACAO,CAAA,CAAA,CACH,EAEAN,EAAAA,KAAAY,EAAAA,SAAA,CACG,SAAA,CAAAb,EACAO,CAAA,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,EAEArC,EAAc,gBAAkB,gBAChCA,EAAc,YAAc"}

package/dist/components/UNSTABLE_File/UNSTABLE_File.d.ts

@@ -0,0 +1,8 @@
+import { ElementType } from 'react';
+import { SpiritUnstableFileProps } from './types';
+declare const UNSTABLE_File: {
+    <E extends ElementType = "li">(props: SpiritUnstableFileProps<E>): JSX.Element;
+    spiritComponent: string;
+    displayName: string;
+};
+export default UNSTABLE_File;