@react-md/core 6.0.1 → 6.1.0

package/dist/autocomplete/AutocompleteClearButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteClearButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteClearButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteClearButtonProps } from \"./types.js\";\n\n/**\n * An internal component used for to clear the value from the `Autocomplete`.\n *\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @internal\n * @since 6.0.0\n */\nexport function AutocompleteClearButton(\n  props: AutocompleteClearButtonProps\n): ReactElement {\n  const {\n    id: propId,\n    className,\n    children,\n    buttonType = \"icon\",\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = buttonType === \"text\" || ariaLabelledBy\n      ? undefined\n      : \"Clear\",\n    visibility,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"autocomplete-clear\");\n\n  return (\n    <Button\n      {...remaining}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n      className={autocompleteClearButton({ className, visibility })}\n      tabIndex={-1}\n      buttonType={buttonType}\n    >\n      {getIcon(\"clear\", children)}\n    </Button>\n  );\n}\n"],"names":["Button","getIcon","useEnsuredId","autocompleteClearButton","AutocompleteClearButton","props","id","propId","className","children","buttonType","ariaLabelledBy","ariaLabel","undefined","visibility","remaining","aria-label","aria-labelledby","tabIndex"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,KAAmC;IAEnC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,MAAM,EACnB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,eAAe,UAAUC,iBAC/CE,YACA,OAAO,EACXC,UAAU,EACV,GAAGC,WACJ,GAAGV;IACJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGe,SAAS;QACbC,cAAYJ;QACZK,mBAAiBN;QACjBL,IAAIA;QACJE,WAAWL,wBAAwB;YAAEK;YAAWM;QAAW;QAC3DI,UAAU,CAAC;QACXR,YAAYA;kBAEXT,QAAQ,SAASQ;;AAGxB"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteClearButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteClearButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteClearButtonProps } from \"./types.js\";\n\n/**\n * An internal component used for to clear the value from the `Autocomplete`.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @internal\n * @since 6.0.0\n */\nexport function AutocompleteClearButton(\n  props: AutocompleteClearButtonProps\n): ReactElement {\n  const {\n    id: propId,\n    className,\n    children,\n    buttonType = \"icon\",\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = buttonType === \"text\" || ariaLabelledBy\n      ? undefined\n      : \"Clear\",\n    visibility,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"autocomplete-clear\");\n\n  return (\n    <Button\n      {...remaining}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n      className={autocompleteClearButton({ className, visibility })}\n      tabIndex={-1}\n      buttonType={buttonType}\n    >\n      {getIcon(\"clear\", children)}\n    </Button>\n  );\n}\n"],"names":["Button","getIcon","useEnsuredId","autocompleteClearButton","AutocompleteClearButton","props","id","propId","className","children","buttonType","ariaLabelledBy","ariaLabel","undefined","visibility","remaining","aria-label","aria-labelledby","tabIndex"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,KAAmC;IAEnC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,MAAM,EACnB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,eAAe,UAAUC,iBAC/CE,YACA,OAAO,EACXC,UAAU,EACV,GAAGC,WACJ,GAAGV;IACJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGe,SAAS;QACbC,cAAYJ;QACZK,mBAAiBN;QACjBL,IAAIA;QACJE,WAAWL,wBAAwB;YAAEK;YAAWM;QAAW;QAC3DI,UAAU,CAAC;QACXR,YAAYA;kBAEXT,QAAQ,SAASQ;;AAGxB"}

package/dist/autocomplete/AutocompleteDropdownButton.d.ts

@@ -5,7 +5,7 @@ import { type AutocompleteDropdownButtonProps } from "./types.js";
  * This is a simple `Button` wrapper to be used as a dropdown button within the
  * `Autocomplete`.
  *
- * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
+ * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export declare function AutocompleteDropdownButton(props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>): ReactElement;

package/dist/autocomplete/AutocompleteDropdownButton.js

@@ -9,7 +9,7 @@ import { autocompleteDropdownButton } from "./autocompleteStyles.js";
  * This is a simple `Button` wrapper to be used as a dropdown button within the
  * `Autocomplete`.
  *
- * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
+ * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */ export function AutocompleteDropdownButton(props) {
     const { id: propId, icon, visible, iconRotatorProps, className, ...remaining } = props;

package/dist/autocomplete/AutocompleteDropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteDropdownButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteDropdownButtonProps } from \"./types.js\";\n\n/**\n * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>\n): ReactElement {\n  const {\n    id: propId,\n    icon,\n    visible,\n    iconRotatorProps,\n    className,\n    ...remaining\n  } = 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      className={autocompleteDropdownButton({ className })}\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","autocompleteDropdownButton","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","className","remaining","aria-expanded","tabIndex","buttonType","rotated"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,0BAA0B,QAAQ,0BAA0B;AAGrE;;;;;;CAMC,GACD,OAAO,SAASC,2BACdC,KAA4D;IAE5D,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,OAAO,EACPC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGa,SAAS;QACbN,IAAIA;QACJO,iBAAeJ;QACfK,UAAU,CAAC;QACXC,YAAW;QACXJ,WAAWR,2BAA2B;YAAEQ;QAAU;kBAElD,cAAA,KAACX;YAAa,GAAGU,gBAAgB;YAAEM,SAASP;sBACzCR,QAAQ,YAAYO;;;AAI7B"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteDropdownButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteDropdownButtonProps } from \"./types.js\";\n\n/**\n * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>\n): ReactElement {\n  const {\n    id: propId,\n    icon,\n    visible,\n    iconRotatorProps,\n    className,\n    ...remaining\n  } = 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      className={autocompleteDropdownButton({ className })}\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","autocompleteDropdownButton","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","className","remaining","aria-expanded","tabIndex","buttonType","rotated"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,0BAA0B,QAAQ,0BAA0B;AAGrE;;;;;;CAMC,GACD,OAAO,SAASC,2BACdC,KAA4D;IAE5D,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,OAAO,EACPC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGa,SAAS;QACbN,IAAIA;QACJO,iBAAeJ;QACfK,UAAU,CAAC;QACXC,YAAW;QACXJ,WAAWR,2BAA2B;YAAEQ;QAAU;kBAElD,cAAA,KAACX;YAAa,GAAGU,gBAAgB;YAAEM,SAASP;sBACzCR,QAAQ,YAAYO;;;AAI7B"}

package/dist/autocomplete/_autocomplete.scss

@@ -31,7 +31,7 @@ $disable-clear-button: false !default;
 /// `disableClearButton` was enabled on the `Autocomplete`.
 ///
 /// @type Boolean
-$disable-clear-button-opacity-query: false !default;
+$disable-clear-button-display-none-query: false !default;
 
 /// Set to `true` to disable the dropdown button styles
 /// @type Boolean
@@ -130,7 +130,7 @@ $_clear-button-hover-selector: "&:where(:not(:hover):not(:focus-within)) :where(
 // showing the clear button if the input has a value (or query)
 $_clear-button-valued-selector: "&:where(:has(:placeholder-shown)) :where(#{$_clear-button-selector + "--query"})";
 
-$_clear-button-opacity-selector: $_clear-button-hover-selector + ", "
+$_clear-button-display-none-selector: $_clear-button-hover-selector + ", "
   $_clear-button-valued-selector;
 
 /// The available configurable css variables and mostly used internally for the
@@ -340,9 +340,12 @@ $variables: (
           }
         }
 
