@spark-ui/components 14.0.0-beta.1 → 14.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormField.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/form-field/FormFieldSuccessMessage.tsx","../../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"names":["FormFieldContext","createContext","ID_PREFIX","useFormField","context","useContext","FormFieldProvider","id","name","disabled","readOnly","state","isRequired","children","labelId","useId","messageIds","setMessageIds","useState","description","handleMessageIdAdd","useCallback","msgId","ids","handleMessageIdRemove","current","value","useMemo","jsx","FormField","className","asChild","ref","others","Component","Slot","cx","FormFieldMessage","idProp","onMessageIdAdd","onMessageIdRemove","currentId","useEffect","FormFieldStateMessage","jsxs","Icon","WarningOutline","AlertOutline","Check","FormFieldAlertMessage","props","FormFieldCharactersCount","maxLength","liveAnnouncement","throttledValue","setThrottledValue","timeoutId","useFormFieldControl","isInvalid","FormFieldControl","Fragment","FormFieldErrorMessage","FormFieldHelperMessage","FormFieldRequiredIndicator","Label","FormFieldLabel","htmlForProp","requiredIndicator","control","htmlFor","Slottable","FormFieldSuccessMessage","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormField.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/form-field/FormFieldSuccessMessage.tsx","../../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"names":["FormFieldContext","createContext","ID_PREFIX","useFormField","context","useContext","FormFieldProvider","id","name","disabled","readOnly","state","isRequired","children","labelId","useId","messageIds","setMessageIds","useState","description","handleMessageIdAdd","useCallback","msgId","ids","handleMessageIdRemove","current","value","useMemo","jsx","FormField","className","asChild","ref","others","Component","Slot","cx","FormFieldMessage","idProp","onMessageIdAdd","onMessageIdRemove","currentId","useEffect","FormFieldStateMessage","jsxs","Icon","WarningOutline","AlertOutline","Check","FormFieldAlertMessage","props","FormFieldCharactersCount","maxLength","liveAnnouncement","throttledValue","setThrottledValue","timeoutId","useFormFieldControl","isInvalid","FormFieldControl","Fragment","FormFieldErrorMessage","FormFieldHelperMessage","FormFieldRequiredIndicator","Label","FormFieldLabel","htmlForProp","requiredIndicator","control","htmlFor","Slottable","FormFieldSuccessMessage","Root"],"mappings":"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"}

package/dist/form-field/index.mjs

@@ -1,39 +1,39 @@
-import { jsx as r, jsxs as I, Fragment as j } from "react/jsx-runtime";
-import { a as c } from "../index-BmAFn37q.mjs";
-import { createContext as W, useContext as H, useId as y, useState as P, useCallback as L, useMemo as X, useEffect as z } from "react";
-import { a as _, S as B } from "../Slot-C98rL4yy.mjs";
+import { jsx as r, jsxs as I, Fragment as H } from "react/jsx-runtime";
+import { cx as c } from "class-variance-authority";
+import { createContext as W, useContext as L, useId as y, useState as P, useCallback as j, useMemo as X, useEffect as z } from "react";
+import { a as _, S as B } from "../Slot-D2Bbf8Gw.mjs";
 import { AlertOutline as G } from "@spark-ui/icons/AlertOutline";
 import { Check as J } from "@spark-ui/icons/Check";
 import { WarningOutline as K } from "@spark-ui/icons/WarningOutline";
-import { I as M } from "../Icon-D1RueiPY.mjs";
-import { L as O } from "../index-C34GgsKQ.mjs";
+import { I as M } from "../Icon-Ck-dhfLd.mjs";
+import { Label as O } from "../label/index.mjs";
 const C = W(null), x = ":form-field", b = () => {
-  const s = H(C);
+  const s = L(C);
   if (!s)
     throw Error("useFormField must be used within a FormField provider");
   return s;
 }, T = ({
   id: s,
   name: e,
-  disabled: a = !1,
+  disabled: o = !1,
   readOnly: l = !1,
-  state: o,
+  state: a,
   isRequired: i,
   children: d
 }) => {
-  const t = `${x}-label-${y()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = L((f) => {
+  const t = `${x}-label-${y()}`, [n, m] = P([]), p = n.length > 0 ? n.join(" ") : void 0, u = j((f) => {
     m((h) => [...h, f]);
-  }, []), q = L((f) => {
+  }, []), q = j((f) => {
     m((h) => h.filter((D) => D !== f));
   }, []), V = X(() => ({
     id: s,
     labelId: t,
     name: e,
-    disabled: a,
+    disabled: o,
     readOnly: l,
-    state: o,
+    state: a,
     isRequired: i,
-    isInvalid: o === "error",
+    isInvalid: a === "error",
     description: p,
     onMessageIdAdd: u,
     onMessageIdRemove: q
@@ -41,10 +41,10 @@ const C = W(null), x = ":form-field", b = () => {
     s,
     t,
     e,
-    a,
+    o,
     l,
     p,
-    o,
+    a,
     i,
     u,
     q
@@ -55,9 +55,9 @@ T.displayName = "FormFieldProvider";
 const w = ({
   className: s,
   disabled: e = !1,
-  readOnly: a = !1,
+  readOnly: o = !1,
   name: l,
-  state: o,
+  state: a,
   isRequired: i = !1,
   asChild: d = !1,
   ref: t,
@@ -71,8 +71,8 @@ const w = ({
       name: l,
       isRequired: i,
       disabled: e,
-      readOnly: a,
-      state: o,
+      readOnly: o,
+      state: a,
       children: /* @__PURE__ */ r(
         d ? _ : "div",
         {
@@ -89,16 +89,16 @@ w.displayName = "FormField";
 const g = ({
   id: s,
   className: e,
-  ref: a,
+  ref: o,
   ...l
 }) => {
-  const { onMessageIdAdd: o, onMessageIdRemove: i } = b(), d = `${x}-message-${y()}`, t = s || d;
-  return z(() => (o(t), () => {
+  const { onMessageIdAdd: a, onMessageIdRemove: i } = b(), d = `${x}-message-${y()}`, t = s || d;
+  return z(() => (a(t), () => {
     i(t);
-  }), [t, o, i]), /* @__PURE__ */ r(
+  }), [t, a, i]), /* @__PURE__ */ r(
     "span",
     {
-      ref: a,
+      ref: o,
       id: t,
       "data-spark-component": "form-field-message",
       className: c(e, "text-caption"),
@@ -110,9 +110,9 @@ g.displayName = "FormField.Message";
 const F = ({
   className: s,
   state: e,
-  children: a,
+  children: o,
   ref: l,
-  ...o
+  ...a
 }) => b().state !== e ? null : /* @__PURE__ */ I(
   g,
   {
@@ -123,12 +123,12 @@ const F = ({
       e === "error" ? "text-error" : "text-on-surface/dim-1",
       s
     ),
-    ...o,
+    ...a,
     children: [
       e === "alert" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(K, {}) }),
       e === "error" && /* @__PURE__ */ r(M, { size: "sm", intent: "error", children: /* @__PURE__ */ r(G, {}) }),
       e === "success" && /* @__PURE__ */ r(M, { size: "sm", children: /* @__PURE__ */ r(J, {}) }),
-      a
+      o
     ]
   }
 );
@@ -146,9 +146,9 @@ v.displayName = "FormField.AlertMessage";
 const S = ({
   className: s,
   value: e = "",
-  maxLength: a,
+  maxLength: o,
   description: l,
-  liveAnnouncement: o,
+  liveAnnouncement: a,
   ref: i,
   ...d
 }) => {
@@ -168,21 +168,21 @@ const S = ({
         "data-spark-component": "form-field-characters-count",
         className: c(s, "text-caption", "text-neutral"),
         ...d,
-        children: `${e.length}/${a}`
+        children: `${e.length}/${o}`
       }
     ),
-    o && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: o({ remainingChars: a - t.length }) })
+    a && /* @__PURE__ */ r("span", { className: "sr-only", "aria-live": "polite", children: a({ remainingChars: o - t.length }) })
   ] });
 };
 S.displayName = "FormField.CharactersCount";
 const Q = () => {
-  const { id: s, name: e, description: a, disabled: l, readOnly: o, state: i, labelId: d, isInvalid: t, isRequired: n } = H(C) || {};
+  const { id: s, name: e, description: o, disabled: l, readOnly: a, state: i, labelId: d, isInvalid: t, isRequired: n } = L(C) || {};
   return {
     id: s,
     name: e,
-    description: a,
+    description: o,
     disabled: l,
-    readOnly: o,
+    readOnly: a,
     state: i,
     labelId: d,
     isInvalid: t,
@@ -190,7 +190,7 @@ const Q = () => {
   };
 }, k = ({ children: s }) => {
   const e = Q();
-  return /* @__PURE__ */ r(j, { children: s(e) });
+  return /* @__PURE__ */ r(H, { children: s(e) });
 };
 k.displayName = "FormField.Control";
 const R = ({ ref: s, ...e }) => /* @__PURE__ */ r(
@@ -206,33 +206,33 @@ R.displayName = "FormField.ErrorMessage";
 const $ = ({
   className: s,
   ref: e,
-  ...a
+  ...o
 }) => /* @__PURE__ */ r(
   g,
   {
     ref: e,
     "data-spark-component": "form-field-helper-message",
     className: c("text-on-surface/dim-1", s),
-    ...a
+    ...o
   }
 );
 $.displayName = "FormField.HelperMessage";
 const N = ({
   className: s,
   ref: e,
-  ...a
-}) => /* @__PURE__ */ r(O.RequiredIndicator, { ref: e, className: c("ml-sm", s), ...a });
+  ...o
+}) => /* @__PURE__ */ r(O.RequiredIndicator, { ref: e, className: c("ml-sm", s), ...o });
 N.displayName = "FormField.RequiredIndicator";
 const A = ({
   htmlFor: s,
   className: e,
-  children: a,
+  children: o,
   requiredIndicator: l = /* @__PURE__ */ r(N, {}),
-  asChild: o,
+  asChild: a,
   ref: i,
   ...d
 }) => {
-  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = o ? void 0 : s || t.id;
+  const t = b(), { disabled: n, labelId: m, isRequired: p } = t, u = a ? void 0 : s || t.id;
   return /* @__PURE__ */ r(
     O,
     {
@@ -241,10 +241,10 @@ const A = ({
       "data-spark-component": "form-field-label",
       htmlFor: u,
       className: c(e, n ? "text-on-surface/dim-3 pointer-events-none" : void 0),
-      asChild: o,
+      asChild: a,
       ...d,
-      children: /* @__PURE__ */ I(j, { children: [
-        /* @__PURE__ */ r(B, { children: a }),
+      children: /* @__PURE__ */ I(H, { children: [
+        /* @__PURE__ */ r(B, { children: o }),
         p && l
       ] })
     }

package/dist/icon/index.d.mts

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/icon/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Icon-Bf0XrmiR.js");exports.Icon=e.Icon;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../Icon-CF0W0LKr.js");exports.Icon=e.Icon;
 //# sourceMappingURL=index.js.map

package/dist/icon/index.mjs

@@ -1,4 +1,4 @@
-import { I } from "../Icon-D1RueiPY.mjs";
+import { I } from "../Icon-Ck-dhfLd.mjs";
 export {
   I as Icon
 };

package/dist/icon-button/index.d.mts

@@ -0,0 +1 @@
+export * from './IconButton';

package/dist/icon-button/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../IconButton-Bf-EDzpI.js");exports.IconButton=t.IconButton;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../IconButton-D3g86WpZ.js");exports.IconButton=t.IconButton;
 //# sourceMappingURL=index.js.map

package/dist/icon-button/index.mjs

@@ -1,4 +1,4 @@
-import { I as n } from "../IconButton-BY3gYXtU.mjs";
+import { I as n } from "../IconButton-C62-axzv.mjs";
 export {
   n as IconButton
 };

package/dist/input/index.d.mts

@@ -0,0 +1,21 @@
+import { InputClearButton } from './InputClearButton';
+import { InputGroup as Root } from './InputGroup';
+import { InputLeadingAddon } from './InputLeadingAddon';
+import { InputLeadingIcon } from './InputLeadingIcon';
+import { InputTrailingAddon } from './InputTrailingAddon';
+import { InputTrailingIcon } from './InputTrailingIcon';
+export * from './Input';
+export declare const InputGroup: typeof Root & {
+    LeadingAddon: typeof InputLeadingAddon;
+    TrailingAddon: typeof InputTrailingAddon;
+    LeadingIcon: typeof InputLeadingIcon;
+    TrailingIcon: typeof InputTrailingIcon;
+    ClearButton: typeof InputClearButton;
+};
+export { useInputGroup } from './InputGroupContext';
+export { type InputGroupProps } from './InputGroup';
+export { type InputLeadingIconProps } from './InputLeadingIcon';
+export { type InputTrailingIconProps } from './InputTrailingIcon';
+export { type InputLeadingAddonProps } from './InputLeadingAddon';
+export { type InputTrailingAddonProps } from './InputTrailingAddon';
+export { type InputClearButtonProps } from './InputClearButton';

package/dist/input/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),re=require("@spark-ui/icons/DeleteOutline"),u=require("../index-DnaHaH_0.js"),_=require("../Icon-Bf0XrmiR.js"),d=require("react"),$=require("../form-field/index.js"),oe=require("@spark-ui/hooks/use-combined-state"),le=require("@spark-ui/hooks/use-merge-refs"),P=require("../Slot-ghrohQLA.js"),K=d.createContext(null),v=()=>d.useContext(K)||{isStandalone:!0},H=({className:n,tabIndex:e=-1,onClick:t,inline:o=!1,ref:l,...s})=>{const{onClear:i,hasTrailingIcon:b}=v(),c=a=>{t&&t(a),i&&i()};return r.jsx("button",{ref:l,"data-spark-component":"input-clear-button",className:u.cx(n,"pointer-events-auto absolute",o?"h-sz-44 top-0 -translate-y-0":"top-1/2 -translate-y-1/2","inline-flex h-full items-center justify-center outline-hidden","text-neutral hover:text-neutral-hovered",b?"right-3xl px-sz-12":"pl-md pr-lg right-0"),tabIndex:e,onClick:c,type:"button",...s,children:r.jsx(_.Icon,{size:"sm",children:r.jsx(re.DeleteOutline,{})})})},J=Object.assign(H,{id:"ClearButton"});H.displayName="InputGroup.ClearButton";const ie=u.cva(["relative inline-flex w-full"],{variants:{disabled:{true:["cursor-not-allowed","relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"},readOnly:{true:["relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"}}}),Q=({className:n,children:e,state:t,disabled:o,readOnly:l,onClear:s,ref:i,...b})=>{const c=y=>y?y.type.id:"",a=(...y)=>f.find(se=>y.includes(c(se)||"")),f=d.Children.toArray(e).filter(d.isValidElement),g=a("Input"),h=g?.props||{},I=d.useRef(null),C=d.useRef(s),S=le.useMergeRefs(g?.ref,I),[j,N]=oe.useCombinedState(h.value,h.defaultValue,h.onValueChange),T=$.useFormFieldControl(),O=T.state??t,m=T.disabled||!!o,x=T.readOnly||!!l,G=a("LeadingAddon"),L=a("LeadingIcon"),B=a("ClearButton"),R=a("TrailingIcon"),w=a("TrailingAddon"),A=!!G,p=!!w,D=!!L,F=!!R,V=!!j&&!!B&&!m&&!x,ne=y=>{h.onChange&&h.onChange(y),N(y.target.value)},M=d.useCallback(()=>{C.current&&C.current(),N(""),I.current.focus()},[N]),te=d.useMemo(()=>({state:O,disabled:m,readOnly:x,hasLeadingIcon:D,hasTrailingIcon:F,hasLeadingAddon:A,hasTrailingAddon:p,hasClearButton:V,onClear:M}),[O,m,x,D,F,A,p,V,M]);d.useEffect(()=>{C.current=s},[s]);const ae=I.current?.value;return r.jsx(K.Provider,{value:te,children:r.jsxs("div",{"data-spark-component":"input-group",ref:i,className:ie({disabled:m,readOnly:x,className:n}),...b,children:[A&&G,r.jsxs("div",{className:"relative inline-flex w-full",children:[g&&d.cloneElement(g,{value:j??ae??"",ref:S,defaultValue:void 0,onChange:ne}),L,V&&B,R]}),p&&w]})})};Q.displayName="InputGroup";const de=u.cva(["overflow-hidden","border-sm","shrink-0","h-full","focus-visible:relative focus-visible:z-raised","mx-0"],{variants:{asChild:{false:["flex","items-center","px-lg"]},intent:{neutral:"border-outline",error:"border-error",alert:"border-alert",success:"border-success"},disabled:{true:["pointer-events-none border-outline!"]},readOnly:{true:["pointer-events-none"]},design:{text:"",solid:"",inline:""}},compoundVariants:[{disabled:!1,readOnly:!1,design:"text",class:["bg-surface","text-on-surface"]},{disabled:!0,design:"text",class:["text-on-surface/dim-3"]},{disabled:!0,design:["solid","inline"],class:["opacity-dim-3"]}],defaultVariants:{intent:"neutral"}}),z=({asChild:n,className:e,children:t,ref:o,...l})=>{const{state:s,disabled:i,readOnly:b}=v(),c=typeof t=="string",a=!!(!c&&n),f=c?t:d.Children.only(t),g=a&&!c?P.Slot:"div",I=c?"text":a?"solid":"inline";return r.jsx(g,{ref:o,"data-spark-component":"input-addon",className:de({className:e,intent:s,disabled:i,readOnly:b,asChild:a,design:I}),...i&&{tabIndex:-1},...l,children:f})};z.displayName="InputGroup.Addon";const U=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-l-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-r-0! mr-[-1px] rounded-l-lg"),...t})})},W=Object.assign(U,{id:"LeadingAddon"});U.displayName="InputGroup.LeadingAddon";const E=({className:n,intent:e,children:t,...o})=>{const{disabled:l,readOnly:s}=v(),i=l||s;return r.jsx(_.Icon,{"data-spark-component":"input-icon",intent:e,className:u.cx(n,"pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",e?void 0:"text-neutral peer-focus:text-outline-high",i?"opacity-dim-3":void 0),...o,children:t})};E.displayName="InputGroup.Icon";const k=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"left-lg text-body-1"),...e});k.id="LeadingIcon";k.displayName="InputGroup.LeadingIcon";const X=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-r-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-l-0! ml-[-1px] rounded-r-lg"),...t})})},Y=Object.assign(X,{id:"TrailingAddon"});X.displayName="InputGroup.TrailingAddon";const q=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"right-lg text-body-1"),...e});q.id="TrailingIcon";q.displayName="InputGroup.TrailingIcon";const ue=u.cva(["relative","border-sm","peer","w-full","appearance-none outline-hidden","bg-surface","text-ellipsis text-body-1 text-on-surface","caret-neutral","[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]","autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]","disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3","read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5","focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"],{variants:{asChild:{true:["min-h-sz-44"],false:["h-sz-44"]},intent:{neutral:["border-outline","default:hover:border-outline-high"],success:["default:border-success"],alert:["default:border-alert"],error:["default:border-error"]},hasLeadingAddon:{true:["rounded-l-0"],false:["rounded-l-lg"]},hasTrailingAddon:{true:["rounded-r-0"],false:["rounded-r-lg"]},hasLeadingIcon:{true:["pl-3xl"],false:["pl-lg"]},hasTrailingIcon:{true:""},hasClearButton:{true:""}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:"pr-lg"},{hasTrailingIcon:!0,hasClearButton:!1,class:"pr-3xl"},{hasTrailingIcon:!1,hasClearButton:!0,class:"pr-3xl"},{hasTrailingIcon:!0,hasClearButton:!0,class:"pr-[calc(var(--spacing-3xl)*2)]"}],defaultVariants:{intent:"neutral"}}),Z=({className:n,asChild:e=!1,onValueChange:t,onChange:o,onKeyDown:l,disabled:s,readOnly:i,ref:b,...c})=>{const a=$.useFormFieldControl(),f=v(),{id:g,name:h,isInvalid:I,isRequired:C,description:S}=a,{hasLeadingAddon:j,hasTrailingAddon:N,hasLeadingIcon:T,hasTrailingIcon:O,hasClearButton:m,onClear:x}=f,G=e?P.Slot:"input",L=a.state||f.state,B=a.disabled||f.disabled||s,R=a.readOnly||f.readOnly||i,w=p=>{o&&o(p),t&&t(p.target.value)},A=p=>{l&&l(p),m&&x&&p.key==="Escape"&&x()};return r.jsx(G,{"data-spark-component":"input",ref:b,id:g,name:h,className:ue({asChild:e,className:n,intent:L,hasLeadingAddon:!!j,hasTrailingAddon:!!N,hasLeadingIcon:!!T,hasTrailingIcon:!!O,hasClearButton:!!m}),disabled:B,readOnly:R,required:C,"aria-describedby":S,"aria-invalid":I,onChange:w,onKeyDown:A,...c})},ce=Object.assign(Z,{id:"Input"});Z.displayName="Input";const ee=Object.assign(Q,{LeadingAddon:W,TrailingAddon:Y,LeadingIcon:k,TrailingIcon:q,ClearButton:J});ee.displayName="InputGroup";W.displayName="InputGroup.LeadingAddon";Y.displayName="InputGroup.TrailingAddon";k.displayName="InputGroup.LeadingIcon";q.displayName="InputGroup.TrailingIcon";J.displayName="InputGroup.ClearButton";exports.Input=ce;exports.InputGroup=ee;exports.useInputGroup=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),re=require("@spark-ui/icons/DeleteOutline"),u=require("class-variance-authority"),_=require("../Icon-CF0W0LKr.js"),d=require("react"),$=require("@spark-ui/components/form-field"),oe=require("@spark-ui/hooks/use-combined-state"),le=require("@spark-ui/hooks/use-merge-refs"),P=require("../Slot-DQ8z2zsy.js"),K=d.createContext(null),v=()=>d.useContext(K)||{isStandalone:!0},H=({className:n,tabIndex:e=-1,onClick:t,inline:o=!1,ref:l,...s})=>{const{onClear:i,hasTrailingIcon:b}=v(),c=a=>{t&&t(a),i&&i()};return r.jsx("button",{ref:l,"data-spark-component":"input-clear-button",className:u.cx(n,"pointer-events-auto absolute",o?"h-sz-44 top-0 -translate-y-0":"top-1/2 -translate-y-1/2","inline-flex h-full items-center justify-center outline-hidden","text-neutral hover:text-neutral-hovered",b?"right-3xl px-sz-12":"pl-md pr-lg right-0"),tabIndex:e,onClick:c,type:"button",...s,children:r.jsx(_.Icon,{size:"sm",children:r.jsx(re.DeleteOutline,{})})})},J=Object.assign(H,{id:"ClearButton"});H.displayName="InputGroup.ClearButton";const ie=u.cva(["relative inline-flex w-full"],{variants:{disabled:{true:["cursor-not-allowed","relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"},readOnly:{true:["relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"}}}),Q=({className:n,children:e,state:t,disabled:o,readOnly:l,onClear:s,ref:i,...b})=>{const c=y=>y?y.type.id:"",a=(...y)=>f.find(se=>y.includes(c(se)||"")),f=d.Children.toArray(e).filter(d.isValidElement),g=a("Input"),h=g?.props||{},I=d.useRef(null),C=d.useRef(s),S=le.useMergeRefs(g?.ref,I),[j,A]=oe.useCombinedState(h.value,h.defaultValue,h.onValueChange),N=$.useFormFieldControl(),O=N.state??t,m=N.disabled||!!o,x=N.readOnly||!!l,G=a("LeadingAddon"),L=a("LeadingIcon"),B=a("ClearButton"),R=a("TrailingIcon"),w=a("TrailingAddon"),T=!!G,p=!!w,D=!!L,F=!!R,V=!!j&&!!B&&!m&&!x,ne=y=>{h.onChange&&h.onChange(y),A(y.target.value)},M=d.useCallback(()=>{C.current&&C.current(),A(""),I.current.focus()},[A]),te=d.useMemo(()=>({state:O,disabled:m,readOnly:x,hasLeadingIcon:D,hasTrailingIcon:F,hasLeadingAddon:T,hasTrailingAddon:p,hasClearButton:V,onClear:M}),[O,m,x,D,F,T,p,V,M]);d.useEffect(()=>{C.current=s},[s]);const ae=I.current?.value;return r.jsx(K.Provider,{value:te,children:r.jsxs("div",{"data-spark-component":"input-group",ref:i,className:ie({disabled:m,readOnly:x,className:n}),...b,children:[T&&G,r.jsxs("div",{className:"relative inline-flex w-full",children:[g&&d.cloneElement(g,{value:j??ae??"",ref:S,defaultValue:void 0,onChange:ne}),L,V&&B,R]}),p&&w]})})};Q.displayName="InputGroup";const de=u.cva(["overflow-hidden","border-sm","shrink-0","h-full","focus-visible:relative focus-visible:z-raised","mx-0"],{variants:{asChild:{false:["flex","items-center","px-lg"]},intent:{neutral:"border-outline",error:"border-error",alert:"border-alert",success:"border-success"},disabled:{true:["pointer-events-none border-outline!"]},readOnly:{true:["pointer-events-none"]},design:{text:"",solid:"",inline:""}},compoundVariants:[{disabled:!1,readOnly:!1,design:"text",class:["bg-surface","text-on-surface"]},{disabled:!0,design:"text",class:["text-on-surface/dim-3"]},{disabled:!0,design:["solid","inline"],class:["opacity-dim-3"]}],defaultVariants:{intent:"neutral"}}),z=({asChild:n,className:e,children:t,ref:o,...l})=>{const{state:s,disabled:i,readOnly:b}=v(),c=typeof t=="string",a=!!(!c&&n),f=c?t:d.Children.only(t),g=a&&!c?P.Slot:"div",I=c?"text":a?"solid":"inline";return r.jsx(g,{ref:o,"data-spark-component":"input-addon",className:de({className:e,intent:s,disabled:i,readOnly:b,asChild:a,design:I}),...i&&{tabIndex:-1},...l,children:f})};z.displayName="InputGroup.Addon";const U=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-l-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-r-0! mr-[-1px] rounded-l-lg"),...t})})},W=Object.assign(U,{id:"LeadingAddon"});U.displayName="InputGroup.LeadingAddon";const E=({className:n,intent:e,children:t,...o})=>{const{disabled:l,readOnly:s}=v(),i=l||s;return r.jsx(_.Icon,{"data-spark-component":"input-icon",intent:e,className:u.cx(n,"pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",e?void 0:"text-neutral peer-focus:text-outline-high",i?"opacity-dim-3":void 0),...o,children:t})};E.displayName="InputGroup.Icon";const k=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"left-lg text-body-1"),...e});k.id="LeadingIcon";k.displayName="InputGroup.LeadingIcon";const X=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-r-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-l-0! ml-[-1px] rounded-r-lg"),...t})})},Y=Object.assign(X,{id:"TrailingAddon"});X.displayName="InputGroup.TrailingAddon";const q=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"right-lg text-body-1"),...e});q.id="TrailingIcon";q.displayName="InputGroup.TrailingIcon";const ue=u.cva(["relative","border-sm","peer","w-full","appearance-none outline-hidden","bg-surface","text-ellipsis text-body-1 text-on-surface","caret-neutral","[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]","autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]","disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3","read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5","focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"],{variants:{asChild:{true:["min-h-sz-44"],false:["h-sz-44"]},intent:{neutral:["border-outline","default:hover:border-outline-high"],success:["default:border-success"],alert:["default:border-alert"],error:["default:border-error"]},hasLeadingAddon:{true:["rounded-l-0"],false:["rounded-l-lg"]},hasTrailingAddon:{true:["rounded-r-0"],false:["rounded-r-lg"]},hasLeadingIcon:{true:["pl-3xl"],false:["pl-lg"]},hasTrailingIcon:{true:""},hasClearButton:{true:""}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:"pr-lg"},{hasTrailingIcon:!0,hasClearButton:!1,class:"pr-3xl"},{hasTrailingIcon:!1,hasClearButton:!0,class:"pr-3xl"},{hasTrailingIcon:!0,hasClearButton:!0,class:"pr-[calc(var(--spacing-3xl)*2)]"}],defaultVariants:{intent:"neutral"}}),Z=({className:n,asChild:e=!1,onValueChange:t,onChange:o,onKeyDown:l,disabled:s,readOnly:i,ref:b,...c})=>{const a=$.useFormFieldControl(),f=v(),{id:g,name:h,isInvalid:I,isRequired:C,description:S}=a,{hasLeadingAddon:j,hasTrailingAddon:A,hasLeadingIcon:N,hasTrailingIcon:O,hasClearButton:m,onClear:x}=f,G=e?P.Slot:"input",L=a.state||f.state,B=a.disabled||f.disabled||s,R=a.readOnly||f.readOnly||i,w=p=>{o&&o(p),t&&t(p.target.value)},T=p=>{l&&l(p),m&&x&&p.key==="Escape"&&x()};return r.jsx(G,{"data-spark-component":"input",ref:b,id:g,name:h,className:ue({asChild:e,className:n,intent:L,hasLeadingAddon:!!j,hasTrailingAddon:!!A,hasLeadingIcon:!!N,hasTrailingIcon:!!O,hasClearButton:!!m}),disabled:B,readOnly:R,required:C,"aria-describedby":S,"aria-invalid":I,onChange:w,onKeyDown:T,...c})},ce=Object.assign(Z,{id:"Input"});Z.displayName="Input";const ee=Object.assign(Q,{LeadingAddon:W,TrailingAddon:Y,LeadingIcon:k,TrailingIcon:q,ClearButton:J});ee.displayName="InputGroup";W.displayName="InputGroup.LeadingAddon";Y.displayName="InputGroup.TrailingAddon";k.displayName="InputGroup.LeadingIcon";q.displayName="InputGroup.TrailingIcon";J.displayName="InputGroup.ClearButton";exports.Input=ce;exports.InputGroup=ee;exports.useInputGroup=v;
 //# sourceMappingURL=index.js.map