@mui/material 5.15.9 → 5.15.11

package/node/Avatar/Avatar.js

@@ -11,13 +11,14 @@ 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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Person = _interopRequireDefault(require("../internal/svg-icons/Person"));
 var _avatarClasses = require("./avatarClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
     img: ['img'],
     fallback: ['fallback']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _avatarClasses.getAvatarUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _avatarClasses.getAvatarUtilityClass, classes);
 };
 const AvatarRoot = (0, _styled.default)('div', {
   name: 'MuiAvatar',
@@ -158,6 +159,8 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       children: childrenProp,
       className,
       component = 'div',
+      slots = {},
+      slotProps = {},
       imgProps,
       sizes,
       src,
@@ -180,16 +183,25 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const [ImgSlot, imgSlotProps] = (0, _useSlot.default)('img', {
+    className: classes.img,
+    elementType: AvatarImg,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        img: (0, _extends2.default)({}, imgProps, slotProps.img)
+      }
+    },
+    additionalProps: {
+      alt,
+      src,
+      srcSet,
+      sizes
+    },
+    ownerState
+  });
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarImg, (0, _extends2.default)({
-      alt: alt,
-      srcSet: srcSet,
-      src: src,
-      sizes: sizes,
-      ownerState: ownerState,
-      className: classes.img
-    }, imgProps));
-
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(ImgSlot, (0, _extends2.default)({}, imgSlotProps));
     // We only render valid children, non valid children are rendered with a fallback
     // We consider that invalid children are all falsy values, except 0, which is valid.
   } else if (!!childrenProp || childrenProp === 0) {
@@ -242,12 +254,27 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps: _propTypes.default.object,
   /**
    * The `sizes` attribute for the `img` element.
    */
   sizes: _propTypes.default.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    img: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    img: _propTypes.default.elementType
+  }),
   /**
    * The `src` attribute for the `img` element.
    */

package/node/AvatarGroup/AvatarGroup.js