-        @if not $disable-clear-button {
-          #{$_clear-button-opacity-selector} {
-            opacity: 0;
+        @if not
+          $disable-clear-button and not
+          $disable-clear-button-display-none-query
+        {
+          #{$_clear-button-display-none-selector} {
+            display: none;
           }
         }
 

package/dist/autocomplete/useAutocomplete.d.ts

@@ -3,14 +3,14 @@ import { type AutocompleteImplementation, type AutocompleteMultiSelectImplementa
 /**
  * This is the single select autocomplete implementation.
  *
- * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
+ * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export declare function useAutocomplete<Option extends AutocompleteOption, ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: AutocompleteSingleSelectOptions<Option, ComboboxEl, PopupEl>): AutocompleteSingleSelectImplementation<Option, ComboboxEl, PopupEl>;
 /**
  * This is the multiselect autocomplete implementation.
  *
- * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
+ * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export declare function useAutocomplete<Option extends AutocompleteOption, ComboboxEl extends EditableHTMLElement = HTMLInputElement, PopupEl extends HTMLElement = HTMLElement>(options: AutocompleteMultiSelectOptions<Option, ComboboxEl, PopupEl>): AutocompleteMultiSelectImplementation<Option, ComboboxEl, PopupEl>;
@@ -18,7 +18,7 @@ export declare function useAutocomplete<Option extends AutocompleteOption, Combo
  * This is an internal override implementation where the types are less strict
  * so it can be used with the `Autocomplete` component.
  *
- * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
+ * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  * @internal
  */

package/dist/autocomplete/useAutocomplete.js

@@ -12,7 +12,7 @@ const noop = ()=>{
 // do nothing
 };
 /**
- * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
+ * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  * @internal
  */ export function useAutocomplete(options) {
@@ -38,6 +38,7 @@ const noop = ()=>{
     }
     const disableCloseOnSelect = propDisableCloseOnSelect ?? (multiselect && checkboxes);
     const [query, setQuery] = useEnsuredState({
+        name: "query",
         value: propQuery,
         setValue: propSetQuery,
         defaultValue: getDefaultQuery({

package/dist/autocomplete/useAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/useAutocomplete.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef } from \"react\";\n\nimport { useEditableCombobox } from \"../form/useEditableCombobox.js\";\nimport {\n  type EditableHTMLElement,\n  triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  defaultAutocompleteExtractor,\n  defaultAutocompleteFilter,\n  defaultAutocompleteGetOptionProps,\n  noopAutocompleteFilter,\n} from \"./defaults.js\";\nimport {\n  type AutocompleteImplementation,\n  type AutocompleteMultiSelectImplementation,\n  type AutocompleteMultiSelectOptions,\n  type AutocompleteOption,\n  type AutocompleteOptions,\n  type AutocompleteSingleSelectImplementation,\n  type AutocompleteSingleSelectOptions,\n} from \"./types.js\";\nimport {\n  enforceSelectedValue,\n  getDefaultQuery,\n  getDefaultValue,\n  isMultipleValues,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is the single select autocomplete implementation.\n *\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteSingleSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteSingleSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is the multiselect autocomplete implementation.\n *\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteMultiSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteMultiSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is an internal override implementation where the types are less strict\n * so it can be used with the `Autocomplete` component.\n *\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl> {\n  const {\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    onValueChange = noop,\n    query: propQuery,\n    setQuery: propSetQuery,\n    defaultQuery,\n    options: values,\n    getOptionLabel = defaultAutocompleteExtractor,\n    getOptionProps = defaultAutocompleteGetOptionProps,\n    onBlur = noop,\n    onChange = noop,\n    onOpen = noop,\n    filter = defaultAutocompleteFilter,\n    filterSelected,\n    allowAnyValue = filter === noopAutocompleteFilter,\n    multiselect: propMultiselect,\n    checkboxes,\n    selectedIcon: propSelectedIcon,\n    unselectedIcon: propUnselectedIcon,\n    selectedIconAfter,\n    disableSelectedIcon: propDisableSelectedIcon,\n    updateQueryOnSelect: propUpdateQueryOnSelect,\n    disableCloseOnSelect: propDisableCloseOnSelect,\n    ...comboboxOptions\n  } = options;\n\n  const mode = useUserInteractionMode();\n  const [value, setValueState] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getDefaultValue({\n      query: propQuery,\n      filter,\n      multiselect: propMultiselect,\n      defaultQuery,\n      defaultValue,\n      options: values,\n      getOptionLabel,\n    }),\n  });\n  const multiselect =\n    propMultiselect ??\n    (!!value && typeof value === \"object\" && \"length\" in value);\n  let updateQueryOnSelect = propUpdateQueryOnSelect;\n  if (typeof propUpdateQueryOnSelect === \"undefined\") {\n    updateQueryOnSelect = multiselect ? \"clear\" : \"selected\";\n  }\n\n  const disableCloseOnSelect =\n    propDisableCloseOnSelect ?? (multiselect && checkboxes);\n\n  const [query, setQuery] = useEnsuredState({\n    value: propQuery,\n    setValue: propSetQuery,\n    defaultValue: getDefaultQuery({\n      value,\n      getOptionLabel,\n      defaultQuery,\n    }),\n  });\n  const setValue = useCallback(\n    (value: Option | null | readonly Option[]) => {\n      onValueChange(value);\n      setValueState(value);\n    },\n    [onValueChange, setValueState]\n  );\n\n  const combobox = useEditableCombobox<ComboboxEl, PopupEl>({\n    ...comboboxOptions,\n    multiselect,\n  });\n  const {\n    visible,\n    setVisible,\n    popupRef,\n    comboboxRef,\n    comboboxProps,\n    getMenuProps,\n  } = combobox;\n\n  // These refs are used to make it so that the options are not filtered until\n  // the user types a new query while the listbox is visible. The filtered\n  // options will be \"cached\" while:\n  // - the listbox is closing\n  // - the listbox is opening and:\n  //   - the user has not typed at least one letter\n  //   - the options have not changed\n  const entered = useRef(visible);\n  const initialQuery = useRef(\"\");\n  const prevAvailableOptions = useRef<readonly Option[] | null>(null);\n  const isQueryChange =\n    query && query !== initialQuery.current && entered.current;\n\n  let availableOptions = prevAvailableOptions.current || values;\n  if (\n    isQueryChange &&\n    filter !== noopAutocompleteFilter &&\n    !prevAvailableOptions.current\n  ) {\n    initialQuery.current = \"\";\n    availableOptions = filter({\n      list: values,\n      query,\n      extractor: getOptionLabel,\n    });\n  }\n\n  // This is probably overkill, but `filterSelected` will create a quick-lookup\n  // for all the selected values in a `Set` since it is much faster than\n  // `Array.includes()`. The lookup will only be re-created whenever the `value`\n  // changes or is uninitialized to prevent it being created each render as\n  // well.\n  //\n  // These optimizations only start mattering when there are around 5000 items\n  // selected...\n  const selectedOptions = useMemo(() => {\n    if (!filterSelected) {\n      return null;\n    }\n\n    let optionList: readonly Option[] = [];\n    if (isMultipleValues(value)) {\n      optionList = value;\n    } else if (value) {\n      optionList = [value];\n    }\n\n    return new Set(optionList);\n  }, [filterSelected, value]);\n\n  if (filterSelected && selectedOptions?.size) {\n    availableOptions = availableOptions.filter(\n      (option) => !selectedOptions.has(option)\n    );\n  }\n\n  return {\n    ...combobox,\n    value,\n    setValue,\n    query,\n    setQuery,\n    availableOptions,\n    multiselect,\n    comboboxProps: {\n      ...comboboxProps,\n      \"aria-autocomplete\": filter === noopAutocompleteFilter ? \"none\" : \"list\",\n      value: query,\n      onKeyDown(event) {\n        comboboxProps.onKeyDown(event);\n        if (!visible && event.key === \"Escape\") {\n          setQuery(\"\");\n        }\n      },\n      onBlur(event) {\n        onBlur(event);\n\n        if (allowAnyValue) {\n          return;\n        }\n\n        enforceSelectedValue({\n          value,\n          visible,\n          popupRef,\n          container: event.currentTarget.parentElement,\n          comboboxRef,\n          getOptionLabel,\n          availableOptions,\n          prevAvailableOptions,\n        });\n      },\n      onFocus(event) {\n        comboboxProps.onFocus(event);\n        event.currentTarget.select();\n      },\n      onChange(event) {\n        onChange(event);\n\n        const { value } = event.currentTarget;\n        setQuery(value);\n        if (!value && !multiselect) {\n          setValue(null);\n        }\n      },\n    },\n    getListboxProps(overrides) {\n      const {\n        ref,\n        onEnter,\n        onEntered,\n        onExited,\n        disableTransition,\n        ...listboxProps\n      } = getMenuProps(overrides);\n\n      let selectedIcon = propSelectedIcon;\n      let unselectedIcon = propUnselectedIcon;\n      let disableSelectedIcon = propDisableSelectedIcon;\n      if (multiselect && checkboxes) {\n        if (typeof selectedIcon === \"undefined\") {\n          selectedIcon = getIcon(\"checkboxChecked\");\n        }\n        if (typeof unselectedIcon === \"undefined\") {\n          unselectedIcon = getIcon(\"checkbox\");\n        }\n      } else if (typeof disableSelectedIcon === \"undefined\") {\n        disableSelectedIcon = true;\n      }\n\n      return {\n        selectedIcon,\n        unselectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        ...listboxProps,\n        disableTransition,\n        onRequestClose() {\n          // Make it so clicking on the text field, clear button, dropdown\n          // button, etc does not close the listbox\n          if (\n            mode !== \"keyboard\" &&\n            comboboxRef.current?.parentElement?.contains(document.activeElement)\n          ) {\n            return;\n          }\n\n          listboxProps.onRequestClose();\n        },\n        nodeRef: ref,\n        value,\n        setValue(option) {\n          if (!disableCloseOnSelect) {\n            // this makes it so that the options are not filtered again while the\n            // listbox is closing after selecting a value\n            prevAvailableOptions.current = availableOptions;\n          }\n\n          if (value && typeof value === \"object\" && \"length\" in value) {\n            const nextValue = [...value];\n            const i = value.indexOf(option);\n            if (i === -1) {\n              nextValue.push(option);\n            } else {\n              nextValue.splice(i, 1);\n            }\n\n            setValue(nextValue);\n          } else {\n            setValue(option);\n          }\n\n          if (updateQueryOnSelect === \"as-is\") {\n            return;\n          }\n\n          const nextQuery =\n            updateQueryOnSelect === \"clear\" ? \"\" : getOptionLabel(option);\n          triggerManualChangeEvent(comboboxRef.current, nextQuery);\n        },\n        ...getTransitionCallbacks({\n          enter: true,\n          onEnter,\n          onEntered,\n          onEnterOnce: () => {\n            onOpen();\n\n            // when the listbox is opened, need to flag the entered state to show\n            // that new `query` values should be accepted. Also store the initial\n            // query.\n            entered.current = true;\n            initialQuery.current = query;\n          },\n          disableTransition,\n        }),\n        onExited() {\n          onExited();\n\n          // once the listbox has exited, reset any cached states so the next\n          // time the listbox is opened the filtering behaves the same\n          entered.current = false;\n          prevAvailableOptions.current = null;\n        },\n      };\n    },\n    getOptionLabel,\n    getOptionProps(options) {\n      const overrides = getOptionProps(options);\n\n      return {\n        ...overrides,\n        onClick: (event) => {\n          overrides?.onClick?.(event);\n          if (disableCloseOnSelect) {\n            event.stopPropagation();\n          }\n        },\n      };\n    },\n    getClearButtonProps(overrides) {\n      return {\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n\n          if (!multiselect) {\n            setValue(null);\n          }\n          triggerManualChangeEvent(comboboxRef.current, \"\");\n        },\n      };\n    },\n    getDropdownButtonProps(overrides) {\n      return {\n        \"aria-controls\": comboboxProps.id,\n        visible,\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n          if (visible) {\n            prevAvailableOptions.current = availableOptions;\n          }\n          setVisible((prev) => !prev);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useMemo","useRef","useEditableCombobox","triggerManualChangeEvent","getIcon","useUserInteractionMode","getTransitionCallbacks","useEnsuredState","defaultAutocompleteExtractor","defaultAutocompleteFilter","defaultAutocompleteGetOptionProps","noopAutocompleteFilter","enforceSelectedValue","getDefaultQuery","getDefaultValue","isMultipleValues","noop","useAutocomplete","options","value","propValue","setValue","propSetValue","defaultValue","onValueChange","query","propQuery","setQuery","propSetQuery","defaultQuery","values","getOptionLabel","getOptionProps","onBlur","onChange","onOpen","filter","filterSelected","allowAnyValue","multiselect","propMultiselect","checkboxes","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","updateQueryOnSelect","propUpdateQueryOnSelect","disableCloseOnSelect","propDisableCloseOnSelect","comboboxOptions","mode","setValueState","combobox","visible","setVisible","popupRef","comboboxRef","comboboxProps","getMenuProps","entered","initialQuery","prevAvailableOptions","isQueryChange","current","availableOptions","list","extractor","selectedOptions","optionList","Set","size","option","has","onKeyDown","event","key","container","currentTarget","parentElement","onFocus","select","getListboxProps","overrides","ref","onEnter","onEntered","onExited","disableTransition","listboxProps","onRequestClose","contains","document","activeElement","nodeRef","nextValue","i","indexOf","push","splice","nextQuery","enter","onEnterOnce","onClick","stopPropagation","getClearButtonProps","focus","getDropdownButtonProps","id","prev"],"mappings":"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"}
+{"version":3,"sources":["../../src/autocomplete/useAutocomplete.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef } from \"react\";\n\nimport { useEditableCombobox } from \"../form/useEditableCombobox.js\";\nimport {\n  type EditableHTMLElement,\n  triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { getTransitionCallbacks } from \"../transition/getTransitionCallbacks.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  defaultAutocompleteExtractor,\n  defaultAutocompleteFilter,\n  defaultAutocompleteGetOptionProps,\n  noopAutocompleteFilter,\n} from \"./defaults.js\";\nimport {\n  type AutocompleteImplementation,\n  type AutocompleteMultiSelectImplementation,\n  type AutocompleteMultiSelectOptions,\n  type AutocompleteOption,\n  type AutocompleteOptions,\n  type AutocompleteSingleSelectImplementation,\n  type AutocompleteSingleSelectOptions,\n} from \"./types.js\";\nimport {\n  enforceSelectedValue,\n  getDefaultQuery,\n  getDefaultValue,\n  isMultipleValues,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is the single select autocomplete implementation.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteSingleSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteSingleSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is the multiselect autocomplete implementation.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteMultiSelectOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteMultiSelectImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * This is an internal override implementation where the types are less strict\n * so it can be used with the `Autocomplete` component.\n *\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl>;\n/**\n * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n * @internal\n */\nexport function useAutocomplete<\n  Option extends AutocompleteOption,\n  ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n  PopupEl extends HTMLElement = HTMLElement,\n>(\n  options: AutocompleteOptions<Option, ComboboxEl, PopupEl>\n): AutocompleteImplementation<Option, ComboboxEl, PopupEl> {\n  const {\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue,\n    onValueChange = noop,\n    query: propQuery,\n    setQuery: propSetQuery,\n    defaultQuery,\n    options: values,\n    getOptionLabel = defaultAutocompleteExtractor,\n    getOptionProps = defaultAutocompleteGetOptionProps,\n    onBlur = noop,\n    onChange = noop,\n    onOpen = noop,\n    filter = defaultAutocompleteFilter,\n    filterSelected,\n    allowAnyValue = filter === noopAutocompleteFilter,\n    multiselect: propMultiselect,\n    checkboxes,\n    selectedIcon: propSelectedIcon,\n    unselectedIcon: propUnselectedIcon,\n    selectedIconAfter,\n    disableSelectedIcon: propDisableSelectedIcon,\n    updateQueryOnSelect: propUpdateQueryOnSelect,\n    disableCloseOnSelect: propDisableCloseOnSelect,\n    ...comboboxOptions\n  } = options;\n\n  const mode = useUserInteractionMode();\n  const [value, setValueState] = useEnsuredState({\n    value: propValue,\n    setValue: propSetValue,\n    defaultValue: getDefaultValue({\n      query: propQuery,\n      filter,\n      multiselect: propMultiselect,\n      defaultQuery,\n      defaultValue,\n      options: values,\n      getOptionLabel,\n    }),\n  });\n  const multiselect =\n    propMultiselect ??\n    (!!value && typeof value === \"object\" && \"length\" in value);\n  let updateQueryOnSelect = propUpdateQueryOnSelect;\n  if (typeof propUpdateQueryOnSelect === \"undefined\") {\n    updateQueryOnSelect = multiselect ? \"clear\" : \"selected\";\n  }\n\n  const disableCloseOnSelect =\n    propDisableCloseOnSelect ?? (multiselect && checkboxes);\n\n  const [query, setQuery] = useEnsuredState({\n    name: \"query\",\n    value: propQuery,\n    setValue: propSetQuery,\n    defaultValue: getDefaultQuery({\n      value,\n      getOptionLabel,\n      defaultQuery,\n    }),\n  });\n  const setValue = useCallback(\n    (value: Option | null | readonly Option[]) => {\n      onValueChange(value);\n      setValueState(value);\n    },\n    [onValueChange, setValueState]\n  );\n\n  const combobox = useEditableCombobox<ComboboxEl, PopupEl>({\n    ...comboboxOptions,\n    multiselect,\n  });\n  const {\n    visible,\n    setVisible,\n    popupRef,\n    comboboxRef,\n    comboboxProps,\n    getMenuProps,\n  } = combobox;\n\n  // These refs are used to make it so that the options are not filtered until\n  // the user types a new query while the listbox is visible. The filtered\n  // options will be \"cached\" while:\n  // - the listbox is closing\n  // - the listbox is opening and:\n  //   - the user has not typed at least one letter\n  //   - the options have not changed\n  const entered = useRef(visible);\n  const initialQuery = useRef(\"\");\n  const prevAvailableOptions = useRef<readonly Option[] | null>(null);\n  const isQueryChange =\n    query && query !== initialQuery.current && entered.current;\n\n  let availableOptions = prevAvailableOptions.current || values;\n  if (\n    isQueryChange &&\n    filter !== noopAutocompleteFilter &&\n    !prevAvailableOptions.current\n  ) {\n    initialQuery.current = \"\";\n    availableOptions = filter({\n      list: values,\n      query,\n      extractor: getOptionLabel,\n    });\n  }\n\n  // This is probably overkill, but `filterSelected` will create a quick-lookup\n  // for all the selected values in a `Set` since it is much faster than\n  // `Array.includes()`. The lookup will only be re-created whenever the `value`\n  // changes or is uninitialized to prevent it being created each render as\n  // well.\n  //\n  // These optimizations only start mattering when there are around 5000 items\n  // selected...\n  const selectedOptions = useMemo(() => {\n    if (!filterSelected) {\n      return null;\n    }\n\n    let optionList: readonly Option[] = [];\n    if (isMultipleValues(value)) {\n      optionList = value;\n    } else if (value) {\n      optionList = [value];\n    }\n\n    return new Set(optionList);\n  }, [filterSelected, value]);\n\n  if (filterSelected && selectedOptions?.size) {\n    availableOptions = availableOptions.filter(\n      (option) => !selectedOptions.has(option)\n    );\n  }\n\n  return {\n    ...combobox,\n    value,\n    setValue,\n    query,\n    setQuery,\n    availableOptions,\n    multiselect,\n    comboboxProps: {\n      ...comboboxProps,\n      \"aria-autocomplete\": filter === noopAutocompleteFilter ? \"none\" : \"list\",\n      value: query,\n      onKeyDown(event) {\n        comboboxProps.onKeyDown(event);\n        if (!visible && event.key === \"Escape\") {\n          setQuery(\"\");\n        }\n      },\n      onBlur(event) {\n        onBlur(event);\n\n        if (allowAnyValue) {\n          return;\n        }\n\n        enforceSelectedValue({\n          value,\n          visible,\n          popupRef,\n          container: event.currentTarget.parentElement,\n          comboboxRef,\n          getOptionLabel,\n          availableOptions,\n          prevAvailableOptions,\n        });\n      },\n      onFocus(event) {\n        comboboxProps.onFocus(event);\n        event.currentTarget.select();\n      },\n      onChange(event) {\n        onChange(event);\n\n        const { value } = event.currentTarget;\n        setQuery(value);\n        if (!value && !multiselect) {\n          setValue(null);\n        }\n      },\n    },\n    getListboxProps(overrides) {\n      const {\n        ref,\n        onEnter,\n        onEntered,\n        onExited,\n        disableTransition,\n        ...listboxProps\n      } = getMenuProps(overrides);\n\n      let selectedIcon = propSelectedIcon;\n      let unselectedIcon = propUnselectedIcon;\n      let disableSelectedIcon = propDisableSelectedIcon;\n      if (multiselect && checkboxes) {\n        if (typeof selectedIcon === \"undefined\") {\n          selectedIcon = getIcon(\"checkboxChecked\");\n        }\n        if (typeof unselectedIcon === \"undefined\") {\n          unselectedIcon = getIcon(\"checkbox\");\n        }\n      } else if (typeof disableSelectedIcon === \"undefined\") {\n        disableSelectedIcon = true;\n      }\n\n      return {\n        selectedIcon,\n        unselectedIcon,\n        selectedIconAfter,\n        disableSelectedIcon,\n        ...listboxProps,\n        disableTransition,\n        onRequestClose() {\n          // Make it so clicking on the text field, clear button, dropdown\n          // button, etc does not close the listbox\n          if (\n            mode !== \"keyboard\" &&\n            comboboxRef.current?.parentElement?.contains(document.activeElement)\n          ) {\n            return;\n          }\n\n          listboxProps.onRequestClose();\n        },\n        nodeRef: ref,\n        value,\n        setValue(option) {\n          if (!disableCloseOnSelect) {\n            // this makes it so that the options are not filtered again while the\n            // listbox is closing after selecting a value\n            prevAvailableOptions.current = availableOptions;\n          }\n\n          if (value && typeof value === \"object\" && \"length\" in value) {\n            const nextValue = [...value];\n            const i = value.indexOf(option);\n            if (i === -1) {\n              nextValue.push(option);\n            } else {\n              nextValue.splice(i, 1);\n            }\n\n            setValue(nextValue);\n          } else {\n            setValue(option);\n          }\n\n          if (updateQueryOnSelect === \"as-is\") {\n            return;\n          }\n\n          const nextQuery =\n            updateQueryOnSelect === \"clear\" ? \"\" : getOptionLabel(option);\n          triggerManualChangeEvent(comboboxRef.current, nextQuery);\n        },\n        ...getTransitionCallbacks({\n          enter: true,\n          onEnter,\n          onEntered,\n          onEnterOnce: () => {\n            onOpen();\n\n            // when the listbox is opened, need to flag the entered state to show\n            // that new `query` values should be accepted. Also store the initial\n            // query.\n            entered.current = true;\n            initialQuery.current = query;\n          },\n          disableTransition,\n        }),\n        onExited() {\n          onExited();\n\n          // once the listbox has exited, reset any cached states so the next\n          // time the listbox is opened the filtering behaves the same\n          entered.current = false;\n          prevAvailableOptions.current = null;\n        },\n      };\n    },\n    getOptionLabel,\n    getOptionProps(options) {\n      const overrides = getOptionProps(options);\n\n      return {\n        ...overrides,\n        onClick: (event) => {\n          overrides?.onClick?.(event);\n          if (disableCloseOnSelect) {\n            event.stopPropagation();\n          }\n        },\n      };\n    },\n    getClearButtonProps(overrides) {\n      return {\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n\n          if (!multiselect) {\n            setValue(null);\n          }\n          triggerManualChangeEvent(comboboxRef.current, \"\");\n        },\n      };\n    },\n    getDropdownButtonProps(overrides) {\n      return {\n        \"aria-controls\": comboboxProps.id,\n        visible,\n        ...overrides,\n        onClick(event) {\n          overrides?.onClick?.(event);\n          comboboxRef.current?.focus();\n          if (visible) {\n            prevAvailableOptions.current = availableOptions;\n          }\n          setVisible((prev) => !prev);\n        },\n      };\n    },\n  };\n}\n"],"names":["useCallback","useMemo","useRef","useEditableCombobox","triggerManualChangeEvent","getIcon","useUserInteractionMode","getTransitionCallbacks","useEnsuredState","defaultAutocompleteExtractor","defaultAutocompleteFilter","defaultAutocompleteGetOptionProps","noopAutocompleteFilter","enforceSelectedValue","getDefaultQuery","getDefaultValue","isMultipleValues","noop","useAutocomplete","options","value","propValue","setValue","propSetValue","defaultValue","onValueChange","query","propQuery","setQuery","propSetQuery","defaultQuery","values","getOptionLabel","getOptionProps","onBlur","onChange","onOpen","filter","filterSelected","allowAnyValue","multiselect","propMultiselect","checkboxes","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","disableSelectedIcon","propDisableSelectedIcon","updateQueryOnSelect","propUpdateQueryOnSelect","disableCloseOnSelect","propDisableCloseOnSelect","comboboxOptions","mode","setValueState","name","combobox","visible","setVisible","popupRef","comboboxRef","comboboxProps","getMenuProps","entered","initialQuery","prevAvailableOptions","isQueryChange","current","availableOptions","list","extractor","selectedOptions","optionList","Set","size","option","has","onKeyDown","event","key","container","currentTarget","parentElement","onFocus","select","getListboxProps","overrides","ref","onEnter","onEntered","onExited","disableTransition","listboxProps","onRequestClose","contains","document","activeElement","nodeRef","nextValue","i","indexOf","push","splice","nextQuery","enter","onEnterOnce","onClick","stopPropagation","getClearButtonProps","focus","getDropdownButtonProps","id","prev"],"mappings":"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"}

package/dist/avatar/Avatar.d.ts

@@ -80,7 +80,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/avatar | Avatar Demos}
+ * @see {@link https://react-md.dev/components/avatar | Avatar Demos}
  * @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

@@ -17,7 +17,7 @@ import { avatar, avatarImage } from "./styles.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/avatar | Avatar Demos}
+ * @see {@link https://react-md.dev/components/avatar | Avatar Demos}
  * @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;

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, HTMLImageElement>;\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://next.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,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  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, HTMLImageElement>;\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,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

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/colors";
 @use "../typography/typography";
 @use "../icon/icon";
@@ -53,7 +54,7 @@ $border-color: transparent !default;
 /// set this to something like 0.25rem.
 ///
 /// @type Number
-$border-radius: 50% !default;
+$border-radius: border-radius.get-var(full) !default;
 
 /// The default height and width
 /// @type Number
@@ -178,7 +179,6 @@ $variables: (
     @include set-var(background-color, $background-color);
     @include set-var(color, $color);
     @include set-var(border-color, $border-color);
-    @include set-var(border-radius, $border-radius);
     @include set-var(size, $size);
     @include set-var(font-size, $font-size);
   }
@@ -198,7 +198,7 @@ $variables: (
         }
         @include utils.map-to-styles(typography.$base-font-styles);
         @include use-var(background-color);
-        @include use-var(border-radius);
+        @include use-var(border-radius, $fallback: $border-radius);
         @include use-var(color);
         @include use-var(font-size);
         @include use-var(height, size);

package/dist/badge/Badge.d.ts

@@ -42,7 +42,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/badge | Badge Demos}
+ * @see {@link https://react-md.dev/components/badge | Badge Demos}
  * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
  */

package/dist/badge/Badge.js

@@ -38,7 +38,7 @@ import { badge } from "./styles.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/badge | Badge Demos}
+ * @see {@link https://react-md.dev/components/badge | Badge Demos}
  * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
  * easier just to use condition rendering yourself.
  */ export const Badge = /*#__PURE__*/ forwardRef(function Badge(props, ref) {

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://next.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\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"}

package/dist/badge/_badge.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/a11y";
 @use "../theme/colors";
 @use "../theme/theme";
@@ -60,7 +61,7 @@ $offset-right: $offset !default;
 
 /// The default border radius
 /// @type Number
-$border-radius: 50% !default;
+$border-radius: border-radius.get-var(full) !default;
 
 /// The default typography to use
 /// @type Map
@@ -110,6 +111,7 @@ $greyscale-color: theme.get-default-color(
 /// `get-var`, `set-var`, and `use-var` utils.
 /// @type List
 $variables: (
+  border-radius,
   greyscale-background-color,
   greyscale-color,
   size,
@@ -144,6 +146,12 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value if the variable
 /// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
+  @if not $fallback {
+    @if $name == border-radius {
+      $fallback: $border-radius;
+    }
+  }
+
   #{$property}: get-var($name, $fallback);
 }
 
@@ -207,12 +215,12 @@ $variables: (
     @include utils.optional-layer(badge, $disable-layer) {
       .rmd-badge {
         @include utils.map-to-styles($typography);
+        @include use-var(border-radius);
         @include use-var(height, size);
         @include use-var(width, size);
         @include use-var(top, offset-top, get-var(offset));
 
         align-items: center;
-        border-radius: $border-radius;
         display: inline-flex;
         justify-content: center;
         pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events

package/dist/box/Box.d.ts

@@ -101,7 +101,7 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/box | Box Demos}
+ * @see {@link https://react-md.dev/components/box | Box Demos}
  * @since 6.0.0
  */
 export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/box/Box.js

@@ -97,7 +97,7 @@ import { boxStyles } from "./styles.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/box | Box Demos}
+ * @see {@link https://react-md.dev/components/box | Box Demos}
  * @since 6.0.0
  */ export const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
     const { style, className, children, align, justify, stacked, reversed, grid, gridName, gridItemSize, gridColumns, gridAutoRows, fullWidth, disableGap, disableWrap, disablePadding, ...remaining } = props;

package/dist/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type BoxOptions, boxStyles } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\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/box/Box\";\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/box/Box\";\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/box/Box\";\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 * @see {@link https://next.react-md.dev/components/box | Box Demos}\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      style,\n      className,\n      children,\n      align,\n      justify,\n      stacked,\n      reversed,\n      grid,\n      gridName,\n      gridItemSize,\n      gridColumns,\n      gridAutoRows,\n      fullWidth,\n      disableGap,\n      disableWrap,\n      disablePadding,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        {...boxStyles({\n          style,\n          className,\n          align,\n          justify,\n          stacked,\n          reversed,\n          grid,\n          gridName,\n          gridItemSize,\n          gridColumns,\n          gridAutoRows,\n          fullWidth,\n          disableGap,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","boxStyles","Box","props","ref","style","className","children","align","justify","stacked","reversed","grid","gridName","gridItemSize","gridColumns","gridAutoRows","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA0BC,SAAS,QAAQ,cAAc;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGlB;IAEJ,qBACE,KAACmB;QACE,GAAGD,SAAS;QACbjB,KAAKA;QACJ,GAAGH,UAAU;YACZI;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDb;;AAGP,GACA"}
+{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type BoxOptions, boxStyles } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\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/box/Box\";\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/box/Box\";\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/box/Box\";\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 * @see {@link https://react-md.dev/components/box | Box Demos}\n * @since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  function Box(props, ref) {\n    const {\n      style,\n      className,\n      children,\n      align,\n      justify,\n      stacked,\n      reversed,\n      grid,\n      gridName,\n      gridItemSize,\n      gridColumns,\n      gridAutoRows,\n      fullWidth,\n      disableGap,\n      disableWrap,\n      disablePadding,\n      ...remaining\n    } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        {...boxStyles({\n          style,\n          className,\n          align,\n          justify,\n          stacked,\n          reversed,\n          grid,\n          gridName,\n          gridItemSize,\n          gridColumns,\n          gridAutoRows,\n          fullWidth,\n          disableGap,\n          disableWrap,\n          disablePadding,\n        })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","boxStyles","Box","props","ref","style","className","children","align","justify","stacked","reversed","grid","gridName","gridItemSize","gridColumns","gridAutoRows","fullWidth","disableGap","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA0BC,SAAS,QAAQ,cAAc;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,cAAc,EACd,GAAGC,WACJ,GAAGlB;IAEJ,qBACE,KAACmB;QACE,GAAGD,SAAS;QACbjB,KAAKA;QACJ,GAAGH,UAAU;YACZI;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,EAAE;kBAEDb;;AAGP,GACA"}

package/dist/box/_box.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../spacing";
 @use "../media-queries/media-queries";
 
 /// Set to `true` to disable all the styles
@@ -101,7 +102,7 @@ $justify-content: (
 
 /// The default flex and grid gap to apply between each item
 /// @type Number
-$gap: 1rem !default;
+$gap: spacing.get-var(md) !default;
 
 /// The default padding to apply to the container.
 /// @type Number
@@ -157,7 +158,11 @@ $_breakpoints: (
 /// @type List
 $variables: (
   gap,
+  column-gap,
+  row-gap,
   padding,
+  padding-v,
+  padding-h,
   item-min-size,
   item-min-height,
   columns,
@@ -182,6 +187,7 @@ $variables: (
 /// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "box");
+
   @if $fallback {
     @return var(#{$var}, #{$fallback});
   }
@@ -203,6 +209,72 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value if the variable
 /// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
+  // these variables define another fallback and are not set at the root so
+  // they can easily be overridden. if they have a default value at the root,
+  // that root value will be used instead of the lowest defined override.
+  //
+  // i.e.
+  // ```scss
+  //
+  // :root {
+  //   --rmd-box-padding: 3rem;
+  //   --rmd-box-padding-v: var(--rmd-box-padding);
+  //   --rmd-box-padding-h: var(--rmd-box-padding);
+  // }
+  //
+  // .some-child {
+  //   --rmd-box-padding: 1rem;
+  //
+  // }
+  // ```
+  //
+  // `--rmd-box-padding-v` and `--rmd-box-padding-h` would still have a value
+  // of `1rem`
+  @if not $fallback {
+    @if $name == padding-v or $name == padding-h {
+      $fallback: get-var(padding);
+    } @else if $name == column-gap or $name == row-gap {
+      $fallback: get-var(gap);
+    } @else if
+      $name ==
+      phone-columns or
+      $name ==
+      tablet-columns or
+      $name ==
+      desktop-columns or
+      $name ==
+      large-desktop-columns
+    {
+      $fallback: get-var(columns);
+    } @else if
+      $name ==
+      phone-item-min-height or
+      $name ==
+      tablet-item-min-height or
+      $name ==
+      desktop-item-min-height or
+      $name ==
+      large-desktop-item-min-height
+    {
+      $fallback: get-var(item-min-height);
+    } @else if
+      $name ==
+      phone-size or
+      $name ==
+      tablet-size or
+      $name ==
+      desktop-size or
+      $name ==
+      large-desktop-size
+    {
+      $fallback: get-var(size);
+    } @else if $name == gap {
+      $fallback: $gap;
+    } @else if $name == padding {
+      $fallback: $padding;
+    }
+  }
+
   #{$property}: get-var($name, $fallback);
 }
 
@@ -259,14 +331,8 @@ $variables: (
 /// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
-    @include set-var(gap, $gap);
-    @include set-var(padding, $padding);
     @include set-var(item-min-size, $item-min-size);
     @include set-var(columns, auto-fit);
-    @include set-var(phone-columns, auto-fit);
-    @include set-var(tablet-columns, auto-fit);
-    @include set-var(desktop-columns, auto-fit);
-    @include set-var(large-desktop-columns, auto-fit);
   }
 }
 
@@ -282,19 +348,20 @@ $variables: (
         display: flex;
 
         &--gap {
-          @include use-var(gap, gap);
+          @include use-var(gap);
         }
 
         &--gap-h {
-          @include use-var(column-gap, gap);
+          @include use-var(column-gap);
         }
 
         &--gap-v {
-          @include use-var(row-gap, gap);
+          @include use-var(row-gap);
         }
 
         &--padded {
-          @include use-var(padding);
+          padding: get-var(padding-v, get-var(padding, $padding))
+            get-var(padding-h, get-var(padding, $padding));
         }
 
         &--wrap {

package/dist/button/AsyncButton.d.ts

@@ -151,7 +151,7 @@ export interface AsyncButtonProps extends ButtonProps {
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/button#async-button | AsyncButton Demos}
+ * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}
  * @since 6.0.0
  */
 export declare const AsyncButton: import("react").ForwardRefExoticComponent<AsyncButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/button/AsyncButton.js

@@ -69,7 +69,7 @@ const noop = ()=>{
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/button#async-button | AsyncButton Demos}
+ * @see {@link https://react-md.dev/components/button#async-button | AsyncButton Demos}
  * @since 6.0.0
  */ export const AsyncButton = /*#__PURE__*/ forwardRef(function AsyncButton(props, ref) {
     const { id: propId, onClick = noop, children, floating = null, theme = floating ? "secondary" : "clear", themeType = floating ? "contained" : "flat", buttonType = floating ? "icon" : "text", className, disabled, loading: propLoading = false, loadingType = "circular-overlay", loadingChildren, loadingDisabledTheme = false, afterAddon: propAfterAddon, beforeAddon: propBeforeAddon, linearProgressProps, circularProgressProps, progressAriaLabel, progressAriaLabelledBy: propProgressAriaLabelledBy, ...remaining } = props;