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

package/dist/components/CharacterCounter/useCharacterCounterState.js

@@ -0,0 +1,66 @@
+"use client";
+import { useState as f, useCallback as R, useEffect as h } from "react";
+import { useStyleProps as v } from "../../hooks/styleProps.js";
+import { useControlledModeGuard as E } from "../../hooks/useControlledModeGuard.js";
+import { useDebouncedValue as S } from "../../hooks/useDebouncedValue.js";
+import { defaultLabels as b } from "../../translations/defaults.js";
+import { replaceTranslationParams as m } from "../../translations/replaceTranslationParams.js";
+import { CHARACTER_COUNTER_SCREEN_READER_DEBOUNCE_MS as _ } from "./constants.js";
+const i = b.textArea.counter, M = (t, e) => e !== void 0 ? `${t}/${e}` : String(t), P = (t, e) => {
+  if (e === void 0)
+    return m(i.charactersEntered, { count: t });
+  if (t === 0)
+    return m(i.canEnterUpTo, { maxLength: e });
+  if (t > e) {
+    const s = t - e, n = s === 1 ? i.characterOverLimit : i.charactersOverLimit;
+    return m(n, { count: s });
+  }
+  const r = e - t, a = r === 1 ? i.characterRemaining : i.charactersRemaining;
+  return m(a, { count: r });
+}, U = (t) => {
+  const { value: e, defaultValue: r, counterThreshold: a, hasCounter: s, onChange: n } = t, c = e !== void 0;
+  E({
+    componentName: "useCharacterCounterState",
+    value: e,
+    defaultValue: r
+  });
+  const [C, d] = f(
+    () => c ? e.length : r?.length ?? 0
+  ), u = c ? e.length : C, o = s === !0 || a !== void 0, p = R(
+    (l) => {
+      !c && o && d(l.target.value.length), n?.(l);
+    },
+    [c, o, n]
+  );
+  return {
+    counterProps: o ? {
+      counterThreshold: a,
+      currentLength: u,
+      hasCounter: s
+    } : void 0,
+    handleChange: p
+  };
+}, D = (t) => {
+  const { counterThreshold: e, currentLength: r, hasCounter: a, id: s, registerAria: n, ...c } = t, { styleProps: C, props: d } = v(c), u = a === !0 || e !== void 0, o = `${s}__counterScreenReaderMessage`, p = M(r, e), g = P(r, e), l = S(
+    g,
+    _
+  );
+  return h(() => {
+    if (u)
+      return n({ add: o }), () => {
+        n({ remove: o });
+      };
+  }, [u, o, n]), {
+    debouncedScreenReaderMessage: l,
+    isVisible: u,
+    screenReaderMessageId: o,
+    styleProps: C,
+    transferProps: d,
+    visibleCounterText: p
+  };
+};
+export {
+  D as useCharacterCounter,
+  U as useCharacterCounterState
+};
+//# sourceMappingURL=useCharacterCounterState.js.map

package/dist/components/CharacterCounter/useCharacterCounterState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCharacterCounterState.js","sources":["../../../src/components/CharacterCounter/useCharacterCounterState.ts"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, useCallback, useEffect, useState } from 'react';\nimport { type StylePropsResult, useControlledModeGuard, useDebouncedValue, useStyleProps } from '../../hooks';\nimport { defaultLabels, replaceTranslationParams } from '../../translations';\nimport { type TextAreaCounterRenderProps } from '../../types';\nimport { CHARACTER_COUNTER_SCREEN_READER_DEBOUNCE_MS } from './constants';\nimport { type CharacterCounterProps } from './types';\n\n/** Return value of the useCharacterCounterState hook */\nexport interface CharacterCounterState {\n  /** Props to pass to CharacterCounter, or undefined when counter is hidden */\n  counterProps: TextAreaCounterRenderProps | undefined;\n  /** Change handler that updates internal length and calls the provided onChange */\n  handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\n/** Props for the useCharacterCounterState hook */\nexport interface UseCharacterCounterStateProps {\n  /** Character threshold shown after the slash in the counter (e.g. `5/200`); implicitly enables the counter */\n  counterThreshold?: number;\n  /** Initial value when uncontrolled */\n  defaultValue?: string;\n  /** Whether to show the character counter; automatically true when `counterThreshold` is set */\n  hasCounter?: boolean;\n  /** Called when the textarea value changes */\n  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;\n  /** Controlled value (takes precedence over defaultValue) */\n  value?: string;\n}\n\n/** Return value of the `useCharacterCounter` hook (visible + screen reader presentation for `CharacterCounter`). */\nexport interface UseCharacterCounterResult {\n  debouncedScreenReaderMessage: string;\n  isVisible: boolean;\n  screenReaderMessageId: string;\n  styleProps: StylePropsResult['styleProps'];\n  transferProps: StylePropsResult['props'];\n  visibleCounterText: string;\n}\n\nconst COUNTER_LABELS = defaultLabels.textArea.counter;\n\n/**\n * Builds the visible counter label (`current/max` or count only).\n *\n * @param currentLength - Current number of characters.\n * @param counterThreshold - When set, label includes a slash and this max; when omitted, only the count is shown.\n * @returns {string} Formatted string for the aria-hidden counter element.\n */\nconst getCharacterCounterVisibleText = (currentLength: number, counterThreshold: number | undefined): string =>\n  counterThreshold !== undefined ? `${currentLength}/${counterThreshold}` : String(currentLength);\n\n/**\n * Builds the polite live-region message for assistive technologies (remaining, over limit, count-only, etc.).\n *\n * @param currentLength - Current number of characters.\n * @param counterThreshold - When set, messages relate to this max; when omitted, only “characters entered” copy is used.\n * @returns {string} Localized screen reader string (not debounced).\n */\nconst getCharacterCounterScreenReaderMessage = (\n  currentLength: number,\n  counterThreshold: number | undefined,\n): string => {\n  if (counterThreshold === undefined) {\n    return replaceTranslationParams(COUNTER_LABELS.charactersEntered, { count: currentLength });\n  }\n\n  if (currentLength === 0) {\n    return replaceTranslationParams(COUNTER_LABELS.canEnterUpTo, { maxLength: counterThreshold });\n  }\n\n  if (currentLength > counterThreshold) {\n    const overCount = currentLength - counterThreshold;\n    const template = overCount === 1 ? COUNTER_LABELS.characterOverLimit : COUNTER_LABELS.charactersOverLimit;\n\n    return replaceTranslationParams(template, { count: overCount });\n  }\n\n  const remaining = counterThreshold - currentLength;\n  const template = remaining === 1 ? COUNTER_LABELS.characterRemaining : COUNTER_LABELS.charactersRemaining;\n\n  return replaceTranslationParams(template, { count: remaining });\n};\n\n/**\n * Tracks textarea length for `TextArea` and exposes `counterProps` plus a change handler when the counter is active.\n *\n * @param props - Controlled/uncontrolled value and counter flags; see {@link UseCharacterCounterStateProps}.\n * @returns {CharacterCounterState} Counter props for `CharacterCounter` (if visible) and textarea `onChange` handler.\n */\nexport const useCharacterCounterState = (props: UseCharacterCounterStateProps): CharacterCounterState => {\n  const { value, defaultValue, counterThreshold, hasCounter, onChange } = props;\n  const isControlled = value !== undefined;\n\n  useControlledModeGuard({\n    componentName: 'useCharacterCounterState',\n    value,\n    defaultValue,\n  });\n\n  const [internalLength, setInternalLength] = useState(() =>\n    isControlled ? value.length : (defaultValue?.length ?? 0),\n  );\n\n  const currentLength = isControlled ? value.length : internalLength;\n  const isCounterVisible = hasCounter === true || counterThreshold !== undefined;\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled && isCounterVisible) {\n        setInternalLength(event.target.value.length);\n      }\n      onChange?.(event);\n    },\n    [isControlled, isCounterVisible, onChange],\n  );\n\n  const counterProps: TextAreaCounterRenderProps | undefined = isCounterVisible\n    ? {\n        counterThreshold,\n        currentLength,\n        hasCounter,\n      }\n    : undefined;\n\n  return {\n    counterProps,\n    handleChange,\n  };\n};\n\n/**\n * Presentation hook for `CharacterCounter`: style props, visible text, debounced screen reader text, and ARIA id registration.\n *\n * @param props - Full `CharacterCounterProps` including `id` and `registerAria`.\n * @returns {UseCharacterCounterResult} Values to render the visible counter and `VisuallyHidden` live region.\n */\nexport const useCharacterCounter = (props: CharacterCounterProps): UseCharacterCounterResult => {\n  const { counterThreshold, currentLength, hasCounter, id, registerAria, ...restProps } = props;\n  const { styleProps, props: transferProps } = useStyleProps(restProps);\n  const isVisible = hasCounter === true || counterThreshold !== undefined;\n  const screenReaderMessageId = `${id}__counterScreenReaderMessage`;\n  const visibleCounterText = getCharacterCounterVisibleText(currentLength, counterThreshold);\n  const screenReaderMessage = getCharacterCounterScreenReaderMessage(currentLength, counterThreshold);\n  const debouncedScreenReaderMessage = useDebouncedValue(\n    screenReaderMessage,\n    CHARACTER_COUNTER_SCREEN_READER_DEBOUNCE_MS,\n  );\n\n  useEffect(() => {\n    if (isVisible) {\n      registerAria({ add: screenReaderMessageId });\n\n      return () => {\n        registerAria({ remove: screenReaderMessageId });\n      };\n    }\n\n    return undefined;\n  }, [isVisible, screenReaderMessageId, registerAria]);\n\n  return {\n    debouncedScreenReaderMessage,\n    isVisible,\n    screenReaderMessageId,\n    styleProps,\n    transferProps,\n    visibleCounterText,\n  };\n};\n"],"names":["COUNTER_LABELS","defaultLabels","getCharacterCounterVisibleText","currentLength","counterThreshold","getCharacterCounterScreenReaderMessage","replaceTranslationParams","overCount","template","remaining","useCharacterCounterState","props","value","defaultValue","hasCounter","onChange","isControlled","useControlledModeGuard","internalLength","setInternalLength","useState","isCounterVisible","handleChange","useCallback","event","useCharacterCounter","id","registerAria","restProps","styleProps","transferProps","useStyleProps","isVisible","screenReaderMessageId","visibleCounterText","screenReaderMessage","debouncedScreenReaderMessage","useDebouncedValue","CHARACTER_COUNTER_SCREEN_READER_DEBOUNCE_MS","useEffect"],"mappings":";;;;;;;;AAyCA,MAAMA,IAAiBC,EAAc,SAAS,SASxCC,IAAiC,CAACC,GAAuBC,MAC7DA,MAAqB,SAAY,GAAGD,CAAa,IAAIC,CAAgB,KAAK,OAAOD,CAAa,GAS1FE,IAAyC,CAC7CF,GACAC,MACW;AACX,MAAIA,MAAqB;AACvB,WAAOE,EAAyBN,EAAe,mBAAmB,EAAE,OAAOG,GAAe;AAG5F,MAAIA,MAAkB;AACpB,WAAOG,EAAyBN,EAAe,cAAc,EAAE,WAAWI,GAAkB;AAG9F,MAAID,IAAgBC,GAAkB;AACpC,UAAMG,IAAYJ,IAAgBC,GAC5BI,IAAWD,MAAc,IAAIP,EAAe,qBAAqBA,EAAe;AAEtF,WAAOM,EAAyBE,GAAU,EAAE,OAAOD,GAAW;AAAA,EAChE;AAEA,QAAME,IAAYL,IAAmBD,GAC/BK,IAAWC,MAAc,IAAIT,EAAe,qBAAqBA,EAAe;AAEtF,SAAOM,EAAyBE,GAAU,EAAE,OAAOC,GAAW;AAChE,GAQaC,IAA2B,CAACC,MAAgE;AACvG,QAAM,EAAE,OAAAC,GAAO,cAAAC,GAAc,kBAAAT,GAAkB,YAAAU,GAAY,UAAAC,MAAaJ,GAClEK,IAAeJ,MAAU;AAE/B,EAAAK,EAAuB;AAAA,IACrB,eAAe;AAAA,IACf,OAAAL;AAAA,IACA,cAAAC;AAAA,EAAA,CACD;AAED,QAAM,CAACK,GAAgBC,CAAiB,IAAIC;AAAA,IAAS,MACnDJ,IAAeJ,EAAM,SAAUC,GAAc,UAAU;AAAA,EAAA,GAGnDV,IAAgBa,IAAeJ,EAAM,SAASM,GAC9CG,IAAmBP,MAAe,MAAQV,MAAqB,QAE/DkB,IAAeC;AAAA,IACnB,CAACC,MAA4C;AAC3C,MAAI,CAACR,KAAgBK,KACnBF,EAAkBK,EAAM,OAAO,MAAM,MAAM,GAE7CT,IAAWS,CAAK;AAAA,IAClB;AAAA,IACA,CAACR,GAAcK,GAAkBN,CAAQ;AAAA,EAAA;AAW3C,SAAO;AAAA,IACL,cAT2DM,IACzD;AAAA,MACE,kBAAAjB;AAAA,MACA,eAAAD;AAAA,MACA,YAAAW;AAAA,IAAA,IAEF;AAAA,IAIF,cAAAQ;AAAA,EAAA;AAEJ,GAQaG,IAAsB,CAACd,MAA4D;AAC9F,QAAM,EAAE,kBAAAP,GAAkB,eAAAD,GAAe,YAAAW,GAAY,IAAAY,GAAI,cAAAC,GAAc,GAAGC,MAAcjB,GAClF,EAAE,YAAAkB,GAAY,OAAOC,EAAA,IAAkBC,EAAcH,CAAS,GAC9DI,IAAYlB,MAAe,MAAQV,MAAqB,QACxD6B,IAAwB,GAAGP,CAAE,gCAC7BQ,IAAqBhC,EAA+BC,GAAeC,CAAgB,GACnF+B,IAAsB9B,EAAuCF,GAAeC,CAAgB,GAC5FgC,IAA+BC;AAAA,IACnCF;AAAA,IACAG;AAAA,EAAA;AAGF,SAAAC,EAAU,MAAM;AACd,QAAIP;AACF,aAAAL,EAAa,EAAE,KAAKM,GAAuB,GAEpC,MAAM;AACX,QAAAN,EAAa,EAAE,QAAQM,GAAuB;AAAA,MAChD;AAAA,EAIJ,GAAG,CAACD,GAAWC,GAAuBN,CAAY,CAAC,GAE5C;AAAA,IACL,8BAAAS;AAAA,IACA,WAAAJ;AAAA,IACA,uBAAAC;AAAA,IACA,YAAAJ;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAI;AAAA,EAAA;AAEJ;"}

