@ariakit/react-components 0.1.1 → 0.1.2

package/dist/form/form-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control.js","names":[],"sources":["../../src/form/form-control.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getDocument, cx, invariant } from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, RefObject } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\ntype ItemType = \"label\" | \"error\" | \"description\";\n\nfunction getNamedElement(\n  ref: RefObject<HTMLInputElement | null>,\n  name: string,\n) {\n  const element = ref.current;\n  if (!element) return null;\n  if (element.name === name) return element;\n  if (element.form) {\n    return element.form.elements.namedItem(name) as HTMLInputElement | null;\n  }\n  const document = getDocument(element);\n  return document.getElementsByName(name)[0] as HTMLInputElement | null;\n}\n\nfunction useItem(store: FormStore, name: string, type: ItemType) {\n  return useStoreState(store, (state) =>\n    state.items.find((item) => item.type === type && item.name === name),\n  );\n}\n\n/**\n * Returns props to create a `FormControl` component. Unlike `useFormInput`,\n * this hook doesn't automatically returns the `value` and `onChange` props.\n * This is so we can use it not only for native form elements but also for\n * custom components whose value is not controlled by the native `value` and\n * `onChange` props.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { content: \"\" } });\n * const props = useFormControl({ store, name: store.names.content });\n * const value = store.useValue(store.names.content);\n *\n * <Form store={store}>\n *   <FormLabel name={store.names.content}>Content</FormLabel>\n *   <Role\n *     {...props}\n *     value={value}\n *     onChange={(value) => store.setValue(store.names.content, value)}\n *     render={<Editor />}\n *   />\n * </Form>\n * ```\n */\nexport const useFormControl = createHook<TagName, FormControlOptions>(\n  function useFormControl({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    touchOnBlur = true,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormControl must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n\n    store.useValidate(async () => {\n      const element = getNamedElement(ref, name);\n      if (!element) return;\n      // Flush microtasks to make sure the validity state is up to date\n      await Promise.resolve();\n      if (\"validity\" in element && !element.validity.valid) {\n        store?.setError(name, element.validationMessage);\n      }\n    });\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, name, type: \"field\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const onBlurProp = props.onBlur;\n    const touchOnBlurProp = useBooleanEvent(touchOnBlur);\n\n    const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!touchOnBlurProp(event)) return;\n      store?.setFieldTouched(name, true);\n    });\n\n    const label = useItem(store, name, \"label\");\n    const error = useItem(store, name, \"error\");\n    const description = useItem(store, name, \"description\");\n    const describedBy = cx(\n      error?.id,\n      description?.id,\n      props[\"aria-describedby\"],\n    );\n\n    const invalid = useStoreState(\n      store,\n      () => !!store?.getError(name) && store.getFieldTouched(name),\n    );\n\n    props = {\n      \"aria-labelledby\": props[\"aria-label\"] != null ? undefined : label?.id,\n      \"aria-invalid\": invalid,\n      ...props,\n      id,\n      \"aria-describedby\": describedBy || undefined,\n      ref: useMergeRefs(ref, props.ref),\n      onBlur,\n    };\n\n    props = useCollectionItem<TagName>({ store, ...props, name, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Abstract component that renders a form control. Unlike\n * [`FormInput`](https://ariakit.com/reference/form-input), this component\n * doesn't automatically pass the `value` and `onChange` props down to the\n * underlying element. This is so we can use it not only for native form\n * elements but also for custom components whose value is not controlled by the\n * native `value` and `onChange` props.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {11-19}\n * const form = useFormStore({\n *   defaultValues: {\n *     content: \"\",\n *   },\n * });\n *\n * const value = form.useValue(form.names.content);\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.content}>Content</FormLabel>\n *   <FormControl\n *     name={form.names.content}\n *     render={\n *       <Editor\n *         value={value}\n *         onChange={(value) => form.setValue(form.names.content, value)}\n *       />\n *     }\n *   />\n * </Form>\n * ```\n */\nexport const FormControl = memo(\n  forwardRef(function FormControl(props: FormControlProps) {\n    const htmlProps = useFormControl(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormControlOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Field name. This can either be a string corresponding to an existing\n   * property name in the\n   * [`values`](https://ariakit.com/reference/use-form-store#values) state of\n   * the store, or a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, ensuring type safety.\n   *\n   * Live examples:\n   * - [FormRadio](https://ariakit.com/examples/form-radio)\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   */\n  name: StringLike;\n  /**\n   * Whether the field should be marked touched on blur.\n   * @default true\n   */\n  touchOnBlur?: BooleanOrCallback<FocusEvent>;\n}\n\nexport type FormControlProps<T extends ElementType = TagName> = Props<\n  T,\n  FormControlOptions<T>\n>;\n"],"mappings":";;;;;;;;AA2BA,MAAA,UAAS;SAID,gBAAc,KAAA,MAAA;CACpB,MAAK,UAAS,IAAA;CACd,IAAI,CAAA,SAAQ,OAAS;CACrB,IAAI,QAAQ,SACV,MAAO,OAAQ;CAGjB,IAAA,QADiB,MAAA,OAAY,QACb,KAAA,SAAkB,UAAM,IAAA;CAC1C,OAAA,YAAA,OAAA,EAAA,kBAAA,IAAA,EAAA;AAEA;SACS,QAAA,OAAc,MAAQ,MAAA;CAG/B,OAAA,cAAA,QAAA,UAAA,MAAA,MAAA,MAAA,SAAA,KAAA,SAAA,QAAA,KAAA,SAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCI,iBAAgB,WAAe,SAAA,eAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,cAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,kDAAe;CAC5B,MAAM,OAAK,OAAM,QAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CAEjC,MAAM,MAAA,OAAY,IAAA;OAChB,YAAgB,YAAA;EAChB,MAAK,UAAS,gBAAA,KAAA,IAAA;EAEd,IAAA,CAAA,SAAc;EACd,MAAI,QAAA,QAAc;EAGnB,IAAA,cAAA,WAAA,CAAA,QAAA,SAAA,OAAA,OAAA,SAAA,MAAA,QAAA,iBAAA;CAED,CAAA;OAEI,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAmB,IAAA,MAAA,KAAA;GAAM;GAAc,MAAA;EACnE;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;CACA,MAAM,aAAA,MAAkB;CAExB,MAAM,kBAAS,gBAA0C,WAAA;OACvD,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAI,MAAC,kBAAqB;EAC1B,IAAA,CAAA,gBAAO,KAAgB,GAAM;EAC9B,OAAA,gBAAA,MAAA,IAAA;CAED,CAAA;CACA,MAAM,QAAQ,QAAQ,OAAO,MAAM,OAAO;CAC1C,MAAM,QAAA,QAAc,OAAQ,MAAO,OAAM;CACzC,MAAM,cAAc,QAClB,OACA,MAAA,aACA;CAGF,MAAM,cAAU,GAAA,OACd,IAAA,aACQ,IAAA,MAAO,mBAAwB;CAGzC,MAAA,UAAQ,cAAA,aAAA,CAAA,CAAA,OAAA,SAAA,IAAA,KAAA,MAAA,gBAAA,IAAA,CAAA;SACN;EACA,mBAAgB,MAAA,iBAAA,OAAA,KAAA,IAAA,OAAA;EAChB,gBAAG;EACH,GAAA;EACA;EACA,oBAAkB,eAAc,KAAA;EAChC,KAAA,aAAA,KAAA,MAAA,GAAA;EACF;CAEA;SAAqC,kBAAA;EAAO;EAAU,GAAA;EAAM;EAAS;CAErE,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCI,cAAO,KAAc,WADH,SAAA,YACqB,OAAA;CACxC,OACH,cAAA,SAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"form-control.js","names":[],"sources":["../../src/form/form-control.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getDocument, cx, invariant } from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, RefObject } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\ntype ItemType = \"label\" | \"error\" | \"description\";\n\nfunction getNamedElement(\n  ref: RefObject<HTMLInputElement | null>,\n  name: string,\n) {\n  const element = ref.current;\n  if (!element) return null;\n  if (element.name === name) return element;\n  if (element.form) {\n    return element.form.elements.namedItem(name) as HTMLInputElement | null;\n  }\n  const document = getDocument(element);\n  return document.getElementsByName(name)[0] as HTMLInputElement | null;\n}\n\nfunction useItem(store: FormStore, name: string, type: ItemType) {\n  return useStoreState(store, (state) =>\n    state.items.find((item) => item.type === type && item.name === name),\n  );\n}\n\n/**\n * Returns props to create a `FormControl` component. Unlike `useFormInput`,\n * this hook doesn't automatically returns the `value` and `onChange` props.\n * This is so we can use it not only for native form elements but also for\n * custom components whose value is not controlled by the native `value` and\n * `onChange` props.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { content: \"\" } });\n * const props = useFormControl({ store, name: store.names.content });\n * const value = store.useValue(store.names.content);\n *\n * <Form store={store}>\n *   <FormLabel name={store.names.content}>Content</FormLabel>\n *   <Role\n *     {...props}\n *     value={value}\n *     onChange={(value) => store.setValue(store.names.content, value)}\n *     render={<Editor />}\n *   />\n * </Form>\n * ```\n */\nexport const useFormControl = createHook<TagName, FormControlOptions>(\n  function useFormControl({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    touchOnBlur = true,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormControl must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n\n    store.useValidate(async () => {\n      const element = getNamedElement(ref, name);\n      if (!element) return;\n      // Flush microtasks to make sure the validity state is up to date\n      await Promise.resolve();\n      if (\"validity\" in element && !element.validity.valid) {\n        store?.setError(name, element.validationMessage);\n      }\n    });\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, name, type: \"field\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const onBlurProp = props.onBlur;\n    const touchOnBlurProp = useBooleanEvent(touchOnBlur);\n\n    const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!touchOnBlurProp(event)) return;\n      store?.setFieldTouched(name, true);\n    });\n\n    const label = useItem(store, name, \"label\");\n    const error = useItem(store, name, \"error\");\n    const description = useItem(store, name, \"description\");\n    const describedBy = cx(\n      error?.id,\n      description?.id,\n      props[\"aria-describedby\"],\n    );\n\n    const invalid = useStoreState(\n      store,\n      () => !!store?.getError(name) && store.getFieldTouched(name),\n    );\n\n    props = {\n      \"aria-labelledby\": props[\"aria-label\"] != null ? undefined : label?.id,\n      \"aria-invalid\": invalid,\n      ...props,\n      id,\n      \"aria-describedby\": describedBy || undefined,\n      ref: useMergeRefs(ref, props.ref),\n      onBlur,\n    };\n\n    props = useCollectionItem<TagName>({ store, ...props, name, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Abstract component that renders a form control. Unlike\n * [`FormInput`](https://ariakit.com/reference/form-input), this component\n * doesn't automatically pass the `value` and `onChange` props down to the\n * underlying element. This is so we can use it not only for native form\n * elements but also for custom components whose value is not controlled by the\n * native `value` and `onChange` props.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {11-19}\n * const form = useFormStore({\n *   defaultValues: {\n *     content: \"\",\n *   },\n * });\n *\n * const value = form.useValue(form.names.content);\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.content}>Content</FormLabel>\n *   <FormControl\n *     name={form.names.content}\n *     render={\n *       <Editor\n *         value={value}\n *         onChange={(value) => form.setValue(form.names.content, value)}\n *       />\n *     }\n *   />\n * </Form>\n * ```\n */\nexport const FormControl = memo(\n  forwardRef(function FormControl(props: FormControlProps) {\n    const htmlProps = useFormControl(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormControlOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Field name. This can either be a string corresponding to an existing\n   * property name in the\n   * [`values`](https://ariakit.com/reference/use-form-store#values) state of\n   * the store, or a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, ensuring type safety.\n   *\n   * Live examples:\n   * - [FormRadio](https://ariakit.com/examples/form-radio)\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   */\n  name: StringLike;\n  /**\n   * Whether the field should be marked touched on blur.\n   * @default true\n   */\n  touchOnBlur?: BooleanOrCallback<FocusEvent>;\n}\n\nexport type FormControlProps<T extends ElementType = TagName> = Props<\n  T,\n  FormControlOptions<T>\n>;\n"],"mappings":";;;;;;;;AA2BA,MAAA,UAAS;SAID,gBAAc,KAAA,MAAA;CACpB,MAAK,UAAS,IAAA;CACd,IAAI,CAAA,SAAQ,OAAS;CACrB,IAAI,QAAQ,SACV,MAAO,OAAQ;CAGjB,IAAA,QADiB,MAAA,OAAY,QACb,KAAA,SAAkB,UAAM,IAAA;CAC1C,OAAA,YAAA,OAAA,EAAA,kBAAA,IAAA,EAAA;AAEA;SACS,QAAA,OAAc,MAAQ,MAAA;CAG/B,OAAA,cAAA,QAAA,UAAA,MAAA,MAAA,MAAA,SAAA,KAAA,SAAA,QAAA,KAAA,SAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCI,iBAAgB,WAAe,SAAA,eAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,cAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAO,QAAO,IAAQ,aAAA,gBAAA,kDAAA;CAC5B,MAAM,OAAK,OAAM,QAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CAEjC,MAAM,MAAA,OAAY,IAAA;OAChB,YAAgB,YAAA;EAChB,MAAK,UAAS,gBAAA,KAAA,IAAA;EAEd,IAAA,CAAA,SAAc;EACd,MAAI,QAAA,QAAc;EAGnB,IAAA,cAAA,WAAA,CAAA,QAAA,SAAA,OAAA,OAAA,SAAA,MAAA,QAAA,iBAAA;CAED,CAAA;OAEI,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAmB,IAAA,MAAA,KAAA;GAAM;GAAc,MAAA;EACnE;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;CACA,MAAM,aAAA,MAAkB;CAExB,MAAM,kBAAS,gBAA0C,WAAA;OACvD,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAI,MAAC,kBAAqB;EAC1B,IAAA,CAAA,gBAAO,KAAgB,GAAM;EAC9B,OAAA,gBAAA,MAAA,IAAA;CAED,CAAA;CACA,MAAM,QAAQ,QAAQ,OAAO,MAAM,OAAO;CAC1C,MAAM,QAAA,QAAc,OAAQ,MAAO,OAAM;CACzC,MAAM,cAAc,QAClB,OACA,MAAA,aACA;CAGF,MAAM,cAAU,GAAA,OACd,IAAA,aACQ,IAAA,MAAO,mBAAwB;CAGzC,MAAA,UAAQ,cAAA,aAAA,CAAA,CAAA,OAAA,SAAA,IAAA,KAAA,MAAA,gBAAA,IAAA,CAAA;SACN;EACA,mBAAgB,MAAA,iBAAA,OAAA,KAAA,IAAA,OAAA;EAChB,gBAAG;EACH,GAAA;EACA;EACA,oBAAkB,eAAc,KAAA;EAChC,KAAA,aAAA,KAAA,MAAA,GAAA;EACF;CAEA;SAAqC,kBAAA;EAAO;EAAU,GAAA;EAAM;EAAS;CAErE,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCI,cAAO,KAAc,WADH,SAAA,YACqB,OAAA;CACxC,OACH,cAAA,SAAA,eAAA,KAAA,CAAA"}