@@ -12,8 +12,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIs = require("react-is");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/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, _composeClasses.unstable_composeClasses)(slots, _avatarGroupClasses.getAvatarGroupUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _avatarGroupClasses.getAvatarGroupUtilityClass, classes);
 };
 const AvatarGroupRoot = (0, _styled.default)('div', {
   name: 'MuiAvatarGroup',
@@ -161,7 +161,7 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * Max avatars to show before +x.
    * @default 5
    */
-  max: (0, _utils.chainPropTypes)(_propTypes.default.number, props => {
+  max: (0, _chainPropTypes.default)(_propTypes.default.number, props => {
     if (props.max < 2) {
       return new Error(['MUI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
     }

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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/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, _composeClasses.unstable_composeClasses)(slots, _backdropClasses.getBackdropUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _backdropClasses.getBackdropUtilityClass, classes);
 };
 const BackdropRoot = (0, _styled.default)('div', {
   name: 'MuiBackdrop',

package/node/Badge/Badge.js

@@ -11,10 +11,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
+var _usePreviousProps = _interopRequireDefault(require("@mui/utils/usePreviousProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useBadge = require("@mui/base/useBadge");
-var _base = require("@mui/base");
+var _utils = require("@mui/base/utils");
 var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
@@ -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.unstable_composeClasses)(slots, _badgeClasses.getBadgeUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _badgeClasses.getBadgeUtilityClass, classes);
 };
 const BadgeRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiBadge',
@@ -263,7 +263,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     badgeContent: badgeContentProp,
     showZero
   });
-  const prevProps = (0, _utils.usePreviousProps)({
+  const prevProps = (0, _usePreviousProps.default)({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
     overlap: overlapProp,
@@ -296,7 +296,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
-  const rootProps = (0, _base.useSlotProps)({
+  const rootProps = (0, _utils.useSlotProps)({
     elementType: RootSlot,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
@@ -307,7 +307,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     ownerState,
     className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
   });
-  const badgeProps = (0, _base.useSlotProps)({
+  const badgeProps = (0, _utils.useSlotProps)({
     elementType: BadgeSlot,
     externalSlotProps: badgeSlotProps,
     ownerState,

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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/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, _composeClasses.unstable_composeClasses)(slots, _bottomNavigationClasses.getBottomNavigationUtilityClass, classes);
+  return (0, _composeClasses.default)(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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/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, _composeClasses.unstable_composeClasses)(slots, _bottomNavigationActionClasses.getBottomNavigationActionUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _bottomNavigationActionClasses.getBottomNavigationActionUtilityClass, classes);
 };
 const BottomNavigationActionRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiBottomNavigationAction',

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _MoreHoriz = _interopRequireDefault(require("../internal/svg-icons/MoreHoriz"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -40,9 +40,9 @@ const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
   '&:active': (0, _extends2.default)({
     boxShadow: theme.shadows[0]
   }, theme.palette.mode === 'light' ? {
-    backgroundColor: (0, _system.emphasize)(theme.palette.grey[200], 0.12)
+    backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[200], 0.12)
   } : {
-    backgroundColor: (0, _system.emphasize)(theme.palette.grey[600], 0.12)
+    backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[600], 0.12)
   })
 }));
 const BreadcrumbCollapsedIcon = (0, _styled.default)(_MoreHoriz.default)({

package/node/Breadcrumbs/Breadcrumbs.js

@@ -12,8 +12,9 @@ var React = _interopRequireWildcard(require("react"));
 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 _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Typography = _interopRequireDefault(require("../Typography"));
@@ -33,7 +34,7 @@ const useUtilityClasses = ownerState => {
     ol: ['ol'],
     separator: ['separator']
   };
-  return (0, _base.unstable_composeClasses)(slots, _breadcrumbsClasses.getBreadcrumbsUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _breadcrumbsClasses.getBreadcrumbsUtilityClass, classes);
 };
 const BreadcrumbsRoot = (0, _styled.default)(_Typography.default, {
   name: 'MuiBreadcrumbs',
@@ -110,7 +111,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     separator
   });
   const classes = useUtilityClasses(ownerState);
-  const collapsedIconSlotProps = (0, _base.useSlotProps)({
+  const collapsedIconSlotProps = (0, _utils.useSlotProps)({
     elementType: slots.CollapsedIcon,
     externalSlotProps: slotProps.collapsedIcon,
     ownerState
@@ -208,19 +209,19 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptype
    * If max items is exceeded, the number of items to show after the ellipsis.
    * @default 1
    */
-  itemsAfterCollapse: _utils.integerPropType,
+  itemsAfterCollapse: _integerPropType.default,
   /**
    * If max items is exceeded, the number of items to show before the ellipsis.
    * @default 1
    */
-  itemsBeforeCollapse: _utils.integerPropType,
+  itemsBeforeCollapse: _integerPropType.default,
   /**
    * Specifies the maximum number of breadcrumbs to display. When there are more
    * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
    * will be shown, with an ellipsis in between.
    * @default 8
    */
-  maxItems: _utils.integerPropType,
+  maxItems: _integerPropType.default,
   /**
    * Custom separator node.
    * @default '/'

package/node/Button/Button.js

@@ -11,9 +11,9 @@ 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 _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
-var _system = require("@mui/system");
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
     startIcon: ['startIcon', `iconSize${(0, _capitalize.default)(size)}`],
     endIcon: ['endIcon', `iconSize${(0, _capitalize.default)(size)}`]
   };
-  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _buttonClasses.getButtonUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.default)(slots, _buttonClasses.getButtonUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 const commonIconStyles = ownerState => (0, _extends2.default)({}, ownerState.size === 'small' && {
@@ -82,20 +82,20 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     }),
     '&:hover': (0, _extends2.default)({
       textDecoration: 'none',
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
       border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -139,7 +139,7 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     border: '1px solid currentColor'
   }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
     color: (theme.vars || theme).palette[ownerState.color].main,
-    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)}`
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${(0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.5)}`
   }, ownerState.variant === 'contained' && {
     color: theme.vars ?
     // this is safe because grey does not change between default light/dark mode
@@ -230,7 +230,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const contextProps = React.useContext(_ButtonGroupContext.default);
   const buttonGroupButtonContextPositionClassName = React.useContext(_ButtonGroupButtonContext.default);
-  const resolvedProps = (0, _utils.internal_resolveProps)(contextProps, inProps);
+  const resolvedProps = (0, _resolveProps.default)(contextProps, inProps);
   const props = (0, _useThemeProps.default)({
     props: resolvedProps,
     name: 'MuiButton'

package/node/ButtonBase/ButtonBase.js

@@ -11,8 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -34,7 +35,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
   };
-  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _buttonBaseClasses.getButtonBaseUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.default)(slots, _buttonBaseClasses.getButtonBaseUtilityClass, classes);
   if (focusVisible && focusVisibleClassName) {
     composedClasses.root += ` ${focusVisibleClassName}`;
   }
@@ -331,7 +332,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
    * A ref for imperative actions.
    * It currently only supports `focusVisible()` action.
    */
-  action: _utils.refType,
+  action: _refType.default,
   /**
    * If `true`, the ripples are centered.
    * They won't start at the cursor interaction position.
@@ -354,7 +355,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: _utils.elementTypeAcceptingRef,
+  component: _elementTypeAcceptingRef.default,
   /**
    * If `true`, the component is disabled.
    * @default false

package/node/ButtonBase/Ripple.js

@@ -59,7 +59,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
   /**
    * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
    */
   classes: _propTypes.default.object.isRequired,
   className: _propTypes.default.string,

package/node/ButtonBase/TouchRipple.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Ripple = _interopRequireDefault(require("./Ripple"));
@@ -160,7 +160,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
   const ignoringMouseDown = React.useRef(false);
   // We use a timer in order to only show the ripples for touch "click" like events.
   // We don't want to display the ripple for touch scroll events.
-  const startTimer = (0, _utils.unstable_useTimeout)();
+  const startTimer = (0, _useTimeout.default)();
 
   // This is the hook called once the previous timeout is ready.
   const startTimerCommit = React.useRef(null);
@@ -326,7 +326,6 @@ process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
   center: _propTypes.default.bool,
   /**
    * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
    */
   classes: _propTypes.default.object,
   /**

package/node/ButtonGroup/ButtonGroup.js

@@ -11,9 +11,9 @@ 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 _composeClasses = require("@mui/base/composeClasses");
-var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -63,7 +63,7 @@ const useUtilityClasses = ownerState => {
     lastButton: ['lastButton'],
     middleButton: ['middleButton']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
 };
 const ButtonGroupRoot = (0, _styled.default)('div', {
   name: 'MuiButtonGroup',
@@ -109,7 +109,7 @@ const ButtonGroupRoot = (0, _styled.default)('div', {
       borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
     }
   }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)
+    borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.5)
   }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
     borderRightColor: 'transparent'
   }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
@@ -189,7 +189,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     size,
     variant
   }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
-  const validChildren = (0, _utils.getValidReactChildren)(children);
+  const validChildren = (0, _getValidReactChildren.default)(children);
   const childrenCount = validChildren.length;
   const getButtonPositionClassName = index => {
     const isFirstButton = index === 0;

package/node/Card/Card.js

@@ -11,8 +11,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/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, _composeClasses.unstable_composeClasses)(slots, _cardClasses.getCardUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _cardClasses.getCardUtilityClass, classes);
 };
 const CardRoot = (0, _styled.default)(_Paper.default, {
   name: 'MuiCard',
@@ -81,7 +81,7 @@ process.env.NODE_ENV !== "production" ? Card.propTypes /* remove-proptypes */ =
    * If `true`, the card will use raised styling.
    * @default false
    */
-  raised: (0, _utils.chainPropTypes)(_propTypes.default.bool, props => {
+  raised: (0, _chainPropTypes.default)(_propTypes.default.bool, props => {
     if (props.raised && props.variant === 'outlined') {
       return new Error('MUI: Combining `raised={true}` with `variant="outlined"` has no effect.');
     }

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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/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, _composeClasses.unstable_composeClasses)(slots, _cardActionAreaClasses.getCardActionAreaUtilityClass, classes);
+  return (0, _composeClasses.default)(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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/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, _composeClasses.unstable_composeClasses)(slots, _cardActionsClasses.getCardActionsUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _cardActionsClasses.getCardActionsUtilityClass, classes);
 };
 const CardActionsRoot = (0, _styled.default)('div', {
   name: 'MuiCardActions',

package/node/CardContent/CardContent.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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _cardContentClasses = require("./cardContentClasses");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _cardContentClasses.getCardContentUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _cardContentClasses.getCardContentUtilityClass, classes);
 };
 const CardContentRoot = (0, _styled.default)('div', {
   name: 'MuiCardContent',

package/node/CardHeader/CardHeader.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 _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
     title: ['title'],
     subheader: ['subheader']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _cardHeaderClasses.getCardHeaderUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _cardHeaderClasses.getCardHeaderUtilityClass, classes);
 };
 const CardHeaderRoot = (0, _styled.default)('div', {
   name: 'MuiCardHeader',

package/node/CardMedia/CardMedia.js

@@ -11,8 +11,8 @@ 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 _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _cardMediaClasses = require("./cardMediaClasses");
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', isMediaComponent && 'media', isImageComponent && 'img']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _cardMediaClasses.getCardMediaUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _cardMediaClasses.getCardMediaUtilityClass, classes);
 };
 const CardMediaRoot = (0, _styled.default)('div', {
   name: 'MuiCardMedia',
@@ -103,7 +103,7 @@ process.env.NODE_ENV !== "production" ? CardMedia.propTypes /* remove-proptypes
   /**
    * The content of the component.
    */
-  children: (0, _utils.chainPropTypes)(_propTypes.default.node, props => {
+  children: (0, _chainPropTypes.default)(_propTypes.default.node, props => {
     if (!props.children && !props.image && !props.src && !props.component) {
       return new Error('MUI: Either `children`, `image`, `src` or `component` prop must be specified.');
     }