package/dist/components/CharacterCounter.d.ts

@@ -0,0 +1,2 @@
+export * from './CharacterCounter/index'
+export {}

package/dist/components/Checkbox/Checkbox.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"),_=require("classnames"),f=require("react"),k=require("../../hooks/styleProps.cjs"),j=require("../../hooks/useAriaDescribedBy.cjs"),A=require("../Field/HelperText.cjs"),C=require("../Field/Label.cjs"),R=require("../Field/useAriaIds.cjs"),g=require("../Field/ValidationText.cjs"),D=require("../Field/useValidationTextRole.cjs"),V=require("./useCheckboxStyleProps.cjs"),B=(c,d)=>{const{classProps:e,props:n}=V.useCheckboxStyleProps(c),{"aria-describedby":u="",hasValidationIcon:p,helperText:x,id:t,isChecked:b,isDisabled:h,isRequired:y,label:m,validationState:r,validationText:a,value:q,...N}=n,{styleProps:o,props:P}=k.useStyleProps(N),[T,l]=R.default(u),v=j.useAriaDescribedBy(T),S=D.useValidationTextRole({validationState:r,validationText:a});return s.jsxs("div",{style:o.style,className:_(e.root,o.className),children:[s.jsx("input",{...P,...v,type:"checkbox",id:t,className:e.input,disabled:h,required:y,checked:b,value:q,ref:d}),s.jsxs("div",{className:e.text,children:[s.jsx(C.default,{UNSAFE_className:e.label,htmlFor:t,children:m}),s.jsx(A.default,{UNSAFE_className:e.helperText,id:`${t}__helperText`,registerAria:l,helperText:x}),r&&s.jsx(g.default,{UNSAFE_className:e.validationText,id:`${t}__validationText`,...p&&{hasValidationStateIcon:r},validationText:a,registerAria:l,role:S})]})]})},i=f.forwardRef(B);i.spiritComponent="Checkbox";i.displayName="Checkbox";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"),k=require("react"),C=require("../../hooks/styleProps.cjs"),d=require("../../hooks/useAriaIdRefs.cjs"),R=require("../Field/HelperText.cjs"),g=require("../Field/Label.cjs"),V=require("../Field/ValidationText.cjs"),F=require("../Field/useValidationTextRole.cjs"),I=require("../InputDetails/InputDetails.cjs"),$=require("./useCheckboxStyleProps.cjs"),B=(n,u)=>{const{classProps:s,props:p}=$.useCheckboxStyleProps(n),{"aria-describedby":x="","aria-details":h,details:a,hasValidationIcon:b,helperText:y,id:t,isChecked:m,isDisabled:q,isRequired:P,label:N,validationState:i,validationText:l,value:T,...f}=p,{styleProps:o,props:v}=C.useStyleProps(f),[A,c]=d.useAriaDescribedBy(x),[D,S]=d.useAriaDetails(h),_=F.useValidationTextRole({validationState:i,validationText:l});return e.jsxs("div",{style:o.style,className:j(s.root,o.className),children:[e.jsx("input",{...v,...A,...D,type:"checkbox",id:t,className:s.input,disabled:q,required:P,checked:m,value:T,ref:u}),e.jsxs("div",{className:s.text,children:[e.jsx(g.default,{UNSAFE_className:s.label,htmlFor:t,children:N}),a&&e.jsx(I.default,{id:`${t}-details`,registerAriaDetails:S,children:a}),e.jsx(R.default,{UNSAFE_className:s.helperText,id:`${t}__helperText`,registerAria:c,helperText:y}),i&&e.jsx(V.default,{UNSAFE_className:s.validationText,id:`${t}__validationText`,...b&&{hasValidationStateIcon:i},validationText:l,registerAria:c,role:_})]})]})},r=k.forwardRef(B);r.spiritComponent="Checkbox";r.displayName="Checkbox";exports.default=r;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritCheckboxProps } from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { useCheckboxStyleProps } from './useCheckboxStyleProps';\n\nconst _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element => {\n  const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    hasValidationIcon,\n    helperText,\n    id,\n    isChecked,\n    isDisabled,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = modifiedProps;\n  const { styleProps, props: otherProps } = useStyleProps(restProps);\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 style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        required={isRequired}\n        checked={isChecked}\n        value={value}\n        ref={ref}\n      />\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            id={`${id}__validationText`}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, SpiritCheckboxProps>(_Checkbox) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritCheckboxProps\n>;\n\nCheckbox.spiritComponent = 'Checkbox';\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_Checkbox","props","ref","classProps","modifiedProps","useCheckboxStyleProps","ariaDescribedBy","hasValidationIcon","helperText","id","isChecked","isDisabled","isRequired","label","validationState","validationText","value","restProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","Label","HelperText","ValidationText","Checkbox","forwardRef"],"mappings":"6gBAUMA,EAAY,CAACC,EAA4BC,IAAqD,CAClG,KAAM,CAAE,WAAAC,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,sBAAsBJ,CAAK,EAClE,CACJ,mBAAoBK,EAAkB,GACtC,kBAAAC,EACA,WAAAC,EACA,GAAAC,EACA,UAAAC,EACA,WAAAC,EACA,WAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,MAAAC,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,EAC5CK,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAb,EACA,eAAAC,CAAA,CACD,EAED,OACEa,EAAAA,KAAC,MAAA,CAAI,MAAOV,EAAW,MAAO,UAAWW,EAAW1B,EAAW,KAAMe,EAAW,SAAS,EACvF,SAAA,CAAAY,EAAAA,IAAC,QAAA,CACE,GAAGX,EACH,GAAGK,EACJ,KAAK,WACL,GAAAf,EACA,UAAWN,EAAW,MACtB,SAAUQ,EACV,SAAUC,EACV,QAASF,EACT,MAAAM,EACA,IAAAd,CAAA,CAAA,EAEF0B,EAAAA,KAAC,MAAA,CAAI,UAAWzB,EAAW,KACzB,SAAA,CAAA2B,MAACC,EAAAA,SAAM,iBAAkB5B,EAAW,MAAO,QAASM,EACjD,SAAAI,EACH,EACAiB,EAAAA,IAACE,EAAAA,QAAA,CACC,iBAAkB7B,EAAW,WAC7B,GAAI,GAAGM,CAAE,eACT,aAAca,EACd,WAAAd,CAAA,CAAA,EAEDM,GACCgB,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkB9B,EAAW,eAC7B,GAAI,GAAGM,CAAE,mBACR,GAAIF,GAAqB,CAAE,uBAAwBO,CAAA,EACpD,eAAAC,EACA,aAAcO,EACd,KAAMI,CAAA,CAAA,CACR,CAAA,CAEJ,CAAA,EACF,CAEJ,EAEMQ,EAAWC,EAAAA,WAAkDnC,CAAS,EAK5EkC,EAAS,gBAAkB,WAC3BA,EAAS,YAAc"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useAriaDetails, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritCheckboxProps } from '../../types';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { InputDetails } from '../InputDetails';\nimport { useCheckboxStyleProps } from './useCheckboxStyleProps';\n\nconst _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element => {\n  const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    'aria-details': ariaDetailsAttr,\n    details,\n    hasValidationIcon,\n    helperText,\n    id,\n    isChecked,\n    isDisabled,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    value,\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 validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  return (\n    <div style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        {...ariaDetailsProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        required={isRequired}\n        checked={isChecked}\n        value={value}\n        ref={ref}\n      />\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            id={`${id}__validationText`}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, SpiritCheckboxProps>(_Checkbox) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritCheckboxProps\n>;\n\nCheckbox.spiritComponent = 'Checkbox';\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_Checkbox","props","ref","classProps","modifiedProps","useCheckboxStyleProps","ariaDescribedBy","ariaDetailsAttr","details","hasValidationIcon","helperText","id","isChecked","isDisabled","isRequired","label","validationState","validationText","value","restProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","ariaDetailsProp","registerDetails","useAriaDetails","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","Label","InputDetails","HelperText","ValidationText","Checkbox","forwardRef"],"mappings":"ihBAWMA,EAAY,CAACC,EAA4BC,IAAqD,CAClG,KAAM,CAAE,WAAAC,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,sBAAsBJ,CAAK,EAClE,CACJ,mBAAoBK,EAAkB,GACtC,eAAgBC,EAChB,QAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,GAAAC,EACA,UAAAC,EACA,WAAAC,EACA,WAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,MAAAC,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,EACnEsB,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAd,EACA,eAAAC,CAAA,CACD,EAED,OACEc,EAAAA,KAAC,MAAA,CAAI,MAAOX,EAAW,MAAO,UAAWY,EAAW7B,EAAW,KAAMiB,EAAW,SAAS,EACvF,SAAA,CAAAa,EAAAA,IAAC,QAAA,CACE,GAAGZ,EACH,GAAGE,EACH,GAAGG,EACJ,KAAK,WACL,GAAAf,EACA,UAAWR,EAAW,MACtB,SAAUU,EACV,SAAUC,EACV,QAASF,EACT,MAAAM,EACA,IAAAhB,CAAA,CAAA,EAEF6B,EAAAA,KAAC,MAAA,CAAI,UAAW5B,EAAW,KACzB,SAAA,CAAA8B,MAACC,EAAAA,SAAM,iBAAkB/B,EAAW,MAAO,QAASQ,EACjD,SAAAI,EACH,EACCP,SACE2B,EAAAA,QAAA,CAAa,GAAI,GAAGxB,CAAE,WAAY,oBAAqBgB,EACrD,SAAAnB,CAAA,CACH,EAEFyB,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBjC,EAAW,WAC7B,GAAI,GAAGQ,CAAE,eACT,aAAca,EACd,WAAAd,CAAA,CAAA,EAEDM,GACCiB,EAAAA,IAACI,EAAAA,QAAA,CACC,iBAAkBlC,EAAW,eAC7B,GAAI,GAAGQ,CAAE,mBACR,GAAIF,GAAqB,CAAE,uBAAwBO,CAAA,EACpD,eAAAC,EACA,aAAcO,EACd,KAAMK,CAAA,CAAA,CACR,CAAA,CAEJ,CAAA,EACF,CAEJ,EAEMS,EAAWC,EAAAA,WAAkDvC,CAAS,EAK5EsC,EAAS,gBAAkB,WAC3BA,EAAS,YAAc"}

