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

package/dist/autocomplete/AutocompleteDropdownButton.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../button/Button.js";
+import { IconRotator } from "../icon/IconRotator.js";
+import { getIcon } from "../icon/iconConfig.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+/**
+ * This is a simple `Button` wrapper to be used as a dropdown button within the
+ * `Autocomplete`.
+ *
+ * @since 6.0.0
+ */ export function AutocompleteDropdownButton(props) {
+    const { id: propId, icon, visible, iconRotatorProps, ...remaining } = props;
+    const id = useEnsuredId(propId, "autocomplete-dropdown");
+    return /*#__PURE__*/ _jsx(Button, {
+        ...remaining,
+        id: id,
+        "aria-expanded": visible,
+        tabIndex: -1,
+        buttonType: "icon",
+        children: /*#__PURE__*/ _jsx(IconRotator, {
+            ...iconRotatorProps,
+            rotated: visible,
+            children: getIcon("dropdown", icon)
+        })
+    });
+}
+
+//# sourceMappingURL=AutocompleteDropdownButton.js.map

package/dist/autocomplete/AutocompleteDropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n  extends ButtonProps {\n  /** @defaultValue `AutocompleteProps.menuLabel` */\n  \"aria-label\"?: string;\n  /** @defaultValue `AutocompleteProps.menuLabelledby` */\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 * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: AutocompleteDropdownButtonProps\n): ReactElement {\n  const { id: propId, icon, visible, iconRotatorProps, ...remaining } = props;\n\n  const id = useEnsuredId(propId, \"autocomplete-dropdown\");\n\n  return (\n    <Button\n      {...remaining}\n      id={id}\n      aria-expanded={visible}\n      tabIndex={-1}\n      buttonType=\"icon\"\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","remaining","aria-expanded","tabIndex","buttonType","rotated"],"mappings":"AAAA;;AAMA,SAASA,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,YAAY,QAAQ,qBAAqB;AA8BlD;;;;;CAKC,GACD,OAAO,SAASC,2BACdC,KAAsC;IAEtC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,gBAAgB,EAAE,GAAGC,WAAW,GAAGN;IAEtE,MAAMC,KAAKH,aAAaI,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGW,SAAS;QACbL,IAAIA;QACJM,iBAAeH;QACfI,UAAU,CAAC;QACXC,YAAW;kBAEX,cAAA,KAACb;YAAa,GAAGS,gBAAgB;YAAEK,SAASN;sBACzCP,QAAQ,YAAYM;;;AAI7B"}

package/dist/autocomplete/FilterAutocompleteOptions.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement, type RefObject } from "react";
+import { type EditableHTMLElement } from "../form/utils.js";
+import { type AutocompleteOptionsProps } from "./types.js";
+export interface FilterAutocompleteOptionsProps<T> extends AutocompleteOptionsProps<T> {
+    query: string;
+    comboboxRef: RefObject<EditableHTMLElement>;
+}
+export declare function FilterAutocompleteOptions<T>(props: FilterAutocompleteOptionsProps<T>): ReactElement;

