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

package/dist/components/Slider/Slider.js

@@ -1,20 +1,19 @@
 "use client";
-import { jsxs as R, jsx as o } from "react/jsx-runtime";
-import U from "classnames";
-import { forwardRef as $ } from "react";
-import { useStyleProps as B } from "../../hooks/styleProps.js";
-import { useAriaDescribedBy as L } from "../../hooks/useAriaDescribedBy.js";
-import j from "../Field/HelperText.js";
-import C from "../Field/Label.js";
-import w from "../Field/useAriaIds.js";
-import H from "../Field/ValidationText.js";
-import { useValidationTextRole as M } from "../Field/useValidationTextRole.js";
-import { SLIDER_DEFAULT_PROPS as O } from "./constants.js";
-import { useSliderStyleProps as W } from "./useSliderStyleProps.js";
-const k = {
-  ...O
-}, q = (x, P) => {
-  const b = { ...k, ...x }, {
+import { jsxs as I, jsx as o } from "react/jsx-runtime";
+import R from "classnames";
+import { forwardRef as U } from "react";
+import { useStyleProps as $ } from "../../hooks/styleProps.js";
+import { useAriaDescribedBy as B } from "../../hooks/useAriaIdRefs.js";
+import L from "../Field/HelperText.js";
+import j from "../Field/Label.js";
+import C from "../Field/ValidationText.js";
+import { useValidationTextRole as w } from "../Field/useValidationTextRole.js";
+import { SLIDER_DEFAULT_PROPS as H } from "./constants.js";
+import { useSliderStyleProps as M } from "./useSliderStyleProps.js";
+const O = {
+  ...H
+}, W = (x, P) => {
+  const b = { ...O, ...x }, {
     "aria-describedby": h,
     hasValidationIcon: y,
     helperText: N,
@@ -28,23 +27,23 @@ const k = {
     validationText: n,
     value: p,
     ...v
-  } = b, { classProps: e, props: A } = W({
+  } = b, { classProps: e, props: A } = M({
     ...v,
     isDisabled: a,
     validationState: r
-  }), { styleProps: d, props: D } = B(A), [g, m] = w(h), I = L(g), V = M({
+  }), { styleProps: d, props: D } = $(A), [g, m] = B(h), V = w({
     validationState: r,
     validationText: n
   }), c = "--slider-position", u = (i) => `${Math.round(100 * (i - s) / (l - s))}%`, E = (i) => {
     const { target: f } = i, { value: F } = f;
     f.style.setProperty(c, u(Number(F)));
   };
-  return /* @__PURE__ */ R("div", { ...d, ...D, className: U(e.root, d.className), children: [
-    /* @__PURE__ */ o(C, { htmlFor: t, UNSAFE_className: e.label, children: T }),
+  return /* @__PURE__ */ I("div", { ...d, ...D, className: R(e.root, d.className), children: [
+    /* @__PURE__ */ o(j, { htmlFor: t, UNSAFE_className: e.label, children: T }),
     /* @__PURE__ */ o(
       "input",
       {
-        ...I,
+        ...g,
         className: e.input,
         id: t,
         onInput: E,
@@ -59,7 +58,7 @@ const k = {
       }
     ),
     /* @__PURE__ */ o(
-      j,
+      L,
       {
         UNSAFE_className: e.helperText,
         helperText: N,
@@ -68,7 +67,7 @@ const k = {
       }
     ),
     r && /* @__PURE__ */ o(
-      H,
+      C,
       {
         UNSAFE_className: e.validationText,
         ...y && { hasValidationStateIcon: r },
@@ -79,7 +78,7 @@ const k = {
       }
     )
   ] });
-}, S = $(q);
+}, S = U(W);
 S.spiritComponent = "Slider";
 S.displayName = "Slider";
 export {

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type CSSProperties, type ChangeEvent, type FormEvent, type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritSliderProps } from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { SLIDER_DEFAULT_PROPS } from './constants';\nimport { useSliderStyleProps } from './useSliderStyleProps';\n\nconst defaultProps = {\n  ...SLIDER_DEFAULT_PROPS,\n};\n\nconst _Slider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const {\n    'aria-describedby': ariaDescribedBy,\n    hasValidationIcon,\n    helperText,\n    id,\n    isDisabled,\n    label,\n    max,\n    min,\n    step,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = propsWithDefaults;\n\n  const { classProps, props: modifiedProps } = useSliderStyleProps({\n    ...restProps,\n    isDisabled,\n    validationState,\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  const CSSVariable = '--slider-position';\n\n  const getSliderPosition = (num: number) => `${Math.round((100 * (num - min)) / (max - min))}%`;\n\n  const handleInput = (event: FormEvent<HTMLInputElement>) => {\n    const { target } = event as ChangeEvent<HTMLInputElement>;\n    const { value: inputValue } = target;\n\n    target.style.setProperty(CSSVariable, getSliderPosition(Number(inputValue)));\n  };\n\n  return (\n    <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <input\n        {...ariaDescribedByProp}\n        className={classProps.input}\n        id={id}\n        onInput={handleInput}\n        style={{ [CSSVariable]: `${getSliderPosition(value)}` } as CSSProperties}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={isDisabled}\n        ref={ref}\n      />\n      <HelperText\n        UNSAFE_className={classProps.helperText}\n        helperText={helperText}\n        id={`${id}__helperText`}\n        registerAria={register}\n      />\n      {validationState && (\n        <ValidationText\n          UNSAFE_className={classProps.validationText}\n          {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n          id={`${id}__validationText`}\n          registerAria={register}\n          validationText={validationText}\n          role={validationTextRole}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Slider = forwardRef<HTMLInputElement, SpiritSliderProps>(_Slider) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritSliderProps\n>;\n\nSlider.spiritComponent = 'Slider';\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["defaultProps","SLIDER_DEFAULT_PROPS","_Slider","props","ref","propsWithDefaults","ariaDescribedBy","hasValidationIcon","helperText","id","isDisabled","label","max","min","step","validationState","validationText","value","restProps","classProps","modifiedProps","useSliderStyleProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","CSSVariable","getSliderPosition","num","handleInput","event","target","inputValue","jsxs","classNames","jsx","Label","HelperText","ValidationText","Slider","forwardRef"],"mappings":";;;;;;;;;;;;;AAWA,MAAMA,IAAe;AAAA,EACnB,GAAGC;AACL,GAEMC,IAAU,CAACC,GAA0BC,MAAwC;AACjF,QAAMC,IAAoB,EAAE,GAAGL,GAAc,GAAGG,EAAA,GAC1C;AAAA,IACJ,oBAAoBG;AAAA,IACpB,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEE,EAAE,YAAAc,GAAY,OAAOC,EAAA,IAAkBC,EAAoB;AAAA,IAC/D,GAAGH;AAAA,IACH,YAAAR;AAAA,IACA,iBAAAK;AAAA,EAAA,CACD,GACK,EAAE,YAAAO,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,CAACK,GAAKC,CAAQ,IAAIC,EAAWrB,CAAe,GAC5CsB,IAAsBC,EAAmBJ,CAAG,GAC5CK,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAhB;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD,GAEKgB,IAAc,qBAEdC,IAAoB,CAACC,MAAgB,GAAG,KAAK,MAAO,OAAOA,IAAMrB,MAASD,IAAMC,EAAI,CAAC,KAErFsB,IAAc,CAACC,MAAuC;AAC1D,UAAM,EAAE,QAAAC,MAAWD,GACb,EAAE,OAAOE,EAAA,IAAeD;AAE9B,IAAAA,EAAO,MAAM,YAAYL,GAAaC,EAAkB,OAAOK,CAAU,CAAC,CAAC;AAAA,EAC7E;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAK,GAAGjB,GAAa,GAAGC,GAAY,WAAWiB,EAAWrB,EAAW,MAAMG,EAAW,SAAS,GAC9F,UAAA;AAAA,IAAA,gBAAAmB,EAACC,KAAM,SAASjC,GAAI,kBAAkBU,EAAW,OAC9C,UAAAR,GACH;AAAA,IACA,gBAAA8B;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGb;AAAA,QACJ,WAAWT,EAAW;AAAA,QACtB,IAAAV;AAAA,QACA,SAAS0B;AAAA,QACT,OAAO,EAAE,CAACH,CAAW,GAAG,GAAGC,EAAkBhB,CAAK,CAAC,GAAA;AAAA,QACnD,MAAK;AAAA,QACL,KAAAJ;AAAA,QACA,KAAAD;AAAA,QACA,MAAAE;AAAA,QACA,OAAAG;AAAA,QACA,UAAUP;AAAA,QACV,KAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAqC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,kBAAkBxB,EAAW;AAAA,QAC7B,YAAAX;AAAA,QACA,IAAI,GAAGC,CAAE;AAAA,QACT,cAAciB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEfX,KACC,gBAAA0B;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,kBAAkBzB,EAAW;AAAA,QAC5B,GAAIZ,KAAqB,EAAE,wBAAwBQ,EAAA;AAAA,QACpD,IAAI,GAAGN,CAAE;AAAA,QACT,cAAciB;AAAA,QACd,gBAAAV;AAAA,QACA,MAAMc;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GAEJ;AAEJ,GAEMe,IAASC,EAAgD5C,CAAO;AAKtE2C,EAAO,kBAAkB;AACzBA,EAAO,cAAc;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type CSSProperties, type ChangeEvent, type FormEvent, type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritSliderProps } from '../../types';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { SLIDER_DEFAULT_PROPS } from './constants';\nimport { useSliderStyleProps } from './useSliderStyleProps';\n\nconst defaultProps = {\n  ...SLIDER_DEFAULT_PROPS,\n};\n\nconst _Slider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputElement>) => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const {\n    'aria-describedby': ariaDescribedBy,\n    hasValidationIcon,\n    helperText,\n    id,\n    isDisabled,\n    label,\n    max,\n    min,\n    step,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = propsWithDefaults;\n\n  const { classProps, props: modifiedProps } = useSliderStyleProps({\n    ...restProps,\n    isDisabled,\n    validationState,\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 CSSVariable = '--slider-position';\n\n  const getSliderPosition = (num: number) => `${Math.round((100 * (num - min)) / (max - min))}%`;\n\n  const handleInput = (event: FormEvent<HTMLInputElement>) => {\n    const { target } = event as ChangeEvent<HTMLInputElement>;\n    const { value: inputValue } = target;\n\n    target.style.setProperty(CSSVariable, getSliderPosition(Number(inputValue)));\n  };\n\n  return (\n    <div {...styleProps} {...otherProps} className={classNames(classProps.root, styleProps.className)}>\n      <Label htmlFor={id} UNSAFE_className={classProps.label}>\n        {label}\n      </Label>\n      <input\n        {...ariaDescribedByProp}\n        className={classProps.input}\n        id={id}\n        onInput={handleInput}\n        style={{ [CSSVariable]: `${getSliderPosition(value)}` } as CSSProperties}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        disabled={isDisabled}\n        ref={ref}\n      />\n      <HelperText\n        UNSAFE_className={classProps.helperText}\n        helperText={helperText}\n        id={`${id}__helperText`}\n        registerAria={register}\n      />\n      {validationState && (\n        <ValidationText\n          UNSAFE_className={classProps.validationText}\n          {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n          id={`${id}__validationText`}\n          registerAria={register}\n          validationText={validationText}\n          role={validationTextRole}\n        />\n      )}\n    </div>\n  );\n};\n\nconst Slider = forwardRef<HTMLInputElement, SpiritSliderProps>(_Slider) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritSliderProps\n>;\n\nSlider.spiritComponent = 'Slider';\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["defaultProps","SLIDER_DEFAULT_PROPS","_Slider","props","ref","propsWithDefaults","ariaDescribedBy","hasValidationIcon","helperText","id","isDisabled","label","max","min","step","validationState","validationText","value","restProps","classProps","modifiedProps","useSliderStyleProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","validationTextRole","useValidationTextRole","CSSVariable","getSliderPosition","num","handleInput","event","target","inputValue","jsxs","classNames","jsx","Label","HelperText","ValidationText","Slider","forwardRef"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,IAAe;AAAA,EACnB,GAAGC;AACL,GAEMC,IAAU,CAACC,GAA0BC,MAAwC;AACjF,QAAMC,IAAoB,EAAE,GAAGL,GAAc,GAAGG,EAAA,GAC1C;AAAA,IACJ,oBAAoBG;AAAA,IACpB,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEE,EAAE,YAAAc,GAAY,OAAOC,EAAA,IAAkBC,EAAoB;AAAA,IAC/D,GAAGH;AAAA,IACH,YAAAR;AAAA,IACA,iBAAAK;AAAA,EAAA,CACD,GACK,EAAE,YAAAO,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,CAACK,GAAqBC,CAAQ,IAAIC,EAAmBrB,CAAe,GACpEsB,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAd;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD,GAEKc,IAAc,qBAEdC,IAAoB,CAACC,MAAgB,GAAG,KAAK,MAAO,OAAOA,IAAMnB,MAASD,IAAMC,EAAI,CAAC,KAErFoB,IAAc,CAACC,MAAuC;AAC1D,UAAM,EAAE,QAAAC,MAAWD,GACb,EAAE,OAAOE,EAAA,IAAeD;AAE9B,IAAAA,EAAO,MAAM,YAAYL,GAAaC,EAAkB,OAAOK,CAAU,CAAC,CAAC;AAAA,EAC7E;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAK,GAAGf,GAAa,GAAGC,GAAY,WAAWe,EAAWnB,EAAW,MAAMG,EAAW,SAAS,GAC9F,UAAA;AAAA,IAAA,gBAAAiB,EAACC,KAAM,SAAS/B,GAAI,kBAAkBU,EAAW,OAC9C,UAAAR,GACH;AAAA,IACA,gBAAA4B;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGd;AAAA,QACJ,WAAWN,EAAW;AAAA,QACtB,IAAAV;AAAA,QACA,SAASwB;AAAA,QACT,OAAO,EAAE,CAACH,CAAW,GAAG,GAAGC,EAAkBd,CAAK,CAAC,GAAA;AAAA,QACnD,MAAK;AAAA,QACL,KAAAJ;AAAA,QACA,KAAAD;AAAA,QACA,MAAAE;AAAA,QACA,OAAAG;AAAA,QACA,UAAUP;AAAA,QACV,KAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAmC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,kBAAkBtB,EAAW;AAAA,QAC7B,YAAAX;AAAA,QACA,IAAI,GAAGC,CAAE;AAAA,QACT,cAAciB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEfX,KACC,gBAAAwB;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,kBAAkBvB,EAAW;AAAA,QAC5B,GAAIZ,KAAqB,EAAE,wBAAwBQ,EAAA;AAAA,QACpD,IAAI,GAAGN,CAAE;AAAA,QACT,cAAciB;AAAA,QACd,gBAAAV;AAAA,QACA,MAAMY;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GAEJ;AAEJ,GAEMe,IAASC,EAAgD1C,CAAO;AAKtEyC,EAAO,kBAAkB;AACzBA,EAAO,cAAc;"}

package/dist/components/Tabs/TabLink.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),y=require("classnames"),d=require("react"),S=require("../../hooks/styleProps.cjs"),T=require("../../utils/mergeStyleProps.cjs"),b=require("./useTabsStyleProps.cjs"),f={itemProps:{}},q=(n,i)=>{const l={...f,...n},{elementType:a="a",children:c,itemProps:p={},...u}=l,s=a,{classProps:t}=b.useTabsStyleProps(),{styleProps:r,props:m}=S.useStyleProps(p),P=T.mergeStyleProps(s,{classProps:t.link});return o.jsx("li",{...r,...m,className:y(t.item,r.className),role:"presentation",children:o.jsx(s,{...u,...P,ref:i,children:c})})},e=d.forwardRef(q);e.spiritComponent="TabLink";e.displayName="TabLink";exports.default=e;
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),S=require("classnames"),T=require("react"),b=require("../../hooks/styleProps.cjs"),f=require("../../hooks/useLinkClick.cjs"),q=require("../../utils/mergeStyleProps.cjs"),C=require("./useTabsStyleProps.cjs"),L={itemProps:{}},g=(i,l)=>{const c={...L,...i},{elementType:a="a",children:p,itemProps:u={},routerOptions:m,...e}=c,{href:P}=e,t=a,{classProps:r}=C.useTabsStyleProps(),{styleProps:o,props:y}=b.useStyleProps(u),d=q.mergeStyleProps(t,{classProps:r.link}),k=f.useLinkClick({...e,routerOptions:m});return n.jsx("li",{...o,...y,className:S(r.item,o.className),role:"presentation",children:n.jsx(t,{...e,...d,href:P,onClick:k,ref:l,children:p})})},s=T.forwardRef(g);s.spiritComponent="TabLink";s.displayName="TabLink";exports.default=s;
 //# sourceMappingURL=TabLink.cjs.map

package/dist/components/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","sources":["../../../src/components/Tabs/TabLink.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ElementType, forwardRef } from 'react';\nimport { useStyleProps } from '../../hooks';\nimport {\n  type PolymorphicComponent,\n  type PolymorphicRef,\n  type SpiritTabLinkProps,\n  type TabLinkProps,\n} from '../../types';\nimport { mergeStyleProps } from '../../utils';\nimport { useTabsStyleProps } from './useTabsStyleProps';\n\nconst defaultProps: TabLinkProps = {\n  itemProps: {},\n};\n\nconst _TabLink = <E extends ElementType = 'a'>(props: SpiritTabLinkProps<E>, ref: PolymorphicRef<E>): JSX.Element => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const { elementType = 'a', children, itemProps = {}, ...restProps } = propsWithDefaults;\n\n  const Component = elementType as ElementType;\n\n  const { classProps } = useTabsStyleProps();\n  const { styleProps: itemStyleProps, props: itemTransferProps } = useStyleProps(itemProps);\n  const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link });\n\n  return (\n    <li\n      {...itemStyleProps}\n      {...itemTransferProps}\n      className={classNames(classProps.item, itemStyleProps.className)}\n      role=\"presentation\"\n    >\n      <Component {...restProps} {...mergedStyleProps} ref={ref}>\n        {children}\n      </Component>\n    </li>\n  );\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, SpiritTabLinkProps<'a'>>(_TabLink) as unknown as PolymorphicComponent<\n  'a',\n  TabLinkProps\n>;\n\nTabLink.spiritComponent = 'TabLink';\nTabLink.displayName = 'TabLink';\n\nexport default TabLink;\n"],"names":["defaultProps","_TabLink","props","ref","propsWithDefaults","elementType","children","itemProps","restProps","Component","classProps","useTabsStyleProps","itemStyleProps","itemTransferProps","useStyleProps","mergedStyleProps","mergeStyleProps","jsx","classNames","TabLink","forwardRef"],"mappings":"mUAcMA,EAA6B,CACjC,UAAW,CAAA,CACb,EAEMC,EAAW,CAA8BC,EAA8BC,IAAwC,CACnH,MAAMC,EAAoB,CAAE,GAAGJ,EAAc,GAAGE,CAAA,EAC1C,CAAE,YAAAG,EAAc,IAAK,SAAAC,EAAU,UAAAC,EAAY,GAAI,GAAGC,CAAA,EAAcJ,EAEhEK,EAAYJ,EAEZ,CAAE,WAAAK,CAAA,EAAeC,oBAAA,EACjB,CAAE,WAAYC,EAAgB,MAAOC,CAAA,EAAsBC,EAAAA,cAAcP,CAAS,EAClFQ,EAAmBC,EAAAA,gBAAgBP,EAAW,CAAE,WAAYC,EAAW,KAAM,EAEnF,OACEO,EAAAA,IAAC,KAAA,CACE,GAAGL,EACH,GAAGC,EACJ,UAAWK,EAAWR,EAAW,KAAME,EAAe,SAAS,EAC/D,KAAK,eAEL,eAACH,EAAA,CAAW,GAAGD,EAAY,GAAGO,EAAkB,IAAAZ,EAC7C,SAAAG,CAAA,CACH,CAAA,CAAA,CAGN,EAEMa,EAAUC,EAAAA,WAAuDnB,CAAQ,EAK/EkB,EAAQ,gBAAkB,UAC1BA,EAAQ,YAAc"}
+{"version":3,"file":"TabLink.cjs","sources":["../../../src/components/Tabs/TabLink.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ElementType, forwardRef } from 'react';\nimport { useLinkClick, useStyleProps } from '../../hooks';\nimport {\n  type PolymorphicComponent,\n  type PolymorphicRef,\n  type SpiritTabLinkProps,\n  type TabLinkProps,\n} from '../../types';\nimport { mergeStyleProps } from '../../utils';\nimport { useTabsStyleProps } from './useTabsStyleProps';\n\nconst defaultProps: TabLinkProps = {\n  itemProps: {},\n};\n\nconst _TabLink = <E extends ElementType = 'a'>(props: SpiritTabLinkProps<E>, ref: PolymorphicRef<E>): JSX.Element => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const { elementType = 'a', children, itemProps = {}, routerOptions, ...restProps } = propsWithDefaults;\n  const { href } = restProps;\n\n  const Component = elementType as ElementType;\n\n  const { classProps } = useTabsStyleProps();\n  const { styleProps: itemStyleProps, props: itemTransferProps } = useStyleProps(itemProps);\n  const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link });\n\n  const handleClick = useLinkClick({ ...restProps, routerOptions });\n\n  return (\n    <li\n      {...itemStyleProps}\n      {...itemTransferProps}\n      className={classNames(classProps.item, itemStyleProps.className)}\n      role=\"presentation\"\n    >\n      <Component {...restProps} {...mergedStyleProps} href={href} onClick={handleClick} ref={ref}>\n        {children}\n      </Component>\n    </li>\n  );\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, SpiritTabLinkProps<'a'>>(_TabLink) as unknown as PolymorphicComponent<\n  'a',\n  TabLinkProps\n>;\n\nTabLink.spiritComponent = 'TabLink';\nTabLink.displayName = 'TabLink';\n\nexport default TabLink;\n"],"names":["defaultProps","_TabLink","props","ref","propsWithDefaults","elementType","children","itemProps","routerOptions","restProps","href","Component","classProps","useTabsStyleProps","itemStyleProps","itemTransferProps","useStyleProps","mergedStyleProps","mergeStyleProps","handleClick","useLinkClick","jsx","classNames","TabLink","forwardRef"],"mappings":"6WAcMA,EAA6B,CACjC,UAAW,CAAA,CACb,EAEMC,EAAW,CAA8BC,EAA8BC,IAAwC,CACnH,MAAMC,EAAoB,CAAE,GAAGJ,EAAc,GAAGE,CAAA,EAC1C,CAAE,YAAAG,EAAc,IAAK,SAAAC,EAAU,UAAAC,EAAY,CAAA,EAAI,cAAAC,EAAe,GAAGC,CAAA,EAAcL,EAC/E,CAAE,KAAAM,GAASD,EAEXE,EAAYN,EAEZ,CAAE,WAAAO,CAAA,EAAeC,oBAAA,EACjB,CAAE,WAAYC,EAAgB,MAAOC,CAAA,EAAsBC,EAAAA,cAAcT,CAAS,EAClFU,EAAmBC,EAAAA,gBAAgBP,EAAW,CAAE,WAAYC,EAAW,KAAM,EAE7EO,EAAcC,EAAAA,aAAa,CAAE,GAAGX,EAAW,cAAAD,EAAe,EAEhE,OACEa,EAAAA,IAAC,KAAA,CACE,GAAGP,EACH,GAAGC,EACJ,UAAWO,EAAWV,EAAW,KAAME,EAAe,SAAS,EAC/D,KAAK,eAEL,SAAAO,EAAAA,IAACV,EAAA,CAAW,GAAGF,EAAY,GAAGQ,EAAkB,KAAAP,EAAY,QAASS,EAAa,IAAAhB,EAC/E,SAAAG,CAAA,CACH,CAAA,CAAA,CAGN,EAEMiB,EAAUC,EAAAA,WAAuDvB,CAAQ,EAK/EsB,EAAQ,gBAAkB,UAC1BA,EAAQ,YAAc"}

package/dist/components/Tabs/TabLink.js

@@ -1,28 +1,29 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import u from "classnames";
-import { forwardRef as y } from "react";
-import { useStyleProps as d } from "../../hooks/styleProps.js";
-import { mergeStyleProps as T } from "../../utils/mergeStyleProps.js";
-import { useTabsStyleProps as b } from "./useTabsStyleProps.js";
-const k = {
+import { jsx as t } from "react/jsx-runtime";
+import y from "classnames";
+import { forwardRef as T } from "react";
+import { useStyleProps as b } from "../../hooks/styleProps.js";
+import { useLinkClick as h } from "../../hooks/useLinkClick.js";
+import { mergeStyleProps as C } from "../../utils/mergeStyleProps.js";
+import { useTabsStyleProps as L } from "./useTabsStyleProps.js";
+const S = {
   itemProps: {}
-}, S = (p, i) => {
-  const m = { ...k, ...p }, { elementType: n = "a", children: a, itemProps: l = {}, ...c } = m, s = n, { classProps: o } = b(), { styleProps: e, props: P } = d(l), f = T(s, { classProps: o.link });
-  return /* @__PURE__ */ r(
+}, N = (n, p) => {
+  const m = { ...S, ...n }, { elementType: l = "a", children: a, itemProps: c = {}, routerOptions: f, ...s } = m, { href: P } = s, o = l, { classProps: r } = L(), { styleProps: e, props: u } = b(c), k = C(o, { classProps: r.link }), d = h({ ...s, routerOptions: f });
+  return /* @__PURE__ */ t(
     "li",
     {
       ...e,
-      ...P,
-      className: u(o.item, e.className),
+      ...u,
+      className: y(r.item, e.className),
       role: "presentation",
-      children: /* @__PURE__ */ r(s, { ...c, ...f, ref: i, children: a })
+      children: /* @__PURE__ */ t(o, { ...s, ...k, href: P, onClick: d, ref: p, children: a })
     }
   );
-}, t = y(S);
-t.spiritComponent = "TabLink";
-t.displayName = "TabLink";
+}, i = T(N);
+i.spiritComponent = "TabLink";
+i.displayName = "TabLink";
 export {
-  t as default
+  i as default
 };
 //# sourceMappingURL=TabLink.js.map

package/dist/components/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","sources":["../../../src/components/Tabs/TabLink.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ElementType, forwardRef } from 'react';\nimport { useStyleProps } from '../../hooks';\nimport {\n  type PolymorphicComponent,\n  type PolymorphicRef,\n  type SpiritTabLinkProps,\n  type TabLinkProps,\n} from '../../types';\nimport { mergeStyleProps } from '../../utils';\nimport { useTabsStyleProps } from './useTabsStyleProps';\n\nconst defaultProps: TabLinkProps = {\n  itemProps: {},\n};\n\nconst _TabLink = <E extends ElementType = 'a'>(props: SpiritTabLinkProps<E>, ref: PolymorphicRef<E>): JSX.Element => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const { elementType = 'a', children, itemProps = {}, ...restProps } = propsWithDefaults;\n\n  const Component = elementType as ElementType;\n\n  const { classProps } = useTabsStyleProps();\n  const { styleProps: itemStyleProps, props: itemTransferProps } = useStyleProps(itemProps);\n  const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link });\n\n  return (\n    <li\n      {...itemStyleProps}\n      {...itemTransferProps}\n      className={classNames(classProps.item, itemStyleProps.className)}\n      role=\"presentation\"\n    >\n      <Component {...restProps} {...mergedStyleProps} ref={ref}>\n        {children}\n      </Component>\n    </li>\n  );\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, SpiritTabLinkProps<'a'>>(_TabLink) as unknown as PolymorphicComponent<\n  'a',\n  TabLinkProps\n>;\n\nTabLink.spiritComponent = 'TabLink';\nTabLink.displayName = 'TabLink';\n\nexport default TabLink;\n"],"names":["defaultProps","_TabLink","props","ref","propsWithDefaults","elementType","children","itemProps","restProps","Component","classProps","useTabsStyleProps","itemStyleProps","itemTransferProps","useStyleProps","mergedStyleProps","mergeStyleProps","jsx","classNames","TabLink","forwardRef"],"mappings":";;;;;;;AAcA,MAAMA,IAA6B;AAAA,EACjC,WAAW,CAAA;AACb,GAEMC,IAAW,CAA8BC,GAA8BC,MAAwC;AACnH,QAAMC,IAAoB,EAAE,GAAGJ,GAAc,GAAGE,EAAA,GAC1C,EAAE,aAAAG,IAAc,KAAK,UAAAC,GAAU,WAAAC,IAAY,IAAI,GAAGC,EAAA,IAAcJ,GAEhEK,IAAYJ,GAEZ,EAAE,YAAAK,EAAA,IAAeC,EAAA,GACjB,EAAE,YAAYC,GAAgB,OAAOC,EAAA,IAAsBC,EAAcP,CAAS,GAClFQ,IAAmBC,EAAgBP,GAAW,EAAE,YAAYC,EAAW,MAAM;AAEnF,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACH,GAAGC;AAAA,MACJ,WAAWK,EAAWR,EAAW,MAAME,EAAe,SAAS;AAAA,MAC/D,MAAK;AAAA,MAEL,4BAACH,GAAA,EAAW,GAAGD,GAAY,GAAGO,GAAkB,KAAAZ,GAC7C,UAAAG,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMa,IAAUC,EAAuDnB,CAAQ;AAK/EkB,EAAQ,kBAAkB;AAC1BA,EAAQ,cAAc;"}
+{"version":3,"file":"TabLink.js","sources":["../../../src/components/Tabs/TabLink.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ElementType, forwardRef } from 'react';\nimport { useLinkClick, useStyleProps } from '../../hooks';\nimport {\n  type PolymorphicComponent,\n  type PolymorphicRef,\n  type SpiritTabLinkProps,\n  type TabLinkProps,\n} from '../../types';\nimport { mergeStyleProps } from '../../utils';\nimport { useTabsStyleProps } from './useTabsStyleProps';\n\nconst defaultProps: TabLinkProps = {\n  itemProps: {},\n};\n\nconst _TabLink = <E extends ElementType = 'a'>(props: SpiritTabLinkProps<E>, ref: PolymorphicRef<E>): JSX.Element => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const { elementType = 'a', children, itemProps = {}, routerOptions, ...restProps } = propsWithDefaults;\n  const { href } = restProps;\n\n  const Component = elementType as ElementType;\n\n  const { classProps } = useTabsStyleProps();\n  const { styleProps: itemStyleProps, props: itemTransferProps } = useStyleProps(itemProps);\n  const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link });\n\n  const handleClick = useLinkClick({ ...restProps, routerOptions });\n\n  return (\n    <li\n      {...itemStyleProps}\n      {...itemTransferProps}\n      className={classNames(classProps.item, itemStyleProps.className)}\n      role=\"presentation\"\n    >\n      <Component {...restProps} {...mergedStyleProps} href={href} onClick={handleClick} ref={ref}>\n        {children}\n      </Component>\n    </li>\n  );\n};\n\nconst TabLink = forwardRef<HTMLAnchorElement, SpiritTabLinkProps<'a'>>(_TabLink) as unknown as PolymorphicComponent<\n  'a',\n  TabLinkProps\n>;\n\nTabLink.spiritComponent = 'TabLink';\nTabLink.displayName = 'TabLink';\n\nexport default TabLink;\n"],"names":["defaultProps","_TabLink","props","ref","propsWithDefaults","elementType","children","itemProps","routerOptions","restProps","href","Component","classProps","useTabsStyleProps","itemStyleProps","itemTransferProps","useStyleProps","mergedStyleProps","mergeStyleProps","handleClick","useLinkClick","jsx","classNames","TabLink","forwardRef"],"mappings":";;;;;;;;AAcA,MAAMA,IAA6B;AAAA,EACjC,WAAW,CAAA;AACb,GAEMC,IAAW,CAA8BC,GAA8BC,MAAwC;AACnH,QAAMC,IAAoB,EAAE,GAAGJ,GAAc,GAAGE,EAAA,GAC1C,EAAE,aAAAG,IAAc,KAAK,UAAAC,GAAU,WAAAC,IAAY,CAAA,GAAI,eAAAC,GAAe,GAAGC,EAAA,IAAcL,GAC/E,EAAE,MAAAM,MAASD,GAEXE,IAAYN,GAEZ,EAAE,YAAAO,EAAA,IAAeC,EAAA,GACjB,EAAE,YAAYC,GAAgB,OAAOC,EAAA,IAAsBC,EAAcT,CAAS,GAClFU,IAAmBC,EAAgBP,GAAW,EAAE,YAAYC,EAAW,MAAM,GAE7EO,IAAcC,EAAa,EAAE,GAAGX,GAAW,eAAAD,GAAe;AAEhE,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGP;AAAA,MACH,GAAGC;AAAA,MACJ,WAAWO,EAAWV,EAAW,MAAME,EAAe,SAAS;AAAA,MAC/D,MAAK;AAAA,MAEL,UAAA,gBAAAO,EAACV,GAAA,EAAW,GAAGF,GAAY,GAAGQ,GAAkB,MAAAP,GAAY,SAASS,GAAa,KAAAhB,GAC/E,UAAAG,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMiB,IAAUC,EAAuDvB,CAAQ;AAK/EsB,EAAQ,kBAAkB;AAC1BA,EAAQ,cAAc;"}

package/dist/components/Tag/constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={NEUTRAL:"neutral"};exports.TagColorsExtended=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={NEUTRAL:"neutral",SELECTED:"selected"};exports.TagColorsExtended=e;
 //# sourceMappingURL=constants.cjs.map

package/dist/components/Tag/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/Tag/constants.ts"],"sourcesContent":["export const TagColorsExtended = {\n  NEUTRAL: 'neutral',\n} as const;\n"],"names":["TagColorsExtended"],"mappings":"gFAAO,MAAMA,EAAoB,CAC/B,QAAS,SACX"}
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/Tag/constants.ts"],"sourcesContent":["export const TagColorsExtended = {\n  NEUTRAL: 'neutral',\n  SELECTED: 'selected',\n} as const;\n"],"names":["TagColorsExtended"],"mappings":"gFAAO,MAAMA,EAAoB,CAC/B,QAAS,UACT,SAAU,UACZ"}

package/dist/components/Tag/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const TagColorsExtended: {
     readonly NEUTRAL: "neutral";
+    readonly SELECTED: "selected";
 };

package/dist/components/Tag/constants.js

@@ -1,7 +1,8 @@
-const t = {
-  NEUTRAL: "neutral"
+const e = {
+  NEUTRAL: "neutral",
+  SELECTED: "selected"
 };
 export {
-  t as TagColorsExtended
+  e as TagColorsExtended
 };
 //# sourceMappingURL=constants.js.map

package/dist/components/Tag/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/Tag/constants.ts"],"sourcesContent":["export const TagColorsExtended = {\n  NEUTRAL: 'neutral',\n} as const;\n"],"names":["TagColorsExtended"],"mappings":"AAAO,MAAMA,IAAoB;AAAA,EAC/B,SAAS;AACX;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/Tag/constants.ts"],"sourcesContent":["export const TagColorsExtended = {\n  NEUTRAL: 'neutral',\n  SELECTED: 'selected',\n} as const;\n"],"names":["TagColorsExtended"],"mappings":"AAAO,MAAMA,IAAoB;AAAA,EAC/B,SAAS;AAAA,EACT,UAAU;AACZ;"}

package/dist/components/Tag/useTagStyleProps.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("classnames"),n=require("../../hooks/useClassNamePrefix.cjs");function g(t){const{color:e,isSubtle:a,size:o,...r}=t,s=n.useClassNamePrefix("Tag"),l=`${s}--${e}`,c=`${s}--${o}`,u=`${s}--subtle`;return{classProps:i(s,{[l]:e,[c]:o,[u]:a}),props:r}}exports.useTagStyleProps=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("@alma-oss/spirit-design-tokens"),g=require("classnames"),y=require("../../constants/colors.cjs"),o=require("../../constants/dictionaries.cjs"),T=require("../../hooks/useClassNamePrefix.cjs"),d=(s,e)=>{if(!s)return{};const n=Object.keys($.emotionColors).includes(s)?`${y.ColorPrefixes.EMOTION}-`:"",r=e?o.Intensity.SUBTLE:o.Intensity.BASIC,a=e?o.Intensity.SUBTLE:o.Intensity.BASIC,t=e?o.Intensity.BASIC:o.Intensity.SUBTLE;return{[`border-${n}${s}-${r}`]:!0,[`bg-${n}${s}-${a}`]:!0,[`text-${n}${s}-${t}`]:!0}};function I(s){const{color:e,isDisabled:i,isSubtle:n,size:r,...a}=s,t=T.useClassNamePrefix("Tag"),c=`${t}--${e}`,l=`${t}--disabled`,u=`${t}--${r}`,C=`${t}--subtle`;return{classProps:g(t,{[c]:e,[l]:i,[u]:r,[C]:n,...!i&&d(e,n)}),props:a}}exports.useTagStyleProps=I;
 //# sourceMappingURL=useTagStyleProps.cjs.map

package/dist/components/Tag/useTagStyleProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTagStyleProps.cjs","sources":["../../../src/components/Tag/useTagStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { type ElementType } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTagProps } from '../../types';\n\nexport interface TagStyles {\n  /** className props */\n  classProps: string;\n  /** props to be passed to the element */\n  props: Partial<SpiritTagProps>;\n}\n\nexport function useTagStyleProps<E extends ElementType = 'span', C = void, S = void>(\n  props: SpiritTagProps<E, C, S>,\n): TagStyles {\n  const { color, isSubtle, size, ...modifiedProps } = props;\n\n  const TagClass = useClassNamePrefix('Tag');\n  const TagColorClass = `${TagClass}--${color}`;\n  const TagSizeClass = `${TagClass}--${size}`;\n  const TagSubtleClass = `${TagClass}--subtle`;\n  const classProps = classNames(TagClass, {\n    [TagColorClass]: color,\n    [TagSizeClass]: size,\n    [TagSubtleClass]: isSubtle,\n  });\n\n  return {\n    classProps,\n    props: modifiedProps as Partial<SpiritTagProps>,\n  };\n}\n"],"names":["useTagStyleProps","props","color","isSubtle","size","modifiedProps","TagClass","useClassNamePrefix","TagColorClass","TagSizeClass","TagSubtleClass","classNames"],"mappings":"8JAYO,SAASA,EACdC,EACW,CACX,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,GAAGC,GAAkBJ,EAE9CK,EAAWC,EAAAA,mBAAmB,KAAK,EACnCC,EAAgB,GAAGF,CAAQ,KAAKJ,CAAK,GACrCO,EAAe,GAAGH,CAAQ,KAAKF,CAAI,GACnCM,EAAiB,GAAGJ,CAAQ,WAOlC,MAAO,CACL,WAPiBK,EAAWL,EAAU,CACtC,CAACE,CAAa,EAAGN,EACjB,CAACO,CAAY,EAAGL,EAChB,CAACM,CAAc,EAAGP,CAAA,CACnB,EAIC,MAAOE,CAAA,CAEX"}
+{"version":3,"file":"useTagStyleProps.cjs","sources":["../../../src/components/Tag/useTagStyleProps.ts"],"sourcesContent":["import { emotionColors } from '@alma-oss/spirit-design-tokens';\nimport classNames from 'classnames';\nimport { type ElementType } from 'react';\nimport { Intensity } from '../../constants';\nimport { ColorPrefixes } from '../../constants/colors';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTagProps } from '../../types';\n\nexport interface TagStyles {\n  /** className props */\n  classProps: string;\n  /** props to be passed to the element */\n  props: Partial<SpiritTagProps>;\n}\n\nconst getColorClasses = (color: string | undefined, isSubtle: boolean | undefined) => {\n  if (!color) {\n    return {};\n  }\n\n  const isEmotionColor = Object.keys(emotionColors).includes(color);\n  const prefix = isEmotionColor ? `${ColorPrefixes.EMOTION}-` : '';\n  const borderIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;\n  const backgroundIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;\n  const textIntensity = isSubtle ? Intensity.BASIC : Intensity.SUBTLE;\n\n  return {\n    [`border-${prefix}${color}-${borderIntensity}`]: true,\n    [`bg-${prefix}${color}-${backgroundIntensity}`]: true,\n    [`text-${prefix}${color}-${textIntensity}`]: true,\n  };\n};\n\nexport function useTagStyleProps<E extends ElementType = 'span', C = void, S = void>(\n  props: SpiritTagProps<E, C, S>,\n): TagStyles {\n  const { color, isDisabled, isSubtle, size, ...modifiedProps } = props;\n\n  const TagClass = useClassNamePrefix('Tag');\n  const TagColorClass = `${TagClass}--${color}`;\n  const TagDisabledClass = `${TagClass}--disabled`;\n  const TagSizeClass = `${TagClass}--${size}`;\n  const TagSubtleClass = `${TagClass}--subtle`;\n  const classProps = classNames(TagClass, {\n    [TagColorClass]: color,\n    [TagDisabledClass]: isDisabled,\n    [TagSizeClass]: size,\n    [TagSubtleClass]: isSubtle,\n    ...(!isDisabled && getColorClasses(color as string | undefined, isSubtle as boolean | undefined)),\n  });\n\n  return {\n    classProps,\n    props: modifiedProps as Partial<SpiritTagProps>,\n  };\n}\n"],"names":["getColorClasses","color","isSubtle","prefix","emotionColors","ColorPrefixes","borderIntensity","Intensity","backgroundIntensity","textIntensity","useTagStyleProps","props","isDisabled","size","modifiedProps","TagClass","useClassNamePrefix","TagColorClass","TagDisabledClass","TagSizeClass","TagSubtleClass","classNames"],"mappings":"gSAeMA,EAAkB,CAACC,EAA2BC,IAAkC,CACpF,GAAI,CAACD,EACH,MAAO,CAAA,EAIT,MAAME,EADiB,OAAO,KAAKC,EAAAA,aAAa,EAAE,SAASH,CAAK,EAChC,GAAGI,EAAAA,cAAc,OAAO,IAAM,GACxDC,EAAkBJ,EAAWK,EAAAA,UAAU,OAASA,EAAAA,UAAU,MAC1DC,EAAsBN,EAAWK,EAAAA,UAAU,OAASA,EAAAA,UAAU,MAC9DE,EAAgBP,EAAWK,EAAAA,UAAU,MAAQA,EAAAA,UAAU,OAE7D,MAAO,CACL,CAAC,UAAUJ,CAAM,GAAGF,CAAK,IAAIK,CAAe,EAAE,EAAG,GACjD,CAAC,MAAMH,CAAM,GAAGF,CAAK,IAAIO,CAAmB,EAAE,EAAG,GACjD,CAAC,QAAQL,CAAM,GAAGF,CAAK,IAAIQ,CAAa,EAAE,EAAG,EAAA,CAEjD,EAEO,SAASC,EACdC,EACW,CACX,KAAM,CAAE,MAAAV,EAAO,WAAAW,EAAY,SAAAV,EAAU,KAAAW,EAAM,GAAGC,GAAkBH,EAE1DI,EAAWC,EAAAA,mBAAmB,KAAK,EACnCC,EAAgB,GAAGF,CAAQ,KAAKd,CAAK,GACrCiB,EAAmB,GAAGH,CAAQ,aAC9BI,EAAe,GAAGJ,CAAQ,KAAKF,CAAI,GACnCO,EAAiB,GAAGL,CAAQ,WASlC,MAAO,CACL,WATiBM,EAAWN,EAAU,CACtC,CAACE,CAAa,EAAGhB,EACjB,CAACiB,CAAgB,EAAGN,EACpB,CAACO,CAAY,EAAGN,EAChB,CAACO,CAAc,EAAGlB,EAClB,GAAI,CAACU,GAAcZ,EAAgBC,EAA6BC,CAA+B,CAAA,CAChG,EAIC,MAAOY,CAAA,CAEX"}

package/dist/components/Tag/useTagStyleProps.js

@@ -1,17 +1,32 @@
-import n from "classnames";
-import { useClassNamePrefix as p } from "../../hooks/useClassNamePrefix.js";
-function C(a) {
-  const { color: o, isSubtle: r, size: t, ...e } = a, s = p("Tag"), l = `${s}--${o}`, c = `${s}--${t}`, i = `${s}--subtle`;
+import { emotionColors as $ } from "@alma-oss/spirit-design-tokens";
+import p from "classnames";
+import { ColorPrefixes as u } from "../../constants/colors.js";
+import { Intensity as r } from "../../constants/dictionaries.js";
+import { useClassNamePrefix as f } from "../../hooks/useClassNamePrefix.js";
+const T = (s, t) => {
+  if (!s)
+    return {};
+  const e = Object.keys($).includes(s) ? `${u.EMOTION}-` : "", n = t ? r.SUBTLE : r.BASIC, a = t ? r.SUBTLE : r.BASIC, o = t ? r.BASIC : r.SUBTLE;
   return {
-    classProps: n(s, {
-      [l]: o,
-      [c]: t,
-      [i]: r
+    [`border-${e}${s}-${n}`]: !0,
+    [`bg-${e}${s}-${a}`]: !0,
+    [`text-${e}${s}-${o}`]: !0
+  };
+};
+function y(s) {
+  const { color: t, isDisabled: i, isSubtle: e, size: n, ...a } = s, o = f("Tag"), l = `${o}--${t}`, c = `${o}--disabled`, m = `${o}--${n}`, C = `${o}--subtle`;
+  return {
+    classProps: p(o, {
+      [l]: t,
+      [c]: i,
+      [m]: n,
+      [C]: e,
+      ...!i && T(t, e)
     }),
-    props: e
+    props: a
   };
 }
 export {
-  C as useTagStyleProps
+  y as useTagStyleProps
 };
 //# sourceMappingURL=useTagStyleProps.js.map

package/dist/components/Tag/useTagStyleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTagStyleProps.js","sources":["../../../src/components/Tag/useTagStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { type ElementType } from 'react';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTagProps } from '../../types';\n\nexport interface TagStyles {\n  /** className props */\n  classProps: string;\n  /** props to be passed to the element */\n  props: Partial<SpiritTagProps>;\n}\n\nexport function useTagStyleProps<E extends ElementType = 'span', C = void, S = void>(\n  props: SpiritTagProps<E, C, S>,\n): TagStyles {\n  const { color, isSubtle, size, ...modifiedProps } = props;\n\n  const TagClass = useClassNamePrefix('Tag');\n  const TagColorClass = `${TagClass}--${color}`;\n  const TagSizeClass = `${TagClass}--${size}`;\n  const TagSubtleClass = `${TagClass}--subtle`;\n  const classProps = classNames(TagClass, {\n    [TagColorClass]: color,\n    [TagSizeClass]: size,\n    [TagSubtleClass]: isSubtle,\n  });\n\n  return {\n    classProps,\n    props: modifiedProps as Partial<SpiritTagProps>,\n  };\n}\n"],"names":["useTagStyleProps","props","color","isSubtle","size","modifiedProps","TagClass","useClassNamePrefix","TagColorClass","TagSizeClass","TagSubtleClass","classNames"],"mappings":";;AAYO,SAASA,EACdC,GACW;AACX,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAAkBJ,GAE9CK,IAAWC,EAAmB,KAAK,GACnCC,IAAgB,GAAGF,CAAQ,KAAKJ,CAAK,IACrCO,IAAe,GAAGH,CAAQ,KAAKF,CAAI,IACnCM,IAAiB,GAAGJ,CAAQ;AAOlC,SAAO;AAAA,IACL,YAPiBK,EAAWL,GAAU;AAAA,MACtC,CAACE,CAAa,GAAGN;AAAA,MACjB,CAACO,CAAY,GAAGL;AAAA,MAChB,CAACM,CAAc,GAAGP;AAAA,IAAA,CACnB;AAAA,IAIC,OAAOE;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useTagStyleProps.js","sources":["../../../src/components/Tag/useTagStyleProps.ts"],"sourcesContent":["import { emotionColors } from '@alma-oss/spirit-design-tokens';\nimport classNames from 'classnames';\nimport { type ElementType } from 'react';\nimport { Intensity } from '../../constants';\nimport { ColorPrefixes } from '../../constants/colors';\nimport { useClassNamePrefix } from '../../hooks';\nimport { type SpiritTagProps } from '../../types';\n\nexport interface TagStyles {\n  /** className props */\n  classProps: string;\n  /** props to be passed to the element */\n  props: Partial<SpiritTagProps>;\n}\n\nconst getColorClasses = (color: string | undefined, isSubtle: boolean | undefined) => {\n  if (!color) {\n    return {};\n  }\n\n  const isEmotionColor = Object.keys(emotionColors).includes(color);\n  const prefix = isEmotionColor ? `${ColorPrefixes.EMOTION}-` : '';\n  const borderIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;\n  const backgroundIntensity = isSubtle ? Intensity.SUBTLE : Intensity.BASIC;\n  const textIntensity = isSubtle ? Intensity.BASIC : Intensity.SUBTLE;\n\n  return {\n    [`border-${prefix}${color}-${borderIntensity}`]: true,\n    [`bg-${prefix}${color}-${backgroundIntensity}`]: true,\n    [`text-${prefix}${color}-${textIntensity}`]: true,\n  };\n};\n\nexport function useTagStyleProps<E extends ElementType = 'span', C = void, S = void>(\n  props: SpiritTagProps<E, C, S>,\n): TagStyles {\n  const { color, isDisabled, isSubtle, size, ...modifiedProps } = props;\n\n  const TagClass = useClassNamePrefix('Tag');\n  const TagColorClass = `${TagClass}--${color}`;\n  const TagDisabledClass = `${TagClass}--disabled`;\n  const TagSizeClass = `${TagClass}--${size}`;\n  const TagSubtleClass = `${TagClass}--subtle`;\n  const classProps = classNames(TagClass, {\n    [TagColorClass]: color,\n    [TagDisabledClass]: isDisabled,\n    [TagSizeClass]: size,\n    [TagSubtleClass]: isSubtle,\n    ...(!isDisabled && getColorClasses(color as string | undefined, isSubtle as boolean | undefined)),\n  });\n\n  return {\n    classProps,\n    props: modifiedProps as Partial<SpiritTagProps>,\n  };\n}\n"],"names":["getColorClasses","color","isSubtle","prefix","emotionColors","ColorPrefixes","borderIntensity","Intensity","backgroundIntensity","textIntensity","useTagStyleProps","props","isDisabled","size","modifiedProps","TagClass","useClassNamePrefix","TagColorClass","TagDisabledClass","TagSizeClass","TagSubtleClass","classNames"],"mappings":";;;;;AAeA,MAAMA,IAAkB,CAACC,GAA2BC,MAAkC;AACpF,MAAI,CAACD;AACH,WAAO,CAAA;AAIT,QAAME,IADiB,OAAO,KAAKC,CAAa,EAAE,SAASH,CAAK,IAChC,GAAGI,EAAc,OAAO,MAAM,IACxDC,IAAkBJ,IAAWK,EAAU,SAASA,EAAU,OAC1DC,IAAsBN,IAAWK,EAAU,SAASA,EAAU,OAC9DE,IAAgBP,IAAWK,EAAU,QAAQA,EAAU;AAE7D,SAAO;AAAA,IACL,CAAC,UAAUJ,CAAM,GAAGF,CAAK,IAAIK,CAAe,EAAE,GAAG;AAAA,IACjD,CAAC,MAAMH,CAAM,GAAGF,CAAK,IAAIO,CAAmB,EAAE,GAAG;AAAA,IACjD,CAAC,QAAQL,CAAM,GAAGF,CAAK,IAAIQ,CAAa,EAAE,GAAG;AAAA,EAAA;AAEjD;AAEO,SAASC,EACdC,GACW;AACX,QAAM,EAAE,OAAAV,GAAO,YAAAW,GAAY,UAAAV,GAAU,MAAAW,GAAM,GAAGC,MAAkBH,GAE1DI,IAAWC,EAAmB,KAAK,GACnCC,IAAgB,GAAGF,CAAQ,KAAKd,CAAK,IACrCiB,IAAmB,GAAGH,CAAQ,cAC9BI,IAAe,GAAGJ,CAAQ,KAAKF,CAAI,IACnCO,IAAiB,GAAGL,CAAQ;AASlC,SAAO;AAAA,IACL,YATiBM,EAAWN,GAAU;AAAA,MACtC,CAACE,CAAa,GAAGhB;AAAA,MACjB,CAACiB,CAAgB,GAAGN;AAAA,MACpB,CAACO,CAAY,GAAGN;AAAA,MAChB,CAACO,CAAc,GAAGlB;AAAA,MAClB,GAAI,CAACU,KAAcZ,EAAgBC,GAA6BC,CAA+B;AAAA,IAAA,CAChG;AAAA,IAIC,OAAOY;AAAA,EAAA;AAEX;"}

package/dist/components/TextArea/TextArea.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("react"),g=require("../TextFieldBase/TextFieldBase.cjs"),p=require("./useAdjustHeight.cjs"),x=(n,u)=>{const{onInput:r,isAutoResizing:i,autoResizingMaxHeight:o=400,...a}=n,t=s.useRef(u),{adjustHeightOnAutoresize:c,onInput:l}=p.useAdjustHeight({elementReference:t,onInput:r,isAutoResizing:i,maxHeight:o});return d.jsx(g.default,{isMultiline:!0,ref:t,onInput:l,onFocus:c,...a})},e=s.forwardRef(x);e.spiritComponent="TextArea";e.displayName="TextArea";exports.default=e;
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react/jsx-runtime"),r=require("react"),j=require("../../common/utilities/warning.cjs"),f=require("../../utils/string.cjs"),V=require("../CharacterCounter/useCharacterCounterState.cjs"),_=require("../TextFieldBase/TextFieldBase.cjs"),b=require("./constants.cjs"),E=require("./useAdjustHeight.cjs"),I=(e,a)=>e===!0||a!==void 0,w=e=>e===void 0?b.TEXTAREA_MAX_SAFE_LENGTH:e,F=(e,a)=>{const{onInput:x,isAutoResizing:m,autoResizingMaxHeight:v=400,counterThreshold:t,hasCounter:u,onChange:s,value:i,defaultValue:l,helperText:T,isDisabled:A,id:p,...n}=e,c=r.useRef(a),{adjustHeightOnAutoresize:C,onInput:L}=E.useAdjustHeight({elementReference:c,onInput:x,isAutoResizing:m,maxHeight:v}),R=f.normalizeStringValue(i),q=f.normalizeStringValue(l),{counterProps:H,handleChange:z}=V.useCharacterCounterState({value:R,defaultValue:q,counterThreshold:t,hasCounter:u,onChange:s}),d=I(u,t),h=d?w(n.maxLength):void 0,M=d?z:s,g=r.useRef(!1);return r.useEffect(()=>{t!==void 0&&n.maxLength!==void 0&&n.maxLength<t&&!g.current&&(g.current=!0,j.default(!1,"TextArea: `maxLength` should be greater than or equal to `counterThreshold` to keep visible counter and hard input limit aligned."))},[t,n.maxLength]),S.jsx(_.default,{id:p,isMultiline:!0,ref:c,onInput:L,onFocus:C,onChange:M,value:i,defaultValue:l,helperText:T,isDisabled:A,counterProps:H,...n,...h!==void 0&&{maxLength:h}})},o=r.forwardRef(F);o.spiritComponent="TextArea";o.displayName="TextArea";exports.default=o;
 //# sourceMappingURL=TextArea.cjs.map

package/dist/components/TextArea/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ForwardedRef, type RefObject, forwardRef, useRef } from 'react';\nimport { type ForwardRefComponent, type SpiritTextAreaProps } from '../../types';\nimport { TextFieldBase } from '../TextFieldBase';\nimport { useAdjustHeight } from './useAdjustHeight';\n\nconst _TextArea = (props: SpiritTextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>): JSX.Element => {\n  const { onInput, isAutoResizing, autoResizingMaxHeight = 400, ...restProps } = props;\n  const elementReference = useRef(ref);\n  const { adjustHeightOnAutoresize, onInput: onInputHandler } = useAdjustHeight({\n    elementReference,\n    onInput,\n    isAutoResizing,\n    maxHeight: autoResizingMaxHeight,\n  });\n\n  return (\n    <TextFieldBase\n      isMultiline\n      ref={elementReference as RefObject<HTMLTextAreaElement>}\n      onInput={onInputHandler}\n      onFocus={adjustHeightOnAutoresize}\n      {...restProps}\n    />\n  );\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, SpiritTextAreaProps>(_TextArea) as ForwardRefComponent<\n  HTMLTextAreaElement,\n  SpiritTextAreaProps\n>;\n\nTextArea.spiritComponent = 'TextArea';\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"names":["_TextArea","props","ref","onInput","isAutoResizing","autoResizingMaxHeight","restProps","elementReference","useRef","adjustHeightOnAutoresize","onInputHandler","useAdjustHeight","jsx","TextFieldBase","TextArea","forwardRef"],"mappings":"oQAOMA,EAAY,CAACC,EAA4BC,IAAwD,CACrG,KAAM,CAAE,QAAAC,EAAS,eAAAC,EAAgB,sBAAAC,EAAwB,IAAK,GAAGC,GAAcL,EACzEM,EAAmBC,EAAAA,OAAON,CAAG,EAC7B,CAAE,yBAAAO,EAA0B,QAASC,CAAA,EAAmBC,EAAAA,gBAAgB,CAC5E,iBAAAJ,EACA,QAAAJ,EACA,eAAAC,EACA,UAAWC,CAAA,CACZ,EAED,OACEO,EAAAA,IAACC,EAAAA,QAAA,CACC,YAAW,GACX,IAAKN,EACL,QAASG,EACT,QAASD,EACR,GAAGH,CAAA,CAAA,CAGV,EAEMQ,EAAWC,EAAAA,WAAqDf,CAAS,EAK/Ec,EAAS,gBAAkB,WAC3BA,EAAS,YAAc"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ForwardedRef, type RefObject, forwardRef, useEffect, useRef } from 'react';\nimport { warning } from '../../common/utilities';\nimport { type ForwardRefComponent, type SpiritTextAreaProps } from '../../types';\nimport { normalizeStringValue } from '../../utils';\nimport { useCharacterCounterState } from '../CharacterCounter';\nimport { TextFieldBase } from '../TextFieldBase';\nimport { TEXTAREA_MAX_SAFE_LENGTH } from './constants';\nimport { useAdjustHeight } from './useAdjustHeight';\n\nconst isCounterActive = (hasCounter: boolean | undefined, counterThreshold: number | undefined): boolean =>\n  hasCounter === true || counterThreshold !== undefined;\n\nconst resolveCounterNativeMaxLength = (consumerMaxLength: number | undefined): number =>\n  consumerMaxLength === undefined ? TEXTAREA_MAX_SAFE_LENGTH : consumerMaxLength;\n\nconst _TextArea = (props: SpiritTextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>): JSX.Element => {\n  const {\n    onInput,\n    isAutoResizing,\n    autoResizingMaxHeight = 400,\n    counterThreshold,\n    hasCounter,\n    onChange,\n    value,\n    defaultValue,\n    helperText,\n    isDisabled,\n    id,\n    ...restProps\n  } = props;\n\n  const elementReference = useRef(ref);\n  const { adjustHeightOnAutoresize, onInput: onInputHandler } = useAdjustHeight({\n    elementReference,\n    onInput,\n    isAutoResizing,\n    maxHeight: autoResizingMaxHeight,\n  });\n\n  const normalizedValue = normalizeStringValue(value);\n  const normalizedDefaultValue = normalizeStringValue(defaultValue);\n\n  const { counterProps, handleChange } = useCharacterCounterState({\n    value: normalizedValue,\n    defaultValue: normalizedDefaultValue,\n    counterThreshold,\n    hasCounter,\n    onChange,\n  });\n\n  const counterOn = isCounterActive(hasCounter, counterThreshold);\n  const nativeMaxLength = counterOn ? resolveCounterNativeMaxLength(restProps.maxLength) : undefined;\n  const changeHandler = counterOn ? handleChange : onChange;\n\n  const didWarnMaxLengthLowerThanThresholdRef = useRef(false);\n  useEffect(() => {\n    if (\n      counterThreshold !== undefined &&\n      restProps.maxLength !== undefined &&\n      restProps.maxLength < counterThreshold &&\n      !didWarnMaxLengthLowerThanThresholdRef.current\n    ) {\n      didWarnMaxLengthLowerThanThresholdRef.current = true;\n      warning(\n        false,\n        'TextArea: `maxLength` should be greater than or equal to `counterThreshold` to keep visible counter and hard input limit aligned.',\n      );\n    }\n  }, [counterThreshold, restProps.maxLength]);\n\n  return (\n    <TextFieldBase\n      id={id}\n      isMultiline\n      ref={elementReference as RefObject<HTMLTextAreaElement>}\n      onInput={onInputHandler}\n      onFocus={adjustHeightOnAutoresize}\n      onChange={changeHandler}\n      value={value}\n      defaultValue={defaultValue}\n      helperText={helperText}\n      isDisabled={isDisabled}\n      counterProps={counterProps}\n      {...restProps}\n      {...(nativeMaxLength !== undefined && { maxLength: nativeMaxLength })}\n    />\n  );\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, SpiritTextAreaProps>(_TextArea) as ForwardRefComponent<\n  HTMLTextAreaElement,\n  SpiritTextAreaProps\n>;\n\nTextArea.spiritComponent = 'TextArea';\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"names":["isCounterActive","hasCounter","counterThreshold","resolveCounterNativeMaxLength","consumerMaxLength","TEXTAREA_MAX_SAFE_LENGTH","_TextArea","props","ref","onInput","isAutoResizing","autoResizingMaxHeight","onChange","value","defaultValue","helperText","isDisabled","id","restProps","elementReference","useRef","adjustHeightOnAutoresize","onInputHandler","useAdjustHeight","normalizedValue","normalizeStringValue","normalizedDefaultValue","counterProps","handleChange","useCharacterCounterState","counterOn","nativeMaxLength","changeHandler","didWarnMaxLengthLowerThanThresholdRef","useEffect","warning","jsx","TextFieldBase","TextArea","forwardRef"],"mappings":"mbAWMA,EAAkB,CAACC,EAAiCC,IACxDD,IAAe,IAAQC,IAAqB,OAExCC,EAAiCC,GACrCA,IAAsB,OAAYC,EAAAA,yBAA2BD,EAEzDE,EAAY,CAACC,EAA4BC,IAAwD,CACrG,KAAM,CACJ,QAAAC,EACA,eAAAC,EACA,sBAAAC,EAAwB,IACxB,iBAAAT,EACA,WAAAD,EACA,SAAAW,EACA,MAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,GAAAC,EACA,GAAGC,CAAA,EACDX,EAEEY,EAAmBC,EAAAA,OAAOZ,CAAG,EAC7B,CAAE,yBAAAa,EAA0B,QAASC,CAAA,EAAmBC,EAAAA,gBAAgB,CAC5E,iBAAAJ,EACA,QAAAV,EACA,eAAAC,EACA,UAAWC,CAAA,CACZ,EAEKa,EAAkBC,EAAAA,qBAAqBZ,CAAK,EAC5Ca,EAAyBD,EAAAA,qBAAqBX,CAAY,EAE1D,CAAE,aAAAa,EAAc,aAAAC,CAAA,EAAiBC,2BAAyB,CAC9D,MAAOL,EACP,aAAcE,EACd,iBAAAxB,EACA,WAAAD,EACA,SAAAW,CAAA,CACD,EAEKkB,EAAY9B,EAAgBC,EAAYC,CAAgB,EACxD6B,EAAkBD,EAAY3B,EAA8Be,EAAU,SAAS,EAAI,OACnFc,EAAgBF,EAAYF,EAAehB,EAE3CqB,EAAwCb,EAAAA,OAAO,EAAK,EAC1Dc,OAAAA,EAAAA,UAAU,IAAM,CAEZhC,IAAqB,QACrBgB,EAAU,YAAc,QACxBA,EAAU,UAAYhB,GACtB,CAAC+B,EAAsC,UAEvCA,EAAsC,QAAU,GAChDE,EAAAA,QACE,GACA,mIAAA,EAGN,EAAG,CAACjC,EAAkBgB,EAAU,SAAS,CAAC,EAGxCkB,EAAAA,IAACC,EAAAA,QAAA,CACC,GAAApB,EACA,YAAW,GACX,IAAKE,EACL,QAASG,EACT,QAASD,EACT,SAAUW,EACV,MAAAnB,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,aAAAW,EACC,GAAGT,EACH,GAAIa,IAAoB,QAAa,CAAE,UAAWA,CAAA,CAAgB,CAAA,CAGzE,EAEMO,EAAWC,EAAAA,WAAqDjC,CAAS,EAK/EgC,EAAS,gBAAkB,WAC3BA,EAAS,YAAc"}

package/dist/components/TextArea/TextArea.js

@@ -1,29 +1,65 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as f, useRef as c } from "react";
-import x from "../TextFieldBase/TextFieldBase.js";
-import { useAdjustHeight as l } from "./useAdjustHeight.js";
-const d = (o, r) => {
-  const { onInput: n, isAutoResizing: s, autoResizingMaxHeight: i = 400, ...u } = o, e = c(r), { adjustHeightOnAutoresize: a, onInput: p } = l({
-    elementReference: e,
-    onInput: n,
-    isAutoResizing: s,
-    maxHeight: i
-  });
-  return /* @__PURE__ */ m(
-    x,
+import { jsx as V } from "react/jsx-runtime";
+import { forwardRef as I, useRef as m, useEffect as _ } from "react";
+import b from "../../common/utilities/warning.js";
+import { normalizeStringValue as c } from "../../utils/string.js";
+import { useCharacterCounterState as j } from "../CharacterCounter/useCharacterCounterState.js";
+import w from "../TextFieldBase/TextFieldBase.js";
+import { TEXTAREA_MAX_SAFE_LENGTH as F } from "./constants.js";
+import { useAdjustHeight as N } from "./useAdjustHeight.js";
+const S = (e, o) => e === !0 || o !== void 0, D = (e) => e === void 0 ? F : e, O = (e, o) => {
+  const {
+    onInput: g,
+    isAutoResizing: p,
+    autoResizingMaxHeight: x = 400,
+    counterThreshold: t,
+    hasCounter: r,
+    onChange: a,
+    value: i,
+    defaultValue: s,
+    helperText: T,
+    isDisabled: v,
+    id: A,
+    ...n
+  } = e, u = m(o), { adjustHeightOnAutoresize: L, onInput: C } = N({
+    elementReference: u,
+    onInput: g,
+    isAutoResizing: p,
+    maxHeight: x
+  }), H = c(i), R = c(s), { counterProps: z, handleChange: E } = j({
+    value: H,
+    defaultValue: R,
+    counterThreshold: t,
+    hasCounter: r,
+    onChange: a
+  }), l = S(r, t), d = l ? D(n.maxLength) : void 0, M = l ? E : a, h = m(!1);
+  return _(() => {
+    t !== void 0 && n.maxLength !== void 0 && n.maxLength < t && !h.current && (h.current = !0, b(
+      !1,
+      "TextArea: `maxLength` should be greater than or equal to `counterThreshold` to keep visible counter and hard input limit aligned."
+    ));
+  }, [t, n.maxLength]), /* @__PURE__ */ V(
+    w,
     {
+      id: A,
       isMultiline: !0,
-      ref: e,
-      onInput: p,
-      onFocus: a,
-      ...u
+      ref: u,
+      onInput: C,
+      onFocus: L,
+      onChange: M,
+      value: i,
+      defaultValue: s,
+      helperText: T,
+      isDisabled: v,
+      counterProps: z,
+      ...n,
+      ...d !== void 0 && { maxLength: d }
     }
   );
-}, t = f(d);
-t.spiritComponent = "TextArea";
-t.displayName = "TextArea";
+}, f = I(O);
+f.spiritComponent = "TextArea";
+f.displayName = "TextArea";
 export {
-  t as default
+  f as default
 };
 //# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ForwardedRef, type RefObject, forwardRef, useRef } from 'react';\nimport { type ForwardRefComponent, type SpiritTextAreaProps } from '../../types';\nimport { TextFieldBase } from '../TextFieldBase';\nimport { useAdjustHeight } from './useAdjustHeight';\n\nconst _TextArea = (props: SpiritTextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>): JSX.Element => {\n  const { onInput, isAutoResizing, autoResizingMaxHeight = 400, ...restProps } = props;\n  const elementReference = useRef(ref);\n  const { adjustHeightOnAutoresize, onInput: onInputHandler } = useAdjustHeight({\n    elementReference,\n    onInput,\n    isAutoResizing,\n    maxHeight: autoResizingMaxHeight,\n  });\n\n  return (\n    <TextFieldBase\n      isMultiline\n      ref={elementReference as RefObject<HTMLTextAreaElement>}\n      onInput={onInputHandler}\n      onFocus={adjustHeightOnAutoresize}\n      {...restProps}\n    />\n  );\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, SpiritTextAreaProps>(_TextArea) as ForwardRefComponent<\n  HTMLTextAreaElement,\n  SpiritTextAreaProps\n>;\n\nTextArea.spiritComponent = 'TextArea';\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"names":["_TextArea","props","ref","onInput","isAutoResizing","autoResizingMaxHeight","restProps","elementReference","useRef","adjustHeightOnAutoresize","onInputHandler","useAdjustHeight","jsx","TextFieldBase","TextArea","forwardRef"],"mappings":";;;;;AAOA,MAAMA,IAAY,CAACC,GAA4BC,MAAwD;AACrG,QAAM,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,uBAAAC,IAAwB,KAAK,GAAGC,MAAcL,GACzEM,IAAmBC,EAAON,CAAG,GAC7B,EAAE,0BAAAO,GAA0B,SAASC,EAAA,IAAmBC,EAAgB;AAAA,IAC5E,kBAAAJ;AAAA,IACA,SAAAJ;AAAA,IACA,gBAAAC;AAAA,IACA,WAAWC;AAAA,EAAA,CACZ;AAED,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,KAAKN;AAAA,MACL,SAASG;AAAA,MACT,SAASD;AAAA,MACR,GAAGH;AAAA,IAAA;AAAA,EAAA;AAGV,GAEMQ,IAAWC,EAAqDf,CAAS;AAK/Ec,EAAS,kBAAkB;AAC3BA,EAAS,cAAc;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ForwardedRef, type RefObject, forwardRef, useEffect, useRef } from 'react';\nimport { warning } from '../../common/utilities';\nimport { type ForwardRefComponent, type SpiritTextAreaProps } from '../../types';\nimport { normalizeStringValue } from '../../utils';\nimport { useCharacterCounterState } from '../CharacterCounter';\nimport { TextFieldBase } from '../TextFieldBase';\nimport { TEXTAREA_MAX_SAFE_LENGTH } from './constants';\nimport { useAdjustHeight } from './useAdjustHeight';\n\nconst isCounterActive = (hasCounter: boolean | undefined, counterThreshold: number | undefined): boolean =>\n  hasCounter === true || counterThreshold !== undefined;\n\nconst resolveCounterNativeMaxLength = (consumerMaxLength: number | undefined): number =>\n  consumerMaxLength === undefined ? TEXTAREA_MAX_SAFE_LENGTH : consumerMaxLength;\n\nconst _TextArea = (props: SpiritTextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>): JSX.Element => {\n  const {\n    onInput,\n    isAutoResizing,\n    autoResizingMaxHeight = 400,\n    counterThreshold,\n    hasCounter,\n    onChange,\n    value,\n    defaultValue,\n    helperText,\n    isDisabled,\n    id,\n    ...restProps\n  } = props;\n\n  const elementReference = useRef(ref);\n  const { adjustHeightOnAutoresize, onInput: onInputHandler } = useAdjustHeight({\n    elementReference,\n    onInput,\n    isAutoResizing,\n    maxHeight: autoResizingMaxHeight,\n  });\n\n  const normalizedValue = normalizeStringValue(value);\n  const normalizedDefaultValue = normalizeStringValue(defaultValue);\n\n  const { counterProps, handleChange } = useCharacterCounterState({\n    value: normalizedValue,\n    defaultValue: normalizedDefaultValue,\n    counterThreshold,\n    hasCounter,\n    onChange,\n  });\n\n  const counterOn = isCounterActive(hasCounter, counterThreshold);\n  const nativeMaxLength = counterOn ? resolveCounterNativeMaxLength(restProps.maxLength) : undefined;\n  const changeHandler = counterOn ? handleChange : onChange;\n\n  const didWarnMaxLengthLowerThanThresholdRef = useRef(false);\n  useEffect(() => {\n    if (\n      counterThreshold !== undefined &&\n      restProps.maxLength !== undefined &&\n      restProps.maxLength < counterThreshold &&\n      !didWarnMaxLengthLowerThanThresholdRef.current\n    ) {\n      didWarnMaxLengthLowerThanThresholdRef.current = true;\n      warning(\n        false,\n        'TextArea: `maxLength` should be greater than or equal to `counterThreshold` to keep visible counter and hard input limit aligned.',\n      );\n    }\n  }, [counterThreshold, restProps.maxLength]);\n\n  return (\n    <TextFieldBase\n      id={id}\n      isMultiline\n      ref={elementReference as RefObject<HTMLTextAreaElement>}\n      onInput={onInputHandler}\n      onFocus={adjustHeightOnAutoresize}\n      onChange={changeHandler}\n      value={value}\n      defaultValue={defaultValue}\n      helperText={helperText}\n      isDisabled={isDisabled}\n      counterProps={counterProps}\n      {...restProps}\n      {...(nativeMaxLength !== undefined && { maxLength: nativeMaxLength })}\n    />\n  );\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, SpiritTextAreaProps>(_TextArea) as ForwardRefComponent<\n  HTMLTextAreaElement,\n  SpiritTextAreaProps\n>;\n\nTextArea.spiritComponent = 'TextArea';\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"names":["isCounterActive","hasCounter","counterThreshold","resolveCounterNativeMaxLength","consumerMaxLength","TEXTAREA_MAX_SAFE_LENGTH","_TextArea","props","ref","onInput","isAutoResizing","autoResizingMaxHeight","onChange","value","defaultValue","helperText","isDisabled","id","restProps","elementReference","useRef","adjustHeightOnAutoresize","onInputHandler","useAdjustHeight","normalizedValue","normalizeStringValue","normalizedDefaultValue","counterProps","handleChange","useCharacterCounterState","counterOn","nativeMaxLength","changeHandler","didWarnMaxLengthLowerThanThresholdRef","useEffect","warning","jsx","TextFieldBase","TextArea","forwardRef"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAkB,CAACC,GAAiCC,MACxDD,MAAe,MAAQC,MAAqB,QAExCC,IAAgC,CAACC,MACrCA,MAAsB,SAAYC,IAA2BD,GAEzDE,IAAY,CAACC,GAA4BC,MAAwD;AACrG,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,uBAAAC,IAAwB;AAAA,IACxB,kBAAAT;AAAA,IACA,YAAAD;AAAA,IACA,UAAAW;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDX,GAEEY,IAAmBC,EAAOZ,CAAG,GAC7B,EAAE,0BAAAa,GAA0B,SAASC,EAAA,IAAmBC,EAAgB;AAAA,IAC5E,kBAAAJ;AAAA,IACA,SAAAV;AAAA,IACA,gBAAAC;AAAA,IACA,WAAWC;AAAA,EAAA,CACZ,GAEKa,IAAkBC,EAAqBZ,CAAK,GAC5Ca,IAAyBD,EAAqBX,CAAY,GAE1D,EAAE,cAAAa,GAAc,cAAAC,EAAA,IAAiBC,EAAyB;AAAA,IAC9D,OAAOL;AAAA,IACP,cAAcE;AAAA,IACd,kBAAAxB;AAAA,IACA,YAAAD;AAAA,IACA,UAAAW;AAAA,EAAA,CACD,GAEKkB,IAAY9B,EAAgBC,GAAYC,CAAgB,GACxD6B,IAAkBD,IAAY3B,EAA8Be,EAAU,SAAS,IAAI,QACnFc,IAAgBF,IAAYF,IAAehB,GAE3CqB,IAAwCb,EAAO,EAAK;AAC1D,SAAAc,EAAU,MAAM;AACd,IACEhC,MAAqB,UACrBgB,EAAU,cAAc,UACxBA,EAAU,YAAYhB,KACtB,CAAC+B,EAAsC,YAEvCA,EAAsC,UAAU,IAChDE;AAAA,MACE;AAAA,MACA;AAAA,IAAA;AAAA,EAGN,GAAG,CAACjC,GAAkBgB,EAAU,SAAS,CAAC,GAGxC,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAApB;AAAA,MACA,aAAW;AAAA,MACX,KAAKE;AAAA,MACL,SAASG;AAAA,MACT,SAASD;AAAA,MACT,UAAUW;AAAA,MACV,OAAAnB;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAW;AAAA,MACC,GAAGT;AAAA,MACH,GAAIa,MAAoB,UAAa,EAAE,WAAWA,EAAA;AAAA,IAAgB;AAAA,EAAA;AAGzE,GAEMO,IAAWC,EAAqDjC,CAAS;AAK/EgC,EAAS,kBAAkB;AAC3BA,EAAS,cAAc;"}

package/dist/components/TextArea/constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=1e4;exports.TEXTAREA_MAX_SAFE_LENGTH=e;
+//# sourceMappingURL=constants.cjs.map

package/dist/components/TextArea/constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/TextArea/constants.ts"],"sourcesContent":["// Default/fallback native maxLength when the character counter is enabled and no consumer maxLength is provided.\n// Helps prevent pathological input length in the browser without capping explicit consumer-provided maxLength values.\nexport const TEXTAREA_MAX_SAFE_LENGTH = 10000;\n"],"names":["TEXTAREA_MAX_SAFE_LENGTH"],"mappings":"gFAEO,MAAMA,EAA2B"}

package/dist/components/TextArea/constants.d.ts

@@ -0,0 +1 @@
+export declare const TEXTAREA_MAX_SAFE_LENGTH = 10000;

package/dist/components/TextArea/constants.js

@@ -0,0 +1,5 @@
+const t = 1e4;
+export {
+  t as TEXTAREA_MAX_SAFE_LENGTH
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/TextArea/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/TextArea/constants.ts"],"sourcesContent":["// Default/fallback native maxLength when the character counter is enabled and no consumer maxLength is provided.\n// Helps prevent pathological input length in the browser without capping explicit consumer-provided maxLength values.\nexport const TEXTAREA_MAX_SAFE_LENGTH = 10000;\n"],"names":["TEXTAREA_MAX_SAFE_LENGTH"],"mappings":"AAEO,MAAMA,IAA2B;"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"TextFieldBase.cjs","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":"4oBAiBMA,EAAuCC,EAAAA,WAC3CC,EAAAA,QAAqDC,EAAAA,OAAkB,CACzE,EAEMC,EAAiB,CAACC,EAAiCC,IAA8D,CACrH,KAAM,CACJ,mBAAoBC,EAAkB,GACtC,kBAAAC,EACA,WAAAC,EACA,GAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,MAAM,OACb,gBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDX,EACE,CAAE,WAAAY,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,2BAA2B,CACtE,GAAAT,EACA,KAAAE,EACA,gBAAAE,EACA,GAAGE,CAAA,CACJ,EACK,CAAA,WAAEI,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/D,CAACK,EAAKC,CAAQ,EAAIC,EAAAA,QAAWlB,CAAe,EAC5CmB,EAAsBC,EAAAA,mBAAmBJ,CAAG,EAC5CK,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAf,EACA,eAAAC,CAAA,CACD,EAED,OACEe,OAAC,MAAA,CAAK,GAAGV,EAAY,UAAWW,EAAWd,EAAW,KAAMG,EAAW,SAAS,EAC9E,SAAA,CAAAY,MAACC,EAAAA,SAAM,QAASvB,EAAI,iBAAkBO,EAAW,MAC9C,SAAAN,EACH,EACAqB,MAAChC,GAAsC,GAAGqB,EAAa,GAAGK,EAAqB,GAAAhB,EAAQ,IAAAJ,EAAU,KAAAM,EAAY,EAC7GoB,EAAAA,IAACE,EAAAA,QAAA,CACC,iBAAkBjB,EAAW,WAC7B,GAAI,GAAGP,CAAE,eACT,aAAcc,EACd,WAAAf,CAAA,CAAA,EAEDK,GACCkB,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBlB,EAAW,eAC7B,YAAY,OACX,GAAIT,GAAqB,CAAE,uBAAwBM,CAAA,EACpD,GAAI,GAAGJ,CAAE,mBACT,eAAAK,EACA,aAAcS,EACd,KAAMI,CAAA,CAAA,CACR,EAEJ,CAEJ,EAEMQ,EAAgBnC,EAAAA,WACpBG,CACF,EAEAgC,EAAc,gBAAkB,gBAChCA,EAAc,YAAc"}
+{"version":3,"file":"TextFieldBase.cjs","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":"srBAmBMA,EAAuCC,EAAAA,WAC3CC,EAAAA,QAAqDC,EAAAA,OAAkB,CACzE,EAEMC,EAAiB,CAACC,EAAiCC,IAA8D,CACrH,KAAM,CACJ,mBAAoBC,EAAkB,GACtC,aAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,GAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,MAAM,OACb,gBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDZ,EACE,CAAE,WAAAa,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,2BAA2B,CACtE,GAAAT,EACA,KAAAE,EACA,gBAAAE,EACA,GAAGE,CAAA,CACJ,EACK,CAAA,WAAEI,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/D,CAACK,EAAqBC,CAAQ,EAAIC,EAAAA,mBAAmBnB,CAAe,EACpEoB,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAb,EACA,eAAAC,CAAA,CACD,EAEKa,EAAiBnB,GAAeK,GAAmBC,EAEnDc,EACJC,EAAAA,IAACC,EAAAA,QAAA,CACC,iBAAkBd,EAAW,WAC7B,GAAI,GAAGP,CAAE,gBACT,aAAcc,EACd,WAAAf,CAAA,CAAA,EAIEuB,EAAwBlB,EAC5BgB,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBhB,EAAW,eAC7B,YAAY,OACX,GAAIT,GAAqB,CAAE,uBAAwBM,CAAA,EACpD,GAAI,GAAGJ,CAAE,oBACT,eAAAK,EACA,aAAcS,EACd,KAAME,CAAA,CAAA,EAEN,KAEEQ,EAAiB3B,EACrBuB,EAAAA,IAACK,EAAAA,QAAA,CAAkB,GAAG5B,EAAc,GAAAG,EAAQ,aAAcc,EAAU,iBAAkBP,EAAW,OAAA,CAAS,EACxG,KAEJ,OACEmB,OAAC,MAAA,CAAK,GAAGhB,EAAY,UAAWiB,EAAWpB,EAAW,KAAMG,EAAW,SAAS,EAC9E,SAAA,CAAAU,MAACQ,EAAAA,SAAM,QAAS5B,EAAI,iBAAkBO,EAAW,MAC9C,SAAAN,EACH,EACAmB,MAAC/B,GAAsC,GAAGsB,EAAa,GAAGE,EAAqB,GAAAb,EAAQ,IAAAL,EAAU,KAAAO,EAAY,EAC5GL,EACC6B,EAAAA,KAACG,EAAAA,QAAA,CAAK,UAAU,aAAa,WAAY,GAAO,WAAW,gBAAgB,WAAW,MACnF,SAAA,CAAAX,SACE,MAAA,CAEE,SAAA,CAAAI,EACAH,CAAA,CAAA,CACH,EACE,KACHK,CAAA,CAAA,CACH,EAEAE,EAAAA,KAAAI,EAAAA,SAAA,CAEG,SAAA,CAAAX,EACAG,CAAA,CAAA,CACH,CAAA,EAEJ,CAEJ,EAEMS,EAAgBzC,EAAAA,WACpBG,CACF,EAEAsC,EAAc,gBAAkB,gBAChCA,EAAc,YAAc"}