@mui/material 5.15.10 → 5.15.11

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.');
     }

package/node/Checkbox/Checkbox.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 _CheckBoxOutlineBlank = _interopRequireDefault(require("../internal/svg-icons/CheckBoxOutlineBlank"));
 var _CheckBox = _interopRequireDefault(require("../internal/svg-icons/CheckBox"));
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', indeterminate && 'indeterminate', `color${(0, _capitalize.default)(color)}`, `size${(0, _capitalize.default)(size)}`]
   };
-  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _checkboxClasses.getCheckboxUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.default)(slots, _checkboxClasses.getCheckboxUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
@@ -56,7 +56,7 @@ const CheckboxRoot = (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'
@@ -188,7 +188,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: _utils.refType,
+  inputRef: _refType.default,
   /**
    * Callback fired when the state is changed.
    *

package/node/Chip/Chip.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 _Cancel = _interopRequireDefault(require("../internal/svg-icons/Cancel"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
@@ -43,7 +43,7 @@ const useUtilityClasses = ownerState => {
     icon: ['icon', `icon${(0, _capitalize.default)(size)}`, `iconColor${(0, _capitalize.default)(iconColor)}`],
     deleteIcon: ['deleteIcon', `deleteIcon${(0, _capitalize.default)(size)}`, `deleteIconColor${(0, _capitalize.default)(color)}`, `deleteIcon${(0, _capitalize.default)(variant)}Color${(0, _capitalize.default)(color)}`]
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _chipClasses.getChipUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _chipClasses.getChipUtilityClass, classes);
 };
 const ChipRoot = (0, _styled.default)('div', {
   name: 'MuiChip',
@@ -152,19 +152,19 @@ const ChipRoot = (0, _styled.default)('div', {
     })),
     [`& .${_chipClasses.default.deleteIcon}`]: (0, _extends2.default)({
       WebkitTapHighlightColor: 'transparent',
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : (0, _system.alpha)(theme.palette.text.primary, 0.26),
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : (0, _colorManipulator.alpha)(theme.palette.text.primary, 0.26),
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _system.alpha)(theme.palette.text.primary, 0.4)
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.primary, 0.4)
       }
     }, ownerState.size === 'small' && {
       fontSize: 16,
       marginRight: 4,
       marginLeft: -4
     }, ownerState.color !== 'default' && {
-      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].contrastText, 0.7),
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].contrastText, 0.7),
       '&:hover, &:active': {
         color: (theme.vars || theme).palette[ownerState.color].contrastText
       }
@@ -176,7 +176,7 @@ const ChipRoot = (0, _styled.default)('div', {
     color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && {
     [`&.${_chipClasses.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)
     }
   }, ownerState.onDelete && ownerState.color !== 'default' && {
     [`&.${_chipClasses.default.focusVisible}`]: {
@@ -191,10 +191,10 @@ const ChipRoot = (0, _styled.default)('div', {
   WebkitTapHighlightColor: 'transparent',
   cursor: 'pointer',
   '&: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)
   },
   [`&.${_chipClasses.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)
   },
   '&:active': {
     boxShadow: (theme.vars || theme).shadows[1]
@@ -235,15 +235,15 @@ const ChipRoot = (0, _styled.default)('div', {
   }
 }, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
   color: (theme.vars || theme).palette[ownerState.color].main,
-  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7)}`,
+  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.7)}`,
   [`&.${_chipClasses.default.clickable}:hover`]: {
-    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)
   },
   [`&.${_chipClasses.default.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
   },
   [`& .${_chipClasses.default.deleteIcon}`]: {
-    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7),
+    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.7),
     '&:hover, &:active': {
       color: (theme.vars || theme).palette[ownerState.color].main
     }

package/node/CircularProgress/CircularProgress.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 _system = require("@mui/system");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -60,7 +60,7 @@ const useUtilityClasses = ownerState => {
     svg: ['svg'],
     circle: ['circle', `circle${(0, _capitalize.default)(variant)}`, disableShrink && 'circleDisableShrink']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _circularProgressClasses.getCircularProgressUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _circularProgressClasses.getCircularProgressUtilityClass, classes);
 };
 const CircularProgressRoot = (0, _styled.default)('span', {
   name: 'MuiCircularProgress',
@@ -212,7 +212,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
    * This only works if variant is `indeterminate`.
    * @default false
    */
-  disableShrink: (0, _utils.chainPropTypes)(_propTypes.default.bool, props => {
+  disableShrink: (0, _chainPropTypes.default)(_propTypes.default.bool, props => {
     if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
       return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
     }

package/node/Collapse/Collapse.js

@@ -12,14 +12,15 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
-var _utils = require("@mui/utils");
-var _composeClasses = require("@mui/base/composeClasses");
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
+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 _createTransitions = require("../styles/createTransitions");
-var _utils2 = require("../transitions/utils");
+var _utils = require("../transitions/utils");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _utils3 = require("../utils");
+var _utils2 = require("../utils");
 var _collapseClasses = require("./collapseClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
@@ -37,7 +38,7 @@ const useUtilityClasses = ownerState => {
     wrapper: ['wrapper', `${orientation}`],
     wrapperInner: ['wrapperInner', `${orientation}`]
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _collapseClasses.getCollapseUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _collapseClasses.getCollapseUtilityClass, classes);
 };
 const CollapseRoot = (0, _styled.default)('div', {
   name: 'MuiCollapse',
@@ -131,14 +132,14 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   const theme = (0, _useTheme.default)();
-  const timer = (0, _utils.unstable_useTimeout)();
+  const timer = (0, _useTimeout.default)();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
   const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const isHorizontal = orientation === 'horizontal';
   const size = isHorizontal ? 'width' : 'height';
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _utils3.useForkRef)(ref, nodeRef);
+  const handleRef = (0, _utils2.useForkRef)(ref, nodeRef);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;
@@ -171,7 +172,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     const {
       duration: transitionDuration,
       easing: transitionTimingFunction
-    } = (0, _utils2.getTransitionProps)({
+    } = (0, _utils.getTransitionProps)({
       style,
       timeout,
       easing
@@ -209,7 +210,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     const {
       duration: transitionDuration,
       easing: transitionTimingFunction
-    } = (0, _utils2.getTransitionProps)({
+    } = (0, _utils.getTransitionProps)({
       style,
       timeout,
       easing
@@ -261,11 +262,13 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
       style: (0, _extends2.default)({
         [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize
       }, style),
+      ref: handleRef
+    }, childProps, {
+      // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
+      // that might have been forwarded from the Transition component.
       ownerState: (0, _extends2.default)({}, ownerState, {
         state
       }),
-      ref: handleRef
-    }, childProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapseWrapper, {
         ownerState: (0, _extends2.default)({}, ownerState, {
           state
@@ -315,7 +318,7 @@ process.env.NODE_ENV !== "production" ? Collapse.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,
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.

package/node/Dialog/Dialog.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 _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _Fade = _interopRequireDefault(require("../Fade"));
@@ -48,7 +48,7 @@ const useUtilityClasses = ownerState => {
     container: ['container', `scroll${(0, _capitalize.default)(scroll)}`],
     paper: ['paper', `paperScroll${(0, _capitalize.default)(scroll)}`, `paperWidth${(0, _capitalize.default)(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _dialogClasses.getDialogUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _dialogClasses.getDialogUtilityClass, classes);
 };
 const DialogRoot = (0, _styled.default)(_Modal.default, {
   name: 'MuiDialog',
@@ -216,7 +216,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       onClose(event, 'backdropClick');
     }
   };
-  const ariaLabelledby = (0, _utils.unstable_useId)(ariaLabelledbyProp);
+  const ariaLabelledby = (0, _useId.default)(ariaLabelledbyProp);
   const dialogContextValue = React.useMemo(() => {
     return {
       titleId: ariaLabelledby
@@ -393,7 +393,7 @@ process.env.NODE_ENV !== "production" ? Dialog.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.
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/DialogActions/DialogActions.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 _dialogActionsClasses = require("./dialogActionsClasses");
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', !disableSpacing && 'spacing']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _dialogActionsClasses.getDialogActionsUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _dialogActionsClasses.getDialogActionsUtilityClass, classes);
 };
 const DialogActionsRoot = (0, _styled.default)('div', {
   name: 'MuiDialogActions',