@mui/material 6.0.0-alpha.8 → 6.0.0-beta.0

package/node/ListItemButton/ListItemButton.js

@@ -12,6 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -21,7 +22,6 @@ var _listItemButtonClasses = _interopRequireWildcard(require("./listItemButtonCl
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiListItemButton');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -131,7 +131,7 @@ const ListItemButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   }]
 }));
 const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiListItemButton'
   });

package/node/ListItemIcon/ListItemIcon.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _listItemIconClasses = require("./listItemIconClasses");
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiListItemIcon');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -57,7 +57,7 @@ const ListItemIconRoot = (0, _zeroStyled.styled)('div', {
  * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
  */
 const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiListItemIcon'
   });

package/node/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _listItemSecondaryActionClasses = require("./listItemSecondaryActionClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiListItemSecondaryAction');
 const useUtilityClasses = ownerState => {
   const {
     disableGutters,
@@ -53,9 +53,11 @@ const ListItemSecondaryActionRoot = (0, _zeroStyled.styled)('div', {
 
 /**
  * Must be used as the last child of ListItem to function properly.
+ *
+ * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
 const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiListItemSecondaryAction'
   });

package/node/ListItemText/ListItemText.js

@@ -13,11 +13,11 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _listItemTextClasses = _interopRequireWildcard(require("./listItemTextClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiListItemText');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -69,7 +69,7 @@ const ListItemTextRoot = (0, _zeroStyled.styled)('div', {
   }]
 });
 const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiListItemText'
   });

package/node/ListSubheader/ListSubheader.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _listSubheaderClasses = require("./listSubheaderClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiListSubheader');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -91,7 +91,7 @@ const ListSubheaderRoot = (0, _zeroStyled.styled)('li', {
   }]
 }));
 const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiListSubheader'
   });

package/node/Menu/Menu.js

@@ -18,11 +18,11 @@ var _MenuList = _interopRequireDefault(require("../MenuList"));
 var _Popover = _interopRequireWildcard(require("../Popover"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _menuClasses = require("./menuClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiMenu');
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -70,7 +70,7 @@ const MenuMenuList = (0, _zeroStyled.styled)(_MenuList.default, {
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   var _slots$paper, _slotProps$paper;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiMenu'
   });
@@ -268,9 +268,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    */
   PopoverClasses: _propTypes.default.object,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: _propTypes.default.shape({
@@ -279,7 +277,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   }),
   /**
    * The components used for each slot inside.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({

package/node/MenuItem/MenuItem.js

@@ -13,6 +13,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -24,7 +25,6 @@ var _menuItemClasses = _interopRequireWildcard(require("./menuItemClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiMenuItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -155,7 +155,7 @@ const MenuItemRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   }]
 }));
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiMenuItem'
   });

package/node/MobileStepper/MobileStepper.js

@@ -15,12 +15,12 @@ var _Paper = _interopRequireDefault(require("../Paper"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _LinearProgress = _interopRequireDefault(require("../LinearProgress"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _mobileStepperClasses = require("./mobileStepperClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiMobileStepper');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -146,7 +146,7 @@ const MobileStepperProgress = (0, _zeroStyled.styled)(_LinearProgress.default, {
   }]
 });
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiMobileStepper'
   });

package/node/Modal/Modal.js

@@ -11,18 +11,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
-var _utils = require("@mui/base/utils");
 var _unstable_useModal = require("@mui/base/unstable_useModal");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("../Unstable_TrapFocus"));
 var _Portal = _interopRequireDefault(require("../Portal"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _modalClasses = require("./modalClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiModal');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -86,8 +87,7 @@ const ModalBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiModal',
     props: inProps
   });
@@ -115,8 +115,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     onTransitionEnter,
     onTransitionExited,
     open,
-    slotProps,
-    slots,
+    slotProps = {},
+    slots = {},
     // eslint-disable-next-line react/prop-types
     theme,
     ...other
@@ -164,25 +164,31 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  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;
-  const rootProps = (0, _utils.useSlotProps)({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
+  const externalForwardedProps = {
+    slots: {
+      root: components.Root,
+      backdrop: components.Backdrop,
+      ...slots
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: ModalRoot,
+    externalForwardedProps,
     getSlotProps: getRootProps,
     additionalProps: {
       ref,
       as: component
     },
     ownerState,
-    className: (0, _clsx.default)(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+    className: (0, _clsx.default)(className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
   });
-  const backdropProps = (0, _utils.useSlotProps)({
-    elementType: BackdropSlot,
-    externalSlotProps: backdropSlotProps,
+  const [BackdropSlot, backdropProps] = (0, _useSlot.default)('backdrop', {
+    elementType: BackdropComponent,
+    externalForwardedProps,
     additionalProps: BackdropProps,
     getSlotProps: otherHandlers => {
       return getBackdropProps({
@@ -197,9 +203,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         }
       });
     },
-    className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+    className: (0, _clsx.default)(BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
     ownerState
   });
+  const backdropRef = (0, _utils.useForkRef)(BackdropProps == null ? void 0 : BackdropProps.ref, backdropProps.ref);
   if (!keepMounted && !open && (!hasTransition || exited)) {
     return null;
   }
@@ -209,8 +216,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
       ...rootProps,
+      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
-        ...backdropProps
+        ...backdropProps,
+        ref: backdropRef
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
         disableEnforceFocus: disableEnforceFocus,
         disableAutoFocus: disableAutoFocus,
@@ -272,8 +281,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated Use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -285,8 +293,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/node/NativeSelect/NativeSelectInput.js

@@ -50,10 +50,6 @@ const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)(
     // Reset Chrome style
     borderRadius: 0
   },
-  // Remove IE11 arrow
-  '&::-ms-expand': {
-    display: 'none'
-  },
   [`&.${_nativeSelectClasses.default.disabled}`]: {
     cursor: 'default'
   },

package/node/OutlinedInput/OutlinedInput.js

@@ -15,12 +15,12 @@ var _useFormControl = _interopRequireDefault(require("../FormControl/useFormCont
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _outlinedInputClasses = _interopRequireWildcard(require("./outlinedInputClasses"));
 var _InputBase = _interopRequireWildcard(require("../InputBase/InputBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiOutlinedInput');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -185,7 +185,7 @@ const OutlinedInputInput = (0, _zeroStyled.styled)(_InputBase.InputBaseInput, {
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiOutlinedInput'
   });
@@ -276,8 +276,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/node/Pagination/Pagination.js

@@ -15,10 +15,10 @@ var _paginationClasses = require("./paginationClasses");
 var _usePagination = _interopRequireDefault(require("../usePagination"));
 var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiPagination');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -59,7 +59,7 @@ function defaultGetAriaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiPagination'
   });

package/node/PaginationItem/PaginationItem.js

@@ -21,10 +21,10 @@ var _NavigateBefore = _interopRequireDefault(require("../internal/svg-icons/Navi
 var _NavigateNext = _interopRequireDefault(require("../internal/svg-icons/NavigateNext"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiPaginationItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -275,7 +275,7 @@ const PaginationItemPageIcon = (0, _zeroStyled.styled)('div', {
 }));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
   var _slots$previous, _slots$next, _slots$first, _slots$last;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiPaginationItem'
   });

package/node/Paper/Paper.js

@@ -14,13 +14,12 @@ var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _paperClasses = require("./paperClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiPaper');
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -74,11 +73,11 @@ const PaperRoot = (0, _zeroStyled.styled)('div', {
 }));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   var _theme$overlays;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiPaper'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const {
     className,
     component = 'div',

package/node/PigmentContainer/PigmentContainer.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Container = _interopRequireDefault(require("@mui/material-pigment-css/Container"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// @ts-ignore
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    fixed,
+    disableGutters,
+    maxWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', maxWidth && `maxWidth${(0, _capitalize.default)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiContainer', slot), classes);
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
+  className,
+  disableGutters = false,
+  fixed = false,
+  maxWidth = 'lg',
+  ...props
+}, ref) {
+  const ownerState = {
+    ...props,
+    disableGutters,
+    fixed,
+    maxWidth
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+    className: (0, _clsx.default)(classes.root, className),
+    disableGutters: disableGutters,
+    fixed: fixed,
+    maxWidth: maxWidth,
+    ...props,
+    // @ts-ignore
+    ref: ref
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentContainer.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: _propTypes.default.bool,
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: _propTypes.default.bool,
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = exports.default = PigmentContainer;

package/node/PigmentContainer/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  containerClasses: true
+};
+Object.defineProperty(exports, "containerClasses", {
+  enumerable: true,
+  get: function () {
+    return _containerClasses.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PigmentContainer.default;
+  }
+});
+var _PigmentContainer = _interopRequireWildcard(require("./PigmentContainer"));
+Object.keys(_PigmentContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PigmentContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PigmentContainer[key];
+    }
+  });
+});
+var _containerClasses = _interopRequireDefault(require("../Container/containerClasses"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }