@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/dist/form/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField, useTextField } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Boolean if the `TextField` or `TextArea` will **not** be rendered along\n   * with a `FormMessage` component. This will prevent the `aria-describedby`\n   * prop from being returned when set to `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset(): void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        setState((prevState) => ({\n          ...prevState,\n          value: event.currentTarget.value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  if (!disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength:\n        counter && typeof maxLength === \"number\" ? maxLength : undefined,\n      children: errorMessage || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","messageProps","length","children"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField, useTextField } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Boolean if the `TextField` or `TextArea` will **not** be rendered along\n   * with a `FormMessage` component. This will prevent the `aria-describedby`\n   * prop from being returned when set to `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset: () => void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        setState((prevState) => ({\n          ...prevState,\n          value: event.currentTarget.value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  if (!disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength:\n        counter && typeof maxLength === \"number\" ? maxLength : undefined,\n      children: errorMessage || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","messageProps","length","children"],"mappings":"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"}

package/dist/form/useTextFieldContainerAddons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextFieldContainerAddons.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useState,\n  type CSSProperties,\n  type Ref,\n  type RefCallback,\n} from \"react\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { type FormTheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface AddonPaddingOptions {\n  ref?: Ref<HTMLSpanElement>;\n  addon: boolean;\n  theme: FormTheme;\n  extra: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction useAddonPadding(\n  options: AddonPaddingOptions\n): [padding: string | undefined, addonRef: RefCallback<HTMLSpanElement>] {\n  const { ref, addon, theme, extra } = options;\n  const [padding, setPadding] = useState<string | undefined>();\n  const addonRef = useResizeObserver({\n    ref,\n    onUpdate: useCallback(\n      (entry) => {\n        const inlineSize = entry.borderBoxSize[0]?.inlineSize;\n        if (typeof inlineSize !== \"number\") {\n          return;\n        }\n\n        // the leading space for the extra calc is required\n        setPadding(\n          `calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : \"\"})`\n        );\n      },\n      [extra, theme]\n    ),\n    disabled: !addon,\n    disableHeight: true,\n  });\n\n  return [padding, addonRef];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsOptions {\n  /**\n   * This style will automatically be merged with the returned `style`.\n   */\n  style?: CSSProperties;\n\n  /** @defaultValue `getFormConfig(\"theme\")` */\n  theme?: FormTheme;\n\n  /**\n   * Set this to `true` if the `leftAddon` should be watched for size changes.\n   */\n  leftAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.\n   */\n  leftAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  leftAddonExtraCalc?: string;\n\n  /**\n   * Set this to `true` if the `rightAddon` should be watched for size changes.\n   */\n  rightAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.\n   */\n  rightAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  rightAddonExtraCalc?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsImplementation {\n  style?: CSSProperties;\n  leftAddonRef: RefCallback<HTMLSpanElement>;\n  rightAddonRef: RefCallback<HTMLSpanElement>;\n}\n\n/**\n * This hook can be used to automatically update the padding on the\n * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.\n *\n * @example Simple Example\n * ```tsx\n * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({\n *   leftAddon: true,\n *   rightAddon: true,\n * });\n *\n * return (\n *   <TextField\n *     style={style}\n *     leftAddon={<SomeDynamicAddon />}\n *     leftAddonProps={{ ref: leftAddonRef }}\n *     rightAddon={<SomeDynamicAddon />}\n *     rightAddonProps={{ ref: rightAddonRef }}\n *   />\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useTextFieldContainerAddons(\n  options: TextFieldContainerAddonsOptions\n): TextFieldContainerAddonsImplementation {\n  const {\n    style: propStyle,\n    theme: propTheme,\n    leftAddon,\n    rightAddon,\n    leftAddonRef: propLeftAddonRef,\n    rightAddonRef: propRightAddonRef,\n    leftAddonExtraCalc = \"\",\n    rightAddonExtraCalc = \"\",\n  } = options;\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  const [paddingLeft, leftAddonRef] = useAddonPadding({\n    ref: propLeftAddonRef,\n    theme,\n    addon: leftAddon,\n    extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : \"\"}`,\n  });\n\n  const [paddingRight, rightAddonRef] = useAddonPadding({\n    ref: propRightAddonRef,\n    theme,\n    addon: rightAddon,\n    extra: rightAddonExtraCalc,\n  });\n\n  let style = propStyle;\n  if (typeof paddingLeft === \"string\" || typeof paddingRight === \"string\") {\n    style = {\n      ...propStyle,\n      \"--rmd-text-field-padding-left\":\n        paddingLeft ?? propStyle?.[\"--rmd-text-field-padding-left\"],\n      \"--rmd-text-field-padding-right\":\n        paddingRight ?? propStyle?.[\"--rmd-text-field-padding-right\"],\n    };\n  }\n\n  return {\n    style,\n    leftAddonRef,\n    rightAddonRef,\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","getFormConfig","useAddonPadding","options","ref","addon","theme","extra","padding","setPadding","addonRef","onUpdate","entry","inlineSize","borderBoxSize","disabled","disableHeight","useTextFieldContainerAddons","style","propStyle","propTheme","leftAddon","rightAddon","leftAddonRef","propLeftAddonRef","rightAddonRef","propRightAddonRef","leftAddonExtraCalc","rightAddonExtraCalc","paddingLeft","paddingRight"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,QAAQ,QAIH,QAAQ;AACf,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,aAAa,QAAQ,kBAAkB;AAchD;;;CAGC,GACD,SAASC,gBACPC,OAA4B;IAE5B,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGJ;IACrC,MAAM,CAACK,SAASC,WAAW,GAAGV;IAC9B,MAAMW,WAAWV,kBAAkB;QACjCI;QACAO,UAAUb,YACR,CAACc;YACC,MAAMC,aAAaD,MAAME,aAAa,CAAC,EAAE,EAAED;YAC3C,IAAI,OAAOA,eAAe,UAAU;gBAClC;YACF;YAEA,mDAAmD;YACnDJ,WACE,CAAC,0BAA0B,EAAEH,MAAM,aAAa,EAAEO,WAAW,EAAE,EAAEN,QAAQ,CAAC,CAAC,EAAEA,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC;QAEhG,GACA;YAACA;YAAOD;SAAM;QAEhBS,UAAU,CAACV;QACXW,eAAe;IACjB;IAEA,OAAO;QAACR;QAASE;KAAS;AAC5B;AAwEA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASO,4BACdd,OAAwC;IAExC,MAAM,EACJe,OAAOC,SAAS,EAChBb,OAAOc,SAAS,EAChBC,SAAS,EACTC,UAAU,EACVC,cAAcC,gBAAgB,EAC9BC,eAAeC,iBAAiB,EAChCC,qBAAqB,EAAE,EACvBC,sBAAsB,EAAE,EACzB,GAAGzB;IACJ,MAAMG,QAAQL,cAAc,SAASmB;IAErC,MAAM,CAACS,aAAaN,aAAa,GAAGrB,gBAAgB;QAClDE,KAAKoB;QACLlB;QACAD,OAAOgB;QACPd,OAAO,CAAC,0BAA0B,EAAEoB,qBAAqB,CAAC,CAAC,EAAEA,mBAAmB,CAAC,GAAG,GAAG,CAAC;IAC1F;IAEA,MAAM,CAACG,cAAcL,cAAc,GAAGvB,gBAAgB;QACpDE,KAAKsB;QACLpB;QACAD,OAAOiB;QACPf,OAAOqB;IACT;IAEA,IAAIV,QAAQC;IACZ,IAAI,OAAOU,gBAAgB,YAAY,OAAOC,iBAAiB,UAAU;QACvEZ,QAAQ;YACN,GAAGC,SAAS;YACZ,iCACEU,eAAeV,WAAW,CAAC,gCAAgC;YAC7D,kCACEW,gBAAgBX,WAAW,CAAC,iCAAiC;QACjE;IACF;IAEA,OAAO;QACLD;QACAK;QACAE;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useTextFieldContainerAddons.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useState,\n  type CSSProperties,\n  type Ref,\n  type RefCallback,\n} from \"react\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { type FormTheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface AddonPaddingOptions {\n  ref?: Ref<HTMLSpanElement>;\n  addon: boolean;\n  theme: FormTheme;\n  extra: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction useAddonPadding(\n  options: AddonPaddingOptions\n): [padding: string | undefined, addonRef: RefCallback<HTMLSpanElement>] {\n  const { ref, addon, theme, extra } = options;\n  const [padding, setPadding] = useState<string | undefined>();\n  const addonRef = useResizeObserver({\n    ref,\n    onUpdate: useCallback(\n      (entry) => {\n        const inlineSize = entry.borderBoxSize[0]?.inlineSize;\n        if (typeof inlineSize !== \"number\") {\n          return;\n        }\n\n        // the leading space for the extra calc is required\n        setPadding(\n          `calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : \"\"})`\n        );\n      },\n      [extra, theme]\n    ),\n    disabled: !addon,\n    disableHeight: true,\n  });\n\n  return [padding, addonRef];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsOptions {\n  /**\n   * This style will automatically be merged with the returned `style`.\n   */\n  style?: CSSProperties;\n\n  /** @defaultValue `getFormConfig(\"theme\")` */\n  theme?: FormTheme;\n\n  /**\n   * Set this to `true` if the `leftAddon` should be watched for size changes.\n   */\n  leftAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.\n   */\n  leftAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  leftAddonExtraCalc?: string;\n\n  /**\n   * Set this to `true` if the `rightAddon` should be watched for size changes.\n   */\n  rightAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.\n   */\n  rightAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  rightAddonExtraCalc?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsImplementation {\n  style?: CSSProperties;\n  leftAddonRef: RefCallback<HTMLSpanElement>;\n  rightAddonRef: RefCallback<HTMLSpanElement>;\n}\n\n/**\n * This hook can be used to automatically update the padding on the\n * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.\n *\n * @example Simple Example\n * ```tsx\n * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({\n *   leftAddon: true,\n *   rightAddon: true,\n * });\n *\n * return (\n *   <TextField\n *     style={style}\n *     leftAddon={<SomeDynamicAddon />}\n *     leftAddonProps={{ ref: leftAddonRef }}\n *     rightAddon={<SomeDynamicAddon />}\n *     rightAddonProps={{ ref: rightAddonRef }}\n *   />\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useTextFieldContainerAddons(\n  options: TextFieldContainerAddonsOptions\n): TextFieldContainerAddonsImplementation {\n  const {\n    style: propStyle,\n    theme: propTheme,\n    leftAddon,\n    rightAddon,\n    leftAddonRef: propLeftAddonRef,\n    rightAddonRef: propRightAddonRef,\n    leftAddonExtraCalc = \"\",\n    rightAddonExtraCalc = \"\",\n  } = options;\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  const [paddingLeft, leftAddonRef] = useAddonPadding({\n    ref: propLeftAddonRef,\n    theme,\n    addon: leftAddon,\n    extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : \"\"}`,\n  });\n\n  const [paddingRight, rightAddonRef] = useAddonPadding({\n    ref: propRightAddonRef,\n    theme,\n    addon: rightAddon,\n    extra: rightAddonExtraCalc,\n  });\n\n  let style = propStyle;\n  if (typeof paddingLeft === \"string\" || typeof paddingRight === \"string\") {\n    style = {\n      ...propStyle,\n      \"--rmd-text-field-padding-left\":\n        paddingLeft ?? propStyle?.[\"--rmd-text-field-padding-left\"],\n      \"--rmd-text-field-padding-right\":\n        paddingRight ?? propStyle?.[\"--rmd-text-field-padding-right\"],\n    };\n  }\n\n  return {\n    style,\n    leftAddonRef,\n    rightAddonRef,\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","getFormConfig","useAddonPadding","options","ref","addon","theme","extra","padding","setPadding","addonRef","onUpdate","entry","inlineSize","borderBoxSize","disabled","disableHeight","useTextFieldContainerAddons","style","propStyle","propTheme","leftAddon","rightAddon","leftAddonRef","propLeftAddonRef","rightAddonRef","propRightAddonRef","leftAddonExtraCalc","rightAddonExtraCalc","paddingLeft","paddingRight"],"mappings":"AAAA;AACA,SACEA,WAAW,EACXC,QAAQ,QAIH,QAAQ;AACf,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,aAAa,QAAQ,kBAAkB;AAchD;;;CAGC,GACD,SAASC,gBACPC,OAA4B;IAE5B,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGJ;IACrC,MAAM,CAACK,SAASC,WAAW,GAAGV;IAC9B,MAAMW,WAAWV,kBAAkB;QACjCI;QACAO,UAAUb,YACR,CAACc;YACC,MAAMC,aAAaD,MAAME,aAAa,CAAC,EAAE,EAAED;YAC3C,IAAI,OAAOA,eAAe,UAAU;gBAClC;YACF;YAEA,mDAAmD;YACnDJ,WACE,CAAC,0BAA0B,EAAEH,MAAM,aAAa,EAAEO,WAAW,EAAE,EAAEN,QAAQ,CAAC,CAAC,EAAEA,OAAO,GAAG,GAAG,CAAC,CAAC;QAEhG,GACA;YAACA;YAAOD;SAAM;QAEhBS,UAAU,CAACV;QACXW,eAAe;IACjB;IAEA,OAAO;QAACR;QAASE;KAAS;AAC5B;AAwEA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASO,4BACdd,OAAwC;IAExC,MAAM,EACJe,OAAOC,SAAS,EAChBb,OAAOc,SAAS,EAChBC,SAAS,EACTC,UAAU,EACVC,cAAcC,gBAAgB,EAC9BC,eAAeC,iBAAiB,EAChCC,qBAAqB,EAAE,EACvBC,sBAAsB,EAAE,EACzB,GAAGzB;IACJ,MAAMG,QAAQL,cAAc,SAASmB;IAErC,MAAM,CAACS,aAAaN,aAAa,GAAGrB,gBAAgB;QAClDE,KAAKoB;QACLlB;QACAD,OAAOgB;QACPd,OAAO,CAAC,0BAA0B,EAAEoB,qBAAqB,CAAC,CAAC,EAAEA,oBAAoB,GAAG,IAAI;IAC1F;IAEA,MAAM,CAACG,cAAcL,cAAc,GAAGvB,gBAAgB;QACpDE,KAAKsB;QACLpB;QACAD,OAAOiB;QACPf,OAAOqB;IACT;IAEA,IAAIV,QAAQC;IACZ,IAAI,OAAOU,gBAAgB,YAAY,OAAOC,iBAAiB,UAAU;QACvEZ,QAAQ;YACN,GAAGC,SAAS;YACZ,iCACEU,eAAeV,WAAW,CAAC,gCAAgC;YAC7D,kCACEW,gBAAgBX,WAAW,CAAC,iCAAiC;QACjE;IACF;IAEA,OAAO;QACLD;QACAK;QACAE;IACF;AACF"}

