@react-md/core 6.3.4 → 6.4.0

package/dist/form/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.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 { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\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 = HTMLInputElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 = HTMLInputElement,\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 = HTMLInputElement,\n> extends TextFieldValidationOptions,\n    Required<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 = HTMLInputElement,\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/**\n * @since 6.3.0\n */\nexport interface TextFieldHookComponentOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> {\n  /**\n   * An optional id to use for the `TextField`, `Password`, or `TextArea` that\n   * is also used to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea`, or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * @since 6.3.0\n   */\n  form?: 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   * 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   * Set to `true` to prevent the state from automatically resetting with a\n   * form's `reset` event.\n   *\n   * @defaultValue `false`\n   * @since 6.3.0\n   */\n  disableReset?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\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 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends TextFieldValidationOptions,\n    TextFieldHookComponentOptions<E>,\n    TextFieldChangeHandlers<E> {\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 } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\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   * 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/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 = HTMLInputElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-Za-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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\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. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    form,\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    disableReset,\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\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          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  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  useFormReset({\n    form,\n    onReset: disableReset ? undefined : reset,\n    elementRef: fieldRef,\n  });\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","useFormReset","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","form","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","disableReset","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","isCounter","messageProps","length","children","onReset","elementRef"],"mappings":"AAAA;AAEA,SAMEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AAMpD,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAOEC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX,kBAAkB;AAEzB,MAAMC,OAAO;AACX,aAAa;AACf;AA0dA;;;;CAIC,GACD,OAAO,SAASC,aAEdC,OAAgC;IAChC,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAKC,OAAO,EACZC,IAAI,EACJC,IAAI,EACJC,eAAe,EAAE,EACjBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,SAASf,IAAI,EACbgB,WAAWhB,IAAI,EACfiB,YAAYjB,IAAI,EAChBkB,UAAU,KAAK,EACfC,QAAQ,EACRC,YAAY,EACZC,iBAAiB,aAAa,EAC9BC,iBAAiB,KAAK,EACtBC,mBAAmB,KAAK,EACxBC,WAAWC,aAAa,EACxBC,YAAY3B,gBAAgB,EAC5B4B,gBAAgB3B,IAAI,EACpB4B,eAAe/B,mBAAmB,EAClCgC,kBAAkB/B,sBAAsB,EACzC,GAAGI;IAEJ,MAAMC,KAAKT,aAAaU,QAAQ;IAChC,MAAM0B,YAAY,GAAG3B,GAAG,QAAQ,CAAC;IACjC,MAAM,CAAC4B,UAAU1B,IAAI,GAAGV,cAAcW;IACtC,MAAM,CAAC0B,OAAOC,SAAS,GAAGzC,SAA6B;QACrD,MAAM0C,QACJ,OAAOzB,iBAAiB,aAAaA,iBAAiBA;QAExD,OAAO;YACLyB;YACAC,OAAO;YACPC,cAAc;QAChB;IACF;IACA,MAAM,EAAEF,KAAK,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGJ;IAEvC,0EAA0E;IAC1E,kCAAkC;IAClC,MAAMK,QAAQ9C,OAAO;QACnBwC,SAASO,OAAO,EAAEC,kBAAkB;QACpCN,SAAS;YAAEC;YAAOC,OAAO;YAAOC,cAAc;QAAG;IACnD,GAAGE,OAAO;IAEV,MAAME,UAAUjD,OAAO4C;IACvB,MAAMM,gBAAgBnD,YACpB,CAACoD;QACC,MAAMC,QAAQZ,SAASO,OAAO;QAC9B,IAAI,CAACK,OAAO;YACV,MAAM,IAAIC,MAAM;QAClB;QAEA,uEAAuE;QACvE,2BAA2B;QAC3B,wBAAwB,GACxB,IAAIF,eAAenB,oBAAoB,OAAOT,cAAc,UAAU;YACpE6B,MAAM7B,SAAS,GAAGA;QACpB;QAEA,MAAM,EAAEoB,KAAK,EAAE,GAAGS;QAClBA,MAAMJ,iBAAiB,CAAC;QACxBI,MAAMF,aAAa;QAEnB,sEAAsE;QACtE,WAAW;QACX,wBAAwB,GACxB,IAAIlB,oBAAoB,OAAOT,cAAc,UAAU;YACrD6B,MAAME,eAAe,CAAC;QACxB;QAEA,MAAM3C,UAA+B;YACnCgC;YACAtB;YACAD;YACAE;YACAC;YACA4B;YACAhC;YACAW;YACAyB,UAAUH,MAAMG,QAAQ;YACxBC,mBAAmBJ,MAAMI,iBAAiB;QAC5C;QACA,MAAMX,eAAeP,gBAAgB3B;QACrC,MAAMiC,QAAQT,UAAU;YAAE,GAAGxB,OAAO;YAAEkC;QAAa;QAEnD,IAAII,QAAQF,OAAO,KAAKH,OAAO;YAC7BK,QAAQF,OAAO,GAAGH;YAClBR,cAAc;gBACZtB,KAAK0B;gBACLxB;gBACA4B;gBACAC;YACF;QACF;QAEA,wBAAwB,GACxB,IAAIA,iBAAiBO,MAAMI,iBAAiB,EAAE;YAC5CJ,MAAMJ,iBAAiB,CAACH;QAC1B;QAEAH,SAAS,CAACe;YACR,IACEA,UAAUd,KAAK,KAAKA,SACpBc,UAAUb,KAAK,KAAKA,SACpBa,UAAUZ,YAAY,KAAKA,cAC3B;gBACA,OAAOY;YACT;YAEA,OAAO;gBACLd;gBACAC;gBACAC;YACF;QACF;IACF,GACA;QACEb;QACAQ;QACAF;QACAH;QACAhB;QACAI;QACAD;QACAN;QACAoB;QACAf;QACAD;QACAU;KACD;IAGH,MAAMG,YAAY/B,QAAQ,SAASgC;IACnC,MAAMwB,aAEF;QACF9C;QACAE;QACAE;QACA2B;QACAC;QACAxB;QACAC;QACAC;QACAC,WAAWS,mBAAmB2B,YAAYpC;QAC1CqC,YAAYvB,aAAa;YACvBO;YACAX;YACAY;QACF;QACArB,QAAOqC,KAAK;YACVrC,OAAOqC;YACP,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAZ,cAAc;QAChB;QACAzB,UAASoC,KAAK;YACZpC,SAASoC;YACT,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEA,IAAIhC,mBAAmB,QAAQ;gBAC7B,MAAM,EAAEa,KAAK,EAAE,GAAGkB,MAAME,aAAa;gBACrCrB,SAAS,CAACe,YAAe,CAAA;wBACvB,GAAGA,SAAS;wBACZd;oBACF,CAAA;gBACA;YACF;YAEAO,cAAc;QAChB;QACAxB,WAAUmC,KAAK;YACbnC,UAAUmC;YACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,aAAa,KAAKC,SAASC,aAAa,EAC9C;gBACA;YACF;YAEA,qEAAqE;YACrE,mDAAmD;YACnD,wEAAwE;YACxE,0EAA0E;YAC1E,kCAAkC;YAClC,MAAM,EAAET,iBAAiB,EAAE,GAAGK,MAAME,aAAa;YAEjDrB,SAAS,CAACe;gBACR,IAAIA,UAAUb,KAAK,EAAE;oBACnB,OAAOa;gBACT;gBAEA,OAAO;oBACL,GAAGA,SAAS;oBACZb,OAAO;oBACPC,cAAcW;gBAChB;YACF;QACF;IACF;IAEA,MAAMU,YAAYvC,WAAW,OAAOJ,cAAc;IAClD,IAAI2C,aAAatC,YAAY,CAACG,gBAAgB;QAC5C2B,UAAU,CAAC,mBAAmB,GAAGnB;QACjCmB,WAAWS,YAAY,GAAG;YACxBvD,IAAI2B;YACJK;YACAwB,QAAQzC,UAAUgB,MAAMyB,MAAM,GAAGT;YACjCpC,WAAW,AAACI,WAAWJ,aAAcoC;YACrCU,UAAU,AAAC,CAACtC,kBAAkBc,gBAAiBjB;QACjD;IACF;IAEAvB,aAAa;QACXY;QACAqD,SAASzC,eAAe8B,YAAYb;QACpCyB,YAAY/B;IACd;IAEA,OAAO;QACL,GAAGC,KAAK;QACRK;QACAJ;QACAF;QACAkB;IACF;AACF"}
+{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.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 { useFormReset } from \"./useFormReset.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\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 = HTMLInputElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 = HTMLInputElement,\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\n    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 = HTMLInputElement,\n>\n  extends\n    TextFieldValidationOptions,\n    Required<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 = HTMLInputElement,\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/**\n * @since 6.3.0\n */\nexport interface TextFieldHookComponentOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> {\n  /**\n   * An optional id to use for the `TextField`, `Password`, or `TextArea` that\n   * is also used to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea`, or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * @since 6.3.0\n   */\n  form?: 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   * 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   * Set to `true` to prevent the state from automatically resetting with a\n   * form's `reset` event.\n   *\n   * @defaultValue `false`\n   * @since 6.3.0\n   */\n  disableReset?: boolean;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\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 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>\n  extends\n    TextFieldValidationOptions,\n    TextFieldHookComponentOptions<E>,\n    TextFieldChangeHandlers<E> {\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 } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\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   * 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/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 = HTMLInputElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 *\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-Za-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 } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\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 {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\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. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<\n  E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(options: TextFieldHookOptions<E>): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    form,\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    disableReset,\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\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          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  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  useFormReset({\n    form,\n    onReset: disableReset ? undefined : reset,\n    elementRef: fieldRef,\n  });\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","useFormReset","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","form","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","disableReset","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","isCounter","messageProps","length","children","onReset","elementRef"],"mappings":"AAAA;AAEA,SAMEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AAMpD,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAOEC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX,kBAAkB;AAEzB,MAAMC,OAAO;AACX,aAAa;AACf;AA+dA;;;;CAIC,GACD,OAAO,SAASC,aAEdC,OAAgC;IAChC,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAKC,OAAO,EACZC,IAAI,EACJC,IAAI,EACJC,eAAe,EAAE,EACjBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,SAASf,IAAI,EACbgB,WAAWhB,IAAI,EACfiB,YAAYjB,IAAI,EAChBkB,UAAU,KAAK,EACfC,QAAQ,EACRC,YAAY,EACZC,iBAAiB,aAAa,EAC9BC,iBAAiB,KAAK,EACtBC,mBAAmB,KAAK,EACxBC,WAAWC,aAAa,EACxBC,YAAY3B,gBAAgB,EAC5B4B,gBAAgB3B,IAAI,EACpB4B,eAAe/B,mBAAmB,EAClCgC,kBAAkB/B,sBAAsB,EACzC,GAAGI;IAEJ,MAAMC,KAAKT,aAAaU,QAAQ;IAChC,MAAM0B,YAAY,GAAG3B,GAAG,QAAQ,CAAC;IACjC,MAAM,CAAC4B,UAAU1B,IAAI,GAAGV,cAAcW;IACtC,MAAM,CAAC0B,OAAOC,SAAS,GAAGzC,SAA6B;QACrD,MAAM0C,QACJ,OAAOzB,iBAAiB,aAAaA,iBAAiBA;QAExD,OAAO;YACLyB;YACAC,OAAO;YACPC,cAAc;QAChB;IACF;IACA,MAAM,EAAEF,KAAK,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGJ;IAEvC,0EAA0E;IAC1E,kCAAkC;IAClC,MAAMK,QAAQ9C,OAAO;QACnBwC,SAASO,OAAO,EAAEC,kBAAkB;QACpCN,SAAS;YAAEC;YAAOC,OAAO;YAAOC,cAAc;QAAG;IACnD,GAAGE,OAAO;IAEV,MAAME,UAAUjD,OAAO4C;IACvB,MAAMM,gBAAgBnD,YACpB,CAACoD;QACC,MAAMC,QAAQZ,SAASO,OAAO;QAC9B,IAAI,CAACK,OAAO;YACV,MAAM,IAAIC,MAAM;QAClB;QAEA,uEAAuE;QACvE,2BAA2B;QAC3B,wBAAwB,GACxB,IAAIF,eAAenB,oBAAoB,OAAOT,cAAc,UAAU;YACpE6B,MAAM7B,SAAS,GAAGA;QACpB;QAEA,MAAM,EAAEoB,KAAK,EAAE,GAAGS;QAClBA,MAAMJ,iBAAiB,CAAC;QACxBI,MAAMF,aAAa;QAEnB,sEAAsE;QACtE,WAAW;QACX,wBAAwB,GACxB,IAAIlB,oBAAoB,OAAOT,cAAc,UAAU;YACrD6B,MAAME,eAAe,CAAC;QACxB;QAEA,MAAM3C,UAA+B;YACnCgC;YACAtB;YACAD;YACAE;YACAC;YACA4B;YACAhC;YACAW;YACAyB,UAAUH,MAAMG,QAAQ;YACxBC,mBAAmBJ,MAAMI,iBAAiB;QAC5C;QACA,MAAMX,eAAeP,gBAAgB3B;QACrC,MAAMiC,QAAQT,UAAU;YAAE,GAAGxB,OAAO;YAAEkC;QAAa;QAEnD,IAAII,QAAQF,OAAO,KAAKH,OAAO;YAC7BK,QAAQF,OAAO,GAAGH;YAClBR,cAAc;gBACZtB,KAAK0B;gBACLxB;gBACA4B;gBACAC;YACF;QACF;QAEA,wBAAwB,GACxB,IAAIA,iBAAiBO,MAAMI,iBAAiB,EAAE;YAC5CJ,MAAMJ,iBAAiB,CAACH;QAC1B;QAEAH,SAAS,CAACe;YACR,IACEA,UAAUd,KAAK,KAAKA,SACpBc,UAAUb,KAAK,KAAKA,SACpBa,UAAUZ,YAAY,KAAKA,cAC3B;gBACA,OAAOY;YACT;YAEA,OAAO;gBACLd;gBACAC;gBACAC;YACF;QACF;IACF,GACA;QACEb;QACAQ;QACAF;QACAH;QACAhB;QACAI;QACAD;QACAN;QACAoB;QACAf;QACAD;QACAU;KACD;IAGH,MAAMG,YAAY/B,QAAQ,SAASgC;IACnC,MAAMwB,aAEF;QACF9C;QACAE;QACAE;QACA2B;QACAC;QACAxB;QACAC;QACAC;QACAC,WAAWS,mBAAmB2B,YAAYpC;QAC1CqC,YAAYvB,aAAa;YACvBO;YACAX;YACAY;QACF;QACArB,QAAOqC,KAAK;YACVrC,OAAOqC;YACP,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEAZ,cAAc;QAChB;QACAzB,UAASoC,KAAK;YACZpC,SAASoC;YACT,IAAIA,MAAMC,oBAAoB,IAAI;gBAChC;YACF;YAEA,IAAIhC,mBAAmB,QAAQ;gBAC7B,MAAM,EAAEa,KAAK,EAAE,GAAGkB,MAAME,aAAa;gBACrCrB,SAAS,CAACe,YAAe,CAAA;wBACvB,GAAGA,SAAS;wBACZd;oBACF,CAAA;gBACA;YACF;YAEAO,cAAc;QAChB;QACAxB,WAAUmC,KAAK;YACbnC,UAAUmC;YACV,IACEA,MAAMC,oBAAoB,MAC1BD,MAAME,aAAa,KAAKC,SAASC,aAAa,EAC9C;gBACA;YACF;YAEA,qEAAqE;YACrE,mDAAmD;YACnD,wEAAwE;YACxE,0EAA0E;YAC1E,kCAAkC;YAClC,MAAM,EAAET,iBAAiB,EAAE,GAAGK,MAAME,aAAa;YAEjDrB,SAAS,CAACe;gBACR,IAAIA,UAAUb,KAAK,EAAE;oBACnB,OAAOa;gBACT;gBAEA,OAAO;oBACL,GAAGA,SAAS;oBACZb,OAAO;oBACPC,cAAcW;gBAChB;YACF;QACF;IACF;IAEA,MAAMU,YAAYvC,WAAW,OAAOJ,cAAc;IAClD,IAAI2C,aAAatC,YAAY,CAACG,gBAAgB;QAC5C2B,UAAU,CAAC,mBAAmB,GAAGnB;QACjCmB,WAAWS,YAAY,GAAG;YACxBvD,IAAI2B;YACJK;YACAwB,QAAQzC,UAAUgB,MAAMyB,MAAM,GAAGT;YACjCpC,WAAW,AAACI,WAAWJ,aAAcoC;YACrCU,UAAU,AAAC,CAACtC,kBAAkBc,gBAAiBjB;QACjD;IACF;IAEAvB,aAAa;QACXY;QACAqD,SAASzC,eAAe8B,YAAYb;QACpCyB,YAAY/B;IACd;IAEA,OAAO;QACL,GAAGC,KAAK;QACRK;QACAJ;QACAF;QACAkB;IACF;AACF"}

package/dist/hoverMode/useHoverMode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport {\n  type SimpleHoverModeContext,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type useHoverModeProvider,\n} 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 * The `useHoverMode` hook is used to implement an immediate hover state after\n * hovering related elements for a short duration. The main use-case is for\n * showing tooltips immediately after hovering another tooltipped element.\n *\n * This relies on creating a context provider using {@link useHoverModeProvider}\n * to link related elements together.\n *\n * @example Example Usage\n * ```ts\n * import { type MouseEvent } from \"react\";\n *\n * import {\n *   type CustomHoverContext,\n *   useCustomHoverContext,\n * } from \"./useCustomHoverContext.jsx\";\n *\n * interface CustomHoverModeImplementation {\n *   onMouseEnter: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n *   onMouseLeave: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n * }\n *\n * function useCustomHoverMode(): CustomHoverModeImplementation {\n *   const {\n *     animatedOnceRef,\n *     hoverTimeoutRef,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   } = useCustomHoverContext();\n *   const {\n *     visible,\n *     setVisible,\n *     startShowFlow,\n *     startHideFlow,\n *     clearVisibilityTimeout,\n *   } = useHoverMode({\n *     hoverTimeout,\n *     hoverTimeoutRef,\n *     leaveTimeout,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   });\n *\n *   return {\n *     onMouseEnter(event) {\n *       startShowFlow(event.currentTarget.id);\n *     },\n *     onMouseLeave(event) {\n *       startHideFlow();\n *     },\n *   };\n * }\n * ```\n *\n * @see The `useTooltip` source code for a real world example.\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,SAEEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAgJf,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\";\n\nimport {\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport {\n  type SimpleHoverModeContext,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type useHoverModeProvider,\n} 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 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 extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HoverModeImplementation extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * The `useHoverMode` hook is used to implement an immediate hover state after\n * hovering related elements for a short duration. The main use-case is for\n * showing tooltips immediately after hovering another tooltipped element.\n *\n * This relies on creating a context provider using {@link useHoverModeProvider}\n * to link related elements together.\n *\n * @example Example Usage\n * ```ts\n * import { type MouseEvent } from \"react\";\n *\n * import {\n *   type CustomHoverContext,\n *   useCustomHoverContext,\n * } from \"./useCustomHoverContext.jsx\";\n *\n * interface CustomHoverModeImplementation {\n *   onMouseEnter: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n *   onMouseLeave: <E extends HTMLElement>(event: MouseEvent<E>) => void;\n * }\n *\n * function useCustomHoverMode(): CustomHoverModeImplementation {\n *   const {\n *     animatedOnceRef,\n *     hoverTimeoutRef,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   } = useCustomHoverContext();\n *   const {\n *     visible,\n *     setVisible,\n *     startShowFlow,\n *     startHideFlow,\n *     clearVisibilityTimeout,\n *   } = useHoverMode({\n *     hoverTimeout,\n *     hoverTimeoutRef,\n *     leaveTimeout,\n *     leaveTimeoutRef,\n *     enableHoverMode,\n *     disableHoverMode,\n *     startDisableTimer,\n *     clearDisableTimer,\n *   });\n *\n *   return {\n *     onMouseEnter(event) {\n *       startShowFlow(event.currentTarget.id);\n *     },\n *     onMouseLeave(event) {\n *       startHideFlow();\n *     },\n *   };\n * }\n * ```\n *\n * @see The `useTooltip` source code for a real world example.\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,SAEEA,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AA4If,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/icon/FontIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } 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. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\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 * @see {@link https://react-md.dev/components/icon | Icon Demos}\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,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAwCC,IAAI,QAAQ,cAAc;AAuBlE;;;;;;;;CAQC,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  type AriaAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type FontIconClassNameOptions, icon } 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>, 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. For example:\n   *\n   * ```tsx\n   * <FontIcon>clear</FontIcon>\n   * ```\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 * @see {@link https://react-md.dev/components/icon | Icon Demos}\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,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAwCC,IAAI,QAAQ,cAAc;AAsBlE;;;;;;;;CAQC,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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/IconRotator.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport { type IconRotatorClassNameOptions, iconRotator } 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 *\n * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}\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,SAEEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAEf,SAA2CC,WAAW,QAAQ,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  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport { type IconRotatorClassNameOptions, iconRotator } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Removed `animate` prop and added `disableTransition`\n */\nexport interface IconRotatorBaseProps\n  extends HTMLAttributes<HTMLSpanElement>, 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 *\n * @see {@link https://react-md.dev/components/icon-rotator | IconRotator Demos}\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,SAEEC,QAAQ,EAGRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAEf,SAA2CC,WAAW,QAAQ,cAAc;AAgC5E;;;;;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"}

package/dist/icon/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { type MaterialIconClassNameOptions, icon } 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 * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\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,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAA4CC,IAAI,QAAQ,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 { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialIconFamily, type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { type MaterialIconClassNameOptions, icon } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport interface MaterialIconProps\n  extends\n    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 * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\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,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAA4CC,IAAI,QAAQ,cAAc;AAoBtE;;;;;;;;;;;;;;;;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"}

package/dist/icon/MaterialSymbol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n  getFontVariationSettings,\n} from \"./materialConfig.js\";\nimport { type MaterialSymbolClassNameOptions, icon } 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/icon/MaterialSymbol\";\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 * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\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,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAMEC,wBAAwB,QACnB,sBAAsB;AAC7B,SAA8CC,IAAI,QAAQ,cAAc;AAwBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,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 { type AriaAttributes, type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n  getFontVariationSettings,\n} from \"./materialConfig.js\";\nimport { type MaterialSymbolClassNameOptions, icon } 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\n    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/icon/MaterialSymbol\";\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 * @see {@link https://react-md.dev/components/icon | Icon Demos}\n * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}\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,SAAmDA,UAAU,QAAQ,QAAQ;AAG7E,SAMEC,wBAAwB,QACnB,sBAAsB;AAC7B,SAA8CC,IAAI,QAAQ,cAAc;AAyBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type SVGIconClassNameOptions, icon } 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 *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\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,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAuCC,IAAI,QAAQ,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 { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type SVGIconClassNameOptions, icon } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added the `inline` and `theme` props.\n */\nexport interface SVGIconProps\n  extends HTMLAttributes<SVGSVGElement>, 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 *\n * @see {@link https://react-md.dev/components/icon | Icon Demos}\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,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAAuCC,IAAI,QAAQ,cAAc;AAwEjE;;;;;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"}

package/dist/icon/config.d.ts

@@ -189,7 +189,6 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * ICON_CONFIG.upload = <FileUploadIcon />;
  * ```
  *
- *
  * @since 6.0.0
  */
 export declare const ICON_CONFIG: ConfiguredIcons;

package/dist/icon/config.js

@@ -50,7 +50,6 @@ import { FontIcon } from "./FontIcon.js";
  * ICON_CONFIG.upload = <FileUploadIcon />;
  * ```
  *
