@mui/material 5.15.12 → 5.15.14

package/node/SvgIcon/SvgIcon.js

@@ -51,7 +51,7 @@ const SvgIconRoot = (0, _styled.default)('svg', {
     height: '1em',
     display: 'inline-block',
     // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    // for example heroicons uses fill="none" and stroke="currentColor"
     fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
     flexShrink: 0,
     transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {

package/node/Switch/Switch.js

@@ -17,13 +17,13 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _switchClasses = _interopRequireWildcard(require("./switchClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "edge", "size", "sx"];
 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 && Object.prototype.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)('MuiSwitch');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -43,7 +43,7 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _switchClasses.getSwitchUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const SwitchRoot = (0, _styled.default)('span', {
+const SwitchRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSwitch',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -52,9 +52,7 @@ const SwitchRoot = (0, _styled.default)('span', {
     } = props;
     return [styles.root, ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   display: 'inline-flex',
   width: 34 + 12 * 2,
   height: 14 + 12 * 2,
@@ -69,27 +67,43 @@ const SwitchRoot = (0, _styled.default)('span', {
   // For correct alignment with the text.
   '@media print': {
     colorAdjust: 'exact'
-  }
-}, ownerState.edge === 'start' && {
-  marginLeft: -8
-}, ownerState.edge === 'end' && {
-  marginRight: -8
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 24,
-  padding: 7,
-  [`& .${_switchClasses.default.thumb}`]: {
-    width: 16,
-    height: 16
   },
-  [`& .${_switchClasses.default.switchBase}`]: {
-    padding: 4,
-    [`&.${_switchClasses.default.checked}`]: {
-      transform: 'translateX(16px)'
+  variants: [{
+    props: {
+      edge: 'start'
+    },
+    style: {
+      marginLeft: -8
     }
-  }
-}));
-const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
+  }, {
+    props: {
+      edge: 'end'
+    },
+    style: {
+      marginRight: -8
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      width: 40,
+      height: 24,
+      padding: 7,
+      [`& .${_switchClasses.default.thumb}`]: {
+        width: 16,
+        height: 16
+      },
+      [`& .${_switchClasses.default.switchBase}`]: {
+        padding: 4,
+        [`&.${_switchClasses.default.checked}`]: {
+          transform: 'translateX(16px)'
+        }
+      }
+    }
+  }]
+});
+const SwitchSwitchBase = (0, _zeroStyled.styled)(_SwitchBase.default, {
   name: 'MuiSwitch',
   slot: 'SwitchBase',
   overridesResolver: (props, styles) => {
@@ -129,34 +143,40 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
     width: '300%'
   }
 }), ({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${_switchClasses.default.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  },
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
     },
-    [`&.${_switchClasses.default.disabled}`]: {
-      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[ownerState.color].main, 0.55)}`
+    style: {
+      [`&.${_switchClasses.default.checked}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity),
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        },
+        [`&.${_switchClasses.default.disabled}`]: {
+          color: theme.vars ? theme.vars.palette.Switch[`${color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[color].main, 0.55)}`
+        }
+      },
+      [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
+        backgroundColor: (theme.vars || theme).palette[color].main
+      }
     }
-  },
-  [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }
+  }))]
 }));
-const SwitchTrack = (0, _styled.default)('span', {
+const SwitchTrack = (0, _zeroStyled.styled)('span', {
   name: 'MuiSwitch',
   slot: 'Track',
   overridesResolver: (props, styles) => styles.track
@@ -173,7 +193,7 @@ const SwitchTrack = (0, _styled.default)('span', {
   backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
   opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
 }));
-const SwitchThumb = (0, _styled.default)('span', {
+const SwitchThumb = (0, _zeroStyled.styled)('span', {
   name: 'MuiSwitch',
   slot: 'Thumb',
   overridesResolver: (props, styles) => styles.thumb
@@ -187,7 +207,7 @@ const SwitchThumb = (0, _styled.default)('span', {
   borderRadius: '50%'
 }));
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSwitch'
   });

package/node/TabScrollButton/TabScrollButton.js

@@ -14,10 +14,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _KeyboardArrowLeft = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowLeft"));
 var _KeyboardArrowRight = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowRight"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _tabScrollButtonClasses = _interopRequireWildcard(require("./tabScrollButtonClasses"));
@@ -74,8 +74,7 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
       direction
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _useTheme.default)();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const ownerState = (0, _extends2.default)({
     isRtl
   }, props);

package/node/TablePagination/TablePaginationActions.js

@@ -10,9 +10,9 @@ 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 _RtlProvider = require("@mui/system/RtlProvider");
 var _KeyboardArrowLeft = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowLeft"));
 var _KeyboardArrowRight = _interopRequireDefault(require("../internal/svg-icons/KeyboardArrowRight"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _LastPage = _interopRequireDefault(require("../internal/svg-icons/LastPage"));
 var _FirstPage = _interopRequireDefault(require("../internal/svg-icons/FirstPage"));
@@ -40,7 +40,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _useTheme.default)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const handleFirstPageButtonClick = event => {
     onPageChange(event, 0);
   };
@@ -61,14 +61,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : _LastPage.default;
   const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : _KeyboardArrowRight.default;
   const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : _KeyboardArrowLeft.default;
-  const FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
-  const PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
-  const NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
-  const LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
-  const firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
-  const previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
-  const nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
-  const lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
+  const FirstButtonSlot = isRtl ? LastButton : FirstButton;
+  const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
+  const NextButtonSlot = isRtl ? PreviousButton : NextButton;
+  const LastButtonSlot = isRtl ? FirstButton : LastButton;
+  const firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
+  const previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
+  const nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
+  const lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: ref
   }, other, {
@@ -78,7 +78,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('first', page),
       title: getItemAriaLabel('first', page)
     }, firstButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonSlot, (0, _extends2.default)({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
@@ -86,7 +86,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
     }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonSlot, (0, _extends2.default)({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
@@ -94,14 +94,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
     }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviousButtonIcon, (0, _extends2.default)({}, slotProps.previousButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButtonIcon, (0, _extends2.default)({}, slotProps.nextButtonIcon))
     })), showLastButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonSlot, (0, _extends2.default)({
       onClick: handleLastPageButtonClick,
       disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": getItemAriaLabel('last', page),
       title: getItemAriaLabel('last', page)
     }, lastButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon))
+      children: isRtl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButtonIcon, (0, _extends2.default)({}, slotProps.firstButtonIcon)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButtonIcon, (0, _extends2.default)({}, slotProps.lastButtonIcon))
     }))]
   }));
 });

package/node/Tabs/Tabs.js

@@ -15,6 +15,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -216,7 +217,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     name: 'MuiTabs'
   });
   const theme = (0, _useTheme.default)();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -304,7 +305,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: (0, _scrollLeft.getNormalizedScrollLeft)(tabsNode, theme.direction),
