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

package/dist/icon/_icon.scss

@@ -3,28 +3,132 @@
 @use "../transition/transition";
 @use "../utils";
 
+// Set to `true` to disable the font icon styles. You normally want to only have
+// one icon type enabled.
+//
+// @example Font Icons Only
+// ```scss
+// @use "@react-md/core" with (
+//   $disable-svg: true,
+//   $disable-symbol: true
+// );
+// ```
+// @type boolean
 $disable-font: false !default;
+
+// Set to `true` to disable the svg icon styles. You normally want to only have
+// one icon type enabled.
+//
+// @example SVG Icons Only
+// ```scss
+// @use "@react-md/core" with (
+//   $disable-font: true,
+//   $disable-symbol: true
+// );
+// ```
+// @type boolean
 $disable-svg: false !default;
+
+// Set to `true` to disable the symbol icon styles. You normally want to only have
+// one icon type enabled.
+//
+// @example Material Symbols Icons Only
+// ```scss
+// @use "@react-md/core" with (
+//   $disable-font: true,
+//   $disable-svg: true
+// );
+// ```
+// @type boolean
 $disable-symbol: false !default;
+
+// Set to `true` to disable the dense icon sizes
+// @type boolean
 $disable-dense: false !default;
+
+// Set to `true` to disable the styles for aligning icons within inline text
+// blocks (like paragraphs).
+// @type boolean
 $disable-inline: false !default;
+
+// Set to `true` to disable the `.rmd-icon--before` styles with the
+// `TextIconSpacing` component.
+// @type boolean
 $disable-spacing-before: false !default;
+
+// Set to `true` to disable the `.rmd-icon--after` styles with the
+// `TextIconSpacing` component.
+// @type boolean
 $disable-spacing-after: false !default;
+
+// Set to `true` to disable the `.rmd-icon--above` styles with the
+// `TextIconSpacing` component.
+// @type boolean
 $disable-spacing-above: false !default;
+
+// Set to `true` to disable the `.rmd-icon--below` styles with the
+// `TextIconSpacing` component.
+// @type boolean
 $disable-spacing-below: false !default;
+
+// Set to `true` to disable the icon rotator styles
+// @type boolean
 $disable-rotator: false !default;
 
+// The default icon color when using the global light theme
+// @type Color
 $light-theme-color: color.adjust(#000, $lightness: 46%) !default;
+
+// The default icon color when using the global dark theme
+// @type Color
 $dark-theme-color: color.adjust(#fff, $lightness: -30%) !default;
 
+// The default icon color
+// @type Color
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
+// The default icon size
+// @type number
 $size: 1.5rem !default;
+
+// The default icon dense size
+// @type number
 $dense-size: 1.25rem !default;
 
+// This is the default material symbol fill value. It should be one of:
+// - `0`
+// - `1`
+//
+// @type number
 $symbol-fill: 0 !default;
+
+// This is the default material symbol weight value. It should be one of:
+// - `100`
+// - `200`
+// - `300`
+// - `400`
+// - `500`
+// - `600`
+// - `700`
+//
+// @type number
 $symbol-weight: 400 !default;
+
+// This is the default material symbol grade value. It should be one of:
+// - `-25`
+// - `0`
+// - `200`
+//
+// @type number
 $symbol-grade: 0 !default;
+
+// This is the default material symbol fill value. It should be one of:
+// - `20`
+// - `24`
+// - `40`
+// - `48`
+//
+// @type number
 $symbol-optical-size: 48 !default;
 
 $_validated-fill: utils.validate((0, 1), $symbol-fill, "$symbol-fill");
@@ -40,12 +144,27 @@ $_validated_optical-size: utils.validate(
   "$symbol-optical-size"
 );
 
+// The default spacing for the `TextIconSpacing` component or anytime icons
+// should be separated from other content.
+//
+// @type number
 $spacing: 0.5rem !default;
 
+// The default `IconRotator` starting position
+// @type string
 $rotate-from: 0deg !default;
+
+// The default `IconRotator` ending position
+// @type string
 $rotate-to: 180deg !default;
+
+// The default `IconRotator` transition duration
+// @type number
 $rotate-duration: transition.$linear-duration !default;
 
+// The available configurable css variables and mostly used internally for the
+// `get-var`, `set-var`, and `use-var` utils.
+// @type List
 $variables: (
   color,
   size,
@@ -61,6 +180,9 @@ $variables: (
 // shouldn't really use react-md without icons though...
 $_disable-icons: $disable-font and $disable-svg and $disable-symbol;
 
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value
+// @returns {string} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "icon");
   @if $fallback {
@@ -70,34 +192,45 @@ $_disable-icons: $disable-font and $disable-svg and $disable-symbol;
   @return var(#{$var});
 }
 
+// @param {string} name - The supported variable name
+// @param {any} value - The value to set the variable to. Supports `null` which
+// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "icon")}: #{$value};
   }
 }
 
+// @param {string} property - The css property to apply the variable to
+// @param {string} name - The supported variable name
+// @param {any} fallback - An optional fallback value if the variable has not
+// been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $_disable-icons {
     @include set-var(color, $light-theme-color);
   }
 }
 
+// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $_disable-icons {
     @include set-var(color, $dark-theme-color);
   }
 }
 
+// Applies the dense height variables
 @mixin dense {
   @if $dense-size {
     @include set-var(size, $dense-size);
   }
 }
 
+// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $_disable-icons {
     @include set-var(color, $color);
@@ -118,6 +251,10 @@ $_disable-icons: $disable-font and $disable-svg and $disable-symbol;
   }
 }
 
