@mui/material 5.15.11 → 5.15.13

package/legacy/PaginationItem/PaginationItem.js

@@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import useThemeProps from '../styles/useThemeProps';
 import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
-import useTheme from '../styles/useTheme';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
@@ -226,9 +226,9 @@ var PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inPro
     type: type,
     variant: variant
   });
-  var theme = useTheme();
+  var isRtl = useRtl();
   var classes = useUtilityClasses(ownerState);
-  var normalizedIcons = theme.direction === 'rtl' ? {
+  var normalizedIcons = isRtl ? {
     previous: slots.next || components.next || NavigateNextIcon,
     next: slots.previous || components.previous || NavigateBeforeIcon,
     last: slots.first || components.first || FirstPageIcon,

package/legacy/Rating/Rating.js

@@ -11,7 +11,7 @@ import clamp from '@mui/utils/clamp';
 import visuallyHidden from '@mui/utils/visuallyHidden';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useTheme from '../styles/useTheme';
+import { useRtl } from '@mui/system/RtlProvider';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
 import Star from '../internal/svg-icons/Star';
 import StarBorder from '../internal/svg-icons/StarBorder';
@@ -306,7 +306,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     valueDerived = _useControlled2[0],
     setValueState = _useControlled2[1];
   var valueRounded = roundValueToPrecision(valueDerived, precision);
-  var theme = useTheme();
+  var isRtl = useRtl();
   var _React$useState = React.useState({
       hover: -1,
       focus: -1
@@ -342,7 +342,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
       left = _rootNode$getBounding.left,
       containerWidth = _rootNode$getBounding.width;
     var percent;
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       percent = (right - event.clientX) / containerWidth;
     } else {
       percent = (event.clientX - left) / containerWidth;

package/legacy/Slider/Slider.js

@@ -11,9 +11,9 @@ import { isHostComponent, useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import BaseSliderValueLabel from './SliderValueLabel';
@@ -370,8 +370,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     props: inputProps,
     name: 'MuiSlider'
   });
-  var theme = useTheme();
-  var isRtl = theme.direction === 'rtl';
+  var isRtl = useRtl();
   var ariaLabel = props['aria-label'],
     ariaValuetext = props['aria-valuetext'],
     ariaLabelledby = props['aria-labelledby'],
@@ -654,8 +653,7 @@ process.env.NODE_ENV !== "production" ? Slider.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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -673,8 +671,7 @@ process.env.NODE_ENV !== "production" ? Slider.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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */

package/legacy/Switch/Switch.js

@@ -2,6 +2,8 @@
 
 // @inheritedComponent IconButton
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -12,11 +14,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha, darken, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiSwitch');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     edge = ownerState.edge,
@@ -41,40 +43,53 @@ var SwitchRoot = styled('span', {
     var ownerState = props.ownerState;
     return [styles.root, ownerState.edge && styles["edge".concat(capitalize(ownerState.edge))], styles["size".concat(capitalize(ownerState.size))]];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'inline-flex',
-    width: 34 + 12 * 2,
-    height: 14 + 12 * 2,
-    overflow: 'hidden',
-    padding: 12,
-    boxSizing: 'border-box',
-    position: 'relative',
-    flexShrink: 0,
-    zIndex: 0,
-    // Reset the stacking context.
-    verticalAlign: 'middle',
-    // For correct alignment with the text.
-    '@media print': {
-      colorAdjust: 'exact'
+})({
+  display: 'inline-flex',
+  width: 34 + 12 * 2,
+  height: 14 + 12 * 2,
+  overflow: 'hidden',
+  padding: 12,
+  boxSizing: 'border-box',
+  position: 'relative',
+  flexShrink: 0,
+  zIndex: 0,
+  // Reset the stacking context.
+  verticalAlign: 'middle',
+  // For correct alignment with the text.
+  '@media print': {
+    colorAdjust: 'exact'
+  },
+  variants: [{
+    props: {
+      edge: 'start'
+    },
+    style: {
+      marginLeft: -8
     }
-  }, ownerState.edge === 'start' && {
-    marginLeft: -8
-  }, ownerState.edge === 'end' && {
-    marginRight: -8
-  }, ownerState.size === 'small' && _defineProperty(_defineProperty({
-    width: 40,
-    height: 24,
-    padding: 7
-  }, "& .".concat(switchClasses.thumb), {
-    width: 16,
-    height: 16
-  }), "& .".concat(switchClasses.switchBase), _defineProperty({
-    padding: 4
-  }, "&.".concat(switchClasses.checked), {
-    transform: 'translateX(16px)'
-  })));
+  }, {
+    props: {
+      edge: 'end'
+    },
+    style: {
+      marginRight: -8
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: _defineProperty(_defineProperty({
+      width: 40,
+      height: 24,
+      padding: 7
+    }, "& .".concat(switchClasses.thumb), {
+      width: 16,
+      height: 16
+    }), "& .".concat(switchClasses.switchBase), _defineProperty({
+      padding: 4
+    }, "&.".concat(switchClasses.checked), {
+      transform: 'translateX(16px)'
+    }))
+  }]
 });
 var SwitchSwitchBase = styled(SwitchBase, {
   name: 'MuiSwitch',
@@ -83,8 +98,8 @@ var SwitchSwitchBase = styled(SwitchBase, {
     var ownerState = props.ownerState;
     return [styles.switchBase, _defineProperty({}, "& .".concat(switchClasses.input), styles.input), ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))]];
   }
-})(function (_ref4) {
-  var theme = _ref4.theme;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'absolute',
     top: 0,
@@ -107,30 +122,44 @@ var SwitchSwitchBase = styled(SwitchBase, {
     left: '-100%',
     width: '300%'
   });
-}, function (_ref6) {
-  var theme = _ref6.theme,
-    ownerState = _ref6.ownerState;
-  return _extends({
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return {
     '&:hover': {
       backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : 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' && _defineProperty(_defineProperty({}, "&.".concat(switchClasses.checked), _defineProperty({
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }
-  }, "&.".concat(switchClasses.disabled), {
-    color: theme.vars ? theme.vars.palette.Switch["".concat(ownerState.color, "DisabledColor")] : "".concat(theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55))
-  })), "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }));
+    },
+    variants: _toConsumableArray(Object.entries(theme.palette).filter(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        value = _ref6[1];
+      return value.main && value.light;
+    }) // check all the used fields in the style below
+    .map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 1),
+        color = _ref8[0];
+      return {
+        props: {
+          color: color
+        },
+        style: _defineProperty(_defineProperty({}, "&.".concat(switchClasses.checked), _defineProperty({
+          color: (theme.vars || theme).palette[color].main,
+          '&:hover': {
+            backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            '@media (hover: none)': {
+              backgroundColor: 'transparent'
+            }
+          }
+        }, "&.".concat(switchClasses.disabled), {
+          color: theme.vars ? theme.vars.palette.Switch["".concat(color, "DisabledColor")] : "".concat(theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.55))
+        })), "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
+          backgroundColor: (theme.vars || theme).palette[color].main
+        })
+      };
+    }))
+  };
 });
 var SwitchTrack = styled('span', {
   name: 'MuiSwitch',
@@ -138,8 +167,8 @@ var SwitchTrack = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.track;
   }
-})(function (_ref8) {
-  var theme = _ref8.theme;
+})(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     height: '100%',
     width: '100%',
@@ -158,8 +187,8 @@ var SwitchThumb = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.thumb;
   }
-})(function (_ref9) {
-  var theme = _ref9.theme;
+})(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     boxShadow: (theme.vars || theme).shadows[1],
     backgroundColor: 'currentColor',

package/legacy/TabScrollButton/TabScrollButton.js

@@ -9,10 +9,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
@@ -64,8 +64,7 @@ var TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inP
     orientation = props.orientation,
     disabled = props.disabled,
     other = _objectWithoutProperties(props, ["className", "slots", "slotProps", "direction", "orientation", "disabled"]);
-  var theme = useTheme();
-  var isRtl = theme.direction === 'rtl';
+  var isRtl = useRtl();
   var ownerState = _extends({
     isRtl: isRtl
   }, props);

package/legacy/TablePagination/TablePaginationActions.js

@@ -4,9 +4,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
-import useTheme from '../styles/useTheme';
 import IconButton from '../IconButton';
 import LastPageIconDefault from '../internal/svg-icons/LastPage';
 import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
@@ -34,7 +34,7 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
     _props$slotProps = props.slotProps,
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"]);
-  var theme = useTheme();
+  var isRtl = useRtl();
   var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
     onPageChange(event, 0);
   };
@@ -55,14 +55,14 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
   var LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
   var NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
   var PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : KeyboardArrowLeft;
-  var FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
-  var PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
-  var NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
-  var LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
-  var firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
-  var previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
-  var nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
-  var lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
+  var FirstButtonSlot = isRtl ? LastButton : FirstButton;
+  var PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
+  var NextButtonSlot = isRtl ? PreviousButton : NextButton;
+  var LastButtonSlot = isRtl ? FirstButton : LastButton;
+  var firstButtonSlotProps = isRtl ? slotProps.lastButton : slotProps.firstButton;
+  var previousButtonSlotProps = isRtl ? slotProps.nextButton : slotProps.previousButton;
+  var nextButtonSlotProps = isRtl ? slotProps.previousButton : slotProps.nextButton;
+  var lastButtonSlotProps = isRtl ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
@@ -72,7 +72,7 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
       "aria-label": getItemAriaLabel('first', page),
       title: getItemAriaLabel('first', page)
     }, firstButtonSlotProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
     })), /*#__PURE__*/_jsx(PreviousButtonSlot, _extends({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
@@ -80,7 +80,7 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
     }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
     })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
@@ -88,14 +88,14 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
     }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
-      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
     })), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, _extends({
       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__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
+      children: isRtl ? /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
     }))]
   }));
 });

package/legacy/Tabs/Tabs.js

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -199,7 +200,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     name: 'MuiTabs'
   });
   var theme = useTheme();
-  var isRtl = theme.direction === 'rtl';
+  var isRtl = useRtl();
   var ariaLabel = props['aria-label'],
     ariaLabelledBy = props['aria-labelledby'],
     action = props.action,
@@ -311,7 +312,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
+        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,

package/legacy/Tooltip/Tooltip.js

@@ -12,6 +12,7 @@ import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import { appendOwnerState } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -197,10 +198,13 @@ export function testReset() {
 }
 function composeEventHandler(handler, eventHandler) {
   return function (event) {
+    for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      params[_key - 1] = arguments[_key];
+    }
     if (eventHandler) {
-      eventHandler(event);
+      eventHandler.apply(void 0, [event].concat(params));
     }
-    handler(event);
+    handler.apply(void 0, [event].concat(params));
   };
 }
 
@@ -263,7 +267,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   var theme = useTheme();
-  var isRtl = theme.direction === 'rtl';
+  var isRtl = useRtl();
   var _React$useState = React.useState(),
     childNode = _React$useState[0],
     setChildNode = _React$useState[1];

package/legacy/index.js

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

package/legacy/styles/experimental_extendTheme.js

@@ -267,6 +267,9 @@ export default function extendTheme() {
 
     // 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/modern/Alert/Alert.js

@@ -6,10 +6,9 @@ const _excluded = ["action", "children", "className", "closeText", "color", "com
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { darken, lighten } from '@mui/system';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { darken, lighten } from '@mui/system/colorManipulator';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
@@ -22,6 +21,7 @@ import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     variant,
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `${variant}${capitalize(color || severity)}`, `${variant}`],
+    root: ['root', `color${capitalize(color || severity)}`, `${variant}${capitalize(color || severity)}`, `${variant}`],
     icon: ['icon'],
     message: ['message'],
     action: ['action']
@@ -47,41 +47,58 @@ const AlertRoot = styled(Paper, {
     return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const getColor = theme.palette.mode === 'light' ? darken : lighten;
   const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  const color = ownerState.color || ownerState.severity;
   return _extends({}, theme.typography.body2, {
     backgroundColor: 'transparent',
     display: 'flex',
-    padding: '6px 16px'
-  }, color && ownerState.variant === 'standard' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
-    [`& .${alertClasses.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'outlined' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    border: `1px solid ${(theme.vars || theme).palette[color].light}`,
-    [`& .${alertClasses.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'filled' && _extends({
-    fontWeight: theme.typography.fontWeightMedium
-  }, theme.vars ? {
-    color: theme.vars.palette.Alert[`${color}FilledColor`],
-    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
-  } : {
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
-    color: theme.palette.getContrastText(theme.palette[color].main)
-  }));
+    padding: '6px 16px',
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'standard'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'outlined'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'filled'
+      },
+      style: _extends({
+        fontWeight: theme.typography.fontWeightMedium
+      }, theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}FilledColor`],
+        backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+      } : {
+        backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+        color: theme.palette.getContrastText(theme.palette[color].main)
+      })
+    }))]
+  });
 });
 const AlertIcon = styled('div', {
   name: 'MuiAlert',
@@ -154,7 +171,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   const ownerState = _extends({}, props, {
     color,
     severity,
-    variant
+    variant,
+    colorSeverity: color || severity
   });
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {

package/modern/Alert/alertClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getAlertUtilityClass(slot) {
   return generateUtilityClass('MuiAlert', slot);
 }
-const alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+const alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'colorSuccess', 'colorInfo', 'colorWarning', 'colorError', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 export default alertClasses;

package/modern/AlertTitle/AlertTitle.js

@@ -7,11 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Typography from '../Typography';
 import { getAlertTitleUtilityClass } from './alertTitleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAlertTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes