@mui/material 5.15.10 → 5.15.12

package/node/Menu/Menu.js

@@ -12,9 +12,9 @@ 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 _utils = require("@mui/base/utils");
-var _utils2 = require("@mui/utils");
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _MenuList = _interopRequireDefault(require("../MenuList"));
 var _Popover = _interopRequireWildcard(require("../Popover"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
@@ -43,7 +43,7 @@ const useUtilityClasses = ownerState => {
     paper: ['paper'],
     list: ['list']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _menuClasses.getMenuUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _menuClasses.getMenuUtilityClass, classes);
 };
 const MenuRoot = (0, _styled.default)(_Popover.default, {
   shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
@@ -214,7 +214,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    * An HTML element, or a function that returns one.
    * It's used to set the position of the menu.
    */
-  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils2.HTMLElementType, _propTypes.default.func]),
+  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.func]),
   /**
    * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled
    * children are not focusable. If you set this prop to `false` focus will be placed
@@ -301,7 +301,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   })]),
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    * @default {}
    */
   TransitionProps: _propTypes.default.object,

package/node/MenuItem/MenuItem.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 _composeClasses = require("@mui/base/composeClasses");
-var _system = require("@mui/system");
+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 _ListContext = _interopRequireDefault(require("../List/ListContext"));
@@ -46,7 +46,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', dense && 'dense', disabled && 'disabled', !disableGutters && 'gutters', divider && 'divider', selected && 'selected']
   };
-  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _menuItemClasses.getMenuItemUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.default)(slots, _menuItemClasses.getMenuItemUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
@@ -84,16 +84,16 @@ const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
     }
   },
   [`&.${_menuItemClasses.default.selected}`]: {
-    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),
     [`&.${_menuItemClasses.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)
     }
   },
   [`&.${_menuItemClasses.default.selected}:hover`]: {
-    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 ? `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)
     }
   },
   [`&.${_menuItemClasses.default.focusVisible}`]: {

package/node/MobileStepper/MobileStepper.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 _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _LinearProgress = _interopRequireDefault(require("../LinearProgress"));
@@ -35,7 +35,7 @@ const useUtilityClasses = ownerState => {
     dotActive: ['dotActive'],
     progress: ['progress']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _mobileStepperClasses.getMobileStepperUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _mobileStepperClasses.getMobileStepperUtilityClass, classes);
 };
 const MobileStepperRoot = (0, _styled.default)(_Paper.default, {
   name: 'MuiMobileStepper',
@@ -179,7 +179,7 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
    * Defines which dot is highlighted when the variant is 'dots'.
    * @default 0
    */
-  activeStep: _utils.integerPropType,
+  activeStep: _integerPropType.default,
   /**
    * A back button element. For instance, it can be a `Button` or an `IconButton`.
    */
@@ -208,7 +208,7 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
   /**
    * The total steps.
    */
-  steps: _utils.integerPropType.isRequired,
+  steps: _integerPropType.default.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Modal/Modal.js

@@ -11,10 +11,11 @@ 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 _base = require("@mui/base");
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
+var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _utils = require("@mui/base/utils");
 var _unstable_useModal = require("@mui/base/unstable_useModal");
-var _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("../Unstable_TrapFocus"));
 var _Portal = _interopRequireDefault(require("../Portal"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -35,7 +36,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', !open && exited && 'hidden'],
     backdrop: ['backdrop']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _modalClasses.getModalUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _modalClasses.getModalUtilityClass, classes);
 };
 const ModalRoot = (0, _styled.default)('div', {
   name: 'MuiModal',
@@ -157,7 +158,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  const rootProps = (0, _base.useSlotProps)({
+  const rootProps = (0, _utils.useSlotProps)({
     elementType: RootSlot,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
@@ -169,7 +170,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     ownerState,
     className: (0, _clsx.default)(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
   });
-  const backdropProps = (0, _base.useSlotProps)({
+  const backdropProps = (0, _utils.useSlotProps)({
     elementType: BackdropSlot,
     externalSlotProps: backdropSlotProps,
     additionalProps: BackdropProps,
@@ -235,7 +236,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
   /**
    * A single child content element.
    */
-  children: _utils.elementAcceptingRef.isRequired,
+  children: _elementAcceptingRef.default.isRequired,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -289,7 +290,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
-  container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
+  container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.func]),
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.

package/node/NativeSelect/NativeSelect.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _composeClasses = require("@mui/base/composeClasses");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _NativeSelectInput = _interopRequireDefault(require("./NativeSelectInput"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
+  return (0, _composeClasses.default)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
 };
 const defaultInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {});
 /**

package/node/NativeSelect/NativeSelectInput.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 _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _nativeSelectClasses = _interopRequireWildcard(require("./nativeSelectClasses"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
     select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', `icon${(0, _capitalize.default)(variant)}`, open && 'iconOpen', disabled && 'disabled']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
+  return (0, _composeClasses.default)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
 };
 const nativeSelectSelectStyles = ({
   ownerState,
@@ -176,7 +176,6 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
   children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
    */
   classes: _propTypes.default.object,
   /**
@@ -199,7 +198,7 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
    * Use that prop to pass a ref to the native select element.
    * @deprecated
    */
-  inputRef: _utils.refType,
+  inputRef: _refType.default,
   /**
    * @ignore
    */

package/node/OutlinedInput/NotchedOutline.js

@@ -122,7 +122,6 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
   children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
    */
   classes: _propTypes.default.object,
   /**

package/node/OutlinedInput/OutlinedInput.js

@@ -10,8 +10,8 @@ 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 _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _NotchedOutline = _interopRequireDefault(require("./NotchedOutline"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
     notchedOutline: ['notchedOutline'],
     input: ['input']
   };
-  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _outlinedInputClasses.getOutlinedInputUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.default)(slots, _outlinedInputClasses.getOutlinedInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 const OutlinedInputRoot = (0, _styled.default)(_InputBase.InputBaseRoot, {
@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: _utils.refType,
+  inputRef: _refType.default,
   /**
    * The label of the `input`. It is only used for layout. The actual labelling
    * is handled by `InputLabel`.

package/node/Pagination/Pagination.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 _composeClasses = require("@mui/base/composeClasses");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _paginationClasses = require("./paginationClasses");
 var _usePagination = _interopRequireDefault(require("../usePagination"));
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', variant],
     ul: ['ul']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _paginationClasses.getPaginationUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _paginationClasses.getPaginationUtilityClass, classes);
 };
 const PaginationRoot = (0, _styled.default)('nav', {
   name: 'MuiPagination',
@@ -141,7 +141,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    * Number of always visible pages at the beginning and end.
    * @default 1
    */
-  boundaryCount: _utils.integerPropType,
+  boundaryCount: _integerPropType.default,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -161,12 +161,12 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    * The total number of pages.
    * @default 1
    */
-  count: _utils.integerPropType,
+  count: _integerPropType.default,
   /**
    * The page selected by default when the component is uncontrolled.
    * @default 1
    */
-  defaultPage: _utils.integerPropType,
+  defaultPage: _integerPropType.default,
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -203,7 +203,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
   /**
    * The current page.
    */
-  page: _utils.integerPropType,
+  page: _integerPropType.default,
   /**
    * Render the item.
    * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
@@ -230,7 +230,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    * Number of always visible pages before and after the current page.
    * @default 1
    */
-  siblingCount: _utils.integerPropType,
+  siblingCount: _integerPropType.default,
   /**
    * The size of the component.
    * @default 'medium'

package/node/PaginationItem/PaginationItem.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 _composeClasses = require("@mui/base/composeClasses");
-var _system = require("@mui/system");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _paginationItemClasses = _interopRequireWildcard(require("./paginationItemClasses"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -56,7 +56,7 @@ const useUtilityClasses = ownerState => {
     }[type]],
     icon: ['icon']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _paginationItemClasses.getPaginationItemUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _paginationItemClasses.getPaginationItemUtilityClass, classes);
 };
 const PaginationItemEllipsis = (0, _styled.default)('div', {
   name: 'MuiPaginationItem',
@@ -123,14 +123,14 @@ const PaginationItemPage = (0, _styled.default)(_ButtonBase.default, {
   [`&.${_paginationItemClasses.default.selected}`]: {
     backgroundColor: (theme.vars || theme).palette.action.selected,
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.action.selected, 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
       }
     },
     [`&.${_paginationItemClasses.default.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     },
     [`&.${_paginationItemClasses.default.disabled}`]: {
       opacity: 1,
@@ -178,17 +178,17 @@ const PaginationItemPage = (0, _styled.default)(_ButtonBase.default, {
   border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
   [`&.${_paginationItemClasses.default.selected}`]: (0, _extends2.default)({}, ownerState.color !== 'standard' && {
     color: (theme.vars || theme).palette[ownerState.color].main,
-    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)}`,
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
+    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.5)}`,
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${_paginationItemClasses.default.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
     }
   }, {
     [`&.${_paginationItemClasses.default.disabled}`]: {

package/node/Paper/Paper.js

@@ -11,9 +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 _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
-var _system = require("@mui/system");
+var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -33,7 +34,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _paperClasses.getPaperUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _paperClasses.getPaperUtilityClass, classes);
 };
 const PaperRoot = (0, _styled.default)('div', {
   name: 'MuiPaper',
@@ -60,7 +61,7 @@ const PaperRoot = (0, _styled.default)('div', {
   }, ownerState.variant === 'elevation' && (0, _extends2.default)({
     boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
   }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${(0, _system.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))}, ${(0, _system.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))})`
+    backgroundImage: `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))})`
   }, theme.vars && {
     backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
   }));
@@ -126,7 +127,7 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
    * It accepts values between 0 and 24 inclusive.
    * @default 1
    */
-  elevation: (0, _utils.chainPropTypes)(_utils.integerPropType, props => {
+  elevation: (0, _chainPropTypes.default)(_integerPropType.default, props => {
     const {
       elevation,
       variant

package/node/Popover/Popover.js

@@ -13,8 +13,13 @@ 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 _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
+var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
@@ -67,7 +72,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     paper: ['paper']
   };
-  return (0, _base.unstable_composeClasses)(slots, _popoverClasses.getPopoverUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _popoverClasses.getPopoverUtilityClass, classes);
 };
 const PopoverRoot = exports.PopoverRoot = (0, _styled.default)(_Modal.default, {
   name: 'MuiPopover',
@@ -309,7 +314,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   const container = containerProp || (anchorEl ? (0, _ownerDocument.default)(resolveAnchorEl(anchorEl)).body : undefined);
   const RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
   const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
-  const paperProps = (0, _base.useSlotProps)({
+  const paperProps = (0, _utils.useSlotProps)({
     elementType: PaperSlot,
     externalSlotProps: (0, _extends2.default)({}, externalPaperSlotProps, {
       style: isPositioned ? externalPaperSlotProps.style : (0, _extends2.default)({}, externalPaperSlotProps.style, {
@@ -323,7 +328,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     ownerState,
     className: (0, _clsx.default)(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
   });
-  const _useSlotProps = (0, _base.useSlotProps)({
+  const _useSlotProps = (0, _utils.useSlotProps)({
       elementType: RootSlot,
       externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
       externalForwardedProps: other,
@@ -344,7 +349,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       slotProps: rootSlotPropsProp
     } = _useSlotProps,
     rootProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded3);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, (0, _extends2.default)({}, rootProps, !(0, _base.isHostComponent)(RootSlot) && {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, (0, _extends2.default)({}, rootProps, !(0, _utils.isHostComponent)(RootSlot) && {
     slotProps: rootSlotPropsProp,
     disableScrollLock
   }, {
@@ -370,13 +375,13 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * A ref for imperative actions.
    * It currently only supports updatePosition() action.
    */
-  action: _utils.refType,
+  action: _refType.default,
   /**
    * An HTML element, [PopoverVirtualElement](/material-ui/react-popover/#virtual-element),
    * or a function that returns either.
    * It's used to set the position of the popover.
    */
-  anchorEl: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_utils.HTMLElementType, _propTypes.default.func]), props => {
+  anchorEl: (0, _chainPropTypes.default)(_propTypes.default.oneOfType([_HTMLElementType.default, _propTypes.default.func]), props => {
     if (props.open && (!props.anchorReference || props.anchorReference === 'anchorEl')) {
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
@@ -440,7 +445,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * By default, it uses the body of the anchorEl's top-level document object,
    * so it's simply `document.body` most of the time.
    */
-  container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
+  container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.func]),
   /**
    * Disable the scroll lock behavior.
    * @default false
@@ -450,7 +455,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * The elevation of the popover.
    * @default 8
    */
-  elevation: _utils.integerPropType,
+  elevation: _integerPropType.default,
   /**
    * Specifies how close to the edge of the window the popover can appear.
    * If null, the popover will not be constrained by the window.
@@ -475,7 +480,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default {}
    */
   PaperProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
-    component: _utils.elementTypeAcceptingRef
+    component: _elementTypeAcceptingRef.default
   }),
   /**
    * The extra props for the slot components.
@@ -533,7 +538,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   })]),
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    * @default {}
    */
   TransitionProps: _propTypes.default.object

package/node/Popper/Popper.js

@@ -9,8 +9,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _Popper = require("@mui/base/Popper");
-var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _useThemeWithoutDefault = _interopRequireDefault(require("@mui/system/useThemeWithoutDefault"));
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("../styles");
@@ -38,7 +39,7 @@ const PopperRoot = (0, _styles.styled)(_Popper.Popper, {
  */
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   var _slots$root;
-  const theme = (0, _system.useThemeWithoutDefault)();
+  const theme = (0, _useThemeWithoutDefault.default)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiPopper'
@@ -96,7 +97,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.object, _propTypes.default.func]),
+  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.object, _propTypes.default.func]),
   /**
    * Popper render function or node.
    */
@@ -131,7 +132,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */
-  container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
+  container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.func]),
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false
@@ -186,7 +187,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
   /**
    * A ref that points to the used popper instance.
    */
-  popperRef: _utils.refType,
+  popperRef: _refType.default,
   /**
    * The props used for each slot inside the Popper.
    * @default {}

package/node/Radio/Radio.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 _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
@@ -35,7 +35,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${(0, _capitalize.default)(color)}`, size !== 'medium' && `size${(0, _capitalize.default)(size)}`]
   };
-  return (0, _extends2.default)({}, classes, (0, _composeClasses.unstable_composeClasses)(slots, _radioClasses.getRadioUtilityClass, classes));
+  return (0, _extends2.default)({}, classes, (0, _composeClasses.default)(slots, _radioClasses.getRadioUtilityClass, classes));
 };
 const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
   shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
@@ -54,7 +54,7 @@ const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
   color: (theme.vars || theme).palette.text.secondary
 }, !ownerState.disableRipple && {
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -186,7 +186,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: _utils.refType,
+  inputRef: _refType.default,
   /**
    * Name attribute of the `input` element.
    */