@spark-ui/components 14.1.2 → 15.0.0

package/dist/FormFieldRequiredIndicator-CHfcoT2y.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),a=require("class-variance-authority"),c=require("./label/index.js"),e=({className:r,ref:i,...s})=>t.jsx(c.Label.RequiredIndicator,{ref:i,className:a.cx("ml-sm",r),...s});e.displayName="FormField.RequiredIndicator";exports.FormFieldRequiredIndicator=e;
+//# sourceMappingURL=FormFieldRequiredIndicator-CHfcoT2y.js.map

package/dist/FormFieldRequiredIndicator-CHfcoT2y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldRequiredIndicator-CHfcoT2y.js","sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"names":["FormFieldRequiredIndicator","className","ref","props","jsx","Label","cx"],"mappings":"sHASaA,EAA6B,CAAC,CACzC,UAAAC,EACA,IAAAC,EACA,GAAGC,CACL,IACSC,MAACC,EAAAA,MAAM,kBAAN,CAAwB,IAAAH,EAAU,UAAWI,EAAAA,GAAG,QAASL,CAAS,EAAI,GAAGE,CAAA,CAAO,EAG1FH,EAA2B,YAAc"}

package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cx as m } from "class-variance-authority";
+import { Label as a } from "./label/index.mjs";
+const d = ({
+  className: r,
+  ref: e,
+  ...o
+}) => /* @__PURE__ */ i(a.RequiredIndicator, { ref: e, className: m("ml-sm", r), ...o });
+d.displayName = "FormField.RequiredIndicator";
+export {
+  d as F
+};
+//# sourceMappingURL=FormFieldRequiredIndicator-DTnCGiX2.mjs.map

package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldRequiredIndicator-DTnCGiX2.mjs","sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"names":["FormFieldRequiredIndicator","className","ref","props","jsx","Label","cx"],"mappings":";;;AASO,MAAMA,IAA6B,CAAC;AAAA,EACzC,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MACS,gBAAAC,EAACC,EAAM,mBAAN,EAAwB,KAAAH,GAAU,WAAWI,EAAG,SAASL,CAAS,GAAI,GAAGE,EAAA,CAAO;AAG1FH,EAA2B,cAAc;"}