package/dist/components/Checkbox/Checkbox.js

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

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritCheckboxProps } from '../../types';\nimport { HelperText, Label, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { useCheckboxStyleProps } from './useCheckboxStyleProps';\n\nconst _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element => {\n  const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    hasValidationIcon,\n    helperText,\n    id,\n    isChecked,\n    isDisabled,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    value,\n    ...restProps\n  } = modifiedProps;\n  const { styleProps, props: otherProps } = useStyleProps(restProps);\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 style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        required={isRequired}\n        checked={isChecked}\n        value={value}\n        ref={ref}\n      />\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            id={`${id}__validationText`}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, SpiritCheckboxProps>(_Checkbox) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritCheckboxProps\n>;\n\nCheckbox.spiritComponent = 'Checkbox';\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_Checkbox","props","ref","classProps","modifiedProps","useCheckboxStyleProps","ariaDescribedBy","hasValidationIcon","helperText","id","isChecked","isDisabled","isRequired","label","validationState","validationText","value","restProps","styleProps","otherProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","Label","HelperText","ValidationText","Checkbox","forwardRef"],"mappings":";;;;;;;;;;;;AAUA,MAAMA,IAAY,CAACC,GAA4BC,MAAqD;AAClG,QAAM,EAAE,YAAAC,GAAY,OAAOC,EAAA,IAAkBC,EAAsBJ,CAAK,GAClE;AAAA,IACJ,oBAAoBK,IAAkB;AAAA,IACtC,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;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,GAC5CK,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAb;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAa,EAAC,OAAA,EAAI,OAAOV,EAAW,OAAO,WAAWW,EAAW1B,EAAW,MAAMe,EAAW,SAAS,GACvF,UAAA;AAAA,IAAA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGX;AAAA,QACH,GAAGK;AAAA,QACJ,MAAK;AAAA,QACL,IAAAf;AAAA,QACA,WAAWN,EAAW;AAAA,QACtB,UAAUQ;AAAA,QACV,UAAUC;AAAA,QACV,SAASF;AAAA,QACT,OAAAM;AAAA,QACA,KAAAd;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAA0B,EAAC,OAAA,EAAI,WAAWzB,EAAW,MACzB,UAAA;AAAA,MAAA,gBAAA2B,EAACC,KAAM,kBAAkB5B,EAAW,OAAO,SAASM,GACjD,UAAAI,GACH;AAAA,MACA,gBAAAiB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,kBAAkB7B,EAAW;AAAA,UAC7B,IAAI,GAAGM,CAAE;AAAA,UACT,cAAca;AAAA,UACd,YAAAd;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDM,KACC,gBAAAgB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,kBAAkB9B,EAAW;AAAA,UAC7B,IAAI,GAAGM,CAAE;AAAA,UACR,GAAIF,KAAqB,EAAE,wBAAwBO,EAAA;AAAA,UACpD,gBAAAC;AAAA,UACA,cAAcO;AAAA,UACd,MAAMI;AAAA,QAAA;AAAA,MAAA;AAAA,IACR,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ,GAEMQ,IAAWC,EAAkDnC,CAAS;AAK5EkC,EAAS,kBAAkB;AAC3BA,EAAS,cAAc;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React, { type ForwardedRef, forwardRef } from 'react';\nimport { useAriaDescribedBy, useAriaDetails, useStyleProps } from '../../hooks';\nimport { type ForwardRefComponent, type SpiritCheckboxProps } from '../../types';\nimport { HelperText, Label, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { InputDetails } from '../InputDetails';\nimport { useCheckboxStyleProps } from './useCheckboxStyleProps';\n\nconst _Checkbox = (props: SpiritCheckboxProps, ref: ForwardedRef<HTMLInputElement>): JSX.Element => {\n  const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    'aria-details': ariaDetailsAttr,\n    details,\n    hasValidationIcon,\n    helperText,\n    id,\n    isChecked,\n    isDisabled,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    value,\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 validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  return (\n    <div style={styleProps.style} className={classNames(classProps.root, styleProps.className)}>\n      <input\n        {...otherProps}\n        {...ariaDescribedByProp}\n        {...ariaDetailsProp}\n        type=\"checkbox\"\n        id={id}\n        className={classProps.input}\n        disabled={isDisabled}\n        required={isRequired}\n        checked={isChecked}\n        value={value}\n        ref={ref}\n      />\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            id={`${id}__validationText`}\n            {...(hasValidationIcon && { hasValidationStateIcon: validationState })}\n            validationText={validationText}\n            registerAria={register}\n            role={validationTextRole}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, SpiritCheckboxProps>(_Checkbox) as ForwardRefComponent<\n  HTMLInputElement,\n  SpiritCheckboxProps\n>;\n\nCheckbox.spiritComponent = 'Checkbox';\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["_Checkbox","props","ref","classProps","modifiedProps","useCheckboxStyleProps","ariaDescribedBy","ariaDetailsAttr","details","hasValidationIcon","helperText","id","isChecked","isDisabled","isRequired","label","validationState","validationText","value","restProps","styleProps","otherProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","ariaDetailsProp","registerDetails","useAriaDetails","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","Label","InputDetails","HelperText","ValidationText","Checkbox","forwardRef"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,IAAY,CAACC,GAA4BC,MAAqD;AAClG,QAAM,EAAE,YAAAC,GAAY,OAAOC,EAAA,IAAkBC,EAAsBJ,CAAK,GAClE;AAAA,IACJ,oBAAoBK,IAAkB;AAAA,IACtC,gBAAgBC;AAAA,IAChB,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;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,GACnEsB,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAd;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAc,EAAC,OAAA,EAAI,OAAOX,EAAW,OAAO,WAAWY,EAAW7B,EAAW,MAAMiB,EAAW,SAAS,GACvF,UAAA;AAAA,IAAA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGZ;AAAA,QACH,GAAGE;AAAA,QACH,GAAGG;AAAA,QACJ,MAAK;AAAA,QACL,IAAAf;AAAA,QACA,WAAWR,EAAW;AAAA,QACtB,UAAUU;AAAA,QACV,UAAUC;AAAA,QACV,SAASF;AAAA,QACT,OAAAM;AAAA,QACA,KAAAhB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAA6B,EAAC,OAAA,EAAI,WAAW5B,EAAW,MACzB,UAAA;AAAA,MAAA,gBAAA8B,EAACC,KAAM,kBAAkB/B,EAAW,OAAO,SAASQ,GACjD,UAAAI,GACH;AAAA,MACCP,uBACE2B,GAAA,EAAa,IAAI,GAAGxB,CAAE,YAAY,qBAAqBgB,GACrD,UAAAnB,EAAA,CACH;AAAA,MAEF,gBAAAyB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,kBAAkBjC,EAAW;AAAA,UAC7B,IAAI,GAAGQ,CAAE;AAAA,UACT,cAAca;AAAA,UACd,YAAAd;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDM,KACC,gBAAAiB;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,kBAAkBlC,EAAW;AAAA,UAC7B,IAAI,GAAGQ,CAAE;AAAA,UACR,GAAIF,KAAqB,EAAE,wBAAwBO,EAAA;AAAA,UACpD,gBAAAC;AAAA,UACA,cAAcO;AAAA,UACd,MAAMK;AAAA,QAAA;AAAA,MAAA;AAAA,IACR,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ,GAEMS,IAAWC,EAAkDvC,CAAS;AAK5EsC,EAAS,kBAAkB;AAC3BA,EAAS,cAAc;"}

package/dist/components/ControlButton/useControlButtonStyleProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useControlButtonStyleProps.cjs","sources":["../../../src/components/ControlButton/useControlButtonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix, useSymmetry } from '../../hooks';\nimport { type ControlButtonSize, type ControlButtonStyleProps } from '../../types';\nimport { applySize, compose } from '../../utils';\n\nconst getControlButtonSizeClassname = <S = void>(className: string, size: ControlButtonSize<S>): string =>\n  compose(applySize<ControlButtonSize<S>>(size))(className);\n\nexport function useControlButtonStyleProps<S = void>(props: ControlButtonStyleProps<S>) {\n  const { isDisabled, isSubtle, isSymmetrical, size, ...restProps } = props;\n\n  const controlButtonClass = useClassNamePrefix('ControlButton');\n  const controlButtonBackgroundClass = `${controlButtonClass}--hasBackground`;\n  const controlButtonDisabledClass = `${controlButtonClass}--disabled`;\n  const dynamicColorBackgroundInteractiveClass = useClassNamePrefix('dynamic-color-background-interactive');\n  const dynamicColorBorderClass = useClassNamePrefix('dynamic-color-border');\n  const accessibilityTapTargetClass = useClassNamePrefix('accessibility-tap-target');\n\n  const { symmetricalClassName } = useSymmetry(controlButtonClass, isSymmetrical);\n\n  const classProps = classNames(\n    controlButtonClass,\n    getControlButtonSizeClassname(controlButtonClass, size as ControlButtonSize<S>),\n    dynamicColorBackgroundInteractiveClass,\n    accessibilityTapTargetClass,\n    {\n      [controlButtonDisabledClass]: isDisabled,\n      [controlButtonBackgroundClass]: !isSubtle,\n      [dynamicColorBorderClass]: !isSubtle,\n    },\n    symmetricalClassName,\n  );\n\n  return {\n    classProps,\n    props: restProps,\n  };\n}\n"],"names":["getControlButtonSizeClassname","className","size","compose","applySize","useControlButtonStyleProps","props","isDisabled","isSubtle","isSymmetrical","restProps","controlButtonClass","useClassNamePrefix","controlButtonBackgroundClass","controlButtonDisabledClass","dynamicColorBackgroundInteractiveClass","dynamicColorBorderClass","accessibilityTapTargetClass","symmetricalClassName","useSymmetry","classNames"],"mappings":"mRAKMA,EAAgC,CAAWC,EAAmBC,IAClEC,EAAAA,QAAQC,EAAAA,UAAgCF,CAAI,CAAC,EAAED,CAAS,EAEnD,SAASI,EAAqCC,EAAmC,CACtF,KAAM,CAAE,WAAAC,EAAY,SAAAC,EAAU,cAAAC,EAAe,KAAAP,EAAM,GAAGQ,GAAcJ,EAE9DK,EAAqBC,EAAAA,mBAAmB,eAAe,EACvDC,EAA+B,GAAGF,CAAkB,kBACpDG,EAA6B,GAAGH,CAAkB,aAClDI,EAAyCH,EAAAA,mBAAmB,sCAAsC,EAClGI,EAA0BJ,EAAAA,mBAAmB,sBAAsB,EACnEK,EAA8BL,EAAAA,mBAAmB,0BAA0B,EAE3E,CAAE,qBAAAM,CAAA,EAAyBC,cAAYR,EAAoBF,CAAa,EAe9E,MAAO,CACL,WAdiBW,EACjBT,EACAX,EAA8BW,EAAoBT,CAA4B,EAC9Ea,EACAE,EACA,CACE,CAACH,CAA0B,EAAGP,EAC9B,CAACM,CAA4B,EAAG,CAACL,EACjC,CAACQ,CAAuB,EAAG,CAACR,CAAA,EAE9BU,CAAA,EAKA,MAAOR,CAAA,CAEX"}
+{"version":3,"file":"useControlButtonStyleProps.cjs","sources":["../../../src/components/ControlButton/useControlButtonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix, useSymmetry } from '../../hooks';\nimport { type ControlButtonStyleProps, type SizeExtendedDictionaryType } from '../../types';\nimport { applySize, compose } from '../../utils';\n\nconst getControlButtonSizeClassname = <S = void>(className: string, size: SizeExtendedDictionaryType | S): string =>\n  compose(applySize<SizeExtendedDictionaryType | S>(size))(className);\n\nexport function useControlButtonStyleProps<S = void>(props: ControlButtonStyleProps<S>) {\n  const { isDisabled, isSubtle, isSymmetrical, size, ...restProps } = props;\n\n  const controlButtonClass = useClassNamePrefix('ControlButton');\n  const controlButtonBackgroundClass = `${controlButtonClass}--hasBackground`;\n  const controlButtonDisabledClass = `${controlButtonClass}--disabled`;\n  const dynamicColorBackgroundInteractiveClass = useClassNamePrefix('dynamic-color-background-interactive');\n  const dynamicColorBorderClass = useClassNamePrefix('dynamic-color-border');\n  const accessibilityTapTargetClass = useClassNamePrefix('accessibility-tap-target');\n\n  const { symmetricalClassName } = useSymmetry(controlButtonClass, isSymmetrical);\n\n  const classProps = classNames(\n    controlButtonClass,\n    getControlButtonSizeClassname(controlButtonClass, size as SizeExtendedDictionaryType | S),\n    dynamicColorBackgroundInteractiveClass,\n    accessibilityTapTargetClass,\n    {\n      [controlButtonDisabledClass]: isDisabled,\n      [controlButtonBackgroundClass]: !isSubtle,\n      [dynamicColorBorderClass]: !isSubtle,\n    },\n    symmetricalClassName,\n  );\n\n  return {\n    classProps,\n    props: restProps,\n  };\n}\n"],"names":["getControlButtonSizeClassname","className","size","compose","applySize","useControlButtonStyleProps","props","isDisabled","isSubtle","isSymmetrical","restProps","controlButtonClass","useClassNamePrefix","controlButtonBackgroundClass","controlButtonDisabledClass","dynamicColorBackgroundInteractiveClass","dynamicColorBorderClass","accessibilityTapTargetClass","symmetricalClassName","useSymmetry","classNames"],"mappings":"mRAKMA,EAAgC,CAAWC,EAAmBC,IAClEC,EAAAA,QAAQC,EAAAA,UAA0CF,CAAI,CAAC,EAAED,CAAS,EAE7D,SAASI,EAAqCC,EAAmC,CACtF,KAAM,CAAE,WAAAC,EAAY,SAAAC,EAAU,cAAAC,EAAe,KAAAP,EAAM,GAAGQ,GAAcJ,EAE9DK,EAAqBC,EAAAA,mBAAmB,eAAe,EACvDC,EAA+B,GAAGF,CAAkB,kBACpDG,EAA6B,GAAGH,CAAkB,aAClDI,EAAyCH,EAAAA,mBAAmB,sCAAsC,EAClGI,EAA0BJ,EAAAA,mBAAmB,sBAAsB,EACnEK,EAA8BL,EAAAA,mBAAmB,0BAA0B,EAE3E,CAAE,qBAAAM,CAAA,EAAyBC,cAAYR,EAAoBF,CAAa,EAe9E,MAAO,CACL,WAdiBW,EACjBT,EACAX,EAA8BW,EAAoBT,CAAsC,EACxFa,EACAE,EACA,CACE,CAACH,CAA0B,EAAGP,EAC9B,CAACM,CAA4B,EAAG,CAACL,EACjC,CAACQ,CAAuB,EAAG,CAACR,CAAA,EAE9BU,CAAA,EAKA,MAAOR,CAAA,CAEX"}

package/dist/components/ControlButton/useControlButtonStyleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlButtonStyleProps.js","sources":["../../../src/components/ControlButton/useControlButtonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix, useSymmetry } from '../../hooks';\nimport { type ControlButtonSize, type ControlButtonStyleProps } from '../../types';\nimport { applySize, compose } from '../../utils';\n\nconst getControlButtonSizeClassname = <S = void>(className: string, size: ControlButtonSize<S>): string =>\n  compose(applySize<ControlButtonSize<S>>(size))(className);\n\nexport function useControlButtonStyleProps<S = void>(props: ControlButtonStyleProps<S>) {\n  const { isDisabled, isSubtle, isSymmetrical, size, ...restProps } = props;\n\n  const controlButtonClass = useClassNamePrefix('ControlButton');\n  const controlButtonBackgroundClass = `${controlButtonClass}--hasBackground`;\n  const controlButtonDisabledClass = `${controlButtonClass}--disabled`;\n  const dynamicColorBackgroundInteractiveClass = useClassNamePrefix('dynamic-color-background-interactive');\n  const dynamicColorBorderClass = useClassNamePrefix('dynamic-color-border');\n  const accessibilityTapTargetClass = useClassNamePrefix('accessibility-tap-target');\n\n  const { symmetricalClassName } = useSymmetry(controlButtonClass, isSymmetrical);\n\n  const classProps = classNames(\n    controlButtonClass,\n    getControlButtonSizeClassname(controlButtonClass, size as ControlButtonSize<S>),\n    dynamicColorBackgroundInteractiveClass,\n    accessibilityTapTargetClass,\n    {\n      [controlButtonDisabledClass]: isDisabled,\n      [controlButtonBackgroundClass]: !isSubtle,\n      [dynamicColorBorderClass]: !isSubtle,\n    },\n    symmetricalClassName,\n  );\n\n  return {\n    classProps,\n    props: restProps,\n  };\n}\n"],"names":["getControlButtonSizeClassname","className","size","compose","applySize","useControlButtonStyleProps","props","isDisabled","isSubtle","isSymmetrical","restProps","controlButtonClass","useClassNamePrefix","controlButtonBackgroundClass","controlButtonDisabledClass","dynamicColorBackgroundInteractiveClass","dynamicColorBorderClass","accessibilityTapTargetClass","symmetricalClassName","useSymmetry","classNames"],"mappings":";;;;;AAKA,MAAMA,IAAgC,CAAWC,GAAmBC,MAClEC,EAAQC,EAAgCF,CAAI,CAAC,EAAED,CAAS;AAEnD,SAASI,EAAqCC,GAAmC;AACtF,QAAM,EAAE,YAAAC,GAAY,UAAAC,GAAU,eAAAC,GAAe,MAAAP,GAAM,GAAGQ,MAAcJ,GAE9DK,IAAqBC,EAAmB,eAAe,GACvDC,IAA+B,GAAGF,CAAkB,mBACpDG,IAA6B,GAAGH,CAAkB,cAClDI,IAAyCH,EAAmB,sCAAsC,GAClGI,IAA0BJ,EAAmB,sBAAsB,GACnEK,IAA8BL,EAAmB,0BAA0B,GAE3E,EAAE,sBAAAM,EAAA,IAAyBC,EAAYR,GAAoBF,CAAa;AAe9E,SAAO;AAAA,IACL,YAdiBW;AAAA,MACjBT;AAAA,MACAX,EAA8BW,GAAoBT,CAA4B;AAAA,MAC9Ea;AAAA,MACAE;AAAA,MACA;AAAA,QACE,CAACH,CAA0B,GAAGP;AAAA,QAC9B,CAACM,CAA4B,GAAG,CAACL;AAAA,QACjC,CAACQ,CAAuB,GAAG,CAACR;AAAA,MAAA;AAAA,MAE9BU;AAAA,IAAA;AAAA,IAKA,OAAOR;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useControlButtonStyleProps.js","sources":["../../../src/components/ControlButton/useControlButtonStyleProps.ts"],"sourcesContent":["import classNames from 'classnames';\nimport { useClassNamePrefix, useSymmetry } from '../../hooks';\nimport { type ControlButtonStyleProps, type SizeExtendedDictionaryType } from '../../types';\nimport { applySize, compose } from '../../utils';\n\nconst getControlButtonSizeClassname = <S = void>(className: string, size: SizeExtendedDictionaryType | S): string =>\n  compose(applySize<SizeExtendedDictionaryType | S>(size))(className);\n\nexport function useControlButtonStyleProps<S = void>(props: ControlButtonStyleProps<S>) {\n  const { isDisabled, isSubtle, isSymmetrical, size, ...restProps } = props;\n\n  const controlButtonClass = useClassNamePrefix('ControlButton');\n  const controlButtonBackgroundClass = `${controlButtonClass}--hasBackground`;\n  const controlButtonDisabledClass = `${controlButtonClass}--disabled`;\n  const dynamicColorBackgroundInteractiveClass = useClassNamePrefix('dynamic-color-background-interactive');\n  const dynamicColorBorderClass = useClassNamePrefix('dynamic-color-border');\n  const accessibilityTapTargetClass = useClassNamePrefix('accessibility-tap-target');\n\n  const { symmetricalClassName } = useSymmetry(controlButtonClass, isSymmetrical);\n\n  const classProps = classNames(\n    controlButtonClass,\n    getControlButtonSizeClassname(controlButtonClass, size as SizeExtendedDictionaryType | S),\n    dynamicColorBackgroundInteractiveClass,\n    accessibilityTapTargetClass,\n    {\n      [controlButtonDisabledClass]: isDisabled,\n      [controlButtonBackgroundClass]: !isSubtle,\n      [dynamicColorBorderClass]: !isSubtle,\n    },\n    symmetricalClassName,\n  );\n\n  return {\n    classProps,\n    props: restProps,\n  };\n}\n"],"names":["getControlButtonSizeClassname","className","size","compose","applySize","useControlButtonStyleProps","props","isDisabled","isSubtle","isSymmetrical","restProps","controlButtonClass","useClassNamePrefix","controlButtonBackgroundClass","controlButtonDisabledClass","dynamicColorBackgroundInteractiveClass","dynamicColorBorderClass","accessibilityTapTargetClass","symmetricalClassName","useSymmetry","classNames"],"mappings":";;;;;AAKA,MAAMA,IAAgC,CAAWC,GAAmBC,MAClEC,EAAQC,EAA0CF,CAAI,CAAC,EAAED,CAAS;AAE7D,SAASI,EAAqCC,GAAmC;AACtF,QAAM,EAAE,YAAAC,GAAY,UAAAC,GAAU,eAAAC,GAAe,MAAAP,GAAM,GAAGQ,MAAcJ,GAE9DK,IAAqBC,EAAmB,eAAe,GACvDC,IAA+B,GAAGF,CAAkB,mBACpDG,IAA6B,GAAGH,CAAkB,cAClDI,IAAyCH,EAAmB,sCAAsC,GAClGI,IAA0BJ,EAAmB,sBAAsB,GACnEK,IAA8BL,EAAmB,0BAA0B,GAE3E,EAAE,sBAAAM,EAAA,IAAyBC,EAAYR,GAAoBF,CAAa;AAe9E,SAAO;AAAA,IACL,YAdiBW;AAAA,MACjBT;AAAA,MACAX,EAA8BW,GAAoBT,CAAsC;AAAA,MACxFa;AAAA,MACAE;AAAA,MACA;AAAA,QACE,CAACH,CAA0B,GAAGP;AAAA,QAC9B,CAACM,CAA4B,GAAG,CAACL;AAAA,QACjC,CAACQ,CAAuB,GAAG,CAACR;AAAA,MAAA;AAAA,MAE9BU;AAAA,IAAA;AAAA,IAKA,OAAOR;AAAA,EAAA;AAEX;"}

package/dist/components/Dropdown/DropdownPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPopover.cjs","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useStyleProps } from '../../hooks';\nimport { type ChildrenProps, type StyleProps } from '../../types';\nimport { useDropdownContext } from './DropdownContext';\nimport { useDropdownAriaProps } from './useDropdownAriaProps';\nimport { useDropdownStyleProps } from './useDropdownStyleProps';\n\ninterface DropdownPopoverProps extends ChildrenProps, StyleProps {}\n\nconst DropdownPopover = (props: DropdownPopoverProps) => {\n  const { children, ...rest } = props;\n  const { id, isOpen, onToggle, fullWidthMode, placement } = useDropdownContext();\n  const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const { contentProps } = useDropdownAriaProps({ id, isOpen, toggleHandler: onToggle, placement, fullWidthMode });\n\n  return (\n    <div\n      className={classNames(classProps.popover, styleProps.className)}\n      style={styleProps.style}\n      {...contentProps}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nDropdownPopover.spiritComponent = 'DropdownPopover';\n\nexport default DropdownPopover;\n"],"names":["DropdownPopover","props","children","rest","id","isOpen","onToggle","fullWidthMode","placement","useDropdownContext","classProps","modifiedProps","useDropdownStyleProps","styleProps","otherProps","useStyleProps","contentProps","useDropdownAriaProps","jsx","classNames"],"mappings":"kVAYMA,EAAmBC,GAAgC,CACvD,KAAM,CAAE,SAAAC,EAAU,GAAGC,CAAA,EAASF,EACxB,CAAE,GAAAG,EAAI,OAAAC,EAAQ,SAAAC,EAAU,cAAAC,EAAe,UAAAC,CAAA,EAAcC,qBAAA,EACrD,CAAE,WAAAC,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,sBAAsB,CAAE,OAAAP,EAAQ,GAAGF,EAAM,EAChF,CAAA,WAAEU,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/D,CAAE,aAAAK,CAAA,EAAiBC,EAAAA,qBAAqB,CAAE,GAAAb,EAAI,OAAAC,EAAQ,cAAeC,EAAU,UAAAE,EAAW,cAAAD,EAAe,EAE/G,OACEW,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAWT,EAAW,QAASG,EAAW,SAAS,EAC9D,MAAOA,EAAW,MACjB,GAAGG,EACH,GAAGF,EAEH,SAAAZ,CAAA,CAAA,CAGP,EAEAF,EAAgB,gBAAkB"}
+{"version":3,"file":"DropdownPopover.cjs","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useStyleProps } from '../../hooks';\nimport { type SpiritDivElementProps } from '../../types';\nimport { useDropdownContext } from './DropdownContext';\nimport { useDropdownAriaProps } from './useDropdownAriaProps';\nimport { useDropdownStyleProps } from './useDropdownStyleProps';\n\ninterface DropdownPopoverProps extends SpiritDivElementProps {}\n\nconst DropdownPopover = (props: DropdownPopoverProps) => {\n  const { children, ...rest } = props;\n  const { id, isOpen, onToggle, fullWidthMode, placement } = useDropdownContext();\n  const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const { contentProps } = useDropdownAriaProps({ id, isOpen, toggleHandler: onToggle, placement, fullWidthMode });\n\n  return (\n    <div\n      className={classNames(classProps.popover, styleProps.className)}\n      style={styleProps.style}\n      {...contentProps}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nDropdownPopover.spiritComponent = 'DropdownPopover';\n\nexport default DropdownPopover;\n"],"names":["DropdownPopover","props","children","rest","id","isOpen","onToggle","fullWidthMode","placement","useDropdownContext","classProps","modifiedProps","useDropdownStyleProps","styleProps","otherProps","useStyleProps","contentProps","useDropdownAriaProps","jsx","classNames"],"mappings":"kVAYMA,EAAmBC,GAAgC,CACvD,KAAM,CAAE,SAAAC,EAAU,GAAGC,CAAA,EAASF,EACxB,CAAE,GAAAG,EAAI,OAAAC,EAAQ,SAAAC,EAAU,cAAAC,EAAe,UAAAC,CAAA,EAAcC,qBAAA,EACrD,CAAE,WAAAC,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,sBAAsB,CAAE,OAAAP,EAAQ,GAAGF,EAAM,EAChF,CAAA,WAAEU,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/D,CAAE,aAAAK,CAAA,EAAiBC,EAAAA,qBAAqB,CAAE,GAAAb,EAAI,OAAAC,EAAQ,cAAeC,EAAU,UAAAE,EAAW,cAAAD,EAAe,EAE/G,OACEW,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAWT,EAAW,QAASG,EAAW,SAAS,EAC9D,MAAOA,EAAW,MACjB,GAAGG,EACH,GAAGF,EAEH,SAAAZ,CAAA,CAAA,CAGP,EAEAF,EAAgB,gBAAkB"}

package/dist/components/Dropdown/DropdownPopover.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { ChildrenProps, StyleProps } from '../../types';
-interface DropdownPopoverProps extends ChildrenProps, StyleProps {
+import { SpiritDivElementProps } from '../../types';
+interface DropdownPopoverProps extends SpiritDivElementProps {
 }
 declare const DropdownPopover: {
     (props: DropdownPopoverProps): React.JSX.Element;

package/dist/components/Dropdown/DropdownPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPopover.js","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useStyleProps } from '../../hooks';\nimport { type ChildrenProps, type StyleProps } from '../../types';\nimport { useDropdownContext } from './DropdownContext';\nimport { useDropdownAriaProps } from './useDropdownAriaProps';\nimport { useDropdownStyleProps } from './useDropdownStyleProps';\n\ninterface DropdownPopoverProps extends ChildrenProps, StyleProps {}\n\nconst DropdownPopover = (props: DropdownPopoverProps) => {\n  const { children, ...rest } = props;\n  const { id, isOpen, onToggle, fullWidthMode, placement } = useDropdownContext();\n  const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const { contentProps } = useDropdownAriaProps({ id, isOpen, toggleHandler: onToggle, placement, fullWidthMode });\n\n  return (\n    <div\n      className={classNames(classProps.popover, styleProps.className)}\n      style={styleProps.style}\n      {...contentProps}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nDropdownPopover.spiritComponent = 'DropdownPopover';\n\nexport default DropdownPopover;\n"],"names":["DropdownPopover","props","children","rest","id","isOpen","onToggle","fullWidthMode","placement","useDropdownContext","classProps","modifiedProps","useDropdownStyleProps","styleProps","otherProps","useStyleProps","contentProps","useDropdownAriaProps","jsx","classNames"],"mappings":";;;;;;;AAYA,MAAMA,IAAkB,CAACC,MAAgC;AACvD,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAASF,GACxB,EAAE,IAAAG,GAAI,QAAAC,GAAQ,UAAAC,GAAU,eAAAC,GAAe,WAAAC,EAAA,IAAcC,EAAA,GACrD,EAAE,YAAAC,GAAY,OAAOC,EAAA,IAAkBC,EAAsB,EAAE,QAAAP,GAAQ,GAAGF,GAAM,GAChF,EAAE,YAAAU,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,EAAE,cAAAK,EAAA,IAAiBC,EAAqB,EAAE,IAAAb,GAAI,QAAAC,GAAQ,eAAeC,GAAU,WAAAE,GAAW,eAAAD,GAAe;AAE/G,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWT,EAAW,SAASG,EAAW,SAAS;AAAA,MAC9D,OAAOA,EAAW;AAAA,MACjB,GAAGG;AAAA,MACH,GAAGF;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAF,EAAgB,kBAAkB;"}
+{"version":3,"file":"DropdownPopover.js","sources":["../../../src/components/Dropdown/DropdownPopover.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useStyleProps } from '../../hooks';\nimport { type SpiritDivElementProps } from '../../types';\nimport { useDropdownContext } from './DropdownContext';\nimport { useDropdownAriaProps } from './useDropdownAriaProps';\nimport { useDropdownStyleProps } from './useDropdownStyleProps';\n\ninterface DropdownPopoverProps extends SpiritDivElementProps {}\n\nconst DropdownPopover = (props: DropdownPopoverProps) => {\n  const { children, ...rest } = props;\n  const { id, isOpen, onToggle, fullWidthMode, placement } = useDropdownContext();\n  const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const { contentProps } = useDropdownAriaProps({ id, isOpen, toggleHandler: onToggle, placement, fullWidthMode });\n\n  return (\n    <div\n      className={classNames(classProps.popover, styleProps.className)}\n      style={styleProps.style}\n      {...contentProps}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nDropdownPopover.spiritComponent = 'DropdownPopover';\n\nexport default DropdownPopover;\n"],"names":["DropdownPopover","props","children","rest","id","isOpen","onToggle","fullWidthMode","placement","useDropdownContext","classProps","modifiedProps","useDropdownStyleProps","styleProps","otherProps","useStyleProps","contentProps","useDropdownAriaProps","jsx","classNames"],"mappings":";;;;;;;AAYA,MAAMA,IAAkB,CAACC,MAAgC;AACvD,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAASF,GACxB,EAAE,IAAAG,GAAI,QAAAC,GAAQ,UAAAC,GAAU,eAAAC,GAAe,WAAAC,EAAA,IAAcC,EAAA,GACrD,EAAE,YAAAC,GAAY,OAAOC,EAAA,IAAkBC,EAAsB,EAAE,QAAAP,GAAQ,GAAGF,GAAM,GAChF,EAAE,YAAAU,GAAY,OAAOC,EAAA,IAAeC,EAAcJ,CAAa,GAC/D,EAAE,cAAAK,EAAA,IAAiBC,EAAqB,EAAE,IAAAb,GAAI,QAAAC,GAAQ,eAAeC,GAAU,WAAAE,GAAW,eAAAD,GAAe;AAE/G,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWT,EAAW,SAASG,EAAW,SAAS;AAAA,MAC9D,OAAOA,EAAW;AAAA,MACjB,GAAGG;AAAA,MACH,GAAGF;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAF,EAAgB,kBAAkB;"}

package/dist/components/Field/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./HelperText.cjs"),t=require("./Label.cjs"),r=require("./useAriaIds.cjs"),a=require("./ValidationText.cjs");exports.HelperText=e.default;exports.Label=t.default;exports.useAriaIds=r.default;exports.ValidationText=a.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./HelperText.cjs"),t=require("./Label.cjs"),r=require("./ValidationText.cjs");exports.HelperText=e.default;exports.Label=t.default;exports.ValidationText=r.default;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Field/index.d.ts

@@ -1,5 +1,3 @@
 export { default as HelperText } from './HelperText';
 export { default as Label } from './Label';
-export { default as useAriaIds } from './useAriaIds';
 export { default as ValidationText } from './ValidationText';
-export * from './useAriaIds';

package/dist/components/Field/index.js

@@ -1,11 +1,9 @@
 import { default as a } from "./HelperText.js";
 import { default as o } from "./Label.js";
-import { default as s } from "./useAriaIds.js";
-import { default as d } from "./ValidationText.js";
+import { default as l } from "./ValidationText.js";
 export {
   a as HelperText,
   o as Label,
-  d as ValidationText,
-  s as useAriaIds
+  l as ValidationText
 };
 //# sourceMappingURL=index.js.map

package/dist/components/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/Field/types.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode } from 'react';
+import { RegisterType } from '../../hooks/useAriaIdRefs';
 import { ChildrenProps, StyleProps, TransferProps, ValidationTextProp } from '../../types';
-import { RegisterType } from './useAriaIds';
 export interface FieldElementTypeProps<E extends ElementType = 'div'> {
     elementType?: E;
 }

package/dist/components/FieldGroup/FieldGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),S=require("classnames"),j=require("../../hooks/styleProps.cjs"),v=require("../../hooks/useAriaDescribedBy.cjs"),_=require("../Field/HelperText.cjs"),A=require("../Field/useAriaIds.cjs"),F=require("../Field/ValidationText.cjs"),g=require("../Field/useValidationTextRole.cjs"),V=require("../VisuallyHidden/VisuallyHidden.cjs"),D=require("./useFieldGroupStyleProps.cjs"),d=n=>{const{"aria-describedby":u="",children:c,helperText:p,hasValidationIcon:x,id:r,isDisabled:y,isFluid:b,isLabelHidden:T,isRequired:h,label:t,validationState:i,validationText:a,...m}=n,{classProps:s}=D.useFieldGroupStyleProps({isFluid:b,isRequired:h,validationState:i}),{styleProps:l,props:q}=j.useStyleProps(m),[P,o]=A.default(u),f=v.useAriaDescribedBy(P),N=g.useValidationTextRole({validationState:i,validationText:a});return e.jsxs("fieldset",{...q,...l,...f,className:S(s.root,l.className),disabled:y,children:[e.jsx(V.default,{elementType:"legend",children:t}),!T&&e.jsx("div",{className:s.label,"aria-hidden":"true",children:t}),e.jsx("div",{className:s.fields,children:c}),e.jsx(_.default,{UNSAFE_className:s.helperText,id:`${r}__helperText`,registerAria:o,helperText:p}),i&&e.jsx(F.default,{UNSAFE_className:s.validationText,...x&&{hasValidationStateIcon:i},id:`${r}__helperText`,validationText:a,registerAria:o,role:N})]})};d.spiritComponent="FieldGroup";exports.default=d;
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("classnames"),S=require("../../hooks/styleProps.cjs"),j=require("../../hooks/useAriaIdRefs.cjs"),v=require("../Field/HelperText.cjs"),_=require("../Field/ValidationText.cjs"),F=require("../Field/useValidationTextRole.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),A=require("./useFieldGroupStyleProps.cjs"),d=n=>{const{"aria-describedby":u="",children:c,helperText:p,hasValidationIcon:x,id:r,isDisabled:y,isFluid:T,isLabelHidden:b,isRequired:h,label:t,validationState:i,validationText:l,...m}=n,{classProps:s}=A.useFieldGroupStyleProps({isFluid:T,isRequired:h,validationState:i}),{styleProps:a,props:q}=S.useStyleProps(m),[P,o]=j.useAriaDescribedBy(u),f=F.useValidationTextRole({validationState:i,validationText:l});return e.jsxs("fieldset",{...q,...a,...P,className:N(s.root,a.className),disabled:y,children:[e.jsx(g.default,{elementType:"legend",children:t}),!b&&e.jsx("div",{className:s.label,"aria-hidden":"true",children:t}),e.jsx("div",{className:s.fields,children:c}),e.jsx(v.default,{UNSAFE_className:s.helperText,id:`${r}__helperText`,registerAria:o,helperText:p}),i&&e.jsx(_.default,{UNSAFE_className:s.validationText,...x&&{hasValidationStateIcon:i},id:`${r}__helperText`,validationText:l,registerAria:o,role:f})]})};d.spiritComponent="FieldGroup";exports.default=d;
 //# sourceMappingURL=FieldGroup.cjs.map

package/dist/components/FieldGroup/FieldGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.cjs","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type SpiritFieldGroupProps } from '../../types';\nimport { HelperText, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useFieldGroupStyleProps } from './useFieldGroupStyleProps';\n\nconst FieldGroup = (props: SpiritFieldGroupProps) => {\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    children,\n    helperText,\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isFluid,\n    isLabelHidden,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    ...rest\n  } = props;\n\n  const { classProps } = useFieldGroupStyleProps({ hasValidationIcon, isFluid, isRequired, validationState });\n  const { styleProps, props: transferProps } = useStyleProps(rest);\n  const [ids, register] = useAriaIds(ariaDescribedBy);\n  const ariaDescribedByProp = useAriaDescribedBy(ids);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  return (\n    <fieldset\n      {...transferProps}\n      {...styleProps}\n      {...ariaDescribedByProp}\n      className={classNames(classProps.root, styleProps.className)}\n      disabled={isDisabled}\n    >\n      <VisuallyHidden elementType=\"legend\">{label}</VisuallyHidden>\n      {!isLabelHidden && (\n        <div className={classProps.label} aria-hidden=\"true\">\n          {label}\n        </div>\n      )}\n      <div className={classProps.fields}>{children}</div>\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}__helperText`}\n          validationText={validationText}\n          registerAria={register}\n          role={validationTextRole}\n        />\n      )}\n    </fieldset>\n  );\n};\n\nFieldGroup.spiritComponent = 'FieldGroup';\n\nexport default FieldGroup;\n"],"names":["FieldGroup","props","ariaDescribedBy","children","helperText","hasValidationIcon","id","isDisabled","isFluid","isLabelHidden","isRequired","label","validationState","validationText","rest","classProps","useFieldGroupStyleProps","styleProps","transferProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","VisuallyHidden","HelperText","ValidationText"],"mappings":"8gBAWMA,EAAcC,GAAiC,CACnD,KAAM,CACJ,mBAAoBC,EAAkB,GACtC,SAAAC,EACA,WAAAC,EACA,kBAAAC,EACA,GAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,WAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDb,EAEE,CAAE,WAAAc,GAAeC,EAAAA,wBAAwB,CAAqB,QAAAR,EAAS,WAAAE,EAAY,gBAAAE,EAAiB,EACpG,CAAA,WAAEK,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,cAAcL,CAAI,EACzD,CAACM,EAAKC,CAAQ,EAAIC,EAAAA,QAAWpB,CAAe,EAC5CqB,EAAsBC,EAAAA,mBAAmBJ,CAAG,EAC5CK,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAd,EACA,eAAAC,CAAA,CACD,EAED,OACEc,EAAAA,KAAC,WAAA,CACE,GAAGT,EACH,GAAGD,EACH,GAAGM,EACJ,UAAWK,EAAWb,EAAW,KAAME,EAAW,SAAS,EAC3D,SAAUV,EAEV,SAAA,CAAAsB,EAAAA,IAACC,EAAAA,QAAA,CAAe,YAAY,SAAU,SAAAnB,EAAM,EAC3C,CAACF,GACAoB,EAAAA,IAAC,MAAA,CAAI,UAAWd,EAAW,MAAO,cAAY,OAC3C,SAAAJ,CAAA,CACH,EAEFkB,EAAAA,IAAC,MAAA,CAAI,UAAWd,EAAW,OAAS,SAAAZ,EAAS,EAC7C0B,EAAAA,IAACE,EAAAA,QAAA,CACC,iBAAkBhB,EAAW,WAC7B,GAAI,GAAGT,CAAE,eACT,aAAce,EACd,WAAAjB,CAAA,CAAA,EAEDQ,GACCiB,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBjB,EAAW,eAC5B,GAAIV,GAAqB,CAAE,uBAAwBO,CAAA,EACpD,GAAI,GAAGN,CAAE,eACT,eAAAO,EACA,aAAcQ,EACd,KAAMI,CAAA,CAAA,CACR,CAAA,CAAA,CAIR,EAEAzB,EAAW,gBAAkB"}
+{"version":3,"file":"FieldGroup.cjs","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type SpiritFieldGroupProps } from '../../types';\nimport { HelperText, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useFieldGroupStyleProps } from './useFieldGroupStyleProps';\n\nconst FieldGroup = (props: SpiritFieldGroupProps) => {\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    children,\n    helperText,\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isFluid,\n    isLabelHidden,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    ...rest\n  } = props;\n\n  const { classProps } = useFieldGroupStyleProps({ hasValidationIcon, isFluid, isRequired, validationState });\n  const { styleProps, props: transferProps } = useStyleProps(rest);\n  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  return (\n    <fieldset\n      {...transferProps}\n      {...styleProps}\n      {...ariaDescribedByProp}\n      className={classNames(classProps.root, styleProps.className)}\n      disabled={isDisabled}\n    >\n      <VisuallyHidden elementType=\"legend\">{label}</VisuallyHidden>\n      {!isLabelHidden && (\n        <div className={classProps.label} aria-hidden=\"true\">\n          {label}\n        </div>\n      )}\n      <div className={classProps.fields}>{children}</div>\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}__helperText`}\n          validationText={validationText}\n          registerAria={register}\n          role={validationTextRole}\n        />\n      )}\n    </fieldset>\n  );\n};\n\nFieldGroup.spiritComponent = 'FieldGroup';\n\nexport default FieldGroup;\n"],"names":["FieldGroup","props","ariaDescribedBy","children","helperText","hasValidationIcon","id","isDisabled","isFluid","isLabelHidden","isRequired","label","validationState","validationText","rest","classProps","useFieldGroupStyleProps","styleProps","transferProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","VisuallyHidden","HelperText","ValidationText"],"mappings":"oeAWMA,EAAcC,GAAiC,CACnD,KAAM,CACJ,mBAAoBC,EAAkB,GACtC,SAAAC,EACA,WAAAC,EACA,kBAAAC,EACA,GAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,WAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDb,EAEE,CAAE,WAAAc,GAAeC,EAAAA,wBAAwB,CAAqB,QAAAR,EAAS,WAAAE,EAAY,gBAAAE,EAAiB,EACpG,CAAA,WAAEK,EAAY,MAAOC,CAAA,EAAkBC,EAAAA,cAAcL,CAAI,EACzD,CAACM,EAAqBC,CAAQ,EAAIC,EAAAA,mBAAmBpB,CAAe,EACpEqB,EAAqBC,EAAAA,sBAAsB,CAC/C,gBAAAZ,EACA,eAAAC,CAAA,CACD,EAED,OACEY,EAAAA,KAAC,WAAA,CACE,GAAGP,EACH,GAAGD,EACH,GAAGG,EACJ,UAAWM,EAAWX,EAAW,KAAME,EAAW,SAAS,EAC3D,SAAUV,EAEV,SAAA,CAAAoB,EAAAA,IAACC,EAAAA,QAAA,CAAe,YAAY,SAAU,SAAAjB,EAAM,EAC3C,CAACF,GACAkB,EAAAA,IAAC,MAAA,CAAI,UAAWZ,EAAW,MAAO,cAAY,OAC3C,SAAAJ,CAAA,CACH,EAEFgB,EAAAA,IAAC,MAAA,CAAI,UAAWZ,EAAW,OAAS,SAAAZ,EAAS,EAC7CwB,EAAAA,IAACE,EAAAA,QAAA,CACC,iBAAkBd,EAAW,WAC7B,GAAI,GAAGT,CAAE,eACT,aAAce,EACd,WAAAjB,CAAA,CAAA,EAEDQ,GACCe,EAAAA,IAACG,EAAAA,QAAA,CACC,iBAAkBf,EAAW,eAC5B,GAAIV,GAAqB,CAAE,uBAAwBO,CAAA,EACpD,GAAI,GAAGN,CAAE,eACT,eAAAO,EACA,aAAcQ,EACd,KAAME,CAAA,CAAA,CACR,CAAA,CAAA,CAIR,EAEAvB,EAAW,gBAAkB"}