+// Generates all the styles based on feature flags.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $_disable-icons {
     @include utils.optional-layer(icon, $disable-layer) {
@@ -159,20 +296,32 @@ $_disable-icons: $disable-font and $disable-svg and $disable-symbol;
         }
 
         @if not $disable-inline {
-          &--vab {
-            vertical-align: bottom;
+          &--vam {
+            vertical-align: middle;
           }
         }
 
         @if not $disable-spacing-before {
           &--before {
-            @include utils.auto-rtl(margin-right, get-var(spacing), 0);
+            @include use-var(margin-right, spacing);
+
+            @include utils.rtl {
+              @include use-var(margin-left, spacing);
+
+              margin-right: 0;
+            }
           }
         }
 
         @if not $disable-spacing-after {
           &--after {
-            @include utils.auto-rtl(margin-left, get-var(spacing), 0);
+            @include use-var(margin-left, spacing);
+
+            @include utils.rtl {
+              @include use-var(margin-right, spacing);
+
+              margin-left: 0;
+            }
           }
         }
 

package/dist/icon/iconConfig.d.ts

@@ -105,6 +105,12 @@ export interface ConfigurableIcons {
      * @defaultValue `<FontIcon>radio_button_checked</FontIcon>`
      */
     radioChecked?: ReactNode;
+    /**
+     * The icon to use when removing elements.
+     *
+     * @defaultValue `<FontIcon>cancel</FontIcon>`
+     */
+    remove?: ReactNode;
     /**
      * The icon to use for showing that something has been selected that is not a
      * radio or checkbox. This is used internally for the `Chip` in the
@@ -146,6 +152,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * import { ICON_CONFIG } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -176,6 +183,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * ICON_CONFIG.password = <RemoveRedEyeIcon />;
  * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;
  * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;
+ * ICON_CONFIG.remove = <CancelIcon />;
  * ICON_CONFIG.selected = <CheckIcon />;
  * ICON_CONFIG.sort = <ArrowUpwardIcon />;
  * ICON_CONFIG.upload = <FileUploadIcon />;
@@ -194,6 +202,7 @@ export declare const ICON_CONFIG: ConfiguredIcons;
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -225,6 +234,7 @@ export declare const ICON_CONFIG: ConfiguredIcons;
  *   password: <RemoveRedEyeIcon />,
  *   radio: <RadioButtonUncheckedIcon />,
  *   radioChecked: <RadioButtonCheckedIcon />,
+ *   remove: <CancelIcon />,
  *   selected: <CheckIcon />,
  *   sort: <ArrowUpwardIcon />,
  *   upload: <FileUploadIcon />,

package/dist/icon/iconConfig.js

@@ -13,6 +13,7 @@ import { FontIcon } from "./FontIcon.js";
  * import { ICON_CONFIG } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -43,6 +44,7 @@ import { FontIcon } from "./FontIcon.js";
  * ICON_CONFIG.password = <RemoveRedEyeIcon />;
  * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;
  * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;
+ * ICON_CONFIG.remove = <CancelIcon />;
  * ICON_CONFIG.selected = <CheckIcon />;
  * ICON_CONFIG.sort = <ArrowUpwardIcon />;
  * ICON_CONFIG.upload = <FileUploadIcon />;
@@ -96,6 +98,9 @@ import { FontIcon } from "./FontIcon.js";
     radioChecked: /*#__PURE__*/ _jsx(FontIcon, {
         children: "radio_button_checked"
     }),
+    remove: /*#__PURE__*/ _jsx(FontIcon, {
+        children: "cancel"
+    }),
     selected: /*#__PURE__*/ _jsx(FontIcon, {
         children: "check"
     }),
@@ -115,6 +120,7 @@ import { FontIcon } from "./FontIcon.js";
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
+ * import CancelIcon from "@react-md/material-icons/CancelIcon";
  * import CheckBoxIcon from "@react-md/material-icons/CheckBoxIcon";
  * import CheckBoxOutlineBlankIcon from "@react-md/material-icons/CheckBoxOutlineBlankIcon";
  * import CheckIcon from "@react-md/material-icons/CheckIcon";
@@ -146,6 +152,7 @@ import { FontIcon } from "./FontIcon.js";
  *   password: <RemoveRedEyeIcon />,
  *   radio: <RadioButtonUncheckedIcon />,
  *   radioChecked: <RadioButtonCheckedIcon />,
+ *   remove: <CancelIcon />,
  *   selected: <CheckIcon />,
  *   sort: <ArrowUpwardIcon />,
  *   upload: <FileUploadIcon />,

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 * \"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"}
+{"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 when removing elements.\n   *\n   * @defaultValue `<FontIcon>cancel</FontIcon>`\n   */\n  remove?: ReactNode;\n\n  /**\n   * The icon to use for showing that something has been selected that is not a\n   * radio or checkbox. This is used internally for the `Chip` in the\n   * `@react-md/core` package.\n   *\n   * @defaultValue `<FontIcon>check</FontIcon>`\n   */\n  selected?: ReactNode;\n\n  /**\n   * The icon to represent sorting content.\n   *\n   * @defaultValue `<FontIcon>arrow_upward</FontIcon>`\n   */\n  sort?: ReactNode;\n\n  /**\n   * The icon to use for the `FileInput` component (normally file\n   * uploads).\n   *\n   * @since 5.0.0\n   * @defaultValue `<FontIcon>file_upload</FontIcon>`\n   */\n  upload?: ReactNode;\n}\n\nexport type ConfiguredIcons = Required<ConfigurableIcons>;\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableIconName = keyof ConfigurableIcons;\n\n/**\n * This is a **mutable** object of icons that `react-md` will use for rendering\n * icons within components. The defaults will use the font versions of material\n * icons.\n *\n * @see {@link configureIcons} for a quick way of overriding the configuration\n * or the example below.\n *\n * @example Mutating this object\n * ```tsx\n * import { ICON_CONFIG } from \"@react-md/core\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * ICON_CONFIG.back = <KeyboardArrowLeftIcon />;\n * ICON_CONFIG.close = <CloseIcon />;\n * ICON_CONFIG.checkbox = <CheckBoxOutlineBlankIcon />;\n * ICON_CONFIG.checkboxChecked = <CheckBoxIcon />;\n * ICON_CONFIG.checkboxIndeterminate = <IndeterminateCheckBoxIcon />;\n * ICON_CONFIG.dropdown = <ArrowDropDownIcon />;\n * ICON_CONFIG.error = <ErrorOutlineIcon />;\n * ICON_CONFIG.expander = <KeyboardArrowDownIcon />;\n * ICON_CONFIG.forward = <KeyboardArrowRightIcon />;\n * ICON_CONFIG.menu = <MenuIcon />;\n * ICON_CONFIG.notification = <NotificationsIcon />;\n * ICON_CONFIG.password = <RemoveRedEyeIcon />;\n * ICON_CONFIG.radio = <RadioButtonUncheckedIcon />;\n * ICON_CONFIG.radioChecked = <RadioButtonCheckedIcon />;\n * ICON_CONFIG.remove = <CancelIcon />;\n * ICON_CONFIG.selected = <CheckIcon />;\n * ICON_CONFIG.sort = <ArrowUpwardIcon />;\n * ICON_CONFIG.upload = <FileUploadIcon />;\n * ```\n *\n *\n * @since 6.0.0\n */\nexport const ICON_CONFIG: ConfiguredIcons = {\n  back: <FontIcon>keyboard_arrow_left</FontIcon>,\n  clear: <FontIcon>clear</FontIcon>,\n  close: <FontIcon>close</FontIcon>,\n  checkbox: <FontIcon>check_box_outline_blank</FontIcon>,\n  checkboxChecked: <FontIcon>check_box</FontIcon>,\n  checkboxIndeterminate: <FontIcon>indeterminate_check_box</FontIcon>,\n  dropdown: <FontIcon>arrow_drop_down</FontIcon>,\n  error: <FontIcon>error_outline</FontIcon>,\n  expander: <FontIcon>keyboard_arrow_down</FontIcon>,\n  forward: <FontIcon>keyboard_arrow_right</FontIcon>,\n  menu: <FontIcon>menu</FontIcon>,\n  notification: <FontIcon>notifications</FontIcon>,\n  password: <FontIcon>remove_red_eye</FontIcon>,\n  radio: <FontIcon>radio_button_unchecked</FontIcon>,\n  radioChecked: <FontIcon>radio_button_checked</FontIcon>,\n  remove: <FontIcon>cancel</FontIcon>,\n  selected: <FontIcon>check</FontIcon>,\n  sort: <FontIcon>arrow_upward</FontIcon>,\n  upload: <FontIcon>file_upload</FontIcon>,\n};\n\n/**\n * A convenience helper to reconfigure icons within `react-md`.\n *\n * @example Using SVG Material Icons\n * ```tsx\n * \"use client\";\n * import { configureIcons } from \"@react-md/core\";\n * import ArrowDropDownIcon from \"@react-md/material-icons/ArrowDropDownIcon\";\n * import ArrowUpwardIcon from \"@react-md/material-icons/ArrowUpwardIcon\";\n * import CancelIcon from \"@react-md/material-icons/CancelIcon\";\n * import CheckBoxIcon from \"@react-md/material-icons/CheckBoxIcon\";\n * import CheckBoxOutlineBlankIcon from \"@react-md/material-icons/CheckBoxOutlineBlankIcon\";\n * import CheckIcon from \"@react-md/material-icons/CheckIcon\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import ErrorOutlineIcon from \"@react-md/material-icons/ErrorOutlineIcon\";\n * import FileUploadIcon from \"@react-md/material-icons/FileUploadIcon\";\n * import IndeterminateCheckBoxIcon from \"@react-md/material-icons/IndeterminateCheckBoxIcon\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\";\n * import KeyboardArrowLeftIcon from \"@react-md/material-icons/KeyboardArrowLeftIcon\";\n * import KeyboardArrowRightIcon from \"@react-md/material-icons/KeyboardArrowRightIcon\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import NotificationsIcon from \"@react-md/material-icons/NotificationsIcon\";\n * import RadioButtonCheckedIcon from \"@react-md/material-icons/RadioButtonCheckedIcon\";\n * import RadioButtonUncheckedIcon from \"@react-md/material-icons/RadioButtonUncheckedIcon\";\n * import RemoveRedEyeIcon from \"@react-md/material-icons/RemoveRedEyeIcon\";\n *\n * configureIcons({\n *   back: <KeyboardArrowLeftIcon />,\n *   close: <CloseIcon />,\n *   checkbox: <CheckBoxOutlineBlankIcon />,\n *   checkboxChecked: <CheckBoxIcon />,\n *   checkboxIndeterminate: <IndeterminateCheckBoxIcon />,\n *   dropdown: <ArrowDropDownIcon />,\n *   error: <ErrorOutlineIcon />,\n *   expander: <KeyboardArrowDownIcon />,\n *   forward: <KeyboardArrowRightIcon />,\n *   menu: <MenuIcon />,\n *   notification: <NotificationsIcon />,\n *   password: <RemoveRedEyeIcon />,\n *   radio: <RadioButtonUncheckedIcon />,\n *   radioChecked: <RadioButtonCheckedIcon />,\n *   remove: <CancelIcon />,\n *   selected: <CheckIcon />,\n *   sort: <ArrowUpwardIcon />,\n *   upload: <FileUploadIcon />,\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function configureIcons(overrides: ConfiguredIcons): void {\n  Object.entries(overrides).forEach(([name, value]) => {\n    if (process.env.NODE_ENV !== \"production\" && !(name in ICON_CONFIG)) {\n      throw new Error(`${name} is an invalid react-md icon name.`);\n    }\n\n    ICON_CONFIG[name as keyof ConfiguredIcons] = value;\n  });\n}\n\n/**\n * This is mostly an internal helper to get a specific icon by name and allowing\n * a custom prop to override this behavior. The main benefit of this function is\n * that icons can be removed if the override is set to `null`.\n *\n * @since 6.0.0\n */\nexport function getIcon(\n  name: ConfigurableIconName,\n  override?: ReactNode\n): ReactNode {\n  if (typeof override !== \"undefined\") {\n    return override;\n  }\n\n  return ICON_CONFIG[name];\n}\n"],"names":["FontIcon","ICON_CONFIG","back","clear","close","checkbox","checkboxChecked","checkboxIndeterminate","dropdown","error","expander","forward","menu","notification","password","radio","radioChecked","remove","selected","sort","upload","configureIcons","overrides","Object","entries","forEach","name","value","process","env","NODE_ENV","Error","getIcon","override"],"mappings":";AACA,SAASA,QAAQ,QAAQ,gBAAgB;AAmKzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDC,GACD,OAAO,MAAMC,cAA+B;IAC1CC,oBAAM,KAACF;kBAAS;;IAChBG,qBAAO,KAACH;kBAAS;;IACjBI,qBAAO,KAACJ;kBAAS;;IACjBK,wBAAU,KAACL;kBAAS;;IACpBM,+BAAiB,KAACN;kBAAS;;IAC3BO,qCAAuB,KAACP;kBAAS;;IACjCQ,wBAAU,KAACR;kBAAS;;IACpBS,qBAAO,KAACT;kBAAS;;IACjBU,wBAAU,KAACV;kBAAS;;IACpBW,uBAAS,KAACX;kBAAS;;IACnBY,oBAAM,KAACZ;kBAAS;;IAChBa,4BAAc,KAACb;kBAAS;;IACxBc,wBAAU,KAACd;kBAAS;;IACpBe,qBAAO,KAACf;kBAAS;;IACjBgB,4BAAc,KAAChB;kBAAS;;IACxBiB,sBAAQ,KAACjB;kBAAS;;IAClBkB,wBAAU,KAAClB;kBAAS;;IACpBmB,oBAAM,KAACnB;kBAAS;;IAChBoB,sBAAQ,KAACpB;kBAAS;;AACpB,EAAE;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDC,GACD,OAAO,SAASqB,eAAeC,SAA0B;IACvDC,OAAOC,OAAO,CAACF,WAAWG,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;QAC9C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAAEJ,CAAAA,QAAQzB,WAAU,GAAI;YACnE,MAAM,IAAI8B,MAAM,GAAGL,KAAK,kCAAkC,CAAC;QAC7D;QAEAzB,WAAW,CAACyB,KAA8B,GAAGC;IAC/C;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASK,QACdN,IAA0B,EAC1BO,QAAoB;IAEpB,IAAI,OAAOA,aAAa,aAAa;QACnC,OAAOA;IACT;IAEA,OAAOhC,WAAW,CAACyB,KAAK;AAC1B"}