package/dist/form/form-description.d.ts

@@ -1,4 +1,4 @@
-import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { n as CollectionItemOptions } from "../collection-item-pvEWNoNs.js";
 import { t as FormStore } from "../form-store-C4Kf5QHm.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -43,7 +43,7 @@ declare const useFormDescription: import("@ariakit/react-utils").Hook<"div", For
  * </Form>
  * ```
  */
-declare const FormDescription: (props: FormDescriptionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormDescription: (props: FormDescriptionProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormDescriptionOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
   /**
    * Object returned by the

package/dist/form/form-description.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-description.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormDescription","FormDescriptionOptions","Hook","FormDescription","FormDescriptionProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-description.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAe7B;;;;AAjBiD,cAiB5BC,kBAAAA,iCAAmDE,IAAAA,QAAYD,sBAAsB;AAsB1G;;;;;;;;;AAAuJ;AACvJ;;;;;;;;;;;AADA,cAAqBE,eAAAA,GAAkBE,KAAAA,EAAOD,oBAAoB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjHN,sBAAAA,WAAiCL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAAvCT;;;;;;;EAQ5DU,KAAAA,GAAQX,SAAAA;EAaQ;AAEpB;;;;;;;;;;;EAFIY,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,oBAAAA,WAA+BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,sBAAAA,CAAuBO,CAAAA"}
+{"version":3,"file":"form-description.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormDescription","FormDescriptionOptions","Hook","FormDescription","FormDescriptionProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-description.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAe7B;;;;AAjBiD,cAiB5BC,kBAAAA,iCAAmDE,IAAAA,QAAYD,sBAAsB;AAsB1G;;;;;;;;;AAA2J;AAC3J;;;;;;;;;;;AADA,cAAqBE,eAAAA,GAAkBE,KAAAA,EAAOD,oBAAoB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACrHN,sBAAAA,WAAiCL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAAvCT;;;;;;;EAQ5DU,KAAAA,GAAQX,SAAAA;EAaQ;AAEpB;;;;;;;;;;;EAFIY,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,oBAAAA,WAA+BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,sBAAAA,CAAuBO,CAAAA"}

package/dist/form/form-description.js

@@ -23,7 +23,7 @@ const TagName = "div";
 const useFormDescription = createHook(function useFormDescription({ store, name: nameProp, getItem: getItemProp, ...props }) {
 	const context = useFormContext();
 	store = store || context;
-	invariant(store, "FormDescription must be wrapped in a Form component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "FormDescription must be wrapped in a Form component.");
 	const id = useId(props.id);
 	const ref = useRef(null);
 	const name = String(nameProp);

package/dist/form/form-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-description.js","names":[],"sources":["../../src/form/form-description.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport {\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormDescription` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { password: \"\" } });\n * const props = useFormDescription({ store, name: store.names.password });\n * <Form store={store}>\n *   <FormLabel name={store.names.password}>Password</FormLabel>\n *   <FormInput name={store.names.password} type=\"password\" />\n *   <Role {...props}>Password with at least 8 characters.</Role>\n * </Form>\n * ```\n */\nexport const useFormDescription = createHook<TagName, FormDescriptionOptions>(\n  function useFormDescription({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormDescription must be wrapped in a Form component.\",\n    );\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const name = String(nameProp);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = {\n          ...item,\n          id: id || item.id,\n          name,\n          type: \"description\",\n        };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    props = {\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    props = useCollectionItem({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a description element for a form field, which will automatically\n * receive an `aria-describedby` attribute pointing to this element.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {10-12}\n * const form = useFormStore({\n *   defaultValues: {\n *     password: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.password}>Password</FormLabel>\n *   <FormInput name={form.names.password} type=\"password\" />\n *   <FormDescription name={form.names.password}>\n *     Password with at least 8 characters.\n *   </FormDescription>\n * </Form>\n * ```\n */\nexport const FormDescription = memo(\n  forwardRef(function FormDescription(props: FormDescriptionProps) {\n    const htmlProps = useFormDescription(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormDescriptionOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the field described by this element. This can either be a string or\n   * a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   * @example\n   * ```jsx\n   * <FormDescription name=\"password\">\n   *   Password with at least 8 characters.\n   * </FormDescription>\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormDescriptionProps<T extends ElementType = TagName> = Props<\n  T,\n  FormDescriptionOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MA2CI,qBAAgB,WAAe,SAAA,mBAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,sDAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,UAAM,aAAW,SAAA;QACZ,WAAA;GACH,GAAA;GACA,IAAA,MAAA,KAAA;GACA;GACF,MAAA;EACA;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;SACK;EACH,GAAA;EACA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;SAA4B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAEtD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;MA0BI,kBAAqB,KAAA,WADH,SAAA,gBACqB,OAAA;CACxC,OACH,cAAA,SAAA,mBAAA,KAAA,CAAA"}
+{"version":3,"file":"form-description.js","names":[],"sources":["../../src/form/form-description.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport {\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormDescription` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { password: \"\" } });\n * const props = useFormDescription({ store, name: store.names.password });\n * <Form store={store}>\n *   <FormLabel name={store.names.password}>Password</FormLabel>\n *   <FormInput name={store.names.password} type=\"password\" />\n *   <Role {...props}>Password with at least 8 characters.</Role>\n * </Form>\n * ```\n */\nexport const useFormDescription = createHook<TagName, FormDescriptionOptions>(\n  function useFormDescription({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormDescription must be wrapped in a Form component.\",\n    );\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const name = String(nameProp);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = {\n          ...item,\n          id: id || item.id,\n          name,\n          type: \"description\",\n        };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    props = {\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    props = useCollectionItem({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a description element for a form field, which will automatically\n * receive an `aria-describedby` attribute pointing to this element.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {10-12}\n * const form = useFormStore({\n *   defaultValues: {\n *     password: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.password}>Password</FormLabel>\n *   <FormInput name={form.names.password} type=\"password\" />\n *   <FormDescription name={form.names.password}>\n *     Password with at least 8 characters.\n *   </FormDescription>\n * </Form>\n * ```\n */\nexport const FormDescription = memo(\n  forwardRef(function FormDescription(props: FormDescriptionProps) {\n    const htmlProps = useFormDescription(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormDescriptionOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the field described by this element. This can either be a string or\n   * a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   * @example\n   * ```jsx\n   * <FormDescription name=\"password\">\n   *   Password with at least 8 characters.\n   * </FormDescription>\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormDescriptionProps<T extends ElementType = TagName> = Props<\n  T,\n  FormDescriptionOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MA2CI,qBAAgB,WAAe,SAAA,mBAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAW,QAAQ,IAAA,aAAA,gBAAA,sDAAA;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,UAAM,aAAW,SAAA;QACZ,WAAA;GACH,GAAA;GACA,IAAA,MAAA,KAAA;GACA;GACF,MAAA;EACA;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;SACK;EACH,GAAA;EACA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;SAA4B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAEtD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;MA0BI,kBAAqB,KAAA,WADH,SAAA,gBACqB,OAAA;CACxC,OACH,cAAA,SAAA,mBAAA,KAAA,CAAA"}

package/dist/form/form-error.d.ts

@@ -1,4 +1,4 @@
-import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { n as CollectionItemOptions } from "../collection-item-pvEWNoNs.js";
 import { t as FormStore } from "../form-store-C4Kf5QHm.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -54,7 +54,7 @@ declare const useFormError: import("@ariakit/react-utils").Hook<"div", FormError
  * </Form>
  * ```
  */
-declare const FormError: (props: FormErrorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormError: (props: FormErrorProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormErrorOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
   /**
    * Object returned by the

package/dist/form/form-error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-error.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormError","FormErrorOptions","Hook","FormError","FormErrorProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-error.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAsB7B;;;;AAA8F;AA0B9F;;;;;;AAlDiD,cAwB5BC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;;;AA0B6C;AAC3I;;;;;;;;;;;;;;;;;;;;;AAmBoB;cApBCE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAqBvEA;;;;;;;EAbtBC,KAAAA,GAAQX,SAAAA;EAauD;;;;;;;;;AAAsB;EAFrFY,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}
+{"version":3,"file":"form-error.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormError","FormErrorOptions","Hook","FormError","FormErrorProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-error.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAsB7B;;;;AAA8F;AA0B9F;;;;;;AAlDiD,cAwB5BC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;;;AA0BiD;AAC/I;;;;;;;;;;;;;;;;;;;;;AAmBoB;cApBCE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAqBvEA;;;;;;;EAbtBC,KAAAA,GAAQX,SAAAA;EAauD;;;;;;;;;AAAsB;EAFrFY,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-error.js

@@ -31,7 +31,7 @@ const TagName = "div";
 const useFormError = createHook(function useFormError({ store, name: nameProp, getItem: getItemProp, ...props }) {
 	const context = useFormContext();
 	store = store || context;
-	invariant(store, "FormError must be wrapped in a Form component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "FormError must be wrapped in a Form component.");
 	const id = useId(props.id);
 	const ref = useRef(null);
 	const name = String(nameProp);

package/dist/form/form-error.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-error.js","names":[],"sources":["../../src/form/form-error.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormDescription` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormError({ store, name: store.names.email });\n *\n * store.useValidate(() => {\n *   if (!store.getValue(store.names.email)) {\n *     store.setError(store.names.email, \"Email is required!\");\n *   }\n * });\n *\n * <Form store={store}>\n *   <FormLabel name={store.names.email}>Email</FormLabel>\n *   <FormInput name={store.names.email} />\n *   <Role {...props} />\n * </Form>\n * ```\n */\nexport const useFormError = createHook<TagName, FormErrorOptions>(\n  function useFormError({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormError must be wrapped in a Form component.\",\n    );\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const name = String(nameProp);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, name, type: \"error\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const children = useStoreState(store, () => {\n      const error = store?.getError(name);\n      if (error == null) return;\n      if (!store?.getFieldTouched(name)) return;\n      return error;\n    });\n\n    props = {\n      role: \"alert\",\n      children,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    props = useCollectionItem({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders an element that shows an error message. The `children` will\n * automatically display the error message defined in the store.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {16}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * form.useValidate(() => {\n *   if (!form.values.email) {\n *     form.setError(form.names.email, \"Email is required!\");\n *   }\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</FormLabel>\n *   <FormInput name={form.names.email} />\n *   <FormError name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormError = memo(\n  forwardRef(function FormError(props: FormErrorProps) {\n    const htmlProps = useFormError(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormErrorOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the field associated with this error. This can either be a string\n   * or a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   * @example\n   * ```jsx\n   * <FormError name=\"password\" />\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormErrorProps<T extends ElementType = TagName> = Props<\n  T,\n  FormErrorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmDI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,gDAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAmB,IAAA,MAAA,KAAA;GAAM;GAAc,MAAA;EACnE;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CASA,CAAA;SACQ;EACN,MAAA;YARM,cAAe,aAAa;GAClC,MAAI,QAAS,OAAM,SAAA,IAAA;GACnB,IAAI,SAAQ,MAAA;GACZ,IAAA,CAAA,OAAO,gBAAA,IAAA,GAAA;GAKA,OAAA;EACP,CAAA;EACA,GAAA;EACA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;SAA4B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAEtD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}
+{"version":3,"file":"form-error.js","names":[],"sources":["../../src/form/form-error.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormDescription` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormError({ store, name: store.names.email });\n *\n * store.useValidate(() => {\n *   if (!store.getValue(store.names.email)) {\n *     store.setError(store.names.email, \"Email is required!\");\n *   }\n * });\n *\n * <Form store={store}>\n *   <FormLabel name={store.names.email}>Email</FormLabel>\n *   <FormInput name={store.names.email} />\n *   <Role {...props} />\n * </Form>\n * ```\n */\nexport const useFormError = createHook<TagName, FormErrorOptions>(\n  function useFormError({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormError must be wrapped in a Form component.\",\n    );\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const name = String(nameProp);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, name, type: \"error\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const children = useStoreState(store, () => {\n      const error = store?.getError(name);\n      if (error == null) return;\n      if (!store?.getFieldTouched(name)) return;\n      return error;\n    });\n\n    props = {\n      role: \"alert\",\n      children,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n    };\n\n    props = useCollectionItem({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders an element that shows an error message. The `children` will\n * automatically display the error message defined in the store.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {16}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * form.useValidate(() => {\n *   if (!form.values.email) {\n *     form.setError(form.names.email, \"Email is required!\");\n *   }\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</FormLabel>\n *   <FormInput name={form.names.email} />\n *   <FormError name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormError = memo(\n  forwardRef(function FormError(props: FormErrorProps) {\n    const htmlProps = useFormError(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormErrorOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the field associated with this error. This can either be a string\n   * or a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   * @example\n   * ```jsx\n   * <FormError name=\"password\" />\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormErrorProps<T extends ElementType = TagName> = Props<\n  T,\n  FormErrorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmDI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAW,QAAQ,IAAA,aAAA,gBAAA,gDAAA;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAmB,IAAA,MAAA,KAAA;GAAM;GAAc,MAAA;EACnE;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CASA,CAAA;SACQ;EACN,MAAA;YARM,cAAe,aAAa;GAClC,MAAI,QAAS,OAAM,SAAA,IAAA;GACnB,IAAI,SAAQ,MAAA;GACZ,IAAA,CAAA,OAAO,gBAAA,IAAA,GAAA;GAKA,OAAA;EACP,CAAA;EACA,GAAA;EACA;EACF,KAAA,aAAA,KAAA,MAAA,GAAA;CAEA;SAA4B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAEtD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/form/form-field.d.ts

@@ -65,7 +65,7 @@ declare const useFormField: import("@ariakit/react-utils").Hook<"input", FormFie
  * </Form>
  * ```
  */
-declare const FormField: (props: FormFieldProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormField: (props: FormFieldProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormFieldOptions<T extends ElementType = TagName> extends FormControlOptions<T> {}
 type FormFieldProps<T extends ElementType = TagName> = Props<T, FormFieldOptions<T>>;
 //#endregion

package/dist/form/form-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.d.ts","names":["Props","ElementType","FormControlOptions","TagName","useFormField","FormFieldOptions","Hook","FormField","FormFieldProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-field.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAyB7B;;;;AAAgG;AAoChG;;;;;;;;;AA/D6D,cA2BxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;AAqChG;;;;;;;;;;;;;;;AAA+F;AAE/F;;;;;;;;;;;;;;;;;;;AAFA,cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BJ,WAAAA,GAAcE,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA;AAAAA,KAElFJ,cAAAA,WAAyBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}
+{"version":3,"file":"form-field.d.ts","names":["Props","ElementType","FormControlOptions","TagName","useFormField","FormFieldOptions","Hook","FormField","FormFieldProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-field.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAyB7B;;;;AAAgG;AAoChG;;;;;;;;;AA/D6D,cA2BxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;AAqChG;;;;;;;;;;;;;;;AAA+F;AAE/F;;;;;;;;;;;;;;;;;;;AAFA,cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzGN,gBAAAA,WAA2BJ,WAAAA,GAAcE,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA;AAAAA,KAElFJ,cAAAA,WAAyBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-group-label.d.ts

@@ -1,4 +1,4 @@
-import { n as GroupLabelOptions } from "../group-label-C16IDs1b.js";
+import { n as GroupLabelOptions } from "../group-label-BKYqD4Sj.js";
 import { t as FormStore } from "../form-store-C4Kf5QHm.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -45,7 +45,7 @@ declare const useFormGroupLabel: import("@ariakit/react-utils").Hook<"div", Form
  * </Form>
  * ```
  */
-declare const FormGroupLabel: (props: FormGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormGroupLabel: (props: FormGroupLabelProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormGroupLabelOptions<T extends ElementType = TagName> extends GroupLabelOptions<T> {
   /**
    * Object returned by the

package/dist/form/form-group-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-group-label.d.ts","names":["Props","ElementType","GroupLabelOptions","FormStore","TagName","useFormGroupLabel","FormGroupLabelOptions","Hook","FormGroupLabel","FormGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/form/form-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAa7B;;AAfiD,cAe5BC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;AAAA;AA2BxG;;;;;;;;;AAAqJ;AACrJ;;;;;;;;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,iBAAAA,CAAkBW,CAAAA;EAQtFV;;AAAS;AAErB;;;;EAFIW,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}
+{"version":3,"file":"form-group-label.d.ts","names":["Props","ElementType","GroupLabelOptions","FormStore","TagName","useFormGroupLabel","FormGroupLabelOptions","Hook","FormGroupLabel","FormGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/form/form-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAa7B;;AAfiD,cAe5BC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;AAAA;AA2BxG;;;;;;;;;AAAyJ;AACzJ;;;;;;;;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACnHN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,iBAAAA,CAAkBW,CAAAA;EAQtFV;;AAAS;AAErB;;;;EAFIW,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

package/dist/form/form-group.d.ts

@@ -1,4 +1,4 @@
-import { n as GroupOptions } from "../group-CamegDJA.js";
+import { n as GroupOptions } from "../group-nGD9e6Dj.js";
 import { t as FormStore } from "../form-store-C4Kf5QHm.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -47,7 +47,7 @@ declare const useFormGroup: import("@ariakit/react-utils").Hook<"div", FormGroup
  * </Form>
  * ```
  */
-declare const FormGroup: (props: FormGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormGroup: (props: FormGroupProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormGroupOptions<T extends ElementType = TagName> extends GroupOptions<T> {
   /**
    * Object returned by the

package/dist/form/form-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-group.d.ts","names":["Props","ElementType","GroupOptions","FormStore","TagName","useFormGroup","FormGroupOptions","Hook","FormGroup","FormGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/form/form-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAe7B;;;;AAjBiD,cAiB5BC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;AA2B9F;;;;;;;;;AAA2I;AAC3I;;;;;;;;;;;;;;;;AADA,cAAqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,YAAAA,CAAaW,CAAAA;EAQnE;AAErB;;;;;;EAFIC,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}
+{"version":3,"file":"form-group.d.ts","names":["Props","ElementType","GroupOptions","FormStore","TagName","useFormGroup","FormGroupOptions","Hook","FormGroup","FormGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/form/form-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAe7B;;;;AAjBiD,cAiB5BC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;AA2B9F;;;;;;;;;AAA+I;AAC/I;;;;;;;;;;;;;;;;AADA,cAAqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,YAAAA,CAAaW,CAAAA;EAQnE;AAErB;;;;;;EAFIC,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-input.d.ts

@@ -1,4 +1,4 @@
-import { n as FocusableOptions } from "../focusable-B00tOxtB.js";
+import { n as FocusableOptions } from "../focusable-dBZH13-T.js";
 import { FormControlOptions } from "./form-control.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -42,7 +42,7 @@ declare const useFormInput: import("@ariakit/react-utils").Hook<"input", FormInp
  * </Form>
  * ```
  */
-declare const FormInput: (props: FormInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormInput: (props: FormInputProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormInputOptions<T extends ElementType = TagName> extends FormControlOptions<T>, FocusableOptions<T> {}
 type FormInputProps<T extends ElementType = TagName> = Props<T, FormInputOptions<T>>;
 //#endregion

package/dist/form/form-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-input.d.ts","names":["Props","ElementType","FocusableOptions","FormControlOptions","TagName","useFormInput","FormInputOptions","Hook","FormInput","FormInputProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-input.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAgB7B;;;;AAAgG;AAlBnC,cAkBxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;;;;;AAqB2C;AAC3I;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIX,gBAAAA,CAAiBW,CAAAA;AAAAA,KAEvGJ,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}
+{"version":3,"file":"form-input.d.ts","names":["Props","ElementType","FocusableOptions","FormControlOptions","TagName","useFormInput","FormInputOptions","Hook","FormInput","FormInputProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-input.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAgB7B;;;;AAAgG;AAlBnC,cAkBxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;;;;;AAqB+C;AAC/I;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIX,gBAAAA,CAAiBW,CAAAA;AAAAA,KAEvGJ,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-input.js

@@ -24,7 +24,7 @@ const TagName = "input";
 const useFormInput = createHook(function useFormInput({ store, name: nameProp, ...props }) {
 	const context = useFormContext();
 	store = store || context;
-	invariant(store, "FormInput must be wrapped in a Form component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "FormInput must be wrapped in a Form component.");
 	const name = String(nameProp);
 	const onChangeProp = props.onChange;
 	const onChange = useEvent((event) => {

package/dist/form/form-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-input.js","names":[],"sources":["../../src/form/form-input.tsx"],"sourcesContent":["import {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ChangeEvent, ElementType } from \"react\";\nimport type { FocusableOptions } from \"../focusable/focusable.tsx\";\nimport { useFocusable } from \"../focusable/focusable.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormInput` component. Unlike `useFormControl`, this\n * hook returns the `value` and `onChange` props that can be passed to a native\n * input, select or textarea elements.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormInput({ store, name: store.names.email });\n * <Form store={store}>\n *   <FormLabel name={store.names.email}>Email</FormLabel>\n *   <Role {...props} render={<input />} />\n * </Form>\n * ```\n */\nexport const useFormInput = createHook<TagName, FormInputOptions>(\n  function useFormInput({ store, name: nameProp, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormInput must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const onChangeProp = props.onChange;\n\n    const onChange = useEvent((event: ChangeEvent<HTMLType>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setValue(name, event.target.value);\n    });\n\n    const value = store.useValue(name);\n\n    props = {\n      value,\n      ...props,\n      onChange,\n    };\n\n    props = useFocusable<TagName>(props);\n    props = useFormControl({ store, name, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a form input. Unlike\n * [`FormControl`](https://ariakit.com/reference/form-control), this component\n * passes the `value` and `onChange` props down to the underlying element that\n * can be native input, select or textarea elements.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {9}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</FormLabel>\n *   <FormInput name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormInput = memo(\n  forwardRef(function FormInput(props: FormInputProps) {\n    const htmlProps = useFormInput(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormInputOptions<T extends ElementType = TagName>\n  extends FormControlOptions<T>, FocusableOptions<T> {}\n\nexport type FormInputProps<T extends ElementType = TagName> = Props<\n  T,\n  FormInputOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAqCI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,gDAAe;CAC5B,MAAM,OAAA,OAAA,QAAqB;CAE3B,MAAM,eAAW,MAAU;OACzB,WAAe,UAAK,UAAA;EACpB,eAAU,KAAA;EACV,IAAA,MAAO,kBAAqB;EAC7B,OAAA,SAAA,MAAA,MAAA,OAAA,KAAA;CAID,CAAA;SAFc;EAIZ,OAAG,MAAA,SAAA,IAAA;EACH,GAAA;EACF;CAEA;CACA,QAAQ,aAAA,KAAe;SAAE,eAAA;EAAO;EAAM;EAAU,GAAA;CAEhD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;MAyBI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}
+{"version":3,"file":"form-input.js","names":[],"sources":["../../src/form/form-input.tsx"],"sourcesContent":["import {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ChangeEvent, ElementType } from \"react\";\nimport type { FocusableOptions } from \"../focusable/focusable.tsx\";\nimport { useFocusable } from \"../focusable/focusable.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FormInput` component. Unlike `useFormControl`, this\n * hook returns the `value` and `onChange` props that can be passed to a native\n * input, select or textarea elements.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormInput({ store, name: store.names.email });\n * <Form store={store}>\n *   <FormLabel name={store.names.email}>Email</FormLabel>\n *   <Role {...props} render={<input />} />\n * </Form>\n * ```\n */\nexport const useFormInput = createHook<TagName, FormInputOptions>(\n  function useFormInput({ store, name: nameProp, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormInput must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const onChangeProp = props.onChange;\n\n    const onChange = useEvent((event: ChangeEvent<HTMLType>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setValue(name, event.target.value);\n    });\n\n    const value = store.useValue(name);\n\n    props = {\n      value,\n      ...props,\n      onChange,\n    };\n\n    props = useFocusable<TagName>(props);\n    props = useFormControl({ store, name, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a form input. Unlike\n * [`FormControl`](https://ariakit.com/reference/form-control), this component\n * passes the `value` and `onChange` props down to the underlying element that\n * can be native input, select or textarea elements.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {9}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</FormLabel>\n *   <FormInput name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormInput = memo(\n  forwardRef(function FormInput(props: FormInputProps) {\n    const htmlProps = useFormInput(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormInputOptions<T extends ElementType = TagName>\n  extends FormControlOptions<T>, FocusableOptions<T> {}\n\nexport type FormInputProps<T extends ElementType = TagName> = Props<\n  T,\n  FormInputOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAqCI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAO,QAAO,IAAQ,aAAA,gBAAA,gDAAA;CAC5B,MAAM,OAAA,OAAA,QAAqB;CAE3B,MAAM,eAAW,MAAU;OACzB,WAAe,UAAK,UAAA;EACpB,eAAU,KAAA;EACV,IAAA,MAAO,kBAAqB;EAC7B,OAAA,SAAA,MAAA,MAAA,OAAA,KAAA;CAID,CAAA;SAFc;EAIZ,OAAG,MAAA,SAAA,IAAA;EACH,GAAA;EACF;CAEA;CACA,QAAQ,aAAA,KAAe;SAAE,eAAA;EAAO;EAAM;EAAU,GAAA;CAEhD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;MAyBI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/form/form-label.d.ts

@@ -1,4 +1,4 @@
-import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { n as CollectionItemOptions } from "../collection-item-pvEWNoNs.js";
 import { t as FormStore } from "../form-store-C4Kf5QHm.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -49,7 +49,7 @@ declare const useFormLabel: import("@ariakit/react-utils").Hook<"label", FormLab
  * </Form>
  * ```
  */
-declare const FormLabel: (props: FormLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormLabel: (props: FormLabelProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormLabelOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
   /**
    * Object returned by the

package/dist/form/form-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormLabel","FormLabelOptions","Hook","FormLabel","FormLabelProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-label.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAkB7B;;;;AAAgG;AAyBhG;;AA7CiD,cAoB5BC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;;;AAyB2C;AAC3I;;;;;;;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAmBvFd;;AAAU;AAEpB;;;;EAbIe,KAAAA,GAAQX,SAAAA;EAawDU;;;;;;;;;;EAFhEE,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}
+{"version":3,"file":"form-label.d.ts","names":["StringLike","Props","ElementType","CollectionItemOptions","FormStore","TagName","useFormLabel","FormLabelOptions","Hook","FormLabel","FormLabelProps","props","ReactElement","JSXElementConstructor","T","store","name"],"sources":["../../src/form/form-label.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAkB7B;;;;AAAgG;AAyBhG;;AA7CiD,cAoB5BC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;;;AAyB+C;AAC/I;;;;;;;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EAmBvFd;;AAAU;AAEpB;;;;EAbIe,KAAAA,GAAQX,SAAAA;EAawDU;;;;;;;;;;EAFhEE,IAAAA,EAAMhB,UAAAA;AAAAA;AAAAA,KAEEU,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-label.js

@@ -31,7 +31,7 @@ function supportsNativeLabel(tagName) {
 const useFormLabel = createHook(function useFormLabel({ store, name: nameProp, getItem: getItemProp, ...props }) {
 	const context = useFormContext();
 	store = store || context;
-	invariant(store, "FormLabel must be wrapped in a Form component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "FormLabel must be wrapped in a Form component.");
 	const id = useId(props.id);
 	const ref = useRef(null);
 	const name = String(nameProp);

package/dist/form/form-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.js","names":[],"sources":["../../src/form/form-label.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useId,\n  useMergeRefs,\n  useTagName,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getFirstTabbableIn, invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"label\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction supportsNativeLabel(tagName?: string) {\n  return (\n    tagName === \"input\" ||\n    tagName === \"textarea\" ||\n    tagName === \"select\" ||\n    tagName === \"meter\" ||\n    tagName === \"progress\"\n  );\n}\n\n/**\n * Returns props to create a `FormLabel` component. If the field is not a native\n * input, select or textarea element, the hook will return props to render a\n * `span` element. Instead of relying on the `htmlFor` prop, it'll rely on the\n * `aria-labelledby` attribute on the form field. Clicking on the label will\n * move focus to the field even if it's not a native input.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormLabel({ store, name: store.names.email });\n * <Form store={store}>\n *   <Role {...props}>Email</Role>\n *   <FormInput name={store.names.email} />\n * </Form>\n * ```\n */\nexport const useFormLabel = createHook<TagName, FormLabelOptions>(\n  function useFormLabel({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormLabel must be wrapped in a Form component.\",\n    );\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const name = String(nameProp);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, name, type: \"label\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const field = useStoreState(store, (state) =>\n      state.items.find((item) => item.type === \"field\" && item.name === name),\n    );\n    const fieldTagName = useTagName(field?.element, \"input\");\n    const isNativeLabel = supportsNativeLabel(fieldTagName);\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLLabelElement>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isNativeLabel) return;\n      const fieldElement = field?.element;\n      if (!fieldElement) return;\n      queueMicrotask(() => {\n        const focusableElement = getFirstTabbableIn(fieldElement, true, true);\n        focusableElement?.focus();\n        const role = focusableElement?.getAttribute(\"role\");\n        // If the field is a combobox, we don't want to click on it, as it'll\n        // open the listbox.\n        if (role === \"combobox\") return;\n        focusableElement?.click();\n      });\n    });\n\n    props = {\n      render: isNativeLabel ? <label /> : <span />,\n      htmlFor: isNativeLabel ? field?.id : undefined,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n      onClick,\n    };\n\n    if (!isNativeLabel) {\n      props = {\n        ...props,\n        style: {\n          cursor: \"default\",\n          ...props.style,\n        },\n      };\n    }\n\n    props = useCollectionItem<TagName>({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a label associated with a form field, even if the field is not a\n * native input.\n *\n * If the field is a native input, select or textarea element, this component\n * will render a native `label` element and rely on its `htmlFor` prop.\n * Otherwise, it'll render a `span` element and rely on the `aria-labelledby`\n * attribute on the form field instead. Clicking on the label will move focus to\n * the field even if it's not a native input.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {8}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</Role>\n *   <FormInput name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormLabel = memo(\n  forwardRef(function FormLabel(props: FormLabelProps) {\n    const htmlProps = useFormLabel(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormLabelOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the field labeled by this element. This can either be a string or a\n   * reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   * @example\n   * ```jsx\n   * <FormLabel name=\"email\">Email</FormLabel>\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  FormLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAyBA,MAAA,UAAS;SAEL,oBAAY,SACZ;CAKJ,OAAA,YAAA,WAAA,YAAA,cAAA,YAAA,YAAA,YAAA,WAAA,YAAA;;;;;;;;;;;;;;;;;;;MA0BI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,gDAAQ;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAmB,IAAA,MAAA,KAAA;GAAM;GAAc,MAAA;EACnE;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;CAIA,MAAM,QAAA,cAAgB,QAAA,UADD,MAAA,MAAW,MAAO,SAAS,KACM,SAAA,WAAA,KAAA,SAAA,IAAA,CAAA;CAEtD,MAAM,gBAAc,oBAAM,WAAA,OAAA,SAAA,OAAA,CAAA;CAE1B,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAA,kBAAe;EACnB,IAAA,eAAM;EACN,MAAK,eAAc,OAAA;EACnB,IAAA,CAAA,cAAA;uBACQ;GACN,MAAA,mBAAwB,mBAAA,cAAA,MAAA,IAAA;GAIxB,kBAHa,MAAkB;GAI/B,IAAA,kBAAkB,aAAM,MAAA,MAAA,YAAA;GACzB,kBAAA,MAAA;EACF,CAAA;CAED,CAAA;SACE;EACA,QAAA,gBAAqC,oBAAA,SAAA,CAAA,CAAA,IAAA,oBAAA,QAAA,CAAA,CAAA;EACrC,SAAG,gBAAA,OAAA,KAAA,KAAA;EACH,GAAA;EACA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACF;CAEA;KAEO,CAAA,eAAA,QAAA;EACH,GAAA;SACE;GACA,QAAG;GACL,GAAA,MAAA;EACF;CAGF;SAAqC,kBAAA;EAAO;EAAU,GAAA;EAAS;CAE/D,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}
+{"version":3,"file":"form-label.js","names":[],"sources":["../../src/form/form-label.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useId,\n  useMergeRefs,\n  useTagName,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getFirstTabbableIn, invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"label\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction supportsNativeLabel(tagName?: string) {\n  return (\n    tagName === \"input\" ||\n    tagName === \"textarea\" ||\n    tagName === \"select\" ||\n    tagName === \"meter\" ||\n    tagName === \"progress\"\n  );\n}\n\n/**\n * Returns props to create a `FormLabel` component. If the field is not a native\n * input, select or textarea element, the hook will return props to render a\n * `span` element. Instead of relying on the `htmlFor` prop, it'll rely on the\n * `aria-labelledby` attribute on the form field. Clicking on the label will\n * move focus to the field even if it's not a native input.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { email: \"\" } });\n * const props = useFormLabel({ store, name: store.names.email });\n * <Form store={store}>\n *   <Role {...props}>Email</Role>\n *   <FormInput name={store.names.email} />\n * </Form>\n * ```\n */\nexport const useFormLabel = createHook<TagName, FormLabelOptions>(\n  function useFormLabel({\n    store,\n    name: nameProp,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormLabel must be wrapped in a Form component.\",\n    );\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const name = String(nameProp);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, name, type: \"label\" };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, name, getItemProp],\n    );\n\n    const field = useStoreState(store, (state) =>\n      state.items.find((item) => item.type === \"field\" && item.name === name),\n    );\n    const fieldTagName = useTagName(field?.element, \"input\");\n    const isNativeLabel = supportsNativeLabel(fieldTagName);\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLLabelElement>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isNativeLabel) return;\n      const fieldElement = field?.element;\n      if (!fieldElement) return;\n      queueMicrotask(() => {\n        const focusableElement = getFirstTabbableIn(fieldElement, true, true);\n        focusableElement?.focus();\n        const role = focusableElement?.getAttribute(\"role\");\n        // If the field is a combobox, we don't want to click on it, as it'll\n        // open the listbox.\n        if (role === \"combobox\") return;\n        focusableElement?.click();\n      });\n    });\n\n    props = {\n      render: isNativeLabel ? <label /> : <span />,\n      htmlFor: isNativeLabel ? field?.id : undefined,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n      onClick,\n    };\n\n    if (!isNativeLabel) {\n      props = {\n        ...props,\n        style: {\n          cursor: \"default\",\n          ...props.style,\n        },\n      };\n    }\n\n    props = useCollectionItem<TagName>({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a label associated with a form field, even if the field is not a\n * native input.\n *\n * If the field is a native input, select or textarea element, this component\n * will render a native `label` element and rely on its `htmlFor` prop.\n * Otherwise, it'll render a `span` element and rely on the `aria-labelledby`\n * attribute on the form field instead. Clicking on the label will move focus to\n * the field even if it's not a native input.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {8}\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</Role>\n *   <FormInput name={form.names.email} />\n * </Form>\n * ```\n */\nexport const FormLabel = memo(\n  forwardRef(function FormLabel(props: FormLabelProps) {\n    const htmlProps = useFormLabel(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormLabelOptions<\n  T extends ElementType = TagName,\n> extends CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the field labeled by this element. This can either be a string or a\n   * reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   * @example\n   * ```jsx\n   * <FormLabel name=\"email\">Email</FormLabel>\n   * ```\n   */\n  name: StringLike;\n}\n\nexport type FormLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  FormLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAyBA,MAAA,UAAS;SAEL,oBAAY,SACZ;CAKJ,OAAA,YAAA,WAAA,YAAA,cAAA,YAAA,YAAA,YAAA,WAAA,YAAA;;;;;;;;;;;;;;;;;;;MA0BI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,SAAA,aAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAW,QAAQ,IAAA,aAAA,gBAAA,gDAAA;CACzB,MAAM,KAAA,MAAM,MAAqB,EAAA;CACjC,MAAM,MAAA,OAAO,IAAO;CAEpB,MAAM,OAAA,OAAU,QAAA;OAEZ,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAmB,IAAA,MAAA,KAAA;GAAM;GAAc,MAAA;EACnE;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACA;IAAC;EAAI;EAAM;EACb;CAEA,CAAA;CAIA,MAAM,QAAA,cAAgB,QAAA,UADD,MAAA,MAAW,MAAO,SAAS,KACM,SAAA,WAAA,KAAA,SAAA,IAAA,CAAA;CAEtD,MAAM,gBAAc,oBAAM,WAAA,OAAA,SAAA,OAAA,CAAA;CAE1B,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAA,kBAAe;EACnB,IAAA,eAAM;EACN,MAAK,eAAc,OAAA;EACnB,IAAA,CAAA,cAAA;uBACQ;GACN,MAAA,mBAAwB,mBAAA,cAAA,MAAA,IAAA;GAIxB,kBAHa,MAAkB;GAI/B,IAAA,kBAAkB,aAAM,MAAA,MAAA,YAAA;GACzB,kBAAA,MAAA;EACF,CAAA;CAED,CAAA;SACE;EACA,QAAA,gBAAqC,oBAAA,SAAA,CAAA,CAAA,IAAA,oBAAA,QAAA,CAAA,CAAA;EACrC,SAAG,gBAAA,OAAA,KAAA,KAAA;EACH,GAAA;EACA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACF;CAEA;KAEO,CAAA,eAAA,QAAA;EACH,GAAA;SACE;GACA,QAAG;GACL,GAAA,MAAA;EACF;CAGF;SAAqC,kBAAA;EAAO;EAAU,GAAA;EAAS;CAE/D,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/form/form-push.d.ts

@@ -1,5 +1,5 @@
-import { n as ButtonOptions } from "../button-Cp853csH.js";
-import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { n as ButtonOptions } from "../button-CVWcOgxs.js";
+import { n as CollectionItemOptions } from "../collection-item-pvEWNoNs.js";
 import { t as FormStore } from "../form-store-C4Kf5QHm.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -68,7 +68,7 @@ declare const useFormPush: import("@ariakit/react-utils").Hook<"button", FormPus
  * </Form>
  * ```
  */
-declare const FormPush: (props: FormPushProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormPush: (props: FormPushProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormPushOptions<T extends ElementType = TagName> extends ButtonOptions<T>, CollectionItemOptions<T> {
   /**
    * Object returned by the

package/dist/form/form-push.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-push.d.ts","names":["StringLike","Props","ElementType","ButtonOptions","CollectionItemOptions","FormStore","TagName","useFormPush","FormPushOptions","Hook","FormPush","FormPushProps","props","ReactElement","JSXElementConstructor","T","store","name","value","autoFocusOnClick"],"sources":["../../src/form/form-push.d.ts"],"mappings":";;;;;;;;cAMcM,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AA0B7B;;;;AAA+F;AAmC/F;;;;;;;;;AAAyI;AA/DxF,cA4B5BC,WAAAA,iCAA4CE,IAAAA,WAAeD,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6D3E;AAEpB;;;;;;;cA5BqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BN,WAAAA,GAAcI,OAAAA,UAAiBH,aAAAA,CAAcY,CAAAA,GAAIX,qBAAAA,CAAsBW,CAAAA;EA2BhD;;;;;;;EAnB9DC,KAAAA,GAAQX,SAAAA;EAmB0EU;;AAAC;;;;EAZnFE,IAAAA,EAAMjB,UAAAA;;;;EAINkB,KAAAA;;;;;;EAMAC,gBAAAA;AAAAA;AAAAA,KAEQR,aAAAA,WAAwBT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}
+{"version":3,"file":"form-push.d.ts","names":["StringLike","Props","ElementType","ButtonOptions","CollectionItemOptions","FormStore","TagName","useFormPush","FormPushOptions","Hook","FormPush","FormPushProps","props","ReactElement","JSXElementConstructor","T","store","name","value","autoFocusOnClick"],"sources":["../../src/form/form-push.d.ts"],"mappings":";;;;;;;;cAMcM,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AA0B7B;;;;AAA+F;AAmC/F;;;;;;;;;AAA6I;AA/D5F,cA4B5BC,WAAAA,iCAA4CE,IAAAA,WAAeD,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6D3E;AAEpB;;;;;;;cA5BqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACvGN,eAAAA,WAA0BN,WAAAA,GAAcI,OAAAA,UAAiBH,aAAAA,CAAcY,CAAAA,GAAIX,qBAAAA,CAAsBW,CAAAA;EA2BhD;;;;;;;EAnB9DC,KAAAA,GAAQX,SAAAA;EAmB0EU;;AAAC;;;;EAZnFE,IAAAA,EAAMjB,UAAAA;;;;EAINkB,KAAAA;;;;;;EAMAC,gBAAAA;AAAAA;AAAAA,KAEQR,aAAAA,WAAwBT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}

package/dist/form/form-push.js

@@ -47,7 +47,7 @@ function getFirstFieldsByName(items, name) {
 const useFormPush = createHook(function useFormPush({ store, value, name: nameProp, getItem: getItemProp, autoFocusOnClick = true, ...props }) {
 	const context = useFormContext();
 	store = store || context;
-	invariant(store, "FormPush must be wrapped in a Form component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "FormPush must be wrapped in a Form component.");
 	const name = String(nameProp);
 	const [shouldFocus, setShouldFocus] = useState(false);
 	useEffect(() => {

package/dist/form/form-push.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-push.js","names":[],"sources":["../../src/form/form-push.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport type { ButtonOptions } from \"../button/button.tsx\";\nimport { useButton } from \"../button/button.tsx\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore, FormStoreState } from \"./form-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getFirstFieldsByName(\n  items: FormStoreState[\"items\"] | undefined,\n  name: string,\n) {\n  if (!items) return [];\n  const fields: FormStoreState[\"items\"] = [];\n  for (const item of items) {\n    if (item.type !== \"field\") continue;\n    if (!item.name.startsWith(name)) continue;\n    const nameWithIndex = item.name.replace(/(\\.\\d+)\\..+$/, \"$1\");\n    const regex = new RegExp(`^${nameWithIndex}`);\n    if (!fields.some((i) => regex.test(i.name))) {\n      fields.push(item);\n    }\n  }\n  return fields;\n}\n\n/**\n * Returns props to create a `FormPush` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n * const props = useFormPush({\n *   store,\n *   name: store.names.languages,\n *   value: \"\",\n * });\n * const values = useStoreState(store, \"values\");\n *\n * <Form store={store}>\n *   {values.languages.map((_, i) => (\n *     <FormInput key={i} name={store.names.languages[i]} />\n *   ))}\n *   <Role {...props}>Add new language</Role>\n * </Form>\n * ```\n */\nexport const useFormPush = createHook<TagName, FormPushOptions>(\n  function useFormPush({\n    store,\n    value,\n    name: nameProp,\n    getItem: getItemProp,\n    autoFocusOnClick = true,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormPush must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const [shouldFocus, setShouldFocus] = useState(false);\n\n    useEffect(() => {\n      if (!shouldFocus) return;\n      const items = getFirstFieldsByName(store?.getState().items, name);\n      const element = items?.[items.length - 1]?.element;\n      if (!element) return;\n      element.focus();\n      setShouldFocus(false);\n    }, [store, shouldFocus, name]);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, type: \"button\", name };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [name, getItemProp],\n    );\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.pushValue(name, value);\n      if (!autoFocusOnClick) return;\n      setShouldFocus(true);\n    });\n\n    props = {\n      ...props,\n      onClick,\n    };\n\n    props = useButton(props);\n    props = useCollectionItem<TagName>({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a button that will push items to an array value in the form store\n * when clicked.\n *\n * The [`name`](https://ariakit.com/reference/form-push#name) prop needs to be\n * provided to identify the array field. The\n * [`value`](https://ariakit.com/reference/form-push#value) prop is required to\n * define the value that will be added to the array.\n *\n * By default, the newly added input will be automatically focused when the\n * button is clicked unless the\n * [`autoFocusOnClick`](https://ariakit.com/reference/form-push#autofocusonclick)\n * prop is set to `false`.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {13-15}\n * const form = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n *\n * const values = useStoreState(form, \"values\");\n *\n * <Form store={form}>\n *   {values.languages.map((_, i) => (\n *     <FormInput key={i} name={form.names.languages[i]} />\n *   ))}\n *   <FormPush name={form.names.languages} value=\"\">\n *     Add new language\n *   </FormPush>\n * </Form>\n * ```\n */\nexport const FormPush = forwardRef(function FormPush(props: FormPushProps) {\n  const htmlProps = useFormPush(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormPushOptions<T extends ElementType = TagName>\n  extends ButtonOptions<T>, CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the array field. This can either be a string or a reference to a\n   * field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   */\n  name: StringLike;\n  /**\n   * Value that will initially be assigned to the array item when it's pushed.\n   */\n  value: unknown;\n  /**\n   * Whether the newly added input should be automatically focused when the\n   * button is clicked.\n   * @default true\n   */\n  autoFocusOnClick?: boolean;\n}\n\nexport type FormPushProps<T extends ElementType = TagName> = Props<\n  T,\n  FormPushOptions<T>\n>;\n"],"mappings":";;;;;;;;AAsBA,MAAA,UAAS;SAIF,qBAAe,OAAA,MAAA;CACpB,IAAA,CAAA,OAAM,OAAmC,CAAA;CACzC,MAAK,SAAM,CAAA;MACL,MAAK,QAAS,OAAA;EAClB,IAAI,KAAC,SAAU,SAAW;EAC1B,IAAA,CAAA,KAAM,KAAA,WAAgB,IAAK,GAAK;EAChC,MAAM,gBAAY,KAAO,KAAI,QAAA,gBAAe,IAAA;EAC5C,MAAK,QAAO,IAAM,OAAM,IAAA,eAAkB;EAG5C,IAAA,CAAA,OAAA,MAAA,MAAA,MAAA,KAAA,EAAA,IAAA,CAAA,GAAA,OAAA,KAAA,IAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MAoCI,cAAgB,WAAA,SAAe,YAAA,EAAA,OAAA,OAAA,MAAA,UAAA,SAAA,aAAA,mBAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,+CAAe;CAC5B,MAAM,OAAC,OAAa,QAAA;CAEpB,MAAA,CAAA,aAAgB,kBAAA,SAAA,KAAA;iBACT;EACL,IAAA,CAAA,aAAc;EACd,MAAM,QAAA,qBAAwB,OAAS,SAAI,EAAA,OAAA,IAAA;EAC3C,MAAK,UAAS,QAAA,MAAA,SAAA,IAAA;EACd,IAAA,CAAA,SAAc;EACd,QAAA,MAAA;EACF,eAAG,KAAA;IAAC;EAAO;EAAa;EAAK;CAE7B,CAAA;OAEI,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAgB,MAAA;GAAK;EACjD;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACC;CAGH,GAAA,CAAA,MAAM,WAAc,CAAA;CAEpB,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAO,kBAAqB;EAC5B,OAAK,UAAA,MAAkB,KAAA;EACvB,IAAA,CAAA,kBAAmB;EACpB,eAAA,IAAA;CAED,CAAA;SACK;EACH,GAAA;EACF;CAEA;CACA,QAAQ,UAAA,KAAA;SAA6B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAE/D,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsCE,WAAO,WAAc,SADH,SAAY,OACS;CACxC,OAAA,cAAA,SAAA,YAAA,KAAA,CAAA"}
+{"version":3,"file":"form-push.js","names":[],"sources":["../../src/form/form-push.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport type { ButtonOptions } from \"../button/button.tsx\";\nimport { useButton } from \"../button/button.tsx\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore, FormStoreState } from \"./form-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getFirstFieldsByName(\n  items: FormStoreState[\"items\"] | undefined,\n  name: string,\n) {\n  if (!items) return [];\n  const fields: FormStoreState[\"items\"] = [];\n  for (const item of items) {\n    if (item.type !== \"field\") continue;\n    if (!item.name.startsWith(name)) continue;\n    const nameWithIndex = item.name.replace(/(\\.\\d+)\\..+$/, \"$1\");\n    const regex = new RegExp(`^${nameWithIndex}`);\n    if (!fields.some((i) => regex.test(i.name))) {\n      fields.push(item);\n    }\n  }\n  return fields;\n}\n\n/**\n * Returns props to create a `FormPush` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n * const props = useFormPush({\n *   store,\n *   name: store.names.languages,\n *   value: \"\",\n * });\n * const values = useStoreState(store, \"values\");\n *\n * <Form store={store}>\n *   {values.languages.map((_, i) => (\n *     <FormInput key={i} name={store.names.languages[i]} />\n *   ))}\n *   <Role {...props}>Add new language</Role>\n * </Form>\n * ```\n */\nexport const useFormPush = createHook<TagName, FormPushOptions>(\n  function useFormPush({\n    store,\n    value,\n    name: nameProp,\n    getItem: getItemProp,\n    autoFocusOnClick = true,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormPush must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const [shouldFocus, setShouldFocus] = useState(false);\n\n    useEffect(() => {\n      if (!shouldFocus) return;\n      const items = getFirstFieldsByName(store?.getState().items, name);\n      const element = items?.[items.length - 1]?.element;\n      if (!element) return;\n      element.focus();\n      setShouldFocus(false);\n    }, [store, shouldFocus, name]);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, type: \"button\", name };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [name, getItemProp],\n    );\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.pushValue(name, value);\n      if (!autoFocusOnClick) return;\n      setShouldFocus(true);\n    });\n\n    props = {\n      ...props,\n      onClick,\n    };\n\n    props = useButton(props);\n    props = useCollectionItem<TagName>({ store, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a button that will push items to an array value in the form store\n * when clicked.\n *\n * The [`name`](https://ariakit.com/reference/form-push#name) prop needs to be\n * provided to identify the array field. The\n * [`value`](https://ariakit.com/reference/form-push#value) prop is required to\n * define the value that will be added to the array.\n *\n * By default, the newly added input will be automatically focused when the\n * button is clicked unless the\n * [`autoFocusOnClick`](https://ariakit.com/reference/form-push#autofocusonclick)\n * prop is set to `false`.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {13-15}\n * const form = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n *\n * const values = useStoreState(form, \"values\");\n *\n * <Form store={form}>\n *   {values.languages.map((_, i) => (\n *     <FormInput key={i} name={form.names.languages[i]} />\n *   ))}\n *   <FormPush name={form.names.languages} value=\"\">\n *     Add new language\n *   </FormPush>\n * </Form>\n * ```\n */\nexport const FormPush = forwardRef(function FormPush(props: FormPushProps) {\n  const htmlProps = useFormPush(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormPushOptions<T extends ElementType = TagName>\n  extends ButtonOptions<T>, CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the array field. This can either be a string or a reference to a\n   * field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   */\n  name: StringLike;\n  /**\n   * Value that will initially be assigned to the array item when it's pushed.\n   */\n  value: unknown;\n  /**\n   * Whether the newly added input should be automatically focused when the\n   * button is clicked.\n   * @default true\n   */\n  autoFocusOnClick?: boolean;\n}\n\nexport type FormPushProps<T extends ElementType = TagName> = Props<\n  T,\n  FormPushOptions<T>\n>;\n"],"mappings":";;;;;;;;AAsBA,MAAA,UAAS;SAIF,qBAAe,OAAA,MAAA;CACpB,IAAA,CAAA,OAAM,OAAmC,CAAA;CACzC,MAAK,SAAM,CAAA;MACL,MAAK,QAAS,OAAA;EAClB,IAAI,KAAC,SAAU,SAAW;EAC1B,IAAA,CAAA,KAAM,KAAA,WAAgB,IAAK,GAAK;EAChC,MAAM,gBAAY,KAAO,KAAI,QAAA,gBAAe,IAAA;EAC5C,MAAK,QAAO,IAAM,OAAM,IAAA,eAAkB;EAG5C,IAAA,CAAA,OAAA,MAAA,MAAA,MAAA,KAAA,EAAA,IAAA,CAAA,GAAA,OAAA,KAAA,IAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MAoCI,cAAgB,WAAA,SAAe,YAAA,EAAA,OAAA,OAAA,MAAA,UAAA,SAAA,aAAA,mBAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAO,QAAO,IAAQ,aAAA,gBAAA,+CAAA;CAC5B,MAAM,OAAC,OAAa,QAAA;CAEpB,MAAA,CAAA,aAAgB,kBAAA,SAAA,KAAA;iBACT;EACL,IAAA,CAAA,aAAc;EACd,MAAM,QAAA,qBAAwB,OAAS,SAAI,EAAA,OAAA,IAAA;EAC3C,MAAK,UAAS,QAAA,MAAA,SAAA,IAAA;EACd,IAAA,CAAA,SAAc;EACd,QAAA,MAAA;EACF,eAAG,KAAA;IAAC;EAAO;EAAa;EAAK;CAE7B,CAAA;OAEI,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAgB,MAAA;GAAK;EACjD;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACC;CAGH,GAAA,CAAA,MAAM,WAAc,CAAA;CAEpB,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAO,kBAAqB;EAC5B,OAAK,UAAA,MAAkB,KAAA;EACvB,IAAA,CAAA,kBAAmB;EACpB,eAAA,IAAA;CAED,CAAA;SACK;EACH,GAAA;EACF;CAEA;CACA,QAAQ,UAAA,KAAA;SAA6B,kBAAA;EAAO;EAAU,GAAA;EAAS;CAE/D,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsCE,WAAO,WAAc,SADH,SAAY,OACS;CACxC,OAAA,cAAA,SAAA,YAAA,KAAA,CAAA"}

package/dist/form/form-radio-group.d.ts

@@ -48,7 +48,7 @@ declare const useFormRadioGroup: import("@ariakit/react-utils").Hook<"div", Form
  * </Form>
  * ```
  */
-declare const FormRadioGroup: (props: FormRadioGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormRadioGroup: (props: FormRadioGroupProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type FormRadioGroupOptions<T extends ElementType = TagName> = FormGroupOptions<T>;
 type FormRadioGroupProps<T extends ElementType = TagName> = Props<T, FormRadioGroupOptions<T>>;
 //#endregion

package/dist/form/form-radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-radio-group.d.ts","names":["Props","ElementType","FormGroupOptions","TagName","useFormRadioGroup","FormRadioGroupOptions","Hook","FormRadioGroup","FormRadioGroupProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-radio-group.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAkB7B;;;;AAAwG;AA0BxG;;AA9CyD,cAoBpCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;;;;;;AA0B6C;AACrJ;;;;;;;;;;;;;;;AAAuF;AACvF;;cAFqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,KACpHN,qBAAAA,WAAgCJ,WAAAA,GAAcE,OAAAA,IAAWD,gBAAAA,CAAiBU,CAAAA;AAAAA,KAC1EJ,mBAAAA,WAA8BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}
+{"version":3,"file":"form-radio-group.d.ts","names":["Props","ElementType","FormGroupOptions","TagName","useFormRadioGroup","FormRadioGroupOptions","Hook","FormRadioGroup","FormRadioGroupProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/form/form-radio-group.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAkB7B;;;;AAAwG;AA0BxG;;AA9CyD,cAoBpCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;;;;;;AA0BiD;AACzJ;;;;;;;;;;;;;;;AAAuF;AACvF;;cAFqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,KACxHN,qBAAAA,WAAgCJ,WAAAA,GAAcE,OAAAA,IAAWD,gBAAAA,CAAiBU,CAAAA;AAAAA,KAC1EJ,mBAAAA,WAA8BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

package/dist/form/form-radio.d.ts

@@ -50,7 +50,7 @@ declare const useFormRadio: import("@ariakit/react-utils").Hook<"input", FormRad
  * </Form>
  * ```
  */
-declare const FormRadio: (props: FormRadioProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormRadio: (props: FormRadioProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormRadioOptions<T extends ElementType = TagName> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {}
 type FormRadioProps<T extends ElementType = TagName> = Props<T, FormRadioOptions<T>>;
 //#endregion

package/dist/form/form-radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-radio.d.ts","names":["Props","ElementType","RadioOptions","FormControlOptions","TagName","useFormRadio","FormRadioOptions","Hook","FormRadio","FormRadioProps","props","ReactElement","JSXElementConstructor","T","Omit"],"sources":["../../src/form/form-radio.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAoB7B;;;;AAAgG;AAyBhG;;;;AA/C6D,cAsBxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;AAyB2C;AAC3I;;;;;;;;;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIC,IAAAA,CAAKZ,YAAAA,CAAaW,CAAAA;AAAAA,KAExGJ,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}
+{"version":3,"file":"form-radio.d.ts","names":["Props","ElementType","RadioOptions","FormControlOptions","TagName","useFormRadio","FormRadioOptions","Hook","FormRadio","FormRadioProps","props","ReactElement","JSXElementConstructor","T","Omit"],"sources":["../../src/form/form-radio.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAoB7B;;;;AAAgG;AAyBhG;;;;AA/C6D,cAsBxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;AAyB+C;AAC/I;;;;;;;;;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIC,IAAAA,CAAKZ,YAAAA,CAAaW,CAAAA;AAAAA,KAExGJ,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-radio.js

@@ -29,7 +29,7 @@ const TagName = "input";
 const useFormRadio = createHook(function useFormRadio({ store, name: nameProp, value, ...props }) {
 	const context = useFormContext();
 	store = store || context;
-	invariant(store, "FormRadio must be wrapped in a Form component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "FormRadio must be wrapped in a Form component.");
 	const name = String(nameProp);
 	const onChangeProp = props.onChange;
 	const onChange = useEvent((event) => {

package/dist/form/form-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-radio.js","names":[],"sources":["../../src/form/form-radio.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ChangeEvent, ElementType } from \"react\";\nimport type { RadioOptions } from \"../radio/radio.tsx\";\nimport { useRadio } from \"../radio/radio.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormRadio` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { char: \"a\" } });\n * const a = useFormRadio({ store, name: store.names.char, value: \"a\" });\n * const b = useFormRadio({ store, name: store.names.char, value: \"b\" });\n * const c = useFormRadio({ store, name: store.names.char, value: \"c\" });\n * <Form store={store}>\n *   <FormRadioGroup>\n *     <FormGroupLabel>Favorite character</FormGroupLabel>\n *     <Role {...a} />\n *     <Role {...b} />\n *     <Role {...c} />\n *   </FormRadioGroup>\n * </Form>\n * ```\n */\nexport const useFormRadio = createHook<TagName, FormRadioOptions>(\n  function useFormRadio({ store, name: nameProp, value, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormRadio must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const onChangeProp = props.onChange;\n\n    const onChange = useEvent((event: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setValue(name, value);\n    });\n\n    const checkedProp = props.checked;\n    const checked = useStoreState(\n      store,\n      () => checkedProp ?? store?.getValue(name) === value,\n    );\n\n    props = {\n      ...props,\n      checked,\n      onChange,\n    };\n\n    props = useRadio({ name, value, ...props });\n\n    props = useFormControl({\n      store,\n      name,\n      \"aria-labelledby\": undefined,\n      ...props,\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a radio button as a form control. This component must be wrapped in a\n * [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) along with\n * other radio buttons sharing the same\n * [`name`](https://ariakit.com/reference/form-radio#name).\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {10-12}\n * const form = useFormStore({\n *   defaultValues: {\n *     char: \"a\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormRadioGroup>\n *     <FormGroupLabel>Favorite character</FormGroupLabel>\n *     <FormRadio name={form.names.char} value=\"a\" />\n *     <FormRadio name={form.names.char} value=\"b\" />\n *     <FormRadio name={form.names.char} value=\"c\" />\n *   </FormRadioGroup>\n * </Form>\n * ```\n */\nexport const FormRadio = memo(\n  forwardRef(function FormRadio(props: FormRadioProps) {\n    const htmlProps = useFormRadio(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormRadioOptions<T extends ElementType = TagName>\n  extends FormControlOptions<T>, Omit<RadioOptions<T>, \"store\" | \"name\"> {}\n\nexport type FormRadioProps<T extends ElementType = TagName> = Props<\n  T,\n  FormRadioOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyCI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,OAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,gDAAe;CAC5B,MAAM,OAAA,OAAA,QAAqB;CAE3B,MAAM,eAAW,MAAU;OACzB,WAAe,UAAK,UAAA;EACpB,eAAU,KAAA;EACV,IAAA,MAAO,kBAAoB;EAC5B,OAAA,SAAA,MAAA,KAAA;CAED,CAAA;CACA,MAAM,cAAU,MAAA;CAKhB,MAAA,UAAQ,cAAA,aAAA,eAAA,OAAA,SAAA,IAAA,MAAA,KAAA;SACH;EACH,GAAA;EACA;EACF;CAEA;SAAmB,SAAA;EAAM;EAAO;EAAU,GAAA;CAE1C,CAAA;SACE,eAAA;EACA;EACA;EACA,mBAAG,KAAA;EACJ,GAAA;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}
+{"version":3,"file":"form-radio.js","names":[],"sources":["../../src/form/form-radio.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ChangeEvent, ElementType } from \"react\";\nimport type { RadioOptions } from \"../radio/radio.tsx\";\nimport { useRadio } from \"../radio/radio.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormRadio` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { char: \"a\" } });\n * const a = useFormRadio({ store, name: store.names.char, value: \"a\" });\n * const b = useFormRadio({ store, name: store.names.char, value: \"b\" });\n * const c = useFormRadio({ store, name: store.names.char, value: \"c\" });\n * <Form store={store}>\n *   <FormRadioGroup>\n *     <FormGroupLabel>Favorite character</FormGroupLabel>\n *     <Role {...a} />\n *     <Role {...b} />\n *     <Role {...c} />\n *   </FormRadioGroup>\n * </Form>\n * ```\n */\nexport const useFormRadio = createHook<TagName, FormRadioOptions>(\n  function useFormRadio({ store, name: nameProp, value, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormRadio must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const onChangeProp = props.onChange;\n\n    const onChange = useEvent((event: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setValue(name, value);\n    });\n\n    const checkedProp = props.checked;\n    const checked = useStoreState(\n      store,\n      () => checkedProp ?? store?.getValue(name) === value,\n    );\n\n    props = {\n      ...props,\n      checked,\n      onChange,\n    };\n\n    props = useRadio({ name, value, ...props });\n\n    props = useFormControl({\n      store,\n      name,\n      \"aria-labelledby\": undefined,\n      ...props,\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a radio button as a form control. This component must be wrapped in a\n * [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) along with\n * other radio buttons sharing the same\n * [`name`](https://ariakit.com/reference/form-radio#name).\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {10-12}\n * const form = useFormStore({\n *   defaultValues: {\n *     char: \"a\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormRadioGroup>\n *     <FormGroupLabel>Favorite character</FormGroupLabel>\n *     <FormRadio name={form.names.char} value=\"a\" />\n *     <FormRadio name={form.names.char} value=\"b\" />\n *     <FormRadio name={form.names.char} value=\"c\" />\n *   </FormRadioGroup>\n * </Form>\n * ```\n */\nexport const FormRadio = memo(\n  forwardRef(function FormRadio(props: FormRadioProps) {\n    const htmlProps = useFormRadio(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormRadioOptions<T extends ElementType = TagName>\n  extends FormControlOptions<T>, Omit<RadioOptions<T>, \"store\" | \"name\"> {}\n\nexport type FormRadioProps<T extends ElementType = TagName> = Props<\n  T,\n  FormRadioOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyCI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,OAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAO,QAAO,IAAQ,aAAA,gBAAA,gDAAA;CAC5B,MAAM,OAAA,OAAA,QAAqB;CAE3B,MAAM,eAAW,MAAU;OACzB,WAAe,UAAK,UAAA;EACpB,eAAU,KAAA;EACV,IAAA,MAAO,kBAAoB;EAC5B,OAAA,SAAA,MAAA,KAAA;CAED,CAAA;CACA,MAAM,cAAU,MAAA;CAKhB,MAAA,UAAQ,cAAA,aAAA,eAAA,OAAA,SAAA,IAAA,MAAA,KAAA;SACH;EACH,GAAA;EACA;EACF;CAEA;SAAmB,SAAA;EAAM;EAAO;EAAU,GAAA;CAE1C,CAAA;SACE,eAAA;EACA;EACA;EACA,mBAAG,KAAA;EACJ,GAAA;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/form/form-remove.d.ts

@@ -1,4 +1,4 @@
-import { n as ButtonOptions } from "../button-Cp853csH.js";
+import { n as ButtonOptions } from "../button-CVWcOgxs.js";
 import { t as FormStore } from "../form-store-C4Kf5QHm.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -25,9 +25,10 @@ type TagName = typeof TagName;
  * const values = useStoreState(store, "values");
  *
  * <Form store={store}>
- *   {values.languages.map((_, i) => (
- *     <FormInput key={i} name={store.names.languages[i]} />
- *   ))}
+ *   {values.languages.map((language, i) => {
+ *     if (language == null) return null;
+ *     return <FormInput key={i} name={store.names.languages[i]} />;
+ *   })}
  *   <Role {...props}>Remove first language</Role>
  * </Form>
  * ```
@@ -49,7 +50,7 @@ declare const useFormRemove: import("@ariakit/react-utils").Hook<"button", FormR
  * prop to `false`.
  * @see https://ariakit.com/components/form
  * @example
- * ```jsx {13}
+ * ```jsx {15}
  * const form = useFormStore({
  *   defaultValues: {
  *     languages: ["JavaScript", "PHP"],
@@ -59,16 +60,19 @@ declare const useFormRemove: import("@ariakit/react-utils").Hook<"button", FormR
  * const values = useStoreState(form, "values");
  *
  * <Form store={form}>
- *   {values.languages.map((_, i) => (
- *     <div key={i}>
- *       <FormInput name={form.names.languages[i]} />
- *       <FormRemove name={form.names.languages} index={i} />
- *     </div>
- *   ))}
+ *   {values.languages.map((language, i) => {
+ *     if (language == null) return null;
+ *     return (
+ *       <div key={i}>
+ *         <FormInput name={form.names.languages[i]} />
+ *         <FormRemove name={form.names.languages} index={i} />
+ *       </div>
+ *     );
+ *   })}
  * </Form>
  * ```
  */
-declare const FormRemove: (props: FormRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const FormRemove: (props: FormRemoveProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface FormRemoveOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
   /**
    * Object returned by the