@react-md/core 6.5.0 → 6.5.1

package/dist/icon/config.js.map

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

package/dist/icon/materialConfig.js

@@ -10,7 +10,7 @@
 };
 const applyVar = (options)=>{
     const { name, value, defaultValue, style } = options;
-    if (typeof value !== "undefined" && value !== defaultValue) {
+    if (value !== undefined && value !== defaultValue) {
         const varName = `--rmd-symbol-${name}`;
         return {
             ...style,

package/dist/icon/materialConfig.js.map

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

package/dist/interaction/UserInteractionModeProvider.js

@@ -48,6 +48,7 @@ const DATE_NOW = ()=>Date.now();
  * @throws "The `UserInteractionModeProvider` cannot be mounted multiple times."
  * if this component is mounted multiple times in your app.
  */ export function UserInteractionModeProvider(props) {
+    // eslint-disable-next-line react/prop-types
     const { children, now = DATE_NOW } = props;
     const { __root } = useContext(context);
     if (__root) {
@@ -119,25 +120,25 @@ const DATE_NOW = ()=>Date.now();
         };
         const className = `rmd-${mode}-mode`;
         document.body.classList.add(className);
-        window.addEventListener("touchstart", handleTouchStart, true);
+        globalThis.addEventListener("touchstart", handleTouchStart, true);
         if (mode === "mouse") {
-            window.addEventListener("keydown", enableKeyboardMode, true);
+            globalThis.addEventListener("keydown", enableKeyboardMode, true);
         } else if (mode === "keyboard") {
-            window.addEventListener("mousedown", enableMouseMode, true);
+            globalThis.addEventListener("mousedown", enableMouseMode, true);
         } else {
-            window.addEventListener("mousemove", handleMouseMove, true);
-            window.addEventListener("contextmenu", handleContextMenu, true);
+            globalThis.addEventListener("mousemove", handleMouseMove, true);
+            globalThis.addEventListener("contextmenu", handleContextMenu, true);
         }
         return ()=>{
             document.body.classList.remove(className);
-            window.removeEventListener("touchstart", handleTouchStart, true);
+            globalThis.removeEventListener("touchstart", handleTouchStart, true);
             if (mode === "mouse") {
-                window.removeEventListener("keydown", enableKeyboardMode, true);
+                globalThis.removeEventListener("keydown", enableKeyboardMode, true);
             } else if (mode === "keyboard") {
-                window.removeEventListener("mousedown", enableMouseMode, true);
+                globalThis.removeEventListener("mousedown", enableMouseMode, true);
             } else {
-                window.removeEventListener("mousemove", handleMouseMove, true);
-                window.removeEventListener("contextmenu", handleContextMenu, true);
+                globalThis.removeEventListener("mousemove", handleMouseMove, true);
+                globalThis.removeEventListener("contextmenu", handleContextMenu, true);
             }
         };
     }, [

package/dist/interaction/UserInteractionModeProvider.js.map

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

package/dist/interaction/utils.js

@@ -64,7 +64,9 @@ import { calcHypotenuse } from "../utils/trigonometry.js";
     if (i === -1) {
         return state;
     }
-    const ripples = state.ripples.slice();
+    const ripples = [
+        ...state.ripples
+    ];
     const ripple = ripples[i];
     ripples[i] = {
         ...ripple,
@@ -77,11 +79,13 @@ import { calcHypotenuse } from "../utils/trigonometry.js";
 }
 /** @internal */ export function updateRipplesState(options) {
     const { type, ripple, state, holding } = options;
-    const rippleIndex = state.ripples.findIndex((r)=>r === ripple);
+    const rippleIndex = state.ripples.indexOf(ripple);
     if (rippleIndex === -1) {
         return state;
     }
-    const ripples = state.ripples.slice();
+    const ripples = [
+        ...state.ripples
+    ];
     if (type === "exited") {
         ripples.splice(rippleIndex, 1);
     } else {

package/dist/interaction/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/utils.ts"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type TouchEvent } from \"react\";\n\nimport { findSizingContainer } from \"../positioning/utils.js\";\nimport { type Point } from \"../types.js\";\nimport { calcHypotenuse } from \"../utils/trigonometry.js\";\nimport {\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\n\n/**\n * @internal\n * @since 6.3.0\n */\ninterface GetRadiusOptions extends Point {\n  height: number;\n  width: number;\n}\n\n/**\n * @internal\n * @since 6.3.0\n */\nexport function getRadius(options: GetRadiusOptions): number {\n  const { x, y, height, width } = options;\n\n  return Math.max(\n    calcHypotenuse({ x, y }),\n    calcHypotenuse({ x: width - x, y }),\n    calcHypotenuse({ x: width - x, y: height - y }),\n    calcHypotenuse({ x, y: height - y })\n  );\n}\n\n/** @internal */\nexport function getRippleStyle(\n  event:\n    | MouseEvent<HTMLElement>\n    | TouchEvent<HTMLElement>\n    | KeyboardEvent<HTMLElement>,\n  programmatic: boolean\n): RippleStyle {\n  const element =\n    findSizingContainer(event.currentTarget) || event.currentTarget;\n  const rect = element.getBoundingClientRect();\n  const { left, top, height, width } = rect;\n\n  let x: number;\n  let y: number;\n  if (\"key\" in event || programmatic) {\n    x = width / 2;\n    y = height / 2;\n  } else {\n    let pageX: number;\n    let pageY: number;\n    if (\"touches\" in event) {\n      ({ pageX, pageY } = event.touches[0]);\n    } else {\n      ({ pageX, pageY } = event);\n    }\n\n    x = pageX - (left + window.scrollX);\n    y = pageY - (top + window.scrollY);\n  }\n\n  const radius = getRadius({ x, y, width, height });\n  const size = radius * 2;\n\n  return {\n    left: x - radius,\n    top: y - radius,\n    height: size,\n    width: size,\n  };\n}\n\n/**\n * This is used to set the `exiting` state after a normal \"touch\" duration.\n * 300ms seemed like a good threshold since it is the majority of the scaling\n * duration (450ms)\n */\nconst ENTER_DELAY = 300;\n\n/** @internal */\nexport function releaseRipple(\n  state: ElementInteractionState\n): ElementInteractionState {\n  // find the first non-exiting ripple which should now be released\n  const i = state.ripples.findIndex((ripple) => !ripple.exiting);\n  if (i === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  const ripple = ripples[i];\n  ripples[i] = {\n    ...ripple,\n    exiting: ripple.entered || Date.now() - ripple.startTime > ENTER_DELAY,\n  };\n  return { pressed: false, ripples };\n}\n\n/** @internal */\ninterface UpdateRipplesStateOptions {\n  type: \"entered\" | \"exited\";\n  state: ElementInteractionState;\n  ripple: RippleState;\n  holding: boolean;\n}\n\n/** @internal */\nexport function updateRipplesState(\n  options: UpdateRipplesStateOptions\n): ElementInteractionState {\n  const { type, ripple, state, holding } = options;\n\n  const rippleIndex = state.ripples.findIndex((r) => r === ripple);\n  if (rippleIndex === -1) {\n    return state;\n  }\n\n  const ripples = state.ripples.slice();\n  if (type === \"exited\") {\n    ripples.splice(rippleIndex, 1);\n  } else {\n    const exiting = !holding || Date.now() - ripple.startTime > ENTER_DELAY;\n    ripples[rippleIndex] = {\n      ...ripple,\n      exiting,\n      entered: true,\n    };\n  }\n\n  return { ...state, ripples };\n}\n"],"names":["findSizingContainer","calcHypotenuse","getRadius","options","x","y","height","width","Math","max","getRippleStyle","event","programmatic","element","currentTarget","rect","getBoundingClientRect","left","top","pageX","pageY","touches","window","scrollX","scrollY","radius","size","ENTER_DELAY","releaseRipple","state","i","ripples","findIndex","ripple","exiting","slice","entered","Date","now","startTime","pressed","updateRipplesState","type","holding","rippleIndex","r","splice"],"mappings":"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"}
+{"version":3,"sources":["../../src/interaction/utils.ts"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type TouchEvent } from \"react\";\n\nimport { findSizingContainer } from \"../positioning/utils.js\";\nimport { type Point } from \"../types.js\";\nimport { calcHypotenuse } from \"../utils/trigonometry.js\";\nimport {\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\n\n/**\n * @internal\n * @since 6.3.0\n */\ninterface GetRadiusOptions extends Point {\n  height: number;\n  width: number;\n}\n\n/**\n * @internal\n * @since 6.3.0\n */\nexport function getRadius(options: GetRadiusOptions): number {\n  const { x, y, height, width } = options;\n\n  return Math.max(\n    calcHypotenuse({ x, y }),\n    calcHypotenuse({ x: width - x, y }),\n    calcHypotenuse({ x: width - x, y: height - y }),\n    calcHypotenuse({ x, y: height - y })\n  );\n}\n\n/** @internal */\nexport function getRippleStyle(\n  event:\n    | MouseEvent<HTMLElement>\n    | TouchEvent<HTMLElement>\n    | KeyboardEvent<HTMLElement>,\n  programmatic: boolean\n): RippleStyle {\n  const element =\n    findSizingContainer(event.currentTarget) || event.currentTarget;\n  const rect = element.getBoundingClientRect();\n  const { left, top, height, width } = rect;\n\n  let x: number;\n  let y: number;\n  if (\"key\" in event || programmatic) {\n    x = width / 2;\n    y = height / 2;\n  } else {\n    let pageX: number;\n    let pageY: number;\n    if (\"touches\" in event) {\n      ({ pageX, pageY } = event.touches[0]);\n    } else {\n      ({ pageX, pageY } = event);\n    }\n\n    x = pageX - (left + window.scrollX);\n    y = pageY - (top + window.scrollY);\n  }\n\n  const radius = getRadius({ x, y, width, height });\n  const size = radius * 2;\n\n  return {\n    left: x - radius,\n    top: y - radius,\n    height: size,\n    width: size,\n  };\n}\n\n/**\n * This is used to set the `exiting` state after a normal \"touch\" duration.\n * 300ms seemed like a good threshold since it is the majority of the scaling\n * duration (450ms)\n */\nconst ENTER_DELAY = 300;\n\n/** @internal */\nexport function releaseRipple(\n  state: ElementInteractionState\n): ElementInteractionState {\n  // find the first non-exiting ripple which should now be released\n  const i = state.ripples.findIndex((ripple) => !ripple.exiting);\n  if (i === -1) {\n    return state;\n  }\n\n  const ripples = [...state.ripples];\n  const ripple = ripples[i];\n  ripples[i] = {\n    ...ripple,\n    exiting: ripple.entered || Date.now() - ripple.startTime > ENTER_DELAY,\n  };\n  return { pressed: false, ripples };\n}\n\n/** @internal */\ninterface UpdateRipplesStateOptions {\n  type: \"entered\" | \"exited\";\n  state: ElementInteractionState;\n  ripple: RippleState;\n  holding: boolean;\n}\n\n/** @internal */\nexport function updateRipplesState(\n  options: UpdateRipplesStateOptions\n): ElementInteractionState {\n  const { type, ripple, state, holding } = options;\n\n  const rippleIndex = state.ripples.indexOf(ripple);\n  if (rippleIndex === -1) {\n    return state;\n  }\n\n  const ripples = [...state.ripples];\n  if (type === \"exited\") {\n    ripples.splice(rippleIndex, 1);\n  } else {\n    const exiting = !holding || Date.now() - ripple.startTime > ENTER_DELAY;\n    ripples[rippleIndex] = {\n      ...ripple,\n      exiting,\n      entered: true,\n    };\n  }\n\n  return { ...state, ripples };\n}\n"],"names":["findSizingContainer","calcHypotenuse","getRadius","options","x","y","height","width","Math","max","getRippleStyle","event","programmatic","element","currentTarget","rect","getBoundingClientRect","left","top","pageX","pageY","touches","window","scrollX","scrollY","radius","size","ENTER_DELAY","releaseRipple","state","i","ripples","findIndex","ripple","exiting","entered","Date","now","startTime","pressed","updateRipplesState","type","holding","rippleIndex","indexOf","splice"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,0BAA0B;AAE9D,SAASC,cAAc,QAAQ,2BAA2B;AAgB1D;;;CAGC,GACD,OAAO,SAASC,UAAUC,OAAyB;IACjD,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGJ;IAEhC,OAAOK,KAAKC,GAAG,CACbR,eAAe;QAAEG;QAAGC;IAAE,IACtBJ,eAAe;QAAEG,GAAGG,QAAQH;QAAGC;IAAE,IACjCJ,eAAe;QAAEG,GAAGG,QAAQH;QAAGC,GAAGC,SAASD;IAAE,IAC7CJ,eAAe;QAAEG;QAAGC,GAAGC,SAASD;IAAE;AAEtC;AAEA,cAAc,GACd,OAAO,SAASK,eACdC,KAG8B,EAC9BC,YAAqB;IAErB,MAAMC,UACJb,oBAAoBW,MAAMG,aAAa,KAAKH,MAAMG,aAAa;IACjE,MAAMC,OAAOF,QAAQG,qBAAqB;IAC1C,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEZ,MAAM,EAAEC,KAAK,EAAE,GAAGQ;IAErC,IAAIX;IACJ,IAAIC;IACJ,IAAI,SAASM,SAASC,cAAc;QAClCR,IAAIG,QAAQ;QACZF,IAAIC,SAAS;IACf,OAAO;QACL,IAAIa;QACJ,IAAIC;QACJ,IAAI,aAAaT,OAAO;YACrB,CAAA,EAAEQ,KAAK,EAAEC,KAAK,EAAE,GAAGT,MAAMU,OAAO,CAAC,EAAE,AAAD;QACrC,OAAO;YACJ,CAAA,EAAEF,KAAK,EAAEC,KAAK,EAAE,GAAGT,KAAI;QAC1B;QAEAP,IAAIe,QAASF,CAAAA,OAAOK,OAAOC,OAAO,AAAD;QACjClB,IAAIe,QAASF,CAAAA,MAAMI,OAAOE,OAAO,AAAD;IAClC;IAEA,MAAMC,SAASvB,UAAU;QAAEE;QAAGC;QAAGE;QAAOD;IAAO;IAC/C,MAAMoB,OAAOD,SAAS;IAEtB,OAAO;QACLR,MAAMb,IAAIqB;QACVP,KAAKb,IAAIoB;QACTnB,QAAQoB;QACRnB,OAAOmB;IACT;AACF;AAEA;;;;CAIC,GACD,MAAMC,cAAc;AAEpB,cAAc,GACd,OAAO,SAASC,cACdC,KAA8B;IAE9B,iEAAiE;IACjE,MAAMC,IAAID,MAAME,OAAO,CAACC,SAAS,CAAC,CAACC,SAAW,CAACA,OAAOC,OAAO;IAC7D,IAAIJ,MAAM,CAAC,GAAG;QACZ,OAAOD;IACT;IAEA,MAAME,UAAU;WAAIF,MAAME,OAAO;KAAC;IAClC,MAAME,SAASF,OAAO,CAACD,EAAE;IACzBC,OAAO,CAACD,EAAE,GAAG;QACX,GAAGG,MAAM;QACTC,SAASD,OAAOE,OAAO,IAAIC,KAAKC,GAAG,KAAKJ,OAAOK,SAAS,GAAGX;IAC7D;IACA,OAAO;QAAEY,SAAS;QAAOR;IAAQ;AACnC;AAUA,cAAc,GACd,OAAO,SAASS,mBACdrC,OAAkC;IAElC,MAAM,EAAEsC,IAAI,EAAER,MAAM,EAAEJ,KAAK,EAAEa,OAAO,EAAE,GAAGvC;IAEzC,MAAMwC,cAAcd,MAAME,OAAO,CAACa,OAAO,CAACX;IAC1C,IAAIU,gBAAgB,CAAC,GAAG;QACtB,OAAOd;IACT;IAEA,MAAME,UAAU;WAAIF,MAAME,OAAO;KAAC;IAClC,IAAIU,SAAS,UAAU;QACrBV,QAAQc,MAAM,CAACF,aAAa;IAC9B,OAAO;QACL,MAAMT,UAAU,CAACQ,WAAWN,KAAKC,GAAG,KAAKJ,OAAOK,SAAS,GAAGX;QAC5DI,OAAO,CAACY,YAAY,GAAG;YACrB,GAAGV,MAAM;YACTC;YACAC,SAAS;QACX;IACF;IAEA,OAAO;QAAE,GAAGN,KAAK;QAAEE;IAAQ;AAC7B"}

package/dist/layout/useExpandableLayout.js

@@ -136,14 +136,13 @@ let loggedOnce = false;
         } else {
             query = temporaryUntil;
         }
-        const timeout = window.setTimeout(()=>{
+        const timeout = globalThis.setTimeout(()=>{
             let found = false;
             for(let i = 0; i < document.styleSheets.length; i++){
                 const sheet = document.styleSheets[i];
                 try {
                     const rules = sheet.cssRules;
-                    for(let j = 0; j < rules.length; j++){
-                        const rule = rules[j];
+                    for (const rule of rules){
                         if (rule.cssText.includes(".rmd-layout") && rule.cssText.includes(`@media ${query}`)) {
                             found = true;
                             return;
@@ -160,7 +159,7 @@ let loggedOnce = false;
             }
         }, 3000);
         return ()=>{
-            window.clearTimeout(timeout);
+            globalThis.clearTimeout(timeout);
         };
     }, [
         temporaryUntil

package/dist/layout/useExpandableLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AppSize } from \"../media-queries/appSize.js\";\nimport { MEDIA_QUERY_CONFIG } from \"../media-queries/config.js\";\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { useDevEffect } from \"../utils/useDevEffect.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\n} from \"./useTemporaryLayout.js\";\n\nlet loggedOnce = false;\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * The default behavior is to use the temporary layout until the\n   * {@link AppSize.isTablet} is `true`. Set this to `\"desktop\"` to use the\n   * temporary layout until {@link AppSize.isDesktop} is `true`. Otherwise,\n   * provide a media query string to use the temporary layout until the media\n   * query matches\n   *\n   * @example Custom Media Query\n   * ```tsx\n   * useExpandableLayout({\n   *   ...options,\n   *   // display the expandable layout once the min-width is at least 1201px\n   *   temporaryUntil: \"screen and (min-width: 1201px)\",\n   * });\n   * ```\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\" | (string & {});\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends\n    ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const isAppSizeMatch =\n    temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\";\n  const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);\n  const temporary = isAppSizeMatch\n    ? isPhone || (temporaryUntil === \"desktop\" && !isDesktop)\n    : !matches;\n\n  useDevEffect(() => {\n    if (process.env.NODE_ENV === \"test\") {\n      return;\n    }\n\n    let query: string;\n    if (temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\") {\n      const minWidth =\n        temporaryUntil === \"tablet\"\n          ? MEDIA_QUERY_CONFIG.tabletMinWidth\n          : MEDIA_QUERY_CONFIG.desktopMinWidth;\n      query = `screen and (min-width: ${minWidth})`;\n    } else {\n      query = temporaryUntil;\n    }\n\n    const timeout = window.setTimeout(() => {\n      let found = false;\n      for (let i = 0; i < document.styleSheets.length; i++) {\n        const sheet = document.styleSheets[i];\n\n        try {\n          const rules = sheet.cssRules;\n          for (let j = 0; j < rules.length; j++) {\n            const rule = rules[j];\n            if (\n              rule.cssText.includes(\".rmd-layout\") &&\n              rule.cssText.includes(`@media ${query}`)\n            ) {\n              found = true;\n              return;\n            }\n          }\n        } catch {\n          //\n        }\n      }\n\n      if (!found && !loggedOnce) {\n        loggedOnce = true;\n        // eslint-disable-next-line no-console\n        console.error(\n          `The react-md expandable layout has set \\`temporaryUntil: \"${temporaryUntil}\"\\` but the corresponding styles have not been found.` +\n            \" This usually  means the `$layout-navigation-breakpoint` or `temporaryUntil` value should be updated match.\\n\\n\" +\n            \"See https://react-md.dev/getting-started/layout#updating-the-layout-to-be-temporary-until-a-specific-breakpoint-optional \" +\n            \"for more information.\"\n        );\n      }\n    }, 3000);\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [temporaryUntil]);\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useSsr","useAppSize","MEDIA_QUERY_CONFIG","useMediaQuery","useToggle","useDevEffect","useHorizontalLayoutTransition","useTemporaryLayout","loggedOnce","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","isAppSizeMatch","matches","temporary","process","env","NODE_ENV","query","minWidth","tabletMinWidth","desktopMinWidth","timeout","window","setTimeout","found","i","document","styleSheets","length","sheet","rules","cssRules","j","rule","cssText","includes","console","error","clearTimeout","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"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"}
+{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AppSize } from \"../media-queries/appSize.js\";\nimport { MEDIA_QUERY_CONFIG } from \"../media-queries/config.js\";\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { useDevEffect } from \"../utils/useDevEffect.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\n} from \"./useTemporaryLayout.js\";\n\nlet loggedOnce = false;\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * The default behavior is to use the temporary layout until the\n   * {@link AppSize.isTablet} is `true`. Set this to `\"desktop\"` to use the\n   * temporary layout until {@link AppSize.isDesktop} is `true`. Otherwise,\n   * provide a media query string to use the temporary layout until the media\n   * query matches\n   *\n   * @example Custom Media Query\n   * ```tsx\n   * useExpandableLayout({\n   *   ...options,\n   *   // display the expandable layout once the min-width is at least 1201px\n   *   temporaryUntil: \"screen and (min-width: 1201px)\",\n   * });\n   * ```\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\" | (string & {});\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends\n    ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const isAppSizeMatch =\n    temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\";\n  const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);\n  const temporary = isAppSizeMatch\n    ? isPhone || (temporaryUntil === \"desktop\" && !isDesktop)\n    : !matches;\n\n  useDevEffect(() => {\n    if (process.env.NODE_ENV === \"test\") {\n      return;\n    }\n\n    let query: string;\n    if (temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\") {\n      const minWidth =\n        temporaryUntil === \"tablet\"\n          ? MEDIA_QUERY_CONFIG.tabletMinWidth\n          : MEDIA_QUERY_CONFIG.desktopMinWidth;\n      query = `screen and (min-width: ${minWidth})`;\n    } else {\n      query = temporaryUntil;\n    }\n\n    const timeout = globalThis.setTimeout(() => {\n      let found = false;\n      for (let i = 0; i < document.styleSheets.length; i++) {\n        const sheet = document.styleSheets[i];\n\n        try {\n          const rules = sheet.cssRules;\n          for (const rule of rules) {\n            if (\n              rule.cssText.includes(\".rmd-layout\") &&\n              rule.cssText.includes(`@media ${query}`)\n            ) {\n              found = true;\n              return;\n            }\n          }\n        } catch {\n          //\n        }\n      }\n\n      if (!found && !loggedOnce) {\n        loggedOnce = true;\n        // eslint-disable-next-line no-console\n        console.error(\n          `The react-md expandable layout has set \\`temporaryUntil: \"${temporaryUntil}\"\\` but the corresponding styles have not been found.` +\n            \" This usually  means the `$layout-navigation-breakpoint` or `temporaryUntil` value should be updated match.\\n\\n\" +\n            \"See https://react-md.dev/getting-started/layout#updating-the-layout-to-be-temporary-until-a-specific-breakpoint-optional \" +\n            \"for more information.\"\n        );\n      }\n    }, 3000);\n\n    return () => {\n      globalThis.clearTimeout(timeout);\n    };\n  }, [temporaryUntil]);\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useSsr","useAppSize","MEDIA_QUERY_CONFIG","useMediaQuery","useToggle","useDevEffect","useHorizontalLayoutTransition","useTemporaryLayout","loggedOnce","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","isAppSizeMatch","matches","temporary","process","env","NODE_ENV","query","minWidth","tabletMinWidth","desktopMinWidth","timeout","globalThis","setTimeout","found","i","document","styleSheets","length","sheet","rules","cssRules","rule","cssText","includes","console","error","clearTimeout","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"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"}

package/dist/layout/useMainTabIndex.js

@@ -7,7 +7,7 @@ import { useUserInteractionMode } from "../interaction/UserInteractionModeProvid
  * @since 6.0.0
  */ export function useMainTabIndex(tabIndex) {
     const keyboard = useUserInteractionMode() === "keyboard";
-    if (keyboard && typeof tabIndex === "undefined") {
+    if (keyboard && tabIndex === undefined) {
         // eslint-disable-next-line no-param-reassign
         tabIndex = -1;
     }

package/dist/layout/useMainTabIndex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useMainTabIndex.ts"],"sourcesContent":["\"use client\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\n\n/**\n * This hook is used to return a tab index of `-1` whenever the user is using a\n * keyboard for the `SkipToMainContent` to work correctly.\n *\n * @since 6.0.0\n */\nexport function useMainTabIndex(tabIndex?: number): number | undefined {\n  const keyboard = useUserInteractionMode() === \"keyboard\";\n  if (keyboard && typeof tabIndex === \"undefined\") {\n    // eslint-disable-next-line no-param-reassign\n    tabIndex = -1;\n  }\n\n  return tabIndex;\n}\n"],"names":["useUserInteractionMode","useMainTabIndex","tabIndex","keyboard"],"mappings":"AAAA;AAEA,SAASA,sBAAsB,QAAQ,gDAAgD;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,QAAiB;IAC/C,MAAMC,WAAWH,6BAA6B;IAC9C,IAAIG,YAAY,OAAOD,aAAa,aAAa;QAC/C,6CAA6C;QAC7CA,WAAW,CAAC;IACd;IAEA,OAAOA;AACT"}
+{"version":3,"sources":["../../src/layout/useMainTabIndex.ts"],"sourcesContent":["\"use client\";\n\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\n\n/**\n * This hook is used to return a tab index of `-1` whenever the user is using a\n * keyboard for the `SkipToMainContent` to work correctly.\n *\n * @since 6.0.0\n */\nexport function useMainTabIndex(tabIndex?: number): number | undefined {\n  const keyboard = useUserInteractionMode() === \"keyboard\";\n  if (keyboard && tabIndex === undefined) {\n    // eslint-disable-next-line no-param-reassign\n    tabIndex = -1;\n  }\n\n  return tabIndex;\n}\n"],"names":["useUserInteractionMode","useMainTabIndex","tabIndex","keyboard","undefined"],"mappings":"AAAA;AAEA,SAASA,sBAAsB,QAAQ,gDAAgD;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,QAAiB;IAC/C,MAAMC,WAAWH,6BAA6B;IAC9C,IAAIG,YAAYD,aAAaE,WAAW;QACtC,6CAA6C;QAC7CF,WAAW,CAAC;IACd;IAEA,OAAOA;AACT"}

package/dist/list/ListItem.js

@@ -75,7 +75,7 @@ import { listItem } from "./listItemStyles.js";
  */ export const ListItem = /*#__PURE__*/ forwardRef(function ListItem(props, ref) {
     const { className, textProps, textClassName, secondaryTextClassName, primaryText, secondaryText, secondaryTextProps, disableTextChildren = false, height: propHeight, leftAddon, leftAddonType, leftAddonPosition, leftAddonClassName, leftAddonForceWrap, rightAddon, rightAddonType, rightAddonPosition, rightAddonClassName, rightAddonForceWrap, disableLeftAddonSpacing, disableLeftAddonCenteredMedia, disableRightAddonCenteredMedia, multiline = false, disabled = false, disableRipple, disabledOpacity = false, role = "button", onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, tabIndex: propTabIndex, children: propChildren, presentational = role === "presentation", ...remaining } = props;
     let tabIndex = propTabIndex;
-    if (!presentational && typeof tabIndex === "undefined") {
+    if (!presentational && tabIndex === undefined) {
         tabIndex = disabled ? -1 : 0;
     }
     const { pressedClassName, ripples, handlers } = useElementInteraction({

package/dist/list/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport {\n  type BaseListItemClassNameOptions,\n  listItem,\n} from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed `threeLines` to `multiline` since it can\n * support more than three lines of text.\n * @since 6.3.1 Extends the BaseListItemClassNameOptions\n */\nexport interface ListItemProps\n  extends\n    HTMLAttributes<HTMLLIElement>,\n    ListItemChildrenProps,\n    BaseListItemClassNameOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"button\"`\n   */\n  role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n  /**\n   * @defaultValue `disabled ? -1 : 0`\n   */\n  tabIndex?: number;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `role === \"presentation\"`\n   */\n  presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Item 2\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @example Applying Addons Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem leftAddon={<FavoriteIcon />}>\n *         Item 1\n *       </ListItem>\n *       <ListItem rightAddon={<FavoriteIcon />}>\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *       >\n *         Item 3\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n  function ListItem(props, ref) {\n    const {\n      className,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      leftAddonPosition,\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType,\n      rightAddonPosition,\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonSpacing,\n      disableLeftAddonCenteredMedia,\n      disableRightAddonCenteredMedia,\n      multiline = false,\n      disabled = false,\n      disableRipple,\n      disabledOpacity = false,\n      role = \"button\",\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      tabIndex: propTabIndex,\n      children: propChildren,\n      presentational = role === \"presentation\",\n      ...remaining\n    } = props;\n\n    let tabIndex = propTabIndex;\n    if (!presentational && typeof tabIndex === \"undefined\") {\n      tabIndex = disabled ? -1 : 0;\n    }\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled: disabled || presentational,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={listItem({\n          className,\n          height,\n          disabled,\n          disabledOpacity,\n          multiline,\n          clickable: !presentational,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={leftAddon}\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={leftAddonClassName}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={rightAddon}\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonSpacing={disableLeftAddonSpacing}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","ListItemChildren","getListItemHeight","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disableRipple","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","pressedClassName","ripples","handlers","mode","undefined","li","aria-disabled","clickable"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAEEC,QAAQ,QACH,sBAAsB;AAkC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,UAAU,EAClBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,aAAa,EACbC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG9C;IAEJ,IAAIyC,WAAWC;IACf,IAAI,CAACG,kBAAkB,OAAOJ,aAAa,aAAa;QACtDA,WAAWf,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEqB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGvD,sBAAsB;QACpEwD,MAAMvB,gBAAgB,SAASwB;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd,UAAUA,YAAYmB;IACxB;IACA,MAAMF,WAAWhD,0BACfiD,cACA,CAACnC;IAGH,MAAMC,SAASb,kBAAkB;QAC/Ba,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAAC6C;QACE,GAAGN,SAAS;QACZ,GAAGG,QAAQ;QACZI,iBAAe3B,YAAYyB;QAC3BlD,KAAKA;QACL4B,MAAMA;QACNY,UAAUA;QACVvC,WAAWJ,SAAS;YAClBI;YACAQ;YACAgB;YACAE;YACAH;YACA6B,WAAW,CAACT;YACZE;QACF;;0BAEA,KAACnD;gBACC6B,WAAWA;gBACXrB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,yBAAyBA;gBACzBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BmB;;YAEFK;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/list/ListItem.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"./ListItemChildren.js\";\nimport { getListItemHeight } from \"./getListItemHeight.js\";\nimport {\n  type BaseListItemClassNameOptions,\n  listItem,\n} from \"./listItemStyles.js\";\nimport { type ListItemChildrenProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Renamed `threeLines` to `multiline` since it can\n * support more than three lines of text.\n * @since 6.3.1 Extends the BaseListItemClassNameOptions\n */\nexport interface ListItemProps\n  extends\n    HTMLAttributes<HTMLLIElement>,\n    ListItemChildrenProps,\n    BaseListItemClassNameOptions,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"button\"`\n   */\n  role?: HTMLAttributes<HTMLLIElement>[\"role\"];\n\n  /**\n   * @defaultValue `disabled ? -1 : 0`\n   */\n  tabIndex?: number;\n\n  /**\n   * Set this to `false` if the list item should not gain the interaction\n   * states: hover, focus, press, etc. This is kind of like being disabled\n   * without the disabled styles being applied.\n   *\n   * @defaultValue `role === \"presentation\"`\n   */\n  presentational?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * The `ListItem` is used to create a clickable/focusable button within a\n * `List` and removes the normal `<li>` styles.\n *\n * @example Simple Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *       >\n *         Item 1\n *       </ListItem>\n *       <ListItem\n *         onClick={() => {\n *           // do something\n *         }}\n *         secondaryText={<span>Some <strong>additional</strong> content.</span>}\n *       >\n *         Item 2\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @example Applying Addons Example\n * ```tsx\n * import { List } from \"@react-md/core/list/List\";\n * import { ListItem } from \"@react-md/core/list/ListItem\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement  } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <List>\n *       <ListItem leftAddon={<FavoriteIcon />}>\n *         Item 1\n *       </ListItem>\n *       <ListItem rightAddon={<FavoriteIcon />}>\n *         Item 2\n *       </ListItem>\n *       <ListItem\n *         leftAddon={<FavoriteIcon />}\n *         rightAddon={<img alt=\"\" src=\"/some-image.png\" />}\n *         rightAddonType=\"media\"\n *       >\n *         Item 3\n *       </ListItem>\n *     </List>\n *   );\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/list | List Demos}\n */\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n  function ListItem(props, ref) {\n    const {\n      className,\n      textProps,\n      textClassName,\n      secondaryTextClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextProps,\n      disableTextChildren = false,\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      leftAddonPosition,\n      leftAddonClassName,\n      leftAddonForceWrap,\n      rightAddon,\n      rightAddonType,\n      rightAddonPosition,\n      rightAddonClassName,\n      rightAddonForceWrap,\n      disableLeftAddonSpacing,\n      disableLeftAddonCenteredMedia,\n      disableRightAddonCenteredMedia,\n      multiline = false,\n      disabled = false,\n      disableRipple,\n      disabledOpacity = false,\n      role = \"button\",\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      tabIndex: propTabIndex,\n      children: propChildren,\n      presentational = role === \"presentation\",\n      ...remaining\n    } = props;\n\n    let tabIndex = propTabIndex;\n    if (!presentational && tabIndex === undefined) {\n      tabIndex = disabled ? -1 : 0;\n    }\n\n    const { pressedClassName, ripples, handlers } = useElementInteraction({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled: disabled || presentational,\n    });\n    const children = useHigherContrastChildren(\n      propChildren,\n      !disableTextChildren\n    );\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon,\n      leftAddonType,\n      rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <li\n        {...remaining}\n        {...handlers}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        className={listItem({\n          className,\n          height,\n          disabled,\n          disabledOpacity,\n          multiline,\n          clickable: !presentational,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={leftAddon}\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={leftAddonClassName}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={rightAddon}\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonSpacing={disableLeftAddonSpacing}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","ListItemChildren","getListItemHeight","listItem","ListItem","props","ref","className","textProps","textClassName","secondaryTextClassName","primaryText","secondaryText","secondaryTextProps","disableTextChildren","height","propHeight","leftAddon","leftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableLeftAddonSpacing","disableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","multiline","disabled","disableRipple","disabledOpacity","role","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","tabIndex","propTabIndex","children","propChildren","presentational","remaining","undefined","pressedClassName","ripples","handlers","mode","li","aria-disabled","clickable"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAEEC,QAAQ,QACH,sBAAsB;AAkC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,GACD,OAAO,MAAMC,yBAAWN,WACtB,SAASM,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,sBAAsB,EACtBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,sBAAsB,KAAK,EAC3BC,QAAQC,UAAU,EAClBC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,UAAU,EACVC,cAAc,EACdC,kBAAkB,EAClBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,aAAa,EACbC,kBAAkB,KAAK,EACvBC,OAAO,QAAQ,EACfC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,iBAAiBhB,SAAS,cAAc,EACxC,GAAGiB,WACJ,GAAG9C;IAEJ,IAAIyC,WAAWC;IACf,IAAI,CAACG,kBAAkBJ,aAAaM,WAAW;QAC7CN,WAAWf,WAAW,CAAC,IAAI;IAC7B;IAEA,MAAM,EAAEsB,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGxD,sBAAsB;QACpEyD,MAAMxB,gBAAgB,SAASoB;QAC/BjB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd,UAAUA,YAAYmB;IACxB;IACA,MAAMF,WAAWhD,0BACfiD,cACA,CAACnC;IAGH,MAAMC,SAASb,kBAAkB;QAC/Ba,QAAQC;QACRC;QACAC;QACAI;QACAC;QACAX;IACF;IAEA,qBACE,MAAC6C;QACE,GAAGN,SAAS;QACZ,GAAGI,QAAQ;QACZG,iBAAe3B,YAAYqB;QAC3B9C,KAAKA;QACL4B,MAAMA;QACNY,UAAUA;QACVvC,WAAWJ,SAAS;YAClBI;YACAQ;YACAgB;YACAE;YACAH;YACA6B,WAAW,CAACT;YACZG;QACF;;0BAEA,KAACpD;gBACC6B,WAAWA;gBACXrB,eAAeA;gBACfC,wBAAwBA;gBACxBI,qBAAqBA;gBACrBH,aAAaA;gBACbH,WAAWA;gBACXI,eAAeA;gBACfC,oBAAoBA;gBACpBI,WAAWA;gBACXC,eAAeA;gBACfC,mBAAmBA;gBACnBC,oBAAoBA;gBACpBC,oBAAoBA;gBACpBC,YAAYA;gBACZC,gBAAgBA;gBAChBC,oBAAoBA;gBACpBC,qBAAqBA;gBACrBC,qBAAqBA;gBACrBC,yBAAyBA;gBACzBC,+BAA+BA;gBAC/BC,gCAAgCA;0BAE/BmB;;YAEFM;;;AAGP,GACA"}

package/dist/media-queries/AppSizeProvider.js

@@ -82,7 +82,7 @@ const { Provider } = context;
         isTablet
     ]);
     let value = appSize;
-    if (ssr || typeof window === "undefined") {
+    if (ssr || globalThis.window === undefined) {
         value = {
             __root: true,
             ...ssrSize

package/dist/media-queries/AppSizeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media-queries/AppSizeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useOrientation } from \"../useOrientation.js\";\nimport {\n  type AppSize,\n  type AppSizeQueries,\n  DEFAULT_APP_SIZE,\n} from \"./appSize.js\";\nimport { MEDIA_QUERY_CONFIG } from \"./config.js\";\nimport { useMediaQuery } from \"./useMediaQuery.js\";\n\n/** @internal */\ninterface AppSizeContext extends AppSize {\n  __root: boolean;\n}\n\nconst context = createContext<AppSizeContext>({\n  __root: false,\n  isPhone: false,\n  isTablet: false,\n  isDesktop: true,\n  isLargeDesktop: false,\n  isLandscape: true,\n});\ncontext.displayName = \"AppSize\";\nconst { Provider } = context;\n\n/**\n * **Note**: The app size object returned by this hook will **not** be equal\n * between renders.\n *\n * @example Simple Example\n * ```tsx\n * import { useAppSize } from \"@react-md/core/media-queries/AppSizeProvider\";\n *\n * function Example() {\n *   const { isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape } =\n *     useAppSize()\n *\n *   // do something based on the app size\n *   return null;\n * }\n * ```\n *\n * @returns the current app size.\n * @throws \"The `AppSizeProvider` has not been mounted.\"\n */\nexport function useAppSize(): Readonly<AppSize> {\n  const { __root, ...appSize } = useContext(context);\n  if (!__root) {\n    throw new Error(\"The `AppSizeProvider` has not been mounted.\");\n  }\n\n  return appSize;\n}\n\n/**\n * @since 6.0.0 Renamed from `AppSizeListenerProps`.\n * @since 6.0.0 Removed the `onChange` prop\n * @since 6.0.0 Renamed `defaultSize` to `ssrSize`\n * @since 6.4.0 Deprecated the `AppSizeQueries` in favor\n * of the `MEDIA_QUERY_CONFIG`\n */\nexport interface AppSizeProviderProps extends AppSizeQueries {\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE`\n   * @see {@link DEFAULT_APP_SIZE}\n   * @since 6.0.0\n   */\n  ssrSize?: Readonly<AppSize>;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component should be mounted near the root of your app to determine the\n * current app size based on different media queries.\n *\n * @see {@link https://react-md.dev/components/core-providers | CoreProviders Demos}\n * @see {@link https://react-md.dev/components/app-size-provider | AppSizeProvider Demos}\n * @since 6.0.0 Renamed from `AppSizeListener`\n */\nexport function AppSizeProvider(props: AppSizeProviderProps): ReactElement {\n  const {\n    ssrSize = DEFAULT_APP_SIZE,\n    phoneMaxWidth = MEDIA_QUERY_CONFIG.phoneMaxWidth,\n    tabletMinWidth = MEDIA_QUERY_CONFIG.tabletMinWidth,\n    tabletMaxWidth = MEDIA_QUERY_CONFIG.tabletMaxWidth,\n    desktopMinWidth = MEDIA_QUERY_CONFIG.desktopMinWidth,\n    desktopLargeMinWidth = MEDIA_QUERY_CONFIG.desktopLargeMinWidth,\n    children,\n  } = props;\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\"The `AppSizeProvider` cannot be mounted multiple times.\");\n  }\n\n  const ssr = useSsr();\n  const matchesDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopMinWidth})`\n  );\n  const matchesLargeDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopLargeMinWidth})`\n  );\n  const matchesTablet = useMediaQuery(\n    `screen and (min-width: ${tabletMinWidth}) and (max-width: ${tabletMaxWidth})`\n  );\n  const matchesPhone = useMediaQuery(\n    `screen and (max-width: ${phoneMaxWidth})`\n  );\n  const isDesktop = matchesDesktop;\n  const isTablet = !matchesDesktop && matchesTablet;\n  const isPhone = !isTablet && !isDesktop && matchesPhone;\n  const isLandscape = useOrientation().includes(\"landscape\");\n  const isLargeDesktop = matchesLargeDesktop;\n\n  const appSize = useMemo<AppSizeContext>(\n    () => ({\n      __root: true,\n      isPhone,\n      isTablet,\n      isDesktop,\n      isLargeDesktop,\n      isLandscape,\n    }),\n    [isDesktop, isLandscape, isLargeDesktop, isPhone, isTablet]\n  );\n\n  let value = appSize;\n  if (ssr || typeof window === \"undefined\") {\n    value = {\n      __root: true,\n      ...ssrSize,\n    };\n  }\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","useSsr","useOrientation","DEFAULT_APP_SIZE","MEDIA_QUERY_CONFIG","useMediaQuery","context","__root","isPhone","isTablet","isDesktop","isLargeDesktop","isLandscape","displayName","Provider","useAppSize","appSize","Error","AppSizeProvider","props","ssrSize","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","children","ssr","matchesDesktop","matchesLargeDesktop","matchesTablet","matchesPhone","includes","value","window"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAGEC,gBAAgB,QACX,eAAe;AACtB,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,aAAa,QAAQ,qBAAqB;AAOnD,MAAMC,wBAAUR,cAA8B;IAC5CS,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;AACf;AACAN,QAAQO,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGR;AAErB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASS;IACd,MAAM,EAAER,MAAM,EAAE,GAAGS,SAAS,GAAGjB,WAAWO;IAC1C,IAAI,CAACC,QAAQ;QACX,MAAM,IAAIU,MAAM;IAClB;IAEA,OAAOD;AACT;AAmBA;;;;;;;;;CASC,GACD,OAAO,SAASE,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,UAAUjB,gBAAgB,EAC1BkB,gBAAgBjB,mBAAmBiB,aAAa,EAChDC,iBAAiBlB,mBAAmBkB,cAAc,EAClDC,iBAAiBnB,mBAAmBmB,cAAc,EAClDC,kBAAkBpB,mBAAmBoB,eAAe,EACpDC,uBAAuBrB,mBAAmBqB,oBAAoB,EAC9DC,QAAQ,EACT,GAAGP;IACJ,MAAM,EAAEZ,MAAM,EAAE,GAAGR,WAAWO;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIU,MAAM;IAClB;IAEA,MAAMU,MAAM1B;IACZ,MAAM2B,iBAAiBvB,cACrB,CAAC,uBAAuB,EAAEmB,gBAAgB,CAAC,CAAC;IAE9C,MAAMK,sBAAsBxB,cAC1B,CAAC,uBAAuB,EAAEoB,qBAAqB,CAAC,CAAC;IAEnD,MAAMK,gBAAgBzB,cACpB,CAAC,uBAAuB,EAAEiB,eAAe,kBAAkB,EAAEC,eAAe,CAAC,CAAC;IAEhF,MAAMQ,eAAe1B,cACnB,CAAC,uBAAuB,EAAEgB,cAAc,CAAC,CAAC;IAE5C,MAAMX,YAAYkB;IAClB,MAAMnB,WAAW,CAACmB,kBAAkBE;IACpC,MAAMtB,UAAU,CAACC,YAAY,CAACC,aAAaqB;IAC3C,MAAMnB,cAAcV,iBAAiB8B,QAAQ,CAAC;IAC9C,MAAMrB,iBAAiBkB;IAEvB,MAAMb,UAAUhB,QACd,IAAO,CAAA;YACLO,QAAQ;YACRC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACF;QAAWE;QAAaD;QAAgBH;QAASC;KAAS;IAG7D,IAAIwB,QAAQjB;IACZ,IAAIW,OAAO,OAAOO,WAAW,aAAa;QACxCD,QAAQ;YACN1B,QAAQ;YACR,GAAGa,OAAO;QACZ;IACF;IAEA,qBAAO,KAACN;QAASmB,OAAOA;kBAAQP;;AAClC"}
+{"version":3,"sources":["../../src/media-queries/AppSizeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useOrientation } from \"../useOrientation.js\";\nimport {\n  type AppSize,\n  type AppSizeQueries,\n  DEFAULT_APP_SIZE,\n} from \"./appSize.js\";\nimport { MEDIA_QUERY_CONFIG } from \"./config.js\";\nimport { useMediaQuery } from \"./useMediaQuery.js\";\n\n/** @internal */\ninterface AppSizeContext extends AppSize {\n  __root: boolean;\n}\n\nconst context = createContext<AppSizeContext>({\n  __root: false,\n  isPhone: false,\n  isTablet: false,\n  isDesktop: true,\n  isLargeDesktop: false,\n  isLandscape: true,\n});\ncontext.displayName = \"AppSize\";\nconst { Provider } = context;\n\n/**\n * **Note**: The app size object returned by this hook will **not** be equal\n * between renders.\n *\n * @example Simple Example\n * ```tsx\n * import { useAppSize } from \"@react-md/core/media-queries/AppSizeProvider\";\n *\n * function Example() {\n *   const { isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape } =\n *     useAppSize()\n *\n *   // do something based on the app size\n *   return null;\n * }\n * ```\n *\n * @returns the current app size.\n * @throws \"The `AppSizeProvider` has not been mounted.\"\n */\nexport function useAppSize(): Readonly<AppSize> {\n  const { __root, ...appSize } = useContext(context);\n  if (!__root) {\n    throw new Error(\"The `AppSizeProvider` has not been mounted.\");\n  }\n\n  return appSize;\n}\n\n/**\n * @since 6.0.0 Renamed from `AppSizeListenerProps`.\n * @since 6.0.0 Removed the `onChange` prop\n * @since 6.0.0 Renamed `defaultSize` to `ssrSize`\n * @since 6.4.0 Deprecated the `AppSizeQueries` in favor\n * of the `MEDIA_QUERY_CONFIG`\n */\nexport interface AppSizeProviderProps extends AppSizeQueries {\n  /**\n   * @defaultValue `DEFAULT_APP_SIZE`\n   * @see {@link DEFAULT_APP_SIZE}\n   * @since 6.0.0\n   */\n  ssrSize?: Readonly<AppSize>;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component should be mounted near the root of your app to determine the\n * current app size based on different media queries.\n *\n * @see {@link https://react-md.dev/components/core-providers | CoreProviders Demos}\n * @see {@link https://react-md.dev/components/app-size-provider | AppSizeProvider Demos}\n * @since 6.0.0 Renamed from `AppSizeListener`\n */\nexport function AppSizeProvider(props: AppSizeProviderProps): ReactElement {\n  const {\n    ssrSize = DEFAULT_APP_SIZE,\n    phoneMaxWidth = MEDIA_QUERY_CONFIG.phoneMaxWidth,\n    tabletMinWidth = MEDIA_QUERY_CONFIG.tabletMinWidth,\n    tabletMaxWidth = MEDIA_QUERY_CONFIG.tabletMaxWidth,\n    desktopMinWidth = MEDIA_QUERY_CONFIG.desktopMinWidth,\n    desktopLargeMinWidth = MEDIA_QUERY_CONFIG.desktopLargeMinWidth,\n    children,\n  } = props;\n  const { __root } = useContext(context);\n  if (__root) {\n    throw new Error(\"The `AppSizeProvider` cannot be mounted multiple times.\");\n  }\n\n  const ssr = useSsr();\n  const matchesDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopMinWidth})`\n  );\n  const matchesLargeDesktop = useMediaQuery(\n    `screen and (min-width: ${desktopLargeMinWidth})`\n  );\n  const matchesTablet = useMediaQuery(\n    `screen and (min-width: ${tabletMinWidth}) and (max-width: ${tabletMaxWidth})`\n  );\n  const matchesPhone = useMediaQuery(\n    `screen and (max-width: ${phoneMaxWidth})`\n  );\n  const isDesktop = matchesDesktop;\n  const isTablet = !matchesDesktop && matchesTablet;\n  const isPhone = !isTablet && !isDesktop && matchesPhone;\n  const isLandscape = useOrientation().includes(\"landscape\");\n  const isLargeDesktop = matchesLargeDesktop;\n\n  const appSize = useMemo<AppSizeContext>(\n    () => ({\n      __root: true,\n      isPhone,\n      isTablet,\n      isDesktop,\n      isLargeDesktop,\n      isLandscape,\n    }),\n    [isDesktop, isLandscape, isLargeDesktop, isPhone, isTablet]\n  );\n\n  let value = appSize;\n  if (ssr || globalThis.window === undefined) {\n    value = {\n      __root: true,\n      ...ssrSize,\n    };\n  }\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useMemo","useSsr","useOrientation","DEFAULT_APP_SIZE","MEDIA_QUERY_CONFIG","useMediaQuery","context","__root","isPhone","isTablet","isDesktop","isLargeDesktop","isLandscape","displayName","Provider","useAppSize","appSize","Error","AppSizeProvider","props","ssrSize","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","children","ssr","matchesDesktop","matchesLargeDesktop","matchesTablet","matchesPhone","includes","value","globalThis","window","undefined"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,QAAQ;AAEf,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAGEC,gBAAgB,QACX,eAAe;AACtB,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,aAAa,QAAQ,qBAAqB;AAOnD,MAAMC,wBAAUR,cAA8B;IAC5CS,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;AACf;AACAN,QAAQO,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGR;AAErB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASS;IACd,MAAM,EAAER,MAAM,EAAE,GAAGS,SAAS,GAAGjB,WAAWO;IAC1C,IAAI,CAACC,QAAQ;QACX,MAAM,IAAIU,MAAM;IAClB;IAEA,OAAOD;AACT;AAmBA;;;;;;;;;CASC,GACD,OAAO,SAASE,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,UAAUjB,gBAAgB,EAC1BkB,gBAAgBjB,mBAAmBiB,aAAa,EAChDC,iBAAiBlB,mBAAmBkB,cAAc,EAClDC,iBAAiBnB,mBAAmBmB,cAAc,EAClDC,kBAAkBpB,mBAAmBoB,eAAe,EACpDC,uBAAuBrB,mBAAmBqB,oBAAoB,EAC9DC,QAAQ,EACT,GAAGP;IACJ,MAAM,EAAEZ,MAAM,EAAE,GAAGR,WAAWO;IAC9B,IAAIC,QAAQ;QACV,MAAM,IAAIU,MAAM;IAClB;IAEA,MAAMU,MAAM1B;IACZ,MAAM2B,iBAAiBvB,cACrB,CAAC,uBAAuB,EAAEmB,gBAAgB,CAAC,CAAC;IAE9C,MAAMK,sBAAsBxB,cAC1B,CAAC,uBAAuB,EAAEoB,qBAAqB,CAAC,CAAC;IAEnD,MAAMK,gBAAgBzB,cACpB,CAAC,uBAAuB,EAAEiB,eAAe,kBAAkB,EAAEC,eAAe,CAAC,CAAC;IAEhF,MAAMQ,eAAe1B,cACnB,CAAC,uBAAuB,EAAEgB,cAAc,CAAC,CAAC;IAE5C,MAAMX,YAAYkB;IAClB,MAAMnB,WAAW,CAACmB,kBAAkBE;IACpC,MAAMtB,UAAU,CAACC,YAAY,CAACC,aAAaqB;IAC3C,MAAMnB,cAAcV,iBAAiB8B,QAAQ,CAAC;IAC9C,MAAMrB,iBAAiBkB;IAEvB,MAAMb,UAAUhB,QACd,IAAO,CAAA;YACLO,QAAQ;YACRC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACF;QAAWE;QAAaD;QAAgBH;QAASC;KAAS;IAG7D,IAAIwB,QAAQjB;IACZ,IAAIW,OAAOO,WAAWC,MAAM,KAAKC,WAAW;QAC1CH,QAAQ;YACN1B,QAAQ;YACR,GAAGa,OAAO;QACZ;IACF;IAEA,qBAAO,KAACN;QAASmB,OAAOA;kBAAQP;;AAClC"}

package/dist/media-queries/config.js

@@ -12,12 +12,12 @@ import { DEFAULT_DESKTOP_LARGE_MIN_WIDTH, DEFAULT_DESKTOP_MIN_WIDTH, DEFAULT_PHO
  * @since 6.4.0
  */ export function configureMediaQueries(queries) {
     if (process.env.NODE_ENV !== "production") {
-        Object.entries(queries).forEach(([name, value])=>{
+        for (const [name, value] of Object.entries(queries)){
             if (!(name in MEDIA_QUERY_CONFIG)) {
                 throw new Error(`${name} is an invalid react-md media query.`);
             }
             MEDIA_QUERY_CONFIG[name] = value;
-        });
+        }
     } else {
         Object.assign(MEDIA_QUERY_CONFIG, queries);
     }

package/dist/media-queries/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media-queries/config.ts"],"sourcesContent":["import {\n  type AppSizeQueries,\n  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n  DEFAULT_DESKTOP_MIN_WIDTH,\n  DEFAULT_PHONE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n  DEFAULT_TABLET_MIN_WIDTH,\n} from \"./appSize.js\";\n\n/** @since 6.4.0 */\nexport type MediaQueryConfig = Required<AppSizeQueries>;\n\n/**\n * @since 6.4.0\n */\nexport const MEDIA_QUERY_CONFIG: MediaQueryConfig = {\n  phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,\n  tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,\n  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,\n  desktopMinWidth: DEFAULT_DESKTOP_MIN_WIDTH,\n  desktopLargeMinWidth: DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n};\n\n/**\n * @since 6.4.0\n */\nexport function configureMediaQueries(\n  queries: Readonly<Partial<MediaQueryConfig>>\n): void {\n  if (process.env.NODE_ENV !== \"production\") {\n    Object.entries(queries).forEach(([name, value]) => {\n      if (!(name in MEDIA_QUERY_CONFIG)) {\n        throw new Error(`${name} is an invalid react-md media query.`);\n      }\n\n      MEDIA_QUERY_CONFIG[name as keyof MediaQueryConfig] = value;\n    });\n  } else {\n    Object.assign(MEDIA_QUERY_CONFIG, queries);\n  }\n}\n"],"names":["DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","MEDIA_QUERY_CONFIG","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","configureMediaQueries","queries","process","env","NODE_ENV","Object","entries","forEach","name","value","Error","assign"],"mappings":"AAAA,SAEEA,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,EACxBC,wBAAwB,QACnB,eAAe;AAKtB;;CAEC,GACD,OAAO,MAAMC,qBAAuC;IAClDC,eAAeJ;IACfK,gBAAgBH;IAChBI,gBAAgBL;IAChBM,iBAAiBR;IACjBS,sBAAsBV;AACxB,EAAE;AAEF;;CAEC,GACD,OAAO,SAASW,sBACdC,OAA4C;IAE5C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzCC,OAAOC,OAAO,CAACL,SAASM,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YAC5C,IAAI,CAAED,CAAAA,QAAQd,kBAAiB,GAAI;gBACjC,MAAM,IAAIgB,MAAM,GAAGF,KAAK,oCAAoC,CAAC;YAC/D;YAEAd,kBAAkB,CAACc,KAA+B,GAAGC;QACvD;IACF,OAAO;QACLJ,OAAOM,MAAM,CAACjB,oBAAoBO;IACpC;AACF"}
+{"version":3,"sources":["../../src/media-queries/config.ts"],"sourcesContent":["import {\n  type AppSizeQueries,\n  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n  DEFAULT_DESKTOP_MIN_WIDTH,\n  DEFAULT_PHONE_MAX_WIDTH,\n  DEFAULT_TABLET_MAX_WIDTH,\n  DEFAULT_TABLET_MIN_WIDTH,\n} from \"./appSize.js\";\n\n/** @since 6.4.0 */\nexport type MediaQueryConfig = Required<AppSizeQueries>;\n\n/**\n * @since 6.4.0\n */\nexport const MEDIA_QUERY_CONFIG: MediaQueryConfig = {\n  phoneMaxWidth: DEFAULT_PHONE_MAX_WIDTH,\n  tabletMinWidth: DEFAULT_TABLET_MIN_WIDTH,\n  tabletMaxWidth: DEFAULT_TABLET_MAX_WIDTH,\n  desktopMinWidth: DEFAULT_DESKTOP_MIN_WIDTH,\n  desktopLargeMinWidth: DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n};\n\n/**\n * @since 6.4.0\n */\nexport function configureMediaQueries(\n  queries: Readonly<Partial<MediaQueryConfig>>\n): void {\n  if (process.env.NODE_ENV !== \"production\") {\n    for (const [name, value] of Object.entries(queries)) {\n      if (!(name in MEDIA_QUERY_CONFIG)) {\n        throw new Error(`${name} is an invalid react-md media query.`);\n      }\n\n      MEDIA_QUERY_CONFIG[name as keyof MediaQueryConfig] = value;\n    }\n  } else {\n    Object.assign(MEDIA_QUERY_CONFIG, queries);\n  }\n}\n"],"names":["DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","MEDIA_QUERY_CONFIG","phoneMaxWidth","tabletMinWidth","tabletMaxWidth","desktopMinWidth","desktopLargeMinWidth","configureMediaQueries","queries","process","env","NODE_ENV","name","value","Object","entries","Error","assign"],"mappings":"AAAA,SAEEA,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,EACxBC,wBAAwB,QACnB,eAAe;AAKtB;;CAEC,GACD,OAAO,MAAMC,qBAAuC;IAClDC,eAAeJ;IACfK,gBAAgBH;IAChBI,gBAAgBL;IAChBM,iBAAiBR;IACjBS,sBAAsBV;AACxB,EAAE;AAEF;;CAEC,GACD,OAAO,SAASW,sBACdC,OAA4C;IAE5C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,KAAK,MAAM,CAACC,MAAMC,MAAM,IAAIC,OAAOC,OAAO,CAACP,SAAU;YACnD,IAAI,CAAEI,CAAAA,QAAQX,kBAAiB,GAAI;gBACjC,MAAM,IAAIe,MAAM,GAAGJ,KAAK,oCAAoC,CAAC;YAC/D;YAEAX,kBAAkB,CAACW,KAA+B,GAAGC;QACvD;IACF,OAAO;QACLC,OAAOG,MAAM,CAAChB,oBAAoBO;IACpC;AACF"}

package/dist/media-queries/useMediaQuery.js

@@ -24,16 +24,16 @@ import { useSsr } from "../SsrProvider.js";
  */ export function useMediaQuery(query, disabled = false) {
     const ssr = useSsr();
     const [matches, setMatches] = useState(()=>{
-        if (typeof window === "undefined" || disabled || ssr) {
+        if (globalThis.window === undefined || disabled || ssr) {
             return false;
         }
-        return window.matchMedia(query).matches;
+        return globalThis.matchMedia(query).matches;
     });
     useEffect(()=>{
         if (disabled || ssr) {
             return;
         }
-        const result = window.matchMedia(query);
+        const result = globalThis.matchMedia(query);
         setMatches(result.matches);
         const updater = ({ matches })=>{
             setMatches(matches);

package/dist/media-queries/useMediaQuery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media-queries/useMediaQuery.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useMediaQuery } from \"@react-md/core/media-queries/useMediaQuery\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const matches = useMediaQuery(\"screen and (min-width: 768px)\");\n *\n *   return <>{matches ? \"Matches\" : \"Doesn't\"}</>;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-media-query | useMediaQuery Demos}\n * @see {@link https://react-md.dev/components/app-size-provider | AppSizeProvider Demos}\n * @param query - The media query to use\n * @param disabled - When `true`, the `window.matchMedia` API will not be\n * activated and the hook will return the last cached value.\n * @returns `true` if the media query matches\n * @since 6.0.0 Removed the `defaultValue` and `checkImmediately` options.\n */\nexport function useMediaQuery(query: string, disabled = false): boolean {\n  const ssr = useSsr();\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === \"undefined\" || disabled || ssr) {\n      return false;\n    }\n\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (disabled || ssr) {\n      return;\n    }\n\n    const result = window.matchMedia(query);\n    setMatches(result.matches);\n\n    const updater = ({ matches }: MediaQueryListEvent): void => {\n      setMatches(matches);\n    };\n\n    result.addEventListener(\"change\", updater);\n    return () => {\n      result.removeEventListener(\"change\", updater);\n    };\n  }, [disabled, query, ssr]);\n\n  return matches;\n}\n"],"names":["useEffect","useState","useSsr","useMediaQuery","query","disabled","ssr","matches","setMatches","window","matchMedia","result","updater","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C,SAASC,MAAM,QAAQ,oBAAoB;AAE3C;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,cAAcC,KAAa,EAAEC,WAAW,KAAK;IAC3D,MAAMC,MAAMJ;IACZ,MAAM,CAACK,SAASC,WAAW,GAAGP,SAAS;QACrC,IAAI,OAAOQ,WAAW,eAAeJ,YAAYC,KAAK;YACpD,OAAO;QACT;QAEA,OAAOG,OAAOC,UAAU,CAACN,OAAOG,OAAO;IACzC;IAEAP,UAAU;QACR,IAAIK,YAAYC,KAAK;YACnB;QACF;QAEA,MAAMK,SAASF,OAAOC,UAAU,CAACN;QACjCI,WAAWG,OAAOJ,OAAO;QAEzB,MAAMK,UAAU,CAAC,EAAEL,OAAO,EAAuB;YAC/CC,WAAWD;QACb;QAEAI,OAAOE,gBAAgB,CAAC,UAAUD;QAClC,OAAO;YACLD,OAAOG,mBAAmB,CAAC,UAAUF;QACvC;IACF,GAAG;QAACP;QAAUD;QAAOE;KAAI;IAEzB,OAAOC;AACT"}
+{"version":3,"sources":["../../src/media-queries/useMediaQuery.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useMediaQuery } from \"@react-md/core/media-queries/useMediaQuery\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const matches = useMediaQuery(\"screen and (min-width: 768px)\");\n *\n *   return <>{matches ? \"Matches\" : \"Doesn't\"}</>;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-media-query | useMediaQuery Demos}\n * @see {@link https://react-md.dev/components/app-size-provider | AppSizeProvider Demos}\n * @param query - The media query to use\n * @param disabled - When `true`, the `window.matchMedia` API will not be\n * activated and the hook will return the last cached value.\n * @returns `true` if the media query matches\n * @since 6.0.0 Removed the `defaultValue` and `checkImmediately` options.\n */\nexport function useMediaQuery(query: string, disabled = false): boolean {\n  const ssr = useSsr();\n  const [matches, setMatches] = useState(() => {\n    if (globalThis.window === undefined || disabled || ssr) {\n      return false;\n    }\n\n    return globalThis.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (disabled || ssr) {\n      return;\n    }\n\n    const result = globalThis.matchMedia(query);\n    setMatches(result.matches);\n\n    const updater = ({ matches }: MediaQueryListEvent): void => {\n      setMatches(matches);\n    };\n\n    result.addEventListener(\"change\", updater);\n    return () => {\n      result.removeEventListener(\"change\", updater);\n    };\n  }, [disabled, query, ssr]);\n\n  return matches;\n}\n"],"names":["useEffect","useState","useSsr","useMediaQuery","query","disabled","ssr","matches","setMatches","globalThis","window","undefined","matchMedia","result","updater","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C,SAASC,MAAM,QAAQ,oBAAoB;AAE3C;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,cAAcC,KAAa,EAAEC,WAAW,KAAK;IAC3D,MAAMC,MAAMJ;IACZ,MAAM,CAACK,SAASC,WAAW,GAAGP,SAAS;QACrC,IAAIQ,WAAWC,MAAM,KAAKC,aAAaN,YAAYC,KAAK;YACtD,OAAO;QACT;QAEA,OAAOG,WAAWG,UAAU,CAACR,OAAOG,OAAO;IAC7C;IAEAP,UAAU;QACR,IAAIK,YAAYC,KAAK;YACnB;QACF;QAEA,MAAMO,SAASJ,WAAWG,UAAU,CAACR;QACrCI,WAAWK,OAAON,OAAO;QAEzB,MAAMO,UAAU,CAAC,EAAEP,OAAO,EAAuB;YAC/CC,WAAWD;QACb;QAEAM,OAAOE,gBAAgB,CAAC,UAAUD;QAClC,OAAO;YACLD,OAAOG,mBAAmB,CAAC,UAAUF;QACvC;IACF,GAAG;QAACT;QAAUD;QAAOE;KAAI;IAEzB,OAAOC;AACT"}