@react-md/core 6.2.1 → 6.3.1

package/dist/_base.scss

@@ -88,9 +88,9 @@ $_layer-order: (
   form-message,
   fieldset,
   label,
-  select,
   text-field,
   text-area,
+  select,
   password,
   slider,
   input-toggle,

package/dist/app-bar/styles.d.ts

@@ -4,8 +4,6 @@ import { type CssPosition } from "../types.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-app-bar-height"?: string | number;
-        "--rmd-app-bar-background-color"?: string;
-        "--rmd-app-bar-color"?: string;
         "--rmd-app-bar-surface-background-color"?: string;
         "--rmd-app-bar-surface-color"?: string;
     }

package/dist/app-bar/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/app-bar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BoxOptions, box } from \"../box/styles.js\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-background-color\"?: string;\n    \"--rmd-app-bar-color\"?: string;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\nconst titleStyles = bem(\"rmd-app-bar-title\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    titleStyles({\n      keyline: keyline === \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","box","cssUtils","bem","styles","titleStyles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","appBarTitle","keyline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,GAAG,QAAQ,mBAAmB;AACxD,SAA+BC,QAAQ,QAAQ,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AACnB,MAAME,cAAcF,IAAI;AAyFxB;;;;;CAKC,GACD,OAAO,SAASG,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLqB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAb,IAAI;QACFc;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACArB,SAAS;QACP6B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AAyBA;;;;;CAKC,GACD,OAAO,SAASyB,YAAY1B,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE0B,UAAU,OAAO,EAAE,GAAG3B;IACzC,OAAOP,IACLK,YAAY;QACV6B,SAASA,YAAY;QACrB,eAAeA,YAAY;IAC7B,IACA1B;AAEJ"}
+{"version":3,"sources":["../../src/app-bar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BoxOptions, box } from \"../box/styles.js\";\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-app-bar-height\"?: string | number;\n    \"--rmd-app-bar-surface-background-color\"?: string;\n    \"--rmd-app-bar-surface-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-app-bar\");\nconst titleStyles = bem(\"rmd-app-bar-title\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n *   defaults to `#fff` for light themes, `#242424` for dark themes, and\n *   `#424242` for dark themes when the `$disable-dark-elevation` is set to\n *   `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n  | \"auto\"\n  | \"normal\"\n  | \"prominent\"\n  | \"dense\"\n  | \"prominent-dense\";\n\n/** @since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n  className?: string;\n\n  /**\n   * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n   * `position: sticky;` to the app bar. The default position will be static and\n   * inline with other content.\n   *\n   * @defaultValue `'static'`\n   */\n  position?: CssPosition;\n\n  /**\n   * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n   * enabled.\n   *\n   * @defaultValue `\"top\"`\n   */\n  pagePosition?: AppBarPosition;\n\n  /**\n   * Set this to `true` to remove the box-shadow.\n   *\n   * @defaultValue `false`\n   */\n  disableElevation?: boolean;\n\n  /**\n   * The theme to apply to the `AppBar`.\n   *\n   * @defaultValue `\"primary\"`\n   * @see {@link AppBarTheme}\n   */\n  theme?: AppBarTheme;\n\n  /**\n   * @defaultValue `stacked ? \"auto\" : \"normal\"`\n   * @see {@link AppBarHeight}\n   */\n  height?: AppBarHeight;\n\n  /** @see {@link CssUtilsOptions.surfaceColor} */\n  surfaceColor?: \"light\" | \"dark\";\n\n  /**\n   * Set this to `true` if the app bar's positioning and width should be\n   * changed whenever the scrollbar is visible on the page. This defaults to\n   * `true` when the {@link position} prop is `true` so that once dialogs and menus\n   * become visible the contents in the app bar do not need to be repainted.\n   *\n   * @since 6.0.0\n   * @defaultValue `position === \"fixed\"`\n   */\n  scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n  const {\n    className,\n    theme = \"primary\",\n    stacked,\n    height = stacked ? \"auto\" : \"normal\",\n    position = \"static\",\n    pagePosition = \"top\",\n    scrollbarOffset = position === \"fixed\",\n    align,\n    grid,\n    gridColumns,\n    gridName,\n    justify,\n    reversed,\n    surfaceColor,\n    disableWrap = true,\n    disablePadding,\n    disableElevation,\n  } = options;\n  const surface = theme === \"surface\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({\n      surface,\n      [height]: height !== \"normal\",\n      fixed: position !== \"static\",\n      stacked,\n      sticky: position === \"sticky\",\n      [pagePosition]: position !== \"static\",\n      elevated: position !== \"static\" && !disableElevation,\n      \"scrollbar-offset\": scrollbarOffset,\n      \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n    }),\n    box({\n      align,\n      stacked,\n      fullWidth: true,\n      grid,\n      gridColumns,\n      gridName,\n      justify,\n      reversed,\n      disableWrap,\n      disablePadding,\n    }),\n    cssUtils({\n      backgroundColor: !surface && !clear ? theme : undefined,\n      surfaceColor,\n    }),\n    className\n  );\n}\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n *   from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n *   that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n *   item keyline and there is no nav icon before.\n *\n * @since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"small\"`\n   * @see {@link AppBarTitleKeyline}\n   */\n  keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n  const { className, keyline = \"small\" } = options;\n  return cnb(\n    titleStyles({\n      keyline: keyline === \"list\",\n      \"nav-keyline\": keyline === \"nav\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","box","cssUtils","bem","styles","titleStyles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","appBarTitle","keyline"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,GAAG,QAAQ,mBAAmB;AACxD,SAA+BC,QAAQ,QAAQ,iBAAiB;AAEhE,SAASC,GAAG,QAAQ,kBAAkB;AAUtC,MAAMC,SAASD,IAAI;AACnB,MAAME,cAAcF,IAAI;AAyFxB;;;;;CAKC,GACD,OAAO,SAASG,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLI,OAAO;QACLqB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAb,IAAI;QACFc;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACArB,SAAS;QACP6B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AAyBA;;;;;CAKC,GACD,OAAO,SAASyB,YAAY1B,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE0B,UAAU,OAAO,EAAE,GAAG3B;IACzC,OAAOP,IACLK,YAAY;QACV6B,SAASA,YAAY;QACrB,eAAeA,YAAY;IAC7B,IACA1B;AAEJ"}

package/dist/autocomplete/types.d.ts

@@ -11,6 +11,18 @@ import { type CircularProgressProps } from "../progress/CircularProgress.js";
 import { type ProgressTheme } from "../progress/types.js";
 import { type BaseSearchOptions } from "../searching/types.js";
 import { type AutomaticTextExtraction, type PropsWithRef, type TextExtractor, type UseStateInitializer } from "../types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-autocomplete-clear-button-size"?: string;
+        "--rmd-autocomplete-dropdown-button-size"?: string;
+        "--rmd-autocomplete-circular-progress-size"?: string;
+        "--rmd-autocomplete-inline-gap"?: string;
+        "--rmd-autocomplete-inline-min-width"?: string;
+        "--rmd-autocomplete-addon-gap"?: string;
+        "--rmd-autocomplete-gap-count"?: string;
+        "--rmd-autocomplete-addon-spacing"?: string;
+    }
+}
 /**
  * If a autocomplete value is one of these types, no additional code is required
  * to display a label in the input/chip for the autocomplete once the value has

package/dist/autocomplete/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ChangeEventHandler,\n  type Dispatch,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n  type OptionProps,\n  type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n  type ComboboxMenuProps,\n  type ComboboxVisibilityOptions,\n  type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n  type EditableComboboxImplementation,\n  type EditableComboboxOptions,\n  type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n  type AutomaticTextExtraction,\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateInitializer,\n} from \"../types.js\";\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.\n */\nexport type AutocompleteLabeledOption = AutomaticTextExtraction;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteOption = AutomaticTextExtraction | object;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n  Required<BaseSearchOptions<Option>>,\n  \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n  options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n  Option extends AutocompleteOption,\n> {\n  index: number;\n  query: string;\n  option: Option;\n  selected: boolean;\n  extractor: TextExtractor<Option>;\n}\n\n/**\n * @see {@link AutocompleteGetOptionProps.getOptionProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionPropsCallback<\n  Option extends AutocompleteOption,\n> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {\n  /**\n   * This can be used to add additional props to each option.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getOptionProps={({ option }) => {\n   *   return {\n   *     disabled: option === \"\",\n   *     className: cnb(option === \"a\" && styles.blue),\n   *     leftAddon: option === value && <CheckIcon />,\n   *   };\n   * }}\n   * ```\n   *\n   * @see {@link AutocompleteGetOptionPropsOptions}\n   * @see {@link AutocompleteGetOptionPropsCallback}\n   * @since 6.0.0\n   */\n  getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;\n}\n\n/**\n * @see {@link AutocompleteBaseProps.getChipProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n  options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * @see {@link AutocompleteGetOptionLabel}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabelCallback<\n  Option extends AutocompleteOption,\n> = (option: Option) => string;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {\n  /**\n   * If the list of options contain an object that doesn't have a\n   * `label: string`, this prop must be provided to extract a string to display\n   * in the text field once selected.\n   *\n   * @example No Getter Required\n   * ```tsx\n   * const options1 = ['a', 'b', 'c', 'd'];\n   * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n   *\n   * <Autocomplete options={options1} />\n   * <Autocomplete options={options2} />\n   * ```\n   *\n   * @example Getter Required\n   * ```tsx\n   * const options = [\n   *   {\n   *     name: \"Alaska\",\n   *     abbr: \"AK\",\n   *   },\n   *   {\n   *     name: \"Arizona\",\n   *     abbr: \"AZ\",\n   *   }\n   * ];\n   *\n   * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteExtractor`\n   * @since 6.0.0\n   */\n  getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n  Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n  value: T;\n  setValue: Dispatch<T>;\n  defaultValue?: never;\n  onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n  value?: never;\n  setValue?: never;\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * This prop should be used when some action should occur whenever the value\n   * changes, but is not required to be stored in state. For all other cases, it\n   * is recommended to control the `value` instead of using this prop.\n   *\n   * @defaultValue `() => {}`\n   */\n  onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n  | AutocompleteControlledValue<T>\n  | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n  query: string;\n  setQuery: Dispatch<string>;\n  defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n  query?: never;\n  setQuery?: never;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n  | AutocompleteControlledQuery\n  | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"selected\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n  Option extends AutocompleteOption,\n> {\n  query?: string;\n  setQuery?: Dispatch<string>;\n  defaultQuery?: UseStateInitializer<string>;\n  value?: Option | null | readonly Option[];\n  setValue?: Dispatch<Option | null | readonly Option[]>;\n  defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n  onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutomaticTextExtraction}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n  Option extends AutocompleteOption,\n> = Option extends AutomaticTextExtraction\n  ? AutocompleteGetOptionLabel<Option>\n  : Required<AutocompleteGetOptionLabel<Option>>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<Option extends AutocompleteOption>\n  extends AutocompleteGetOptionLabel<Option> {\n  /**\n   * The list of options that can be shown within the autocomplete and filtered\n   * based on the current query.\n   */\n  options: readonly Option[];\n\n  /**\n   * The function that filters the {@link options} based on the current query\n   * and defaults to a case insensitive search that starts with the query.\n   *\n   * @example Case Insensitive Anywhere\n   * ```tsx\n   * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n   *\n   * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n   * ```\n   *\n   * @example Fuzzy Filtering\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete {...props} filter={fuzzySearch} />\n   * ```\n   *\n   * @example Async Searching\n   * ```tsx\n   * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n   * import { useState } from \"react\";\n   *\n   * interface State {\n   *   loading: boolean;\n   *   options: readonly string[];\n   * }\n   *\n   * function Example() {\n   *   const [state, setState] = useState<State>({\n   *     loading: false,\n   *     options: [],\n   *   });\n   *\n   *   const search = useDebouncedFunction(async (query: string) => {\n   *     setState(prev => ({ ...prev, loading: true }));\n   *\n   *     const options = await someAsyncTask(query);\n   *     setState({ loading: false, options })\n   *   });\n   *\n   *   return (\n   *     <Autocomplete\n   *       {...props}\n   *       // Setting `type=\"search\"` automatically updates the `filter` prop to\n   *       // be `noopAutocompleteFilter`\n   *       type=\"search\"\n   *       options={options}\n   *       onChange={(event) => search(event.currentTarget.value)}\n   *     />\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteFilter`\n   */\n  filter?: AutocompleteFilterFunction<Option>;\n\n  /**\n   * Set this to `true` to update the filtering behavior to also remove the\n   * selected value from the available options. This is mostly for the\n   * multiselect behavior.\n   *\n   * @defaultValue `false`\n   */\n  filterSelected?: boolean;\n\n  /**\n   * Set this to `true` to allow any value to be typed into the autocomplete\n   * instead of enforcing an empty string or one of the option labels.\n   *\n   * @defaultValue `filter === noopAutocompleteFilter`\n   */\n  allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n  Option extends AutocompleteOption,\n> extends AutocompleteFilteringOptions<Option>,\n    AutocompleteGetOptionProps<Option>,\n    OptionSelectedIconProps {\n  /**\n   * Set this to `true` when using a multiselect autocomplete to update each\n   * option to use checkboxes to show the selection state.\n   *\n   * @defaultValue `false`\n   */\n  checkboxes?: boolean;\n\n  /**\n   * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n   * @defaultValue `!checkboxes`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @see {@link AutocompleteUpdateQueryOnSelect}\n   * @defaultValue `multiselect ? \"clear\" : \"selected\"`\n   */\n  updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n  /**\n   * Set this to `true` to prevent the listbox from closing when an option is\n   * selected.\n   *\n   * @defaultValue `checkboxes`\n   */\n  disableCloseOnSelect?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxOptions<ComboboxEl, PopupEl>,\n    AutocompleteFilterAndListboxOptions<Option> {\n  onBlur?: FocusEventHandler<ComboboxEl>;\n  onChange?: ChangeEventHandler<ComboboxEl>;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n    AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n  \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n  value: string;\n  onBlur: FocusEventHandler<ComboboxEl>;\n  onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n  T extends AutocompleteOption = AutocompleteOption,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n    OptionSelectedIconProps {\n  value: T | null | readonly T[];\n  setValue: Dispatch<T>;\n  onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n  extends ConfigurableComboboxMenuProps,\n    OptionSelectedIconProps {\n  id?: string;\n}\n\n/**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n *   - the user moves focus within the autocomplete\n *   - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n *   - the input has a value and:\n *     - the user moves focus within the autocomplete\n *     - the user hovers the autocomplete\n *\n * @since 6.0.0\n */\nexport type ClearButtonVisibility = \"query\" | \"active\" | \"always\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n  /** @defaultValue `\"Clear\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n  id?: string;\n\n  /** {@inheritDoc ClearButtonVisibility} */\n  visibility?: ClearButtonVisibility;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps\n  extends ConfigurableAutocompleteClearButtonProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.listboxLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n  \"aria-labelledby\"?: string;\n\n  /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n  id?: string;\n\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps\n  extends ConfigurableAutocompleteDropdownButtonProps {\n  \"aria-controls\": string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps\n  extends CircularProgressProps {\n  /** @defaultValue `\"Loading\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"current-color\"` */\n  theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n  /**\n   * @defaultValue `typeof children === \"string\" ? \\`Remove \"${children}\"\\` : undefined`\n   */\n  \"aria-description\"?: string;\n\n  /** @defaultValue `getIcon(\"remove\")` */\n  removeIcon?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxImplementation<ComboboxEl, PopupEl>,\n    Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\n  query: string;\n  setQuery: Dispatch<string>;\n  comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n  /**\n   * This is a convenience prop to determine if the autocomplete supports\n   * multiselect.\n   */\n  multiselect: boolean;\n\n  /**\n   * This is the current list of options that will be filtered based on the\n   * current `query`. This should normally be rendered in the\n   * `AutocompleteListboxChildren` component\n   */\n  availableOptions: readonly Option[];\n\n  /**\n   * Generates the props required for the `Listbox` component and should\n   * normally be provided any menu props that might override the default display\n   * settings.\n   */\n  getListboxProps: (\n    overrides?: ConfigurableAutocompleteListboxProps\n  ) => AutocompleteListboxProps<Option, PopupEl>;\n\n  /**\n   * Generates the props required for the `AutocompleteClearButton`.\n   */\n  getClearButtonProps: (\n    overrides?: ConfigurableAutocompleteClearButtonProps\n  ) => AutocompleteClearButtonProps;\n\n  /**\n   * Generates the props required for the `AutocompleteDropdownButton`.\n   */\n  getDropdownButtonProps: (\n    overrides?: ConfigurableAutocompleteDropdownButtonProps\n  ) => AutocompleteDropdownButtonProps;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null;\n  setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: readonly Option[];\n  setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null | readonly Option[];\n  setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n  extends Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteFilterAndListboxOptions<Option>,\n    ComboboxVisibilityOptions {\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * An `aria-label` to pass to the `Listbox` component that describes the list\n   * of {@link options}. Either this or the {@link listboxLabelledBy} are\n   * required for accessibility.\n   */\n  listboxLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Listbox` component that describes the\n   * list of {@link options}. Either this or the {@link listboxLabel} are\n   * required for accessibility.\n   */\n  listboxLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Listbox` component.\n   */\n  listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;\n\n  /**\n   * This can be used to add any custom styling, change the icon, change the\n   * label, etc for the dropdown button.\n   *\n   * @example Simple Example\n   * ```tsx\n   * dropdownButtonProps={{\n   *   \"aria-label\": \"Open\",\n   *   className: styles.dropdownButton,\n   *   icon: <MyCustomDropdownIcon />,\n   * }}\n   * ```\n   */\n  dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n  /**\n   * Set this to `true` to remove the {@link DropdownButton} from being rendered\n   * after the input element.\n   *\n   * @defaultValue `false`\n   */\n  disableDropdownButton?: boolean;\n\n  /**\n   * Set this to `true` to disable a `<CircularProgress />` after the input and\n   * before the `<DropdownButton />`.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n   */\n  loadingProps?: AutocompleteCircularProgressProps;\n\n  /**\n   * This will do nothing if {@link disableClearButton} is `true`.\n   */\n  clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;\n\n  /**\n   * Set to `true` to hide the clear button that appears when hovering an\n   * `Autocomplete` that has a value. The user will still be able to clear the\n   * value quickly using the `Escape` key.\n   *\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * - `\"always\"` - the clear button is always visible\n   * - `\"active\"` - the clear button will be visible when:\n   *   - the user moves focus within the autocomplete\n   *   - the user hovers the autocomplete\n   * - `\"query\"` - the clear button will be visible when:\n   *   - the input has a value and:\n   *     - the user moves focus within the autocomplete\n   *     - the user hovers the autocomplete\n   *\n   * @defaultValue `\"query\"`\n   */\n  clearButtonVisibility?: ClearButtonVisibility;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * Set this to `true` when using a multiselect autocomplete to prevent the\n   * selected values from being rendered inline with the input. This is useful\n   * when the selected values should be shown in a different part of the UI\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  disableInlineChips?: boolean;\n\n  /**\n   * This can be used to add additional props to each inline chip for multiselect\n   * autocompletes.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getChipProps={({ option, index }) => {\n   *   return {\n   *     disabled: index < 3,\n   *     className: cnb(option === \"a\" && styles.blue)<\n   *   };\n   * }}\n   * ```\n   */\n  getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n  | { listboxLabel: string }\n  | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n  Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery &\n  AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<Option | null> & {\n      checkboxes?: never;\n      getChipProps?: never;\n      disableInlineChips?: never;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n  AutocompleteBaseProps<Option> &\n    AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AAm1BA;;CAEC,GACD,WAEoD"}
+{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ChangeEventHandler,\n  type Dispatch,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n  type OptionProps,\n  type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n  type ComboboxMenuProps,\n  type ComboboxVisibilityOptions,\n  type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n  type EditableComboboxImplementation,\n  type EditableComboboxOptions,\n  type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n  type AutomaticTextExtraction,\n  type PropsWithRef,\n  type TextExtractor,\n  type UseStateInitializer,\n} from \"../types.js\";\n\n// NOTE: The augmentation appears in this file since both\n// the `Autocomplete` and `autocompleteStyles` import this\n// file. The augmentation only works if a type definition\n// exists in the compiled `*.d.ts`\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-autocomplete-clear-button-size\"?: string;\n    \"--rmd-autocomplete-dropdown-button-size\"?: string;\n    \"--rmd-autocomplete-circular-progress-size\"?: string;\n    \"--rmd-autocomplete-inline-gap\"?: string;\n    \"--rmd-autocomplete-inline-min-width\"?: string;\n    \"--rmd-autocomplete-addon-gap\"?: string;\n    \"--rmd-autocomplete-gap-count\"?: string;\n    \"--rmd-autocomplete-addon-spacing\"?: string;\n  }\n}\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.\n */\nexport type AutocompleteLabeledOption = AutomaticTextExtraction;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteOption = AutomaticTextExtraction | object;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n  Required<BaseSearchOptions<Option>>,\n  \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n  options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n  Option extends AutocompleteOption,\n> {\n  index: number;\n  query: string;\n  option: Option;\n  selected: boolean;\n  extractor: TextExtractor<Option>;\n}\n\n/**\n * @see {@link AutocompleteGetOptionProps.getOptionProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionPropsCallback<\n  Option extends AutocompleteOption,\n> = (\n  options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {\n  /**\n   * This can be used to add additional props to each option.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getOptionProps={({ option }) => {\n   *   return {\n   *     disabled: option === \"\",\n   *     className: cnb(option === \"a\" && styles.blue),\n   *     leftAddon: option === value && <CheckIcon />,\n   *   };\n   * }}\n   * ```\n   *\n   * @see {@link AutocompleteGetOptionPropsOptions}\n   * @see {@link AutocompleteGetOptionPropsCallback}\n   * @since 6.0.0\n   */\n  getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;\n}\n\n/**\n * @see {@link AutocompleteBaseProps.getChipProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n  options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * @see {@link AutocompleteGetOptionLabel}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabelCallback<\n  Option extends AutocompleteOption,\n> = (option: Option) => string;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {\n  /**\n   * If the list of options contain an object that doesn't have a\n   * `label: string`, this prop must be provided to extract a string to display\n   * in the text field once selected.\n   *\n   * @example No Getter Required\n   * ```tsx\n   * const options1 = ['a', 'b', 'c', 'd'];\n   * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n   *\n   * <Autocomplete options={options1} />\n   * <Autocomplete options={options2} />\n   * ```\n   *\n   * @example Getter Required\n   * ```tsx\n   * const options = [\n   *   {\n   *     name: \"Alaska\",\n   *     abbr: \"AK\",\n   *   },\n   *   {\n   *     name: \"Arizona\",\n   *     abbr: \"AZ\",\n   *   }\n   * ];\n   *\n   * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteExtractor`\n   * @since 6.0.0\n   */\n  getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n  Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n  value: T;\n  setValue: Dispatch<T>;\n  defaultValue?: never;\n  onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n  value?: never;\n  setValue?: never;\n  defaultValue?: UseStateInitializer<T>;\n\n  /**\n   * This prop should be used when some action should occur whenever the value\n   * changes, but is not required to be stored in state. For all other cases, it\n   * is recommended to control the `value` instead of using this prop.\n   *\n   * @defaultValue `() => {}`\n   */\n  onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n  | AutocompleteControlledValue<T>\n  | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n  query: string;\n  setQuery: Dispatch<string>;\n  defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n  query?: never;\n  setQuery?: never;\n  defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n  | AutocompleteControlledQuery\n  | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"selected\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n  Option extends AutocompleteOption,\n> {\n  query?: string;\n  setQuery?: Dispatch<string>;\n  defaultQuery?: UseStateInitializer<string>;\n  value?: Option | null | readonly Option[];\n  setValue?: Dispatch<Option | null | readonly Option[]>;\n  defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n  onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutomaticTextExtraction}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n  Option extends AutocompleteOption,\n> = Option extends AutomaticTextExtraction\n  ? AutocompleteGetOptionLabel<Option>\n  : Required<AutocompleteGetOptionLabel<Option>>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<Option extends AutocompleteOption>\n  extends AutocompleteGetOptionLabel<Option> {\n  /**\n   * The list of options that can be shown within the autocomplete and filtered\n   * based on the current query.\n   */\n  options: readonly Option[];\n\n  /**\n   * The function that filters the {@link options} based on the current query\n   * and defaults to a case insensitive search that starts with the query.\n   *\n   * @example Case Insensitive Anywhere\n   * ```tsx\n   * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n   *\n   * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n   * ```\n   *\n   * @example Fuzzy Filtering\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete {...props} filter={fuzzySearch} />\n   * ```\n   *\n   * @example Async Searching\n   * ```tsx\n   * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n   * import { useState } from \"react\";\n   *\n   * interface State {\n   *   loading: boolean;\n   *   options: readonly string[];\n   * }\n   *\n   * function Example() {\n   *   const [state, setState] = useState<State>({\n   *     loading: false,\n   *     options: [],\n   *   });\n   *\n   *   const search = useDebouncedFunction(async (query: string) => {\n   *     setState(prev => ({ ...prev, loading: true }));\n   *\n   *     const options = await someAsyncTask(query);\n   *     setState({ loading: false, options })\n   *   });\n   *\n   *   return (\n   *     <Autocomplete\n   *       {...props}\n   *       // Setting `type=\"search\"` automatically updates the `filter` prop to\n   *       // be `noopAutocompleteFilter`\n   *       type=\"search\"\n   *       options={options}\n   *       onChange={(event) => search(event.currentTarget.value)}\n   *     />\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `defaultAutocompleteFilter`\n   */\n  filter?: AutocompleteFilterFunction<Option>;\n\n  /**\n   * Set this to `true` to update the filtering behavior to also remove the\n   * selected value from the available options. This is mostly for the\n   * multiselect behavior.\n   *\n   * @defaultValue `false`\n   */\n  filterSelected?: boolean;\n\n  /**\n   * Set this to `true` to allow any value to be typed into the autocomplete\n   * instead of enforcing an empty string or one of the option labels.\n   *\n   * @defaultValue `filter === noopAutocompleteFilter`\n   */\n  allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n  Option extends AutocompleteOption,\n> extends AutocompleteFilteringOptions<Option>,\n    AutocompleteGetOptionProps<Option>,\n    OptionSelectedIconProps {\n  /**\n   * Set this to `true` when using a multiselect autocomplete to update each\n   * option to use checkboxes to show the selection state.\n   *\n   * @defaultValue `false`\n   */\n  checkboxes?: boolean;\n\n  /**\n   * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n   * @defaultValue `!checkboxes`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @see {@link AutocompleteUpdateQueryOnSelect}\n   * @defaultValue `multiselect ? \"clear\" : \"selected\"`\n   */\n  updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n  /**\n   * Set this to `true` to prevent the listbox from closing when an option is\n   * selected.\n   *\n   * @defaultValue `checkboxes`\n   */\n  disableCloseOnSelect?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxOptions<ComboboxEl, PopupEl>,\n    AutocompleteFilterAndListboxOptions<Option> {\n  onBlur?: FocusEventHandler<ComboboxEl>;\n  onChange?: ChangeEventHandler<ComboboxEl>;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n  AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n    AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n  \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n  value: string;\n  onBlur: FocusEventHandler<ComboboxEl>;\n  onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n  T extends AutocompleteOption = AutocompleteOption,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n    OptionSelectedIconProps {\n  value: T | null | readonly T[];\n  setValue: Dispatch<T>;\n  onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n  extends ConfigurableComboboxMenuProps,\n    OptionSelectedIconProps {\n  id?: string;\n}\n\n/**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n *   - the user moves focus within the autocomplete\n *   - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n *   - the input has a value and:\n *     - the user moves focus within the autocomplete\n *     - the user hovers the autocomplete\n *\n * @since 6.0.0\n */\nexport type ClearButtonVisibility = \"query\" | \"active\" | \"always\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n  /** @defaultValue `\"Clear\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n  id?: string;\n\n  /** {@inheritDoc ClearButtonVisibility} */\n  visibility?: ClearButtonVisibility;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps\n  extends ConfigurableAutocompleteClearButtonProps {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.listboxLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n  \"aria-labelledby\"?: string;\n\n  /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n  id?: string;\n\n  /** @defaultValue `getIcon(\"dropdown\")` */\n  icon?: ReactNode;\n  iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps\n  extends ConfigurableAutocompleteDropdownButtonProps {\n  \"aria-controls\": string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps\n  extends CircularProgressProps {\n  /** @defaultValue `\"Loading\"` */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `\"current-color\"` */\n  theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n  /**\n   * @defaultValue `typeof children === \"string\" ? \\`Remove \"${children}\"\\` : undefined`\n   */\n  \"aria-description\"?: string;\n\n  /** @defaultValue `getIcon(\"remove\")` */\n  removeIcon?: ReactNode;\n  children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxImplementation<ComboboxEl, PopupEl>,\n    Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\n  query: string;\n  setQuery: Dispatch<string>;\n  comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n  /**\n   * This is a convenience prop to determine if the autocomplete supports\n   * multiselect.\n   */\n  multiselect: boolean;\n\n  /**\n   * This is the current list of options that will be filtered based on the\n   * current `query`. This should normally be rendered in the\n   * `AutocompleteListboxChildren` component\n   */\n  availableOptions: readonly Option[];\n\n  /**\n   * Generates the props required for the `Listbox` component and should\n   * normally be provided any menu props that might override the default display\n   * settings.\n   */\n  getListboxProps: (\n    overrides?: ConfigurableAutocompleteListboxProps\n  ) => AutocompleteListboxProps<Option, PopupEl>;\n\n  /**\n   * Generates the props required for the `AutocompleteClearButton`.\n   */\n  getClearButtonProps: (\n    overrides?: ConfigurableAutocompleteClearButtonProps\n  ) => AutocompleteClearButtonProps;\n\n  /**\n   * Generates the props required for the `AutocompleteDropdownButton`.\n   */\n  getDropdownButtonProps: (\n    overrides?: ConfigurableAutocompleteDropdownButtonProps\n  ) => AutocompleteDropdownButtonProps;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null;\n  setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: readonly Option[];\n  setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n  value: Option | null | readonly Option[];\n  setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n  extends Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n    AutocompleteFilterAndListboxOptions<Option>,\n    ComboboxVisibilityOptions {\n  inputRef?: Ref<HTMLInputElement>;\n\n  /**\n   * An `aria-label` to pass to the `Listbox` component that describes the list\n   * of {@link options}. Either this or the {@link listboxLabelledBy} are\n   * required for accessibility.\n   */\n  listboxLabel?: string;\n\n  /**\n   * An `aria-labelledby` to pass to the `Listbox` component that describes the\n   * list of {@link options}. Either this or the {@link listboxLabel} are\n   * required for accessibility.\n   */\n  listboxLabelledBy?: string;\n\n  /**\n   * Any additional props that should be passed to the `Listbox` component.\n   */\n  listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;\n\n  /**\n   * This can be used to add any custom styling, change the icon, change the\n   * label, etc for the dropdown button.\n   *\n   * @example Simple Example\n   * ```tsx\n   * dropdownButtonProps={{\n   *   \"aria-label\": \"Open\",\n   *   className: styles.dropdownButton,\n   *   icon: <MyCustomDropdownIcon />,\n   * }}\n   * ```\n   */\n  dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n  /**\n   * Set this to `true` to remove the {@link DropdownButton} from being rendered\n   * after the input element.\n   *\n   * @defaultValue `false`\n   */\n  disableDropdownButton?: boolean;\n\n  /**\n   * Set this to `true` to disable a `<CircularProgress />` after the input and\n   * before the `<DropdownButton />`.\n   *\n   * @defaultValue `false`\n   */\n  loading?: boolean;\n\n  /**\n   * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n   */\n  loadingProps?: AutocompleteCircularProgressProps;\n\n  /**\n   * This will do nothing if {@link disableClearButton} is `true`.\n   */\n  clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;\n\n  /**\n   * Set to `true` to hide the clear button that appears when hovering an\n   * `Autocomplete` that has a value. The user will still be able to clear the\n   * value quickly using the `Escape` key.\n   *\n   * @defaultValue `false`\n   */\n  disableClearButton?: boolean;\n\n  /**\n   * - `\"always\"` - the clear button is always visible\n   * - `\"active\"` - the clear button will be visible when:\n   *   - the user moves focus within the autocomplete\n   *   - the user hovers the autocomplete\n   * - `\"query\"` - the clear button will be visible when:\n   *   - the input has a value and:\n   *     - the user moves focus within the autocomplete\n   *     - the user hovers the autocomplete\n   *\n   * @defaultValue `\"query\"`\n   */\n  clearButtonVisibility?: ClearButtonVisibility;\n\n  /**\n   * This is a convenience prop for the `onEntering`/`onEntered` transition\n   * callbacks that will ensure it is only called once even if the transitions\n   * are disabled. A great use-case for this function is to fetch data once the\n   * menu is opened.\n   */\n  onOpen?: () => void;\n\n  /**\n   * The children to display when there are no {@link options} due to the\n   * current text box value.\n   *\n   * @defaultValue `<ListSubheader>No options</ListSubheader`\n   */\n  noOptionsChildren?: ReactNode;\n\n  /**\n   * Set this to `true` when using a multiselect autocomplete to prevent the\n   * selected values from being rendered inline with the input. This is useful\n   * when the selected values should be shown in a different part of the UI\n   * instead.\n   *\n   * @defaultValue `false`\n   */\n  disableInlineChips?: boolean;\n\n  /**\n   * This can be used to add additional props to each inline chip for multiselect\n   * autocompletes.\n   *\n   * @example Simple Example\n   * ```tsx\n   * getChipProps={({ option, index }) => {\n   *   return {\n   *     disabled: index < 3,\n   *     className: cnb(option === \"a\" && styles.blue)<\n   *   };\n   * }}\n   * ```\n   */\n  getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n  | { listboxLabel: string }\n  | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n  Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n  AutocompleteOptionLabelExtractor<Option> &\n  AutocompleteQuery &\n  AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<Option | null> & {\n      checkboxes?: never;\n      getChipProps?: never;\n      disableInlineChips?: never;\n    };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n  AutocompleteQueryAndExtractorProps<Option> &\n    AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n  AutocompleteBaseProps<Option> &\n    AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AAo2BA;;CAEC,GACD,WAEoD"}

package/dist/avatar/Avatar.d.ts

@@ -1,16 +1,6 @@
 import { type HTMLAttributes, type ImgHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { type AvatarClassNameOptions } from "./styles.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-avatar-background-color"?: string;
-        "--rmd-avatar-color"?: string;
-        "--rmd-avatar-border-color"?: string;
-        "--rmd-avatar-border-radius"?: string | number;
-        "--rmd-avatar-size"?: string | number;
-        "--rmd-avatar-font-size"?: string | number;
-    }
-}
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 /**
  * @since 6.0.0 `aria-hidden` is set to `true` by default and removed

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { type AvatarClassNameOptions, avatar, avatarImage } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/avatar | Avatar Demos}\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color,\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAAsCC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { type AvatarClassNameOptions, avatar, avatarImage } from \"./styles.js\";\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n    AvatarClassNameOptions {\n  /**\n   * Since avatars are normally presentational data, they are hidden from screen\n   * readers by default.\n   *\n   * @defaultValue `true`\n   */\n  \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/avatar | Avatar Demos}\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      \"aria-hidden\": ariaHidden = true,\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color,\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img: ReactNode;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        aria-hidden={ariaHidden}\n        ref={ref}\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAAsCC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AA+D/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/avatar/styles.d.ts

@@ -1,5 +1,15 @@
 import { type ThemeColor } from "../cssUtils.js";
 import { type OverridableStringUnion } from "../types.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-avatar-background-color"?: string;
+        "--rmd-avatar-color"?: string;
+        "--rmd-avatar-border-color"?: string;
+        "--rmd-avatar-border-radius"?: string | number;
+        "--rmd-avatar-size"?: string | number;
+        "--rmd-avatar-font-size"?: string | number;
+    }
+}
 /**
  * @since 6.2.0
  */

