@mui/material 5.10.10 → 5.10.12

package/legacy/DialogContentText/dialogContentTextClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getDialogContentTextUtilityClass(slot) {
   return generateUtilityClass('MuiDialogContentText', slot);
 }

package/legacy/DialogTitle/dialogTitleClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getDialogTitleUtilityClass(slot) {
   return generateUtilityClass('MuiDialogTitle', slot);
 }

package/legacy/Divider/dividerClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getDividerUtilityClass(slot) {
   return generateUtilityClass('MuiDivider', slot);
 }

package/legacy/Drawer/drawerClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getDrawerUtilityClass(slot) {
   return generateUtilityClass('MuiDrawer', slot);
 }

package/legacy/Fab/fabClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getFabUtilityClass(slot) {
   return generateUtilityClass('MuiFab', slot);
 }

package/legacy/FilledInput/filledInputClasses.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);

package/legacy/FormControl/FormControl.js

@@ -196,35 +196,35 @@ var FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, re
     };
   }
 
-  var onFilled = React.useCallback(function () {
-    setFilled(true);
-  }, []);
-  var onEmpty = React.useCallback(function () {
-    setFilled(false);
-  }, []);
-  var childContext = {
-    adornedStart: adornedStart,
-    setAdornedStart: setAdornedStart,
-    color: color,
-    disabled: disabled,
-    error: error,
-    filled: filled,
-    focused: focused,
-    fullWidth: fullWidth,
-    hiddenLabel: hiddenLabel,
-    size: size,
-    onBlur: function onBlur() {
-      setFocused(false);
-    },
-    onEmpty: onEmpty,
-    onFilled: onFilled,
-    onFocus: function onFocus() {
-      setFocused(true);
-    },
-    registerEffect: registerEffect,
-    required: required,
-    variant: variant
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      adornedStart: adornedStart,
+      setAdornedStart: setAdornedStart,
+      color: color,
+      disabled: disabled,
+      error: error,
+      filled: filled,
+      focused: focused,
+      fullWidth: fullWidth,
+      hiddenLabel: hiddenLabel,
+      size: size,
+      onBlur: function onBlur() {
+        setFocused(false);
+      },
+      onEmpty: function onEmpty() {
+        setFilled(false);
+      },
+      onFilled: function onFilled() {
+        setFilled(true);
+      },
+      onFocus: function onFocus() {
+        setFocused(true);
+      },
+      registerEffect: registerEffect,
+      required: required,
+      variant: variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
     children: /*#__PURE__*/_jsx(FormControlRoot, _extends({

package/legacy/FormControl/formControlClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getFormControlUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControl', slot);
 }

package/legacy/FormControlLabel/formControlLabelClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }

package/legacy/FormGroup/formGroupClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getFormGroupUtilityClass(slot) {
   return generateUtilityClass('MuiFormGroup', slot);
 }

package/legacy/FormHelperText/formHelperTextClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getFormHelperTextUtilityClasses(slot) {
   return generateUtilityClass('MuiFormHelperText', slot);
 }

package/legacy/FormLabel/formLabelClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getFormLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormLabel', slot);
 }

package/legacy/Grid/gridClasses.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getGridUtilityClass(slot) {
   return generateUtilityClass('MuiGrid', slot);
 }

package/legacy/Hidden/hiddenCssClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getHiddenCssUtilityClass(slot) {
   return generateUtilityClass('PrivateHiddenCss', slot);
 }

package/legacy/Icon/iconClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getIconUtilityClass(slot) {
   return generateUtilityClass('MuiIcon', slot);
 }

package/legacy/IconButton/iconButtonClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getIconButtonUtilityClass(slot) {
   return generateUtilityClass('MuiIconButton', slot);
 }

package/legacy/ImageList/imageListClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getImageListUtilityClass(slot) {
   return generateUtilityClass('MuiImageList', slot);
 }

package/legacy/ImageListItem/imageListItemClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getImageListItemUtilityClass(slot) {
   return generateUtilityClass('MuiImageListItem', slot);
 }

package/legacy/ImageListItemBar/imageListItemBarClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getImageListItemBarUtilityClass(slot) {
   return generateUtilityClass('MuiImageListItemBar', slot);
 }

package/legacy/Input/inputClasses.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);

package/legacy/InputAdornment/inputAdornmentClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getInputAdornmentUtilityClass(slot) {
   return generateUtilityClass('MuiInputAdornment', slot);
 }

package/legacy/InputBase/InputBase.js

@@ -686,6 +686,11 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    */
   onFocus: PropTypes.func,
 
+  /**
+   * Callback fired when the `input` doesn't satisfy its constraints.
+   */
+  onInvalid: PropTypes.func,
+
   /**
    * @ignore
    */

package/legacy/InputBase/inputBaseClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getInputBaseUtilityClass(slot) {
   return generateUtilityClass('MuiInputBase', slot);
 }

package/legacy/InputLabel/inputLabelClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getInputLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiInputLabel', slot);
 }

package/legacy/LinearProgress/linearProgressClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass('MuiLinearProgress', slot);
 }

package/legacy/Link/linkClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getLinkUtilityClass(slot) {
   return generateUtilityClass('MuiLink', slot);
 }

package/legacy/List/listClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListUtilityClass(slot) {
   return generateUtilityClass('MuiList', slot);
 }

package/legacy/ListItem/ListItem.js

@@ -167,11 +167,13 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
       other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"]);
 
   var context = React.useContext(ListContext);
-  var childContext = {
-    dense: dense || context.dense || false,
-    alignItems: alignItems,
-    disableGutters: disableGutters
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      dense: dense || context.dense || false,
+      alignItems: alignItems,
+      disableGutters: disableGutters
+    };
+  }, [alignItems, context.dense, dense, disableGutters]);
   var listItemRef = React.useRef(null);
   useEnhancedEffect(function () {
     if (autoFocus) {

package/legacy/ListItem/listItemClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemUtilityClass(slot) {
   return generateUtilityClass('MuiListItem', slot);
 }

package/legacy/ListItemAvatar/listItemAvatarClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemAvatarUtilityClass(slot) {
   return generateUtilityClass('MuiListItemAvatar', slot);
 }

package/legacy/ListItemButton/ListItemButton.js

@@ -122,11 +122,13 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
       other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"]);
 
   var context = React.useContext(ListContext);
-  var childContext = {
-    dense: dense || context.dense || false,
-    alignItems: alignItems,
-    disableGutters: disableGutters
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      dense: dense || context.dense || false,
+      alignItems: alignItems,
+      disableGutters: disableGutters
+    };
+  }, [alignItems, context.dense, dense, disableGutters]);
   var listItemRef = React.useRef(null);
   useEnhancedEffect(function () {
     if (autoFocus) {

package/legacy/ListItemButton/listItemButtonClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemButtonUtilityClass(slot) {
   return generateUtilityClass('MuiListItemButton', slot);
 }

package/legacy/ListItemIcon/listItemIconClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemIconUtilityClass(slot) {
   return generateUtilityClass('MuiListItemIcon', slot);
 }

package/legacy/ListItemSecondaryAction/listItemSecondaryActionClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemSecondaryActionClassesUtilityClass(slot) {
   return generateUtilityClass('MuiListItemSecondaryAction', slot);
 }

package/legacy/ListItemText/listItemTextClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListItemTextUtilityClass(slot) {
   return generateUtilityClass('MuiListItemText', slot);
 }

package/legacy/ListSubheader/listSubheaderClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getListSubheaderUtilityClass(slot) {
   return generateUtilityClass('MuiListSubheader', slot);
 }

package/legacy/Menu/menuClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getMenuUtilityClass(slot) {
   return generateUtilityClass('MuiMenu', slot);
 }

package/legacy/MenuItem/MenuItem.js

@@ -104,7 +104,7 @@ var MenuItemRoot = styled(ButtonBase, {
     minHeight: 'auto'
   }), ownerState.dense && _extends({
     minHeight: 32,
-    // https://material.io/components/menus#specs > Dense
+    // https://m2.material.io/components/menus#specs > Dense
     paddingTop: 4,
     paddingBottom: 4
   }, theme.typography.body2, _defineProperty({}, "& .".concat(listItemIconClasses.root, " svg"), {
@@ -135,10 +135,12 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       other = _objectWithoutProperties(props, ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"]);
 
   var context = React.useContext(ListContext);
-  var childContext = {
-    dense: dense || context.dense || false,
-    disableGutters: disableGutters
-  };
+  var childContext = React.useMemo(function () {
+    return {
+      dense: dense || context.dense || false,
+      disableGutters: disableGutters
+    };
+  }, [context.dense, dense, disableGutters]);
   var menuItemRef = React.useRef(null);
   useEnhancedEffect(function () {
     if (autoFocus) {

package/legacy/MenuItem/menuItemClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getMenuItemUtilityClass(slot) {
   return generateUtilityClass('MuiMenuItem', slot);
 }

package/legacy/MobileStepper/mobileStepperClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getMobileStepperUtilityClass(slot) {
   return generateUtilityClass('MuiMobileStepper', slot);
 }

package/legacy/Modal/Modal.js

@@ -60,7 +60,7 @@ var ModalBackdrop = styled(Backdrop, {
  */
 
 var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref2, _components$Root;
+  var _ref2, _slots$root, _ref3, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
 
   var props = useThemeProps({
     name: 'MuiModal',
@@ -94,8 +94,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
       _props$keepMounted = props.keepMounted,
       keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
+      slotProps = props.slotProps,
+      slots = props.slots,
       theme = props.theme,
-      other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"]);
+      other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"]);
 
   var _React$useState = React.useState(true),
       exited = _React$useState[0],
@@ -118,21 +120,24 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   });
 
   var classes = extendUtilityClasses(ownerState);
-  var Root = (_ref2 = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref2 : ModalRoot;
+  var RootSlot = (_ref2 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : ModalRoot;
+  var BackdropSlot = (_ref3 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref3 : BackdropComponent;
+  var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
+  var backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
   return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
-    components: _extends({
-      Root: Root,
-      Backdrop: BackdropComponent
-    }, components),
-    componentsProps: {
+    slots: {
+      root: RootSlot,
+      backdrop: BackdropSlot
+    },
+    slotProps: {
       root: function root() {
-        return _extends({}, resolveComponentProps(componentsProps.root, ownerState), !isHostComponent(Root) && {
+        return _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
           as: component,
           theme: theme
         });
       },
       backdrop: function backdrop() {
-        return _extends({}, BackdropProps, resolveComponentProps(componentsProps.backdrop, ownerState));
+        return _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState));
       }
     },
     onTransitionEnter: function onTransitionEnter() {
@@ -158,8 +163,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -174,7 +179,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `componentsProps.backdrop` instead.
+   * @deprecated Use `slotProps.backdrop` instead.
    */
   BackdropProps: PropTypes.object,
 
@@ -309,6 +314,25 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   open: PropTypes.bool.isRequired,
 
+  /**
+   * The props used for each slot inside the Modal.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/NativeSelect/nativeSelectClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getNativeSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiNativeSelect', slot);
 }

package/legacy/OutlinedInput/outlinedInputClasses.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);

package/legacy/Pagination/paginationClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPaginationUtilityClass(slot) {
   return generateUtilityClass('MuiPagination', slot);
 }

package/legacy/PaginationItem/paginationItemClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }

package/legacy/Paper/paperClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPaperUtilityClass(slot) {
   return generateUtilityClass('MuiPaper', slot);
 }

package/legacy/Popover/popoverClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getPopoverUtilityClass(slot) {
   return generateUtilityClass('MuiPopover', slot);
 }