@mui/material 5.10.10 → 5.10.12

package/List/List.d.ts

@@ -53,7 +53,7 @@ export type ExtendList<M extends OverridableTypeMap> = OverridableComponent<Exte
  * Demos:
  *
  * - [Lists](https://mui.com/material-ui/react-list/)
- * - [Transfer list](https://mui.com/material-ui/react-transfer-list/)
+ * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
  *
  * API:
  *

package/List/listClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListUtilityClass = getListUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiList', slot);
+  return (0, _generateUtilityClass.default)('MuiList', slot);
 }
 
-const listClasses = (0, _base.generateUtilityClasses)('MuiList', ['root', 'padding', 'dense', 'subheader']);
+const listClasses = (0, _utils.unstable_generateUtilityClasses)('MuiList', ['root', 'padding', 'dense', 'subheader']);
 var _default = listClasses;
 exports.default = _default;

package/ListItem/ListItem.d.ts

@@ -112,7 +112,7 @@ export interface ListItemTypeMap<P, D extends React.ElementType> {
  * Demos:
  *
  * - [Lists](https://mui.com/material-ui/react-list/)
- * - [Transfer list](https://mui.com/material-ui/react-transfer-list/)
+ * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
  *
  * API:
  *

package/ListItem/ListItem.js

@@ -198,11 +198,11 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
         ContainerProps = (0, _objectWithoutPropertiesLoose2.default)(props.ContainerProps, _excluded),
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const context = React.useContext(_ListContext.default);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {

package/ListItem/listItemClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemUtilityClass = getListItemUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItem', slot);
+  return (0, _generateUtilityClass.default)('MuiListItem', slot);
 }
 
-const listItemClasses = (0, _base.generateUtilityClasses)('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
+const listItemClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
 var _default = listItemClasses;
 exports.default = _default;

package/ListItemAvatar/listItemAvatarClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemAvatarUtilityClass = getListItemAvatarUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemAvatarUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemAvatar', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemAvatar', slot);
 }
 
-const listItemAvatarClasses = (0, _base.generateUtilityClasses)('MuiListItemAvatar', ['root', 'alignItemsFlexStart']);
+const listItemAvatarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemAvatar', ['root', 'alignItemsFlexStart']);
 var _default = listItemAvatarClasses;
 exports.default = _default;

package/ListItemButton/ListItemButton.js

@@ -150,11 +150,11 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const context = React.useContext(_ListContext.default);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {

package/ListItemButton/listItemButtonClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemButtonUtilityClass = getListItemButtonUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemButtonUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemButton', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemButton', slot);
 }
 
-const listItemButtonClasses = (0, _base.generateUtilityClasses)('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
+const listItemButtonClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
 var _default = listItemButtonClasses;
 exports.default = _default;

package/ListItemIcon/listItemIconClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemIconUtilityClass = getListItemIconUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemIconUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemIcon', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemIcon', slot);
 }
 
-const listItemIconClasses = (0, _base.generateUtilityClasses)('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
+const listItemIconClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
 var _default = listItemIconClasses;
 exports.default = _default;

package/ListItemSecondaryAction/listItemSecondaryActionClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemSecondaryActionClassesUtilityClass = getListItemSecondaryActionClassesUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemSecondaryActionClassesUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemSecondaryAction', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemSecondaryAction', slot);
 }
 
-const listItemSecondaryActionClasses = (0, _base.generateUtilityClasses)('MuiListItemSecondaryAction', ['root', 'disableGutters']);
+const listItemSecondaryActionClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemSecondaryAction', ['root', 'disableGutters']);
 var _default = listItemSecondaryActionClasses;
 exports.default = _default;

package/ListItemText/listItemTextClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemTextUtilityClass = getListItemTextUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemTextUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemText', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemText', slot);
 }
 
-const listItemTextClasses = (0, _base.generateUtilityClasses)('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
+const listItemTextClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
 var _default = listItemTextClasses;
 exports.default = _default;

package/ListSubheader/listSubheaderClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListSubheaderUtilityClass = getListSubheaderUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListSubheaderUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListSubheader', slot);
+  return (0, _generateUtilityClass.default)('MuiListSubheader', slot);
 }
 
-const listSubheaderClasses = (0, _base.generateUtilityClasses)('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
+const listSubheaderClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
 var _default = listSubheaderClasses;
 exports.default = _default;

package/Menu/Menu.d.ts

@@ -83,7 +83,7 @@ export interface MenuProps extends StandardProps<PopoverProps> {
  *
  * Demos:
  *
- * - [App bar](https://mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://mui.com/material-ui/react-app-bar/)
  * - [Menu](https://mui.com/material-ui/react-menu/)
  *
  * API:

package/Menu/menuClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getMenuUtilityClass = getMenuUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getMenuUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiMenu', slot);
+  return (0, _generateUtilityClass.default)('MuiMenu', slot);
 }
 
-const menuClasses = (0, _base.generateUtilityClasses)('MuiMenu', ['root', 'paper', 'list']);
+const menuClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMenu', ['root', 'paper', 'list']);
 var _default = menuClasses;
 exports.default = _default;

package/MenuItem/MenuItem.js

@@ -150,7 +150,7 @@ const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
   }
 }, ownerState.dense && (0, _extends2.default)({
   minHeight: 32,
-  // https://material.io/components/menus#specs > Dense
+  // https://m2.material.io/components/menus#specs > Dense
   paddingTop: 4,
   paddingBottom: 4
 }, theme.typography.body2, {
@@ -176,10 +176,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const context = React.useContext(_ListContext.default);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     disableGutters
-  };
+  }), [context.dense, dense, disableGutters]);
   const menuItemRef = React.useRef(null);
   (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {

package/MenuItem/menuItemClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getMenuItemUtilityClass = getMenuItemUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getMenuItemUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiMenuItem', slot);
+  return (0, _generateUtilityClass.default)('MuiMenuItem', slot);
 }
 
-const menuItemClasses = (0, _base.generateUtilityClasses)('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
+const menuItemClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 var _default = menuItemClasses;
 exports.default = _default;

package/MobileStepper/mobileStepperClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getMobileStepperUtilityClass = getMobileStepperUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getMobileStepperUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiMobileStepper', slot);
+  return (0, _generateUtilityClass.default)('MuiMobileStepper', slot);
 }
 
-const mobileStepperClasses = (0, _base.generateUtilityClasses)('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
+const mobileStepperClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
 var _default = mobileStepperClasses;
 exports.default = _default;

package/Modal/Modal.d.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverrideProps } from '@mui/types';
-import { ExtendModalUnstyledTypeMap, ExtendModalUnstyled } from '@mui/base/ModalUnstyled';
+import {
+  ExtendModalUnstyledTypeMap,
+  ExtendModalUnstyled,
+  ModalUnstyledTypeMap,
+} from '@mui/base/ModalUnstyled';
 import { Theme } from '../styles';
 import { BackdropProps } from '../Backdrop';
 
@@ -9,8 +13,8 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
   props: P & {
     /**
      * 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',
@@ -24,9 +28,23 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
     BackdropComponent?: React.ElementType<BackdropProps>;
     /**
      * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-     * @deprecated Use `componentsProps.backdrop` instead.
+     * @deprecated Use `slotProps.backdrop` instead.
      */
     BackdropProps?: Partial<BackdropProps>;
+    /**
+     * The components used for each slot inside the Modal.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: {
+      Root?: React.ElementType;
+      Backdrop?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside the Modal.
+     * @default {}
+     */
+    componentsProps?: ModalUnstyledTypeMap['props']['slotProps'];
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -35,7 +53,7 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
   defaultComponent: D;
 }>;
 
-type ModalRootProps = NonNullable<ModalTypeMap['props']['componentsProps']>['root'];
+type ModalRootProps = NonNullable<ModalTypeMap['props']['slotProps']>['root'];
 
 export declare const ModalRoot: React.FC<ModalRootProps>;
 

package/Modal/Modal.js

@@ -29,7 +29,7 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,7 +88,7 @@ const ModalBackdrop = (0, _styled.default)(_Backdrop.default, {
  */
 
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _components$Root;
+  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
 
   const props = (0, _useThemeProps.default)({
     name: 'MuiModal',
@@ -110,6 +110,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableScrollLock = false,
     hideBackdrop = false,
     keepMounted = false,
+    slotProps,
+    slots,
     // eslint-disable-next-line react/prop-types
     theme
   } = props,
@@ -130,18 +132,21 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     exited
   });
   const classes = extendUtilityClasses(ownerState);
-  const Root = (_ref = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref : ModalRoot;
+  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
+  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
+  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
+  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalUnstyled.default, (0, _extends2.default)({
-    components: (0, _extends2.default)({
-      Root,
-      Backdrop: BackdropComponent
-    }, components),
-    componentsProps: {
-      root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(componentsProps.root, ownerState), !(0, _utils.isHostComponent)(Root) && {
+    slots: {
+      root: RootSlot,
+      backdrop: BackdropSlot
+    },
+    slotProps: {
+      root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(rootSlotProps, ownerState), !(0, _utils.isHostComponent)(RootSlot) && {
         as: component,
         theme
       }),
-      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(componentsProps.backdrop, ownerState))
+      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState))
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
@@ -162,8 +167,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',
@@ -178,7 +183,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.default.object,
 
@@ -313,6 +318,25 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   open: _propTypes.default.bool.isRequired,
 
+  /**
+   * The props used for each slot inside the Modal.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/NativeSelect/nativeSelectClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getNativeSelectUtilityClasses = getNativeSelectUtilityClasses;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getNativeSelectUtilityClasses(slot) {
-  return (0, _base.generateUtilityClass)('MuiNativeSelect', slot);
+  return (0, _generateUtilityClass.default)('MuiNativeSelect', slot);
 }
 
-const nativeSelectClasses = (0, _base.generateUtilityClasses)('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const nativeSelectClasses = (0, _utils.unstable_generateUtilityClasses)('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
 var _default = nativeSelectClasses;
 exports.default = _default;

package/OutlinedInput/outlinedInputClasses.js

@@ -10,14 +10,16 @@ exports.getOutlinedInputUtilityClass = getOutlinedInputUtilityClass;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 var _InputBase = require("../InputBase");
 
 function getOutlinedInputUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiOutlinedInput', slot);
+  return (0, _generateUtilityClass.default)('MuiOutlinedInput', slot);
 }
 
-const outlinedInputClasses = (0, _extends2.default)({}, _InputBase.inputBaseClasses, (0, _base.generateUtilityClasses)('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+const outlinedInputClasses = (0, _extends2.default)({}, _InputBase.inputBaseClasses, (0, _utils.unstable_generateUtilityClasses)('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 var _default = outlinedInputClasses;
 exports.default = _default;

package/Pagination/paginationClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getPaginationUtilityClass = getPaginationUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getPaginationUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiPagination', slot);
+  return (0, _generateUtilityClass.default)('MuiPagination', slot);
 }
 
-const paginationClasses = (0, _base.generateUtilityClasses)('MuiPagination', ['root', 'ul', 'outlined', 'text']);
+const paginationClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPagination', ['root', 'ul', 'outlined', 'text']);
 var _default = paginationClasses;
 exports.default = _default;

package/PaginationItem/paginationItemClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getPaginationItemUtilityClass = getPaginationItemUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getPaginationItemUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiPaginationItem', slot);
+  return (0, _generateUtilityClass.default)('MuiPaginationItem', slot);
 }
 
-const paginationItemClasses = (0, _base.generateUtilityClasses)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
 var _default = paginationItemClasses;
 exports.default = _default;