package/dist/avatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { type OverridableStringUnion } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/**\n * @since 6.2.0\n */\nexport interface AvatarColorOverrides {}\n\n/**\n * @since 6.2.0\n */\nexport type DefaultAvatarColors =\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"deep-purple\"\n  | \"indigo\"\n  | \"blue\"\n  | \"light-blue\"\n  | \"cyan\"\n  | \"teal\"\n  | \"green\"\n  | \"light-green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"amber\"\n  | \"orange\"\n  | \"deep-orange\"\n  | \"brown\"\n  | \"grey\"\n  | \"blue-grey\";\n\n/**\n * The avatar available colors can be configured using module augmentation:\n *\n * ```ts\n * declare module \"@react-md/core/avatar/styles\" {\n *   interface AvatarColorOverrides {\n *     \"light-blue\": false;\n *     brandColor: true;\n *   }\n * }\n * ```\n *\n * This would remove the support for the `light-blue` color and enable\n * `brandColor`.\n *\n * @since 6.2.0\n */\nexport type AvatarColor = OverridableStringUnion<\n  DefaultAvatarColors,\n  AvatarColorOverrides\n>;\n\n/** @since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @see {@link theme}\n   * @defaultValue `\"\"`\n   */\n  color?: AvatarColor;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n\n  /**\n   * This can be used instead of {@link color} to set the background color to one of\n   * the theme colors. This will also set the text color to either be `#000` or\n   * `#fff` automatically to enforce the correct aspect ratio.\n   */\n  theme?: ThemeColor;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size, theme } = options;\n\n  return cnb(\n    styles({ [color]: color, icon: size === \"icon\" }),\n    cssUtils({ backgroundColor: theme }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,QAAQ,QAAQ,iBAAiB;AAE3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkFnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}
+{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type ThemeColor, cssUtils } from \"../cssUtils.js\";\nimport { type OverridableStringUnion } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-avatar\");\n\n/**\n * @since 6.2.0\n */\nexport interface AvatarColorOverrides {}\n\n/**\n * @since 6.2.0\n */\nexport type DefaultAvatarColors =\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"deep-purple\"\n  | \"indigo\"\n  | \"blue\"\n  | \"light-blue\"\n  | \"cyan\"\n  | \"teal\"\n  | \"green\"\n  | \"light-green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"amber\"\n  | \"orange\"\n  | \"deep-orange\"\n  | \"brown\"\n  | \"grey\"\n  | \"blue-grey\";\n\n/**\n * The avatar available colors can be configured using module augmentation:\n *\n * ```ts\n * declare module \"@react-md/core/avatar/styles\" {\n *   interface AvatarColorOverrides {\n *     \"light-blue\": false;\n *     brandColor: true;\n *   }\n * }\n * ```\n *\n * This would remove the support for the `light-blue` color and enable\n * `brandColor`.\n *\n * @since 6.2.0\n */\nexport type AvatarColor = OverridableStringUnion<\n  DefaultAvatarColors,\n  AvatarColorOverrides\n>;\n\n/** @since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @see {@link theme}\n   * @defaultValue `\"\"`\n   */\n  color?: AvatarColor;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n\n  /**\n   * This can be used instead of {@link color} to set the background color to one of\n   * the theme colors. This will also set the text color to either be `#000` or\n   * `#fff` automatically to enforce the correct aspect ratio.\n   */\n  theme?: ThemeColor;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size, theme } = options;\n\n  return cnb(\n    styles({ [color]: color, icon: size === \"icon\" }),\n    cssUtils({ backgroundColor: theme }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA0BC,QAAQ,QAAQ,iBAAiB;AAE3D,SAASC,GAAG,QAAQ,kBAAkB;AAatC,MAAMC,SAASD,IAAI;AAkFnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}

package/dist/badge/Badge.d.ts

@@ -1,5 +1,16 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import { type BadgeTheme } from "./styles.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-badge-border-radius"?: string | number;
+        "--rmd-badge-greyscale-background-color"?: string;
+        "--rmd-badge-greyscale-color"?: string;
+        "--rmd-badge-size"?: string | number;
+        "--rmd-badge-offset"?: string | number;
+        "--rmd-badge-offset-top"?: string | number;
+        "--rmd-badge-offset-right"?: string | number;
+    }
+}
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** @defaultValue `"greyscale"` */
     theme?: BadgeTheme;

package/dist/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type BadgeTheme, badge } from \"./styles.js\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/badge | Badge Demos}\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAA0BC,KAAK,QAAQ,cAAc;AASrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACrD,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP,GACA"}
+{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type BadgeTheme, badge } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-border-radius\"?: string | number;\n    \"--rmd-badge-greyscale-background-color\"?: string;\n    \"--rmd-badge-greyscale-color\"?: string;\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"greyscale\"` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <>\n *       <Badge>3</Badge>\n *       <Badge theme=\"primary\">100</Badge>\n *       <Badge theme=\"secondary\">23</Badge>\n *       <Badge theme=\"greyscale\">18</Badge>\n *       <Badge theme=\"clear\">1</Badge>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Within Buttons Example\n * ```tsx\n * import { Badge } from \"@react-md/core/badge/Badge\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { MaterialSymbol } from \"@react-md/core/icon/MaterialSymbol\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <Button aria-label=\"Notifications\" buttonType=\"icon\">\n *       <Badge>88</Badge>\n *       <MaterialSymbol name=\"notifications\" />\n *     </Button>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/badge | Badge Demos}\n * @since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(props, ref) {\n    const { children, className, theme, ...remaining } = props;\n    return (\n      <span {...remaining} ref={ref} className={badge({ theme, className })}>\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","badge","Badge","props","ref","children","className","theme","remaining","span"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAA0BC,KAAK,QAAQ,cAAc;AAqBrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,sBAAQF,WACnB,SAASE,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,WAAW,GAAGL;IACrD,qBACE,KAACM;QAAM,GAAGD,SAAS;QAAEJ,KAAKA;QAAKE,WAAWL,MAAM;YAAEM;YAAOD;QAAU;kBAChED;;AAGP,GACA"}

package/dist/badge/styles.d.ts

@@ -1,12 +1,4 @@
 import { type BackgroundColor } from "../cssUtils.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-badge-size"?: string | number;
-        "--rmd-badge-offset"?: string | number;
-        "--rmd-badge-offset-top"?: string | number;
-        "--rmd-badge-offset-right"?: string | number;
-    }
-}
 /**
  * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
  * theme colors.

package/dist/badge/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-badge-size\"?: string | number;\n    \"--rmd-badge-offset\"?: string | number;\n    \"--rmd-badge-offset-top\"?: string | number;\n    \"--rmd-badge-offset-right\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\n/**\n * @since 6.0.0\n */\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOP,IACLG,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ"}
+{"version":3,"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\n/**\n * @since 6.0.0\n */\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport function badge(options: BadgeClassNameOptions = {}): string {\n  const { className, theme = \"greyscale\" } = options;\n  const greyscale = theme === \"greyscale\";\n  const clear = theme === \"clear\";\n\n  return cnb(\n    styles({ greyscale }),\n    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkBnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOP,IACLG,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ"}

package/dist/box/_box.scss

@@ -169,17 +169,17 @@ $variables: (
   row-max-height,
   auto-rows-height,
   phone-columns,
-  tablet-columns,
-  desktop-columns,
-  large-desktop-columns,
-  phone-item-min-height,
-  tablet-item-min-height,
-  desktop-item-min-height,
-  large-desktop-item-min-height,
   phone-item-min-size,
+  phone-item-min-height,
+  tablet-columns,
   tablet-item-min-size,
+  tablet-item-min-height,
+  desktop-columns,
   desktop-item-min-size,
-  large-desktop-item-min-size
+  desktop-item-min-height,
+  large-desktop-columns,
+  large-desktop-item-min-size,
+  large-desktop-item-min-height
 );
 
 /// @param {String} name - The supported variable name

package/dist/box/styles.d.ts

@@ -4,16 +4,25 @@ declare module "react" {
     interface CSSProperties {
         "--rmd-box-gap"?: string | number;
         "--rmd-box-padding"?: string | number;
+        "--rmd-box-padding-h"?: string | number;
+        "--rmd-box-padding-v"?: string | number;
         "--rmd-box-item-min-size"?: string | number;
+        "--rmd-box-item-min-height"?: string | number;
         "--rmd-box-columns"?: string | number;
+        "--rmd-box-row-max-height"?: string;
+        "--rmd-box-auto-rows-height"?: string;
         "--rmd-box-phone-columns"?: number | string;
+        "--rmd-box-phone-item-min-height"?: number | string;
         "--rmd-box-phone-item-min-size"?: number | string;
         "--rmd-box-tablet-columns"?: number | string;
         "--rmd-box-tablet-item-min-size"?: number | string;
+        "--rmd-box-tablet-item-min-height"?: number | string;
         "--rmd-box-desktop-columns"?: number | string;
         "--rmd-box-desktop-item-min-size"?: number | string;
+        "--rmd-box-desktop-item-min-height"?: number | string;
         "--rmd-box-large-desktop-columns"?: number | string;
         "--rmd-box-large-desktop-item-min-size"?: number | string;
+        "--rmd-box-large-desktop-item-min-height"?: number | string;
     }
 }
 /** @since 6.2.0 */