package/dist/components/FieldGroup/FieldGroup.js

@@ -1,15 +1,14 @@
 "use client";
-import { jsxs as A, jsx as i } from "react/jsx-runtime";
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
 import F from "classnames";
 import { useStyleProps as P } from "../../hooks/styleProps.js";
-import { useAriaDescribedBy as S } from "../../hooks/useAriaDescribedBy.js";
+import { useAriaDescribedBy as S } from "../../hooks/useAriaIdRefs.js";
 import _ from "../Field/HelperText.js";
-import V from "../Field/useAriaIds.js";
-import g from "../Field/ValidationText.js";
-import { useValidationTextRole as D } from "../Field/useValidationTextRole.js";
-import B from "../VisuallyHidden/VisuallyHidden.js";
-import { useFieldGroupStyleProps as G } from "./useFieldGroupStyleProps.js";
-const H = (d) => {
+import A from "../Field/ValidationText.js";
+import { useValidationTextRole as V } from "../Field/useValidationTextRole.js";
+import g from "../VisuallyHidden/VisuallyHidden.js";
+import { useFieldGroupStyleProps as D } from "./useFieldGroupStyleProps.js";
+const B = (d) => {
   const {
     "aria-describedby": n = "",
     children: p,
@@ -24,20 +23,20 @@ const H = (d) => {
     validationState: r,
     validationText: a,
     ...T
-  } = d, { classProps: e } = G({ isFluid: f, isRequired: h, validationState: r }), { styleProps: o, props: b } = P(T), [y, l] = V(n), N = S(y), v = D({
+  } = d, { classProps: e } = D({ isFluid: f, isRequired: h, validationState: r }), { styleProps: o, props: b } = P(T), [y, l] = S(n), N = V({
     validationState: r,
     validationText: a
   });
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ v(
     "fieldset",
     {
       ...b,
       ...o,
-      ...N,
+      ...y,
       className: F(e.root, o.className),
       disabled: u,
       children: [
-        /* @__PURE__ */ i(B, { elementType: "legend", children: t }),
+        /* @__PURE__ */ i(g, { elementType: "legend", children: t }),
         !x && /* @__PURE__ */ i("div", { className: e.label, "aria-hidden": "true", children: t }),
         /* @__PURE__ */ i("div", { className: e.fields, children: p }),
         /* @__PURE__ */ i(
@@ -50,22 +49,22 @@ const H = (d) => {
           }
         ),
         r && /* @__PURE__ */ i(
-          g,
+          A,
           {
             UNSAFE_className: e.validationText,
             ...c && { hasValidationStateIcon: r },
             id: `${s}__helperText`,
             validationText: a,
             registerAria: l,
-            role: v
+            role: N
           }
         )
       ]
     }
   );
 };
-H.spiritComponent = "FieldGroup";
+B.spiritComponent = "FieldGroup";
 export {
-  H as default
+  B as default
 };
 //# sourceMappingURL=FieldGroup.js.map

package/dist/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type SpiritFieldGroupProps } from '../../types';\nimport { HelperText, ValidationText, useAriaIds } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useFieldGroupStyleProps } from './useFieldGroupStyleProps';\n\nconst FieldGroup = (props: SpiritFieldGroupProps) => {\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    children,\n    helperText,\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isFluid,\n    isLabelHidden,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    ...rest\n  } = props;\n\n  const { classProps } = useFieldGroupStyleProps({ hasValidationIcon, isFluid, isRequired, validationState });\n  const { styleProps, props: transferProps } = useStyleProps(rest);\n  const [ids, register] = useAriaIds(ariaDescribedBy);\n  const ariaDescribedByProp = useAriaDescribedBy(ids);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  return (\n    <fieldset\n      {...transferProps}\n      {...styleProps}\n      {...ariaDescribedByProp}\n      className={classNames(classProps.root, styleProps.className)}\n      disabled={isDisabled}\n    >\n      <VisuallyHidden elementType=\"legend\">{label}</VisuallyHidden>\n      {!isLabelHidden && (\n        <div className={classProps.label} aria-hidden=\"true\">\n          {label}\n        </div>\n      )}\n      <div className={classProps.fields}>{children}</div>\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}__helperText`}\n          validationText={validationText}\n          registerAria={register}\n          role={validationTextRole}\n        />\n      )}\n    </fieldset>\n  );\n};\n\nFieldGroup.spiritComponent = 'FieldGroup';\n\nexport default FieldGroup;\n"],"names":["FieldGroup","props","ariaDescribedBy","children","helperText","hasValidationIcon","id","isDisabled","isFluid","isLabelHidden","isRequired","label","validationState","validationText","rest","classProps","useFieldGroupStyleProps","styleProps","transferProps","useStyleProps","ids","register","useAriaIds","ariaDescribedByProp","useAriaDescribedBy","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","VisuallyHidden","HelperText","ValidationText"],"mappings":";;;;;;;;;;;AAWA,MAAMA,IAAa,CAACC,MAAiC;AACnD,QAAM;AAAA,IACJ,oBAAoBC,IAAkB;AAAA,IACtC,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEE,EAAE,YAAAc,MAAeC,EAAwB,EAAqB,SAAAR,GAAS,YAAAE,GAAY,iBAAAE,GAAiB,GACpG,EAAE,YAAAK,GAAY,OAAOC,EAAA,IAAkBC,EAAcL,CAAI,GACzD,CAACM,GAAKC,CAAQ,IAAIC,EAAWpB,CAAe,GAC5CqB,IAAsBC,EAAmBJ,CAAG,GAC5CK,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAd;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGT;AAAA,MACH,GAAGD;AAAA,MACH,GAAGM;AAAA,MACJ,WAAWK,EAAWb,EAAW,MAAME,EAAW,SAAS;AAAA,MAC3D,UAAUV;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAsB,EAACC,GAAA,EAAe,aAAY,UAAU,UAAAnB,GAAM;AAAA,QAC3C,CAACF,KACA,gBAAAoB,EAAC,OAAA,EAAI,WAAWd,EAAW,OAAO,eAAY,QAC3C,UAAAJ,EAAA,CACH;AAAA,QAEF,gBAAAkB,EAAC,OAAA,EAAI,WAAWd,EAAW,QAAS,UAAAZ,GAAS;AAAA,QAC7C,gBAAA0B;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,kBAAkBhB,EAAW;AAAA,YAC7B,IAAI,GAAGT,CAAE;AAAA,YACT,cAAce;AAAA,YACd,YAAAjB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDQ,KACC,gBAAAiB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,kBAAkBjB,EAAW;AAAA,YAC5B,GAAIV,KAAqB,EAAE,wBAAwBO,EAAA;AAAA,YACpD,IAAI,GAAGN,CAAE;AAAA,YACT,gBAAAO;AAAA,YACA,cAAcQ;AAAA,YACd,MAAMI;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAzB,EAAW,kBAAkB;"}
+{"version":3,"file":"FieldGroup.js","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"sourcesContent":["'use client';\n\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useAriaDescribedBy, useStyleProps } from '../../hooks';\nimport { type SpiritFieldGroupProps } from '../../types';\nimport { HelperText, ValidationText } from '../Field';\nimport { useValidationTextRole } from '../Field/useValidationTextRole';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useFieldGroupStyleProps } from './useFieldGroupStyleProps';\n\nconst FieldGroup = (props: SpiritFieldGroupProps) => {\n  const {\n    'aria-describedby': ariaDescribedBy = '',\n    children,\n    helperText,\n    hasValidationIcon,\n    id,\n    isDisabled,\n    isFluid,\n    isLabelHidden,\n    isRequired,\n    label,\n    validationState,\n    validationText,\n    ...rest\n  } = props;\n\n  const { classProps } = useFieldGroupStyleProps({ hasValidationIcon, isFluid, isRequired, validationState });\n  const { styleProps, props: transferProps } = useStyleProps(rest);\n  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);\n  const validationTextRole = useValidationTextRole({\n    validationState,\n    validationText,\n  });\n\n  return (\n    <fieldset\n      {...transferProps}\n      {...styleProps}\n      {...ariaDescribedByProp}\n      className={classNames(classProps.root, styleProps.className)}\n      disabled={isDisabled}\n    >\n      <VisuallyHidden elementType=\"legend\">{label}</VisuallyHidden>\n      {!isLabelHidden && (\n        <div className={classProps.label} aria-hidden=\"true\">\n          {label}\n        </div>\n      )}\n      <div className={classProps.fields}>{children}</div>\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}__helperText`}\n          validationText={validationText}\n          registerAria={register}\n          role={validationTextRole}\n        />\n      )}\n    </fieldset>\n  );\n};\n\nFieldGroup.spiritComponent = 'FieldGroup';\n\nexport default FieldGroup;\n"],"names":["FieldGroup","props","ariaDescribedBy","children","helperText","hasValidationIcon","id","isDisabled","isFluid","isLabelHidden","isRequired","label","validationState","validationText","rest","classProps","useFieldGroupStyleProps","styleProps","transferProps","useStyleProps","ariaDescribedByProp","register","useAriaDescribedBy","validationTextRole","useValidationTextRole","jsxs","classNames","jsx","VisuallyHidden","HelperText","ValidationText"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAa,CAACC,MAAiC;AACnD,QAAM;AAAA,IACJ,oBAAoBC,IAAkB;AAAA,IACtC,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEE,EAAE,YAAAc,MAAeC,EAAwB,EAAqB,SAAAR,GAAS,YAAAE,GAAY,iBAAAE,GAAiB,GACpG,EAAE,YAAAK,GAAY,OAAOC,EAAA,IAAkBC,EAAcL,CAAI,GACzD,CAACM,GAAqBC,CAAQ,IAAIC,EAAmBpB,CAAe,GACpEqB,IAAqBC,EAAsB;AAAA,IAC/C,iBAAAZ;AAAA,IACA,gBAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGP;AAAA,MACH,GAAGD;AAAA,MACH,GAAGG;AAAA,MACJ,WAAWM,EAAWX,EAAW,MAAME,EAAW,SAAS;AAAA,MAC3D,UAAUV;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAoB,EAACC,GAAA,EAAe,aAAY,UAAU,UAAAjB,GAAM;AAAA,QAC3C,CAACF,KACA,gBAAAkB,EAAC,OAAA,EAAI,WAAWZ,EAAW,OAAO,eAAY,QAC3C,UAAAJ,EAAA,CACH;AAAA,QAEF,gBAAAgB,EAAC,OAAA,EAAI,WAAWZ,EAAW,QAAS,UAAAZ,GAAS;AAAA,QAC7C,gBAAAwB;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,kBAAkBd,EAAW;AAAA,YAC7B,IAAI,GAAGT,CAAE;AAAA,YACT,cAAce;AAAA,YACd,YAAAjB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDQ,KACC,gBAAAe;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,kBAAkBf,EAAW;AAAA,YAC5B,GAAIV,KAAqB,EAAE,wBAAwBO,EAAA;AAAA,YACpD,IAAI,GAAGN,CAAE;AAAA,YACT,gBAAAO;AAAA,YACA,cAAcQ;AAAA,YACd,MAAME;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAvB,EAAW,kBAAkB;"}

package/dist/components/FileUploader/FileUploaderInput.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),Q=require("classnames"),x=require("react"),z=require("../../hooks/styleProps.cjs"),w=require("../../hooks/useAriaDescribedBy.cjs"),G=require("../Field/HelperText.cjs"),D=require("../Field/Label.cjs"),J=require("../Field/useAriaIds.cjs"),K=require("../Field/ValidationText.cjs"),W=require("../Field/useValidationTextRole.cjs"),X=require("../Icon/Icon.cjs"),b=require("./constants.cjs"),Y=require("./useFileUploaderInput.cjs"),ee=require("./useFileUploaderStyleProps.cjs"),g=v=>{const[i,F]=x.useState(!1),{accept:o,"aria-describedby":T="",dropZoneRef:f,hasValidationIcon:h,helperText:q,iconName:E="upload",id:t,inputRef:I,isDisabled:r,isLabelHidden:N,isMultiple:n,isRequired:S,label:_,labelText:y,linkText:U,maxFileSize:A=b.DEFAULT_FILE_SIZE_LIMIT,maxUploadedFiles:L=b.DEFAULT_FILE_QUEUE_LIMIT,onError:j,queueLimitBehavior:l="none",validationState:a,validationText:d,...u}=v,{isDisabledByQueueLimitBehavior:p,isDragging:P,isDropZoneHidden:R,onChange:B,onDragEnter:M,onDragLeave:V,onDragOver:Z,onDrop:H}=Y.useFileUploaderInput({accept:o,isMultiple:n,maxFileSize:A,maxUploadedFiles:L,onError:j,queueLimitBehavior:l}),{classProps:s}=ee.useFileUploaderStyleProps({isDisabled:r,isDisabledByQueueLimitBehavior:p,isDragAndDropSupported:i,isDragging:P,isDropZoneHidden:R,isLabelHidden:N,isRequired:S,queueLimitBehavior:l,validationState:a}),{styleProps:c,props:O}=z.useStyleProps(u),[$,m]=J.default(T),k=w.useAriaDescribedBy($),C=W.useValidationTextRole({validationState:a,validationText:d});return x.useEffect(()=>{F("draggable"in document.createElement("span"))},[]),e.jsxs("div",{...O,...c,onDragOver:!r&&i?Z:void 0,onDragEnter:!r&&i?M:void 0,onDragLeave:!r&&i?V:void 0,onDrop:!r&&i?H:void 0,className:Q(s.input.root,c.className),children:[e.jsx(D.default,{htmlFor:t,UNSAFE_className:s.input.label,children:_}),e.jsx("input",{...k,type:"file",accept:o,id:t,ref:I,className:s.input.input,onChange:B,multiple:n,disabled:r||p,...u}),e.jsxs("div",{ref:f,className:s.input.dropZone.root,children:[e.jsx(X.default,{name:E,"aria-hidden":"true"}),e.jsxs(D.default,{htmlFor:t,UNSAFE_className:s.input.dropZone.label,children:[e.jsx("span",{className:s.input.link,children:U})," ",e.jsx("span",{className:s.input.dropLabel,children:y})]}),e.jsx(G.default,{UNSAFE_className:s.input.helper,id:`${t}__helperText`,registerAria:m,helperText:q})]}),a&&e.jsx(K.default,{UNSAFE_className:s.input.validationText,elementType:"span",...h&&{hasValidationStateIcon:a},id:`${t}__validationText`,validationText:d,registerAria:m,role:C})]})};g.spiritComponent="FileUploaderInput";exports.default=g;
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),Q=require("classnames"),x=require("react"),z=require("../../hooks/styleProps.cjs"),w=require("../../hooks/useAriaIdRefs.cjs"),G=require("../Field/HelperText.cjs"),D=require("../Field/Label.cjs"),J=require("../Field/ValidationText.cjs"),K=require("../Field/useValidationTextRole.cjs"),W=require("../Icon/Icon.cjs"),g=require("./constants.cjs"),X=require("./useFileUploaderInput.cjs"),Y=require("./useFileUploaderStyleProps.cjs"),v=b=>{const[i,F]=x.useState(!1),{accept:o,"aria-describedby":T="",dropZoneRef:f,hasValidationIcon:h,helperText:E,iconName:I="upload",id:t,inputRef:N,isDisabled:r,isLabelHidden:S,isMultiple:n,isRequired:_,label:q,labelText:U,linkText:y,maxFileSize:L=g.DEFAULT_FILE_SIZE_LIMIT,maxUploadedFiles:j=g.DEFAULT_FILE_QUEUE_LIMIT,name:A,onError:P,queueLimitBehavior:l="none",validationState:a,validationText:d,...u}=b,{isDisabledByQueueLimitBehavior:p,isDragging:R,isDropZoneHidden:B,onChange:M,onDragEnter:V,onDragLeave:Z,onDragOver:H,onDrop:O}=X.useFileUploaderInput({accept:o,isMultiple:n,maxFileSize:L,maxUploadedFiles:j,onError:P,queueLimitBehavior:l}),{classProps:s}=Y.useFileUploaderStyleProps({isDisabled:r,isDisabledByQueueLimitBehavior:p,isDragAndDropSupported:i,isDragging:R,isDropZoneHidden:B,isLabelHidden:S,isRequired:_,queueLimitBehavior:l,validationState:a}),{styleProps:c,props:$}=z.useStyleProps(u),[k,m]=w.useAriaDescribedBy(T),C=K.useValidationTextRole({validationState:a,validationText:d});return x.useEffect(()=>{F("draggable"in document.createElement("span"))},[]),e.jsxs("div",{...$,...c,onDragOver:!r&&i?H:void 0,onDragEnter:!r&&i?V:void 0,onDragLeave:!r&&i?Z:void 0,onDrop:!r&&i?O:void 0,className:Q(s.input.root,c.className),children:[e.jsx(D.default,{htmlFor:t,UNSAFE_className:s.input.label,children:q}),e.jsx("input",{...k,type:"file",accept:o,id:t,ref:N,name:A,className:s.input.input,onChange:M,multiple:n,disabled:r||p,...u}),e.jsxs("div",{ref:f,className:s.input.dropZone.root,children:[e.jsx(W.default,{name:I,"aria-hidden":"true"}),e.jsxs(D.default,{htmlFor:t,UNSAFE_className:s.input.dropZone.label,children:[e.jsx("span",{className:s.input.link,children:y})," ",e.jsx("span",{className:s.input.dropLabel,children:U})]}),e.jsx(G.default,{UNSAFE_className:s.input.helper,id:`${t}__helperText`,registerAria:m,helperText:E})]}),a&&e.jsx(J.default,{UNSAFE_className:s.input.validationText,elementType:"span",...h&&{hasValidationStateIcon:a},id:`${t}__validationText`,validationText:d,registerAria:m,role:C})]})};v.spiritComponent="FileUploaderInput";exports.default=v;
 //# sourceMappingURL=FileUploaderInput.cjs.map