@mui/material 5.15.10 → 5.15.12

package/node/Alert/Alert.js

@@ -11,10 +11,10 @@ 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 _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _zeroStyled = require("../zero-styled");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _alertClasses = _interopRequireWildcard(require("./alertClasses"));
@@ -28,6 +28,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     variant,
@@ -36,14 +37,14 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `${variant}${(0, _capitalize.default)(color || severity)}`, `${variant}`],
+    root: ['root', `color${(0, _capitalize.default)(color || severity)}`, `${variant}${(0, _capitalize.default)(color || severity)}`, `${variant}`],
     icon: ['icon'],
     message: ['message'],
     action: ['action']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _alertClasses.getAlertUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _alertClasses.getAlertUtilityClass, classes);
 };
-const AlertRoot = (0, _styled.default)(_Paper.default, {
+const AlertRoot = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiAlert',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -53,43 +54,60 @@ const AlertRoot = (0, _styled.default)(_Paper.default, {
     return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${(0, _capitalize.default)(ownerState.color || ownerState.severity)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  const getColor = theme.palette.mode === 'light' ? _system.darken : _system.lighten;
-  const getBackgroundColor = theme.palette.mode === 'light' ? _system.lighten : _system.darken;
-  const color = ownerState.color || ownerState.severity;
+  const getColor = theme.palette.mode === 'light' ? _colorManipulator.darken : _colorManipulator.lighten;
+  const getBackgroundColor = theme.palette.mode === 'light' ? _colorManipulator.lighten : _colorManipulator.darken;
   return (0, _extends2.default)({}, theme.typography.body2, {
     backgroundColor: 'transparent',
     display: 'flex',
-    padding: '6px 16px'
-  }, color && ownerState.variant === 'standard' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
-    [`& .${_alertClasses.default.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'outlined' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    border: `1px solid ${(theme.vars || theme).palette[color].light}`,
-    [`& .${_alertClasses.default.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'filled' && (0, _extends2.default)({
-    fontWeight: theme.typography.fontWeightMedium
-  }, theme.vars ? {
-    color: theme.vars.palette.Alert[`${color}FilledColor`],
-    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
-  } : {
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
-    color: theme.palette.getContrastText(theme.palette[color].main)
-  }));
+    padding: '6px 16px',
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'standard'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+        [`& .${_alertClasses.default.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'outlined'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+        [`& .${_alertClasses.default.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'filled'
+      },
+      style: (0, _extends2.default)({
+        fontWeight: theme.typography.fontWeightMedium
+      }, theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}FilledColor`],
+        backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+      } : {
+        backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+        color: theme.palette.getContrastText(theme.palette[color].main)
+      })
+    }))]
+  });
 });
-const AlertIcon = (0, _styled.default)('div', {
+const AlertIcon = (0, _zeroStyled.styled)('div', {
   name: 'MuiAlert',
   slot: 'Icon',
   overridesResolver: (props, styles) => styles.icon
@@ -100,7 +118,7 @@ const AlertIcon = (0, _styled.default)('div', {
   fontSize: 22,
   opacity: 0.9
 });
-const AlertMessage = (0, _styled.default)('div', {
+const AlertMessage = (0, _zeroStyled.styled)('div', {
   name: 'MuiAlert',
   slot: 'Message',
   overridesResolver: (props, styles) => styles.message
@@ -109,7 +127,7 @@ const AlertMessage = (0, _styled.default)('div', {
   minWidth: 0,
   overflow: 'auto'
 });
-const AlertAction = (0, _styled.default)('div', {
+const AlertAction = (0, _zeroStyled.styled)('div', {
   name: 'MuiAlert',
   slot: 'Action',
   overridesResolver: (props, styles) => styles.action
@@ -135,8 +153,7 @@ const defaultIconMapping = {
   })
 };
 const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
-  var _ref, _slots$closeButton, _ref2, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiAlert'
   });
@@ -161,13 +178,27 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   const ownerState = (0, _extends2.default)({}, props, {
     color,
     severity,
-    variant
+    variant,
+    colorSeverity: color || severity
   });
   const classes = useUtilityClasses(ownerState);
-  const AlertCloseButton = (_ref = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref : _IconButton.default;
-  const AlertCloseIcon = (_ref2 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref2 : _Close.default;
-  const closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
-  const closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;
+  const externalForwardedProps = {
+    slots: (0, _extends2.default)({
+      closeButton: components.CloseButton,
+      closeIcon: components.CloseIcon
+    }, slots),
+    slotProps: (0, _extends2.default)({}, componentsProps, slotProps)
+  };
+  const [CloseButtonSlot, closeButtonProps] = (0, _useSlot.default)('closeButton', {
+    elementType: _IconButton.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [CloseIconSlot, closeIconProps] = (0, _useSlot.default)('closeIcon', {
+    elementType: _Close.default,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AlertRoot, (0, _extends2.default)({
     role: role,
     elevation: 0,
@@ -190,14 +221,14 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
       ownerState: ownerState,
       className: classes.action,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertCloseButton, (0, _extends2.default)({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButtonSlot, (0, _extends2.default)({
         size: "small",
         "aria-label": closeText,
         title: closeText,
         color: "inherit",
         onClick: onClose
       }, closeButtonProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertCloseIcon, (0, _extends2.default)({
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseIconSlot, (0, _extends2.default)({
           fontSize: "small"
         }, closeIconProps))
       }))
@@ -241,8 +272,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -254,8 +284,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -298,22 +327,15 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    */
   severity: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['error', 'info', 'success', 'warning']), _propTypes.default.string]),
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    closeButton: _propTypes.default.object,
-    closeIcon: _propTypes.default.object
+    closeButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    closeIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({

package/node/Alert/alertClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getAlertUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAlert', slot);
 }
-const alertClasses = (0, _generateUtilityClasses.default)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+const alertClasses = (0, _generateUtilityClasses.default)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'colorSuccess', 'colorInfo', 'colorWarning', 'colorError', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 var _default = exports.default = alertClasses;

package/node/AlertTitle/AlertTitle.js

@@ -11,15 +11,15 @@ 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 _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _zeroStyled = require("../zero-styled");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _alertTitleClasses = require("./alertTitleClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAlertTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -27,9 +27,9 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _alertTitleClasses.getAlertTitleUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _alertTitleClasses.getAlertTitleUtilityClass, classes);
 };
-const AlertTitleRoot = (0, _styled.default)(_Typography.default, {
+const AlertTitleRoot = (0, _zeroStyled.styled)(_Typography.default, {
   name: 'MuiAlertTitle',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -42,7 +42,7 @@ const AlertTitleRoot = (0, _styled.default)(_Typography.default, {
   };
 });
 const AlertTitle = /*#__PURE__*/React.forwardRef(function AlertTitle(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     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 _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 _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, _composeClasses.unstable_composeClasses)(slots, _appBarClasses.getAppBarUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _appBarClasses.getAppBarUtilityClass, classes);
 };
 
 // var2 is the fallback.

package/node/Autocomplete/Autocomplete.js

@@ -18,9 +18,11 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _base = require("@mui/base");
-var _system = require("@mui/system");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
 var _Paper = _interopRequireDefault(require("../Paper"));
@@ -73,7 +75,7 @@ const useUtilityClasses = ownerState => {
     groupLabel: ['groupLabel'],
     groupUl: ['groupUl']
   };
-  return (0, _base.unstable_composeClasses)(slots, _autocompleteClasses.getAutocompleteUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _autocompleteClasses.getAutocompleteUtilityClass, classes);
 };
 const AutocompleteRoot = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
@@ -227,7 +229,8 @@ const AutocompleteEndAdornment = (0, _styled.default)('div', {
   // We use a position absolute to support wrapping tags.
   position: 'absolute',
   right: 0,
-  top: 'calc(50% - 14px)' // Center vertically
+  top: '50%',
+  transform: 'translate(0, -50%)'
 });
 const AutocompleteClearIndicator = (0, _styled.default)(_IconButton.default, {
   name: 'MuiAutocomplete',
@@ -345,16 +348,16 @@ const AutocompleteListbox = (0, _styled.default)('div', {
       backgroundColor: (theme.vars || theme).palette.action.focus
     },
     '&[aria-selected="true"]': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       [`&.${_autocompleteClasses.default.focused}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
       [`&.${_autocompleteClasses.default.focusVisible}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     }
   }
@@ -758,7 +761,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
    */
-  defaultValue: (0, _utils.chainPropTypes)(_propTypes.default.any, props => {
+  defaultValue: (0, _chainPropTypes.default)(_propTypes.default.any, props => {
     if (props.multiple && props.defaultValue !== undefined && !Array.isArray(props.defaultValue)) {
       return new Error(['MUI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', `However, ${props.defaultValue} was provided.`].join('\n'));
     }
@@ -900,7 +903,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Set `-1` to disable the limit.
    * @default -1
    */
-  limitTags: _utils.integerPropType,
+  limitTags: _integerPropType.default,
   /**
    * The component used to render the listbox.
    * @default 'ul'
@@ -1083,7 +1086,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * The value must have reference equality with the option in order to be selected.
    * You can customize the equality behavior with the `isOptionEqualToValue` prop.
    */
-  value: (0, _utils.chainPropTypes)(_propTypes.default.any, props => {
+  value: (0, _chainPropTypes.default)(_propTypes.default.any, props => {
     if (props.multiple && props.value !== undefined && !Array.isArray(props.value)) {
       return new Error(['MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', `However, ${props.value} was provided.`].join('\n'));
     }

package/node/Avatar/Avatar.js

@@ -11,9 +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 _composeClasses = require("@mui/base/composeClasses");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _zeroStyled = require("../zero-styled");
 var _Person = _interopRequireDefault(require("../internal/svg-icons/Person"));
 var _avatarClasses = require("./avatarClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
@@ -21,6 +20,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAvatar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -32,9 +32,9 @@ 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', {
+const AvatarRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiAvatar',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -88,7 +88,7 @@ const AvatarRoot = (0, _styled.default)('div', {
     })))
   }]
 }));
-const AvatarImg = (0, _styled.default)('img', {
+const AvatarImg = (0, _zeroStyled.styled)('img', {
   name: 'MuiAvatar',
   slot: 'Img',
   overridesResolver: (props, styles) => styles.img
@@ -103,7 +103,7 @@ const AvatarImg = (0, _styled.default)('img', {
   // Hide the image broken icon, only works on Chrome.
   textIndent: 10000
 });
-const AvatarFallback = (0, _styled.default)(_Person.default, {
+const AvatarFallback = (0, _zeroStyled.styled)(_Person.default, {
   name: 'MuiAvatar',
   slot: 'Fallback',
   overridesResolver: (props, styles) => styles.fallback
@@ -150,7 +150,7 @@ function useLoaded({
   return loaded;
 }
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiAvatar'
   });

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)({