package/dist/box/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type CSSProperties } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { type IsEmptyObject, type OverridableStringUnion } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-box\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-box-gap\"?: string | number;\n    \"--rmd-box-padding\"?: string | number;\n    \"--rmd-box-item-min-size\"?: string | number;\n    \"--rmd-box-columns\"?: string | number;\n    \"--rmd-box-phone-columns\"?: number | string;\n    \"--rmd-box-phone-item-min-size\"?: number | string;\n    \"--rmd-box-tablet-columns\"?: number | string;\n    \"--rmd-box-tablet-item-min-size\"?: number | string;\n    \"--rmd-box-desktop-columns\"?: number | string;\n    \"--rmd-box-desktop-item-min-size\"?: number | string;\n    \"--rmd-box-large-desktop-columns\"?: number | string;\n    \"--rmd-box-large-desktop-item-min-size\"?: number | string;\n  }\n}\n\n/** @since 6.2.0 */\nexport interface BoxAlignItemsOverrides {}\n/** @since 6.2.0 */\nexport interface BoxJustifyContentOverrides {}\n/** @since 6.2.0 */\nexport interface BoxGridNameOverrides {}\n\n/**\n * @since 6.0.0\n */\nexport type BoxAlignItems = OverridableStringUnion<\n  \"start\" | \"flex-start\" | \"center\" | \"end\" | \"flex-end\" | \"stretch\",\n  BoxAlignItemsOverrides\n>;\n\n/**\n * @since 6.0.0\n */\nexport type BoxJustifyContent = OverridableStringUnion<\n  BoxAlignItems | \"space-around\" | \"space-between\" | \"space-evenly\",\n  BoxJustifyContentOverrides\n>;\n\n/**\n * @since 6.0.0\n */\nexport type BoxFlexDirection = \"row\" | \"column\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxGridColumns = \"fit\" | \"fill\" | number;\n\n/**\n * @since 6.2.0\n */\nexport type BoxGridName =\n  IsEmptyObject<BoxGridNameOverrides> extends true\n    ? string\n    : OverridableStringUnion<never, BoxGridNameOverrides>;\n\n/**\n * @since 6.0.0\n */\nexport type BoxBreakpoints = \"phone\" | \"tablet\" | \"desktop\" | \"largeDesktop\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxGridBreakpointColumns = {\n  [key in BoxBreakpoints]?: BoxGridColumns;\n};\n\n/**\n * @since 6.0.0\n */\nexport type BoxGridBreakpointItemSize = {\n  [key in BoxBreakpoints]?: string;\n};\n\n/**\n * @since 6.0.0\n */\nexport interface BoxOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to use `display: grid` instead of `display: flex`.\n   *\n   * @defaultValue `false`\n   */\n  grid?: boolean;\n\n  /**\n   * Set this to `true` to apply `width: 100%`. This can be useful when using\n   * nested box layouts.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to `true` to prevent gap between items.\n   *\n   * @defaultValue `false`\n   */\n  disableGap?: boolean | \"row\" | \"column\";\n\n  /**\n   * Set this to `true` to set `flex-wrap: nowrap`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * Set this to `true` to disable the default padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * This should match one of the names in the `$box-grids` map. So for example:\n   *\n   * ```scss\n   * @use \"react-md\" with (\n   *   $box-grids: (\n   *     small: (\n   *       min: 5rem\n   *     ),\n   *     medium: (\n   *       min: 7rem,\n   *       gap: 0.5rem,\n   *       padding: 2rem,\n   *     ),\n   *   ),\n   * );\n   * ```\n   *\n   * ```ts\n   * declare module \"@react-md/core/box/styles\" {\n   *   interface BoxGridNameOverrides {\n   *     small: true;\n   *     medium: true;\n   *   }\n   * }\n   * ```\n   *\n   * The `gridName` should be `\"small\" | \"medium\"`.\n   *\n   * @defaultValue `\"\"`\n   */\n  gridName?: BoxGridName;\n\n  /**\n   * The default behavior for a grid is to automatically determine the number\n   * of columns to render by placing as many items as possible with a specific\n   * item min-width and the defined gap between items. Once the number of\n   * columns has been determined, place the items in the grid and expand to the\n   * full column width.\n   *\n   * This prop is a convenience prop to control how to display items when there\n   * are not enough to span all columns without a separate SCSS file.\n   *\n   * i.e. 3 items were provided but 4 can be rendered.\n   *\n   * - `\"fit\"` - fill the entire width with columns and stretch columns to fill\n   *   the remaining space\n   * - `\"fill\"` - fill the entire width with columns and add empty columns to\n   *   fill the remaining space\n   * - `number` - ignore the auto layout behavior and specify the number of\n   *   columns to use instead.\n   *\n   * If additional responsive behavior is required, an object can be provided\n   * to define the column behavior for: phone, tablet, desktop, or\n   * largeDesktop.\n   *\n   * @see {@link gridItemSize} for how the number of columns are determined.\n   * @defaultValue `\"fit\"`\n   */\n  gridColumns?: BoxGridColumns | BoxGridBreakpointColumns;\n\n  /**\n   * This prop can be used to override the default `--rmd-box-item-min-size`\n   * for the grid without a separate SCSS file. Since this is set as a CSS variable,\n   * the value must be a number with a unit to work correctly. i.e. `10rem`\n   * instead of `160`.\n   *\n   * If additional responsive behavior is required, an object can be provided\n   * to define the column behavior for: phone, tablet, desktop, or\n   * largeDesktop.\n   *\n   * @see {@link https://react-md.dev/sassdoc/box#variables-box-item-min-size}\n   */\n  gridItemSize?: string | BoxGridBreakpointItemSize;\n\n  /**\n   * Set this to `true` to enable equal height rows within the grid based\n   * on the current `max-height`. This requires the `max-height` to be set\n   * on the `Box` either by:\n   *\n   * - a custom class name that sets `max-height`\n   * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element\n   *\n   * @defaultValue `false`\n   */\n  gridAutoRows?: boolean;\n\n  /**\n   * @defaultValue `\"\"`\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * The default value is really `center` or whatever the\n   * `$box-default-align-items` is set to.\n   *\n   * @defaultValue `\"\"`\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` to set `flex-direction: column` which will stack all\n   * items in the box.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to reverse the `flex-direction`. i.e.\n   * - `flex-direction: row-reverse`\n   * - `flex-direction: column-reverse`\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @see {@link boxStyles}\n * @since 6.0.0\n */\nexport function box(options: BoxOptions = {}): string {\n  const {\n    className,\n    align = \"\",\n    grid,\n    gridName = \"\",\n    gridColumns = \"fit\",\n    gridItemSize,\n    gridAutoRows,\n    justify = \"\",\n    stacked,\n    reversed,\n    fullWidth,\n    disableGap,\n    disableWrap,\n    disablePadding,\n  } = options;\n  let phoneColumns: BoxGridColumns | undefined;\n  let phoneItemSize: string | number | undefined;\n  let tabletColumns: BoxGridColumns | undefined;\n  let tabletItemSize: string | number | undefined;\n  let desktopColumns: BoxGridColumns | undefined;\n  let desktopItemSize: string | number | undefined;\n  let largeDesktopColumns: BoxGridColumns | undefined;\n  let largeDesktopItemSize: string | number | undefined;\n  if (gridColumns && typeof gridColumns === \"object\") {\n    ({\n      phone: phoneColumns,\n      tablet: tabletColumns,\n      desktop: desktopColumns,\n      largeDesktop: largeDesktopColumns,\n    } = gridColumns);\n  }\n  if (gridItemSize && typeof gridItemSize === \"object\") {\n    ({\n      phone: phoneItemSize,\n      tablet: tabletItemSize,\n      desktop: desktopItemSize,\n      largeDesktop: largeDesktopItemSize,\n    } = gridItemSize);\n  }\n\n  const isItemSizeEnabled = (\n    value: string | number | undefined\n  ): boolean | undefined => grid && (!!value || value === 0);\n  const isColumnsEnabled = (\n    value: BoxGridColumns | BoxGridBreakpointColumns | undefined\n  ): boolean | undefined => grid && typeof value === \"number\";\n\n  return cnb(\n    styles({\n      gap: !disableGap,\n      \"gap-h\": disableGap === \"row\",\n      \"gap-v\": disableGap === \"column\",\n      wrap: !disableWrap,\n      padded: !disablePadding,\n      column: stacked && !reversed,\n      reverse: !stacked && reversed,\n      \"column-reverse\": stacked && reversed,\n      \"full-width\": fullWidth,\n      grid,\n      \"grid-fill\": grid && gridColumns === \"fill\",\n      \"grid-size\": isColumnsEnabled(gridColumns),\n      \"grid-phone\": grid && (phoneColumns || phoneItemSize),\n      \"grid-phone-size\":\n        isColumnsEnabled(phoneColumns) || isItemSizeEnabled(phoneItemSize),\n      \"grid-tablet\": grid && (tabletColumns || tabletItemSize),\n      \"grid-tablet-size\":\n        isColumnsEnabled(tabletColumns) || isItemSizeEnabled(tabletItemSize),\n      \"grid-desktop\": grid && (desktopColumns || desktopItemSize),\n      \"grid-desktop-size\":\n        isColumnsEnabled(desktopColumns) || isItemSizeEnabled(desktopItemSize),\n      \"grid-large-desktop\":\n        grid && (largeDesktopColumns || largeDesktopItemSize),\n      \"grid-large-desktop-size\":\n        isColumnsEnabled(largeDesktopColumns) ||\n        isItemSizeEnabled(largeDesktopItemSize),\n      \"grid-auto-rows\": grid && gridAutoRows,\n      [gridName]: grid && gridName,\n      \"align-start\": align === \"start\" || align === \"flex-start\",\n      \"align-center\": align === \"center\",\n      \"align-end\": align === \"end\" || align === \"flex-end\",\n      \"align-stretch\": align === \"stretch\",\n      \"justify-center\": justify === \"center\",\n      \"justify-start\": justify === \"start\" || justify === \"flex-start\",\n      \"justify-end\": justify === \"end\" || justify === \"flex-end\",\n      \"justify-stretch\": justify === \"stretch\",\n      \"justify-around\": justify === \"space-around\",\n      \"justify-between\": justify === \"space-between\",\n      \"justify-evenly\": justify === \"space-evenly\",\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ApplyOptions {\n  media: keyof BoxGridBreakpointColumns | \"\";\n  style: CSSProperties | undefined;\n  type: \"columns\" | \"size\";\n  value:\n    | BoxGridColumns\n    | BoxGridBreakpointColumns\n    | string\n    | BoxGridBreakpointItemSize\n    | undefined;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction applyBoxVar(options: ApplyOptions): CSSProperties | undefined {\n  const { type, media, style, value } = options;\n  const expectedType = type === \"columns\" ? \"number\" : \"string\";\n  if (typeof value !== expectedType) {\n    return style;\n  }\n\n  const suffix = type === \"columns\" ? type : \"item-min-size\";\n  let varName: DefinedCSSVariableName = `--rmd-box-${suffix}`;\n  if (media === \"largeDesktop\") {\n    varName = `--rmd-box-large-desktop-${suffix}`;\n  } else if (media) {\n    varName = `--rmd-box-${media}-${suffix}`;\n  }\n\n  return {\n    ...style,\n    [varName]: value,\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst BREAKPOINTS = [\"phone\", \"tablet\", \"desktop\", \"largeDesktop\"] as const;\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction applyBoxVarGroup(\n  options: Pick<ApplyOptions, \"value\" | \"style\" | \"type\">\n): CSSProperties | undefined {\n  const { style: propStyle, value, type } = options;\n  let style = applyBoxVar({\n    type,\n    style: propStyle,\n    media: \"\",\n    value,\n  });\n  if (value && typeof value === \"object\") {\n    BREAKPOINTS.forEach((media) => {\n      style = applyBoxVar({\n        type,\n        style,\n        media,\n        value: value[media],\n      });\n    });\n  }\n  return style;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BoxStyles {\n  style?: CSSProperties;\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BoxStylesOptions extends BoxOptions {\n  style?: CSSProperties;\n}\n\n/**\n * @see {@link box}\n * @since 6.0.0\n */\nexport function boxStyles(options: BoxStylesOptions): BoxStyles {\n  const { style: propStyle, gridColumns, gridItemSize } = options;\n  let style = applyBoxVarGroup({\n    type: \"columns\",\n    style: propStyle,\n    value: gridColumns,\n  });\n  style = applyBoxVarGroup({\n    type: \"size\",\n    style,\n    value: gridItemSize,\n  });\n\n  return {\n    style,\n    className: box(options),\n  };\n}\n"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","gridItemSize","gridAutoRows","justify","stacked","reversed","fullWidth","disableGap","disableWrap","disablePadding","phoneColumns","phoneItemSize","tabletColumns","tabletItemSize","desktopColumns","desktopItemSize","largeDesktopColumns","largeDesktopItemSize","phone","tablet","desktop","largeDesktop","isItemSizeEnabled","value","isColumnsEnabled","gap","wrap","padded","column","reverse","applyBoxVar","type","media","style","expectedType","suffix","varName","BREAKPOINTS","applyBoxVarGroup","propStyle","forEach","boxStyles"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAKhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+OnB;;;CAGC,GACD,OAAO,SAASE,IAAIC,UAAsB,CAAC,CAAC;IAC1C,MAAM,EACJC,SAAS,EACTC,QAAQ,EAAE,EACVC,IAAI,EACJC,WAAW,EAAE,EACbC,cAAc,KAAK,EACnBC,YAAY,EACZC,YAAY,EACZC,UAAU,EAAE,EACZC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACf,GAAGd;IACJ,IAAIe;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIjB,eAAe,OAAOA,gBAAgB,UAAU;QACjD,CAAA,EACCkB,OAAOR,YAAY,EACnBS,QAAQP,aAAa,EACrBQ,SAASN,cAAc,EACvBO,cAAcL,mBAAmB,EAClC,GAAGhB,WAAU;IAChB;IACA,IAAIC,gBAAgB,OAAOA,iBAAiB,UAAU;QACnD,CAAA,EACCiB,OAAOP,aAAa,EACpBQ,QAAQN,cAAc,EACtBO,SAASL,eAAe,EACxBM,cAAcJ,oBAAoB,EACnC,GAAGhB,YAAW;IACjB;IAEA,MAAMqB,oBAAoB,CACxBC,QACwBzB,QAAS,CAAA,CAAC,CAACyB,SAASA,UAAU,CAAA;IACxD,MAAMC,mBAAmB,CACvBD,QACwBzB,QAAQ,OAAOyB,UAAU;IAEnD,OAAOhC,IACLE,OAAO;QACLgC,KAAK,CAAClB;QACN,SAASA,eAAe;QACxB,SAASA,eAAe;QACxBmB,MAAM,CAAClB;QACPmB,QAAQ,CAAClB;QACTmB,QAAQxB,WAAW,CAACC;QACpBwB,SAAS,CAACzB,WAAWC;QACrB,kBAAkBD,WAAWC;QAC7B,cAAcC;QACdR;QACA,aAAaA,QAAQE,gBAAgB;QACrC,aAAawB,iBAAiBxB;QAC9B,cAAcF,QAASY,CAAAA,gBAAgBC,aAAY;QACnD,mBACEa,iBAAiBd,iBAAiBY,kBAAkBX;QACtD,eAAeb,QAASc,CAAAA,iBAAiBC,cAAa;QACtD,oBACEW,iBAAiBZ,kBAAkBU,kBAAkBT;QACvD,gBAAgBf,QAASgB,CAAAA,kBAAkBC,eAAc;QACzD,qBACES,iBAAiBV,mBAAmBQ,kBAAkBP;QACxD,sBACEjB,QAASkB,CAAAA,uBAAuBC,oBAAmB;QACrD,2BACEO,iBAAiBR,wBACjBM,kBAAkBL;QACpB,kBAAkBnB,QAAQI;QAC1B,CAACH,SAAS,EAAED,QAAQC;QACpB,eAAeF,UAAU,WAAWA,UAAU;QAC9C,gBAAgBA,UAAU;QAC1B,aAAaA,UAAU,SAASA,UAAU;QAC1C,iBAAiBA,UAAU;QAC3B,kBAAkBM,YAAY;QAC9B,iBAAiBA,YAAY,WAAWA,YAAY;QACpD,eAAeA,YAAY,SAASA,YAAY;QAChD,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;QAC9B,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;IAChC,IACAP;AAEJ;AAkBA;;;CAGC,GACD,SAASkC,YAAYnC,OAAqB;IACxC,MAAM,EAAEoC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAEV,KAAK,EAAE,GAAG5B;IACtC,MAAMuC,eAAeH,SAAS,YAAY,WAAW;IACrD,IAAI,OAAOR,UAAUW,cAAc;QACjC,OAAOD;IACT;IAEA,MAAME,SAASJ,SAAS,YAAYA,OAAO;IAC3C,IAAIK,UAAkC,CAAC,UAAU,EAAED,QAAQ;IAC3D,IAAIH,UAAU,gBAAgB;QAC5BI,UAAU,CAAC,wBAAwB,EAAED,QAAQ;IAC/C,OAAO,IAAIH,OAAO;QAChBI,UAAU,CAAC,UAAU,EAAEJ,MAAM,CAAC,EAAEG,QAAQ;IAC1C;IAEA,OAAO;QACL,GAAGF,KAAK;QACR,CAACG,QAAQ,EAAEb;IACb;AACF;AAEA;;;CAGC,GACD,MAAMc,cAAc;IAAC;IAAS;IAAU;IAAW;CAAe;AAElE;;;CAGC,GACD,SAASC,iBACP3C,OAAuD;IAEvD,MAAM,EAAEsC,OAAOM,SAAS,EAAEhB,KAAK,EAAEQ,IAAI,EAAE,GAAGpC;IAC1C,IAAIsC,QAAQH,YAAY;QACtBC;QACAE,OAAOM;QACPP,OAAO;QACPT;IACF;IACA,IAAIA,SAAS,OAAOA,UAAU,UAAU;QACtCc,YAAYG,OAAO,CAAC,CAACR;YACnBC,QAAQH,YAAY;gBAClBC;gBACAE;gBACAD;gBACAT,OAAOA,KAAK,CAACS,MAAM;YACrB;QACF;IACF;IACA,OAAOC;AACT;AAiBA;;;CAGC,GACD,OAAO,SAASQ,UAAU9C,OAAyB;IACjD,MAAM,EAAEsC,OAAOM,SAAS,EAAEvC,WAAW,EAAEC,YAAY,EAAE,GAAGN;IACxD,IAAIsC,QAAQK,iBAAiB;QAC3BP,MAAM;QACNE,OAAOM;QACPhB,OAAOvB;IACT;IACAiC,QAAQK,iBAAiB;QACvBP,MAAM;QACNE;QACAV,OAAOtB;IACT;IAEA,OAAO;QACLgC;QACArC,WAAWF,IAAIC;IACjB;AACF"}
+{"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type CSSProperties } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { type IsEmptyObject, type OverridableStringUnion } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-box\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-box-gap\"?: string | number;\n    \"--rmd-box-padding\"?: string | number;\n    \"--rmd-box-padding-h\"?: string | number;\n    \"--rmd-box-padding-v\"?: string | number;\n    \"--rmd-box-item-min-size\"?: string | number;\n    \"--rmd-box-item-min-height\"?: string | number;\n    \"--rmd-box-columns\"?: string | number;\n    \"--rmd-box-row-max-height\"?: string;\n    \"--rmd-box-auto-rows-height\"?: string;\n    \"--rmd-box-phone-columns\"?: number | string;\n    \"--rmd-box-phone-item-min-height\"?: number | string;\n    \"--rmd-box-phone-item-min-size\"?: number | string;\n    \"--rmd-box-tablet-columns\"?: number | string;\n    \"--rmd-box-tablet-item-min-size\"?: number | string;\n    \"--rmd-box-tablet-item-min-height\"?: number | string;\n    \"--rmd-box-desktop-columns\"?: number | string;\n    \"--rmd-box-desktop-item-min-size\"?: number | string;\n    \"--rmd-box-desktop-item-min-height\"?: number | string;\n    \"--rmd-box-large-desktop-columns\"?: number | string;\n    \"--rmd-box-large-desktop-item-min-size\"?: number | string;\n    \"--rmd-box-large-desktop-item-min-height\"?: number | string;\n  }\n}\n\n/** @since 6.2.0 */\nexport interface BoxAlignItemsOverrides {}\n/** @since 6.2.0 */\nexport interface BoxJustifyContentOverrides {}\n/** @since 6.2.0 */\nexport interface BoxGridNameOverrides {}\n\n/**\n * @since 6.0.0\n */\nexport type BoxAlignItems = OverridableStringUnion<\n  \"start\" | \"flex-start\" | \"center\" | \"end\" | \"flex-end\" | \"stretch\",\n  BoxAlignItemsOverrides\n>;\n\n/**\n * @since 6.0.0\n */\nexport type BoxJustifyContent = OverridableStringUnion<\n  BoxAlignItems | \"space-around\" | \"space-between\" | \"space-evenly\",\n  BoxJustifyContentOverrides\n>;\n\n/**\n * @since 6.0.0\n */\nexport type BoxFlexDirection = \"row\" | \"column\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxGridColumns = \"fit\" | \"fill\" | number;\n\n/**\n * @since 6.2.0\n */\nexport type BoxGridName =\n  IsEmptyObject<BoxGridNameOverrides> extends true\n    ? string\n    : OverridableStringUnion<never, BoxGridNameOverrides>;\n\n/**\n * @since 6.0.0\n */\nexport type BoxBreakpoints = \"phone\" | \"tablet\" | \"desktop\" | \"largeDesktop\";\n\n/**\n * @since 6.0.0\n */\nexport type BoxGridBreakpointColumns = {\n  [key in BoxBreakpoints]?: BoxGridColumns;\n};\n\n/**\n * @since 6.0.0\n */\nexport type BoxGridBreakpointItemSize = {\n  [key in BoxBreakpoints]?: string;\n};\n\n/**\n * @since 6.0.0\n */\nexport interface BoxOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to use `display: grid` instead of `display: flex`.\n   *\n   * @defaultValue `false`\n   */\n  grid?: boolean;\n\n  /**\n   * Set this to `true` to apply `width: 100%`. This can be useful when using\n   * nested box layouts.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to `true` to prevent gap between items.\n   *\n   * @defaultValue `false`\n   */\n  disableGap?: boolean | \"row\" | \"column\";\n\n  /**\n   * Set this to `true` to set `flex-wrap: nowrap`.\n   *\n   * @defaultValue `false`\n   */\n  disableWrap?: boolean;\n\n  /**\n   * Set this to `true` to disable the default padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * This should match one of the names in the `$box-grids` map. So for example:\n   *\n   * ```scss\n   * @use \"react-md\" with (\n   *   $box-grids: (\n   *     small: (\n   *       min: 5rem\n   *     ),\n   *     medium: (\n   *       min: 7rem,\n   *       gap: 0.5rem,\n   *       padding: 2rem,\n   *     ),\n   *   ),\n   * );\n   * ```\n   *\n   * ```ts\n   * declare module \"@react-md/core/box/styles\" {\n   *   interface BoxGridNameOverrides {\n   *     small: true;\n   *     medium: true;\n   *   }\n   * }\n   * ```\n   *\n   * The `gridName` should be `\"small\" | \"medium\"`.\n   *\n   * @defaultValue `\"\"`\n   */\n  gridName?: BoxGridName;\n\n  /**\n   * The default behavior for a grid is to automatically determine the number\n   * of columns to render by placing as many items as possible with a specific\n   * item min-width and the defined gap between items. Once the number of\n   * columns has been determined, place the items in the grid and expand to the\n   * full column width.\n   *\n   * This prop is a convenience prop to control how to display items when there\n   * are not enough to span all columns without a separate SCSS file.\n   *\n   * i.e. 3 items were provided but 4 can be rendered.\n   *\n   * - `\"fit\"` - fill the entire width with columns and stretch columns to fill\n   *   the remaining space\n   * - `\"fill\"` - fill the entire width with columns and add empty columns to\n   *   fill the remaining space\n   * - `number` - ignore the auto layout behavior and specify the number of\n   *   columns to use instead.\n   *\n   * If additional responsive behavior is required, an object can be provided\n   * to define the column behavior for: phone, tablet, desktop, or\n   * largeDesktop.\n   *\n   * @see {@link gridItemSize} for how the number of columns are determined.\n   * @defaultValue `\"fit\"`\n   */\n  gridColumns?: BoxGridColumns | BoxGridBreakpointColumns;\n\n  /**\n   * This prop can be used to override the default `--rmd-box-item-min-size`\n   * for the grid without a separate SCSS file. Since this is set as a CSS variable,\n   * the value must be a number with a unit to work correctly. i.e. `10rem`\n   * instead of `160`.\n   *\n   * If additional responsive behavior is required, an object can be provided\n   * to define the column behavior for: phone, tablet, desktop, or\n   * largeDesktop.\n   *\n   * @see {@link https://react-md.dev/sassdoc/box#variables-box-item-min-size}\n   */\n  gridItemSize?: string | BoxGridBreakpointItemSize;\n\n  /**\n   * Set this to `true` to enable equal height rows within the grid based\n   * on the current `max-height`. This requires the `max-height` to be set\n   * on the `Box` either by:\n   *\n   * - a custom class name that sets `max-height`\n   * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element\n   *\n   * @defaultValue `false`\n   */\n  gridAutoRows?: boolean;\n\n  /**\n   * @defaultValue `\"\"`\n   */\n  align?: BoxAlignItems;\n\n  /**\n   * The default value is really `center` or whatever the\n   * `$box-default-align-items` is set to.\n   *\n   * @defaultValue `\"\"`\n   */\n  justify?: BoxJustifyContent;\n\n  /**\n   * Set this to `true` to set `flex-direction: column` which will stack all\n   * items in the box.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * Set this to `true` to reverse the `flex-direction`. i.e.\n   * - `flex-direction: row-reverse`\n   * - `flex-direction: column-reverse`\n   *\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @see {@link boxStyles}\n * @since 6.0.0\n */\nexport function box(options: BoxOptions = {}): string {\n  const {\n    className,\n    align = \"\",\n    grid,\n    gridName = \"\",\n    gridColumns = \"fit\",\n    gridItemSize,\n    gridAutoRows,\n    justify = \"\",\n    stacked,\n    reversed,\n    fullWidth,\n    disableGap,\n    disableWrap,\n    disablePadding,\n  } = options;\n  let phoneColumns: BoxGridColumns | undefined;\n  let phoneItemSize: string | number | undefined;\n  let tabletColumns: BoxGridColumns | undefined;\n  let tabletItemSize: string | number | undefined;\n  let desktopColumns: BoxGridColumns | undefined;\n  let desktopItemSize: string | number | undefined;\n  let largeDesktopColumns: BoxGridColumns | undefined;\n  let largeDesktopItemSize: string | number | undefined;\n  if (gridColumns && typeof gridColumns === \"object\") {\n    ({\n      phone: phoneColumns,\n      tablet: tabletColumns,\n      desktop: desktopColumns,\n      largeDesktop: largeDesktopColumns,\n    } = gridColumns);\n  }\n  if (gridItemSize && typeof gridItemSize === \"object\") {\n    ({\n      phone: phoneItemSize,\n      tablet: tabletItemSize,\n      desktop: desktopItemSize,\n      largeDesktop: largeDesktopItemSize,\n    } = gridItemSize);\n  }\n\n  const isItemSizeEnabled = (\n    value: string | number | undefined\n  ): boolean | undefined => grid && (!!value || value === 0);\n  const isColumnsEnabled = (\n    value: BoxGridColumns | BoxGridBreakpointColumns | undefined\n  ): boolean | undefined => grid && typeof value === \"number\";\n\n  return cnb(\n    styles({\n      gap: !disableGap,\n      \"gap-h\": disableGap === \"row\",\n      \"gap-v\": disableGap === \"column\",\n      wrap: !disableWrap,\n      padded: !disablePadding,\n      column: stacked && !reversed,\n      reverse: !stacked && reversed,\n      \"column-reverse\": stacked && reversed,\n      \"full-width\": fullWidth,\n      grid,\n      \"grid-fill\": grid && gridColumns === \"fill\",\n      \"grid-size\": isColumnsEnabled(gridColumns),\n      \"grid-phone\": grid && (phoneColumns || phoneItemSize),\n      \"grid-phone-size\":\n        isColumnsEnabled(phoneColumns) || isItemSizeEnabled(phoneItemSize),\n      \"grid-tablet\": grid && (tabletColumns || tabletItemSize),\n      \"grid-tablet-size\":\n        isColumnsEnabled(tabletColumns) || isItemSizeEnabled(tabletItemSize),\n      \"grid-desktop\": grid && (desktopColumns || desktopItemSize),\n      \"grid-desktop-size\":\n        isColumnsEnabled(desktopColumns) || isItemSizeEnabled(desktopItemSize),\n      \"grid-large-desktop\":\n        grid && (largeDesktopColumns || largeDesktopItemSize),\n      \"grid-large-desktop-size\":\n        isColumnsEnabled(largeDesktopColumns) ||\n        isItemSizeEnabled(largeDesktopItemSize),\n      \"grid-auto-rows\": grid && gridAutoRows,\n      [gridName]: grid && gridName,\n      \"align-start\": align === \"start\" || align === \"flex-start\",\n      \"align-center\": align === \"center\",\n      \"align-end\": align === \"end\" || align === \"flex-end\",\n      \"align-stretch\": align === \"stretch\",\n      \"justify-center\": justify === \"center\",\n      \"justify-start\": justify === \"start\" || justify === \"flex-start\",\n      \"justify-end\": justify === \"end\" || justify === \"flex-end\",\n      \"justify-stretch\": justify === \"stretch\",\n      \"justify-around\": justify === \"space-around\",\n      \"justify-between\": justify === \"space-between\",\n      \"justify-evenly\": justify === \"space-evenly\",\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface ApplyOptions {\n  media: keyof BoxGridBreakpointColumns | \"\";\n  style: CSSProperties | undefined;\n  type: \"columns\" | \"size\";\n  value:\n    | BoxGridColumns\n    | BoxGridBreakpointColumns\n    | string\n    | BoxGridBreakpointItemSize\n    | undefined;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction applyBoxVar(options: ApplyOptions): CSSProperties | undefined {\n  const { type, media, style, value } = options;\n  const expectedType = type === \"columns\" ? \"number\" : \"string\";\n  if (typeof value !== expectedType) {\n    return style;\n  }\n\n  const suffix = type === \"columns\" ? type : \"item-min-size\";\n  let varName: DefinedCSSVariableName = `--rmd-box-${suffix}`;\n  if (media === \"largeDesktop\") {\n    varName = `--rmd-box-large-desktop-${suffix}`;\n  } else if (media) {\n    varName = `--rmd-box-${media}-${suffix}`;\n  }\n\n  return {\n    ...style,\n    [varName]: value,\n  };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst BREAKPOINTS = [\"phone\", \"tablet\", \"desktop\", \"largeDesktop\"] as const;\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction applyBoxVarGroup(\n  options: Pick<ApplyOptions, \"value\" | \"style\" | \"type\">\n): CSSProperties | undefined {\n  const { style: propStyle, value, type } = options;\n  let style = applyBoxVar({\n    type,\n    style: propStyle,\n    media: \"\",\n    value,\n  });\n  if (value && typeof value === \"object\") {\n    BREAKPOINTS.forEach((media) => {\n      style = applyBoxVar({\n        type,\n        style,\n        media,\n        value: value[media],\n      });\n    });\n  }\n  return style;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BoxStyles {\n  style?: CSSProperties;\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BoxStylesOptions extends BoxOptions {\n  style?: CSSProperties;\n}\n\n/**\n * @see {@link box}\n * @since 6.0.0\n */\nexport function boxStyles(options: BoxStylesOptions): BoxStyles {\n  const { style: propStyle, gridColumns, gridItemSize } = options;\n  let style = applyBoxVarGroup({\n    type: \"columns\",\n    style: propStyle,\n    value: gridColumns,\n  });\n  style = applyBoxVarGroup({\n    type: \"size\",\n    style,\n    value: gridItemSize,\n  });\n\n  return {\n    style,\n    className: box(options),\n  };\n}\n"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","gridItemSize","gridAutoRows","justify","stacked","reversed","fullWidth","disableGap","disableWrap","disablePadding","phoneColumns","phoneItemSize","tabletColumns","tabletItemSize","desktopColumns","desktopItemSize","largeDesktopColumns","largeDesktopItemSize","phone","tablet","desktop","largeDesktop","isItemSizeEnabled","value","isColumnsEnabled","gap","wrap","padded","column","reverse","applyBoxVar","type","media","style","expectedType","suffix","varName","BREAKPOINTS","applyBoxVarGroup","propStyle","forEach","boxStyles"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAKhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwPnB;;;CAGC,GACD,OAAO,SAASE,IAAIC,UAAsB,CAAC,CAAC;IAC1C,MAAM,EACJC,SAAS,EACTC,QAAQ,EAAE,EACVC,IAAI,EACJC,WAAW,EAAE,EACbC,cAAc,KAAK,EACnBC,YAAY,EACZC,YAAY,EACZC,UAAU,EAAE,EACZC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACf,GAAGd;IACJ,IAAIe;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIjB,eAAe,OAAOA,gBAAgB,UAAU;QACjD,CAAA,EACCkB,OAAOR,YAAY,EACnBS,QAAQP,aAAa,EACrBQ,SAASN,cAAc,EACvBO,cAAcL,mBAAmB,EAClC,GAAGhB,WAAU;IAChB;IACA,IAAIC,gBAAgB,OAAOA,iBAAiB,UAAU;QACnD,CAAA,EACCiB,OAAOP,aAAa,EACpBQ,QAAQN,cAAc,EACtBO,SAASL,eAAe,EACxBM,cAAcJ,oBAAoB,EACnC,GAAGhB,YAAW;IACjB;IAEA,MAAMqB,oBAAoB,CACxBC,QACwBzB,QAAS,CAAA,CAAC,CAACyB,SAASA,UAAU,CAAA;IACxD,MAAMC,mBAAmB,CACvBD,QACwBzB,QAAQ,OAAOyB,UAAU;IAEnD,OAAOhC,IACLE,OAAO;QACLgC,KAAK,CAAClB;QACN,SAASA,eAAe;QACxB,SAASA,eAAe;QACxBmB,MAAM,CAAClB;QACPmB,QAAQ,CAAClB;QACTmB,QAAQxB,WAAW,CAACC;QACpBwB,SAAS,CAACzB,WAAWC;QACrB,kBAAkBD,WAAWC;QAC7B,cAAcC;QACdR;QACA,aAAaA,QAAQE,gBAAgB;QACrC,aAAawB,iBAAiBxB;QAC9B,cAAcF,QAASY,CAAAA,gBAAgBC,aAAY;QACnD,mBACEa,iBAAiBd,iBAAiBY,kBAAkBX;QACtD,eAAeb,QAASc,CAAAA,iBAAiBC,cAAa;QACtD,oBACEW,iBAAiBZ,kBAAkBU,kBAAkBT;QACvD,gBAAgBf,QAASgB,CAAAA,kBAAkBC,eAAc;QACzD,qBACES,iBAAiBV,mBAAmBQ,kBAAkBP;QACxD,sBACEjB,QAASkB,CAAAA,uBAAuBC,oBAAmB;QACrD,2BACEO,iBAAiBR,wBACjBM,kBAAkBL;QACpB,kBAAkBnB,QAAQI;QAC1B,CAACH,SAAS,EAAED,QAAQC;QACpB,eAAeF,UAAU,WAAWA,UAAU;QAC9C,gBAAgBA,UAAU;QAC1B,aAAaA,UAAU,SAASA,UAAU;QAC1C,iBAAiBA,UAAU;QAC3B,kBAAkBM,YAAY;QAC9B,iBAAiBA,YAAY,WAAWA,YAAY;QACpD,eAAeA,YAAY,SAASA,YAAY;QAChD,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;QAC9B,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;IAChC,IACAP;AAEJ;AAkBA;;;CAGC,GACD,SAASkC,YAAYnC,OAAqB;IACxC,MAAM,EAAEoC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAEV,KAAK,EAAE,GAAG5B;IACtC,MAAMuC,eAAeH,SAAS,YAAY,WAAW;IACrD,IAAI,OAAOR,UAAUW,cAAc;QACjC,OAAOD;IACT;IAEA,MAAME,SAASJ,SAAS,YAAYA,OAAO;IAC3C,IAAIK,UAAkC,CAAC,UAAU,EAAED,QAAQ;IAC3D,IAAIH,UAAU,gBAAgB;QAC5BI,UAAU,CAAC,wBAAwB,EAAED,QAAQ;IAC/C,OAAO,IAAIH,OAAO;QAChBI,UAAU,CAAC,UAAU,EAAEJ,MAAM,CAAC,EAAEG,QAAQ;IAC1C;IAEA,OAAO;QACL,GAAGF,KAAK;QACR,CAACG,QAAQ,EAAEb;IACb;AACF;AAEA;;;CAGC,GACD,MAAMc,cAAc;IAAC;IAAS;IAAU;IAAW;CAAe;AAElE;;;CAGC,GACD,SAASC,iBACP3C,OAAuD;IAEvD,MAAM,EAAEsC,OAAOM,SAAS,EAAEhB,KAAK,EAAEQ,IAAI,EAAE,GAAGpC;IAC1C,IAAIsC,QAAQH,YAAY;QACtBC;QACAE,OAAOM;QACPP,OAAO;QACPT;IACF;IACA,IAAIA,SAAS,OAAOA,UAAU,UAAU;QACtCc,YAAYG,OAAO,CAAC,CAACR;YACnBC,QAAQH,YAAY;gBAClBC;gBACAE;gBACAD;gBACAT,OAAOA,KAAK,CAACS,MAAM;YACrB;QACF;IACF;IACA,OAAOC;AACT;AAiBA;;;CAGC,GACD,OAAO,SAASQ,UAAU9C,OAAyB;IACjD,MAAM,EAAEsC,OAAOM,SAAS,EAAEvC,WAAW,EAAEC,YAAY,EAAE,GAAGN;IACxD,IAAIsC,QAAQK,iBAAiB;QAC3BP,MAAM;QACNE,OAAOM;QACPhB,OAAOvB;IACT;IACAiC,QAAQK,iBAAiB;QACvBP,MAAM;QACNE;QACAV,OAAOtB;IACT;IAEA,OAAO;QACLgC;QACArC,WAAWF,IAAIC;IACjB;AACF"}