package/dist/autocomplete/FilterAutocompleteOptions.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { triggerManualChangeEvent } from "../form/utils.js";
+import { ListSubheader } from "../list/ListSubheader.js";
+import { MenuItem } from "../menu/MenuItem.js";
+import { defaultAutocompleteExtractor, defaultAutocompleteFilter, defaultAutocompleteOptionProps } from "./defaults.js";
+const noop = ()=>{
+// do nothing
+};
+export function FilterAutocompleteOptions(props) {
+    const { query, filter = defaultAutocompleteFilter, options, extractor = defaultAutocompleteExtractor, whitespace = "keep", comboboxRef, disableFilter, onAutocomplete = noop, getOptionProps = defaultAutocompleteOptionProps, clearOnAutocomplete, noOptionsChildren = /*#__PURE__*/ _jsx(ListSubheader, {
+        children: "No Options"
+    }) } = props;
+    const filtered = useMemo(()=>{
+        if (disableFilter) {
+            return options;
+        }
+        return filter({
+            list: options,
+            query,
+            extractor,
+            whitespace
+        });
+    }, [
+        disableFilter,
+        extractor,
+        filter,
+        options,
+        query,
+        whitespace
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            !filtered.length && noOptionsChildren,
+            filtered.map((option, index)=>{
+                const label = extractor(option);
+                const optionProps = getOptionProps({
+                    index,
+                    option
+                });
+                return /*#__PURE__*/ _jsx(MenuItem, {
+                    role: "option",
+                    ...optionProps,
+                    onClick: (event)=>{
+                        optionProps?.onClick?.(event);
+                        triggerManualChangeEvent(comboboxRef.current, clearOnAutocomplete ? "" : label);
+                        onAutocomplete(option);
+                    },
+                    children: optionProps?.children ?? label
+                }, label);
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FilterAutocompleteOptions.js.map

package/dist/autocomplete/FilterAutocompleteOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/FilterAutocompleteOptions.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo, type ReactElement, type RefObject } from \"react\";\nimport {\n  triggerManualChangeEvent,\n  type EditableHTMLElement,\n} from \"../form/utils.js\";\nimport { ListSubheader } from \"../list/ListSubheader.js\";\nimport { MenuItem } from \"../menu/MenuItem.js\";\nimport {\n  defaultAutocompleteExtractor,\n  defaultAutocompleteFilter,\n  defaultAutocompleteOptionProps,\n} from \"./defaults.js\";\nimport { type AutocompleteOptionsProps } from \"./types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FilterAutocompleteOptionsProps<T>\n  extends AutocompleteOptionsProps<T> {\n  query: string;\n  comboboxRef: RefObject<EditableHTMLElement>;\n}\n\nexport function FilterAutocompleteOptions<T>(\n  props: FilterAutocompleteOptionsProps<T>\n): ReactElement {\n  const {\n    query,\n    filter = defaultAutocompleteFilter,\n    options,\n    extractor = defaultAutocompleteExtractor,\n    whitespace = \"keep\",\n    comboboxRef,\n    disableFilter,\n    onAutocomplete = noop,\n    getOptionProps = defaultAutocompleteOptionProps,\n    clearOnAutocomplete,\n    noOptionsChildren = <ListSubheader>No Options</ListSubheader>,\n  } = props;\n  const filtered = useMemo(() => {\n    if (disableFilter) {\n      return options;\n    }\n\n    return filter({\n      list: options,\n      query,\n      extractor,\n      whitespace,\n    });\n  }, [disableFilter, extractor, filter, options, query, whitespace]);\n\n  return (\n    <>\n      {!filtered.length && noOptionsChildren}\n      {filtered.map((option, index) => {\n        const label = extractor(option);\n        const optionProps = getOptionProps({\n          index,\n          option,\n        });\n\n        return (\n          <MenuItem\n            key={label}\n            role=\"option\"\n            {...optionProps}\n            onClick={(event) => {\n              optionProps?.onClick?.(event);\n\n              triggerManualChangeEvent(\n                comboboxRef.current,\n                clearOnAutocomplete ? \"\" : label\n              );\n              onAutocomplete(option);\n            }}\n          >\n            {optionProps?.children ?? label}\n          </MenuItem>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["useMemo","triggerManualChangeEvent","ListSubheader","MenuItem","defaultAutocompleteExtractor","defaultAutocompleteFilter","defaultAutocompleteOptionProps","noop","FilterAutocompleteOptions","props","query","filter","options","extractor","whitespace","comboboxRef","disableFilter","onAutocomplete","getOptionProps","clearOnAutocomplete","noOptionsChildren","filtered","list","length","map","option","index","label","optionProps","role","onClick","event","current","children"],"mappings":"AAAA;;AACA,SAASA,OAAO,QAA2C,QAAQ;AACnE,SACEC,wBAAwB,QAEnB,mBAAmB;AAC1B,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SACEC,4BAA4B,EAC5BC,yBAAyB,EACzBC,8BAA8B,QACzB,gBAAgB;AAGvB,MAAMC,OAAO;AACX,aAAa;AACf;AAQA,OAAO,SAASC,0BACdC,KAAwC;IAExC,MAAM,EACJC,KAAK,EACLC,SAASN,yBAAyB,EAClCO,OAAO,EACPC,YAAYT,4BAA4B,EACxCU,aAAa,MAAM,EACnBC,WAAW,EACXC,aAAa,EACbC,iBAAiBV,IAAI,EACrBW,iBAAiBZ,8BAA8B,EAC/Ca,mBAAmB,EACnBC,kCAAoB,KAAClB;kBAAc;MAA0B,EAC9D,GAAGO;IACJ,MAAMY,WAAWrB,QAAQ;QACvB,IAAIgB,eAAe;YACjB,OAAOJ;QACT;QAEA,OAAOD,OAAO;YACZW,MAAMV;YACNF;YACAG;YACAC;QACF;IACF,GAAG;QAACE;QAAeH;QAAWF;QAAQC;QAASF;QAAOI;KAAW;IAEjE,qBACE;;YACG,CAACO,SAASE,MAAM,IAAIH;YACpBC,SAASG,GAAG,CAAC,CAACC,QAAQC;gBACrB,MAAMC,QAAQd,UAAUY;gBACxB,MAAMG,cAAcV,eAAe;oBACjCQ;oBACAD;gBACF;gBAEA,qBACE,KAACtB;oBAEC0B,MAAK;oBACJ,GAAGD,WAAW;oBACfE,SAAS,CAACC;wBACRH,aAAaE,UAAUC;wBAEvB9B,yBACEc,YAAYiB,OAAO,EACnBb,sBAAsB,KAAKQ;wBAE7BV,eAAeQ;oBACjB;8BAECG,aAAaK,YAAYN;mBAbrBA;YAgBX;;;AAGN"}

package/dist/autocomplete/_autocomplete.scss

@@ -0,0 +1,75 @@
+@use "sass:list";
+@use "sass:map";
+@use "../utils";
+@use "../button/button";
+@use "../form/form";
+@use "../progress/progress";
+
+$disable-everything: false !default;
+$disable-dropdown-button: false !default;
+$disable-circular-progress: false !default;
+
+$button-size: button.$icon-small-size !default;
+$circular-progress-size: progress.$circular-dense-size !default;
+
+$dropdown-button-calc: calc(button.get-var(icon-font-size) * 2) !default;
+$dropdown-button-only-calc: calc(
+  form.get-var(addon-spacing) + $dropdown-button-calc
+) !default;
+$circular-progress-only-calc: calc(
+  form.get-var(addon-spacing) + progress.get-var(circular-size)
+) !default;
+$circular-progress-and-dropdown-button-calc: calc(
+  calc(form.get-var(addon-spacing) * 2) + progress.get-var(circular-size) +
+    $dropdown-button-calc
+) !default;
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(autocomplete, $disable-layer) {
+      .rmd-autocomplete {
+        @if not $disable-dropdown-button {
+          @include button.set-var(icon-font-size, $button-size);
+        }
+        @if not $disable-circular-progress {
+          @include progress.set-var(circular-size, $circular-progress-size);
+        }
+
+        @if not $disable-dropdown-button {
+          // right-addon-1: dropdown button
+          &--ra1 {
+            @include form.set-var(
+              text-field-padding-right,
+              $dropdown-button-only-calc
+            );
+          }
+
+          @if not $disable-circular-progress {
+            // right-addon-2: circular progress and dropdown button
+            &--ra2 {
+              @include form.set-var(
+                text-field-padding-right,
+                $circular-progress-and-dropdown-button-calc
+              );
+            }
+          }
+        }
+
+        @if not $disable-circular-progress {
+          // right-addon-3: circular progress
+          &--ra3 {
+            @include form.set-var(
+              text-field-padding-right,
+              $circular-progress-only-calc
+            );
+          }
+        }
+
+        &__right-addon {
+          @include utils.auto-rtl(right, 0);
+          @include utils.auto-rtl(padding-left, form.get-var(addon-spacing), 0);
+        }
+      }
+    }
+  }
+}

package/dist/autocomplete/autocompleteStyles.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteClassNameOptions {
+    className?: string;
+    loading?: boolean;
+    disableDropdownButton?: boolean;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocomplete(options?: AutocompleteClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteRightAddonClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocompleteRightAddon(options?: AutocompleteRightAddonClassNameOptions): string;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteClearButtonClassNameOptions {
+    className?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function autocompleteClearButton(options?: AutocompleteClearButtonClassNameOptions): string;

package/dist/autocomplete/autocompleteStyles.js

@@ -0,0 +1,34 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-autocomplete");
+/**
+ * @since 6.0.0
+ */ export function autocomplete(options = {}) {
+    const { className, loading, disableDropdownButton } = options;
+    return cnb(styles({
+        // all other configurations must be set manually
+        // right-addon-1: dropdown button only
+        ra1: !loading && !disableDropdownButton,
+        // right-addon-2: circular progress and dropdown button
+        ra2: loading && !disableDropdownButton,
+        // right-addon-3: circular progress only
+        ra3: loading && disableDropdownButton
+    }), className);
+}
+/**
+ * @since 6.0.0
+ */ export function autocompleteRightAddon(options = {}) {
+    const { className } = options;
+    return cnb(styles("right-addon"), cssUtils({
+        backgroundColor: "current-color"
+    }), className);
+}
+/**
+ * @since 6.0.0
+ */ export function autocompleteClearButton(options = {}) {
+    const { className } = options;
+    return cnb(styles("clear-button"), className);
+}
+
+//# sourceMappingURL=autocompleteStyles.js.map

package/dist/autocomplete/autocompleteStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/autocompleteStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-autocomplete\");\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClassNameOptions {\n  className?: string;\n\n  loading?: boolean;\n  disableDropdownButton?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocomplete(\n  options: AutocompleteClassNameOptions = {}\n): string {\n  const { className, loading, disableDropdownButton } = options;\n\n  return cnb(\n    styles({\n      // all other configurations must be set manually\n\n      // right-addon-1: dropdown button only\n      ra1: !loading && !disableDropdownButton,\n      // right-addon-2: circular progress and dropdown button\n      ra2: loading && !disableDropdownButton,\n      // right-addon-3: circular progress only\n      ra3: loading && disableDropdownButton,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteRightAddonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteRightAddon(\n  options: AutocompleteRightAddonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    styles(\"right-addon\"),\n    cssUtils({ backgroundColor: \"current-color\" }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteClearButton(\n  options: AutocompleteClearButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"clear-button\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","autocomplete","options","className","loading","disableDropdownButton","ra1","ra2","ra3","autocompleteRightAddon","backgroundColor","autocompleteClearButton"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,qBAAqB,EAAE,GAAGH;IAEtD,OAAOL,IACLG,OAAO;QACL,gDAAgD;QAEhD,sCAAsC;QACtCM,KAAK,CAACF,WAAW,CAACC;QAClB,uDAAuD;QACvDE,KAAKH,WAAW,CAACC;QACjB,wCAAwC;QACxCG,KAAKJ,WAAWC;IAClB,IACAF;AAEJ;AASA;;CAEC,GACD,OAAO,SAASM,uBACdP,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,OAAO,gBACPF,SAAS;QAAEY,iBAAiB;IAAgB,IAC5CP;AAEJ;AASA;;CAEC,GACD,OAAO,SAASQ,wBACdT,UAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,iBAAiBG;AACrC"}

package/dist/autocomplete/defaults.d.ts

@@ -0,0 +1,21 @@
+import { type MenuItemProps } from "../menu/MenuItem.js";
+import { type AutocompleteFilterOptions } from "./types.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare const defaultAutocompleteExtractor: <T>(item: T) => string;
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export declare const defaultAutocompleteOptionProps: <T>(options: {
+    option: T;
+}) => Partial<MenuItemProps> | undefined;
+/**
+ * This is just the {@link caseInsensitiveSearch} but requires
+ * the options to start with the current query.
+ *
+ * @since 6.0.0
+ */
+export declare function defaultAutocompleteFilter<T>(options: AutocompleteFilterOptions<T>): readonly T[];

package/dist/autocomplete/defaults.js

@@ -0,0 +1,52 @@
+import { caseInsensitiveSearch } from "../searching/caseInsensitive.js";
+import { defaultExtractor } from "../searching/utils.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */ export const defaultAutocompleteExtractor = (item)=>{
+    if (item && typeof item === "object" && "label" in item && typeof item.label === "string") {
+        return item.label;
+    }
+    return defaultExtractor("Autocomplete")(item);
+};
+/**
+ * @since 6.0.0
+ * @internal
+ */ const isProbablyMenuItemProps = (item)=>!!item && typeof item === "object";
+/**
+ * @since 6.0.0
+ * @internal
+ */ export const defaultAutocompleteOptionProps = (options)=>{
+    const { option } = options;
+    if (isProbablyMenuItemProps(option)) {
+        const { leftAddon, rightAddon, className, disabled, height, textProps, textClassName, primaryText, secondaryText, secondaryTextClassName, multiline, disableTextChildren } = option;
+        return {
+            leftAddon,
+            rightAddon,
+            className,
+            disabled,
+            height,
+            textProps,
+            textClassName,
+            primaryText,
+            secondaryText,
+            secondaryTextClassName,
+            multiline,
+            disableTextChildren
+        };
+    }
+    return;
+};
+/**
+ * This is just the {@link caseInsensitiveSearch} but requires
+ * the options to start with the current query.
+ *
+ * @since 6.0.0
+ */ export function defaultAutocompleteFilter(options) {
+    return caseInsensitiveSearch({
+        ...options,
+        startsWith: true
+    });
+}
+
+//# sourceMappingURL=defaults.js.map

package/dist/autocomplete/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/defaults.ts"],"sourcesContent":["import { type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { caseInsensitiveSearch } from \"../searching/caseInsensitive.js\";\nimport { defaultExtractor } from \"../searching/utils.js\";\nimport { type AutocompleteFilterOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultAutocompleteExtractor = <T>(item: T): string => {\n  if (\n    item &&\n    typeof item === \"object\" &&\n    \"label\" in item &&\n    typeof item.label === \"string\"\n  ) {\n    return item.label;\n  }\n\n  return defaultExtractor(\"Autocomplete\")(item);\n};\n\n/**\n * @since 6.0.0\n * @internal\n */\nconst isProbablyMenuItemProps = (\n  item: unknown\n): item is Partial<MenuItemProps> => !!item && typeof item === \"object\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultAutocompleteOptionProps = <T>(options: {\n  option: T;\n}): Partial<MenuItemProps> | undefined => {\n  const { option } = options;\n  if (isProbablyMenuItemProps(option)) {\n    const {\n      leftAddon,\n      rightAddon,\n      className,\n      disabled,\n      height,\n      textProps,\n      textClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextClassName,\n      multiline,\n      disableTextChildren,\n    } = option;\n\n    return {\n      leftAddon,\n      rightAddon,\n      className,\n      disabled,\n      height,\n      textProps,\n      textClassName,\n      primaryText,\n      secondaryText,\n      secondaryTextClassName,\n      multiline,\n      disableTextChildren,\n    };\n  }\n  return;\n};\n\n/**\n * This is just the {@link caseInsensitiveSearch} but requires\n * the options to start with the current query.\n *\n * @since 6.0.0\n */\nexport function defaultAutocompleteFilter<T>(\n  options: AutocompleteFilterOptions<T>\n): readonly T[] {\n  return caseInsensitiveSearch({ ...options, startsWith: true });\n}\n"],"names":["caseInsensitiveSearch","defaultExtractor","defaultAutocompleteExtractor","item","label","isProbablyMenuItemProps","defaultAutocompleteOptionProps","options","option","leftAddon","rightAddon","className","disabled","height","textProps","textClassName","primaryText","secondaryText","secondaryTextClassName","multiline","disableTextChildren","defaultAutocompleteFilter","startsWith"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,gBAAgB,QAAQ,wBAAwB;AAGzD;;;CAGC,GACD,OAAO,MAAMC,+BAA+B,CAAIC;IAC9C,IACEA,QACA,OAAOA,SAAS,YAChB,WAAWA,QACX,OAAOA,KAAKC,KAAK,KAAK,UACtB;QACA,OAAOD,KAAKC,KAAK;IACnB;IAEA,OAAOH,iBAAiB,gBAAgBE;AAC1C,EAAE;AAEF;;;CAGC,GACD,MAAME,0BAA0B,CAC9BF,OACmC,CAAC,CAACA,QAAQ,OAAOA,SAAS;AAE/D;;;CAGC,GACD,OAAO,MAAMG,iCAAiC,CAAIC;IAGhD,MAAM,EAAEC,MAAM,EAAE,GAAGD;IACnB,IAAIF,wBAAwBG,SAAS;QACnC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,aAAa,EACbC,sBAAsB,EACtBC,SAAS,EACTC,mBAAmB,EACpB,GAAGZ;QAEJ,OAAO;YACLC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;IACA;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,SAASC,0BACdd,OAAqC;IAErC,OAAOP,sBAAsB;QAAE,GAAGO,OAAO;QAAEe,YAAY;IAAK;AAC9D"}

package/dist/autocomplete/types.d.ts

@@ -0,0 +1,103 @@
+import { type ReactNode } from "react";
+import { type MenuItemProps } from "../menu/MenuItem.jsx";
+import { type BaseSearchOptions, type WhitespaceFilter } from "../searching/types.js";
+import { type RequireAtLeastOne, type TextExtractor } from "../types.js";
+/**
+ * @since 6.0.0
+ */
+export type AutocompleteMenuLabel<T extends {
+    menuLabel?: string;
+    menuLabelledBy?: string;
+}> = RequireAtLeastOne<T, "menuLabel" | "menuLabelledBy">;
+/**
+ * @since 6.0.0
+ */
+export type AutocompleteFilterOptions<T> = Pick<Required<BaseSearchOptions<T>>, "list" | "query" | "extractor" | "whitespace">;
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteGetOptionPropsOptions<T> {
+    index: number;
+    option: T;
+}
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteOptionsProps<T> {
+    /**
+     * This list of options to display and will be filtered based on the current
+     * value in the text box unless {@link disableFilter} is `true`.
+     *
+     * When this is not a list of strings or a list of objects with a
+     * `{ label: string }`, the {@link extractor} is required to pull a searchable
+     * string from each option.
+     */
+    options: readonly T[];
+    /**
+     * This controls how the {@link options} are filtered based on the current
+     * value in the text box.
+     *
+     * @example Fuzzy Search
+     * ```tsx
+     * import { fuzzySearch } from "@react-md/core/searching/fuzzy";
+     *
+     * <Autocomplete
+     *   {...props}
+     *   filter={fuzzySearch}
+     * />
+     * ```
+     *
+     * @defaultValue `caseInsensitiveSearch`
+     */
+    filter?(options: AutocompleteFilterOptions<T>): readonly T[];
+    /**
+     * @example
+     * ```tsx
+     * <Autocomplete
+     *   options={[{ children: "Apple" }, { children = "Banana" }]}
+     *   extractor={(option) => option.children}
+     *   {...props}
+     * />
+     * ```
+     */
+    extractor?: TextExtractor<T>;
+    /**
+     * This can be used to add additional props to each option.
+     *
+     * @example Simple Example
+     * ```tsx
+     * getOptionProps={({ option }) => {
+     *   return {
+     *     disabled: option === "",
+     *     className: cnb(option === "a" && styles.blue),
+     *     leftAddon: option === value && <CheckIcon />,
+     *   };
+     * }}
+     * ```
+     */
+    getOptionProps?(options: AutocompleteGetOptionPropsOptions<T>): Partial<MenuItemProps> | undefined;
+    /**
+     * The children to display when there are no {@link options} due to the
+     * current text box value.
+     *
+     * @defaultValue `<ListSubheader>No options</ListSubheader`
+     */
+    noOptionsChildren?: ReactNode;
+    /**
+     * This will be called whenever one of the options are selected or reset.
+     */
+    onAutocomplete?(option: T | null): void;
+    /**
+     * @defaultValue `false`
+     */
+    clearOnAutocomplete?: boolean;
+    /**
+     * Set this to `true` to disable the built-in filtering of the
+     * {@link options}. This will always be `true` if `aria-autocomplete="none"`.
+     *
+     * @defaultValue `false`
+     */
+    disableFilter?: boolean;
+    /** @defaultValue `"keep"` */
+    whitespace?: WhitespaceFilter;
+}

package/dist/autocomplete/types.js

@@ -0,0 +1,5 @@
+/**
+ * @since 6.0.0
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/dist/autocomplete/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { type MenuItemProps } from \"../menu/MenuItem.jsx\";\nimport {\n  type BaseSearchOptions,\n  type WhitespaceFilter,\n} from \"../searching/types.js\";\nimport { type RequireAtLeastOne, type TextExtractor } from \"../types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMenuLabel<\n  T extends { menuLabel?: string; menuLabelledBy?: string },\n> = RequireAtLeastOne<T, \"menuLabel\" | \"menuLabelledBy\">;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<T> = Pick<\n  Required<BaseSearchOptions<T>>,\n  \"list\" | \"query\" | \"extractor\" | \"whitespace\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<T> {\n  index: number;\n  option: T;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptionsProps<T> {\n  /**\n   * This list of options to display and will be filtered based on the current\n   * value in the text box unless {@link disableFilter} is `true`.\n   *\n   * When this is not a list of strings or a list of objects with a\n   * `{ label: string }`, the {@link extractor} is required to pull a searchable\n   * string from each option.\n   */\n  options: readonly T[];\n\n  /**\n   * This controls how the {@link options} are filtered based on the current\n   * value in the text box.\n   *\n   * @example Fuzzy Search\n   * ```tsx\n   * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n   *\n   * <Autocomplete\n   *   {...props}\n   *   filter={fuzzySearch}\n   * />\n   * ```\n   *\n   * @defaultValue `caseInsensitiveSearch`\n   */\n  filter?(options: AutocompleteFilterOptions<T>): readonly T[];\n\n  /**\n   * @example\n   * ```tsx\n   * <Autocomplete\n   *   options={[{ children: \"Apple\" }, { children = \"Banana\" }]}\n   *   extractor={(option) => option.children}\n   *   {...props}\n   * />\n   * ```\n   */\n  extractor?: TextExtractor<T>;\n\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  getOptionProps?(\n    options: AutocompleteGetOptionPropsOptions<T>\n  ): Partial<MenuItemProps> | undefined;\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   * This will be called whenever one of the options are selected or reset.\n   */\n  onAutocomplete?(option: T | null): void;\n\n  /**\n   * @defaultValue `false`\n   */\n  clearOnAutocomplete?: boolean;\n\n  /**\n   * Set this to `true` to disable the built-in filtering of the\n   * {@link options}. This will always be `true` if `aria-autocomplete=\"none\"`.\n   *\n   * @defaultValue `false`\n   */\n  disableFilter?: boolean;\n\n  /** @defaultValue `\"keep\"` */\n  whitespace?: WhitespaceFilter;\n}\n"],"names":[],"mappings":"AA+BA;;CAEC,GACD,WAuFC"}

package/dist/avatar/Avatar.d.ts

@@ -82,7 +82,6 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
  * }
  * ```
  *
- * @since 6.0.0 `aria-hidden` is set to `true` by default and removed
- * the `role="presentation"`.
+ * @since 6.0.0 `aria-hidden` is set to `true` by default.
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/avatar/Avatar.js

@@ -19,8 +19,7 @@ import { avatar, avatarImage } from "./styles.js";
  * }
  * ```
  *
- * @since 6.0.0 `aria-hidden` is set to `true` by default and removed
- * the `role="presentation"`.
+ * @since 6.0.0 `aria-hidden` is set to `true` by default.
  */ export const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
     const { "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
     let img;

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } 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, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\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\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;CAoBC,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,QAAQ,EAAE,EACVC,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  forwardRef,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } 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, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\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\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\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,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;CAmBC,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,QAAQ,EAAE,EACVC,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/_avatar.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "sass:math";
 @use "../utils";
@@ -139,14 +140,14 @@ $variables: (
         }
 
         @each $name, $values in $colors {
-          @if length($values) != 2 {
+          @if list.length($values) != 2 {
             @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
           }
 
           @include custom-color(
             "&--#{$name}",
-            nth($values, 2),
-            nth($values, 1),
+            list.nth($values, 2),
+            list.nth($values, 1),
             true
           );
         }

package/dist/avatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\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?: string;\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;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\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\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?: string;\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;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cssUtils, type BackgroundColor } 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\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\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\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\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 type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\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 * @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":["cnb","forwardRef","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined","Badge","props","ref","children","remaining","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,QAAQ,QAA8B,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAenB,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOR,IACLI,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMM,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAET,SAAS,EAAEC,KAAK,EAAE,GAAGS,WAAW,GAAGH;IACrD,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAEF,KAAKA;QAAKR,WAAWF,MAAM;YAAEG;YAAOD;QAAU;kBAChES;;AAGP,GACA"}
+{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cssUtils, type BackgroundColor } 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\nexport interface BadgeClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n}\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\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @defaultValue `\"\"greyscale` */\n  theme?: BadgeTheme;\n\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\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 type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\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 * @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":["cnb","forwardRef","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined","Badge","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,QAAQ,QAA8B,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAenB,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOR,IACLI,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMM,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAET,SAAS,EAAEC,KAAK,EAAE,GAAGS,WAAW,GAAGH;IACrD,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAEF,KAAKA;QAAKR,WAAWF,MAAM;YAAEG;YAAOD;QAAU;kBAChES;;AAGP,GACA"}