package/dist/form-field/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),F=require("class-variance-authority"),i=require("react"),$=require("../Slot-DQ8z2zsy.js"),V=require("@spark-ui/icons/AlertOutline"),w=require("@spark-ui/icons/Check"),W=require("@spark-ui/icons/WarningOutline"),M=require("../Icon-CF0W0LKr.js"),E=require("../label/index.js"),I=i.createContext(null),j=":form-field",y=()=>{const s=i.useContext(I);if(!s)throw Error("useFormField must be used within a FormField provider");return s},O=({id:s,name:e,disabled:a=!1,readOnly:l=!1,state:t,isRequired:n,children:d})=>{const o=`${j}-label-${i.useId()}`,[c,m]=i.useState([]),u=c.length>0?c.join(" "):void 0,g=i.useCallback(x=>{m(N=>[...N,x])},[]),A=i.useCallback(x=>{m(N=>N.filter(z=>z!==x))},[]),T=i.useMemo(()=>({id:s,labelId:o,name:e,disabled:a,readOnly:l,state:t,isRequired:n,isInvalid:t==="error",description:u,onMessageIdAdd:g,onMessageIdRemove:A}),[s,o,e,a,l,u,t,n,g,A]);return r.jsx(I.Provider,{value:T,children:d})};O.displayName="FormFieldProvider";const L=({className:s,disabled:e=!1,readOnly:a=!1,name:l,state:t,isRequired:n=!1,asChild:d=!1,ref:o,...c})=>{const m=`${j}-${i.useId()}`,u=d?$.Slot:"div";return r.jsx(O,{id:m,name:l,isRequired:n,disabled:e,readOnly:a,state:t,children:r.jsx(u,{ref:o,"data-spark-component":"form-field",className:F.cx(s,"gap-sm flex flex-col"),...c})})};L.displayName="FormField";const f=({id:s,className:e,ref:a,...l})=>{const{onMessageIdAdd:t,onMessageIdRemove:n}=y(),d=`${j}-message-${i.useId()}`,o=s||d;return i.useEffect(()=>(t(o),()=>{n(o)}),[o,t,n]),r.jsx("span",{ref:a,id:o,"data-spark-component":"form-field-message",className:F.cx(e,"text-caption"),...l})};f.displayName="FormField.Message";const p=({className:s,state:e,children:a,ref:l,...t})=>y().state!==e?null:r.jsxs(f,{ref:l,"data-spark-component":"form-field-state-message",className:F.cx("gap-sm flex items-center",e==="error"?"text-error":"text-on-surface/dim-1",s),...t,children:[e==="alert"&&r.jsx(M.Icon,{size:"sm",children:r.jsx(W.WarningOutline,{})}),e==="error"&&r.jsx(M.Icon,{size:"sm",intent:"error",children:r.jsx(V.AlertOutline,{})}),e==="success"&&r.jsx(M.Icon,{size:"sm",children:r.jsx(w.Check,{})}),a]});p.displayName="FormField.StateMessage";const C=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-alert-message",state:"alert",...e});C.displayName="FormField.AlertMessage";const b=({className:s,value:e="",maxLength:a,description:l,liveAnnouncement:t,ref:n,...d})=>{const[o,c]=i.useState(e);return i.useEffect(()=>{const m=setTimeout(()=>{c(e)},1e3);return()=>clearTimeout(m)},[e]),r.jsxs("span",{className:"ml-auto self-start",children:[l&&r.jsx(f,{className:"default:sr-only",children:l}),r.jsx("span",{ref:n,"aria-hidden":!0,"data-spark-component":"form-field-characters-count",className:F.cx(s,"text-caption","text-neutral"),...d,children:`${e.length}/${a}`}),t&&r.jsx("span",{className:"sr-only","aria-live":"polite",children:t({remainingChars:a-o.length})})]})};b.displayName="FormField.CharactersCount";const P=()=>{const{id:s,name:e,description:a,disabled:l,readOnly:t,state:n,labelId:d,isInvalid:o,isRequired:c}=i.useContext(I)||{};return{id:s,name:e,description:a,disabled:l,readOnly:t,state:n,labelId:d,isInvalid:o,isRequired:c}},q=({children:s})=>{const e=P();return r.jsx(r.Fragment,{children:s(e)})};q.displayName="FormField.Control";const S=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-error-message",state:"error",...e});S.displayName="FormField.ErrorMessage";const v=({className:s,ref:e,...a})=>r.jsx(f,{ref:e,"data-spark-component":"form-field-helper-message",className:F.cx("text-on-surface/dim-1",s),...a});v.displayName="FormField.HelperMessage";const h=({className:s,ref:e,...a})=>r.jsx(E.Label.RequiredIndicator,{ref:e,className:F.cx("ml-sm",s),...a});h.displayName="FormField.RequiredIndicator";const k=({htmlFor:s,className:e,children:a,requiredIndicator:l=r.jsx(h,{}),asChild:t,ref:n,...d})=>{const o=y(),{disabled:c,labelId:m,isRequired:u}=o,g=t?void 0:s||o.id;return r.jsx(E.Label,{ref:n,id:m,"data-spark-component":"form-field-label",htmlFor:g,className:F.cx(e,c?"text-on-surface/dim-3 pointer-events-none":void 0),asChild:t,...d,children:r.jsxs(r.Fragment,{children:[r.jsx($.Slottable,{children:a}),u&&l]})})};k.displayName="FormField.Label";const R=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-success-message",state:"success",...e});R.displayName="FormField.SuccessMessage";const H=Object.assign(L,{Label:k,Control:q,StateMessage:p,SuccessMessage:R,AlertMessage:C,ErrorMessage:S,HelperMessage:v,RequiredIndicator:h,CharactersCount:b});H.displayName="FormField";k.displayName="FormField.Label";q.displayName="FormField.Control";p.displayName="FormField.StateMessage";R.displayName="FormField.SuccessMessage";C.displayName="FormField.AlertMessage";S.displayName="FormField.ErrorMessage";v.displayName="FormField.HelperMessage";h.displayName="FormField.RequiredIndicator";b.displayName="FormField.CharactersCount";exports.FormField=H;exports.useFormFieldControl=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("class-variance-authority"),n=require("react"),$=require("../Slot-DQ8z2zsy.js"),z=require("@spark-ui/icons/AlertOutline"),V=require("@spark-ui/icons/Check"),w=require("@spark-ui/icons/WarningOutline"),I=require("../Icon-CF0W0LKr.js"),W=require("../label/index.js"),M=require("../FormFieldRequiredIndicator-CHfcoT2y.js"),N=n.createContext(null),j=":form-field",y=()=>{const s=n.useContext(N);if(!s)throw Error("useFormField must be used within a FormField provider");return s},E=({id:s,name:e,disabled:t=!1,readOnly:l=!1,state:o,isRequired:i,children:d})=>{const a=`${j}-label-${n.useId()}`,[c,m]=n.useState([]),F=c.length>0?c.join(" "):void 0,g=n.useCallback(x=>{m(h=>[...h,x])},[]),A=n.useCallback(x=>{m(h=>h.filter(T=>T!==x))},[]),L=n.useMemo(()=>({id:s,labelId:a,name:e,disabled:t,readOnly:l,state:o,isRequired:i,isInvalid:o==="error",description:F,onMessageIdAdd:g,onMessageIdRemove:A}),[s,a,e,t,l,F,o,i,g,A]);return r.jsx(N.Provider,{value:L,children:d})};E.displayName="FormFieldProvider";const O=({className:s,disabled:e=!1,readOnly:t=!1,name:l,state:o,isRequired:i=!1,asChild:d=!1,ref:a,...c})=>{const m=`${j}-${n.useId()}`,F=d?$.Slot:"div";return r.jsx(E,{id:m,name:l,isRequired:i,disabled:e,readOnly:t,state:o,children:r.jsx(F,{ref:a,"data-spark-component":"form-field",className:u.cx(s,"gap-sm flex flex-col"),...c})})};O.displayName="FormField";const f=({id:s,className:e,ref:t,...l})=>{const{onMessageIdAdd:o,onMessageIdRemove:i}=y(),d=`${j}-message-${n.useId()}`,a=s||d;return n.useEffect(()=>(o(a),()=>{i(a)}),[a,o,i]),r.jsx("span",{ref:t,id:a,"data-spark-component":"form-field-message",className:u.cx(e,"text-caption"),...l})};f.displayName="FormField.Message";const p=({className:s,state:e,children:t,ref:l,...o})=>y().state!==e?null:r.jsxs(f,{ref:l,"data-spark-component":"form-field-state-message",className:u.cx("gap-sm flex items-center",e==="error"?"text-error":"text-on-surface/dim-1",s),...o,children:[e==="alert"&&r.jsx(I.Icon,{size:"sm",children:r.jsx(w.WarningOutline,{})}),e==="error"&&r.jsx(I.Icon,{size:"sm",intent:"error",children:r.jsx(z.AlertOutline,{})}),e==="success"&&r.jsx(I.Icon,{size:"sm",children:r.jsx(V.Check,{})}),t]});p.displayName="FormField.StateMessage";const C=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-alert-message",state:"alert",...e});C.displayName="FormField.AlertMessage";const b=({className:s,value:e="",maxLength:t,description:l,liveAnnouncement:o,ref:i,...d})=>{const[a,c]=n.useState(e);return n.useEffect(()=>{const m=setTimeout(()=>{c(e)},1e3);return()=>clearTimeout(m)},[e]),r.jsxs("span",{className:"ml-auto self-start",children:[l&&r.jsx(f,{className:"default:sr-only",children:l}),r.jsx("span",{ref:i,"aria-hidden":!0,"data-spark-component":"form-field-characters-count",className:u.cx(s,"text-caption","text-neutral"),...d,children:`${e.length}/${t}`}),o&&r.jsx("span",{className:"sr-only","aria-live":"polite",children:o({remainingChars:t-a.length})})]})};b.displayName="FormField.CharactersCount";const P=()=>{const{id:s,name:e,description:t,disabled:l,readOnly:o,state:i,labelId:d,isInvalid:a,isRequired:c}=n.useContext(N)||{};return{id:s,name:e,description:t,disabled:l,readOnly:o,state:i,labelId:d,isInvalid:a,isRequired:c}},q=({children:s})=>{const e=P();return r.jsx(r.Fragment,{children:s(e)})};q.displayName="FormField.Control";const S=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-error-message",state:"error",...e});S.displayName="FormField.ErrorMessage";const v=({className:s,ref:e,...t})=>r.jsx(f,{ref:e,"data-spark-component":"form-field-helper-message",className:u.cx("text-on-surface/dim-1",s),...t});v.displayName="FormField.HelperMessage";const k=({htmlFor:s,className:e,children:t,requiredIndicator:l=r.jsx(M.FormFieldRequiredIndicator,{}),asChild:o,ref:i,...d})=>{const a=y(),{disabled:c,labelId:m,isRequired:F}=a,g=o?void 0:s||a.id;return r.jsx(W.Label,{ref:i,id:m,"data-spark-component":"form-field-label",htmlFor:g,className:u.cx(e,c?"text-on-surface/dim-3 pointer-events-none":void 0),asChild:o,...d,children:r.jsxs(r.Fragment,{children:[r.jsx($.Slottable,{children:t}),F&&l]})})};k.displayName="FormField.Label";const R=({ref:s,...e})=>r.jsx(p,{ref:s,"data-spark-component":"form-field-success-message",state:"success",...e});R.displayName="FormField.SuccessMessage";const H=Object.assign(O,{Label:k,Control:q,StateMessage:p,SuccessMessage:R,AlertMessage:C,ErrorMessage:S,HelperMessage:v,RequiredIndicator:M.FormFieldRequiredIndicator,CharactersCount:b});H.displayName="FormField";k.displayName="FormField.Label";q.displayName="FormField.Control";p.displayName="FormField.StateMessage";R.displayName="FormField.SuccessMessage";C.displayName="FormField.AlertMessage";S.displayName="FormField.ErrorMessage";v.displayName="FormField.HelperMessage";M.FormFieldRequiredIndicator.displayName="FormField.RequiredIndicator";b.displayName="FormField.CharactersCount";exports.FormField=H;exports.useFormFieldControl=P;
 //# sourceMappingURL=index.js.map

