@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/Pagination/Pagination.js

@@ -6,20 +6,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _paginationClasses = require("./paginationClasses");
 var _usePagination = _interopRequireDefault(require("../usePagination"));
 var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
 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 useUtilityClasses = ownerState => {
@@ -33,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _paginationClasses.getPaginationUtilityClass, classes);
 };
-const PaginationRoot = (0, _styled.default)('nav', {
+const PaginationRoot = (0, _zeroStyled.styled)('nav', {
   name: 'MuiPagination',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -43,7 +40,7 @@ const PaginationRoot = (0, _styled.default)('nav', {
     return [styles.root, styles[ownerState.variant]];
   }
 })({});
-const PaginationUl = (0, _styled.default)('ul', {
+const PaginationUl = (0, _zeroStyled.styled)('ul', {
   name: 'MuiPagination',
   slot: 'Ul',
   overridesResolver: (props, styles) => styles.ul
@@ -62,35 +59,41 @@ function defaultGetAriaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiPagination'
   });
   const {
-      boundaryCount = 1,
-      className,
-      color = 'standard',
-      count = 1,
-      defaultPage = 1,
-      disabled = false,
-      getItemAriaLabel = defaultGetAriaLabel,
-      hideNextButton = false,
-      hidePrevButton = false,
-      renderItem = item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.default, (0, _extends2.default)({}, item)),
-      shape = 'circular',
-      showFirstButton = false,
-      showLastButton = false,
-      siblingCount = 1,
-      size = 'medium',
-      variant = 'text'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    boundaryCount = 1,
+    className,
+    color = 'standard',
+    count = 1,
+    defaultPage = 1,
+    disabled = false,
+    getItemAriaLabel = defaultGetAriaLabel,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange,
+    page,
+    renderItem = item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.default, {
+      ...item
+    }),
+    shape = 'circular',
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    size = 'medium',
+    variant = 'text',
+    ...other
+  } = props;
   const {
     items
-  } = (0, _usePagination.default)((0, _extends2.default)({}, props, {
+  } = (0, _usePagination.default)({
+    ...props,
     componentName: 'Pagination'
-  }));
-  const ownerState = (0, _extends2.default)({}, props, {
+  });
+  const ownerState = {
+    ...props,
     boundaryCount,
     color,
     count,
@@ -106,28 +109,29 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, re
     siblingCount,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationRoot, {
     "aria-label": "pagination navigation",
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationUl, {
       className: classes.ul,
       ownerState: ownerState,
       children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        children: renderItem((0, _extends2.default)({}, item, {
+        children: renderItem({
+          ...item,
           color,
           'aria-label': getItemAriaLabel(item.type, item.page, item.selected),
           shape,
           size,
           variant
-        }))
+        })
       }, index))
     })
-  }));
+  });
 });
 
 // @default tags synced with default values from usePagination
@@ -178,8 +182,8 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
-   * @param {number} page The page number to format.
-   * @param {bool} selected If true, the current page is selected.
+   * @param {number | null} page The page number to format.
+   * @param {boolean} selected If true, the current page is selected.
    * @returns {string}
    */
   getItemAriaLabel: _propTypes.default.func,
