@react-md/core 1.0.0-next.2 → 1.0.0-next.21

package/dist/hoverMode/useHoverModeProvider.js.map

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

package/dist/icon/FontIcon.d.ts

@@ -1,24 +1,29 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type AriaAttributes, type HTMLAttributes, type ReactNode } from "react";
 import { type FontIconClassNameOptions } from "./styles.js";
-export interface FontIconProps extends HTMLAttributes<HTMLElement>, FontIconClassNameOptions {
+/**
+ * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the
+ * `inline` and `theme` props.
+ */
+export interface FontIconProps extends HTMLAttributes<HTMLSpanElement>, FontIconClassNameOptions {
+    /** @defaultValue `true` */
+    "aria-hidden"?: AriaAttributes["aria-hidden"];
     /**
      * Any children to render to create the font icon. This is required for
-     * material-icons.
+     * material-icons. For example:
+     *
+     * ```tsx
+     * <FontIcon>clear</FontIcon>
+     * ```
      */
     children?: ReactNode;
 }
 /**
- * **Server Component**
- *
  * The `FontIcon` component is used for rendering a font-icon library's icon.
  * The default is to use the `material-icons` library, but others can be used as
  * well.
  *
- * If you are using another font icon library that does not always create icons
- * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
- * `forceSize` and `forceFontSize` props to fix the sizing issues.
- *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */
 export declare const FontIcon: import("react").ForwardRefExoticComponent<FontIconProps & import("react").RefAttributes<HTMLElement>>;

package/dist/icon/FontIcon.js

@@ -2,20 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `FontIcon` component is used for rendering a font-icon library's icon.
  * The default is to use the `material-icons` library, but others can be used as
  * well.
  *
- * If you are using another font icon library that does not always create icons
- * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
- * `forceSize` and `forceFontSize` props to fix the sizing issues.
- *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */ export const FontIcon = /*#__PURE__*/ forwardRef(function FontIcon(props, ref) {
-    const { className, children, "aria-hidden": ariaHidden = true, dense = false, theme, iconClassName = "material-icons", ...remaining } = props;
+    const { "aria-hidden": ariaHidden = true, iconClassName = "material-icons", dense = false, theme, className, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         "aria-hidden": ariaHidden,

package/dist/icon/FontIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/FontIcon.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { icon, type FontIconClassNameOptions } from \"./styles.js\";\n\nexport interface FontIconProps\n  extends HTMLAttributes<HTMLElement>,\n    FontIconClassNameOptions {\n  /**\n   * Any children to render to create the font icon. This is required for\n   * material-icons.\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `FontIcon` component is used for rendering a font-icon library's icon.\n * The default is to use the `material-icons` library, but others can be used as\n * well.\n *\n * If you are using another font icon library that does not always create icons\n * with a perfect 1:1 scale (such as font awesome), it is recommended to use the\n * `forceSize` and `forceFontSize` props to fix the sizing issues.\n *\n * \\@remarks \\@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      className,\n      children,\n      \"aria-hidden\": ariaHidden = true,\n      dense = false,\n      theme,\n      iconClassName = \"material-icons\",\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","className","children","ariaHidden","dense","theme","iconClassName","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,IAAI,QAAuC,cAAc;AAYlE;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMC,yBAAWF,WACtB,SAASE,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,QAAQ,EACR,eAAeC,aAAa,IAAI,EAChCC,QAAQ,KAAK,EACbC,KAAK,EACLC,gBAAgB,gBAAgB,EAChC,GAAGC,WACJ,GAAGR;IAEJ,qBACE,KAACS;QACE,GAAGD,SAAS;QACbE,eAAaN;QACbH,KAAKA;QACLC,WAAWJ,KAAK;YACda,MAAM;YACNN;YACAC;YACAJ;YACAK;QACF;kBAECJ;;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>,\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://next.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"}

package/dist/icon/IconRotator.d.ts

@@ -1,7 +1,7 @@
 import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
 import { type IconRotatorClassNameOptions } from "./styles.js";
 /**
- * @remarks \@since 6.0.0 Removed `animate` prop and added `disableTransition`
+ * @since 6.0.0 Removed `animate` prop and added `disableTransition`
  */
 export interface IconRotatorBaseProps extends HTMLAttributes<HTMLSpanElement>, IconRotatorClassNameOptions {
     /**
@@ -27,9 +27,9 @@ export interface IconRotatorProps extends IconRotatorBaseProps {
     children: ReactNode;
 }
 /**
- * **Server Component**
- *
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
+ *
+ * @see {@link https://next.react-md.dev/components/icon-rotator | IconRotator Demos}
  */
 export declare const IconRotator: import("react").ForwardRefExoticComponent<IconRotatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/icon/IconRotator.js

@@ -3,12 +3,12 @@ import { cnb } from "cnbuilder";
 import { Children, cloneElement, forwardRef, isValidElement } from "react";
 import { iconRotator } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `IconRotator` is a simple component that is used to rotate an icon from a
  * one degrees to another.
+ *
+ * @see {@link https://next.react-md.dev/components/icon-rotator | IconRotator Demos}
  */ export const IconRotator = /*#__PURE__*/ forwardRef(function IconRotator(props, ref) {
-    const { style, className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
+    const { className: propClassName, rotated, children, forceIconWrap = false, disableTransition = false, ...remaining } = props;
     const className = iconRotator({
         rotated,
         className: propClassName,
@@ -22,9 +22,8 @@ import { iconRotator } from "./styles.js";
     }
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
-        style: style,
-        className: className,
         ref: ref,
+        className: className,
         children: children
     });
 });

package/dist/icon/IconRotator.js.map

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

package/dist/icon/MaterialIcon.d.ts

@@ -1,16 +1,33 @@
 import { type AriaAttributes, type HTMLAttributes } from "react";
-import { type MaterialIconName } from "./material.js";
+import { type MaterialIconFamily, type MaterialIconName } from "./material.js";
 import { type MaterialIconClassNameOptions } from "./styles.js";
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface MaterialIconProps extends HTMLAttributes<HTMLSpanElement>, Partial<MaterialIconClassNameOptions> {
+    /**
+     * The icon name to use
+     */
+    name: MaterialIconName;
     /** @defaultValue `true` */
     "aria-hidden"?: AriaAttributes["aria-hidden"];
-    name: MaterialIconName;
+    /** @defaultValue `MATERIAL_CONFIG.iconFamily` */
+    family?: MaterialIconFamily;
     children?: never;
 }
 /**
- * **Server Component**
+ * The `MaterialIcon` component is used for rendering a material icon using the
+ * Google Fonts stylesheet (handled separately). This is mostly a convenience
+ * wrapper around the `FontIcon` that will catch typos for the supported icon
+ * names.
+ *
+ * @example Simple Example
+ * ```tsx
+ * <MaterialIcon name="3k" />
+ * <MaterialIcon name="favorite" theme="primary" />
+ * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
+ * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @since 6.0.0
  */
 export declare const MaterialIcon: import("react").ForwardRefExoticComponent<MaterialIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/icon/MaterialIcon.js

@@ -3,15 +3,27 @@ import { forwardRef } from "react";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
+ * The `MaterialIcon` component is used for rendering a material icon using the
+ * Google Fonts stylesheet (handled separately). This is mostly a convenience
+ * wrapper around the `FontIcon` that will catch typos for the supported icon
+ * names.
  *
- * @remarks \@since 6.0.0
+ * @example Simple Example
+ * ```tsx
+ * <MaterialIcon name="3k" />
+ * <MaterialIcon name="favorite" theme="primary" />
+ * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @since 6.0.0
  */ export const MaterialIcon = /*#__PURE__*/ forwardRef(function MaterialIcon(props, ref) {
     const { "aria-hidden": ariaHidden = true, name, family = MATERIAL_CONFIG.iconFamily, theme, dense, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
-        ref: ref,
-        "aria-hidden": ariaHidden,
         ...remaining,
+        "aria-hidden": ariaHidden,
+        ref: ref,
         className: icon({
             type: "material",
             family,

package/dist/icon/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { icon, type MaterialIconClassNameOptions } from \"./styles.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialIconName;\n  children?: never;\n}\n\n/**\n * **Server Component**\n *\n * @remarks \\@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        ref={ref}\n        aria-hidden={ariaHidden}\n        {...remaining}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,IAAI,QAA2C,cAAc;AAYtE;;;;CAIC,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;QACCT,KAAKA;QACLU,eAAaT;QACZ,GAAGO,SAAS;QACbD,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 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://next.react-md.dev/components/icon | Icon Demos}\n * @see {@link https://next.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"}

package/dist/icon/MaterialSymbol.d.ts

@@ -11,7 +11,7 @@ declare module "react" {
     }
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, MaterialSymbolCustomization, Partial<MaterialSymbolClassNameOptions> {
     /** @defaultValue `true` */
@@ -20,7 +20,6 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
     children?: never;
 }
 /**
- * **Server Component**
  * This is a convenience component that provides autocomplete for all the
  * available material symbols via the `name` prop.
  *
@@ -28,10 +27,9 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
  * there are so many icons available. If it becomes an issue, just stop using
  * this component and define the icons inline instead.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { MaterialSymbol } from "@react-md/core";
+ * import { MaterialSymbol } from "@react-md/core/icon/MaterialSymbol";
  * import type { ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -51,6 +49,8 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
  * root.render(<App />);
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @since 6.0.0
  */
 export declare const MaterialSymbol: import("react").ForwardRefExoticComponent<MaterialSymbolProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/icon/MaterialSymbol.js

@@ -3,7 +3,6 @@ import { forwardRef } from "react";
 import { getFontVariationSettings } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
  * This is a convenience component that provides autocomplete for all the
  * available material symbols via the `name` prop.
  *
@@ -11,10 +10,9 @@ import { icon } from "./styles.js";
  * there are so many icons available. If it becomes an issue, just stop using
  * this component and define the icons inline instead.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { MaterialSymbol } from "@react-md/core";
+ * import { MaterialSymbol } from "@react-md/core/icon/MaterialSymbol";
  * import type { ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -34,7 +32,9 @@ import { icon } from "./styles.js";
  * root.render(<App />);
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
+ * @see {@link https://next.react-md.dev/components/material-icons|Available Material Icons}
+ * @since 6.0.0
  */ export const MaterialSymbol = /*#__PURE__*/ forwardRef(function MaterialSymbol(props, ref) {
     const { "aria-hidden": ariaHidden = true, className, name: symbol, style: propStyle, family: propFamily, fill, weight, grade, opticalSize, theme, dense, ...remaining } = props;
     const { style, family } = getFontVariationSettings({

package/dist/icon/MaterialSymbol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialSymbol.tsx"],"sourcesContent":["import { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { type MaterialSymbolName } from \"./material.js\";\nimport {\n  getFontVariationSettings,\n  type MaterialSymbolCustomization,\n  type MaterialSymbolFill,\n  type MaterialSymbolGrade,\n  type MaterialSymbolOpticalSize,\n  type MaterialSymbolWeight,\n} from \"./materialConfig.js\";\nimport { icon, type MaterialSymbolClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-symbol-fill\"?: MaterialSymbolFill;\n    \"--rmd-symbol-wght\"?: MaterialSymbolWeight;\n    \"--rmd-symbol-grad\"?: MaterialSymbolGrade;\n    \"--rmd-symbol-opsz\"?: MaterialSymbolOpticalSize;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface MaterialSymbolProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    MaterialSymbolCustomization,\n    Partial<MaterialSymbolClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialSymbolName;\n  children?: never;\n}\n\n/**\n * **Server Component**\n * This is a convenience component that provides autocomplete for all the\n * available material symbols via the `name` prop.\n *\n * Note: You might notice IDE slowdowns for files that use this component since\n * there are so many icons available. If it becomes an issue, just stop using\n * this component and define the icons inline instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { MaterialSymbol } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <MaterialSymbol symbol=\"close\" />\n *       <MaterialSymbol symbol=\"tune\" type=\"outline\" />\n *\n *       <MaterialSymbol symbol=\"add\" type=\"round\" />\n *       <MaterialSymbol symbol=\"air\" type=\"sharp\" />\n *     </>\n *   );\n * }\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(<App />);\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(\n  function MaterialSymbol(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      name: symbol,\n      style: propStyle,\n      family: propFamily,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      theme,\n      dense,\n      ...remaining\n    } = props;\n    const { style, family } = getFontVariationSettings({\n      style: propStyle,\n      fill,\n      weight,\n      grade,\n      opticalSize,\n      family: propFamily,\n    });\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        style={style}\n        className={icon({\n          type: \"symbol\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {symbol}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","getFontVariationSettings","icon","MaterialSymbol","props","ref","ariaHidden","className","name","symbol","style","propStyle","family","propFamily","fill","weight","grade","opticalSize","theme","dense","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SACEC,wBAAwB,QAMnB,sBAAsB;AAC7B,SAASC,IAAI,QAA6C,cAAc;AAwBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 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://next.react-md.dev/components/icon | Icon Demos}\n * @see {@link https://next.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"}

package/dist/icon/SVGIcon.d.ts

@@ -1,5 +1,8 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import { type SVGIconClassNameOptions } from "./styles.js";
+/**
+ * @since 6.0.0 Added the `inline` and `theme` props.
+ */
 export interface SVGIconProps extends HTMLAttributes<SVGSVGElement>, SVGIconClassNameOptions {
     /**
      * Boolean if the SVG should gain the `focusable` attribute. This is disabled
@@ -50,7 +53,6 @@ export interface SVGIconProps extends HTMLAttributes<SVGSVGElement>, SVGIconClas
      * This prop **should not** be used with the `children` prop as only one will
      * be rendered.
      *
-     * @remarks
      *
      * NOTE: IE **does not support** external SVGs. Please see the demo for more
      * details.
@@ -63,9 +65,9 @@ export interface SVGIconProps extends HTMLAttributes<SVGSVGElement>, SVGIconClas
     children?: ReactNode;
 }
 /**
- * **Server Component**
- *
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
+ *
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
  */
 export declare const SVGIcon: import("react").ForwardRefExoticComponent<SVGIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/icon/SVGIcon.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { icon } from "./styles.js";
 /**
- * **Server Component**
- *
  * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
  * sprite map as an icon.
+ *
+ * @see {@link https://next.react-md.dev/components/icon | Icon Demos}
  */ export const SVGIcon = /*#__PURE__*/ forwardRef(function SVGIcon(props, ref) {
     const { "aria-hidden": ariaHidden = true, focusable = "false", use, xmlns = use ? "http://www.w3.org/2000/svg" : undefined, viewBox = "0 0 24 24", dense = false, className, theme, inline, children: propChildren, ...remaining } = props;
     let children = propChildren;

package/dist/icon/SVGIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/SVGIcon.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { icon, type SVGIconClassNameOptions } from \"./styles.js\";\n\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   * @remarks\n   *\n   * NOTE: IE **does not support** external SVGs. Please see the demo for more\n   * details.\n   */\n  use?: string;\n\n  /**\n   * Any `<svg>` children to render to create your icon. This can not be used\n   * with the `use` prop.\n   */\n  children?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a\n * sprite map as an icon.\n */\nexport const SVGIcon = forwardRef<SVGSVGElement, SVGIconProps>(\n  function SVGIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      focusable = \"false\",\n      use,\n      xmlns = use ? \"http://www.w3.org/2000/svg\" : undefined,\n      viewBox = \"0 0 24 24\",\n      dense = false,\n      className,\n      theme,\n      inline,\n      children: propChildren,\n      ...remaining\n    } = props;\n\n    let children = propChildren;\n    if (!children && use) {\n      children = <use xlinkHref={use} />;\n    }\n\n    return (\n      <svg\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={icon({\n          type: \"svg\",\n          dense,\n          theme,\n          inline,\n          className,\n        })}\n        focusable={focusable}\n        xmlns={xmlns}\n        viewBox={viewBox}\n      >\n        {children}\n      </svg>\n    );\n  }\n);\n"],"names":["forwardRef","icon","SVGIcon","props","ref","ariaHidden","focusable","use","xmlns","undefined","viewBox","dense","className","theme","inline","children","propChildren","remaining","xlinkHref","svg","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAA6C,QAAQ;AACxE,SAASC,IAAI,QAAsC,cAAc;AAuEjE;;;;;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>,\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://next.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"}

package/dist/icon/TextIconSpacing.d.ts

@@ -17,7 +17,9 @@ export interface TextIconSpacingProps {
      * If this is not a valid react element, the icon will be wrapped in a
      * `<span>` instead with the class names applied.
      */
-    icon?: ReactElement | ReactNode;
+    icon?: ReactElement<{
+        className?: string;
+    }> | ReactNode;
     /**
      * Boolean if the icon should appear after the text instead of before.
      *
@@ -79,21 +81,19 @@ export interface TextIconSpacingProps {
      * Boolean if the icon and content are in a `column-reverse` or `row-reverse`
      * `flex-direction`. This will swap the different classnames as needed.
      *
-     * @remarks \@since 2.5.0
+     * @since 2.5.0
      * @defaultValue `false`
      */
     flexReverse?: boolean;
 }
 /**
- * **Server Component**
- *
  * Note: This component **must** be rendered within a flex container unless the
  * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { TextIconSpacing, FontIcon } from "@react-md/core";
+ * import { FontIcon } from "@react-md/core/icon/FontIcon";
+ * import { TextIconSpacing } from "@react-md/core/icon/TextIconSpacing"
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -105,10 +105,10 @@ export interface TextIconSpacingProps {
  * }
  * ```
  *
- * @example
- * Stacked Example
+ * @example Stacked Example
  * ```tsx
- * import { TextIconSpacing, FontIcon } from "@react-md/core";
+ * import { FontIcon } from "@react-md/core/icon/FontIcon";
+ * import { TextIconSpacing } from "@react-md/core/icon/TextIconSpacing"
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -119,5 +119,7 @@ export interface TextIconSpacingProps {
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}
  */
 export declare function TextIconSpacing(props: TextIconSpacingProps): ReactElement;

package/dist/icon/TextIconSpacing.js

@@ -2,15 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cnb } from "cnbuilder";
 import { Children, cloneElement, isValidElement } from "react";
 /**
- * **Server Component**
- *
  * Note: This component **must** be rendered within a flex container unless the
  * {@link TextIconSpacingProps.forceIconWrap} is set to `true`.
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { TextIconSpacing, FontIcon } from "@react-md/core";
+ * import { FontIcon } from "@react-md/core/icon/FontIcon";
+ * import { TextIconSpacing } from "@react-md/core/icon/TextIconSpacing"
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -22,10 +20,10 @@ import { Children, cloneElement, isValidElement } from "react";
  * }
  * ```
  *
- * @example
- * Stacked Example
+ * @example Stacked Example
  * ```tsx
- * import { TextIconSpacing, FontIcon } from "@react-md/core";
+ * import { FontIcon } from "@react-md/core/icon/FontIcon";
+ * import { TextIconSpacing } from "@react-md/core/icon/TextIconSpacing"
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -36,6 +34,8 @@ import { Children, cloneElement, isValidElement } from "react";
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/text-icon-spacing | TextIconSpacing Demos}
  */ export function TextIconSpacing(props) {
     const { className, icon: propIcon, children = null, stacked = false, iconAfter = false, flexReverse = false, forceIconWrap = false, beforeClassName = "rmd-icon--before", afterClassName = "rmd-icon--after", aboveClassName = "rmd-icon--above", belowClassName = "rmd-icon--below" } = props;
     if (!propIcon) {

package/dist/icon/TextIconSpacing.js.map

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