@react-md/core 1.0.0-next.14 → 1.0.0-next.16

package/dist/icon/MaterialIcon.d.ts

@@ -1,15 +1,30 @@
 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";
 /** @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" />
+ * ```
  *
  * @since 6.0.0
  */

package/dist/icon/MaterialIcon.js

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

package/dist/icon/MaterialSymbol.d.ts

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

package/dist/icon/MaterialSymbol.js

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

package/dist/icon/MaterialSymbol.js.map

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

package/dist/icon/SVGIcon.d.ts

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

package/dist/icon/SVGIcon.js

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

package/dist/icon/SVGIcon.js.map

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

package/dist/icon/TextIconSpacing.d.ts

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

package/dist/icon/TextIconSpacing.js

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

package/dist/icon/TextIconSpacing.js.map

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

package/dist/icon/_icon.scss

@@ -159,8 +159,8 @@ $_disable-icons: $disable-font and $disable-svg and $disable-symbol;
         }
 
         @if not $disable-inline {
-          &--vab {
-            vertical-align: bottom;
+          &--vam {
+            vertical-align: middle;
           }
         }
 

package/dist/icon/iconConfig.d.ts

@@ -190,6 +190,7 @@ export declare const ICON_CONFIG: ConfiguredIcons;
  *
  * @example Using SVG Material Icons
  * ```tsx
+ * "use client";
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";

package/dist/icon/iconConfig.js

@@ -111,6 +111,7 @@ import { FontIcon } from "./FontIcon.js";
  *
  * @example Using SVG Material Icons
  * ```tsx
+ * "use client";
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";

package/dist/icon/iconConfig.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/iconConfig.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\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 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\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\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.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  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 * import { configureIcons } from \"@react-md/core\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\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 *   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","selected","sort","upload","configureIcons","overrides","Object","entries","forEach","name","value","process","env","NODE_ENV","Error","getIcon","override"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AACA,SAASA,QAAQ,QAAQ,gBAAgB;AA4JzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,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,wBAAU,KAACjB;kBAAS;;IACpBkB,oBAAM,KAAClB;kBAAS;;IAChBmB,sBAAQ,KAACnB;kBAAS;;AACpB,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,SAASoB,eAAeC,SAA0B;IACvDC,OAAOC,OAAO,CAACF,WAAWG,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;QAC9C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAAEJ,CAAAA,QAAQxB,WAAU,GAAI;YACnE,MAAM,IAAI6B,MAAM,CAAC,EAAEL,KAAK,kCAAkC,CAAC;QAC7D;QAEAxB,WAAW,CAACwB,KAA8B,GAAGC;IAC/C;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASK,QACdN,IAA0B,EAC1BO,QAAoB;IAEpB,IAAI,OAAOA,aAAa,aAAa;QACnC,OAAOA;IACT;IAEA,OAAO/B,WAAW,CAACwB,KAAK;AAC1B"}
+{"version":3,"sources":["../../src/icon/iconConfig.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\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 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\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\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.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  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\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\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 *   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","selected","sort","upload","configureIcons","overrides","Object","entries","forEach","name","value","process","env","NODE_ENV","Error","getIcon","override"],"mappings":";AACA,SAASA,QAAQ,QAAQ,gBAAgB;AA4JzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,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,wBAAU,KAACjB;kBAAS;;IACpBkB,oBAAM,KAAClB;kBAAS;;IAChBmB,sBAAQ,KAACnB;kBAAS;;AACpB,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASoB,eAAeC,SAA0B;IACvDC,OAAOC,OAAO,CAACF,WAAWG,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;QAC9C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAAEJ,CAAAA,QAAQxB,WAAU,GAAI;YACnE,MAAM,IAAI6B,MAAM,CAAC,EAAEL,KAAK,kCAAkC,CAAC;QAC7D;QAEAxB,WAAW,CAACwB,KAA8B,GAAGC;IAC/C;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASK,QACdN,IAA0B,EAC1BO,QAAoB;IAEpB,IAAI,OAAOA,aAAa,aAAa;QACnC,OAAOA;IACT;IAEA,OAAO/B,WAAW,CAACwB,KAAK;AAC1B"}