package/dist/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * **Server Component**\n *\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      className,\n      children,\n      align,\n      grid = false,\n      style: propStyle,\n      gridName = \"\",\n      justify,\n      stacked = false,\n      reversed = false,\n      gridColumns = \"fit\",\n      fullWidth = false,\n      disableWrap = false,\n      disablePadding = false,\n      ...remaining\n    } = props;\n\n    let style = propStyle;\n    if (typeof gridColumns === \"number\") {\n      style = {\n        ...propStyle,\n        \"--rmd-box-columns\": gridColumns,\n      };\n    }\n\n    return (\n      <div\n        {...remaining}\n        style={style}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          align,\n          justify,\n          reversed,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","className","children","align","grid","style","propStyle","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableWrap","disablePadding","remaining","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,WAAW,EAAE,EACbC,OAAO,EACPC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGhB;IAEJ,IAAIM,QAAQC;IACZ,IAAI,OAAOK,gBAAgB,UAAU;QACnCN,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBK;QACvB;IACF;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbV,OAAOA;QACPL,KAAKA;QACLC,WAAWJ,IAAI;YACbI;YACAW;YACAR;YACAK;YACAF;YACAI;YACAR;YACAK;YACAE;YACAG;YACAC;QACF;kBAECZ;;AAGP,GACA"}
+{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * **Server Component**\n *\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example Default Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: flex;\n *   flex-wrap: wrap;\n *   gap: 1rem;\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Default Grid Styles\n * ```scss\n * .box {\n *   align-items: center;\n *   display: grid;\n *   grid-gap: 1rem;\n *   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n *   padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid>\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @example Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n *   $box-grids: (\n *     small: (\n *       min: 5rem,\n *     ),\n *     medium: (\n *       min: 7rem,\n *       padding: 2rem,\n *       gap: 0.5rem,\n *     ),\n *   )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n *   return (\n *     <Box grid gridName=\"medium\">\n *       <div>Thing 1</div>\n *       <div>Thing 2</div>\n *       <div>Thing 3</div>\n *       <div>Thing 4</div>\n *       <div>Thing 5</div>\n *     </Box>\n *   ):\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      className,\n      children,\n      align,\n      grid = false,\n      style: propStyle,\n      gridName = \"\",\n      justify,\n      stacked = false,\n      reversed = false,\n      gridColumns = \"fit\",\n      fullWidth = false,\n      disableWrap = false,\n      disablePadding = false,\n      ...remaining\n    } = props;\n\n    let style = propStyle;\n    if (typeof gridColumns === \"number\") {\n      style = {\n        ...propStyle,\n        \"--rmd-box-columns\": gridColumns,\n      };\n    }\n\n    return (\n      <div\n        {...remaining}\n        style={style}\n        ref={ref}\n        className={box({\n          className,\n          fullWidth,\n          grid,\n          stacked,\n          gridName,\n          gridColumns,\n          align,\n          justify,\n          reversed,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","box","Box","props","ref","className","children","align","grid","style","propStyle","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,WAAW,EAAE,EACbC,OAAO,EACPC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGhB;IAEJ,IAAIM,QAAQC;IACZ,IAAI,OAAOK,gBAAgB,UAAU;QACnCN,QAAQ;YACN,GAAGC,SAAS;YACZ,qBAAqBK;QACvB;IACF;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbV,OAAOA;QACPL,KAAKA;QACLC,WAAWJ,IAAI;YACbI;YACAW;YACAR;YACAK;YACAF;YACAI;YACAR;YACAK;YACAE;YACAG;YACAC;QACF;kBAECZ;;AAGP,GACA"}