@mui/material 5.15.9 → 5.15.11

package/node/Slider/Slider.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 _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useSlider = require("@mui/base/useSlider");
-var _system = require("@mui/system");
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -126,7 +127,7 @@ const SliderTrack = exports.SliderTrack = (0, _styled.default)('span', {
 }) => {
   const color =
   // Same logic as the LinearProgress track color
-  theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.5);
+  theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[ownerState.color].main, 0.5);
   return (0, _extends2.default)({
     display: 'block',
     position: 'absolute',
@@ -211,13 +212,13 @@ const SliderThumb = exports.SliderThumb = (0, _styled.default)('span', {
     transform: 'translate(-50%, -50%)'
   },
   [`&:hover, &.${_sliderClasses.default.focusVisible}`]: {
-    boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
+    boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   },
   [`&.${_sliderClasses.default.active}`]: {
-    boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`
+    boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.16)}`
   },
   [`&.${_sliderClasses.default.disabled}`]: {
     '&:hover': {
@@ -366,7 +367,7 @@ const useUtilityClasses = ownerState => {
     disabled: ['disabled'],
     focusVisible: ['focusVisible']
   };
-  return (0, _base.unstable_composeClasses)(slots, _sliderClasses.getSliderUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _sliderClasses.getSliderUtilityClass, classes);
 };
 const Forward = ({
   children
@@ -468,7 +469,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
   const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
   const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-  const rootProps = (0, _base.useSlotProps)({
+  const rootProps = (0, _utils.useSlotProps)({
     elementType: RootSlot,
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
@@ -479,13 +480,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     ownerState: (0, _extends2.default)({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
     className: [classes.root, className]
   });
-  const railProps = (0, _base.useSlotProps)({
+  const railProps = (0, _utils.useSlotProps)({
     elementType: RailSlot,
     externalSlotProps: railSlotProps,
     ownerState,
     className: classes.rail
   });
-  const trackProps = (0, _base.useSlotProps)({
+  const trackProps = (0, _utils.useSlotProps)({
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
@@ -494,32 +495,32 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     ownerState: (0, _extends2.default)({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
     className: classes.track
   });
-  const thumbProps = (0, _base.useSlotProps)({
+  const thumbProps = (0, _utils.useSlotProps)({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
     ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
     className: classes.thumb
   });
-  const valueLabelProps = (0, _base.useSlotProps)({
+  const valueLabelProps = (0, _utils.useSlotProps)({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
     ownerState: (0, _extends2.default)({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
     className: classes.valueLabel
   });
-  const markProps = (0, _base.useSlotProps)({
+  const markProps = (0, _utils.useSlotProps)({
     elementType: MarkSlot,
     externalSlotProps: markSlotProps,
     ownerState,
     className: classes.mark
   });
-  const markLabelProps = (0, _base.useSlotProps)({
+  const markLabelProps = (0, _utils.useSlotProps)({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
     ownerState,
     className: classes.markLabel
   });
-  const inputSliderProps = (0, _base.useSlotProps)({
+  const inputSliderProps = (0, _utils.useSlotProps)({
     elementType: InputSlot,
     getSlotProps: getHiddenInputProps,
     externalSlotProps: inputSlotProps,
@@ -538,7 +539,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, (0, _extends2.default)({
           "data-index": index
-        }, markProps, !(0, _base.isHostComponent)(MarkSlot) && {
+        }, markProps, !(0, _utils.isHostComponent)(MarkSlot) && {
           markActive
         }, {
           style: (0, _extends2.default)({}, style, markProps.style),
@@ -546,7 +547,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
         })), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, (0, _extends2.default)({
           "aria-hidden": true,
           "data-index": index
-        }, markLabelProps, !(0, _base.isHostComponent)(MarkLabelSlot) && {
+        }, markLabelProps, !(0, _utils.isHostComponent)(MarkLabelSlot) && {
           markLabelActive: markActive
         }, {
           style: (0, _extends2.default)({}, style, markLabelProps.style),
@@ -561,7 +562,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       return (
         /*#__PURE__*/
         /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
-        (0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _base.isHostComponent)(ValueLabelComponent) && {
+        (0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _utils.isHostComponent)(ValueLabelComponent) && {
           valueLabelFormat,
           valueLabelDisplay,
           value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
@@ -596,7 +597,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The label of the slider.
    */
-  'aria-label': (0, _utils.chainPropTypes)(_propTypes.default.string, props => {
+  'aria-label': (0, _chainPropTypes.default)(_propTypes.default.string, props => {
     const range = Array.isArray(props.value || props.defaultValue);
     if (range && props['aria-label'] != null) {
       return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
@@ -610,7 +611,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * A string value that provides a user-friendly name for the current value of the slider.
    */
-  'aria-valuetext': (0, _utils.chainPropTypes)(_propTypes.default.string, props => {
+  'aria-valuetext': (0, _chainPropTypes.default)(_propTypes.default.string, props => {
     const range = Array.isArray(props.value || props.defaultValue);
     if (range && props['aria-valuetext'] != null) {
       return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');

package/node/Snackbar/Snackbar.js

@@ -10,7 +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 _base = require("@mui/base");
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ClickAwayListener = require("@mui/base/ClickAwayListener");
 var _useSnackbar = require("@mui/base/useSnackbar");
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -33,7 +34,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`]
   };
-  return (0, _base.unstable_composeClasses)(slots, _snackbarClasses.getSnackbarUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _snackbarClasses.getSnackbarUtilityClass, classes);
 };
 const SnackbarRoot = (0, _styled.default)('div', {
   name: 'MuiSnackbar',
@@ -135,7 +136,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     onClickAway
   } = (0, _useSnackbar.useSnackbar)((0, _extends2.default)({}, ownerState));
   const [exited, setExited] = React.useState(true);
-  const rootProps = (0, _base.useSlotProps)({
+  const rootProps = (0, _utils.useSlotProps)({
     elementType: SnackbarRoot,
     getSlotProps: getRootProps,
     externalForwardedProps: other,
@@ -308,7 +309,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.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/SnackbarContent/SnackbarContent.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 = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Paper = _interopRequireDefault(require("../Paper"));
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
     action: ['action'],
     message: ['message']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _snackbarContentClasses.getSnackbarContentUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _snackbarContentClasses.getSnackbarContentUtilityClass, classes);
 };
 const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
   name: 'MuiSnackbarContent',
@@ -40,7 +40,7 @@ const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
   theme
 }) => {
   const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
-  const backgroundColor = (0, _system.emphasize)(theme.palette.background.default, emphasis);
+  const backgroundColor = (0, _colorManipulator.emphasize)(theme.palette.background.default, emphasis);
   return (0, _extends2.default)({}, theme.typography.body2, {
     color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),
     backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,

package/node/SpeedDial/SpeedDial.js

@@ -12,8 +12,9 @@ var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _composeClasses = require("@mui/base/composeClasses");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
+var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -41,7 +42,7 @@ const useUtilityClasses = ownerState => {
     fab: ['fab'],
     actions: ['actions', !open && 'actionsClosed']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _speedDialClasses.getSpeedDialUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _speedDialClasses.getSpeedDialUtilityClass, classes);
 };
 function getOrientation(direction) {
   if (direction === 'up' || direction === 'down') {
@@ -170,7 +171,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     direction
   });
   const classes = useUtilityClasses(ownerState);
-  const eventTimer = (0, _utils.unstable_useTimeout)();
+  const eventTimer = (0, _useTimeout.default)();
 
   /**
    * an index in actions.current
@@ -234,7 +235,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
       const actionStep = key === nextItemArrowKeyCurrent ? 1 : -1;
 
       // stay within array indices
-      const nextAction = (0, _utils.clamp)(focusedAction.current + actionStep, 0, actions.current.length - 1);
+      const nextAction = (0, _clamp.default)(focusedAction.current + actionStep, 0, actions.current.length - 1);
       actions.current[nextAction].focus();
       focusedAction.current = nextAction;
       nextItemArrowKey.current = nextItemArrowKeyCurrent;
@@ -493,7 +494,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.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/SpeedDialAction/SpeedDialAction.js

@@ -12,8 +12,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 = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Fab = _interopRequireDefault(require("../Fab"));
@@ -35,7 +35,7 @@ const useUtilityClasses = ownerState => {
     staticTooltip: ['staticTooltip', `tooltipPlacement${(0, _capitalize.default)(tooltipPlacement)}`, !open && 'staticTooltipClosed'],
     staticTooltipLabel: ['staticTooltipLabel']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _speedDialActionClasses.getSpeedDialActionUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _speedDialActionClasses.getSpeedDialActionUtilityClass, classes);
 };
 const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
   name: 'MuiSpeedDialAction',
@@ -55,7 +55,7 @@ const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
   color: (theme.vars || theme).palette.text.secondary,
   backgroundColor: (theme.vars || theme).palette.background.paper,
   '&:hover': {
-    backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : (0, _system.emphasize)(theme.palette.background.paper, 0.15)
+    backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : (0, _colorManipulator.emphasize)(theme.palette.background.paper, 0.15)
   },
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter

package/node/SpeedDialIcon/SpeedDialIcon.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 _Add = _interopRequireDefault(require("../internal/svg-icons/Add"));
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
     icon: ['icon', open && 'iconOpen', openIcon && open && 'iconWithOpenIconOpen'],
     openIcon: ['openIcon', open && 'openIconOpen']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _speedDialIconClasses.getSpeedDialIconUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _speedDialIconClasses.getSpeedDialIconUtilityClass, classes);
 };
 const SpeedDialIconRoot = (0, _styled.default)('span', {
   name: 'MuiSpeedDialIcon',

package/node/Step/Step.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 _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
 var _StepContext = _interopRequireDefault(require("./StepContext"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation, alternativeLabel && 'alternativeLabel', completed && 'completed']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _stepClasses.getStepUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _stepClasses.getStepUtilityClass, classes);
 };
 const StepRoot = (0, _styled.default)('div', {
   name: 'MuiStep',
@@ -162,7 +162,7 @@ process.env.NODE_ENV !== "production" ? Step.propTypes /* remove-proptypes */ =
    * The position of the step.
    * The prop defaults to the value inherited from the parent Stepper component.
    */
-  index: _utils.integerPropType,
+  index: _integerPropType.default,
   /**
    * If `true`, the Step is displayed as rendered last.
    * The prop defaults to the value inherited from the parent Stepper component.

package/node/StepButton/StepButton.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"));
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', orientation],
     touchRipple: ['touchRipple']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _stepButtonClasses.getStepButtonUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _stepButtonClasses.getStepButtonUtilityClass, classes);
 };
 const StepButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiStepButton',

package/node/StepConnector/StepConnector.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 _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -35,7 +35,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', orientation, alternativeLabel && 'alternativeLabel', active && 'active', completed && 'completed', disabled && 'disabled'],
     line: ['line', `line${(0, _capitalize.default)(orientation)}`]
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _stepConnectorClasses.getStepConnectorUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _stepConnectorClasses.getStepConnectorUtilityClass, classes);
 };
 const StepConnectorRoot = (0, _styled.default)('div', {
   name: 'MuiStepConnector',

package/node/StepContent/StepContent.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 _Collapse = _interopRequireDefault(require("../Collapse"));
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', last && 'last'],
     transition: ['transition']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _stepContentClasses.getStepContentUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _stepContentClasses.getStepContentUtilityClass, classes);
 };
 const StepContentRoot = (0, _styled.default)('div', {
   name: 'MuiStepContent',
@@ -152,7 +152,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
   })]),
   /**
    * 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/StepIcon/StepIcon.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 _CheckCircle = _interopRequireDefault(require("../internal/svg-icons/CheckCircle"));
@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', active && 'active', completed && 'completed', error && 'error'],
     text: ['text']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _stepIconClasses.getStepIconUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _stepIconClasses.getStepIconUtilityClass, classes);
 };
 const StepIconRoot = (0, _styled.default)(_SvgIcon.default, {
   name: 'MuiStepIcon',

package/node/StepLabel/StepLabel.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 _StepIcon = _interopRequireDefault(require("../StepIcon"));
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     labelContainer: ['labelContainer', alternativeLabel && 'alternativeLabel']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _stepLabelClasses.getStepLabelUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _stepLabelClasses.getStepLabelUtilityClass, classes);
 };
 const StepLabelRoot = (0, _styled.default)('span', {
   name: 'MuiStepLabel',

package/node/Stepper/Stepper.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 _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _stepperClasses = require("./stepperClasses");
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation, alternativeLabel && 'alternativeLabel']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _stepperClasses.getStepperUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _stepperClasses.getStepperUtilityClass, classes);
 };
 const StepperRoot = (0, _styled.default)('div', {
   name: 'MuiStepper',
@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */
    * Set to -1 to disable all the steps.
    * @default 0
    */
-  activeStep: _utils.integerPropType,
+  activeStep: _integerPropType.default,
   /**
    * If set to 'true' and orientation is horizontal,
    * then the step label will be positioned under the icon.

package/node/SvgIcon/SvgIcon.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 _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', color !== 'inherit' && `color${(0, _capitalize.default)(color)}`, `fontSize${(0, _capitalize.default)(fontSize)}`]
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _svgIconClasses.getSvgIconUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _svgIconClasses.getSvgIconUtilityClass, classes);
 };
 const SvgIconRoot = (0, _styled.default)('svg', {
   name: 'MuiSvgIcon',

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -12,8 +12,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
-var _system = require("@mui/system");
+var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
+var _useThemeProps = _interopRequireDefault(require("@mui/system/useThemeProps"));
 var _base = require("@mui/base");
 var _Drawer = _interopRequireWildcard(require("../Drawer/Drawer"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -22,7 +22,7 @@ var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _utils2 = require("../transitions/utils");
+var _utils = require("../transitions/utils");
 var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["BackdropProps"],
@@ -125,7 +125,7 @@ function computeHasNativeHandler({
 }
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
 const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
-  const props = (0, _system.useThemeProps)({
+  const props = (0, _useThemeProps.default)({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });
@@ -188,7 +188,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     drawerStyle.transform = transform;
     let transition = '';
     if (mode) {
-      transition = theme.transitions.create('all', (0, _utils2.getTransitionProps)({
+      transition = theme.transitions.create('all', (0, _utils.getTransitionProps)({
         easing: undefined,
         style: undefined,
         timeout: transitionDuration
@@ -557,7 +557,7 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    */
   ModalProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     BackdropProps: _propTypes.default.shape({
-      component: _utils.elementTypeAcceptingRef
+      component: _elementTypeAcceptingRef.default
     })
   }),
   /**
@@ -581,7 +581,7 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
    * @ignore
    */
   PaperProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
-    component: _utils.elementTypeAcceptingRef,
+    component: _elementTypeAcceptingRef.default,
     style: _propTypes.default.object
   }),
   /**

package/node/Switch/Switch.js

@@ -12,9 +12,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 _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
     track: ['track'],
     input: ['input']
   };
-  const composedClasses = (0, _composeClasses.unstable_composeClasses)(slots, _switchClasses.getSwitchUtilityClass, classes);
+  const composedClasses = (0, _composeClasses.default)(slots, _switchClasses.getSwitchUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 const SwitchRoot = (0, _styled.default)('span', {
@@ -133,7 +133,7 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   ownerState
 }) => (0, _extends2.default)({
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -143,13 +143,13 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   [`&.${_switchClasses.default.checked}`]: {
     color: (theme.vars || theme).palette[ownerState.color].main,
     '&: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),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${_switchClasses.default.disabled}`]: {
-      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.55)}`
+      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[ownerState.color].main, 0.55)}`
     }
   },
   [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
@@ -293,7 +293,7 @@ process.env.NODE_ENV !== "production" ? Switch.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/Tab/Tab.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 _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -37,7 +37,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', icon && label && 'labelIcon', `textColor${(0, _capitalize.default)(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
     iconWrapper: ['iconWrapper']
   };
-  return (0, _composeClasses.unstable_composeClasses)(slots, _tabClasses.getTabUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _tabClasses.getTabUtilityClass, classes);
 };
 const TabRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiTab',