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

package/dist/form/switchStyles.d.ts

@@ -10,6 +10,7 @@ declare module "react" {
 export interface SwitchClassNameOptions {
     className?: string;
     clickable?: boolean;
+    currentColor?: boolean;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/form/switchStyles.js

@@ -4,8 +4,9 @@ const styles = bem("rmd-switch");
 /**
  * @remarks \@since 6.0.0
  */ export function switchStyles(options = {}) {
-    const { className, clickable } = options;
+    const { className, clickable, currentColor } = options;
     return cnb(styles({
+        "current-color": currentColor,
         clickable
     }), className);
 }

package/dist/form/switchStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/switchStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-switch-track-background-color\"?: string;\n    \"--rmd-switch-ball-background-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-switch\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SwitchClassNameOptions {\n  className?: string;\n\n  clickable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function switchStyles(options: SwitchClassNameOptions = {}): string {\n  const { className, clickable } = options;\n\n  return cnb(styles({ clickable }), className);\n}\n"],"names":["cnb","bem","styles","switchStyles","options","className","clickable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,aAAaC,UAAkC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IAEjC,OAAOJ,IAAIE,OAAO;QAAEI;IAAU,IAAID;AACpC"}
+{"version":3,"sources":["../../src/form/switchStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-switch-track-background-color\"?: string;\n    \"--rmd-switch-ball-background-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-switch\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SwitchClassNameOptions {\n  className?: string;\n  clickable?: boolean;\n  currentColor?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function switchStyles(options: SwitchClassNameOptions = {}): string {\n  const { className, clickable, currentColor } = options;\n\n  return cnb(styles({ \"current-color\": currentColor, clickable }), className);\n}\n"],"names":["cnb","bem","styles","switchStyles","options","className","clickable","currentColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAStC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,aAAaC,UAAkC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE/C,OAAOJ,IAAIE,OAAO;QAAE,iBAAiBK;QAAcD;IAAU,IAAID;AACnE"}

package/dist/form/textAreaStyles.d.ts

@@ -2,8 +2,8 @@ import { type TextFieldClassNameOptions } from "./textFieldStyles.js";
 import { type TextAreaResize } from "./useResizingTextArea.js";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-form-textarea-height"?: string | number;
-        "--rmd-form-textarea-padding"?: string | number;
+        "--rmd-textarea-height"?: string | number;
+        "--rmd-textarea-padding"?: string | number;
     }
 }
 /**

package/dist/form/textAreaStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/textAreaStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  textField,\n  type TextFieldClassNameOptions,\n} from \"./textFieldStyles.js\";\nimport { type TextAreaResize } from \"./useResizingTextArea.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-textarea-height\"?: string | number;\n    \"--rmd-form-textarea-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-textarea\");\nconst containerStyles = bem(\"rmd-textarea-container\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TextareaClassNameOptions extends TextFieldClassNameOptions {\n  className?: string;\n\n  /**\n   * This should not be used externally and is only used for creating the hidden\n   * textarea mask for the auto resizing behavior.\n   *\n   * @defaultValue `false`\n   */\n  mask?: boolean;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * Set this to `true` if the textarea should display a scrollbar.\n   *\n   * @defaultValue `false`\n   */\n  scrollable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function textArea(options: TextareaClassNameOptions = {}): string {\n  const {\n    className,\n    mask,\n    resize = \"auto\",\n    scrollable,\n    placeholderHidden,\n  } = options;\n\n  return cnb(\n    textField({ placeholderHidden }),\n    styles({\n      rh: resize === \"horizontal\",\n      rv: resize === \"vertical\",\n      rn: resize === \"auto\" || resize === \"none\",\n      mask,\n      scrollable: scrollable || resize === \"none\",\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TextareaContainerClassNameOptions {\n  className?: string;\n  height?: boolean;\n  disabled?: boolean;\n  animate?: boolean;\n  underlineLabelled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function textAreaContainer(\n  options: TextareaContainerClassNameOptions = {}\n): string {\n  const { className, height, animate, disabled, underlineLabelled } = options;\n\n  return cnb(\n    containerStyles({\n      height,\n      animate,\n      cursor: !disabled,\n      \"underline-labelled\": underlineLabelled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","textField","styles","containerStyles","textArea","options","className","mask","resize","scrollable","placeholderHidden","rh","rv","rn","textAreaContainer","height","animate","disabled","underlineLabelled","cursor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,SAAS,QAEJ,uBAAuB;AAU9B,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA8B5B;;CAEC,GACD,OAAO,SAASI,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,SAAS,MAAM,EACfC,UAAU,EACVC,iBAAiB,EAClB,GAAGL;IAEJ,OAAON,IACLE,UAAU;QAAES;IAAkB,IAC9BR,OAAO;QACLS,IAAIH,WAAW;QACfI,IAAIJ,WAAW;QACfK,IAAIL,WAAW,UAAUA,WAAW;QACpCD;QACAE,YAAYA,cAAcD,WAAW;IACvC,IACAF;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASQ,kBACdT,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAES,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGb;IAEpE,OAAON,IACLI,gBAAgB;QACdY;QACAC;QACAG,QAAQ,CAACF;QACT,sBAAsBC;IACxB,IACAZ;AAEJ"}
+{"version":3,"sources":["../../src/form/textAreaStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  textField,\n  type TextFieldClassNameOptions,\n} from \"./textFieldStyles.js\";\nimport { type TextAreaResize } from \"./useResizingTextArea.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-textarea-height\"?: string | number;\n    \"--rmd-textarea-padding\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-textarea\");\nconst containerStyles = bem(\"rmd-textarea-container\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TextareaClassNameOptions extends TextFieldClassNameOptions {\n  className?: string;\n\n  /**\n   * This should not be used externally and is only used for creating the hidden\n   * textarea mask for the auto resizing behavior.\n   *\n   * @defaultValue `false`\n   */\n  mask?: boolean;\n\n  /**\n   * @see {@link TextAreaResize}\n   * @defaultValue `\"auto\"`\n   */\n  resize?: TextAreaResize;\n\n  /**\n   * Set this to `true` if the textarea should display a scrollbar.\n   *\n   * @defaultValue `false`\n   */\n  scrollable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function textArea(options: TextareaClassNameOptions = {}): string {\n  const {\n    className,\n    mask,\n    resize = \"auto\",\n    scrollable,\n    placeholderHidden,\n  } = options;\n\n  return cnb(\n    textField({ placeholderHidden }),\n    styles({\n      rh: resize === \"horizontal\",\n      rv: resize === \"vertical\",\n      rn: resize === \"auto\" || resize === \"none\",\n      mask,\n      scrollable: scrollable || resize === \"none\",\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TextareaContainerClassNameOptions {\n  className?: string;\n  height?: boolean;\n  disabled?: boolean;\n  animate?: boolean;\n  underlineLabelled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function textAreaContainer(\n  options: TextareaContainerClassNameOptions = {}\n): string {\n  const { className, height, animate, disabled, underlineLabelled } = options;\n\n  return cnb(\n    containerStyles({\n      height,\n      animate,\n      cursor: !disabled,\n      \"underline-labelled\": underlineLabelled,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","textField","styles","containerStyles","textArea","options","className","mask","resize","scrollable","placeholderHidden","rh","rv","rn","textAreaContainer","height","animate","disabled","underlineLabelled","cursor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,SAAS,QAEJ,uBAAuB;AAU9B,MAAMC,SAASF,IAAI;AACnB,MAAMG,kBAAkBH,IAAI;AA8B5B;;CAEC,GACD,OAAO,SAASI,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,SAAS,MAAM,EACfC,UAAU,EACVC,iBAAiB,EAClB,GAAGL;IAEJ,OAAON,IACLE,UAAU;QAAES;IAAkB,IAC9BR,OAAO;QACLS,IAAIH,WAAW;QACfI,IAAIJ,WAAW;QACfK,IAAIL,WAAW,UAAUA,WAAW;QACpCD;QACAE,YAAYA,cAAcD,WAAW;IACvC,IACAF;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASQ,kBACdT,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAES,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGb;IAEpE,OAAON,IACLI,gBAAgB;QACdY;QACAC;QACAG,QAAQ,CAACF;QACT,sBAAsBC;IACxB,IACAZ;AAEJ"}

package/dist/form/types.d.ts

@@ -2,10 +2,8 @@ import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type
 import { type PropsWithRef } from "../types.js";
 declare module "react" {
     interface CSSProperties {
-        "--rmd-form-error-color"?: string;
         "--rmd-form-active-color"?: string;
         "--rmd-form-focus-color"?: string;
-        "--rmd-form-disabled-color"?: string;
     }
 }
 /**

package/dist/form/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-error-color\"?: string;\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n    \"--rmd-form-disabled-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutoCompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UserAgentAutoCompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutoCompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutoCompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutoCompleteProps.name}\n   */\n  autoCompleteValue?: AutoCompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @remarks \\@since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAmhBA,WAmDC"}
+{"version":3,"sources":["../../src/form/types.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-form-active-color\"?: string;\n    \"--rmd-form-focus-color\"?: string;\n  }\n}\n\n/**\n * The supported themes for the `TextField`, `TextArea`, and `Select`\n * components.\n *\n * - \"none\" - display as an unstyled text field without any border or background\n *   colors.\n * - \"underline\" - display with only an underline that gains the form active\n *   color and animates from the left or right to the other side when the field\n *   is focused.\n * - \"filled\" - an extension of the `\"underline\"` state that will also have a\n *   slightly dark background applied.\n * - \"outline\" - outlines the entire text field in a border and applies the\n *   active color as box shadow when the field is focused.\n */\nexport type FormTheme = \"none\" | \"underline\" | \"filled\" | \"outline\";\n\n/**\n * The direction that the underline should appear from when the theme is\n * `\"underline\"` or `\"filled\"`.\n */\nexport type FormUnderlineDirection = \"left\" | \"center\" | \"right\";\n\nexport interface FormThemeOptions {\n  /**\n   * The current theme type.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n\n  /**\n   * The current underline direction.\n   *\n   * @defaultValue `\"left\"`\n   */\n  underlineDirection?: FormUnderlineDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormConfiguration extends Required<FormThemeOptions> {\n  /**\n   * Set this to `false` if the `$disable-uncontrolled-input-toggles` variable\n   * is set to `true` in the Sass configuration.\n   *\n   * Since the `checked` state only changes for the radio that has been clicked,\n   * the previously checked radio would also be shown as checked with no way of\n   * fixing it without controlling the radio component. When this flag is\n   * enabled, the checked icons and state are handled through css instead of\n   * `useState`.\n   *\n   * @defaultValue `true`\n   */\n  uncontrolledToggles: boolean;\n}\n\nexport interface FormComponentStates {\n  /** @defaultValue `false` */\n  error?: boolean;\n\n  /** @defaultValue `false` */\n  active?: boolean;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /** @defaultValue `false` */\n  readOnly?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\nexport type AutoCompleteValue =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level1\"\n  | \"address-level2\"\n  | \"address-level3\"\n  | \"address-level4\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tek-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UserAgentAutoCompleteProps {\n  /**\n   * Set this to enable additional autocompletion suggestions for a user for\n   * different form fields. Using this prop will update the\n   * {@link UserAgentAutoCompleteProps.name} and {@link autoComplete} to default to\n   * this value.\n   *\n   * @example\n   * ```tsx\n   * <Form>\n   *   <TextField\n   *     label=\"Enter your credit card number\"\n   *     autoCompleteValue=\"cc-number\"\n   *     {...creditCardProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <TextField\n   *     label=\"Name on card\"\n   *     autoCompleteValue=\"cc-name\"\n   *     {...creditCardNameProps}\n   *   />\n   *   <TextField\n   *     label=\"Security code\"\n   *     autoCompleteValue=\"cc-csc\"\n   *     {...securityCodeProps}\n   *     inputMode=\"number\"\n   *   />\n   *   <Button type=\"submit\">Submit</Button>\n   * </Form>\n   * ```\n   *\n   * @see https://html.spec.whatwg.org/multipage/forms.html#autofill\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   * @see {@link AutoCompleteValue}\n   * @see {@link autoComplete}\n   * @see {@link UserAgentAutoCompleteProps.name}\n   */\n  autoCompleteValue?: AutoCompleteValue;\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  autoComplete?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n\n  /**\n   * @see {@link autoCompleteValue}\n   * @defaultValue `autoCompleteValue`\n   */\n  name?: string;\n}\n\nexport interface FormMessageClassNameOptions {\n  className?: string;\n\n  /**\n   * Boolean if the message should gain the error state which changes the text\n   * color to `red` by default.\n   *\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * The current theme for the related text field. This is really only used to\n   * match the current horizontal padding of the text field.\n   *\n   * @defaultValue `\"outline\"`\n   */\n  theme?: FormTheme;\n}\n\nexport interface FormMessageProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"minLength\" | \"maxLength\">,\n    FormMessageClassNameOptions {\n  /**\n   * If this component is acting as a form-level error message handler, the role\n   * should be updated to be `\"alert\"` for additional accessibility.\n   *\n   * Note: when creating a form-level error message handler, the messages should\n   * no longer appear as the user types and instead once the user tries to\n   * submit the form. Having an alert role disrupts normal screen reader\n   * behavior by immediately reading changes in this element.\n   *\n   * @defaultValue `undefined`\n   */\n  role?: \"alert\";\n\n  /**\n   * Boolean if the children should no longer be wrapped in a `<p>` tag. This\n   * should normally only be disabled if using a custom error message wrapper or\n   * the counter behavior is not being used. To get correct alignments of the\n   * message and counter, the `children` must be wrapped in some element and\n   * cannot be plain test.\n   *\n   * Note: this will always be considered `true` if the `role` is set to\n   * `\"alert\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * An optional style to apply to the `<p>` tag that surrounds the `children`.\n   * This will not be used if `role=\"alert\"` or `disableWrap={true}`.\n   */\n  messageStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the `<p>` tag that surrounds the\n   * `children`. This will not be used if `role=\"alert\"` or\n   * `disableWrap={true}`.\n   */\n  messageClassName?: string;\n}\n\n/**\n * Props that are used to automatically add a counter for the remaining letters\n * available for the text field. The counter will always be created to the right\n * of the optional message.\n *\n * The counter is really a simple string of: `${length} / ${maxLength}`.\n *\n * If you need additional customization, it is recommended to create your own\n * implementation such as:\n *\n * ```tsx\n * <FormMessage>\n *   {errorMessage}\n *   <MyCounter {...props} />\n * </FormMessage>\n * ```\n *\n * Note: this should not be used alongside form-level messages.\n *\n * @remarks \\@since 2.9.0 Renamed from `FormMessageCounterProps` to\n * `FormMessageInputLengthCounterProps` since a `FormMessageCounter` component\n * was added\n */\nexport interface FormMessageInputLengthCounterProps {\n  /**\n   * The current length of the value in the related text field.\n   */\n  length: number;\n\n  /**\n   * The max length allowed for the value in the related text field.\n   */\n  maxLength: number;\n\n  /**\n   * An optional style to apply to the counter wrapper element.\n   */\n  counterStyle?: CSSProperties;\n\n  /**\n   * An optional className to apply to the counter wrapper element.\n   */\n  counterClassName?: string;\n}\n\nexport interface FormMessageWithCounterProps\n  extends FormMessageProps,\n    FormMessageInputLengthCounterProps {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface FormMessageWithoutCounterProps extends FormMessageProps {\n  length?: never;\n  maxLength?: never;\n  counterStyle?: never;\n  counterClassName?: never;\n}\n\nexport interface FormMessageContainerExtension {\n  /**\n   * If the extension doesn't actually want to render the `FormMessage`\n   * component, these props are optional. It kind of eliminates the whole\n   * purpose of this component though.\n   */\n  messageProps?: PropsWithRef<\n    FormMessageProps & Partial<FormMessageInputLengthCounterProps>,\n    HTMLDivElement\n  >;\n\n  /**\n   * Any props (and an optional ref) to provide to the `<div>` surrounding the\n   * children and `FormMessage` component.\n   *\n   * Note: This will not be used if the `messageProps` are not provided since\n   * only the `children` will be returned without the container.\n   */\n  messageContainerProps?: PropsWithRef<\n    HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface LabelClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to remove the `gap` style from the label.\n   *\n   * @see `$label-gap`\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * Set this to `true` when the parent `TextFieldContainer` has the `dense`\n   * spec enabled. This updates the floating styles to match the smaller height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the error color.\n   *\n   * @see `$error-color`\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to the active color.\n   *\n   * @see `$active-color`\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * Set this to `true` if the label should gain `flex-direction: column`\n   * styling.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to update the label's color to be the disabled color.\n   *\n   * @see `$disabled-color`\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * Set this to true when label can floating above an input, textarea, or\n   * select inside of a `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * Set this to true when label is currently floating above an input,\n   * textarea, or selected inside of a `TextFieldContainer`.\n   *\n   * @see {@link active}\n   * @defaultValue `active`\n   */\n  floatingActive?: boolean;\n\n  /**\n   * Set this to `true` to gain `flex-direction: row-reversed` styling. If the\n   * {@link stacked} prop is also `true`, `flex-direction: column-reversed` will\n   * be applied.\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inactive?: boolean;\n}\n\nexport interface LabelProps\n  extends LabelHTMLAttributes<HTMLLabelElement>,\n    LabelClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ConfigurableTextFieldAddonProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Boolean if the addon should be presentational only and prevent pointer\n   * events.\n   *\n   * @defaultValue `false`\n   */\n  pointerEvents?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for `leftAddonProps` and\n * `rightAddonProps`.\n */\nexport interface TextFieldContainerOptions\n  extends FormThemeOptions,\n    FormComponentStates {\n  /**\n   * Set this to `true` to enable the dense spec which reduces the height.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * Set this to `true` to change the style from `display: flex` to\n   * `display: inline-flex`.\n   *\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` if this component should stretch to fill a flex or grid\n   * container using `flex: 1 1 auto`.\n   *\n   * @defaultValue `false`\n   */\n  stretch?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed before the\n   * `TextField` or `TextArea`.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link leftAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  leftAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableLeftAddonStyles?: boolean;\n\n  /**\n   * This should generally be an icon or a button that will be placed after the\n   * `TextField` or `TextArea`.\n   */\n  rightAddon?: ReactNode;\n\n  /**\n   * Any additional props to pass to the `<span>` surrounding the {@link rightAddon}.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  rightAddonProps?: PropsWithRef<\n    ConfigurableTextFieldAddonProps,\n    HTMLSpanElement\n  >;\n\n  /**\n   * @see {@link TextFieldAddonProps.disabled}\n   *\n   * @defaultValue `false`\n   */\n  disableRightAddonStyles?: boolean;\n}\n\nexport interface FormFieldOptions\n  extends TextFieldContainerOptions,\n    FormMessageContainerExtension {\n  /**\n   * An optional floating label to use with the text field. A label is generally\n   * recommended for accessibility, but can be omitted if an `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label?: ReactNode;\n\n  /**\n   * Any additional props and/or ref that should be passed to the `<label>`\n   * element when a {@link label} is provided.\n   *\n   * @example\n   * ```tsx\n   * labelProps={{\n   *   ref: labelRef,\n   *   style: {},\n   *   className: \"some-custom-class-name\",\n   *   onClick: (event) => {\n   *     // do something\n   *   }\n   * }}\n   * ```\n   */\n  labelProps?: PropsWithRef<LabelProps, HTMLLabelElement>;\n\n  /**\n   * A convenience prop to apply a custom style to a label. This is equivalent\n   * to:\n   *\n   * ```ts\n   * labelProps={{\n   *   style: // some style here\n   * }}\n   * ```\n   */\n  labelStyle?: CSSProperties;\n\n  /**\n   * A convenience prop to apply a custom className to a label. This is\n   * equivalent to:\n   *\n   * ```ts\n   * labelProps={{\n   *   className: \"some-class-name\",\n   * }}\n   * ```\n   */\n  labelClassName?: string;\n}\n"],"names":[],"mappings":"AAihBA,WAmDC"}

package/dist/hoverMode/useHoverMode.d.ts

@@ -10,11 +10,11 @@ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
     /**
      * This can be used to override the `HoverModeContext`'s hover time.
      */
-    hoverTime?: number;
+    hoverTimeout?: number;
     /**
      * This can be used to override the `HoverModeContext`'s leave time.
      */
-    leaveTime?: number;
+    leaveTimeout?: number;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/hoverMode/useHoverMode.js

@@ -1,7 +1,7 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 export function useHoverMode(options) {
-    const { disabled, hoverTime, hoverTimeoutRef, leaveTime, leaveTimeoutRef, enableHoverMode, disableHoverMode, startDisableTimer, clearDisableTimer, setVisible: propSetVisible, defaultVisible = false } = options;
+    const { disabled, hoverTimeout: hoverTime, hoverTimeoutRef, leaveTimeout: leaveTime, leaveTimeoutRef, enableHoverMode, disableHoverMode, startDisableTimer, clearDisableTimer, setVisible: propSetVisible, defaultVisible = false } = options;
     const state = useState(defaultVisible);
     let visible;
     let setVisible;

package/dist/hoverMode/useHoverMode.js.map

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

package/dist/icon/FontIcon.d.ts

@@ -18,6 +18,7 @@ export interface FontIconProps extends HTMLAttributes<HTMLElement>, FontIconClas
  * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
  * `forceSize` and `forceFontSize` props to fix the sizing issues.
  *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element.
+ * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * the `forceSize`/`forceFontSize` props.
  */
 export declare const FontIcon: import("react").ForwardRefExoticComponent<FontIconProps & import("react").RefAttributes<HTMLElement>>;

package/dist/icon/FontIcon.js

@@ -12,9 +12,10 @@ import { icon } from "./styles.js";
  * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
  * `forceSize` and `forceFontSize` props to fix the sizing issues.
  *
- * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element.
+ * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
+ * the `forceSize`/`forceFontSize` props.
  */ export const FontIcon = /*#__PURE__*/ forwardRef(function FontIcon(props, ref) {
-    const { className, children, "aria-hidden": ariaHidden = true, dense = false, theme, iconClassName = "material-icons", forceSize = false, forceFontSize = false, ...remaining } = props;
+    const { className, children, "aria-hidden": ariaHidden = true, dense = false, theme, iconClassName = "material-icons", ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,
         "aria-hidden": ariaHidden,
@@ -24,9 +25,7 @@ import { icon } from "./styles.js";
             dense,
             theme,
             className,
-            iconClassName,
-            forceSize,
-            forceFontSize
+            iconClassName
         }),
         children: children
     });

package/dist/icon/FontIcon.js.map

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

package/dist/icon/MaterialIcon.d.ts

@@ -6,10 +6,10 @@ export interface MaterialIconProps extends HTMLAttributes<HTMLSpanElement>, Part
     /** @defaultValue `true` */
     "aria-hidden"?: AriaAttributes["aria-hidden"];
     name: MaterialIconName;
+    children?: never;
 }
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useMaterialIconsFamily hook
+ * **Server Component**
  *
  * @remarks \@since 6.0.0
  */

package/dist/icon/MaterialIcon.js

@@ -1,16 +1,13 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useMaterialIconsFamily } from "./MaterialIconsProvider.js";
+import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useMaterialIconsFamily hook
+ * **Server Component**
  *
  * @remarks \@since 6.0.0
  */ export const MaterialIcon = /*#__PURE__*/ forwardRef(function MaterialIcon(props, ref) {
-    const { "aria-hidden": ariaHidden = true, name, family: propFamily, theme, dense, className, ...remaining } = props;
-    const family = useMaterialIconsFamily(propFamily);
+    const { "aria-hidden": ariaHidden = true, name, family = MATERIAL_CONFIG.iconFamily, theme, dense, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("span", {
         ref: ref,
         "aria-hidden": ariaHidden,

package/dist/icon/MaterialIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icon/MaterialIcon.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type AriaAttributes, type HTMLAttributes } from \"react\";\nimport { useMaterialIconsFamily } from \"./MaterialIconsProvider.js\";\nimport { type MaterialIconName } from \"./material.js\";\nimport { icon, type MaterialIconClassNameOptions } from \"./styles.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialIconName;\n}\n\n/**\n * **Client Component**\n * Might be able to become a server component if I remove the useMaterialIconsFamily hook\n *\n * @remarks \\@since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family: propFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n    const family = useMaterialIconsFamily(propFamily);\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","useMaterialIconsFamily","icon","MaterialIcon","props","ref","ariaHidden","name","family","propFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAkD,QAAQ;AAC7E,SAASC,sBAAsB,QAAQ,6BAA6B;AAEpE,SAASC,IAAI,QAA2C,cAAc;AAWtE;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,QAAQC,UAAU,EAClBC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IACJ,MAAMI,SAASP,uBAAuBQ;IAEtC,qBACE,KAACK;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 MaterialIconName } from \"./material.js\";\nimport { MATERIAL_CONFIG } from \"./materialConfig.js\";\nimport { icon, type MaterialIconClassNameOptions } from \"./styles.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface MaterialIconProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    Partial<MaterialIconClassNameOptions> {\n  /** @defaultValue `true` */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  name: MaterialIconName;\n  children?: never;\n}\n\n/**\n * **Server Component**\n *\n * @remarks \\@since 6.0.0\n */\nexport const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(\n  function MaterialIcon(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      name,\n      family = MATERIAL_CONFIG.iconFamily,\n      theme,\n      dense,\n      className,\n      ...remaining\n    } = props;\n\n    return (\n      <span\n        ref={ref}\n        aria-hidden={ariaHidden}\n        {...remaining}\n        className={icon({\n          type: \"material\",\n          family,\n          theme,\n          dense,\n          className,\n        })}\n      >\n        {name}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","MATERIAL_CONFIG","icon","MaterialIcon","props","ref","ariaHidden","name","family","iconFamily","theme","dense","className","remaining","span","aria-hidden","type"],"mappings":";AAAA,SAASA,UAAU,QAAkD,QAAQ;AAE7E,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,IAAI,QAA2C,cAAc;AAYtE;;;;CAIC,GACD,OAAO,MAAMC,6BAAeH,WAC1B,SAASG,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,IAAI,EACJC,SAASP,gBAAgBQ,UAAU,EACnCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACT,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACU;QACCT,KAAKA;QACLU,eAAaT;QACZ,GAAGO,SAAS;QACbD,WAAWV,KAAK;YACdc,MAAM;YACNR;YACAE;YACAC;YACAC;QACF;kBAECL;;AAGP,GACA"}

package/dist/icon/MaterialSymbol.d.ts

@@ -1,6 +1,6 @@
-import { type HTMLAttributes } from "react";
+import { type AriaAttributes, type HTMLAttributes } from "react";
 import { type MaterialSymbolName } from "./material.js";
-import { type MaterialSymbolCustomization, type MaterialSymbolFill, type MaterialSymbolGrade, type MaterialSymbolOpticalSize, type MaterialSymbolWeight } from "./MaterialSymbolsProvider.js";
+import { type MaterialSymbolCustomization, type MaterialSymbolFill, type MaterialSymbolGrade, type MaterialSymbolOpticalSize, type MaterialSymbolWeight } from "./materialConfig.js";
 import { type MaterialSymbolClassNameOptions } from "./styles.js";
 declare module "react" {
     interface CSSProperties {
@@ -14,12 +14,19 @@ declare module "react" {
  * @remarks \@since 6.0.0
  */
 export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, MaterialSymbolCustomization, Partial<MaterialSymbolClassNameOptions> {
+    /** @defaultValue `true` */
+    "aria-hidden"?: AriaAttributes["aria-hidden"];
     name: MaterialSymbolName;
     children?: never;
 }
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useFontVariationSettings hook
+ * **Server Component**
+ * This is a convenience component that provides autocomplete for all the
+ * available material symbols via the `name` prop.
+ *
+ * Note: You might notice IDE slowdowns for files that use this component since
+ * there are so many icons available. If it becomes an issue, just stop using
+ * this component and define the icons inline instead.
  *
  * @example
  * Simple Example
@@ -31,11 +38,11 @@ export interface MaterialSymbolProps extends HTMLAttributes<HTMLSpanElement>, Ma
  * function Example(): ReactElement {
  *   return (
  *     <>
- *       <MaterialSymbol symbol="" />
- *       <MaterialSymbol symbol="" type="outline" />
+ *       <MaterialSymbol symbol="close" />
+ *       <MaterialSymbol symbol="tune" type="outline" />
  *
- *       <MaterialSymbol symbol="" type="round" />
- *       <MaterialSymbol symbol="" type="sharp" />
+ *       <MaterialSymbol symbol="add" type="round" />
+ *       <MaterialSymbol symbol="air" type="sharp" />
  *     </>
  *   );
  * }

package/dist/icon/MaterialSymbol.js

@@ -1,11 +1,15 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useFontVariationSettings } from "./MaterialSymbolsProvider.js";
+import { getFontVariationSettings } from "./materialConfig.js";
 import { icon } from "./styles.js";
 /**
- * **Client Component**
- * Might be able to become a server component if I remove the useFontVariationSettings hook
+ * **Server Component**
+ * This is a convenience component that provides autocomplete for all the
+ * available material symbols via the `name` prop.
+ *
+ * Note: You might notice IDE slowdowns for files that use this component since
+ * there are so many icons available. If it becomes an issue, just stop using
+ * this component and define the icons inline instead.
  *
  * @example
  * Simple Example
@@ -17,11 +21,11 @@ import { icon } from "./styles.js";
  * function Example(): ReactElement {
  *   return (
  *     <>
- *       <MaterialSymbol symbol="" />
- *       <MaterialSymbol symbol="" type="outline" />
+ *       <MaterialSymbol symbol="close" />
+ *       <MaterialSymbol symbol="tune" type="outline" />
  *
- *       <MaterialSymbol symbol="" type="round" />
- *       <MaterialSymbol symbol="" type="sharp" />
+ *       <MaterialSymbol symbol="add" type="round" />
+ *       <MaterialSymbol symbol="air" type="sharp" />
  *     </>
  *   );
  * }
@@ -33,13 +37,13 @@ import { icon } from "./styles.js";
  * @remarks \@since 6.0.0
  */ export const MaterialSymbol = /*#__PURE__*/ forwardRef(function MaterialSymbol(props, ref) {
     const { "aria-hidden": ariaHidden = true, className, name: symbol, style: propStyle, family: propFamily, fill, weight, grade, opticalSize, theme, dense, ...remaining } = props;
-    const { style, family } = useFontVariationSettings({
+    const { style, family } = getFontVariationSettings({
         style: propStyle,
-        family: propFamily,
         fill,
         weight,
         grade,
-        opticalSize
+        opticalSize,
+        family: propFamily
     });
     return /*#__PURE__*/ _jsx("span", {
         ...remaining,

package/dist/icon/MaterialSymbol.js.map

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

package/dist/icon/_icon.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "sass:map";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../utils";
@@ -47,61 +46,31 @@ $rotate-from: 0deg !default;
 $rotate-to: 180deg !default;
 $rotate-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-icon-color,
-    value: $color,
-  ),
-  size: (
-    var: --rmd-icon-size,
-    value: $size,
-  ),
-  spacing: (
-    var: --rmd-icon-spacing,
-    value: $spacing,
-  ),
-  rotate-from: (
-    var: --rmd-icon-rotate-from,
-    value: $rotate-from,
-  ),
-  rotate-to: (
-    var: --rmd-icon-rotate-to,
-    value: $rotate-to,
-  ),
-  symbol-fill: (
-    var: --rmd-symbol-fill,
-    value: $symbol-fill,
-  ),
-  symbol-grade: (
-    var: --rmd-symbol-grad,
-    value: $symbol-grade,
-  ),
-  symbol-weight: (
-    var: --rmd-symbol-wght,
-    value: $symbol-weight,
-  ),
-  symbol-optical-size: (
-    var: --rmd-symbol-opsz,
-    value: $symbol-optical-size,
-  ),
+$variables: (
+  color,
+  size,
+  spacing,
+  rotate-from,
+  rotate-to,
+  symbol-fill,
+  symbol-grade,
+  symbol-weight,
+  symbol-optical-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "icon var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "icon");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "icon var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "icon")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -126,6 +95,21 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-font or not $disable-svg or not $disable-symbol {
+    @include set-var(color, $color);
+    @include set-var(size, $size);
+    @include set-var(spacing, $spacing);
+  }
+
+  @if not $disable-symbol {
+    @include set-var(symbol-fill, $symbol-fill);
+    @include set-var(symbol-grade, $symbol-grade);
+    @include set-var(symbol-weight, $symbol-weight);
+    @include set-var(symbol-optical-size, $symbol-optical-size);
+  }
+}
+
 @mixin styles {
   // shouldn't really use react-md without icons though...
   @if not $disable-font or not $disable-svg and not $disable-symbol {