package/dist/icon/materialConfig.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/materialConfig.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialIconCustomization {\n  /**\n   * @defaultValue `\"filled\"`\n   */\n  iconFamily?: MaterialIconFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialIconConfiguration = Required<MaterialIconCustomization>;\n\n/**\n * Fill gives you the ability to modify the default icon style. A single icon\n * can render both unfilled and filled states.\n *\n * To convey a state transition, use the fill axis for animation or\n * interaction. The values are 0 for default or 1 for completely filled. Along\n * with the weight axis, the fill also impacts the look of the icon.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolFill = 0 | 1;\n\n/**\n * Weight defines the symbol’s stroke weight, with a range of weights between\n * thin (100) and bold (700). Weight can also affect the overall size of the\n * symbol.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;\n\n/**\n * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n * granular than adjustments to weight and have a small impact on the size of\n * the symbol.\n *\n * Grade is also available in some text fonts. You can match grade levels\n * between text and symbols for a harmonious visual effect. For example, if\n * the text font has a -25 grade value, the symbols can match it with a\n * suitable value, say -25.\n *\n * You can use grade for different needs:\n *\n * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n *   dark background, use a low grade.\n * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n *   positive grade.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolGrade = -25 | 0 | 200;\n\n/**\n * Optical Sizes range from 20dp to 48dp.\n *\n * For the image to look the same at different sizes, the stroke weight\n * (thickness) changes as the icon size scales. Optical Size offers a way to\n * automatically adjust the stroke weight when you increase or decrease the\n * symbol size.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;\n\n/**\n * The comments for each customizable part was copied from\n * https://fonts.google.com/icons?icon.set=Material+Symbols and clicking the\n * info icon next to each property.\n *\n * @see https://fonts.google.com/icons?icon.set=Material+Symbols\n * @since 6.0.0\n */\nexport interface MaterialSymbolCustomization {\n  /**\n   * Fill gives you the ability to modify the default icon style. A single icon\n   * can render both unfilled and filled states.\n   *\n   * To convey a state transition, use the fill axis for animation or\n   * interaction. The values are 0 for default or 1 for completely filled. Along\n   * with the weight axis, the fill also impacts the look of the icon.\n   *\n   * @defaultValue `0`\n   */\n  fill?: MaterialSymbolFill;\n\n  /**\n   * Weight defines the symbol’s stroke weight, with a range of weights between\n   * thin (100) and bold (700). Weight can also affect the overall size of the\n   * symbol.\n   *\n   * @defaultValue `400`\n   */\n  weight?: MaterialSymbolWeight;\n\n  /**\n   * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n   * granular than adjustments to weight and have a small impact on the size of\n   * the symbol.\n   *\n   * Grade is also available in some text fonts. You can match grade levels\n   * between text and symbols for a harmonious visual effect. For example, if\n   * the text font has a -25 grade value, the symbols can match it with a\n   * suitable value, say -25.\n   *\n   * You can use grade for different needs:\n   *\n   * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n   *   dark background, use a low grade.\n   * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n   *   positive grade.\n   *\n   * @defaultValue `0`\n   */\n  grade?: MaterialSymbolGrade;\n\n  /**\n   * Optical Sizes range from 20dp to 48dp.\n   *\n   * For the image to look the same at different sizes, the stroke weight\n   * (thickness) changes as the icon size scales. Optical Size offers a way to\n   * automatically adjust the stroke weight when you increase or decrease the\n   * symbol size.\n   *\n   * @defaultValue `48`\n   */\n  opticalSize?: MaterialSymbolOpticalSize;\n\n  /**\n   * @defaultValue `\"outlined\"`\n   */\n  family?: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialConfiguration\n  extends MaterialIconConfiguration,\n    MaterialSymbolConfiguration {}\n\n/**\n * @since 6.0.0\n */\nexport const MATERIAL_CONFIG: MaterialConfiguration = {\n  fill: 0,\n  weight: 400,\n  grade: 0,\n  opticalSize: 48,\n  iconFamily: \"filled\",\n  family: \"outlined\",\n};\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolFontVariationSettings {\n  style?: CSSProperties;\n  family: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getFontVariationSettings(\n  options: MaterialSymbolCustomization & { style?: CSSProperties }\n): MaterialSymbolFontVariationSettings {\n  let { style } = options;\n  const {\n    fill = MATERIAL_CONFIG.fill,\n    grade = MATERIAL_CONFIG.grade,\n    opticalSize = MATERIAL_CONFIG.opticalSize,\n    weight = MATERIAL_CONFIG.weight,\n    family: symbolFamily = MATERIAL_CONFIG.family,\n  } = options;\n  if (\n    !style?.fontVariationSettings &&\n    (fill !== MATERIAL_CONFIG.fill ||\n      grade !== MATERIAL_CONFIG.grade ||\n      opticalSize !== MATERIAL_CONFIG.opticalSize ||\n      weight !== MATERIAL_CONFIG.weight)\n  ) {\n    style = {\n      ...style,\n      fontVariationSettings: `\"FILL\" ${fill}, \"wght\" ${weight}, \"GRAD\" ${grade}, \"opsz\" ${opticalSize}`,\n    };\n  }\n\n  return { family: symbolFamily, style };\n}\n"],"names":["MATERIAL_CONFIG","fill","weight","grade","opticalSize","iconFamily","family","getFontVariationSettings","options","style","symbolFamily","fontVariationSettings"],"mappings":"AA4JA;;CAEC,GACD,OAAO,MAAMA,kBAAyC;IACpDC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC,YAAY;IACZC,QAAQ;AACV,EAAE;AAUF;;;CAGC,GACD,OAAO,SAASC,yBACdC,OAAgE;IAEhE,IAAI,EAAEC,KAAK,EAAE,GAAGD;IAChB,MAAM,EACJP,OAAOD,gBAAgBC,IAAI,EAC3BE,QAAQH,gBAAgBG,KAAK,EAC7BC,cAAcJ,gBAAgBI,WAAW,EACzCF,SAASF,gBAAgBE,MAAM,EAC/BI,QAAQI,eAAeV,gBAAgBM,MAAM,EAC9C,GAAGE;IACJ,IACE,CAACC,OAAOE,yBACPV,CAAAA,SAASD,gBAAgBC,IAAI,IAC5BE,UAAUH,gBAAgBG,KAAK,IAC/BC,gBAAgBJ,gBAAgBI,WAAW,IAC3CF,WAAWF,gBAAgBE,MAAM,AAAD,GAClC;QACAO,QAAQ;YACN,GAAGA,KAAK;YACRE,uBAAuB,CAAC,OAAO,EAAEV,KAAK,SAAS,EAAEC,OAAO,SAAS,EAAEC,MAAM,SAAS,EAAEC,YAAY,CAAC;QACnG;IACF;IAEA,OAAO;QAAEE,QAAQI;QAAcD;IAAM;AACvC"}
+{"version":3,"sources":["../../src/icon/materialConfig.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport {\n  type MaterialIconFamily,\n  type MaterialSymbolFamily,\n} from \"./material.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialIconCustomization {\n  /**\n   * @defaultValue `\"filled\"`\n   */\n  iconFamily?: MaterialIconFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialIconConfiguration = Required<MaterialIconCustomization>;\n\n/**\n * Fill gives you the ability to modify the default icon style. A single icon\n * can render both unfilled and filled states.\n *\n * To convey a state transition, use the fill axis for animation or\n * interaction. The values are 0 for default or 1 for completely filled. Along\n * with the weight axis, the fill also impacts the look of the icon.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolFill = 0 | 1;\n\n/**\n * Weight defines the symbol’s stroke weight, with a range of weights between\n * thin (100) and bold (700). Weight can also affect the overall size of the\n * symbol.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;\n\n/**\n * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n * granular than adjustments to weight and have a small impact on the size of\n * the symbol.\n *\n * Grade is also available in some text fonts. You can match grade levels\n * between text and symbols for a harmonious visual effect. For example, if\n * the text font has a -25 grade value, the symbols can match it with a\n * suitable value, say -25.\n *\n * You can use grade for different needs:\n *\n * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n *   dark background, use a low grade.\n * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n *   positive grade.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolGrade = -25 | 0 | 200;\n\n/**\n * Optical Sizes range from 20dp to 48dp.\n *\n * For the image to look the same at different sizes, the stroke weight\n * (thickness) changes as the icon size scales. Optical Size offers a way to\n * automatically adjust the stroke weight when you increase or decrease the\n * symbol size.\n *\n * @since 6.0.0\n */\nexport type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;\n\n/**\n * The comments for each customizable part was copied from\n * https://fonts.google.com/icons?icon.set=Material+Symbols and clicking the\n * info icon next to each property.\n *\n * @see https://fonts.google.com/icons?icon.set=Material+Symbols\n * @since 6.0.0\n */\nexport interface MaterialSymbolCustomization {\n  /**\n   * Fill gives you the ability to modify the default icon style. A single icon\n   * can render both unfilled and filled states.\n   *\n   * To convey a state transition, use the fill axis for animation or\n   * interaction. The values are 0 for default or 1 for completely filled. Along\n   * with the weight axis, the fill also impacts the look of the icon.\n   *\n   * @defaultValue `0`\n   */\n  fill?: MaterialSymbolFill;\n\n  /**\n   * Weight defines the symbol’s stroke weight, with a range of weights between\n   * thin (100) and bold (700). Weight can also affect the overall size of the\n   * symbol.\n   *\n   * @defaultValue `400`\n   */\n  weight?: MaterialSymbolWeight;\n\n  /**\n   * Weight and grade affect a symbol’s thickness. Adjustments to grade are more\n   * granular than adjustments to weight and have a small impact on the size of\n   * the symbol.\n   *\n   * Grade is also available in some text fonts. You can match grade levels\n   * between text and symbols for a harmonious visual effect. For example, if\n   * the text font has a -25 grade value, the symbols can match it with a\n   * suitable value, say -25.\n   *\n   * You can use grade for different needs:\n   *\n   * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a\n   *   dark background, use a low grade.\n   * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the\n   *   positive grade.\n   *\n   * @defaultValue `0`\n   */\n  grade?: MaterialSymbolGrade;\n\n  /**\n   * Optical Sizes range from 20dp to 48dp.\n   *\n   * For the image to look the same at different sizes, the stroke weight\n   * (thickness) changes as the icon size scales. Optical Size offers a way to\n   * automatically adjust the stroke weight when you increase or decrease the\n   * symbol size.\n   *\n   * @defaultValue `48`\n   */\n  opticalSize?: MaterialSymbolOpticalSize;\n\n  /**\n   * @defaultValue `\"outlined\"`\n   */\n  family?: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialConfiguration\n  extends MaterialIconConfiguration,\n    MaterialSymbolConfiguration {}\n\n/**\n * @since 6.0.0\n */\nexport const MATERIAL_CONFIG: MaterialConfiguration = {\n  fill: 0,\n  weight: 400,\n  grade: 0,\n  opticalSize: 48,\n  iconFamily: \"filled\",\n  family: \"outlined\",\n};\n\n/**\n * @since 6.0.0\n */\nexport interface MaterialSymbolFontVariationSettings {\n  style?: CSSProperties;\n  family: MaterialSymbolFamily;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getFontVariationSettings(\n  options: MaterialSymbolCustomization & { style?: CSSProperties }\n): MaterialSymbolFontVariationSettings {\n  let { style } = options;\n  const {\n    fill = MATERIAL_CONFIG.fill,\n    grade = MATERIAL_CONFIG.grade,\n    opticalSize = MATERIAL_CONFIG.opticalSize,\n    weight = MATERIAL_CONFIG.weight,\n    family: symbolFamily = MATERIAL_CONFIG.family,\n  } = options;\n  if (\n    !style?.fontVariationSettings &&\n    (fill !== MATERIAL_CONFIG.fill ||\n      grade !== MATERIAL_CONFIG.grade ||\n      opticalSize !== MATERIAL_CONFIG.opticalSize ||\n      weight !== MATERIAL_CONFIG.weight)\n  ) {\n    style = {\n      ...style,\n      fontVariationSettings: `\"FILL\" ${fill}, \"wght\" ${weight}, \"GRAD\" ${grade}, \"opsz\" ${opticalSize}`,\n    };\n  }\n\n  return { family: symbolFamily, style };\n}\n"],"names":["MATERIAL_CONFIG","fill","weight","grade","opticalSize","iconFamily","family","getFontVariationSettings","options","style","symbolFamily","fontVariationSettings"],"mappings":"AA4JA;;CAEC,GACD,OAAO,MAAMA,kBAAyC;IACpDC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC,YAAY;IACZC,QAAQ;AACV,EAAE;AAUF;;;CAGC,GACD,OAAO,SAASC,yBACdC,OAAgE;IAEhE,IAAI,EAAEC,KAAK,EAAE,GAAGD;IAChB,MAAM,EACJP,OAAOD,gBAAgBC,IAAI,EAC3BE,QAAQH,gBAAgBG,KAAK,EAC7BC,cAAcJ,gBAAgBI,WAAW,EACzCF,SAASF,gBAAgBE,MAAM,EAC/BI,QAAQI,eAAeV,gBAAgBM,MAAM,EAC9C,GAAGE;IACJ,IACE,CAACC,OAAOE,yBACPV,CAAAA,SAASD,gBAAgBC,IAAI,IAC5BE,UAAUH,gBAAgBG,KAAK,IAC/BC,gBAAgBJ,gBAAgBI,WAAW,IAC3CF,WAAWF,gBAAgBE,MAAM,AAAD,GAClC;QACAO,QAAQ;YACN,GAAGA,KAAK;YACRE,uBAAuB,CAAC,OAAO,EAAEV,KAAK,SAAS,EAAEC,OAAO,SAAS,EAAEC,MAAM,SAAS,EAAEC,aAAa;QACnG;IACF;IAEA,OAAO;QAAEE,QAAQI;QAAcD;IAAM;AACvC"}

package/dist/icon/styles.js

@@ -16,7 +16,7 @@ const rotatorStyles = bem("rmd-icon-rotator");
         svg: isSvg,
         font: isFont || isMaterial,
         symbol: isSymbol,
-        vab: inline,
+        vam: inline,
         dense
     }), isSymbol && `material-symbols-${family}`, isMaterial && `material-icons${family === "filled" ? "" : `-${family === "rounded" ? "round" : family}`}`, cssUtils({
         textColor: theme

package/dist/icon/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextColor, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport type { MaterialIconFamily, MaterialSymbolFamily } from \"./material.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-icon-color\"?: string;\n    \"--rmd-icon-size\"?: string | number;\n    \"--rmd-icon-spacing\"?: string | number;\n    \"--rmd-icon-rotate-from\"?: string | number;\n    \"--rmd-icon-rotate-to\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-icon\");\nconst rotatorStyles = bem(\"rmd-icon-rotator\");\n\n/** @since 6.0.0 */\nexport interface SVGIconClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional theme color to apply to the icon. When this is `undefined`, the\n   * default icon color will be used instead.\n   *\n   * - `primary -> $primary-color`\n   * - `secondary -> $secondary-color`\n   * - `warning -> $warning-color`\n   * - `success -> $success-color`\n   * - `error -> $error-color`\n   * - `text-primary -> $text-primary-color`\n   * - `text-secondary -> $text-primary-color`\n   * - `text-hint -> $text-hint-color`\n   * - `text-disabled -> $text-disabled-color`\n   */\n  theme?: ThemeColor | TextColor;\n\n  /**\n   * Boolean if the font icon should use the dense spec.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` if the icon should display inline with other text (like\n   * a paragraph) by applying `vertical-align: bottom`.\n   *\n   * @example\n   * ```tsx\n   * <Typography>\n   *   <InfoIcon inline className=\"rmd-icon--before\" />\n   *   Some additional information around xyz.\n   * </Typography>\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FontIconClassNameOptions extends SVGIconClassNameOptions {\n  /**\n   * The font icon class name to use.\n   *\n   * @defaultValue `\"material-icons\"`\n   */\n  iconClassName?: string;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {\n  family: MaterialIconFamily;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialSymbolClassNameOptions\n  extends SVGIconClassNameOptions {\n  family: MaterialSymbolFamily;\n}\n\n/** @since 6.0.0 */\nexport type IconClassNameOptions =\n  | ({ type: \"font\" } & FontIconClassNameOptions)\n  | ({ type: \"svg\" } & SVGIconClassNameOptions)\n  | ({ type: \"material\" } & MaterialIconClassNameOptions)\n  | ({ type: \"symbol\" } & MaterialSymbolClassNameOptions);\n\n/**\n *\n * @since 6.0.0\n */\nexport function icon(options: IconClassNameOptions): string {\n  const {\n    className,\n    type,\n    theme,\n    family = \"\",\n    dense = false,\n    inline = false,\n    iconClassName,\n  } = options as FontIconClassNameOptions &\n    SVGIconClassNameOptions & {\n      type: \"font\" | \"svg\" | \"symbol\" | \"material\";\n      family?: MaterialIconFamily;\n    };\n\n  const isFont = type === \"font\";\n  const isSvg = type === \"svg\";\n  const isSymbol = type === \"symbol\";\n  const isMaterial = type === \"material\";\n\n  return cnb(\n    styles({\n      svg: isSvg,\n      font: isFont || isMaterial,\n      symbol: isSymbol,\n      vab: inline,\n      dense,\n    }),\n    isSymbol && `material-symbols-${family}`,\n    isMaterial &&\n      `material-icons${\n        family === \"filled\" ? \"\" : `-${family === \"rounded\" ? \"round\" : family}`\n      }`,\n    cssUtils({\n      textColor: theme,\n    }),\n    iconClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface IconRotatorClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the icon is currently rotated.\n   */\n  rotated: boolean;\n\n  /**\n   * Boolean if changing the {@link rotated} state should no longer transition.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function iconRotator(options: IconRotatorClassNameOptions): string {\n  const { className, rotated, disableTransition = false } = options;\n\n  return cnb(\n    rotatorStyles({\n      animate: !disableTransition,\n      rotated,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","rotatorStyles","icon","options","className","type","theme","family","dense","inline","iconClassName","isFont","isSvg","isSymbol","isMaterial","svg","font","symbol","vab","textColor","iconRotator","rotated","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyC,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,SAASD,IAAI;AACnB,MAAME,gBAAgBF,IAAI;AA0E1B;;;CAGC,GACD,OAAO,SAASG,KAAKC,OAA6B;IAChD,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,KAAK,EACLC,SAAS,EAAE,EACXC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,aAAa,EACd,GAAGP;IAMJ,MAAMQ,SAASN,SAAS;IACxB,MAAMO,QAAQP,SAAS;IACvB,MAAMQ,WAAWR,SAAS;IAC1B,MAAMS,aAAaT,SAAS;IAE5B,OAAOR,IACLG,OAAO;QACLe,KAAKH;QACLI,MAAML,UAAUG;QAChBG,QAAQJ;QACRK,KAAKT;QACLD;IACF,IACAK,YAAY,CAAC,iBAAiB,EAAEN,OAAO,CAAC,EACxCO,cACE,CAAC,cAAc,EACbP,WAAW,WAAW,KAAK,CAAC,CAAC,EAAEA,WAAW,YAAY,UAAUA,OAAO,CAAC,CACzE,CAAC,EACJT,SAAS;QACPqB,WAAWb;IACb,IACAI,eACAN;AAEJ;AAmBA;;;CAGC,GACD,OAAO,SAASgB,YAAYjB,OAAoC;IAC9D,MAAM,EAAEC,SAAS,EAAEiB,OAAO,EAAEC,oBAAoB,KAAK,EAAE,GAAGnB;IAE1D,OAAON,IACLI,cAAc;QACZsB,SAAS,CAACD;QACVD;IACF,IACAjB;AAEJ"}
+{"version":3,"sources":["../../src/icon/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextColor, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport type { MaterialIconFamily, MaterialSymbolFamily } from \"./material.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-icon-color\"?: string;\n    \"--rmd-icon-size\"?: string | number;\n    \"--rmd-icon-spacing\"?: string | number;\n    \"--rmd-icon-rotate-from\"?: string | number;\n    \"--rmd-icon-rotate-to\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-icon\");\nconst rotatorStyles = bem(\"rmd-icon-rotator\");\n\n/** @since 6.0.0 */\nexport interface SVGIconClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional theme color to apply to the icon. When this is `undefined`, the\n   * default icon color will be used instead.\n   *\n   * - `primary -> $primary-color`\n   * - `secondary -> $secondary-color`\n   * - `warning -> $warning-color`\n   * - `success -> $success-color`\n   * - `error -> $error-color`\n   * - `text-primary -> $text-primary-color`\n   * - `text-secondary -> $text-primary-color`\n   * - `text-hint -> $text-hint-color`\n   * - `text-disabled -> $text-disabled-color`\n   */\n  theme?: ThemeColor | TextColor;\n\n  /**\n   * Boolean if the font icon should use the dense spec.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` if the icon should display inline with other text (like\n   * a paragraph) by applying `vertical-align: bottom`.\n   *\n   * @example\n   * ```tsx\n   * <Typography>\n   *   <InfoIcon inline className=\"rmd-icon--before\" />\n   *   Some additional information around xyz.\n   * </Typography>\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface FontIconClassNameOptions extends SVGIconClassNameOptions {\n  /**\n   * The font icon class name to use.\n   *\n   * @defaultValue `\"material-icons\"`\n   */\n  iconClassName?: string;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {\n  family: MaterialIconFamily;\n}\n\n/** @since 6.0.0 */\nexport interface MaterialSymbolClassNameOptions\n  extends SVGIconClassNameOptions {\n  family: MaterialSymbolFamily;\n}\n\n/** @since 6.0.0 */\nexport type IconClassNameOptions =\n  | ({ type: \"font\" } & FontIconClassNameOptions)\n  | ({ type: \"svg\" } & SVGIconClassNameOptions)\n  | ({ type: \"material\" } & MaterialIconClassNameOptions)\n  | ({ type: \"symbol\" } & MaterialSymbolClassNameOptions);\n\n/**\n *\n * @since 6.0.0\n */\nexport function icon(options: IconClassNameOptions): string {\n  const {\n    className,\n    type,\n    theme,\n    family = \"\",\n    dense = false,\n    inline = false,\n    iconClassName,\n  } = options as FontIconClassNameOptions &\n    SVGIconClassNameOptions & {\n      type: \"font\" | \"svg\" | \"symbol\" | \"material\";\n      family?: MaterialIconFamily;\n    };\n\n  const isFont = type === \"font\";\n  const isSvg = type === \"svg\";\n  const isSymbol = type === \"symbol\";\n  const isMaterial = type === \"material\";\n\n  return cnb(\n    styles({\n      svg: isSvg,\n      font: isFont || isMaterial,\n      symbol: isSymbol,\n      vam: inline,\n      dense,\n    }),\n    isSymbol && `material-symbols-${family}`,\n    isMaterial &&\n      `material-icons${\n        family === \"filled\" ? \"\" : `-${family === \"rounded\" ? \"round\" : family}`\n      }`,\n    cssUtils({\n      textColor: theme,\n    }),\n    iconClassName,\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface IconRotatorClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the icon is currently rotated.\n   */\n  rotated: boolean;\n\n  /**\n   * Boolean if changing the {@link rotated} state should no longer transition.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n *\n * @since 6.0.0\n */\nexport function iconRotator(options: IconRotatorClassNameOptions): string {\n  const { className, rotated, disableTransition = false } = options;\n\n  return cnb(\n    rotatorStyles({\n      animate: !disableTransition,\n      rotated,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","rotatorStyles","icon","options","className","type","theme","family","dense","inline","iconClassName","isFont","isSvg","isSymbol","isMaterial","svg","font","symbol","vam","textColor","iconRotator","rotated","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyC,iBAAiB;AAC3E,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,SAASD,IAAI;AACnB,MAAME,gBAAgBF,IAAI;AA0E1B;;;CAGC,GACD,OAAO,SAASG,KAAKC,OAA6B;IAChD,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,KAAK,EACLC,SAAS,EAAE,EACXC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,aAAa,EACd,GAAGP;IAMJ,MAAMQ,SAASN,SAAS;IACxB,MAAMO,QAAQP,SAAS;IACvB,MAAMQ,WAAWR,SAAS;IAC1B,MAAMS,aAAaT,SAAS;IAE5B,OAAOR,IACLG,OAAO;QACLe,KAAKH;QACLI,MAAML,UAAUG;QAChBG,QAAQJ;QACRK,KAAKT;QACLD;IACF,IACAK,YAAY,CAAC,iBAAiB,EAAEN,QAAQ,EACxCO,cACE,CAAC,cAAc,EACbP,WAAW,WAAW,KAAK,CAAC,CAAC,EAAEA,WAAW,YAAY,UAAUA,QAAQ,EACxE,EACJT,SAAS;QACPqB,WAAWb;IACb,IACAI,eACAN;AAEJ;AAmBA;;;CAGC,GACD,OAAO,SAASgB,YAAYjB,OAAoC;IAC9D,MAAM,EAAEC,SAAS,EAAEiB,OAAO,EAAEC,oBAAoB,KAAK,EAAE,GAAGnB;IAE1D,OAAON,IACLI,cAAc;QACZsB,SAAS,CAACD;QACVD;IACF,IACAjB;AAEJ"}

package/dist/interaction/RippleContainer.d.ts

@@ -11,8 +11,6 @@ export interface RippleContainerProps extends ProvidedRippleContainerProps {
     className?: string;
 }
 /**
- * **Server Component**
- *
  * This component should generally only be used internally within `react-md`
  * unless you are implementing a custom component interaction with
  * `useElementInteraction`.

package/dist/interaction/RippleContainer.js

@@ -2,8 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
 import { Ripple } from "./Ripple.js";
 /**
- * **Server Component**
- *
  * This component should generally only be used internally within `react-md`
  * unless you are implementing a custom component interaction with
  * `useElementInteraction`.

package/dist/interaction/RippleContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/RippleContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\nimport { Ripple } from \"./Ripple.js\";\nimport { type ProvidedRippleContainerProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n  }\n}\n\n/** @internal */\nexport interface RippleContainerProps extends ProvidedRippleContainerProps {\n  className?: string;\n}\n\n/**\n * **Server Component**\n *\n * This component should generally only be used internally within `react-md`\n * unless you are implementing a custom component interaction with\n * `useElementInteraction`.\n *\n * @see {@link useElementInteraction} for example usage.\n */\nexport function RippleContainer(props: RippleContainerProps): ReactElement {\n  const { className, ripples, onEntered, onExited } = props;\n\n  return (\n    <span className={cnb(\"rmd-ripple-container\", className)}>\n      {ripples.map((ripple) => (\n        <Ripple\n          key={ripple.startTime}\n          ripple={ripple}\n          onEntered={onEntered}\n          onExited={onExited}\n        />\n      ))}\n    </span>\n  );\n}\n"],"names":["cnb","Ripple","RippleContainer","props","className","ripples","onEntered","onExited","span","map","ripple","startTime"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,cAAc;AAerC;;;;;;;;CAQC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGJ;IAEpD,qBACE,KAACK;QAAKJ,WAAWJ,IAAI,wBAAwBI;kBAC1CC,QAAQI,GAAG,CAAC,CAACC,uBACZ,KAACT;gBAECS,QAAQA;gBACRJ,WAAWA;gBACXC,UAAUA;eAHLG,OAAOC,SAAS;;AAQ/B"}
+{"version":3,"sources":["../../src/interaction/RippleContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\nimport { Ripple } from \"./Ripple.js\";\nimport { type ProvidedRippleContainerProps } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n  }\n}\n\n/** @internal */\nexport interface RippleContainerProps extends ProvidedRippleContainerProps {\n  className?: string;\n}\n\n/**\n * This component should generally only be used internally within `react-md`\n * unless you are implementing a custom component interaction with\n * `useElementInteraction`.\n *\n * @see {@link useElementInteraction} for example usage.\n */\nexport function RippleContainer(props: RippleContainerProps): ReactElement {\n  const { className, ripples, onEntered, onExited } = props;\n\n  return (\n    <span className={cnb(\"rmd-ripple-container\", className)}>\n      {ripples.map((ripple) => (\n        <Ripple\n          key={ripple.startTime}\n          ripple={ripple}\n          onEntered={onEntered}\n          onExited={onExited}\n        />\n      ))}\n    </span>\n  );\n}\n"],"names":["cnb","Ripple","RippleContainer","props","className","ripples","onEntered","onExited","span","map","ripple","startTime"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,cAAc;AAerC;;;;;;CAMC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGJ;IAEpD,qBACE,KAACK;QAAKJ,WAAWJ,IAAI,wBAAwBI;kBAC1CC,QAAQI,GAAG,CAAC,CAACC,uBACZ,KAACT;gBAECS,QAAQA;gBACRJ,WAAWA;gBACXC,UAAUA;eAHLG,OAAOC,SAAS;;AAQ/B"}

package/dist/interaction/UserInteractionModeProvider.d.ts

@@ -21,13 +21,13 @@ export interface UserInteractionModeProviderProps {
  * to update component functionality and applying the following class names to
  * the `document.body`:
  *
- * - `"mouse-mode"`
- * - `"keyboard-mode"`
- * - `"touch-mode"`
+ * - `"rmd-mouse-mode"`
+ * - `"rmd-keyboard-mode"`
+ * - `"rmd-touch-mode"`
  *
  * Within `react-md`, these classes are used for the following behavior:
- * - only display `:focus` outlines while in `"keyboard-mode"`
- * - do not display `:hover` effects while in `"touch-mode"`
+ * - only display `:focus` outlines while in `"rmd-keyboard-mode"`
+ * - do not display `:hover` effects while in `"rmd-touch-mode"`
  *
  * @example Mount at the root of your app
  * ```tsx

package/dist/interaction/UserInteractionModeProvider.js

@@ -20,13 +20,13 @@ const { Provider } = context;
  * to update component functionality and applying the following class names to
  * the `document.body`:
  *
- * - `"mouse-mode"`
- * - `"keyboard-mode"`
- * - `"touch-mode"`
+ * - `"rmd-mouse-mode"`
+ * - `"rmd-keyboard-mode"`
+ * - `"rmd-touch-mode"`
  *
  * Within `react-md`, these classes are used for the following behavior:
- * - only display `:focus` outlines while in `"keyboard-mode"`
- * - do not display `:hover` effects while in `"touch-mode"`
+ * - only display `:focus` outlines while in `"rmd-keyboard-mode"`
+ * - do not display `:hover` effects while in `"rmd-touch-mode"`
  *
  * @example Mount at the root of your app
  * ```tsx
@@ -95,8 +95,12 @@ const { Provider } = context;
    * don't really know of any use-cases other than the weird touch-desktop stuff
    * and I have no experience using them.
    */ useEffect(()=>{
-        const enableMouseMode = ()=>setMode("mouse");
-        const enableKeyboardMode = ()=>setMode("keyboard");
+        const enableMouseMode = ()=>{
+            setMode("mouse");
+        };
+        const enableKeyboardMode = ()=>{
+            setMode("keyboard");
+        };
         const handleTouchStart = ()=>{
             lastTouchTime.current = Date.now();
             isTouchContextMenu.current = false;
@@ -112,7 +116,7 @@ const { Provider } = context;
         const handleContextMenu = ()=>{
             isTouchContextMenu.current = true;
         };
-        const className = `${mode}-mode`;
+        const className = `rmd-${mode}-mode`;
         document.body.classList.add(className);
         window.addEventListener("touchstart", handleTouchStart, true);
         if (mode === "mouse") {

package/dist/interaction/UserInteractionModeProvider.js.map

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