@mui/material 5.14.2 → 5.14.4

package/modern/TableSortLabel/TableSortLabel.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["active", "children", "className", "direction", "hideSortIcon", "IconComponent"];
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';

package/modern/TextField/TextField.js

@@ -6,7 +6,7 @@ const _excluded = ["autoComplete", "autoFocus", "children", "className", "color"
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { refType, unstable_useId as useId } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';

package/modern/TextareaAutosize/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/TextareaAutosize';
+export { TextareaAutosize as default } from '@mui/base/TextareaAutosize';

package/modern/ToggleButton/ToggleButton.js

@@ -7,7 +7,7 @@ const _excluded = ["children", "className", "color", "disabled", "disableFocusRi
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { alpha } from '../styles';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';

package/modern/Toolbar/Toolbar.js

@@ -6,7 +6,7 @@ const _excluded = ["className", "component", "disableGutters", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import { getToolbarUtilityClass } from './toolbarClasses';

package/modern/Typography/Typography.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_extendSxProp as extendSxProp } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
@@ -41,7 +41,10 @@ export const TypographyRoot = styled('span', {
   ownerState
 }) => _extends({
   margin: 0
-}, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
+}, ownerState.variant === 'inherit' && {
+  // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
+  font: 'inherit'
+}, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
   textAlign: ownerState.align
 }, ownerState.noWrap && {
   overflow: 'hidden',

package/modern/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/FocusTrap';
+export { FocusTrap as default } from '@mui/base/FocusTrap';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.2
+ * @mui/material v5.14.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -282,7 +282,7 @@ export { default as useAutocomplete } from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
 export { StyledEngineProvider } from './styles';
-export { default as unstable_composeClasses } from '@mui/base/composeClasses';
+export { unstable_composeClasses } from '@mui/base/composeClasses';
 export { default as generateUtilityClass } from './generateUtilityClass';
 export * from './generateUtilityClass';
 export { default as generateUtilityClasses } from './generateUtilityClasses';

package/modern/internal/SwitchBase.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useControlled from '../utils/useControlled';

package/modern/styles/createTypography.js

@@ -66,6 +66,7 @@ export default function createTypography(palette, typography) {
     button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
     caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
     overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
+    // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
     inherit: {
       fontFamily: 'inherit',
       fontWeight: 'inherit',

package/modern/useAutocomplete/useAutocomplete.js

@@ -1,4 +1,4 @@
 'use client';
 
-export { default } from '@mui/base/useAutocomplete';
+export { useAutocomplete as default } from '@mui/base/useAutocomplete';
 export * from '@mui/base/useAutocomplete';

package/modern/utils/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/base/className';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/base/ClassNameGenerator';
 export { default as capitalize } from './capitalize';
 export { default as createChainedFunction } from './createChainedFunction';
 export { default as createSvgIcon } from './createSvgIcon';

package/node/Accordion/Accordion.js

@@ -13,7 +13,7 @@ var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Collapse = _interopRequireDefault(require("../Collapse"));
@@ -37,7 +37,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
     region: ['region']
   };
-  return (0, _base.unstable_composeClasses)(slots, _accordionClasses.getAccordionUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _accordionClasses.getAccordionUtilityClass, classes);
 };
 const AccordionRoot = (0, _styled.default)(_Paper.default, {
   name: 'MuiAccordion',

package/node/AccordionActions/AccordionActions.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _accordionActionsClasses = require("./accordionActionsClasses");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', !disableSpacing && 'spacing']
   };
-  return (0, _base.unstable_composeClasses)(slots, _accordionActionsClasses.getAccordionActionsUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _accordionActionsClasses.getAccordionActionsUtilityClass, classes);
 };
 const AccordionActionsRoot = (0, _styled.default)('div', {
   name: 'MuiAccordionActions',

package/node/AccordionDetails/AccordionDetails.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _accordionDetailsClasses = require("./accordionDetailsClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _base.unstable_composeClasses)(slots, _accordionDetailsClasses.getAccordionDetailsUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _accordionDetailsClasses.getAccordionDetailsUtilityClass, classes);
 };
 const AccordionDetailsRoot = (0, _styled.default)('div', {
   name: 'MuiAccordionDetails',

package/node/AccordionSummary/AccordionSummary.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
     content: ['content', expanded && 'expanded', !disableGutters && 'contentGutters'],
     expandIconWrapper: ['expandIconWrapper', expanded && 'expanded']
   };
-  return (0, _base.unstable_composeClasses)(slots, _accordionSummaryClasses.getAccordionSummaryUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _accordionSummaryClasses.getAccordionSummaryUtilityClass, classes);
 };
 const AccordionSummaryRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiAccordionSummary',

package/node/Alert/Alert.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _system = require("@mui/system");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -41,7 +41,7 @@ const useUtilityClasses = ownerState => {
     message: ['message'],
     action: ['action']
   };
-  return (0, _base.unstable_composeClasses)(slots, _alertClasses.getAlertUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _alertClasses.getAlertUtilityClass, classes);
 };
 const AlertRoot = (0, _styled.default)(_Paper.default, {
   name: 'MuiAlert',

package/node/AlertTitle/AlertTitle.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Typography = _interopRequireDefault(require("../Typography"));
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _base.unstable_composeClasses)(slots, _alertTitleClasses.getAlertTitleUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _alertTitleClasses.getAlertTitleUtilityClass, classes);
 };
 const AlertTitleRoot = (0, _styled.default)(_Typography.default, {
   name: 'MuiAlertTitle',

package/node/AppBar/AppBar.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${(0, _capitalize.default)(color)}`, `position${(0, _capitalize.default)(position)}`]
   };
-  return (0, _base.unstable_composeClasses)(slots, _appBarClasses.getAppBarUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _appBarClasses.getAppBarUtilityClass, classes);
 };
 
 // var2 is the fallback.

package/node/Autocomplete/Autocomplete.js

@@ -385,6 +385,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     props: inProps,
     name: 'MuiAutocomplete'
   });
+
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
       autoComplete = false,
@@ -413,10 +414,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       freeSolo = false,
       fullWidth = false,
       getLimitTagsText = more => `+${more}`,
-      getOptionLabel = option => {
-        var _option$label;
-        return (_option$label = option.label) != null ? _option$label : option;
-      },
+      getOptionLabel: getOptionLabelProp,
       groupBy,
       handleHomeEndKeys = !props.freeSolo,
       includeInputInList = false,
@@ -481,6 +479,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     } = _getListboxProps,
     otherListboxProps = (0, _objectWithoutPropertiesLoose2.default)(_getListboxProps, _excluded2);
   const combinedListboxRef = (0, _useForkRef.default)(listboxRef, externalListboxRef);
+  const defaultGetOptionLabel = option => {
+    var _option$label;
+    return (_option$label = option.label) != null ? _option$label : option;
+  };
+  const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = (0, _extends2.default)({}, props, {
@@ -488,6 +491,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     expanded,
     focused,
     fullWidth,
+    getOptionLabel,
     hasClearIcon,
     hasPopupIcon,
     inputFocused: focusedTag === -1,
@@ -791,9 +795,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * A function that determines the filtered options to be rendered on search.
    *
    * @default createFilterOptions()
-   * @param {T[]} options The options to render.
+   * @param {Value[]} options The options to render.
    * @param {object} state The state of the component.
-   * @returns {T[]}
+   * @returns {Value[]}
    */
   filterOptions: _propTypes.default.func,
   /**
@@ -827,7 +831,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Used to determine the disabled state for a given option.
    *
-   * @param {T} option The option to test.
+   * @param {Value} option The option to test.
    * @returns {boolean}
    */
   getOptionDisabled: _propTypes.default.func,
@@ -837,7 +841,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * If used in free solo mode, it must accept both the type of the options and a string.
    *
-   * @param {T} option
+   * @param {Value} option
    * @returns {string}
    * @default (option) => option.label ?? option
    */
@@ -846,7 +850,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
    *
-   * @param {T} options The options to group.
+   * @param {Value} options The options to group.
    * @returns {string}
    */
   groupBy: _propTypes.default.func,
@@ -875,8 +879,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Uses strict equality by default.
    * ⚠️ Both arguments need to be handled, an option can only match with one value.
    *
-   * @param {T} option The option to test.
-   * @param {T} value The value to test against.
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
    * @returns {boolean}
    */
   isOptionEqualToValue: _propTypes.default.func,
@@ -924,7 +928,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the value changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T|T[]} value The new value of the component.
+   * @param {Value|Value[]} value The new value of the component.
    * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
    * @param {string} [details]
    */
@@ -941,7 +945,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Callback fired when the highlight option changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T} option The highlighted option.
+   * @param {Value} option The highlighted option.
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange: _propTypes.default.func,
@@ -1018,7 +1022,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Render the option, use `getOptionLabel` by default.
    *
    * @param {object} props The props to apply on the li element.
-   * @param {T} option The option to render.
+   * @param {Value} option The option to render.
    * @param {object} state The state of each option.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
@@ -1027,7 +1031,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Render the selected value.
    *
-   * @param {T[]} value The `value` provided to the component.
+   * @param {Value[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}

package/node/Avatar/Avatar.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Person = _interopRequireDefault(require("../internal/svg-icons/Person"));
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
     img: ['img'],
     fallback: ['fallback']
   };
-  return (0, _base.unstable_composeClasses)(slots, _avatarClasses.getAvatarUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _avatarClasses.getAvatarUtilityClass, classes);
 };
 const AvatarRoot = (0, _styled.default)('div', {
   name: 'MuiAvatar',

package/node/AvatarGroup/AvatarGroup.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIs = require("react-is");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Avatar = _interopRequireWildcard(require("../Avatar"));
@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     avatar: ['avatar']
   };
-  return (0, _base.unstable_composeClasses)(slots, _avatarGroupClasses.getAvatarGroupUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _avatarGroupClasses.getAvatarGroupUtilityClass, classes);
 };
 const AvatarGroupRoot = (0, _styled.default)('div', {
   name: 'MuiAvatarGroup',

package/node/Backdrop/Backdrop.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Fade = _interopRequireDefault(require("../Fade"));
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', invisible && 'invisible']
   };
-  return (0, _base.unstable_composeClasses)(slots, _backdropClasses.getBackdropUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _backdropClasses.getBackdropUtilityClass, classes);
 };
 const BackdropRoot = (0, _styled.default)('div', {
   name: 'MuiBackdrop',

package/node/Badge/Badge.js

@@ -12,8 +12,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
-var _useBadge = _interopRequireDefault(require("@mui/base/useBadge"));
+var _composeClasses = require("@mui/base/composeClasses");
+var _useBadge = require("@mui/base/useBadge");
 var _base = require("@mui/base");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`, `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`, `overlap${(0, _capitalize.default)(overlap)}`, color !== 'default' && `color${(0, _capitalize.default)(color)}`]
   };
-  return (0, _composeClasses.default)(slots, _badgeClasses.getBadgeUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _badgeClasses.getBadgeUtilityClass, classes);
 };
 const BadgeRoot = (0, _styled.default)('span', {
   name: 'MuiBadge',
@@ -196,7 +196,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     invisible: invisibleFromHook,
     max,
     displayValue: displayValueFromHook
-  } = (0, _useBadge.default)({
+  } = (0, _useBadge.useBadge)({
     max: maxProp,
     invisible: invisibleProp,
     badgeContent: badgeContentProp,

package/node/BottomNavigation/BottomNavigation.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _bottomNavigationClasses = require("./bottomNavigationClasses");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _base.unstable_composeClasses)(slots, _bottomNavigationClasses.getBottomNavigationUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _bottomNavigationClasses.getBottomNavigationUtilityClass, classes);
 };
 const BottomNavigationRoot = (0, _styled.default)('div', {
   name: 'MuiBottomNavigation',

package/node/BottomNavigationAction/BottomNavigationAction.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', !showLabel && !selected && 'iconOnly', selected && 'selected'],
     label: ['label', !showLabel && !selected && 'iconOnly', selected && 'selected']
   };
-  return (0, _base.unstable_composeClasses)(slots, _bottomNavigationActionClasses.getBottomNavigationActionUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _bottomNavigationActionClasses.getBottomNavigationActionUtilityClass, classes);
 };
 const BottomNavigationActionRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiBottomNavigationAction',

package/node/Button/Button.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _system = require("@mui/system");
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -39,7 +39,7 @@ const useUtilityClasses = ownerState => {
     startIcon: ['startIcon', `iconSize${(0, _capitalize.default)(size)}`],
     endIcon: ['endIcon', `iconSize${(0, _capitalize.default)(size)}`]
   };
-  const composedClasses = (0, _base.unstable_composeClasses)(slots, _buttonClasses.getButtonUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _buttonClasses.getButtonUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 const commonIconStyles = ownerState => (0, _extends2.default)({}, ownerState.size === 'small' && {

package/node/ButtonBase/ButtonBase.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
   };
-  const composedClasses = (0, _composeClasses.default)(slots, _buttonBaseClasses.getButtonBaseUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _buttonBaseClasses.getButtonBaseUtilityClass, classes);
   if (focusVisible && focusVisibleClassName) {
     composedClasses.root += ` ${focusVisibleClassName}`;
   }

package/node/ButtonGroup/ButtonGroup.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _system = require("@mui/system");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -52,7 +52,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
     grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(color)}`, disabled && 'disabled']
   };
-  return (0, _base.unstable_composeClasses)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
 };
 const ButtonGroupRoot = (0, _styled.default)('div', {
   name: 'MuiButtonGroup',

package/node/Card/Card.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Paper = _interopRequireDefault(require("../Paper"));
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _base.unstable_composeClasses)(slots, _cardClasses.getCardUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _cardClasses.getCardUtilityClass, classes);
 };
 const CardRoot = (0, _styled.default)(_Paper.default, {
   name: 'MuiCard',

package/node/CardActionArea/CardActionArea.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _cardActionAreaClasses = _interopRequireWildcard(require("./cardActionAreaClasses"));
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     focusHighlight: ['focusHighlight']
   };
-  return (0, _base.unstable_composeClasses)(slots, _cardActionAreaClasses.getCardActionAreaUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _cardActionAreaClasses.getCardActionAreaUtilityClass, classes);
 };
 const CardActionAreaRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiCardActionArea',

package/node/CardActions/CardActions.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
+var _composeClasses = require("@mui/base/composeClasses");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _cardActionsClasses = require("./cardActionsClasses");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', !disableSpacing && 'spacing']
   };
-  return (0, _base.unstable_composeClasses)(slots, _cardActionsClasses.getCardActionsUtilityClass, classes);
+  return (0, _composeClasses.unstable_composeClasses)(slots, _cardActionsClasses.getCardActionsUtilityClass, classes);
 };
 const CardActionsRoot = (0, _styled.default)('div', {
   name: 'MuiCardActions',