- *
  * @since 6.0.0
  */ export const ICON_CONFIG = {
     back: /*#__PURE__*/ _jsx(FontIcon, {
@@ -161,12 +160,16 @@ import { FontIcon } from "./FontIcon.js";
  *
  * @since 6.0.0
  */ export function configureIcons(overrides) {
-    Object.entries(overrides).forEach(([name, value])=>{
-        if (process.env.NODE_ENV !== "production" && !(name in ICON_CONFIG)) {
-            throw new Error(`${name} is an invalid react-md icon name.`);
-        }
-        ICON_CONFIG[name] = value;
-    });
+    if (process.env.NODE_ENV !== "production") {
+        Object.entries(overrides).forEach(([name, value])=>{
+            if (!(name in ICON_CONFIG)) {
+                throw new Error(`${name} is an invalid react-md icon name.`);
+            }
+            ICON_CONFIG[name] = value;
+        });
+    } else {
+        Object.assign(ICON_CONFIG, overrides);
+    }
 }
 /**
  * This is mostly an internal helper to get a specific icon by name and allowing

package/dist/icon/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/config.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport { FontIcon } from \"./FontIcon.js\";\n\n/**\n * @since 5.0.0 The `download` icon has been renamed to `upload`.\n */\nexport interface ConfigurableIcons {\n  /**\n   * The icon for navigating backwards or closing an item to the left.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_left</FontIcon>`\n   */\n  back?: ReactNode;\n\n  /**\n   * The icon to use when clearing content from a text field.\n   *\n   * @defaultValue `<FontIcon>clear</FontIcon>`\n   * @since 6.0.0\n   */\n  clear?: ReactNode;\n\n  /**\n   * @defaultValue `<FontIcon>close</FontIcon>`\n   *\n   * @since 6.0.0\n   */\n  close?: ReactNode;\n\n  /**\n   * The icon to use for unchecked checkboxes.\n   *\n   * @defaultValue `<FontIcon>check_box_outline_blank</FontIcon>`\n   * @since 6.0.0 This icon now represents the unchecked state for\n   * checkboxes.\n   */\n  checkbox?: ReactNode;\n\n  /**\n   * The icon to use for checked checkboxes.\n   *\n   * @defaultValue `<FontIcon>check_box</FontIcon>`\n   * @since 6.0.0\n   */\n  checkboxChecked?: ReactNode;\n\n  /**\n   * The icon to use for indeterminate checkboxes.\n   *\n   * @defaultValue `<FontIcon>indeterminate_check_box</FontIcon>`\n   * @since 6.0.0\n   */\n  checkboxIndeterminate?: ReactNode;\n\n  /**\n   * The icon to use for dropdown menus or content that expands vertically in a\n   * new material instead of inline like the `expander` icon.\n   *\n   * @defaultValue `<FontIcon>arrow_drop_down</FontIcon>`\n   */\n  dropdown?: ReactNode;\n\n  /**\n   * The icon to use when there are form errors.\n   *\n   * @since 2.5.0\n   * @defaultValue `<FontIcon>error_outline</FontIcon>`\n   */\n  error?: ReactNode;\n\n  /**\n   * The icon to use for expanding content vertically.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_down</FontIcon>`\n   */\n  expander?: ReactNode;\n\n  /**\n   * The icon for navigating forwards or closing an item to the right. This is\n   * also used internally for nested dropdown menus.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_right</FontIcon>`\n   */\n  forward?: ReactNode;\n\n  /**\n   * The general to use for displaying a main navigation menu (usually a\n   * hamburger menu).\n   *\n   * @defaultValue `<FontIcon>menu</FontIcon>`\n   */\n  menu?: ReactNode;\n\n  /**\n   * The icon for displaying notifications. This is used internally in the\n   * `BadgedButton` in the `@react-md/badge` package.\n   *\n   * @defaultValue `<FontIcon>notifications</FontIcon>`\n   */\n  notification?: ReactNode;\n\n  /**\n   * The icon for temporarily displaying a password's field value as plain text.\n   *\n   * @defaultValue `<FontIcon>remove_red_eye</FontIcon>`\n   */\n  password?: ReactNode;\n\n  /**\n   * The icon to use for unchecked radio buttons.\n   *\n   * @defaultValue `<FontIcon>radio_button_unchecked</FontIcon>`\n   * @since 6.0.0 This icon now represents the unchecked state for\n   * radios.\n   */\n  radio?: ReactNode;\n\n  /**\n   * The icon to use for checked radio buttons.\n   *\n   * @defaultValue `<FontIcon>radio_button_checked</FontIcon>`\n   */\n  radioChecked?: ReactNode;\n\n  /**\n   * The icon to use when removing elements.\n   *\n   * @defaultValue `<FontIcon>cancel</FontIcon>`\n   */\n  remove?: ReactNode;\n\n  /**\n   * The icon to use for showing that something has been selected that is not a\n   * radio or checkbox. This is used internally for the `Chip` in the\n   * `@react-md/core` package.\n   *\n   * @defaultValue `<FontIcon>check</FontIcon>`\n   */\n  selected?: ReactNode;\n\n  /**\n   * The icon to represent sorting content.\n   *\n   * @defaultValue `<FontIcon>arrow_upward</FontIcon>`\n   */\n  sort?: ReactNode;\n\n  /**\n   * The icon to use for the `FileInput` component (normally file\n   * uploads).\n   *\n   * @since 5.0.0\n   * @defaultValue `<FontIcon>file_upload</FontIcon>`\n   */\n  upload?: ReactNode;\n}\n\nexport type ConfiguredIcons = Required<ConfigurableIcons>;\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableIconName = keyof ConfigurableIcons;\n\n/**\n * This is a **mutable** object of icons that `react-md` will use for rendering\n * icons within components. The defaults will use the font versions of material\n * icons.\n *\n * @see {@link configureIcons} for a quick way of overriding the configuration\n * or the example below.\n *\n * @example Mutating this object\n * ```tsx\n * import { ICON_CONFIG } from \"@react-md/core/icon/config\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * ICON_CONFIG.back = <KeyboardArrowLeftIcon />;\n * ICON_CONFIG.close = <CloseIcon />;\n * ICON_CONFIG.checkbox = <CheckBoxOutlineBlankIcon />;\n * ICON_CONFIG.checkboxChecked = <CheckBoxIcon />;\n * ICON_CONFIG.checkboxIndeterminate = <IndeterminateCheckBoxIcon />;\n * ICON_CONFIG.dropdown = <ArrowDropDownIcon />;\n * ICON_CONFIG.error = <ErrorOutlineIcon />;\n * ICON_CONFIG.expander = <KeyboardArrowDownIcon />;\n * ICON_CONFIG.forward = <KeyboardArrowRightIcon />;\n * ICON_CONFIG.menu = <MenuIcon />;\n * ICON_CONFIG.notification = <NotificationsIcon />;\n * ICON_CONFIG.password = <RemoveRedEyeIcon />;\n * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;\n * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;\n * ICON_CONFIG.remove = <CancelIcon />;\n * ICON_CONFIG.selected = <CheckIcon />;\n * ICON_CONFIG.sort = <ArrowUpwardIcon />;\n * ICON_CONFIG.upload = <FileUploadIcon />;\n * ```\n *\n *\n * @since 6.0.0\n */\nexport const ICON_CONFIG: ConfiguredIcons = {\n  back: <FontIcon>keyboard_arrow_left</FontIcon>,\n  clear: <FontIcon>clear</FontIcon>,\n  close: <FontIcon>close</FontIcon>,\n  checkbox: <FontIcon>check_box_outline_blank</FontIcon>,\n  checkboxChecked: <FontIcon>check_box</FontIcon>,\n  checkboxIndeterminate: <FontIcon>indeterminate_check_box</FontIcon>,\n  dropdown: <FontIcon>arrow_drop_down</FontIcon>,\n  error: <FontIcon>error_outline</FontIcon>,\n  expander: <FontIcon>keyboard_arrow_down</FontIcon>,\n  forward: <FontIcon>keyboard_arrow_right</FontIcon>,\n  menu: <FontIcon>menu</FontIcon>,\n  notification: <FontIcon>notifications</FontIcon>,\n  password: <FontIcon>remove_red_eye</FontIcon>,\n  radio: <FontIcon>radio_button_unchecked</FontIcon>,\n  radioChecked: <FontIcon>radio_button_checked</FontIcon>,\n  remove: <FontIcon>cancel</FontIcon>,\n  selected: <FontIcon>check</FontIcon>,\n  sort: <FontIcon>arrow_upward</FontIcon>,\n  upload: <FontIcon>file_upload</FontIcon>,\n};\n\n/**\n * A convenience helper to reconfigure icons within `react-md`.\n *\n * @example Using SVG Material Icons\n * ```tsx\n * \"use client\";\n * import { configureIcons } from \"@react-md/core/icon/config\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * configureIcons({\n *   back: <KeyboardArrowLeftIcon />,\n *   close: <CloseIcon />,\n *   checkbox: <CheckBoxOutlineBlankIcon />,\n *   checkboxChecked: <CheckBoxIcon />,\n *   checkboxIndeterminate: <IndeterminateCheckBoxIcon />,\n *   dropdown: <ArrowDropDownIcon />,\n *   error: <ErrorOutlineIcon />,\n *   expander: <KeyboardArrowDownIcon />,\n *   forward: <KeyboardArrowRightIcon />,\n *   menu: <MenuIcon />,\n *   notification: <NotificationsIcon />,\n *   password: <RemoveRedEyeIcon />,\n *   radio: <RadioButtonUncheckedIcon />,\n *   radioChecked: <RadioButtonCheckedIcon />,\n *   remove: <CancelIcon />,\n *   selected: <CheckIcon />,\n *   sort: <ArrowUpwardIcon />,\n *   upload: <FileUploadIcon />,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function configureIcons(overrides: ConfiguredIcons): void {\n  Object.entries(overrides).forEach(([name, value]) => {\n    if (process.env.NODE_ENV !== \"production\" && !(name in ICON_CONFIG)) {\n      throw new Error(`${name} is an invalid react-md icon name.`);\n    }\n\n    ICON_CONFIG[name as keyof ConfiguredIcons] = value;\n  });\n}\n\n/**\n * This is mostly an internal helper to get a specific icon by name and allowing\n * a custom prop to override this behavior. The main benefit of this function is\n * that icons can be removed if the override is set to `null`.\n *\n * @since 6.0.0\n */\nexport function getIcon(\n  name: ConfigurableIconName,\n  override?: ReactNode\n): ReactNode {\n  if (typeof override !== \"undefined\") {\n    return override;\n  }\n\n  return ICON_CONFIG[name];\n}\n"],"names":["FontIcon","ICON_CONFIG","back","clear","close","checkbox","checkboxChecked","checkboxIndeterminate","dropdown","error","expander","forward","menu","notification","password","radio","radioChecked","remove","selected","sort","upload","configureIcons","overrides","Object","entries","forEach","name","value","process","env","NODE_ENV","Error","getIcon","override"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAmKzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDC,GACD,OAAO,MAAMC,cAA+B;IAC1CC,oBAAM,KAACF;kBAAS;;IAChBG,qBAAO,KAACH;kBAAS;;IACjBI,qBAAO,KAACJ;kBAAS;;IACjBK,wBAAU,KAACL;kBAAS;;IACpBM,+BAAiB,KAACN;kBAAS;;IAC3BO,qCAAuB,KAACP;kBAAS;;IACjCQ,wBAAU,KAACR;kBAAS;;IACpBS,qBAAO,KAACT;kBAAS;;IACjBU,wBAAU,KAACV;kBAAS;;IACpBW,uBAAS,KAACX;kBAAS;;IACnBY,oBAAM,KAACZ;kBAAS;;IAChBa,4BAAc,KAACb;kBAAS;;IACxBc,wBAAU,KAACd;kBAAS;;IACpBe,qBAAO,KAACf;kBAAS;;IACjBgB,4BAAc,KAAChB;kBAAS;;IACxBiB,sBAAQ,KAACjB;kBAAS;;IAClBkB,wBAAU,KAAClB;kBAAS;;IACpBmB,oBAAM,KAACnB;kBAAS;;IAChBoB,sBAAQ,KAACpB;kBAAS;;AACpB,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASqB,eAAeC,SAA0B;IACvDC,OAAOC,OAAO,CAACF,WAAWG,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;QAC9C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAAEJ,CAAAA,QAAQzB,WAAU,GAAI;YACnE,MAAM,IAAI8B,MAAM,GAAGL,KAAK,kCAAkC,CAAC;QAC7D;QAEAzB,WAAW,CAACyB,KAA8B,GAAGC;IAC/C;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASK,QACdN,IAA0B,EAC1BO,QAAoB;IAEpB,IAAI,OAAOA,aAAa,aAAa;QACnC,OAAOA;IACT;IAEA,OAAOhC,WAAW,CAACyB,KAAK;AAC1B"}
+{"version":3,"sources":["../../src/icon/config.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport { FontIcon } from \"./FontIcon.js\";\n\n/**\n * @since 5.0.0 The `download` icon has been renamed to `upload`.\n */\nexport interface ConfigurableIcons {\n  /**\n   * The icon for navigating backwards or closing an item to the left.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_left</FontIcon>`\n   */\n  back?: ReactNode;\n\n  /**\n   * The icon to use when clearing content from a text field.\n   *\n   * @defaultValue `<FontIcon>clear</FontIcon>`\n   * @since 6.0.0\n   */\n  clear?: ReactNode;\n\n  /**\n   * @defaultValue `<FontIcon>close</FontIcon>`\n   *\n   * @since 6.0.0\n   */\n  close?: ReactNode;\n\n  /**\n   * The icon to use for unchecked checkboxes.\n   *\n   * @defaultValue `<FontIcon>check_box_outline_blank</FontIcon>`\n   * @since 6.0.0 This icon now represents the unchecked state for\n   * checkboxes.\n   */\n  checkbox?: ReactNode;\n\n  /**\n   * The icon to use for checked checkboxes.\n   *\n   * @defaultValue `<FontIcon>check_box</FontIcon>`\n   * @since 6.0.0\n   */\n  checkboxChecked?: ReactNode;\n\n  /**\n   * The icon to use for indeterminate checkboxes.\n   *\n   * @defaultValue `<FontIcon>indeterminate_check_box</FontIcon>`\n   * @since 6.0.0\n   */\n  checkboxIndeterminate?: ReactNode;\n\n  /**\n   * The icon to use for dropdown menus or content that expands vertically in a\n   * new material instead of inline like the `expander` icon.\n   *\n   * @defaultValue `<FontIcon>arrow_drop_down</FontIcon>`\n   */\n  dropdown?: ReactNode;\n\n  /**\n   * The icon to use when there are form errors.\n   *\n   * @since 2.5.0\n   * @defaultValue `<FontIcon>error_outline</FontIcon>`\n   */\n  error?: ReactNode;\n\n  /**\n   * The icon to use for expanding content vertically.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_down</FontIcon>`\n   */\n  expander?: ReactNode;\n\n  /**\n   * The icon for navigating forwards or closing an item to the right. This is\n   * also used internally for nested dropdown menus.\n   *\n   * @defaultValue `<FontIcon>keyboard_arrow_right</FontIcon>`\n   */\n  forward?: ReactNode;\n\n  /**\n   * The general to use for displaying a main navigation menu (usually a\n   * hamburger menu).\n   *\n   * @defaultValue `<FontIcon>menu</FontIcon>`\n   */\n  menu?: ReactNode;\n\n  /**\n   * The icon for displaying notifications. This is used internally in the\n   * `BadgedButton` in the `@react-md/badge` package.\n   *\n   * @defaultValue `<FontIcon>notifications</FontIcon>`\n   */\n  notification?: ReactNode;\n\n  /**\n   * The icon for temporarily displaying a password's field value as plain text.\n   *\n   * @defaultValue `<FontIcon>remove_red_eye</FontIcon>`\n   */\n  password?: ReactNode;\n\n  /**\n   * The icon to use for unchecked radio buttons.\n   *\n   * @defaultValue `<FontIcon>radio_button_unchecked</FontIcon>`\n   * @since 6.0.0 This icon now represents the unchecked state for\n   * radios.\n   */\n  radio?: ReactNode;\n\n  /**\n   * The icon to use for checked radio buttons.\n   *\n   * @defaultValue `<FontIcon>radio_button_checked</FontIcon>`\n   */\n  radioChecked?: ReactNode;\n\n  /**\n   * The icon to use when removing elements.\n   *\n   * @defaultValue `<FontIcon>cancel</FontIcon>`\n   */\n  remove?: ReactNode;\n\n  /**\n   * The icon to use for showing that something has been selected that is not a\n   * radio or checkbox. This is used internally for the `Chip` in the\n   * `@react-md/core` package.\n   *\n   * @defaultValue `<FontIcon>check</FontIcon>`\n   */\n  selected?: ReactNode;\n\n  /**\n   * The icon to represent sorting content.\n   *\n   * @defaultValue `<FontIcon>arrow_upward</FontIcon>`\n   */\n  sort?: ReactNode;\n\n  /**\n   * The icon to use for the `FileInput` component (normally file\n   * uploads).\n   *\n   * @since 5.0.0\n   * @defaultValue `<FontIcon>file_upload</FontIcon>`\n   */\n  upload?: ReactNode;\n}\n\nexport type ConfiguredIcons = Required<ConfigurableIcons>;\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableIconName = keyof ConfigurableIcons;\n\n/**\n * This is a **mutable** object of icons that `react-md` will use for rendering\n * icons within components. The defaults will use the font versions of material\n * icons.\n *\n * @see {@link configureIcons} for a quick way of overriding the configuration\n * or the example below.\n *\n * @example Mutating this object\n * ```tsx\n * import { ICON_CONFIG } from \"@react-md/core/icon/config\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * ICON_CONFIG.back = <KeyboardArrowLeftIcon />;\n * ICON_CONFIG.close = <CloseIcon />;\n * ICON_CONFIG.checkbox = <CheckBoxOutlineBlankIcon />;\n * ICON_CONFIG.checkboxChecked = <CheckBoxIcon />;\n * ICON_CONFIG.checkboxIndeterminate = <IndeterminateCheckBoxIcon />;\n * ICON_CONFIG.dropdown = <ArrowDropDownIcon />;\n * ICON_CONFIG.error = <ErrorOutlineIcon />;\n * ICON_CONFIG.expander = <KeyboardArrowDownIcon />;\n * ICON_CONFIG.forward = <KeyboardArrowRightIcon />;\n * ICON_CONFIG.menu = <MenuIcon />;\n * ICON_CONFIG.notification = <NotificationsIcon />;\n * ICON_CONFIG.password = <RemoveRedEyeIcon />;\n * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;\n * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;\n * ICON_CONFIG.remove = <CancelIcon />;\n * ICON_CONFIG.selected = <CheckIcon />;\n * ICON_CONFIG.sort = <ArrowUpwardIcon />;\n * ICON_CONFIG.upload = <FileUploadIcon />;\n * ```\n *\n * @since 6.0.0\n */\nexport const ICON_CONFIG: ConfiguredIcons = {\n  back: <FontIcon>keyboard_arrow_left</FontIcon>,\n  clear: <FontIcon>clear</FontIcon>,\n  close: <FontIcon>close</FontIcon>,\n  checkbox: <FontIcon>check_box_outline_blank</FontIcon>,\n  checkboxChecked: <FontIcon>check_box</FontIcon>,\n  checkboxIndeterminate: <FontIcon>indeterminate_check_box</FontIcon>,\n  dropdown: <FontIcon>arrow_drop_down</FontIcon>,\n  error: <FontIcon>error_outline</FontIcon>,\n  expander: <FontIcon>keyboard_arrow_down</FontIcon>,\n  forward: <FontIcon>keyboard_arrow_right</FontIcon>,\n  menu: <FontIcon>menu</FontIcon>,\n  notification: <FontIcon>notifications</FontIcon>,\n  password: <FontIcon>remove_red_eye</FontIcon>,\n  radio: <FontIcon>radio_button_unchecked</FontIcon>,\n  radioChecked: <FontIcon>radio_button_checked</FontIcon>,\n  remove: <FontIcon>cancel</FontIcon>,\n  selected: <FontIcon>check</FontIcon>,\n  sort: <FontIcon>arrow_upward</FontIcon>,\n  upload: <FontIcon>file_upload</FontIcon>,\n};\n\n/**\n * A convenience helper to reconfigure icons within `react-md`.\n *\n * @example Using SVG Material Icons\n * ```tsx\n * \"use client\";\n * import { configureIcons } from \"@react-md/core/icon/config\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * configureIcons({\n *   back: <KeyboardArrowLeftIcon />,\n *   close: <CloseIcon />,\n *   checkbox: <CheckBoxOutlineBlankIcon />,\n *   checkboxChecked: <CheckBoxIcon />,\n *   checkboxIndeterminate: <IndeterminateCheckBoxIcon />,\n *   dropdown: <ArrowDropDownIcon />,\n *   error: <ErrorOutlineIcon />,\n *   expander: <KeyboardArrowDownIcon />,\n *   forward: <KeyboardArrowRightIcon />,\n *   menu: <MenuIcon />,\n *   notification: <NotificationsIcon />,\n *   password: <RemoveRedEyeIcon />,\n *   radio: <RadioButtonUncheckedIcon />,\n *   radioChecked: <RadioButtonCheckedIcon />,\n *   remove: <CancelIcon />,\n *   selected: <CheckIcon />,\n *   sort: <ArrowUpwardIcon />,\n *   upload: <FileUploadIcon />,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function configureIcons(overrides: ConfiguredIcons): void {\n  if (process.env.NODE_ENV !== \"production\") {\n    Object.entries(overrides).forEach(([name, value]) => {\n      if (!(name in ICON_CONFIG)) {\n        throw new Error(`${name} is an invalid react-md icon name.`);\n      }\n\n      ICON_CONFIG[name as keyof ConfiguredIcons] = value;\n    });\n  } else {\n    Object.assign(ICON_CONFIG, overrides);\n  }\n}\n\n/**\n * This is mostly an internal helper to get a specific icon by name and allowing\n * a custom prop to override this behavior. The main benefit of this function is\n * that icons can be removed if the override is set to `null`.\n *\n * @since 6.0.0\n */\nexport function getIcon(\n  name: ConfigurableIconName,\n  override?: ReactNode\n): ReactNode {\n  if (typeof override !== \"undefined\") {\n    return override;\n  }\n\n  return ICON_CONFIG[name];\n}\n"],"names":["FontIcon","ICON_CONFIG","back","clear","close","checkbox","checkboxChecked","checkboxIndeterminate","dropdown","error","expander","forward","menu","notification","password","radio","radioChecked","remove","selected","sort","upload","configureIcons","overrides","process","env","NODE_ENV","Object","entries","forEach","name","value","Error","assign","getIcon","override"],"mappings":";AAEA,SAASA,QAAQ,QAAQ,gBAAgB;AAmKzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDC,GACD,OAAO,MAAMC,cAA+B;IAC1CC,oBAAM,KAACF;kBAAS;;IAChBG,qBAAO,KAACH;kBAAS;;IACjBI,qBAAO,KAACJ;kBAAS;;IACjBK,wBAAU,KAACL;kBAAS;;IACpBM,+BAAiB,KAACN;kBAAS;;IAC3BO,qCAAuB,KAACP;kBAAS;;IACjCQ,wBAAU,KAACR;kBAAS;;IACpBS,qBAAO,KAACT;kBAAS;;IACjBU,wBAAU,KAACV;kBAAS;;IACpBW,uBAAS,KAACX;kBAAS;;IACnBY,oBAAM,KAACZ;kBAAS;;IAChBa,4BAAc,KAACb;kBAAS;;IACxBc,wBAAU,KAACd;kBAAS;;IACpBe,qBAAO,KAACf;kBAAS;;IACjBgB,4BAAc,KAAChB;kBAAS;;IACxBiB,sBAAQ,KAACjB;kBAAS;;IAClBkB,wBAAU,KAAClB;kBAAS;;IACpBmB,oBAAM,KAACnB;kBAAS;;IAChBoB,sBAAQ,KAACpB;kBAAS;;AACpB,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASqB,eAAeC,SAA0B;IACvD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzCC,OAAOC,OAAO,CAACL,WAAWM,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YAC9C,IAAI,CAAED,CAAAA,QAAQ5B,WAAU,GAAI;gBAC1B,MAAM,IAAI8B,MAAM,GAAGF,KAAK,kCAAkC,CAAC;YAC7D;YAEA5B,WAAW,CAAC4B,KAA8B,GAAGC;QAC/C;IACF,OAAO;QACLJ,OAAOM,MAAM,CAAC/B,aAAaqB;IAC7B;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASW,QACdJ,IAA0B,EAC1BK,QAAoB;IAEpB,IAAI,OAAOA,aAAa,aAAa;QACnC,OAAOA;IACT;IAEA,OAAOjC,WAAW,CAAC4B,KAAK;AAC1B"}

package/dist/icon/materialConfig.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/materialConfig.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialIconCustomization {\n  /**\n   * @defaultValue `\"filled\"`\n   */\n  iconFamily?: MaterialIconFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialIconConfiguration = Required<MaterialIconCustomization>;\n\n/**\n * Fill gives you the ability to modify the default icon style. A single icon\n * can render both unfilled and filled states.\n *\n * To convey a state transition, use the fill axis for animation or\n * interaction. The values are 0 for default or 1 for completely filled. Along\n * with the weight axis, the fill also impacts the look of the icon.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolFill = 0 | 1;\n\n/**\n * Weight defines the symbol’s stroke weight, with a range of weights between\n * thin (100) and bold (700). Weight can also affect the overall size of the\n * symbol.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;\n\n/**\n * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n * granular than adjustments to weight and have a small impact on the size of\n * the symbol.\n *\n * Grade is also available in some text fonts. You can match grade levels\n * between text and symbols for a harmonious visual effect. For example, if\n * the text font has a -25 grade value, the symbols can match it with a\n * suitable value, say -25.\n *\n * You can use grade for different needs:\n *\n * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n *   dark background, use a low grade.\n * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n *   positive grade.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolGrade = -25 | 0 | 200;\n\n/**\n * Optical Sizes range from 20dp to 48dp.\n *\n * For the image to look the same at different sizes, the stroke weight\n * (thickness) changes as the icon size scales. Optical Size offers a way to\n * automatically adjust the stroke weight when you increase or decrease the\n * symbol size.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;\n\n/**\n * The comments for each customizable part was copied from\n * https://fonts.google.com/icons?icon.set=Material+Symbols and clicking the\n * info icon next to each property.\n *\n * @see https://fonts.google.com/icons?icon.set=Material+Symbols\n * @since 6.0.0\n */\nexport interface MaterialSymbolCustomization {\n  /**\n   * Fill gives you the ability to modify the default icon style. A single icon\n   * can render both unfilled and filled states.\n   *\n   * To convey a state transition, use the fill axis for animation or\n   * interaction. The values are 0 for default or 1 for completely filled. Along\n   * with the weight axis, the fill also impacts the look of the icon.\n   *\n   * @defaultValue `0`\n   */\n  fill?: MaterialSymbolFill;\n\n  /**\n   * Weight defines the symbol’s stroke weight, with a range of weights between\n   * thin (100) and bold (700). Weight can also affect the overall size of the\n   * symbol.\n   *\n   * @defaultValue `400`\n   */\n  weight?: MaterialSymbolWeight;\n\n  /**\n   * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n   * granular than adjustments to weight and have a small impact on the size of\n   * the symbol.\n   *\n   * Grade is also available in some text fonts. You can match grade levels\n   * between text and symbols for a harmonious visual effect. For example, if\n   * the text font has a -25 grade value, the symbols can match it with a\n   * suitable value, say -25.\n   *\n   * You can use grade for different needs:\n   *\n   * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n   *   dark background, use a low grade.\n   * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n   *   positive grade.\n   *\n   * @defaultValue `0`\n   */\n  grade?: MaterialSymbolGrade;\n\n  /**\n   * Optical Sizes range from 20dp to 48dp.\n   *\n   * For the image to look the same at different sizes, the stroke weight\n   * (thickness) changes as the icon size scales. Optical Size offers a way to\n   * automatically adjust the stroke weight when you increase or decrease the\n   * symbol size.\n   *\n   * @defaultValue `48`\n   */\n  opticalSize?: MaterialSymbolOpticalSize;\n\n  /**\n   * @defaultValue `\"outlined\"`\n   */\n  family?: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialConfiguration\n  extends MaterialIconConfiguration,\n    MaterialSymbolConfiguration {}\n\n/**\n * @since 6.0.0\n */\nexport const MATERIAL_CONFIG: MaterialConfiguration = {\n  fill: 0,\n  weight: 400,\n  grade: 0,\n  opticalSize: 48,\n  iconFamily: \"filled\",\n  family: \"outlined\",\n};\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolFontVariationSettings {\n  style?: CSSProperties;\n  family: MaterialSymbolFamily;\n}\n\ninterface ApplyOptions {\n  name: \"fill\" | \"wght\" | \"grad\" | \"opsz\";\n  value: number | undefined;\n  defaultValue: number;\n  style: CSSProperties | undefined;\n}\n\nconst applyVar = (options: ApplyOptions): CSSProperties | undefined => {\n  const { name, value, defaultValue, style } = options;\n  if (typeof value !== \"undefined\" && value !== defaultValue) {\n    const varName = `--rmd-symbol-${name}` as const;\n    return {\n      ...style,\n      [varName]: value,\n    };\n  }\n\n  return style;\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getFontVariationSettings(\n  options: MaterialSymbolCustomization & { style?: CSSProperties }\n): MaterialSymbolFontVariationSettings {\n  const {\n    family = MATERIAL_CONFIG.family,\n    fill,\n    grade,\n    opticalSize,\n    weight,\n  } = options;\n  let { style } = options;\n  style = applyVar({\n    style,\n    name: \"fill\",\n    value: fill,\n    defaultValue: MATERIAL_CONFIG.fill,\n  });\n  style = applyVar({\n    style,\n    name: \"grad\",\n    value: grade,\n    defaultValue: MATERIAL_CONFIG.grade,\n  });\n  style = applyVar({\n    style,\n    name: \"opsz\",\n    value: opticalSize,\n    defaultValue: MATERIAL_CONFIG.opticalSize,\n  });\n  style = applyVar({\n    style,\n    name: \"wght\",\n    value: weight,\n    defaultValue: MATERIAL_CONFIG.weight,\n  });\n\n  return { style, family };\n}\n"],"names":["MATERIAL_CONFIG","fill","weight","grade","opticalSize","iconFamily","family","applyVar","options","name","value","defaultValue","style","varName","getFontVariationSettings"],"mappings":"AA6JA;;CAEC,GACD,OAAO,MAAMA,kBAAyC;IACpDC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC,YAAY;IACZC,QAAQ;AACV,EAAE;AAiBF,MAAMC,WAAW,CAACC;IAChB,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,KAAK,EAAE,GAAGJ;IAC7C,IAAI,OAAOE,UAAU,eAAeA,UAAUC,cAAc;QAC1D,MAAME,UAAU,CAAC,aAAa,EAAEJ,MAAM;QACtC,OAAO;YACL,GAAGG,KAAK;YACR,CAACC,QAAQ,EAAEH;QACb;IACF;IAEA,OAAOE;AACT;AAEA;;;CAGC,GACD,OAAO,SAASE,yBACdN,OAAgE;IAEhE,MAAM,EACJF,SAASN,gBAAgBM,MAAM,EAC/BL,IAAI,EACJE,KAAK,EACLC,WAAW,EACXF,MAAM,EACP,GAAGM;IACJ,IAAI,EAAEI,KAAK,EAAE,GAAGJ;IAChBI,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAOT;QACPU,cAAcX,gBAAgBC,IAAI;IACpC;IACAW,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAOP;QACPQ,cAAcX,gBAAgBG,KAAK;IACrC;IACAS,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAON;QACPO,cAAcX,gBAAgBI,WAAW;IAC3C;IACAQ,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAOR;QACPS,cAAcX,gBAAgBE,MAAM;IACtC;IAEA,OAAO;QAAEU;QAAON;IAAO;AACzB"}
+{"version":3,"sources":["../../src/icon/materialConfig.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialIconCustomization {\n  /**\n   * @defaultValue `\"filled\"`\n   */\n  iconFamily?: MaterialIconFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialIconConfiguration = Required<MaterialIconCustomization>;\n\n/**\n * Fill gives you the ability to modify the default icon style. A single icon\n * can render both unfilled and filled states.\n *\n * To convey a state transition, use the fill axis for animation or\n * interaction. The values are 0 for default or 1 for completely filled. Along\n * with the weight axis, the fill also impacts the look of the icon.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolFill = 0 | 1;\n\n/**\n * Weight defines the symbol’s stroke weight, with a range of weights between\n * thin (100) and bold (700). Weight can also affect the overall size of the\n * symbol.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;\n\n/**\n * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n * granular than adjustments to weight and have a small impact on the size of\n * the symbol.\n *\n * Grade is also available in some text fonts. You can match grade levels\n * between text and symbols for a harmonious visual effect. For example, if\n * the text font has a -25 grade value, the symbols can match it with a\n * suitable value, say -25.\n *\n * You can use grade for different needs:\n *\n * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n *   dark background, use a low grade.\n * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n *   positive grade.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolGrade = -25 | 0 | 200;\n\n/**\n * Optical Sizes range from 20dp to 48dp.\n *\n * For the image to look the same at different sizes, the stroke weight\n * (thickness) changes as the icon size scales. Optical Size offers a way to\n * automatically adjust the stroke weight when you increase or decrease the\n * symbol size.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;\n\n/**\n * The comments for each customizable part was copied from\n * https://fonts.google.com/icons?icon.set=Material+Symbols and clicking the\n * info icon next to each property.\n *\n * @see https://fonts.google.com/icons?icon.set=Material+Symbols\n * @since 6.0.0\n */\nexport interface MaterialSymbolCustomization {\n  /**\n   * Fill gives you the ability to modify the default icon style. A single icon\n   * can render both unfilled and filled states.\n   *\n   * To convey a state transition, use the fill axis for animation or\n   * interaction. The values are 0 for default or 1 for completely filled. Along\n   * with the weight axis, the fill also impacts the look of the icon.\n   *\n   * @defaultValue `0`\n   */\n  fill?: MaterialSymbolFill;\n\n  /**\n   * Weight defines the symbol’s stroke weight, with a range of weights between\n   * thin (100) and bold (700). Weight can also affect the overall size of the\n   * symbol.\n   *\n   * @defaultValue `400`\n   */\n  weight?: MaterialSymbolWeight;\n\n  /**\n   * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n   * granular than adjustments to weight and have a small impact on the size of\n   * the symbol.\n   *\n   * Grade is also available in some text fonts. You can match grade levels\n   * between text and symbols for a harmonious visual effect. For example, if\n   * the text font has a -25 grade value, the symbols can match it with a\n   * suitable value, say -25.\n   *\n   * You can use grade for different needs:\n   *\n   * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n   *   dark background, use a low grade.\n   * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n   *   positive grade.\n   *\n   * @defaultValue `0`\n   */\n  grade?: MaterialSymbolGrade;\n\n  /**\n   * Optical Sizes range from 20dp to 48dp.\n   *\n   * For the image to look the same at different sizes, the stroke weight\n   * (thickness) changes as the icon size scales. Optical Size offers a way to\n   * automatically adjust the stroke weight when you increase or decrease the\n   * symbol size.\n   *\n   * @defaultValue `48`\n   */\n  opticalSize?: MaterialSymbolOpticalSize;\n\n  /**\n   * @defaultValue `\"outlined\"`\n   */\n  family?: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialConfiguration\n  extends MaterialIconConfiguration, MaterialSymbolConfiguration {}\n\n/**\n * @since 6.0.0\n */\nexport const MATERIAL_CONFIG: MaterialConfiguration = {\n  fill: 0,\n  weight: 400,\n  grade: 0,\n  opticalSize: 48,\n  iconFamily: \"filled\",\n  family: \"outlined\",\n};\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolFontVariationSettings {\n  style?: CSSProperties;\n  family: MaterialSymbolFamily;\n}\n\ninterface ApplyOptions {\n  name: \"fill\" | \"wght\" | \"grad\" | \"opsz\";\n  value: number | undefined;\n  defaultValue: number;\n  style: CSSProperties | undefined;\n}\n\nconst applyVar = (options: ApplyOptions): CSSProperties | undefined => {\n  const { name, value, defaultValue, style } = options;\n  if (typeof value !== \"undefined\" && value !== defaultValue) {\n    const varName = `--rmd-symbol-${name}` as const;\n    return {\n      ...style,\n      [varName]: value,\n    };\n  }\n\n  return style;\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getFontVariationSettings(\n  options: MaterialSymbolCustomization & { style?: CSSProperties }\n): MaterialSymbolFontVariationSettings {\n  const {\n    family = MATERIAL_CONFIG.family,\n    fill,\n    grade,\n    opticalSize,\n    weight,\n  } = options;\n  let { style } = options;\n  style = applyVar({\n    style,\n    name: \"fill\",\n    value: fill,\n    defaultValue: MATERIAL_CONFIG.fill,\n  });\n  style = applyVar({\n    style,\n    name: \"grad\",\n    value: grade,\n    defaultValue: MATERIAL_CONFIG.grade,\n  });\n  style = applyVar({\n    style,\n    name: \"opsz\",\n    value: opticalSize,\n    defaultValue: MATERIAL_CONFIG.opticalSize,\n  });\n  style = applyVar({\n    style,\n    name: \"wght\",\n    value: weight,\n    defaultValue: MATERIAL_CONFIG.weight,\n  });\n\n  return { style, family };\n}\n"],"names":["MATERIAL_CONFIG","fill","weight","grade","opticalSize","iconFamily","family","applyVar","options","name","value","defaultValue","style","varName","getFontVariationSettings"],"mappings":"AA4JA;;CAEC,GACD,OAAO,MAAMA,kBAAyC;IACpDC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC,YAAY;IACZC,QAAQ;AACV,EAAE;AAiBF,MAAMC,WAAW,CAACC;IAChB,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,KAAK,EAAE,GAAGJ;IAC7C,IAAI,OAAOE,UAAU,eAAeA,UAAUC,cAAc;QAC1D,MAAME,UAAU,CAAC,aAAa,EAAEJ,MAAM;QACtC,OAAO;YACL,GAAGG,KAAK;YACR,CAACC,QAAQ,EAAEH;QACb;IACF;IAEA,OAAOE;AACT;AAEA;;;CAGC,GACD,OAAO,SAASE,yBACdN,OAAgE;IAEhE,MAAM,EACJF,SAASN,gBAAgBM,MAAM,EAC/BL,IAAI,EACJE,KAAK,EACLC,WAAW,EACXF,MAAM,EACP,GAAGM;IACJ,IAAI,EAAEI,KAAK,EAAE,GAAGJ;IAChBI,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAOT;QACPU,cAAcX,gBAAgBC,IAAI;IACpC;IACAW,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAOP;QACPQ,cAAcX,gBAAgBG,KAAK;IACrC;IACAS,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAON;QACPO,cAAcX,gBAAgBI,WAAW;IAC3C;IACAQ,QAAQL,SAAS;QACfK;QACAH,MAAM;QACNC,OAAOR;QACPS,cAAcX,gBAAgBE,MAAM;IACtC;IAEA,OAAO;QAAEU;QAAON;IAAO;AACzB"}

package/dist/icon/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-icon-color\"?: string;\n    \"--rmd-icon-size\"?: string | number;\n    \"--rmd-icon-dense-size\"?: string | number;\n    \"--rmd-icon-spacing\"?: string | number;\n    \"--rmd-icon-rotate-from\"?: string | number;\n    \"--rmd-icon-rotate-to\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-icon\");\nconst rotatorStyles = bem(\"rmd-icon-rotator\");\n\n/**\n * @since 6.0.0\n */\nexport type IconTheme = ThemeColor | TextColor | \"currentcolor\";\n\n/** @since 6.0.0 */\nexport interface SVGIconClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional theme color to apply to the icon. When this is `undefined`, the\n   * default icon color will be used instead.\n   *\n   * - `primary -> $primary-color`\n   * - `secondary -> $secondary-color`\n   * - `warning -> $warning-color`\n   * - `success -> $success-color`\n   * - `error -> $error-color`\n   * - `text-primary -> $text-primary-color`\n   * - `text-secondary -> $text-primary-color`\n   * - `text-hint -> $text-hint-color`\n   * - `text-disabled -> $text-disabled-color`\n   * - `currentcolor -> currentcolor`\n   */\n  theme?: IconTheme;\n\n  /**\n   * Boolean if the font icon should use the dense spec.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` if the icon should display inline with other text (like\n   * a paragraph) by applying `vertical-align: bottom`.\n   *\n   * @example\n   * ```tsx\n   * <Typography>\n   *   <InfoIcon inline className=\"rmd-icon--before\" />\n   *   Some additional information around xyz.\n   * </Typography>\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FontIconClassNameOptions extends SVGIconClassNameOptions {\n  /**\n   * The font icon class name to use.\n   *\n   * @defaultValue `\"material-icons\"`\n   */\n  iconClassName?: string;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {\n  family: MaterialIconFamily;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialSymbolClassNameOptions\n  extends SVGIconClassNameOptions {\n  family: MaterialSymbolFamily;\n}\n\n/** @since 6.0.0 */\nexport type IconClassNameOptions =\n  | ({ type: \"font\" } & FontIconClassNameOptions)\n  | ({ type: \"svg\" } & SVGIconClassNameOptions)\n  | ({ type: \"material\" } & MaterialIconClassNameOptions)\n  | ({ type: \"symbol\" } & MaterialSymbolClassNameOptions);\n\n/**\n *\n * @since 6.0.0\n */\nexport function icon(options: IconClassNameOptions): string {\n  const {\n    className,\n    type,\n    theme,\n    family = \"\",\n    dense = false,\n    inline = false,\n    iconClassName,\n  } = options as FontIconClassNameOptions &\n    SVGIconClassNameOptions & {\n      type: \"font\" | \"svg\" | \"symbol\" | \"material\";\n      family?: MaterialIconFamily;\n    };\n\n  const isFont = type === \"font\";\n  const isSvg = type === \"svg\";\n  const isSymbol = type === \"symbol\";\n  const isMaterial = type === \"material\";\n  const isCurrentColor = theme === \"currentcolor\";\n\n  return cnb(\n    styles({\n      svg: isSvg,\n      font: isFont || isMaterial,\n      symbol: isSymbol,\n      vam: inline,\n      dense,\n      cc: isCurrentColor,\n    }),\n    isSymbol && `material-symbols-${family}`,\n    isMaterial &&\n      `material-icons${\n        family === \"filled\" ? \"\" : `-${family === \"rounded\" ? \"round\" : family}`\n      }`,\n    !isCurrentColor && cssUtils({ textColor: theme }),\n    iconClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface IconRotatorClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the icon is currently rotated.\n   */\n  rotated: boolean;\n\n  /**\n   * Boolean if changing the {@link rotated} state should no longer transition.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function iconRotator(options: IconRotatorClassNameOptions): string {\n  const { className, rotated, disableTransition = false } = options;\n\n  return cnb(\n    rotatorStyles({\n      animate: !disableTransition,\n      rotated,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","rotatorStyles","icon","options","className","type","theme","family","dense","inline","iconClassName","isFont","isSvg","isSymbol","isMaterial","isCurrentColor","svg","font","symbol","vam","cc","textColor","iconRotator","rotated","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAiBtC,MAAMC,SAASD,IAAI;AACnB,MAAME,gBAAgBF,IAAI;AAgF1B;;;CAGC,GACD,OAAO,SAASG,KAAKC,OAA6B;IAChD,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,KAAK,EACLC,SAAS,EAAE,EACXC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,aAAa,EACd,GAAGP;IAMJ,MAAMQ,SAASN,SAAS;IACxB,MAAMO,QAAQP,SAAS;IACvB,MAAMQ,WAAWR,SAAS;IAC1B,MAAMS,aAAaT,SAAS;IAC5B,MAAMU,iBAAiBT,UAAU;IAEjC,OAAOT,IACLG,OAAO;QACLgB,KAAKJ;QACLK,MAAMN,UAAUG;QAChBI,QAAQL;QACRM,KAAKV;QACLD;QACAY,IAAIL;IACN,IACAF,YAAY,CAAC,iBAAiB,EAAEN,QAAQ,EACxCO,cACE,CAAC,cAAc,EACbP,WAAW,WAAW,KAAK,CAAC,CAAC,EAAEA,WAAW,YAAY,UAAUA,QAAQ,EACxE,EACJ,CAACQ,kBAAkBjB,SAAS;QAAEuB,WAAWf;IAAM,IAC/CI,eACAN;AAEJ;AAmBA;;;CAGC,GACD,OAAO,SAASkB,YAAYnB,OAAoC;IAC9D,MAAM,EAAEC,SAAS,EAAEmB,OAAO,EAAEC,oBAAoB,KAAK,EAAE,GAAGrB;IAE1D,OAAON,IACLI,cAAc;QACZwB,SAAS,CAACD;QACVD;IACF,IACAnB;AAEJ"}
+{"version":3,"sources":["../../src/icon/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextColor, type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-icon-color\"?: string;\n    \"--rmd-icon-size\"?: string | number;\n    \"--rmd-icon-dense-size\"?: string | number;\n    \"--rmd-icon-spacing\"?: string | number;\n    \"--rmd-icon-rotate-from\"?: string | number;\n    \"--rmd-icon-rotate-to\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-icon\");\nconst rotatorStyles = bem(\"rmd-icon-rotator\");\n\n/**\n * @since 6.0.0\n */\nexport type IconTheme = ThemeColor | TextColor | \"currentcolor\";\n\n/** @since 6.0.0 */\nexport interface SVGIconClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional theme color to apply to the icon. When this is `undefined`, the\n   * default icon color will be used instead.\n   *\n   * - `primary -> $primary-color`\n   * - `secondary -> $secondary-color`\n   * - `warning -> $warning-color`\n   * - `success -> $success-color`\n   * - `error -> $error-color`\n   * - `text-primary -> $text-primary-color`\n   * - `text-secondary -> $text-primary-color`\n   * - `text-hint -> $text-hint-color`\n   * - `text-disabled -> $text-disabled-color`\n   * - `currentcolor -> currentcolor`\n   */\n  theme?: IconTheme;\n\n  /**\n   * Boolean if the font icon should use the dense spec.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` if the icon should display inline with other text (like\n   * a paragraph) by applying `vertical-align: bottom`.\n   *\n   * @example\n   * ```tsx\n   * <Typography>\n   *   <InfoIcon inline className=\"rmd-icon--before\" />\n   *   Some additional information around xyz.\n   * </Typography>\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FontIconClassNameOptions extends SVGIconClassNameOptions {\n  /**\n   * The font icon class name to use.\n   *\n   * @defaultValue `\"material-icons\"`\n   */\n  iconClassName?: string;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {\n  family: MaterialIconFamily;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialSymbolClassNameOptions extends SVGIconClassNameOptions {\n  family: MaterialSymbolFamily;\n}\n\n/** @since 6.0.0 */\nexport type IconClassNameOptions =\n  | ({ type: \"font\" } & FontIconClassNameOptions)\n  | ({ type: \"svg\" } & SVGIconClassNameOptions)\n  | ({ type: \"material\" } & MaterialIconClassNameOptions)\n  | ({ type: \"symbol\" } & MaterialSymbolClassNameOptions);\n\n/**\n *\n * @since 6.0.0\n */\nexport function icon(options: IconClassNameOptions): string {\n  const {\n    className,\n    type,\n    theme,\n    family = \"\",\n    dense = false,\n    inline = false,\n    iconClassName,\n  } = options as FontIconClassNameOptions &\n    SVGIconClassNameOptions & {\n      type: \"font\" | \"svg\" | \"symbol\" | \"material\";\n      family?: MaterialIconFamily;\n    };\n\n  const isFont = type === \"font\";\n  const isSvg = type === \"svg\";\n  const isSymbol = type === \"symbol\";\n  const isMaterial = type === \"material\";\n  const isCurrentColor = theme === \"currentcolor\";\n\n  return cnb(\n    styles({\n      svg: isSvg,\n      font: isFont || isMaterial,\n      symbol: isSymbol,\n      vam: inline,\n      dense,\n      cc: isCurrentColor,\n    }),\n    isSymbol && `material-symbols-${family}`,\n    isMaterial &&\n      `material-icons${\n        family === \"filled\" ? \"\" : `-${family === \"rounded\" ? \"round\" : family}`\n      }`,\n    !isCurrentColor && cssUtils({ textColor: theme }),\n    iconClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface IconRotatorClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the icon is currently rotated.\n   */\n  rotated: boolean;\n\n  /**\n   * Boolean if changing the {@link rotated} state should no longer transition.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function iconRotator(options: IconRotatorClassNameOptions): string {\n  const { className, rotated, disableTransition = false } = options;\n\n  return cnb(\n    rotatorStyles({\n      animate: !disableTransition,\n      rotated,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","rotatorStyles","icon","options","className","type","theme","family","dense","inline","iconClassName","isFont","isSvg","isSymbol","isMaterial","isCurrentColor","svg","font","symbol","vam","cc","textColor","iconRotator","rotated","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0CC,QAAQ,QAAQ,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAiBtC,MAAMC,SAASD,IAAI;AACnB,MAAME,gBAAgBF,IAAI;AA+E1B;;;CAGC,GACD,OAAO,SAASG,KAAKC,OAA6B;IAChD,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,KAAK,EACLC,SAAS,EAAE,EACXC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,aAAa,EACd,GAAGP;IAMJ,MAAMQ,SAASN,SAAS;IACxB,MAAMO,QAAQP,SAAS;IACvB,MAAMQ,WAAWR,SAAS;IAC1B,MAAMS,aAAaT,SAAS;IAC5B,MAAMU,iBAAiBT,UAAU;IAEjC,OAAOT,IACLG,OAAO;QACLgB,KAAKJ;QACLK,MAAMN,UAAUG;QAChBI,QAAQL;QACRM,KAAKV;QACLD;QACAY,IAAIL;IACN,IACAF,YAAY,CAAC,iBAAiB,EAAEN,QAAQ,EACxCO,cACE,CAAC,cAAc,EACbP,WAAW,WAAW,KAAK,CAAC,CAAC,EAAEA,WAAW,YAAY,UAAUA,QAAQ,EACxE,EACJ,CAACQ,kBAAkBjB,SAAS;QAAEuB,WAAWf;IAAM,IAC/CI,eACAN;AAEJ;AAmBA;;;CAGC,GACD,OAAO,SAASkB,YAAYnB,OAAoC;IAC9D,MAAM,EAAEC,SAAS,EAAEmB,OAAO,EAAEC,oBAAoB,KAAK,EAAE,GAAGrB;IAE1D,OAAON,IACLI,cAAc;QACZwB,SAAS,CAACD;QACVD;IACF,IACAnB;AAEJ"}

package/dist/interaction/UserInteractionModeProvider.js

@@ -13,6 +13,7 @@ const { Provider } = context;
     return useContext(context).mode;
 }
 /** @internal */ const TOUCH_TIMEOUT = 1200;
+const DATE_NOW = ()=>Date.now();
 /**
  * **Client Component**
  *
@@ -47,7 +48,7 @@ const { Provider } = context;
  * @throws "The `UserInteractionModeProvider` cannot be mounted multiple times."
  * if this component is mounted multiple times in your app.
  */ export function UserInteractionModeProvider(props) {
-    const { children } = props;
+    const { children, now = DATE_NOW } = props;
     const { __root } = useContext(context);
     if (__root) {
         throw new Error("The `UserInteractionModeProvider` cannot be mounted multiple times.");
@@ -102,12 +103,12 @@ const { Provider } = context;
             setMode("keyboard");
         };
         const handleTouchStart = ()=>{
-            lastTouchTime.current = Date.now();
+            lastTouchTime.current = now();
             isTouchContextMenu.current = false;
             setMode("touch");
         };
         const handleMouseMove = ()=>{
-            if (isTouchContextMenu.current || Date.now() - lastTouchTime.current < TOUCH_TIMEOUT) {
+            if (isTouchContextMenu.current || now() - lastTouchTime.current < TOUCH_TIMEOUT) {
                 isTouchContextMenu.current = false;
                 return;
             }
@@ -140,7 +141,8 @@ const { Provider } = context;
             }
         };
     }, [
-        mode
+        mode,
+        now
     ]);
     const value = useMemo(()=>({
             mode,

package/dist/interaction/UserInteractionModeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/UserInteractionModeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\n/**\n * This is the current mode for how your user is interacting with your app. This\n * will be used to determine which type of state styles should be applied at the\n * time of interacting with an element on your page.\n *\n * @defaultValue `\"mouse\"`\n */\nexport type UserInteractionMode = \"keyboard\" | \"mouse\" | \"touch\";\n\n/** @internal */\ninterface UserInteractionModeContext {\n  __root: boolean;\n  mode: UserInteractionMode;\n}\n\nconst context = createContext<UserInteractionModeContext>({\n  __root: false,\n  mode: \"mouse\",\n});\ncontext.displayName = \"UserInteractionMode\";\nconst { Provider } = context;\n\n/**\n * @returns the current user interaction mode\n */\nexport function useUserInteractionMode(): UserInteractionMode {\n  return useContext(context).mode;\n}\n\n/** @internal */\nconst TOUCH_TIMEOUT = 1200;\n\nexport interface UserInteractionModeProviderProps {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to determine how a user is interacting with your app\n * to update component functionality and applying the following class names to\n * the `document.body`:\n *\n * - `\"rmd-mouse-mode\"`\n * - `\"rmd-keyboard-mode\"`\n * - `\"rmd-touch-mode\"`\n *\n * Within `react-md`, these classes are used for the following behavior:\n * - only display `:focus` outlines while in `\"rmd-keyboard-mode\"`\n * - do not display `:hover` effects while in `\"rmd-touch-mode\"`\n *\n * @example Mount at the root of your app\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { UserInteractionModeProvider } from \"@react-md/core/interaction/UserInteractionModeProvider\";\n * import App from \"./App\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <UserInteractionModeProvider>\n *     <App />\n *   </UserInteractionModeProvider>\n * );\n * ```\n *\n * @throws \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n * if this component is mounted multiple times in your app.\n */\nexport function UserInteractionModeProvider(\n  props: UserInteractionModeProviderProps\n): ReactElement {\n  const { children } = props;\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\n      \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n    );\n  }\n\n  const [mode, setMode] = useState<UserInteractionMode>(\"mouse\");\n  const lastTouchTime = useRef(0);\n  const isTouchContextMenu = useRef(false);\n\n  /**\n   * This effect helps determine the current interaction mode by attaching the\n   * required event listeners to the window. The `mode` will always be defaulted\n   * to `mouse` at first since it has the least possibilities of causing errors\n   * with styles since the mouse-only styles are normally just `:hover` effects.\n   *\n   * ## Switching between modes:\n   *\n   * ### While in `mouse` mode:\n   *\n   * - any `keydown` event will switch to `keyboard` mode\n   *   - this does have the side effect of meta keys also causing the switch over,\n   *     but it feels fine since it helps show the current focus in the document\n   *     as well\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `keyboard` mode:\n   *\n   * - any `mousedown` event will switch to `mouse` mode\n   *   - it is perfectly okay to move the mouse while in keyboard mode, but still\n   *     want to keep the keyboard styles until the user actually starts clicking\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `touch` mode:\n   *\n   * - any `mousemove` event will switch to `mouse` mode, but **only** if there\n   *   hasn't been a `contextmenu` event within the last `1.2s`\n   *   - you can really only switch back to `mouse` mode if you are using the\n   *     devtools to emulate devices OR using a touch-desktop. I don't know how\n   *     common this really is though.\n   *   - touching the screen will always fire a `mousemove` event (which is why\n   *     the `:hover` styles are normally with `rmd-utils-mouse-only`) and even\n   *     after the `contextmenu` event. Normally want to go back to `mouse` mode\n   *     when the mouse re-enters the `window`\n   *\n   * Note: It's currently impossible to switch from `touch` to `keyboard`\n   * immediately. You'd first need to switch to `mouse` and then to `keyboard`. I\n   * don't really know of any use-cases other than the weird touch-desktop stuff\n   * and I have no experience using them.\n   */\n  useEffect(() => {\n    const enableMouseMode = (): void => {\n      setMode(\"mouse\");\n    };\n    const enableKeyboardMode = (): void => {\n      setMode(\"keyboard\");\n    };\n\n    const handleTouchStart = (): void => {\n      lastTouchTime.current = Date.now();\n      isTouchContextMenu.current = false;\n      setMode(\"touch\");\n    };\n\n    const handleMouseMove = (): void => {\n      if (\n        isTouchContextMenu.current ||\n        Date.now() - lastTouchTime.current < TOUCH_TIMEOUT\n      ) {\n        isTouchContextMenu.current = false;\n        return;\n      }\n\n      enableMouseMode();\n    };\n    const handleContextMenu = (): void => {\n      isTouchContextMenu.current = true;\n    };\n\n    const className = `rmd-${mode}-mode`;\n    document.body.classList.add(className);\n    window.addEventListener(\"touchstart\", handleTouchStart, true);\n    if (mode === \"mouse\") {\n      window.addEventListener(\"keydown\", enableKeyboardMode, true);\n    } else if (mode === \"keyboard\") {\n      window.addEventListener(\"mousedown\", enableMouseMode, true);\n    } else {\n      window.addEventListener(\"mousemove\", handleMouseMove, true);\n      window.addEventListener(\"contextmenu\", handleContextMenu, true);\n    }\n\n    return () => {\n      document.body.classList.remove(className);\n      window.removeEventListener(\"touchstart\", handleTouchStart, true);\n      if (mode === \"mouse\") {\n        window.removeEventListener(\"keydown\", enableKeyboardMode, true);\n      } else if (mode === \"keyboard\") {\n        window.removeEventListener(\"mousedown\", enableMouseMode, true);\n      } else {\n        window.removeEventListener(\"mousemove\", handleMouseMove, true);\n        window.removeEventListener(\"contextmenu\", handleContextMenu, true);\n      }\n    };\n  }, [mode]);\n\n  const value = useMemo<UserInteractionModeContext>(\n    () => ({\n      mode,\n      __root: true,\n    }),\n    [mode]\n  );\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useRef","useState","context","__root","mode","displayName","Provider","useUserInteractionMode","TOUCH_TIMEOUT","UserInteractionModeProvider","props","children","Error","setMode","lastTouchTime","isTouchContextMenu","enableMouseMode","enableKeyboardMode","handleTouchStart","current","Date","now","handleMouseMove","handleContextMenu","className","document","body","classList","add","window","addEventListener","remove","removeEventListener","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAiBf,MAAMC,wBAAUN,cAA0C;IACxDO,QAAQ;IACRC,MAAM;AACR;AACAF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;CAEC,GACD,OAAO,SAASK;IACd,OAAOV,WAAWK,SAASE,IAAI;AACjC;AAEA,cAAc,GACd,MAAMI,gBAAgB;AAMtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,SAASC,4BACdC,KAAuC;IAEvC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAM,EAAEP,MAAM,EAAE,GAAGN,WAAWK;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIS,MACR;IAEJ;IAEA,MAAM,CAACR,MAAMS,QAAQ,GAAGZ,SAA8B;IACtD,MAAMa,gBAAgBd,OAAO;IAC7B,MAAMe,qBAAqBf,OAAO;IAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCC,GACDF,UAAU;QACR,MAAMkB,kBAAkB;YACtBH,QAAQ;QACV;QACA,MAAMI,qBAAqB;YACzBJ,QAAQ;QACV;QAEA,MAAMK,mBAAmB;YACvBJ,cAAcK,OAAO,GAAGC,KAAKC,GAAG;YAChCN,mBAAmBI,OAAO,GAAG;YAC7BN,QAAQ;QACV;QAEA,MAAMS,kBAAkB;YACtB,IACEP,mBAAmBI,OAAO,IAC1BC,KAAKC,GAAG,KAAKP,cAAcK,OAAO,GAAGX,eACrC;gBACAO,mBAAmBI,OAAO,GAAG;gBAC7B;YACF;YAEAH;QACF;QACA,MAAMO,oBAAoB;YACxBR,mBAAmBI,OAAO,GAAG;QAC/B;QAEA,MAAMK,YAAY,CAAC,IAAI,EAAEpB,KAAK,KAAK,CAAC;QACpCqB,SAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACJ;QAC5BK,OAAOC,gBAAgB,CAAC,cAAcZ,kBAAkB;QACxD,IAAId,SAAS,SAAS;YACpByB,OAAOC,gBAAgB,CAAC,WAAWb,oBAAoB;QACzD,OAAO,IAAIb,SAAS,YAAY;YAC9ByB,OAAOC,gBAAgB,CAAC,aAAad,iBAAiB;QACxD,OAAO;YACLa,OAAOC,gBAAgB,CAAC,aAAaR,iBAAiB;YACtDO,OAAOC,gBAAgB,CAAC,eAAeP,mBAAmB;QAC5D;QAEA,OAAO;YACLE,SAASC,IAAI,CAACC,SAAS,CAACI,MAAM,CAACP;YAC/BK,OAAOG,mBAAmB,CAAC,cAAcd,kBAAkB;YAC3D,IAAId,SAAS,SAAS;gBACpByB,OAAOG,mBAAmB,CAAC,WAAWf,oBAAoB;YAC5D,OAAO,IAAIb,SAAS,YAAY;gBAC9ByB,OAAOG,mBAAmB,CAAC,aAAahB,iBAAiB;YAC3D,OAAO;gBACLa,OAAOG,mBAAmB,CAAC,aAAaV,iBAAiB;gBACzDO,OAAOG,mBAAmB,CAAC,eAAeT,mBAAmB;YAC/D;QACF;IACF,GAAG;QAACnB;KAAK;IAET,MAAM6B,QAAQlC,QACZ,IAAO,CAAA;YACLK;YACAD,QAAQ;QACV,CAAA,GACA;QAACC;KAAK;IAER,qBAAO,KAACE;QAAS2B,OAAOA;kBAAQtB;;AAClC"}
+{"version":3,"sources":["../../src/interaction/UserInteractionModeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\n/**\n * This is the current mode for how your user is interacting with your app. This\n * will be used to determine which type of state styles should be applied at the\n * time of interacting with an element on your page.\n *\n * @defaultValue `\"mouse\"`\n */\nexport type UserInteractionMode = \"keyboard\" | \"mouse\" | \"touch\";\n\n/** @internal */\ninterface UserInteractionModeContext {\n  __root: boolean;\n  mode: UserInteractionMode;\n}\n\nconst context = createContext<UserInteractionModeContext>({\n  __root: false,\n  mode: \"mouse\",\n});\ncontext.displayName = \"UserInteractionMode\";\nconst { Provider } = context;\n\n/**\n * @returns the current user interaction mode\n */\nexport function useUserInteractionMode(): UserInteractionMode {\n  return useContext(context).mode;\n}\n\n/** @internal */\nconst TOUCH_TIMEOUT = 1200;\n\nconst DATE_NOW = (): number => Date.now();\n\nexport interface UserInteractionModeProviderProps {\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to determine how a user is interacting with your app\n * to update component functionality and applying the following class names to\n * the `document.body`:\n *\n * - `\"rmd-mouse-mode\"`\n * - `\"rmd-keyboard-mode\"`\n * - `\"rmd-touch-mode\"`\n *\n * Within `react-md`, these classes are used for the following behavior:\n * - only display `:focus` outlines while in `\"rmd-keyboard-mode\"`\n * - do not display `:hover` effects while in `\"rmd-touch-mode\"`\n *\n * @example Mount at the root of your app\n * ```tsx\n * import { createRoot } from \"react-dom/client\";\n * import { UserInteractionModeProvider } from \"@react-md/core/interaction/UserInteractionModeProvider\";\n * import App from \"./App\":\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <UserInteractionModeProvider>\n *     <App />\n *   </UserInteractionModeProvider>\n * );\n * ```\n *\n * @throws \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n * if this component is mounted multiple times in your app.\n */\nexport function UserInteractionModeProvider(\n  props: UserInteractionModeProviderProps\n): ReactElement {\n  const { children, now = DATE_NOW } =\n    props as UserInteractionModeProviderProps & {\n      now?: () => number;\n    };\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\n      \"The `UserInteractionModeProvider` cannot be mounted multiple times.\"\n    );\n  }\n\n  const [mode, setMode] = useState<UserInteractionMode>(\"mouse\");\n  const lastTouchTime = useRef(0);\n  const isTouchContextMenu = useRef(false);\n\n  /**\n   * This effect helps determine the current interaction mode by attaching the\n   * required event listeners to the window. The `mode` will always be defaulted\n   * to `mouse` at first since it has the least possibilities of causing errors\n   * with styles since the mouse-only styles are normally just `:hover` effects.\n   *\n   * ## Switching between modes:\n   *\n   * ### While in `mouse` mode:\n   *\n   * - any `keydown` event will switch to `keyboard` mode\n   *   - this does have the side effect of meta keys also causing the switch over,\n   *     but it feels fine since it helps show the current focus in the document\n   *     as well\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `keyboard` mode:\n   *\n   * - any `mousedown` event will switch to `mouse` mode\n   *   - it is perfectly okay to move the mouse while in keyboard mode, but still\n   *     want to keep the keyboard styles until the user actually starts clicking\n   * - any `touchstart` event will switch to `touch` mode\n   *\n   * ### While in `touch` mode:\n   *\n   * - any `mousemove` event will switch to `mouse` mode, but **only** if there\n   *   hasn't been a `contextmenu` event within the last `1.2s`\n   *   - you can really only switch back to `mouse` mode if you are using the\n   *     devtools to emulate devices OR using a touch-desktop. I don't know how\n   *     common this really is though.\n   *   - touching the screen will always fire a `mousemove` event (which is why\n   *     the `:hover` styles are normally with `rmd-utils-mouse-only`) and even\n   *     after the `contextmenu` event. Normally want to go back to `mouse` mode\n   *     when the mouse re-enters the `window`\n   *\n   * Note: It's currently impossible to switch from `touch` to `keyboard`\n   * immediately. You'd first need to switch to `mouse` and then to `keyboard`. I\n   * don't really know of any use-cases other than the weird touch-desktop stuff\n   * and I have no experience using them.\n   */\n  useEffect(() => {\n    const enableMouseMode = (): void => {\n      setMode(\"mouse\");\n    };\n    const enableKeyboardMode = (): void => {\n      setMode(\"keyboard\");\n    };\n\n    const handleTouchStart = (): void => {\n      lastTouchTime.current = now();\n      isTouchContextMenu.current = false;\n      setMode(\"touch\");\n    };\n\n    const handleMouseMove = (): void => {\n      if (\n        isTouchContextMenu.current ||\n        now() - lastTouchTime.current < TOUCH_TIMEOUT\n      ) {\n        isTouchContextMenu.current = false;\n        return;\n      }\n\n      enableMouseMode();\n    };\n    const handleContextMenu = (): void => {\n      isTouchContextMenu.current = true;\n    };\n\n    const className = `rmd-${mode}-mode`;\n    document.body.classList.add(className);\n    window.addEventListener(\"touchstart\", handleTouchStart, true);\n    if (mode === \"mouse\") {\n      window.addEventListener(\"keydown\", enableKeyboardMode, true);\n    } else if (mode === \"keyboard\") {\n      window.addEventListener(\"mousedown\", enableMouseMode, true);\n    } else {\n      window.addEventListener(\"mousemove\", handleMouseMove, true);\n      window.addEventListener(\"contextmenu\", handleContextMenu, true);\n    }\n\n    return () => {\n      document.body.classList.remove(className);\n      window.removeEventListener(\"touchstart\", handleTouchStart, true);\n      if (mode === \"mouse\") {\n        window.removeEventListener(\"keydown\", enableKeyboardMode, true);\n      } else if (mode === \"keyboard\") {\n        window.removeEventListener(\"mousedown\", enableMouseMode, true);\n      } else {\n        window.removeEventListener(\"mousemove\", handleMouseMove, true);\n        window.removeEventListener(\"contextmenu\", handleContextMenu, true);\n      }\n    };\n  }, [mode, now]);\n\n  const value = useMemo<UserInteractionModeContext>(\n    () => ({\n      mode,\n      __root: true,\n    }),\n    [mode]\n  );\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useRef","useState","context","__root","mode","displayName","Provider","useUserInteractionMode","TOUCH_TIMEOUT","DATE_NOW","Date","now","UserInteractionModeProvider","props","children","Error","setMode","lastTouchTime","isTouchContextMenu","enableMouseMode","enableKeyboardMode","handleTouchStart","current","handleMouseMove","handleContextMenu","className","document","body","classList","add","window","addEventListener","remove","removeEventListener","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAiBf,MAAMC,wBAAUN,cAA0C;IACxDO,QAAQ;IACRC,MAAM;AACR;AACAF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;CAEC,GACD,OAAO,SAASK;IACd,OAAOV,WAAWK,SAASE,IAAI;AACjC;AAEA,cAAc,GACd,MAAMI,gBAAgB;AAEtB,MAAMC,WAAW,IAAcC,KAAKC,GAAG;AAMvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,SAASC,4BACdC,KAAuC;IAEvC,MAAM,EAAEC,QAAQ,EAAEH,MAAMF,QAAQ,EAAE,GAChCI;IAGF,MAAM,EAAEV,MAAM,EAAE,GAAGN,WAAWK;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIY,MACR;IAEJ;IAEA,MAAM,CAACX,MAAMY,QAAQ,GAAGf,SAA8B;IACtD,MAAMgB,gBAAgBjB,OAAO;IAC7B,MAAMkB,qBAAqBlB,OAAO;IAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCC,GACDF,UAAU;QACR,MAAMqB,kBAAkB;YACtBH,QAAQ;QACV;QACA,MAAMI,qBAAqB;YACzBJ,QAAQ;QACV;QAEA,MAAMK,mBAAmB;YACvBJ,cAAcK,OAAO,GAAGX;YACxBO,mBAAmBI,OAAO,GAAG;YAC7BN,QAAQ;QACV;QAEA,MAAMO,kBAAkB;YACtB,IACEL,mBAAmBI,OAAO,IAC1BX,QAAQM,cAAcK,OAAO,GAAGd,eAChC;gBACAU,mBAAmBI,OAAO,GAAG;gBAC7B;YACF;YAEAH;QACF;QACA,MAAMK,oBAAoB;YACxBN,mBAAmBI,OAAO,GAAG;QAC/B;QAEA,MAAMG,YAAY,CAAC,IAAI,EAAErB,KAAK,KAAK,CAAC;QACpCsB,SAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAACJ;QAC5BK,OAAOC,gBAAgB,CAAC,cAAcV,kBAAkB;QACxD,IAAIjB,SAAS,SAAS;YACpB0B,OAAOC,gBAAgB,CAAC,WAAWX,oBAAoB;QACzD,OAAO,IAAIhB,SAAS,YAAY;YAC9B0B,OAAOC,gBAAgB,CAAC,aAAaZ,iBAAiB;QACxD,OAAO;YACLW,OAAOC,gBAAgB,CAAC,aAAaR,iBAAiB;YACtDO,OAAOC,gBAAgB,CAAC,eAAeP,mBAAmB;QAC5D;QAEA,OAAO;YACLE,SAASC,IAAI,CAACC,SAAS,CAACI,MAAM,CAACP;YAC/BK,OAAOG,mBAAmB,CAAC,cAAcZ,kBAAkB;YAC3D,IAAIjB,SAAS,SAAS;gBACpB0B,OAAOG,mBAAmB,CAAC,WAAWb,oBAAoB;YAC5D,OAAO,IAAIhB,SAAS,YAAY;gBAC9B0B,OAAOG,mBAAmB,CAAC,aAAad,iBAAiB;YAC3D,OAAO;gBACLW,OAAOG,mBAAmB,CAAC,aAAaV,iBAAiB;gBACzDO,OAAOG,mBAAmB,CAAC,eAAeT,mBAAmB;YAC/D;QACF;IACF,GAAG;QAACpB;QAAMO;KAAI;IAEd,MAAMuB,QAAQnC,QACZ,IAAO,CAAA;YACLK;YACAD,QAAQ;QACV,CAAA,GACA;QAACC;KAAK;IAER,qBAAO,KAACE;QAAS4B,OAAOA;kBAAQpB;;AAClC"}