+        scrollLeftNormalized: (0, _scrollLeft.getNormalizedScrollLeft)(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,

package/node/Tooltip/Tooltip.js

@@ -17,6 +17,7 @@ var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcc
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -214,11 +215,11 @@ function testReset() {
   hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
-  return event => {
+  return (event, ...params) => {
     if (eventHandler) {
-      eventHandler(event);
+      eventHandler(event, ...params);
     }
-    handler(event);
+    handler(event, ...params);
   };
 }
 
@@ -265,7 +266,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = (0, _useTheme.default)();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = (0, _RtlProvider.useRtl)();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.12
+ * @mui/material v5.15.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/experimental_extendTheme.js

@@ -48,7 +48,7 @@ function setColorChannel(obj, key) {
   if (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 const silent = fn => {
@@ -256,6 +256,9 @@ function extendTheme(options = {}, ...args) {
 
     // MUI X - DataGrid needs this token.
     setColorChannel(palette.background, 'default');
+
+    // added for consistency with the `background.default` token
+    setColorChannel(palette.background, 'paper');
     setColorChannel(palette.common, 'background');
     setColorChannel(palette.common, 'onBackground');
     setColorChannel(palette, 'divider');

package/node/styles/rootShouldForwardProp.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slotShouldForwardProp = _interopRequireDefault(require("./slotShouldForwardProp"));
+const rootShouldForwardProp = prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'classes';
+var _default = exports.default = rootShouldForwardProp;

package/node/styles/slotShouldForwardProp.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+var _default = exports.default = slotShouldForwardProp;

package/node/styles/styled.js

@@ -5,18 +5,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.slotShouldForwardProp = exports.rootShouldForwardProp = exports.default = void 0;
-var _createStyled = _interopRequireWildcard(require("@mui/system/createStyled"));
+exports.default = void 0;
+Object.defineProperty(exports, "rootShouldForwardProp", {
+  enumerable: true,
+  get: function () {
+    return _rootShouldForwardProp.default;
+  }
+});
+Object.defineProperty(exports, "slotShouldForwardProp", {
+  enumerable: true,
+  get: function () {
+    return _slotShouldForwardProp.default;
+  }
+});
+var _createStyled = _interopRequireDefault(require("@mui/system/createStyled"));
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
 var _identifier = _interopRequireDefault(require("./identifier"));
-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 && Object.prototype.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 rootShouldForwardProp = prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'classes';
-exports.rootShouldForwardProp = rootShouldForwardProp;
-const slotShouldForwardProp = exports.slotShouldForwardProp = _createStyled.shouldForwardProp;
+var _rootShouldForwardProp = _interopRequireDefault(require("./rootShouldForwardProp"));
+var _slotShouldForwardProp = _interopRequireDefault(require("./slotShouldForwardProp"));
 const styled = (0, _createStyled.default)({
   themeId: _identifier.default,
   defaultTheme: _defaultTheme.default,
-  rootShouldForwardProp
+  rootShouldForwardProp: _rootShouldForwardProp.default
 });
 var _default = exports.default = styled;

package/node/usePagination/usePagination.js

@@ -67,7 +67,7 @@ function usePagination(props = {}) {
   endPages.length > 0 ? endPages[0] - 2 : count - 1);
 
   // Basic list of items to render
-  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
   const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
   // Start ellipsis
   // eslint-disable-next-line no-nested-ternary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.12",
+  "version": "5.15.14",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -34,11 +34,11 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.38",
-    "@mui/types": "^7.2.13",
-    "@mui/system": "^5.15.12",
-    "@mui/utils": "^5.15.12",
-    "@mui/core-downloads-tracker": "^5.15.12"
+    "@mui/base": "5.0.0-beta.40",
+    "@mui/system": "^5.15.14",
+    "@mui/utils": "^5.15.14",
+    "@mui/types": "^7.2.14",
+    "@mui/core-downloads-tracker": "^5.15.14"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/experimental_extendTheme.d.ts

@@ -69,6 +69,7 @@ export type Overlays = [
 
 export interface PaletteBackgroundChannel {
   defaultChannel: string;
+  paperChannel: string;
 }
 
 export interface PaletteCommonChannel {

package/styles/experimental_extendTheme.js

@@ -38,7 +38,7 @@ function setColorChannel(obj, key) {
   if (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 const silent = fn => {
@@ -245,6 +245,9 @@ export default function extendTheme(options = {}, ...args) {
 
     // MUI X - DataGrid needs this token.
     setColorChannel(palette.background, 'default');
+
+    // added for consistency with the `background.default` token
+    setColorChannel(palette.background, 'paper');
     setColorChannel(palette.common, 'background');
     setColorChannel(palette.common, 'onBackground');
     setColorChannel(palette, 'divider');

package/styles/rootShouldForwardProp.d.ts

@@ -0,0 +1,2 @@
+declare const rootShouldForwardProp: (prop: string) => boolean;
+export default rootShouldForwardProp;

package/styles/rootShouldForwardProp.js

@@ -0,0 +1,3 @@
+import slotShouldForwardProp from './slotShouldForwardProp';
+const rootShouldForwardProp = prop => slotShouldForwardProp(prop) && prop !== 'classes';
+export default rootShouldForwardProp;

package/styles/slotShouldForwardProp.d.ts

@@ -0,0 +1,2 @@
+declare function slotShouldForwardProp(prop: string): boolean;
+export default slotShouldForwardProp;

package/styles/slotShouldForwardProp.js

@@ -0,0 +1,5 @@
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+export default slotShouldForwardProp;

package/styles/styled.d.ts

@@ -1,9 +1,8 @@
 import { CreateMUIStyled } from '@mui/system';
 import { Theme } from './createTheme';
 
-export function rootShouldForwardProp(prop: string): boolean;
-
-export function slotShouldForwardProp(prop: string): boolean;
+export { default as slotShouldForwardProp } from './slotShouldForwardProp';
+export { default as rootShouldForwardProp } from './rootShouldForwardProp';
 
 /**
  * Custom styled utility that has a default MUI theme.

package/styles/styled.js

@@ -1,10 +1,11 @@
 'use client';
 
-import createStyled, { shouldForwardProp } from '@mui/system/createStyled';
+import createStyled from '@mui/system/createStyled';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
-export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
-export const slotShouldForwardProp = shouldForwardProp;
+import rootShouldForwardProp from './rootShouldForwardProp';
+export { default as slotShouldForwardProp } from './slotShouldForwardProp';
+export { default as rootShouldForwardProp } from './rootShouldForwardProp';
 const styled = createStyled({
   themeId: THEME_ID,
   defaultTheme,