package/dist/hoverMode/useHoverMode.d.ts

@@ -26,9 +26,9 @@ export interface ControlledHoverModeOptions extends HoverModeConfigurationOption
  * @since 6.0.0
  */
 export interface ControlledHoverModeImplementation {
-    startShowFlow(id?: string | MouseEvent): void;
-    startHideFlow(): void;
-    clearVisibilityTimeout(): void;
+    startShowFlow: (id?: string | MouseEvent) => void;
+    startHideFlow: () => void;
+    clearVisibilityTimeout: () => void;
 }
 /**
  * @since 6.0.0

package/dist/hoverMode/useHoverMode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport type { SimpleHoverModeContext } from \"./useHoverModeProvider.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeConfigurationOptions extends SimpleHoverModeContext {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s hover time.\n   */\n  hoverTimeout?: number;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s leave time.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeImplementation {\n  startShowFlow(id?: string | MouseEvent): void;\n  startHideFlow(): void;\n  clearVisibilityTimeout(): void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 2.8.0\n * @since 5.0.0 This hook no longer returns `handlers` or\n * `stickyHandlers` and does not hide when an element on the page is clicked.\n * @since 6.0.0 Requires passing the custom hover mode context to\n * work.\n */\nexport function useHoverMode(\n  options: ControlledHoverModeOptions\n): ControlledHoverModeImplementation;\nexport function useHoverMode(\n  options: UncontrolledHoverModeOptions\n): UncontrolledHoverModeImplementation;\nexport function useHoverMode(\n  options: ControlledHoverModeOptions | UncontrolledHoverModeOptions\n): HoverModeImplementation {\n  const {\n    disabled,\n    hoverTimeout: hoverTime,\n    hoverTimeoutRef,\n    leaveTimeout: leaveTime,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n  } = options as ControlledHoverModeOptions & UncontrolledHoverModeOptions;\n\n  const state = useState(defaultVisible);\n  let visible: boolean | undefined;\n  let setVisible: UseStateSetter<boolean>;\n  if (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTimeout","hoverTime","hoverTimeoutRef","leaveTimeout","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AA8EjE,OAAO,SAASC,aACdC,OAAkE;IAElE,MAAM,EACJC,QAAQ,EACRC,cAAcC,SAAS,EACvBC,eAAe,EACfC,cAAcC,SAAS,EACvBC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAYC,cAAc,EAC1BC,iBAAiB,KAAK,EACvB,GAAGd;IAEJ,MAAMe,QAAQjB,SAASgB;IACvB,IAAIE;IACJ,IAAIJ;IACJ,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBpB;IAC1B,MAAMqB,yBAAyBvB,YAAY;QACzCwB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXzB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMqB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLuB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBiB,OAAO;YACzD,IAAIpB,YAAY,OAAOC,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAI2B;YACJ,IAAI,OAAOD,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEC,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAO;YACAjB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAjB;YACAK;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}
+{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport type { SimpleHoverModeContext } from \"./useHoverModeProvider.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeConfigurationOptions extends SimpleHoverModeContext {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s hover time.\n   */\n  hoverTimeout?: number;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s leave time.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ControlledHoverModeImplementation {\n  startShowFlow: (id?: string | MouseEvent) => void;\n  startHideFlow: () => void;\n  clearVisibilityTimeout: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * @since 2.8.0\n * @since 5.0.0 This hook no longer returns `handlers` or\n * `stickyHandlers` and does not hide when an element on the page is clicked.\n * @since 6.0.0 Requires passing the custom hover mode context to\n * work.\n */\nexport function useHoverMode(\n  options: ControlledHoverModeOptions\n): ControlledHoverModeImplementation;\nexport function useHoverMode(\n  options: UncontrolledHoverModeOptions\n): UncontrolledHoverModeImplementation;\nexport function useHoverMode(\n  options: ControlledHoverModeOptions | UncontrolledHoverModeOptions\n): HoverModeImplementation {\n  const {\n    disabled,\n    hoverTimeout: hoverTime,\n    hoverTimeoutRef,\n    leaveTimeout: leaveTime,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n  } = options as ControlledHoverModeOptions & UncontrolledHoverModeOptions;\n\n  const state = useState(defaultVisible);\n  let visible: boolean | undefined;\n  let setVisible: UseStateSetter<boolean>;\n  if (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTimeout","hoverTime","hoverTimeoutRef","leaveTimeout","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AA8EjE,OAAO,SAASC,aACdC,OAAkE;IAElE,MAAM,EACJC,QAAQ,EACRC,cAAcC,SAAS,EACvBC,eAAe,EACfC,cAAcC,SAAS,EACvBC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAYC,cAAc,EAC1BC,iBAAiB,KAAK,EACvB,GAAGd;IAEJ,MAAMe,QAAQjB,SAASgB;IACvB,IAAIE;IACJ,IAAIJ;IACJ,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBpB;IAC1B,MAAMqB,yBAAyBvB,YAAY;QACzCwB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXzB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMqB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBR;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLuB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAehC,YACb,CAACiC;YACC,MAAM1B,eAAeC,aAAaC,gBAAgBiB,OAAO;YACzD,IAAIpB,YAAY,OAAOC,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAI2B;YACJ,IAAI,OAAOD,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEC,KAAKD,aAAa;YACpB,OAAO;gBACLC,KAAKD,UAAUE,aAAa,CAACD,EAAE;YACjC;YAEAlB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CvB,gBAAgBqB;gBAChBjB,WAAW;YACb,GAAGV;QACL,GACA;YACES;YACAO;YACAjB;YACAO;YACAL;YACAC;YACAQ;SACD;QAEHoB,eAAerC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAS;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOY,UAAU,CAAC;gBAC5CnB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAjB;YACAK;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}

package/dist/hoverMode/useHoverModeProvider.d.ts

@@ -44,20 +44,20 @@ export interface SimpleHoverModeContext {
      *
      * @see {@link hoverTimeoutRef} for an example.
      */
-    enableHoverMode(activeId: string): void;
+    enableHoverMode: (activeId: string) => void;
     /**
      * Disables all hover mode behavior by clearing all timeouts and resetting
      * internal state.
      */
-    disableHoverMode(): void;
+    disableHoverMode: () => void;
     /**
      * @see {@link leaveTimeoutRef} for an example.
      */
-    startDisableTimer(): void;
+    startDisableTimer: () => void;
     /**
      * @see {@link hoverTimeoutRef} for an example.
      */
-    clearDisableTimer(): void;
+    clearDisableTimer: () => void;
 }
 /**
  * @since 2.8.0

package/dist/hoverMode/useHoverModeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { NonNullMutableRef, NonNullRef } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: NonNullRef<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: NonNullRef<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode(activeId: string): void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode(): void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer(): void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer(): void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: NonNullMutableRef<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * TODO: I think this has something to do with how I implemented the MenuBar.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import type {\n *   HoverModeConfiguration,\n *   HoverModeContext,\n * } from \"@react-md/core\";\n * import {\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createContext, useContext } from \"react\";\n *\n * // extend as needed\n * type CustomHoverMode = HoverModeContext;\n *\n * // you can also add defaults if there is no parent provider.\n * const context = createContext<CustomHoverMode>(createHoverModeContext());\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<number | undefined>();\n  const clearDisableTimer = useCallback(() => {\n    window.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = window.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      window.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","window","clearTimeout","setTimeout"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAG1E,MAAMC,OAAO;AACX,aAAa;AACf;AAmIA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB;IAChC,MAAMiB,oBAAoBpB,YAAY;QACpC0B,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;IACrD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGa,OAAOE,UAAU,CAAC;YAClDV;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLiB,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;QACrD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}
+{"version":3,"sources":["../../src/hoverMode/useHoverModeProvider.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { NonNullMutableRef, NonNullRef } from \"../types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 6.0.0 */\nexport interface SimpleHoverModeContext {\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseEnter(event) {\n   *   const hoverTimeout = hoverTimeoutRef.current;\n   *   if (typeof hoverTimeout !== \"number\" || mode === \"touch\") {\n   *     return;\n   *   }\n   *\n   *   const { id } = event.currentTarget;\n   *   clearDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     enableHoverMode(id);\n   *     setVisible(true);\n   *   }, hoverTimeout);\n   * }\n   * ```\n   */\n  hoverTimeoutRef: NonNullRef<number | undefined>;\n\n  /**\n   * @example Main Usage\n   * ```ts\n   * onMouseLeave() {\n   *   if (mode === \"touch\") {\n   *     return\n   *   }\n   *\n   *   startDisableTimer();\n   *   window.clearTimeout(visibilityTimeout.current);\n   *   visibilityTimeout.current = window.setTimeout(() => {\n   *     setVisible(false)\n   *   }, leaveTimeoutRef.current);\n   * }\n   * ```\n   */\n  leaveTimeoutRef: NonNullRef<number>;\n\n  /**\n   * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the\n   * {@link HoverModeContext.activeId} will be set to this `activeId` value.\n   *\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  enableHoverMode: (activeId: string) => void;\n\n  /**\n   * Disables all hover mode behavior by clearing all timeouts and resetting\n   * internal state.\n   */\n  disableHoverMode: () => void;\n\n  /**\n   * @see {@link leaveTimeoutRef} for an example.\n   */\n  startDisableTimer: () => void;\n\n  /**\n   * @see {@link hoverTimeoutRef} for an example.\n   */\n  clearDisableTimer: () => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Uses refs to increase performance by preventing unneeded\n * re-renders of the entire hover mode provider's component tree. The API also\n * changed to support custom hover mode providers.\n */\nexport interface HoverModeContext extends SimpleHoverModeContext {\n  /**\n   * This will only be updated if {@link HoverModeConfiguration.forceRerender} is `true`\n   */\n  activeId: string;\n\n  /**\n   * This ref contains the current DOM `id` for the element that is being\n   * hovered within the `HoverModeProvider`. This will be an empty string\n   * when the hover mode is not active.\n   */\n  activeIdRef: NonNullMutableRef<string>;\n\n  /**\n   * This ref can be used to disable transitions for a group of components using\n   * the same hover mode provider. The general flow would be:\n   *\n   * - set `disableTransition: animatedOnceRef.current` on hover mode components\n   * - set `animatedOnceRef.current = true` when the `onEntered` transition callback fires\n   * - set `animatedOnceRef.current = false` when the hover mode behavior is\n   *   disabled. This would normally be after a timeout for the `onExited`\n   *   callback\n   */\n  animatedOnceRef: NonNullMutableRef<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateHoverModeContextOptions {\n  /**\n   * TODO: I think this has something to do with how I implemented the MenuBar.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultActiveId?: string;\n\n  /**\n   * When this is `undefined`, the hover mode behavior will be disabled.\n   * Otherwise, this will be the amount of time to wait on a `mouseenter` event\n   * before setting the visibility to `true`.\n   *\n   * @defaultValue `undefined`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait after a `mouseleave` event before setting the\n   * visibility to `false`.\n   *\n   * @defaultValue `0`\n   * @since 6.0.0 This was renamed from `exitVisibilityDelay` and the\n   * default value changed from `300` to `0`.\n   */\n  leaveTimeout?: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport function createHoverModeContext(\n  options: CreateHoverModeContextOptions = {}\n): Readonly<HoverModeContext> {\n  const { defaultActiveId = \"\", hoverTimeout, leaveTimeout = 0 } = options;\n\n  return {\n    activeId: defaultActiveId,\n    activeIdRef: { current: defaultActiveId },\n    hoverTimeoutRef: { current: hoverTimeout },\n    leaveTimeoutRef: { current: leaveTimeout },\n    animatedOnceRef: { current: false },\n    enableHoverMode: noop,\n    disableHoverMode: noop,\n    startDisableTimer: noop,\n    clearDisableTimer: noop,\n  };\n}\n\n/** @since 6.0.0 */\nexport interface HoverModeConfiguration extends CreateHoverModeContextOptions {\n  /**\n   * The amount of time to wait before disabling the hover mode behavior if none\n   * of the components are being hovered.\n   *\n   * If this is `undefined`, {@link HoverModeContext.startDisableTimer} will do\n   * nothing. You must manually call {@link HoverModeContext.disableHoverMode}\n   * to disable the hover mode instead.\n   */\n  disableTimeout?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  forceRerender?: boolean;\n}\n\n/**\n * @example Creating a Hover Mode Group\n * ```tsx\n * import type {\n *   HoverModeConfiguration,\n *   HoverModeContext,\n * } from \"@react-md/core\";\n * import {\n *   createHoverModeContext,\n *   useHoverModeProvider,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createContext, useContext } from \"react\";\n *\n * // extend as needed\n * type CustomHoverMode = HoverModeContext;\n *\n * // you can also add defaults if there is no parent provider.\n * const context = createContext<CustomHoverMode>(createHoverModeContext());\n * const { Provider } = context;\n *\n * interface Props extends HoverModeConfiguration {\n *   children: ReactNode;\n * }\n *\n * export function CustomHoverModeProvider({\n *   children,\n *   // change to whatever defaults you want\n *   hoverTimeout = 3000,\n *   leaveTimeout = 3000,\n *   defaultActiveId = \"\",\n *   disableTimeout = 5000,\n * }: Props): ReactElement {\n *   const context = useHoverModeProvider({\n *     hoverTimeout,\n *     leaveTimeout,\n *     defaultActiveId,\n *     disableTimeout,\n *   });\n *\n *   return <Provider value={context}>{children}</Provider>;\n * }\n * ```\n *\n * @see {@link CreateHoverModeContextOptions}\n * @see {@link useHoverMode}\n * @since 6.0.0 The `HoverModeProvider` component was replaced by this\n * hook implementation. After developing the `MenuBar`, I realized the hover\n * mode should normally be grouped by related components or types instead of a\n * top-level catch all.\n */\nexport function useHoverModeProvider(\n  options: HoverModeConfiguration\n): Readonly<HoverModeContext> {\n  const {\n    hoverTimeout,\n    leaveTimeout = 0,\n    forceRerender = false,\n    defaultActiveId = \"\",\n    disableTimeout,\n  } = options;\n\n  const [activeId, setActiveId] = useState(defaultActiveId);\n  const activeIdRef = useRef(defaultActiveId);\n  const hoverTimeoutRef = useRef(hoverTimeout);\n  const leaveTimeoutRef = useRef(leaveTimeout);\n  const animatedOnceRef = useRef(!!defaultActiveId);\n  const disableHoverModeTimeout = useRef<number | undefined>();\n  const clearDisableTimer = useCallback(() => {\n    window.clearTimeout(disableHoverModeTimeout.current);\n  }, []);\n  const enableHoverMode = useCallback(\n    (activeId: string) => {\n      clearDisableTimer();\n      activeIdRef.current = activeId;\n      hoverTimeoutRef.current = 0;\n\n      if (forceRerender) {\n        setActiveId(activeId);\n      }\n    },\n    [clearDisableTimer, forceRerender]\n  );\n  const disableHoverMode = useCallback(() => {\n    clearDisableTimer();\n    activeIdRef.current = \"\";\n    hoverTimeoutRef.current = hoverTimeout;\n    animatedOnceRef.current = false;\n    if (forceRerender) {\n      setActiveId(\"\");\n    }\n  }, [clearDisableTimer, forceRerender, hoverTimeout]);\n  const startDisableTimer = useCallback(() => {\n    if (typeof disableTimeout !== \"number\") {\n      return;\n    }\n\n    clearDisableTimer();\n    disableHoverModeTimeout.current = window.setTimeout(() => {\n      disableHoverMode();\n    }, disableTimeout);\n  }, [clearDisableTimer, disableHoverMode, disableTimeout]);\n\n  useEffect(() => {\n    hoverTimeoutRef.current = hoverTimeout;\n    return () => {\n      window.clearTimeout(disableHoverModeTimeout.current);\n    };\n  }, [hoverTimeout]);\n\n  return useMemo<HoverModeContext>(\n    () => ({\n      activeId,\n      activeIdRef,\n      hoverTimeoutRef,\n      leaveTimeoutRef,\n      animatedOnceRef,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    }),\n    [\n      activeId,\n      enableHoverMode,\n      disableHoverMode,\n      startDisableTimer,\n      clearDisableTimer,\n    ]\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useRef","useState","noop","createHoverModeContext","options","defaultActiveId","hoverTimeout","leaveTimeout","activeId","activeIdRef","current","hoverTimeoutRef","leaveTimeoutRef","animatedOnceRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","useHoverModeProvider","forceRerender","disableTimeout","setActiveId","disableHoverModeTimeout","window","clearTimeout","setTimeout"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAG1E,MAAMC,OAAO;AACX,aAAa;AACf;AAmIA;;CAEC,GACD,OAAO,SAASC,uBACdC,UAAyC,CAAC,CAAC;IAE3C,MAAM,EAAEC,kBAAkB,EAAE,EAAEC,YAAY,EAAEC,eAAe,CAAC,EAAE,GAAGH;IAEjE,OAAO;QACLI,UAAUH;QACVI,aAAa;YAAEC,SAASL;QAAgB;QACxCM,iBAAiB;YAAED,SAASJ;QAAa;QACzCM,iBAAiB;YAAEF,SAASH;QAAa;QACzCM,iBAAiB;YAAEH,SAAS;QAAM;QAClCI,iBAAiBZ;QACjBa,kBAAkBb;QAClBc,mBAAmBd;QACnBe,mBAAmBf;IACrB;AACF;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,SAASgB,qBACdd,OAA+B;IAE/B,MAAM,EACJE,YAAY,EACZC,eAAe,CAAC,EAChBY,gBAAgB,KAAK,EACrBd,kBAAkB,EAAE,EACpBe,cAAc,EACf,GAAGhB;IAEJ,MAAM,CAACI,UAAUa,YAAY,GAAGpB,SAASI;IACzC,MAAMI,cAAcT,OAAOK;IAC3B,MAAMM,kBAAkBX,OAAOM;IAC/B,MAAMM,kBAAkBZ,OAAOO;IAC/B,MAAMM,kBAAkBb,OAAO,CAAC,CAACK;IACjC,MAAMiB,0BAA0BtB;IAChC,MAAMiB,oBAAoBpB,YAAY;QACpC0B,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;IACrD,GAAG,EAAE;IACL,MAAMI,kBAAkBjB,YACtB,CAACW;QACCS;QACAR,YAAYC,OAAO,GAAGF;QACtBG,gBAAgBD,OAAO,GAAG;QAE1B,IAAIS,eAAe;YACjBE,YAAYb;QACd;IACF,GACA;QAACS;QAAmBE;KAAc;IAEpC,MAAMJ,mBAAmBlB,YAAY;QACnCoB;QACAR,YAAYC,OAAO,GAAG;QACtBC,gBAAgBD,OAAO,GAAGJ;QAC1BO,gBAAgBH,OAAO,GAAG;QAC1B,IAAIS,eAAe;YACjBE,YAAY;QACd;IACF,GAAG;QAACJ;QAAmBE;QAAeb;KAAa;IACnD,MAAMU,oBAAoBnB,YAAY;QACpC,IAAI,OAAOuB,mBAAmB,UAAU;YACtC;QACF;QAEAH;QACAK,wBAAwBZ,OAAO,GAAGa,OAAOE,UAAU,CAAC;YAClDV;QACF,GAAGK;IACL,GAAG;QAACH;QAAmBF;QAAkBK;KAAe;IAExDtB,UAAU;QACRa,gBAAgBD,OAAO,GAAGJ;QAC1B,OAAO;YACLiB,OAAOC,YAAY,CAACF,wBAAwBZ,OAAO;QACrD;IACF,GAAG;QAACJ;KAAa;IAEjB,OAAOP,QACL,IAAO,CAAA;YACLS;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAM;QACAC;QACAC;QACAC;KACD;AAEL"}

package/dist/icon/FontIcon.d.ts

@@ -16,8 +16,6 @@ export interface FontIconProps extends HTMLAttributes<HTMLSpanElement>, FontIcon
     children?: ReactNode;
 }
 /**
- * **Server Component**
- *
  * The `FontIcon` component is used for rendering a font-icon library's icon.
  * The default is to use the `material-icons` library, but others can be used as
  * well.

package/dist/icon/FontIcon.js

@@ -2,8 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `FontIcon` component is used for rendering a font-icon library's icon.
  * The default is to use the `material-icons` library, but others can be used as
  * well.

package/dist/icon/FontIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { icon, type FontIconClassNameOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    FontIconClassNameOptions {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons.\n   *\n   * @example `<FontIcon>clear</FontIcon>`\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      iconClassName = \"material-icons\",\n      dense = false,\n      theme,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AACf,SAASC,IAAI,QAAuC,cAAc;AAqBlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { icon, type FontIconClassNameOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the\n * `inline` and `theme` props.\n */\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    FontIconClassNameOptions {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons.\n   *\n   * @example `<FontIcon>clear</FontIcon>`\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * @since 6.0.0 Switched from `<i>` to `<span>` element and removed\n * the `forceSize`/`forceFontSize` props.\n */\nexport const FontIcon = forwardRef<HTMLElement, FontIconProps>(\n  function FontIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      iconClassName = \"material-icons\",\n      dense = false,\n      theme,\n      className,\n      children,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"font\",\n          dense,\n          theme,\n          className,\n          iconClassName,\n        })}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","icon","FontIcon","props","ref","ariaHidden","iconClassName","dense","theme","className","children","remaining","span","aria-hidden","type"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AACf,SAASC,IAAI,QAAuC,cAAc;AAqBlE;;;;;;;CAOC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,gBAAgB,gBAAgB,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaR;QACbD,KAAKA;QACLK,WAAWR,KAAK;YACda,MAAM;YACNP;YACAC;YACAC;YACAH;QACF;kBAECI;;AAGP,GACA"}

package/dist/icon/IconRotator.d.ts

@@ -27,8 +27,6 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
     children: ReactNode;
 }
 /**
- * **Server Component**
- *
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  */

package/dist/icon/IconRotator.js

@@ -3,8 +3,6 @@ import { cnb } from "cnbuilder";
 import { Children, cloneElement, forwardRef, isValidElement } from "react";
 import { iconRotator } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
  */ export const IconRotator = /*#__PURE__*/ forwardRef(function IconRotator(props, ref) {

package/dist/icon/IconRotator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { iconRotator, type IconRotatorClassNameOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} ref={ref} className={className}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,cAAc,QAIT,QAAQ;AACf,SAASC,WAAW,QAA0C,cAAc;AAiC5E;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQf,SAASgB,IAAI,CAACL;QAC5B,qBAAOV,aAAac,OAAO;YACzBP,WAAWT,IAAIS,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { iconRotator, type IconRotatorClassNameOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    IconRotatorClassNameOptions {\n  /**\n   * An optional style to apply to the surrounding span when the `forceIconWrap`\n   * prop is enabled or the children is not a single react element.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the child icon should be \"forcefully\" wrapped in a `<span>`\n   * element. This should be enabled if you have a custom icon that does not\n   * pass the `className` prop down.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n}\n\nexport interface IconRotatorProps extends IconRotatorBaseProps {\n  /**\n   * The icon that should be rotated. If this is a valid React Element, the\n   * class names will be cloned into that icon, otherwise the icon will be\n   * wrapped in a span with the correct class names applied.\n   */\n  children: ReactNode;\n}\n\n/**\n * The `IconRotator` is a simple component that is used to rotate an icon from a\n * one degrees to another.\n */\nexport const IconRotator = forwardRef<HTMLSpanElement, IconRotatorProps>(\n  function IconRotator(props, ref) {\n    const {\n      className: propClassName,\n      rotated,\n      children,\n      forceIconWrap = false,\n      disableTransition = false,\n      ...remaining\n    } = props;\n\n    const className = iconRotator({\n      rotated,\n      className: propClassName,\n      disableTransition,\n    });\n    if (!forceIconWrap && isValidElement<{ className?: string }>(children)) {\n      const child = Children.only(children);\n      return cloneElement(child, {\n        className: cnb(className, child.props.className),\n      });\n    }\n\n    return (\n      <span {...remaining} ref={ref} className={className}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["cnb","Children","cloneElement","forwardRef","isValidElement","iconRotator","IconRotator","props","ref","className","propClassName","rotated","children","forceIconWrap","disableTransition","remaining","child","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,cAAc,QAIT,QAAQ;AACf,SAASC,WAAW,QAA0C,cAAc;AAiC5E;;;CAGC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,WAAWC,aAAa,EACxBC,OAAO,EACPC,QAAQ,EACRC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGR;IAEJ,MAAME,YAAYJ,YAAY;QAC5BM;QACAF,WAAWC;QACXI;IACF;IACA,IAAI,CAACD,+BAAiBT,eAAuCQ,WAAW;QACtE,MAAMI,QAAQf,SAASgB,IAAI,CAACL;QAC5B,qBAAOV,aAAac,OAAO;YACzBP,WAAWT,IAAIS,WAAWO,MAAMT,KAAK,CAACE,SAAS;QACjD;IACF;IAEA,qBACE,KAACS;QAAM,GAAGH,SAAS;QAAEP,KAAKA;QAAKC,WAAWA;kBACvCG;;AAGP,GACA"}

package/dist/icon/MaterialIcon.d.ts

@@ -14,8 +14,6 @@ export interface MaterialIconProps extends HTMLAttributes<HTMLSpanElement>, Part
     children?: never;
 }
 /**
- * **Server Component**
- *
  * The `MaterialIcon` component is used for rendering a material icon using the
  * Google Fonts stylesheet (handled separately). This is mostly a convenience
  * wrapper around the `FontIcon` that will catch typos for the supported icon

package/dist/icon/MaterialIcon.js

@@ -3,8 +3,6 @@ import { forwardRef } from "react";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `MaterialIcon` component is used for rendering a material icon using the
  * Google Fonts stylesheet (handled separately). This is mostly a convenience
  * wrapper around the `FontIcon` that will catch typos for the supported icon

package/dist/icon/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { icon, type MaterialIconClassNameOptions } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /**\n   * The icon name to use\n   */\n  name: MaterialIconName;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */\n  family?: MaterialIconFamily;\n  children?: never;\n}\n\n/**\n * **Server Component**\n *\n * The `MaterialIcon` component is used for rendering a material icon using the\n * Google Fonts stylesheet (handled separately). This is mostly a convenience\n * wrapper around the `FontIcon` that will catch typos for the supported icon\n * names.\n *\n * @example Simple Example\n * ```tsx\n * <MaterialIcon name=\"3k\" />\n * <MaterialIcon name=\"favorite\" theme=\"primary\" />\n * <MaterialIcon name=\"wifi\" family=\"two-tone\" dense theme=\"warning\" />\n * ```\n *\n * @since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family = MATERIAL_CONFIG.iconFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,IAAI,QAA2C,cAAc;AAmBtE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACE,GAAGD,SAAS;QACbE,eAAaT;QACbD,KAAKA;QACLO,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { icon, type MaterialIconClassNameOptions } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /**\n   * The icon name to use\n   */\n  name: MaterialIconName;\n\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n\n  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */\n  family?: MaterialIconFamily;\n  children?: never;\n}\n\n/**\n * The `MaterialIcon` component is used for rendering a material icon using the\n * Google Fonts stylesheet (handled separately). This is mostly a convenience\n * wrapper around the `FontIcon` that will catch typos for the supported icon\n * names.\n *\n * @example Simple Example\n * ```tsx\n * <MaterialIcon name=\"3k\" />\n * <MaterialIcon name=\"favorite\" theme=\"primary\" />\n * <MaterialIcon name=\"wifi\" family=\"two-tone\" dense theme=\"warning\" />\n * ```\n *\n * @since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family = MATERIAL_CONFIG.iconFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,IAAI,QAA2C,cAAc;AAmBtE;;;;;;;;;;;;;;CAcC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACE,GAAGD,SAAS;QACbE,eAAaT;QACbD,KAAKA;QACLO,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}

package/dist/icon/MaterialSymbol.d.ts

@@ -20,7 +20,6 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
     children?: never;
 }
 /**
- * **Server Component**
  * This is a convenience component that provides autocomplete for all the
  * available material symbols via the `name` prop.
  *

package/dist/icon/MaterialSymbol.js

@@ -3,7 +3,6 @@ import { forwardRef } from "react";
 import { getFontVariationSettings } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
  * This is a convenience component that provides autocomplete for all the
  * available material symbols via the `name` prop.
  *

package/dist/icon/MaterialSymbol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  getFontVariationSettings,\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n} from \"./materialConfig.js\";\nimport { icon, type MaterialSymbolClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * **Server Component**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = getFontVariationSettings({\n      style: propStyle,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      family: propFamily,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SACEC,wBAAwB,QAMnB,sBAAsB;AAC7B,SAASC,IAAI,QAA6C,cAAc;AAwBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,MAAMC,+BAAiBH,WAC5B,SAASG,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPG;QACAC;QACAC;QACAC;QACAL,QAAQC;IACV;IAEA,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  getFontVariationSettings,\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n} from \"./materialConfig.js\";\nimport { icon, type MaterialSymbolClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = getFontVariationSettings({\n      style: propStyle,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      family: propFamily,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SACEC,wBAAwB,QAMnB,sBAAsB;AAC7B,SAASC,IAAI,QAA6C,cAAc;AAwBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,MAAMC,+BAAiBH,WAC5B,SAASG,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,MAAMC,MAAM,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACL,GAAGC,WACJ,GAAGhB;IACJ,MAAM,EAAEM,KAAK,EAAEE,MAAM,EAAE,GAAGX,yBAAyB;QACjDS,OAAOC;QACPG;QACAC;QACAC;QACAC;QACAL,QAAQC;IACV;IAEA,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbE,eAAahB;QACbD,KAAKA;QACLK,OAAOA;QACPH,WAAWL,KAAK;YACdqB,MAAM;YACNX;YACAM;YACAC;YACAZ;QACF;kBAECE;;AAGP,GACA"}

package/dist/icon/SVGIcon.d.ts

@@ -65,8 +65,6 @@ export interface SVGIconProps extends HTMLAttributes<SVGSVGElement>, SVGIconClas
     children?: ReactNode;
 }
 /**
- * **Server Component**
- *
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
  */

package/dist/icon/SVGIcon.js

@@ -2,8 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
  */ export const SVGIcon = /*#__PURE__*/ forwardRef(function SVGIcon(props, ref) {

package/dist/icon/SVGIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { icon, type SVGIconClassNameOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>,\n    SVGIconClassNameOptions {\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,IAAI,QAAsC,cAAc;AAyEjE;;;;;CAKC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { icon, type SVGIconClassNameOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>,\n    SVGIconClassNameOptions {\n  /**\n   * Boolean if the SVG should gain the `focusable` attribute. This is disabled\n   * by default since IE11 and Edge actually default this to true and keyboard's\n   * will tab focus all SVGs.\n   *\n   * @defaultValue `false`\n   */\n  focusable?: \"false\" | \"true\" | boolean;\n\n  /**\n   * The `viewBox` attribute allows you to specify that a given set of graphics\n   * stretch to fit a particular container element.\n   *\n   * The value of the `viewBox` attribute is a list of four numbers min-x,\n   * min-y, width and height, separated by white space and/or a comma, which\n   * specify a rectangle in user space which should be mapped to the bounds of\n   * the viewport established by the given element, taking into account\n   * attribute `preserveAspectRatio`.\n   *\n   * Negative values for width or height are not permitted and a value of zero\n   * disables rendering of the element. An optional `viewbox` for the SVG.\n   *\n   * For example, if the SVG element is 250 (width) by 200 (height) and you\n   * provide `viewBox=\"0 0 25 20\"`, the coordinates inside the SVG will go from\n   * the top left corner (0, 0) to the bottom right (25, 20) and each unit will\n   * be worth `10px`.\n   *\n   * @defaultValue `\"0 0 24 24\"`\n   */\n  viewBox?: string;\n\n  /**\n   * An optional `xmlns` string to provide. The `use` prop will not work without\n   * this prop defined.\n   *\n   *\n   * Note: The default value will be `undefined` unless the {@link use} prop is\n   * defined.\n   *\n   * @defaultValue `\"http://www.w3.org/2000/svg\"`\n   */\n  xmlns?: string;\n\n  /**\n   * This should be a link to a part of an SVG sprite map. So normally one of\n   * the following:\n   * - `'#some-custom-svg'`\n   * - `'/images/spritemap.svg#some-custom-svg'`\n   *\n   * This prop **should not** be used with the `children` prop as only one will\n   * be rendered.\n   *\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,IAAI,QAAsC,cAAc;AAyEjE;;;CAGC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,YAAY,OAAO,EACnBC,GAAG,EACHC,QAAQD,MAAM,+BAA+BE,SAAS,EACtDC,UAAU,WAAW,EACrBC,QAAQ,KAAK,EACbC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAUC,YAAY,EACtB,GAAGC,WACJ,GAAGd;IAEJ,IAAIY,WAAWC;IACf,IAAI,CAACD,YAAYR,KAAK;QACpBQ,yBAAW,KAACR;YAAIW,WAAWX;;IAC7B;IAEA,qBACE,KAACY;QACE,GAAGF,SAAS;QACbG,eAAaf;QACbD,KAAKA;QACLQ,WAAWX,KAAK;YACdoB,MAAM;YACNV;YACAE;YACAC;YACAF;QACF;QACAN,WAAWA;QACXE,OAAOA;QACPE,SAASA;kBAERK;;AAGP,GACA"}

package/dist/icon/TextIconSpacing.d.ts

@@ -85,8 +85,6 @@ export interface TextIconSpacingProps {
     flexReverse?: boolean;
 }
 /**
- * **Server Component**
- *
  * Note: This component **must** be rendered within a flex container unless the
  * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.
  *

package/dist/icon/TextIconSpacing.js

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cnb } from "cnbuilder";
 import { Children, cloneElement, isValidElement } from "react";
 /**
- * **Server Component**
- *
  * Note: This component **must** be rendered within a flex container unless the
  * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.
  *

package/dist/icon/TextIconSpacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/TextIconSpacing.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nexport interface TextIconSpacingProps {\n  /**\n   * An optional className to apply to the surrounding `<span>` when the\n   * `forceIconWrap` prop is enabled or the icon is not a valid React Element.\n   * If the `forceIconWrap` prop is not enabled, it will be cloned into the icon\n   * instead.\n   */\n  className?: string;\n\n  /**\n   * An optional icon to display with a text button. This is invalid for icon\n   * buttons. If this is a single element, a new class name will be cloned into\n   * the element to get correct spacing so if you have a custom icon element,\n   * you **must** also pass that class name down. If you are using one of the\n   * react-md icon component packages, this is handled automatically.\n   *\n   * If this is not a valid react element, the icon will be wrapped in a\n   * `<span>` instead with the class names applied.\n   */\n  icon?: ReactElement | ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the text instead of before.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * The children to render before or after the provided icon. This is defaulted\n   * to `null` so that providing a `null` icon will correctly render without\n   * React crashing.\n   *\n   * @defaultValue `null`\n   */\n  children?: ReactNode;\n\n  /**\n   * The class name to use for an icon that is placed before text.\n   *\n   * @defaultValue `\"rmd-icon--before\"`\n   */\n  beforeClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed after text.\n   *\n   * @defaultValue `\"rmd-icon--after\"`\n   */\n  afterClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * disabled or omitted.\n   *\n   * @defaultValue `\"rmd-icon--above\"`\n   */\n  aboveClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * enabled.\n   *\n   * @defaultValue `\"rmd-icon--below\"`\n   */\n  belowClassName?: string;\n\n  /**\n   * Boolean if the icon should be forced into a `<span>` with the class names\n   * applied instead of attempting to clone into the provided icon.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n\n  /**\n   * Boolean if the icon and text should be stacked instead of inline. Note:\n   * You'll normally want to update the container element to have\n   * `display: flex` and `flex-direction: column` for this to work.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Boolean if the icon and content are in a `column-reverse` or `row-reverse`\n   * `flex-direction`. This will swap the different classnames as needed.\n   *\n   * @since 2.5.0\n   * @defaultValue `false`\n   */\n  flexReverse?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * Note: This component **must** be rendered within a flex container unless the\n * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.\n *\n * @example Simple Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>}>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @example Stacked Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>} stacked>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n */\nexport function TextIconSpacing(props: TextIconSpacingProps): ReactElement {\n  const {\n    className,\n    icon: propIcon,\n    children = null,\n    stacked = false,\n    iconAfter = false,\n    flexReverse = false,\n    forceIconWrap = false,\n    beforeClassName = \"rmd-icon--before\",\n    afterClassName = \"rmd-icon--after\",\n    aboveClassName = \"rmd-icon--above\",\n    belowClassName = \"rmd-icon--below\",\n  } = props;\n\n  if (!propIcon) {\n    return <>{children}</>;\n  }\n\n  const isAfter = flexReverse ? !iconAfter : iconAfter;\n  const baseClassName = cnb(\n    {\n      [beforeClassName]: !stacked && !isAfter,\n      [afterClassName]: !stacked && isAfter,\n      [aboveClassName]: stacked && !isAfter,\n      [belowClassName]: stacked && isAfter,\n    },\n    className\n  );\n\n  let iconEl = propIcon;\n  let content = children;\n  if (!forceIconWrap && isValidElement<{ className?: string }>(propIcon)) {\n    const icon = Children.only(propIcon);\n    iconEl = cloneElement(icon, {\n      className: cnb(baseClassName, icon.props.className),\n    });\n  } else if (propIcon) {\n    iconEl = (\n      <span className={cnb(\"rmd-text-icon-spacing\", baseClassName)}>\n        {propIcon}\n      </span>\n    );\n  }\n\n  if (iconEl) {\n    content = (\n      <>\n        {!iconAfter && iconEl}\n        {children}\n        {iconAfter && iconEl}\n      </>\n    );\n  }\n\n  return <>{content}</>;\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","TextIconSpacing","props","className","icon","propIcon","children","stacked","iconAfter","flexReverse","forceIconWrap","beforeClassName","afterClassName","aboveClassName","belowClassName","isAfter","baseClassName","iconEl","content","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,cAAc,QAGT,QAAQ;AAkGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,SAAS,EACTC,MAAMC,QAAQ,EACdC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,gBAAgB,KAAK,EACrBC,kBAAkB,kBAAkB,EACpCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EACnC,GAAGZ;IAEJ,IAAI,CAACG,UAAU;QACb,qBAAO;sBAAGC;;IACZ;IAEA,MAAMS,UAAUN,cAAc,CAACD,YAAYA;IAC3C,MAAMQ,gBAAgBnB,IACpB;QACE,CAACc,gBAAgB,EAAE,CAACJ,WAAW,CAACQ;QAChC,CAACH,eAAe,EAAE,CAACL,WAAWQ;QAC9B,CAACF,eAAe,EAAEN,WAAW,CAACQ;QAC9B,CAACD,eAAe,EAAEP,WAAWQ;IAC/B,GACAZ;IAGF,IAAIc,SAASZ;IACb,IAAIa,UAAUZ;IACd,IAAI,CAACI,+BAAiBV,eAAuCK,WAAW;QACtE,MAAMD,OAAON,SAASqB,IAAI,CAACd;QAC3BY,uBAASlB,aAAaK,MAAM;YAC1BD,WAAWN,IAAImB,eAAeZ,KAAKF,KAAK,CAACC,SAAS;QACpD;IACF,OAAO,IAAIE,UAAU;QACnBY,uBACE,KAACG;YAAKjB,WAAWN,IAAI,yBAAyBmB;sBAC3CX;;IAGP;IAEA,IAAIY,QAAQ;QACVC,wBACE;;gBACG,CAACV,aAAaS;gBACdX;gBACAE,aAAaS;;;IAGpB;IAEA,qBAAO;kBAAGC;;AACZ"}
+{"version":3,"sources":["../../src/icon/TextIconSpacing.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nexport interface TextIconSpacingProps {\n  /**\n   * An optional className to apply to the surrounding `<span>` when the\n   * `forceIconWrap` prop is enabled or the icon is not a valid React Element.\n   * If the `forceIconWrap` prop is not enabled, it will be cloned into the icon\n   * instead.\n   */\n  className?: string;\n\n  /**\n   * An optional icon to display with a text button. This is invalid for icon\n   * buttons. If this is a single element, a new class name will be cloned into\n   * the element to get correct spacing so if you have a custom icon element,\n   * you **must** also pass that class name down. If you are using one of the\n   * react-md icon component packages, this is handled automatically.\n   *\n   * If this is not a valid react element, the icon will be wrapped in a\n   * `<span>` instead with the class names applied.\n   */\n  icon?: ReactElement | ReactNode;\n\n  /**\n   * Boolean if the icon should appear after the text instead of before.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * The children to render before or after the provided icon. This is defaulted\n   * to `null` so that providing a `null` icon will correctly render without\n   * React crashing.\n   *\n   * @defaultValue `null`\n   */\n  children?: ReactNode;\n\n  /**\n   * The class name to use for an icon that is placed before text.\n   *\n   * @defaultValue `\"rmd-icon--before\"`\n   */\n  beforeClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed after text.\n   *\n   * @defaultValue `\"rmd-icon--after\"`\n   */\n  afterClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * disabled or omitted.\n   *\n   * @defaultValue `\"rmd-icon--above\"`\n   */\n  aboveClassName?: string;\n\n  /**\n   * The class name to use for an icon that is placed before above the text.\n   * This is used when the `stacked` prop is enabled and the `iconAfter` prop is\n   * enabled.\n   *\n   * @defaultValue `\"rmd-icon--below\"`\n   */\n  belowClassName?: string;\n\n  /**\n   * Boolean if the icon should be forced into a `<span>` with the class names\n   * applied instead of attempting to clone into the provided icon.\n   *\n   * @defaultValue `false`\n   */\n  forceIconWrap?: boolean;\n\n  /**\n   * Boolean if the icon and text should be stacked instead of inline. Note:\n   * You'll normally want to update the container element to have\n   * `display: flex` and `flex-direction: column` for this to work.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Boolean if the icon and content are in a `column-reverse` or `row-reverse`\n   * `flex-direction`. This will swap the different classnames as needed.\n   *\n   * @since 2.5.0\n   * @defaultValue `false`\n   */\n  flexReverse?: boolean;\n}\n\n/**\n * Note: This component **must** be rendered within a flex container unless the\n * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.\n *\n * @example Simple Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>}>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n *\n * @example Stacked Example\n * ```tsx\n * import { TextIconSpacing, FontIcon } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TextIconSpacing icon={<FontIcon>favorite</FontIcon>} stacked>\n *       Favorite\n *     </TextIconSpacing>\n *   );\n * }\n * ```\n */\nexport function TextIconSpacing(props: TextIconSpacingProps): ReactElement {\n  const {\n    className,\n    icon: propIcon,\n    children = null,\n    stacked = false,\n    iconAfter = false,\n    flexReverse = false,\n    forceIconWrap = false,\n    beforeClassName = \"rmd-icon--before\",\n    afterClassName = \"rmd-icon--after\",\n    aboveClassName = \"rmd-icon--above\",\n    belowClassName = \"rmd-icon--below\",\n  } = props;\n\n  if (!propIcon) {\n    return <>{children}</>;\n  }\n\n  const isAfter = flexReverse ? !iconAfter : iconAfter;\n  const baseClassName = cnb(\n    {\n      [beforeClassName]: !stacked && !isAfter,\n      [afterClassName]: !stacked && isAfter,\n      [aboveClassName]: stacked && !isAfter,\n      [belowClassName]: stacked && isAfter,\n    },\n    className\n  );\n\n  let iconEl = propIcon;\n  let content = children;\n  if (!forceIconWrap && isValidElement<{ className?: string }>(propIcon)) {\n    const icon = Children.only(propIcon);\n    iconEl = cloneElement(icon, {\n      className: cnb(baseClassName, icon.props.className),\n    });\n  } else if (propIcon) {\n    iconEl = (\n      <span className={cnb(\"rmd-text-icon-spacing\", baseClassName)}>\n        {propIcon}\n      </span>\n    );\n  }\n\n  if (iconEl) {\n    content = (\n      <>\n        {!iconAfter && iconEl}\n        {children}\n        {iconAfter && iconEl}\n      </>\n    );\n  }\n\n  return <>{content}</>;\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","TextIconSpacing","props","className","icon","propIcon","children","stacked","iconAfter","flexReverse","forceIconWrap","beforeClassName","afterClassName","aboveClassName","belowClassName","isAfter","baseClassName","iconEl","content","only","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,QAAQ,EACRC,YAAY,EACZC,cAAc,QAGT,QAAQ;AAkGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,SAAS,EACTC,MAAMC,QAAQ,EACdC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,gBAAgB,KAAK,EACrBC,kBAAkB,kBAAkB,EACpCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,iBAAiB,EACnC,GAAGZ;IAEJ,IAAI,CAACG,UAAU;QACb,qBAAO;sBAAGC;;IACZ;IAEA,MAAMS,UAAUN,cAAc,CAACD,YAAYA;IAC3C,MAAMQ,gBAAgBnB,IACpB;QACE,CAACc,gBAAgB,EAAE,CAACJ,WAAW,CAACQ;QAChC,CAACH,eAAe,EAAE,CAACL,WAAWQ;QAC9B,CAACF,eAAe,EAAEN,WAAW,CAACQ;QAC9B,CAACD,eAAe,EAAEP,WAAWQ;IAC/B,GACAZ;IAGF,IAAIc,SAASZ;IACb,IAAIa,UAAUZ;IACd,IAAI,CAACI,+BAAiBV,eAAuCK,WAAW;QACtE,MAAMD,OAAON,SAASqB,IAAI,CAACd;QAC3BY,uBAASlB,aAAaK,MAAM;YAC1BD,WAAWN,IAAImB,eAAeZ,KAAKF,KAAK,CAACC,SAAS;QACpD;IACF,OAAO,IAAIE,UAAU;QACnBY,uBACE,KAACG;YAAKjB,WAAWN,IAAI,yBAAyBmB;sBAC3CX;;IAGP;IAEA,IAAIY,QAAQ;QACVC,wBACE;;gBACG,CAACV,aAAaS;gBACdX;gBACAE,aAAaS;;;IAGpB;IAEA,qBAAO;kBAAGC;;AACZ"}