package/dist/button/_button.scss

@@ -314,6 +314,10 @@ $variables: (
       @include set-var(icon-size, $icon-size);
       @include set-var(icon-font-size, $icon-font-size);
       @include set-var(icon-padding, $icon-padding);
+
+      @if not $disable-icon-square {
+        @include set-var(icon-square-border-radius, $icon-square-border-radius);
+      }
     }
 
     @if not $disable-floating {

package/dist/button/styles.d.ts

@@ -10,8 +10,12 @@ declare module "react" {
         "--rmd-button-text-vertical-padding"?: string | number;
         "--rmd-button-text-min-height"?: string | number;
         "--rmd-button-text-min-width"?: string | number;
+        "--rmd-button-text-border-radius"?: string | number;
         "--rmd-button-icon-size"?: string | number;
-        "--rmd-button-icon-radius"?: string | number;
+        "--rmd-button-icon-padding"?: string | number;
+        "--rmd-button-icon-font-size"?: string | number;
+        "--rmd-button-icon-border-radius"?: string | number;
+        "--rmd-button-icon-square-border-radius"?: string | number;
     }
 }
 /**

package/dist/button/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type OutlineColor,\n  type TextColor,\n  type ThemeColor,\n  cssUtils,\n} from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-button-background-color\"?: string;\n    \"--rmd-button-color\"?: string;\n    \"--rmd-button-border-radius\"?: string | number;\n    \"--rmd-button-contained-background-color\"?: string;\n    \"--rmd-button-contained-color\"?: string;\n    \"--rmd-button-text-horizontal-padding\"?: string | number;\n    \"--rmd-button-text-vertical-padding\"?: string | number;\n    \"--rmd-button-text-min-height\"?: string | number;\n    \"--rmd-button-text-min-width\"?: string | number;\n    \"--rmd-button-icon-size\"?: string | number;\n    \"--rmd-button-icon-radius\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-button\");\n\n/**\n * When this is set to `\"text\"`, the size of the button will be determined by\n * the content and will be more block-like. Icons can still be rendered in\n * `\"text\"` buttons and will have spacing automatically applied between other\n * content in the button.\n *\n * When this is set to `\"icon\"`, the button will be equal height/width and\n * circular.\n */\nexport type ButtonType = \"text\" | \"icon\" | \"icon-square\";\n\n/**\n * One of the valid material design default button themes that can be used. This\n * will update the general look and feel by updating the colors within the\n * button while the `ButtonThemeType` will update the borders or box shadow.\n */\nexport type ButtonTheme = ThemeColor | \"clear\" | \"disabled\";\n\n/**\n * When this is set to `\"flat\"`, the button will have no `background-color`,\n * `border`, and `box-shadow`. It will only set the `color` to the\n * {@link ButtonTheme}.\n *\n * When this is set to `\"outline\"`, the button will have no `background-color`,\n * but gain a `border` and `color` set to the {@link ButtonTheme}.\n *\n * When this is set to `\"contained\"`, the button will set the `background-color`\n * to the {@link ButtonTheme}, add some `box-shadow`, and set the `color` to\n * either `#000` or `#fff`. (The `color` defaults to whichever value has the\n * highest contrast ratio with the `background-color`)\n */\nexport type ButtonThemeType = \"flat\" | \"outline\" | \"contained\";\n\n/** @since 6.0.0 */\nexport interface ButtonClassNameThemeOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * @see {@link ButtonTheme} for information about the different types.\n   * @defaultValue `\"text\"`\n   */\n  buttonType?: ButtonType;\n\n  /** @defaultValue `\"clear\"` */\n  theme?: ButtonTheme;\n\n  /**\n   * @see {@link ButtonThemeType} for information about the theming behavior.\n   * @defaultValue `\"flat\"`\n   */\n  themeType?: ButtonThemeType;\n\n  /**\n   * This will display the button as an icon button until the tablet breakpoint\n   * which will then display as a button with an icon.\n   *\n   * @defaultValue `false`\n   */\n  responsive?: boolean;\n\n  /**\n   * @defaultValue `\"normal\"`\n   */\n  iconSize?: \"small\" | \"normal\" | \"large\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * Creates a button theme based on the button theming props. This is really just\n * used so that other elements like clickable `<div>`s or `<input type=\"file\">`\n * can look like buttons.\n *\n * @param options - An object containing the themeable button props to generate a\n * button theme className.\n * @returns a string of class names to create an element with a button theme.\n * @since 6.0.0 This used to be called `buttonThemeClassNames`.\n */\nexport function button(options: ButtonClassNameOptions = {}): string {\n  const {\n    theme: propTheme = \"clear\",\n    themeType = \"flat\",\n    iconSize,\n    buttonType = \"text\",\n    disabled: propDisabled = false,\n    responsive,\n    pressed = false,\n    pressedClassName,\n    className,\n  } = options;\n\n  const theme = propTheme === \"disabled\" ? \"clear\" : propTheme;\n  const disabled = propDisabled || propTheme === \"disabled\";\n  const text = buttonType === \"text\" && !responsive && !iconSize;\n  const icon = !text;\n  const outline = themeType === \"outline\";\n  const contained = themeType === \"contained\";\n  const clear = theme === \"clear\";\n  const isThemed = !disabled && !clear;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  let outlineColor: OutlineColor | undefined;\n  let backgroundColor: ThemeColor | undefined;\n  if (isThemed && !contained) {\n    textColor = theme;\n  } else if (disabled) {\n    textColor = \"text-disabled\";\n  }\n  if (isThemed && contained) {\n    backgroundColor = theme;\n  }\n  if (outline) {\n    outlineColor = clear ? \"greyscale\" : theme;\n  }\n\n  return cnb(\n    styles({\n      text,\n      icon,\n      \"icon-square\": buttonType === \"icon-square\",\n      disabled,\n      contained: !disabled && contained,\n      pressed: contained && pressed,\n      responsive,\n      small: icon && iconSize === \"small\",\n      large: icon && iconSize === \"large\",\n    }),\n    pressedClassName,\n    cssUtils({\n      surface: true,\n      textColor,\n      outlineColor,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ButtonUnstyledClassNameOptions {\n  className?: string;\n}\n\n/**\n * This requires the `$disable-unstyled-utility-class` to be `false` to use.\n *\n * @since 6.0.0\n */\nexport function buttonUnstyled(\n  options: ButtonUnstyledClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\"rmd-button-unstyled\", className);\n}\n"],"names":["cnb","cssUtils","bem","styles","button","options","theme","propTheme","themeType","iconSize","buttonType","disabled","propDisabled","responsive","pressed","pressedClassName","className","text","icon","outline","contained","clear","isThemed","textColor","outlineColor","backgroundColor","small","large","surface","buttonUnstyled"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAIEC,QAAQ,QACH,iBAAiB;AACxB,SAASC,GAAG,QAAQ,kBAAkB;AAkBtC,MAAMC,SAASD,IAAI;AAgFnB;;;;;;;;;CASC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,OAAOC,YAAY,OAAO,EAC1BC,YAAY,MAAM,EAClBC,QAAQ,EACRC,aAAa,MAAM,EACnBC,UAAUC,eAAe,KAAK,EAC9BC,UAAU,EACVC,UAAU,KAAK,EACfC,gBAAgB,EAChBC,SAAS,EACV,GAAGX;IAEJ,MAAMC,QAAQC,cAAc,aAAa,UAAUA;IACnD,MAAMI,WAAWC,gBAAgBL,cAAc;IAC/C,MAAMU,OAAOP,eAAe,UAAU,CAACG,cAAc,CAACJ;IACtD,MAAMS,OAAO,CAACD;IACd,MAAME,UAAUX,cAAc;IAC9B,MAAMY,YAAYZ,cAAc;IAChC,MAAMa,QAAQf,UAAU;IACxB,MAAMgB,WAAW,CAACX,YAAY,CAACU;IAE/B,IAAIE;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIH,YAAY,CAACF,WAAW;QAC1BG,YAAYjB;IACd,OAAO,IAAIK,UAAU;QACnBY,YAAY;IACd;IACA,IAAID,YAAYF,WAAW;QACzBK,kBAAkBnB;IACpB;IACA,IAAIa,SAAS;QACXK,eAAeH,QAAQ,cAAcf;IACvC;IAEA,OAAON,IACLG,OAAO;QACLc;QACAC;QACA,eAAeR,eAAe;QAC9BC;QACAS,WAAW,CAACT,YAAYS;QACxBN,SAASM,aAAaN;QACtBD;QACAa,OAAOR,QAAQT,aAAa;QAC5BkB,OAAOT,QAAQT,aAAa;IAC9B,IACAM,kBACAd,SAAS;QACP2B,SAAS;QACTL;QACAC;QACAC;IACF,IACAT;AAEJ;AAOA;;;;CAIC,GACD,OAAO,SAASa,eACdxB,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEW,SAAS,EAAE,GAAGX;IAEtB,OAAOL,IAAI,uBAAuBgB;AACpC"}
+{"version":3,"sources":["../../src/button/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n  type OutlineColor,\n  type TextColor,\n  type ThemeColor,\n  cssUtils,\n} from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-button-background-color\"?: string;\n    \"--rmd-button-color\"?: string;\n    \"--rmd-button-border-radius\"?: string | number;\n    \"--rmd-button-contained-background-color\"?: string;\n    \"--rmd-button-contained-color\"?: string;\n    \"--rmd-button-text-horizontal-padding\"?: string | number;\n    \"--rmd-button-text-vertical-padding\"?: string | number;\n    \"--rmd-button-text-min-height\"?: string | number;\n    \"--rmd-button-text-min-width\"?: string | number;\n    \"--rmd-button-text-border-radius\"?: string | number;\n    \"--rmd-button-icon-size\"?: string | number;\n    \"--rmd-button-icon-padding\"?: string | number;\n    \"--rmd-button-icon-font-size\"?: string | number;\n    \"--rmd-button-icon-border-radius\"?: string | number;\n    \"--rmd-button-icon-square-border-radius\"?: string | number;\n  }\n}\n\nconst styles = bem(\"rmd-button\");\n\n/**\n * When this is set to `\"text\"`, the size of the button will be determined by\n * the content and will be more block-like. Icons can still be rendered in\n * `\"text\"` buttons and will have spacing automatically applied between other\n * content in the button.\n *\n * When this is set to `\"icon\"`, the button will be equal height/width and\n * circular.\n */\nexport type ButtonType = \"text\" | \"icon\" | \"icon-square\";\n\n/**\n * One of the valid material design default button themes that can be used. This\n * will update the general look and feel by updating the colors within the\n * button while the `ButtonThemeType` will update the borders or box shadow.\n */\nexport type ButtonTheme = ThemeColor | \"clear\" | \"disabled\";\n\n/**\n * When this is set to `\"flat\"`, the button will have no `background-color`,\n * `border`, and `box-shadow`. It will only set the `color` to the\n * {@link ButtonTheme}.\n *\n * When this is set to `\"outline\"`, the button will have no `background-color`,\n * but gain a `border` and `color` set to the {@link ButtonTheme}.\n *\n * When this is set to `\"contained\"`, the button will set the `background-color`\n * to the {@link ButtonTheme}, add some `box-shadow`, and set the `color` to\n * either `#000` or `#fff`. (The `color` defaults to whichever value has the\n * highest contrast ratio with the `background-color`)\n */\nexport type ButtonThemeType = \"flat\" | \"outline\" | \"contained\";\n\n/** @since 6.0.0 */\nexport interface ButtonClassNameThemeOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * @see {@link ButtonTheme} for information about the different types.\n   * @defaultValue `\"text\"`\n   */\n  buttonType?: ButtonType;\n\n  /** @defaultValue `\"clear\"` */\n  theme?: ButtonTheme;\n\n  /**\n   * @see {@link ButtonThemeType} for information about the theming behavior.\n   * @defaultValue `\"flat\"`\n   */\n  themeType?: ButtonThemeType;\n\n  /**\n   * This will display the button as an icon button until the tablet breakpoint\n   * which will then display as a button with an icon.\n   *\n   * @defaultValue `false`\n   */\n  responsive?: boolean;\n\n  /**\n   * @defaultValue `\"normal\"`\n   */\n  iconSize?: \"small\" | \"normal\" | \"large\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ButtonClassNameOptions extends ButtonClassNameThemeOptions {\n  /** @defaultValue `false` */\n  pressed?: boolean;\n  pressedClassName?: string;\n}\n\n/**\n * Creates a button theme based on the button theming props. This is really just\n * used so that other elements like clickable `<div>`s or `<input type=\"file\">`\n * can look like buttons.\n *\n * @param options - An object containing the themeable button props to generate a\n * button theme className.\n * @returns a string of class names to create an element with a button theme.\n * @since 6.0.0 This used to be called `buttonThemeClassNames`.\n */\nexport function button(options: ButtonClassNameOptions = {}): string {\n  const {\n    theme: propTheme = \"clear\",\n    themeType = \"flat\",\n    iconSize,\n    buttonType = \"text\",\n    disabled: propDisabled = false,\n    responsive,\n    pressed = false,\n    pressedClassName,\n    className,\n  } = options;\n\n  const theme = propTheme === \"disabled\" ? \"clear\" : propTheme;\n  const disabled = propDisabled || propTheme === \"disabled\";\n  const text = buttonType === \"text\" && !responsive && !iconSize;\n  const icon = !text;\n  const outline = themeType === \"outline\";\n  const contained = themeType === \"contained\";\n  const clear = theme === \"clear\";\n  const isThemed = !disabled && !clear;\n\n  let textColor: ThemeColor | TextColor | undefined;\n  let outlineColor: OutlineColor | undefined;\n  let backgroundColor: ThemeColor | undefined;\n  if (isThemed && !contained) {\n    textColor = theme;\n  } else if (disabled) {\n    textColor = \"text-disabled\";\n  }\n  if (isThemed && contained) {\n    backgroundColor = theme;\n  }\n  if (outline) {\n    outlineColor = clear ? \"greyscale\" : theme;\n  }\n\n  return cnb(\n    styles({\n      text,\n      icon,\n      \"icon-square\": buttonType === \"icon-square\",\n      disabled,\n      contained: !disabled && contained,\n      pressed: contained && pressed,\n      responsive,\n      small: icon && iconSize === \"small\",\n      large: icon && iconSize === \"large\",\n    }),\n    pressedClassName,\n    cssUtils({\n      surface: true,\n      textColor,\n      outlineColor,\n      backgroundColor,\n    }),\n    className\n  );\n}\n\n/** @since 6.0.0 */\nexport interface ButtonUnstyledClassNameOptions {\n  className?: string;\n}\n\n/**\n * This requires the `$disable-unstyled-utility-class` to be `false` to use.\n *\n * @since 6.0.0\n */\nexport function buttonUnstyled(\n  options: ButtonUnstyledClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\"rmd-button-unstyled\", className);\n}\n"],"names":["cnb","cssUtils","bem","styles","button","options","theme","propTheme","themeType","iconSize","buttonType","disabled","propDisabled","responsive","pressed","pressedClassName","className","text","icon","outline","contained","clear","isThemed","textColor","outlineColor","backgroundColor","small","large","surface","buttonUnstyled"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAIEC,QAAQ,QACH,iBAAiB;AACxB,SAASC,GAAG,QAAQ,kBAAkB;AAsBtC,MAAMC,SAASD,IAAI;AAgFnB;;;;;;;;;CASC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,OAAOC,YAAY,OAAO,EAC1BC,YAAY,MAAM,EAClBC,QAAQ,EACRC,aAAa,MAAM,EACnBC,UAAUC,eAAe,KAAK,EAC9BC,UAAU,EACVC,UAAU,KAAK,EACfC,gBAAgB,EAChBC,SAAS,EACV,GAAGX;IAEJ,MAAMC,QAAQC,cAAc,aAAa,UAAUA;IACnD,MAAMI,WAAWC,gBAAgBL,cAAc;IAC/C,MAAMU,OAAOP,eAAe,UAAU,CAACG,cAAc,CAACJ;IACtD,MAAMS,OAAO,CAACD;IACd,MAAME,UAAUX,cAAc;IAC9B,MAAMY,YAAYZ,cAAc;IAChC,MAAMa,QAAQf,UAAU;IACxB,MAAMgB,WAAW,CAACX,YAAY,CAACU;IAE/B,IAAIE;IACJ,IAAIC;IACJ,IAAIC;IACJ,IAAIH,YAAY,CAACF,WAAW;QAC1BG,YAAYjB;IACd,OAAO,IAAIK,UAAU;QACnBY,YAAY;IACd;IACA,IAAID,YAAYF,WAAW;QACzBK,kBAAkBnB;IACpB;IACA,IAAIa,SAAS;QACXK,eAAeH,QAAQ,cAAcf;IACvC;IAEA,OAAON,IACLG,OAAO;QACLc;QACAC;QACA,eAAeR,eAAe;QAC9BC;QACAS,WAAW,CAACT,YAAYS;QACxBN,SAASM,aAAaN;QACtBD;QACAa,OAAOR,QAAQT,aAAa;QAC5BkB,OAAOT,QAAQT,aAAa;IAC9B,IACAM,kBACAd,SAAS;QACP2B,SAAS;QACTL;QACAC;QACAC;IACF,IACAT;AAEJ;AAOA;;;;CAIC,GACD,OAAO,SAASa,eACdxB,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEW,SAAS,EAAE,GAAGX;IAEtB,OAAOL,IAAI,uBAAuBgB;AACpC"}

package/dist/card/Card.d.ts

@@ -1,13 +1,6 @@
 import { type HTMLAttributes } from "react";
 import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
 import { type CardClassNameOptions } from "./styles.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-card-background-color"?: string;
-        "--rmd-card-color"?: string;
-        "--rmd-card-secondary-color"?: string;
-    }
-}
 /**
  * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the
  * deprecated `raiseable` prop