package/dist/form-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormField.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/form-field/FormFieldSuccessMessage.tsx","../../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"names":["FormFieldContext","createContext","ID_PREFIX","useFormField","context","useContext","FormFieldProvider","id","name","disabled","readOnly","state","isRequired","children","labelId","useId","messageIds","setMessageIds","useState","description","handleMessageIdAdd","useCallback","msgId","ids","handleMessageIdRemove","current","value","useMemo","jsx","FormField","className","asChild","ref","others","Component","Slot","cx","FormFieldMessage","idProp","onMessageIdAdd","onMessageIdRemove","currentId","useEffect","FormFieldStateMessage","jsxs","Icon","WarningOutline","AlertOutline","Check","FormFieldAlertMessage","props","FormFieldCharactersCount","maxLength","liveAnnouncement","throttledValue","setThrottledValue","timeoutId","useFormFieldControl","isInvalid","FormFieldControl","Fragment","FormFieldErrorMessage","FormFieldHelperMessage","FormFieldRequiredIndicator","Label","FormFieldLabel","htmlForProp","requiredIndicator","control","htmlFor","Slottable","FormFieldSuccessMessage","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormField.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/form-field/FormFieldSuccessMessage.tsx","../../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"names":["FormFieldContext","createContext","ID_PREFIX","useFormField","context","useContext","FormFieldProvider","id","name","disabled","readOnly","state","isRequired","children","labelId","useId","messageIds","setMessageIds","useState","description","handleMessageIdAdd","useCallback","msgId","ids","handleMessageIdRemove","current","value","useMemo","jsx","FormField","className","asChild","ref","others","Component","Slot","cx","FormFieldMessage","idProp","onMessageIdAdd","onMessageIdRemove","currentId","useEffect","FormFieldStateMessage","jsxs","Icon","WarningOutline","AlertOutline","Check","FormFieldAlertMessage","props","FormFieldCharactersCount","maxLength","liveAnnouncement","throttledValue","setThrottledValue","timeoutId","useFormFieldControl","isInvalid","FormFieldControl","Fragment","FormFieldErrorMessage","FormFieldHelperMessage","FormFieldLabel","htmlForProp","requiredIndicator","FormFieldRequiredIndicator","control","htmlFor","Label","Slottable","FormFieldSuccessMessage","Root"],"mappings":"+bAiDaA,EAAmBC,EAAAA,cAA4C,IAAI,EAEnEC,EAAY,cAEZC,EAAe,IAAM,CAChC,MAAMC,EAAUC,EAAAA,WAAWL,CAAgB,EAE3C,GAAI,CAACI,EACH,MAAM,MAAM,uDAAuD,EAGrE,OAAOA,CACT,ECjDaE,EAAoB,CAAC,CAChC,GAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EAAW,GACX,MAAAC,EACA,WAAAC,EACA,SAAAC,CACF,IAA8B,CAC5B,MAAMC,EAAU,GAAGZ,CAAS,UAAUa,EAAAA,OAAO,GACvC,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAmB,CAAA,CAAE,EACnDC,EAAcH,EAAW,OAAS,EAAIA,EAAW,KAAK,GAAG,EAAI,OAE7DI,EAAqBC,cAAaC,GAAkB,CACxDL,EAAcM,GAAO,CAAC,GAAGA,EAAKD,CAAK,CAAC,CACtC,EAAG,CAAA,CAAE,EAECE,EAAwBH,cAAaC,GAAkB,CAC3DL,KAAqBM,EAAI,OAAOE,GAAWA,IAAYH,CAAK,CAAC,CAC/D,EAAG,CAAA,CAAE,EAECI,EAAQC,EAAAA,QAAQ,KAGb,CACL,GAAApB,EACA,QAAAO,EACA,KAAAN,EACA,SAAAC,EACA,SAAAC,EACA,MAAAC,EACA,WAAAC,EACA,UAVgBD,IAAU,QAW1B,YAAAQ,EACA,eAAgBC,EAChB,kBAAmBI,CAAA,GAEpB,CACDjB,EACAO,EACAN,EACAC,EACAC,EACAS,EACAR,EACAC,EACAQ,EACAI,CAAA,CACD,EAED,OAAOI,EAAAA,IAAC5B,EAAiB,SAAjB,CAA0B,MAAA0B,EAAe,SAAAb,CAAA,CAAS,CAC5D,EAEAP,EAAkB,YAAc,oBCxCzB,MAAMuB,EAAY,CAAC,CACxB,UAAAC,EACA,SAAArB,EAAW,GACX,SAAAC,EAAW,GACX,KAAAF,EACA,MAAAG,EACA,WAAAC,EAAa,GACb,QAAAmB,EAAU,GACV,IAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,MAAM1B,EAAK,GAAGL,CAAS,IAAIa,EAAAA,OAAO,GAC5BmB,EAAYH,EAAUI,EAAAA,KAAO,MAEnC,OACEP,EAAAA,IAACtB,EAAA,CACC,GAAAC,EACA,KAAAC,EACA,WAAAI,EACA,SAAAH,EACA,SAAAC,EACA,MAAAC,EAEA,SAAAiB,EAAAA,IAACM,EAAA,CACC,IAAAF,EACA,uBAAqB,aACrB,UAAWI,EAAAA,GAAGN,EAAW,sBAAsB,EAC9C,GAAGG,CAAA,CAAA,CACN,CAAA,CAGN,EAEAJ,EAAU,YAAc,YCjDjB,MAAMQ,EAAmB,CAAC,CAC/B,GAAIC,EACJ,UAAAR,EACA,IAAAE,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,eAAAM,EAAgB,kBAAAC,CAAA,EAAsBrC,EAAA,EACxCsC,EAAY,GAAGvC,CAAS,YAAYa,EAAAA,OAAO,GAC3CR,EAAK+B,GAAUG,EAErBC,OAAAA,EAAAA,UAAU,KACRH,EAAehC,CAAE,EAEV,IAAM,CACXiC,EAAkBjC,CAAE,CACtB,GACC,CAACA,EAAIgC,EAAgBC,CAAiB,CAAC,EAGxCZ,EAAAA,IAAC,OAAA,CACC,IAAAI,EACA,GAAAzB,EACA,uBAAqB,qBACrB,UAAW6B,EAAAA,GAAGN,EAAW,cAAc,EACtC,GAAGG,CAAA,CAAA,CAGV,EAEAI,EAAiB,YAAc,oBCvBxB,MAAMM,EAAwB,CAAC,CACpC,UAAAb,EACA,MAAAnB,EACA,SAAAE,EACA,IAAAmB,EACA,GAAGC,CACL,IACgB9B,EAAA,EAEJ,QAAUQ,EACX,KAIPiC,EAAAA,KAACP,EAAA,CACC,IAAAL,EACA,uBAAqB,2BACrB,UAAWI,EAAAA,GACT,2BACAzB,IAAU,QAAU,aAAe,wBACnCmB,CAAA,EAED,GAAGG,EAEH,SAAA,CAAAtB,IAAU,SACTiB,MAACiB,EAAAA,KAAA,CAAK,KAAK,KACT,SAAAjB,EAAAA,IAACkB,mBAAe,CAAA,CAClB,EAEDnC,IAAU,SACTiB,EAAAA,IAACiB,EAAAA,KAAA,CAAK,KAAK,KAAK,OAAO,QACrB,SAAAjB,EAAAA,IAACmB,EAAAA,aAAA,CAAA,CAAa,CAAA,CAChB,EAEDpC,IAAU,WACTiB,MAACiB,EAAAA,KAAA,CAAK,KAAK,KACT,SAAAjB,EAAAA,IAACoB,UAAM,CAAA,CACT,EAGDnC,CAAA,CAAA,CAAA,EAKP8B,EAAsB,YAAc,yBCpD7B,MAAMM,EAAwB,CAAC,CAAE,IAAAjB,EAAK,GAAGkB,KAE5CtB,EAAAA,IAACe,EAAA,CACC,IAAAX,EACA,uBAAqB,2BACrB,MAAM,QACL,GAAGkB,CAAA,CAAA,EAKVD,EAAsB,YAAc,yBCM7B,MAAME,EAA2B,CAAC,CACvC,UAAArB,EACA,MAAAJ,EAAQ,GACR,UAAA0B,EACA,YAAAjC,EACA,iBAAAkC,EACA,IAAArB,EACA,GAAGC,CACL,IAAqC,CACnC,KAAM,CAACqB,EAAgBC,CAAiB,EAAIrC,EAAAA,SAASQ,CAAK,EAK1DgB,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMc,EAAY,WAAW,IAAM,CACjCD,EAAkB7B,CAAK,CACzB,EAAG,GAAI,EAEP,MAAO,IAAM,aAAa8B,CAAS,CACrC,EAAG,CAAC9B,CAAK,CAAC,EAGRkB,EAAAA,KAAC,OAAA,CAAK,UAAU,qBACb,SAAA,CAAAzB,GACCS,EAAAA,IAACS,EAAA,CAAiB,UAAU,kBAAmB,SAAAlB,EAAY,EAE7DS,EAAAA,IAAC,OAAA,CACC,IAAAI,EACA,cAAW,GACX,uBAAqB,8BACrB,UAAWI,EAAAA,GAAGN,EAAW,eAAgB,cAAc,EACtD,GAAGG,EAEH,SAAA,GAAGP,EAAM,MAAM,IAAI0B,CAAS,EAAA,CAAA,EAG9BC,GACCzB,EAAAA,IAAC,OAAA,CAAK,UAAU,UAAU,YAAU,SACjC,SAAAyB,EAAiB,CAAE,eAAgBD,EAAYE,EAAe,MAAA,CAAQ,CAAA,CACzE,CAAA,EAEJ,CAEJ,EAEAH,EAAyB,YAAc,4BChDhC,MAAMM,EAAsB,IAAM,CACvC,KAAM,CAAE,GAAAlD,EAAI,KAAAC,EAAM,YAAAW,EAAa,SAAAV,EAAU,SAAAC,EAAU,MAAAC,EAAO,QAAAG,EAAS,UAAA4C,EAAW,WAAA9C,CAAA,EAC5EP,EAAAA,WAAWL,CAAgB,GAAK,CAAA,EAElC,MAAO,CACL,GAAAO,EACA,KAAAC,EACA,YAAAW,EACA,SAAAV,EACA,SAAAC,EACA,MAAAC,EACA,QAAAG,EACA,UAAA4C,EACA,WAAA9C,CAAA,CAEJ,EAEa+C,EAAmB,CAAC,CAAE,SAAA9C,KAAsC,CACvE,MAAMqC,EAAQO,EAAA,EAEd,OAAO7B,EAAAA,IAAAgC,EAAAA,SAAA,CAAG,SAAA/C,EAASqC,CAAK,EAAE,CAC5B,EAEAS,EAAiB,YAAc,oBCtCxB,MAAME,EAAwB,CAAC,CAAE,IAAA7B,EAAK,GAAGkB,KAE5CtB,EAAAA,IAACe,EAAA,CACC,IAAAX,EACA,uBAAqB,2BACrB,MAAM,QACL,GAAGkB,CAAA,CAAA,EAKVW,EAAsB,YAAc,yBCV7B,MAAMC,EAAyB,CAAC,CACrC,UAAAhC,EACA,IAAAE,EACA,GAAGC,CACL,IAEIL,EAAAA,IAACS,EAAA,CACC,IAAAL,EACA,uBAAqB,4BACrB,UAAWI,EAAAA,GAAG,wBAAyBN,CAAS,EAC/C,GAAGG,CAAA,CAAA,EAKV6B,EAAuB,YAAc,0BCR9B,MAAMC,EAAiB,CAAC,CAC7B,QAASC,EACT,UAAAlC,EACA,SAAAjB,EACA,kBAAAoD,QAAqBC,EAAAA,2BAAA,EAA2B,EAChD,QAAAnC,EACA,IAAAC,EACA,GAAGC,CACL,IAA2B,CACzB,MAAMkC,EAAUhE,EAAA,EAEV,CAAE,SAAAM,EAAU,QAAAK,EAAS,WAAAF,CAAA,EAAeuD,EACpCC,EAAUrC,EAAU,OAAYiC,GAAeG,EAAQ,GAE7D,OACEvC,EAAAA,IAACyC,EAAAA,MAAA,CACC,IAAArC,EACA,GAAIlB,EACJ,uBAAqB,mBACrB,QAAAsD,EACA,UAAWhC,EAAAA,GAAGN,EAAWrB,EAAW,4CAA8C,MAAS,EAC3F,QAAAsB,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAAgB,WAAA,CACE,SAAA,CAAAhC,MAAC0C,EAAAA,WAAW,SAAAzD,EAAS,EACpBD,GAAcqD,CAAA,CAAA,CACjB,CAAA,CAAA,CAGN,EAEAF,EAAe,YAAc,kBCxCtB,MAAMQ,EAA0B,CAAC,CAAE,IAAAvC,EAAK,GAAGkB,KAE9CtB,EAAAA,IAACe,EAAA,CACC,IAAAX,EACA,uBAAqB,6BACrB,MAAM,UACL,GAAGkB,CAAA,CAAA,EAKVqB,EAAwB,YAAc,2BCR/B,MAAM1C,EAUT,OAAO,OAAO2C,EAAM,CACtB,MAAOT,EACP,QAASJ,EACT,aAAchB,EACd,eAAgB4B,EAChB,aAActB,EACd,aAAcY,EACd,cAAeC,EACf,kBAAmBI,EAAAA,2BACnB,gBAAiBf,CACnB,CAAC,EAEDtB,EAAU,YAAc,YACxBkC,EAAe,YAAc,kBAC7BJ,EAAiB,YAAc,oBAC/BhB,EAAsB,YAAc,yBACpC4B,EAAwB,YAAc,2BACtCtB,EAAsB,YAAc,yBACpCY,EAAsB,YAAc,yBACpCC,EAAuB,YAAc,0BACrCI,EAAAA,2BAA2B,YAAc,8BACzCf,EAAyB,YAAc"}

package/dist/form-field/index.mjs

@@ -1,80 +1,81 @@
-import { jsx as r, jsxs as I, Fragment as H } from "react/jsx-runtime";
+import { jsx as r, jsxs as N, Fragment as H } from "react/jsx-runtime";
 import { cx as c } from "class-variance-authority";
-import { createContext as W, useContext as L, useId as y, useState as P, useCallback as j, useMemo as X, useEffect as z } from "react";
-import { a as _, S as B } from "../Slot-D2Bbf8Gw.mjs";
-import { AlertOutline as G } from "@spark-ui/icons/AlertOutline";
-import { Check as J } from "@spark-ui/icons/Check";
-import { WarningOutline as K } from "@spark-ui/icons/WarningOutline";
+import { createContext as D, useContext as L, useId as I, useState as P, useCallback as q, useMemo as W, useEffect as z } from "react";
+import { a as X, S as _ } from "../Slot-D2Bbf8Gw.mjs";
+import { AlertOutline as B } from "@spark-ui/icons/AlertOutline";
+import { Check as G } from "@spark-ui/icons/Check";
+import { WarningOutline as J } from "@spark-ui/icons/WarningOutline";
 import { I as M } from "../Icon-Ck-dhfLd.mjs";
-import { Label as O } from "../label/index.mjs";
-const C = W(null), x = ":form-field", b = () => {
+import { Label as K } from "../label/index.mjs";
+import { F as y } from "../FormFieldRequiredIndicator-DTnCGiX2.mjs";
+const C = D(null), x = ":form-field", b = () => {
   const s = L(C);
   if (!s)
     throw Error("useFormField must be used within a FormField provider");
   return s;
-}, T = ({
+}, O = ({
   id: s,
   name: e,
-  disabled: o = !1,
+  disabled: a = !1,
   readOnly: l = !1,
-  state: a,
+  state: o,
   isRequired: i,
   children: d
 }) => {
-  const t = `${x}-label-${y()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = j((f) => {
+  const t = `${x}-label-${I()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = q((f) => {
     m((h) => [...h, f]);
-  }, []), q = j((f) => {
-    m((h) => h.filter((D) => D !== f));
-  }, []), V = X(() => ({
+  }, []), j = q((f) => {
+    m((h) => h.filter((V) => V !== f));
+  }, []), w = W(() => ({
     id: s,
     labelId: t,
     name: e,
-    disabled: o,
+    disabled: a,
     readOnly: l,
-    state: a,
+    state: o,
     isRequired: i,
-    isInvalid: a === "error",
+    isInvalid: o === "error",
     description: p,
     onMessageIdAdd: u,
-    onMessageIdRemove: q
+    onMessageIdRemove: j
   }), [
     s,
     t,
     e,
-    o,
+    a,
     l,
     p,
-    a,
+    o,
     i,
     u,
-    q
+    j
   ]);
-  return /* @__PURE__ */ r(C.Provider, { value: V, children: d });
+  return /* @__PURE__ */ r(C.Provider, { value: w, children: d });
 };
-T.displayName = "FormFieldProvider";
-const w = ({
+O.displayName = "FormFieldProvider";
+const T = ({
   className: s,
   disabled: e = !1,
-  readOnly: o = !1,
+  readOnly: a = !1,
   name: l,
-  state: a,
+  state: o,
   isRequired: i = !1,
   asChild: d = !1,
   ref: t,
   ...n
 }) => {
-  const m = `${x}-${y()}`;
+  const m = `${x}-${I()}`;
   return /* @__PURE__ */ r(
-    T,
+    O,
     {
       id: m,
       name: l,
       isRequired: i,
       disabled: e,
-      readOnly: o,
-      state: a,
+      readOnly: a,
+      state: o,
       children: /* @__PURE__ */ r(
-        d ? _ : "div",
+        d ? X : "div",
         {
           ref: t,
           "data-spark-component": "form-field",
@@ -85,20 +86,20 @@ const w = ({
     }
   );
 };
-w.displayName = "FormField";
+T.displayName = "FormField";
 const g = ({
   id: s,
   className: e,
-  ref: o,
+  ref: a,
   ...l
 }) => {
-  const { onMessageIdAdd: a, onMessageIdRemove: i } = b(), d = `${x}-message-${y()}`, t = s || d;
-  return z(() => (a(t), () => {
+  const { onMessageIdAdd: o, onMessageIdRemove: i } = b(), d = `${x}-message-${I()}`, t = s || d;
+  return z(() => (o(t), () => {
     i(t);
-  }), [t, a, i]), /* @__PURE__ */ r(
+  }), [t, o, i]), /* @__PURE__ */ r(
     "span",
     {
-      ref: o,
+      ref: a,
       id: t,
       "data-spark-component": "form-field-message",
       className: c(e, "text-caption"),
@@ -110,10 +111,10 @@ g.displayName = "FormField.Message";
 const F = ({
   className: s,
   state: e,
-  children: o,
+  children: a,
   ref: l,
-  ...a
-}) => b().state !== e ? null : /* @__PURE__ */ I(
+  ...o
+}) => b().state !== e ? null : /* @__PURE__ */ N(
   g,
   {
     ref: l,
@@ -123,12 +124,12 @@ const F = ({
       e === "error" ? "text-error" : "text-on-surface/dim-1",
       s
     ),
-    ...a,
+    ...o,
     children: [
-      e === "alert" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(K, {}) }),
-      e === "error" && /* @__PURE__ */ r(M, { size: "sm", intent: "error", children: /* @__PURE__ */ r(G, {}) }),
-      e === "success" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(J, {}) }),
-      o
+      e === "alert" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(J, {}) }),
+      e === "error" && /* @__PURE__ */ r(M, { size: "sm", intent: "error", children: /* @__PURE__ */ r(B, {}) }),
+      e === "success" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(G, {}) }),
+      a
     ]
   }
 );
@@ -146,9 +147,9 @@ v.displayName = "FormField.AlertMessage";
 const S = ({
   className: s,
   value: e = "",
-  maxLength: o,
+  maxLength: a,
   description: l,
-  liveAnnouncement: a,
+  liveAnnouncement: o,
   ref: i,
   ...d
 }) => {
@@ -158,7 +159,7 @@ const S = ({
       n(e);
     }, 1e3);
     return () => clearTimeout(m);
-  }, [e]), /* @__PURE__ */ I("span", { className: "ml-auto self-start", children: [
+  }, [e]), /* @__PURE__ */ N("span", { className: "ml-auto self-start", children: [
     l && /* @__PURE__ */ r(g, { className: "default:sr-only", children: l }),
     /* @__PURE__ */ r(
       "span",
@@ -168,21 +169,21 @@ const S = ({
         "data-spark-component": "form-field-characters-count",
         className: c(s, "text-caption", "text-neutral"),
         ...d,
-        children: `${e.length}/${o}`
+        children: `${e.length}/${a}`
       }
     ),
-    a && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: a({ remainingChars: o - t.length }) })
+    o && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: o({ remainingChars: a - t.length }) })
   ] });
 };
 S.displayName = "FormField.CharactersCount";
 const Q = () => {
-  const { id: s, name: e, description: o, disabled: l, readOnly: a, state: i, labelId: d, isInvalid: t, isRequired: n } = L(C) || {};
+  const { id: s, name: e, description: a, disabled: l, readOnly: o, state: i, labelId: d, isInvalid: t, isRequired: n } = L(C) || {};
   return {
     id: s,
     name: e,
-    description: o,
+    description: a,
     disabled: l,
-    readOnly: a,
+    readOnly: o,
     state: i,
     labelId: d,
     isInvalid: t,
@@ -193,7 +194,7 @@ const Q = () => {
   return /* @__PURE__ */ r(H, { children: s(e) });
 };
 k.displayName = "FormField.Control";
-const R = ({ ref: s, ...e }) => /* @__PURE__ */ r(
+const $ = ({ ref: s, ...e }) => /* @__PURE__ */ r(
   F,
   {
     ref: s,
@@ -202,49 +203,43 @@ const R = ({ ref: s, ...e }) => /* @__PURE__ */ r(
     ...e
   }
 );
-R.displayName = "FormField.ErrorMessage";
-const $ = ({
+$.displayName = "FormField.ErrorMessage";
+const R = ({
   className: s,
   ref: e,
-  ...o
+  ...a
 }) => /* @__PURE__ */ r(
   g,
   {
     ref: e,
     "data-spark-component": "form-field-helper-message",
     className: c("text-on-surface/dim-1", s),
-    ...o
+    ...a
   }
 );
-$.displayName = "FormField.HelperMessage";
-const N = ({
-  className: s,
-  ref: e,
-  ...o
-}) => /* @__PURE__ */ r(O.RequiredIndicator, { ref: e, className: c("ml-sm", s), ...o });
-N.displayName = "FormField.RequiredIndicator";
+R.displayName = "FormField.HelperMessage";
 const A = ({
   htmlFor: s,
   className: e,
-  children: o,
-  requiredIndicator: l = /* @__PURE__ */ r(N, {}),
-  asChild: a,
+  children: a,
+  requiredIndicator: l = /* @__PURE__ */ r(y, {}),
+  asChild: o,
   ref: i,
   ...d
 }) => {
-  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = a ? void 0 : s || t.id;
+  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = o ? void 0 : s || t.id;
   return /* @__PURE__ */ r(
-    O,
+    K,
     {
       ref: i,
       id: m,
       "data-spark-component": "form-field-label",
       htmlFor: u,
       className: c(e, n ? "text-on-surface/dim-3 pointer-events-none" : void 0),
-      asChild: a,
+      asChild: o,
       ...d,
-      children: /* @__PURE__ */ I(H, { children: [
-        /* @__PURE__ */ r(B, { children: o }),
+      children: /* @__PURE__ */ N(H, { children: [
+        /* @__PURE__ */ r(_, { children: a }),
         p && l
       ] })
     }
@@ -261,15 +256,15 @@ const E = ({ ref: s, ...e }) => /* @__PURE__ */ r(
   }
 );
 E.displayName = "FormField.SuccessMessage";
-const U = Object.assign(w, {
+const U = Object.assign(T, {
   Label: A,
   Control: k,
   StateMessage: F,
   SuccessMessage: E,
   AlertMessage: v,
-  ErrorMessage: R,
-  HelperMessage: $,
-  RequiredIndicator: N,
+  ErrorMessage: $,
+  HelperMessage: R,
+  RequiredIndicator: y,
   CharactersCount: S
 });
 U.displayName = "FormField";
@@ -278,9 +273,9 @@ k.displayName = "FormField.Control";
 F.displayName = "FormField.StateMessage";
 E.displayName = "FormField.SuccessMessage";
 v.displayName = "FormField.AlertMessage";
-R.displayName = "FormField.ErrorMessage";
-$.displayName = "FormField.HelperMessage";
-N.displayName = "FormField.RequiredIndicator";
+$.displayName = "FormField.ErrorMessage";
+R.displayName = "FormField.HelperMessage";
+y.displayName = "FormField.RequiredIndicator";
 S.displayName = "FormField.CharactersCount";
 export {
   U as FormField,