@@ -201,7 +205,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    */
   onChange: _propTypes.default.func,
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page: _integerPropType.default,
   /**

package/node/PaginationItem/PaginationItem.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -21,12 +19,13 @@ var _FirstPage = _interopRequireDefault(require("../internal/svg-icons/FirstPage
 var _LastPage = _interopRequireDefault(require("../internal/svg-icons/LastPage"));
 var _NavigateBefore = _interopRequireDefault(require("../internal/svg-icons/NavigateBefore"));
 var _NavigateNext = _interopRequireDefault(require("../internal/svg-icons/NavigateNext"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
 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
@@ -62,9 +61,10 @@ const PaginationItemEllipsis = (0, _zeroStyled.styled)('div', {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -97,14 +97,15 @@ const PaginationItemEllipsis = (0, _zeroStyled.styled)('div', {
       fontSize: theme.typography.pxToRem(15)
     }
   }]
-}));
+})));
 const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -200,7 +201,7 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText).map(([color]) => ({
     props: {
       variant: 'text',
       color
@@ -224,7 +225,7 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
         }
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
     props: {
       variant: 'outlined',
       color
@@ -247,12 +248,12 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
       }
     }
   }))]
-}));
+})));
 const PaginationItemPageIcon = (0, _zeroStyled.styled)('div', {
   name: 'MuiPaginationItem',
   slot: 'Icon',
   overridesResolver: (props, styles) => styles.icon
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   fontSize: theme.typography.pxToRem(20),
@@ -272,28 +273,30 @@ const PaginationItemPageIcon = (0, _zeroStyled.styled)('div', {
       fontSize: theme.typography.pxToRem(22)
     }
   }]
-}));
+})));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiPaginationItem'
   });
   const {
-      className,
-      color = 'standard',
-      component,
-      components = {},
-      disabled = false,
-      page,
-      selected = false,
-      shape = 'circular',
-      size = 'medium',
-      slots = {},
-      type = 'page',
-      variant = 'text'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    color = 'standard',
+    component,
+    components = {},
+    disabled = false,
+    page,
+    selected = false,
+    shape = 'circular',
+    size = 'medium',
+    slots = {},
+    slotProps = {},
+    type = 'page',
+    variant = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disabled,
     selected,
@@ -301,39 +304,74 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     size,
     type,
     variant
-  });
+  };
   const isRtl = (0, _RtlProvider.useRtl)();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = isRtl ? {
-    previous: slots.next || components.next || _NavigateNext.default,
-    next: slots.previous || components.previous || _NavigateBefore.default,
-    last: slots.first || components.first || _FirstPage.default,
-    first: slots.last || components.last || _LastPage.default
-  } : {
-    previous: slots.previous || components.previous || _NavigateBefore.default,
-    next: slots.next || components.next || _NavigateNext.default,
-    first: slots.first || components.first || _FirstPage.default,
-    last: slots.last || components.last || _LastPage.default
+  const externalForwardedProps = {
+    slots: {
+      previous: slots.previous ?? components.previous,
+      next: slots.next ?? components.next,
+      first: slots.first ?? components.first,
+      last: slots.last ?? components.last
+    },
+    slotProps
   };
-  const Icon = normalizedIcons[type];
+  const [PreviousSlot, previousSlotProps] = (0, _useSlot.default)('previous', {
+    elementType: _NavigateBefore.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [NextSlot, nextSlotProps] = (0, _useSlot.default)('next', {
+    elementType: _NavigateNext.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [FirstSlot, firstSlotProps] = (0, _useSlot.default)('first', {
+    elementType: _FirstPage.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [LastSlot, lastSlotProps] = (0, _useSlot.default)('last', {
+    elementType: _LastPage.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const rtlAwareType = isRtl ? {
+    previous: 'next',
+    next: 'previous',
+    first: 'last',
+    last: 'first'
+  }[type] : type;
+  const IconSlot = {
+    previous: PreviousSlot,
+    next: NextSlot,
+    first: FirstSlot,
+    last: LastSlot
+  }[rtlAwareType];
+  const iconSlotProps = {
+    previous: previousSlotProps,
+    next: nextSlotProps,
+    first: firstSlotProps,
+    last: lastSlotProps
+  }[rtlAwareType];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
     children: "\u2026"
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(PaginationItemPage, (0, _extends2.default)({
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(PaginationItemPage, {
     ref: ref,
     ownerState: ownerState,
     component: component,
     disabled: disabled,
-    className: (0, _clsx.default)(classes.root, className)
-  }, other, {
-    children: [type === 'page' && page, Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItemPageIcon, {
-      as: Icon,
-      ownerState: ownerState,
-      className: classes.icon
+    className: (0, _clsx.default)(classes.root, className),
+    ...other,
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItemPageIcon, {
+      ...iconSlotProps,
+      className: classes.icon,
+      as: IconSlot
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -371,6 +409,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @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.
    */
   components: _propTypes.default.shape({
     first: _propTypes.default.elementType,
@@ -402,11 +441,18 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default 'medium'
    */
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['small', 'medium', 'large']), _propTypes.default.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    first: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    last: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    next: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    previous: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({

package/node/Paper/Paper.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -15,13 +13,12 @@ var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropTyp
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _paperClasses = require("./paperClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "component", "elevation", "square", "variant"];
 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 useUtilityClasses = ownerState => {
@@ -36,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _paperClasses.getPaperUtilityClass, classes);
 };
-const PaperRoot = (0, _styled.default)('div', {
+const PaperRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiPaper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -45,60 +42,82 @@ const PaperRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
   }
-})(({
-  theme,
-  ownerState
-}) => {
-  var _theme$vars$overlays;
-  return (0, _extends2.default)({
-    backgroundColor: (theme.vars || theme).palette.background.paper,
-    color: (theme.vars || theme).palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && (0, _extends2.default)({
-    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-  }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))})`
-  }, theme.vars && {
-    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
-  }));
-});
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.square,
+    style: {
+      borderRadius: theme.shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: {
+      variant: 'elevation'
+    },
+    style: {
+      boxShadow: 'var(--Paper-shadow)',
+      backgroundImage: 'var(--Paper-overlay)'
+    }
+  }]
+})));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiPaper'
   });
+  const theme = (0, _zeroStyled.useTheme)();
   const {
-      className,
-      component = 'div',
-      elevation = 1,
-      square = false,
-      variant = 'elevation'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    component = 'div',
+    elevation = 1,
+    square = false,
+    variant = 'elevation',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     elevation,
     square,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const theme = (0, _useTheme.default)();
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
     }
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperRoot, {
     as: component,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other,
+    style: {
+      ...(variant === 'elevation' && {
+        '--Paper-shadow': (theme.vars || theme).shadows[elevation],
+        ...(theme.vars && {
+          '--Paper-overlay': theme.vars.overlays?.[elevation]
+        }),
+        ...(!theme.vars && theme.palette.mode === 'dark' && {
+          '--Paper-overlay': `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))})`
+        })
+      }),
+      ...other.style
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -142,6 +161,10 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
    * @default false
    */
   square: _propTypes.default.bool,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */