@mui/material 5.5.1 → 5.6.0

package/modern/Chip/Chip.js

@@ -450,7 +450,9 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   clickable: PropTypes.bool,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/modern/CircularProgress/CircularProgress.js

@@ -205,7 +205,9 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Fab/Fab.js

@@ -176,7 +176,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),

package/modern/FilledInput/FilledInput.js

@@ -236,7 +236,9 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/modern/FormControl/FormControl.js

@@ -247,7 +247,9 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/FormControlLabel/FormControlLabel.js

@@ -92,7 +92,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     control,
     disabled: disabledProp,
     disableTypography,
-    label,
+    label: labelProp,
     labelPlacement = 'end'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -124,23 +124,28 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
 
   const ownerState = _extends({}, props, {
     disabled,
-    label,
     labelPlacement,
     error: fcs.error
   });
 
   const classes = useUtilityClasses(ownerState);
+  let label = labelProp;
+
+  if (label != null && label.type !== Typography && !disableTypography) {
+    label = /*#__PURE__*/_jsx(Typography, _extends({
+      component: "span",
+      className: classes.label
+    }, componentsProps.typography, {
+      children: label
+    }));
+  }
+
   return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label.type === Typography || disableTypography ? label : /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
-      children: label
-    }))]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
@@ -197,7 +202,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * A text or an element to be used in an enclosing label element.
    */
-  label: PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]).isRequired,
+  label: PropTypes.node,
 
   /**
    * The position of the label.

package/modern/FormLabel/FormLabel.js

@@ -137,7 +137,9 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/Grow/Grow.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { elementAcceptingRef } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
-import { reflow, getTransitionProps } from '../transitions/utils';
+import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -24,6 +24,12 @@ const styles = {
     transform: 'none'
   }
 };
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+
+const isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/components/tooltips/) and
  * [Popover](/components/popover/) components.
@@ -97,7 +103,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration: isSafari154 ? duration : duration * 0.666,
       delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -133,11 +139,11 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: isSafari154 ? duration : duration * 0.666,
+      delay: isSafari154 ? delay : delay || duration * 0.333,
       easing: transitionTimingFunction
     })].join(',');
-    node.style.opacity = '0';
+    node.style.opacity = 0;
     node.style.transform = getScale(0.75);
 
     if (onExit) {

package/modern/Icon/Icon.js

@@ -130,7 +130,9 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'inherit'
    */
   color: PropTypes

package/modern/IconButton/IconButton.js

@@ -165,7 +165,9 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/modern/Input/Input.js

@@ -171,7 +171,9 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/modern/InputBase/InputBase.js

@@ -531,7 +531,9 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/modern/InputLabel/InputLabel.js

@@ -164,7 +164,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/LinearProgress/LinearProgress.js

@@ -328,7 +328,9 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Link/Link.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"];
+const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -9,6 +9,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
+import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
@@ -97,6 +98,7 @@ const LinkRoot = styled(Typography, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -110,7 +112,8 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus,
     TypographyClasses,
     underline = 'always',
-    variant = 'inherit'
+    variant = 'inherit',
+    sx
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -148,7 +151,9 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const ownerState = _extends({}, props, {
-    color,
+    // It is too complex to support any types of `sx`.
+    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
+    color: (typeof sx === 'function' ? sx(theme).color : sx?.color) || color,
     component,
     focusVisible,
     underline,
@@ -159,13 +164,15 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   return /*#__PURE__*/_jsx(LinkRoot, _extends({
     className: clsx(classes.root, className),
     classes: TypographyClasses,
-    color: color,
     component: component,
     onBlur: handleBlur,
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant
+    variant: variant,
+    sx: [{
+      color: colorTransformations[color] || color
+    }, ...(Array.isArray(sx) ? sx : [sx])]
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes

package/modern/ListItemButton/ListItemButton.js

@@ -53,6 +53,7 @@ const ListItemButtonRoot = styled(ButtonBase, {
   alignItems: 'center',
   position: 'relative',
   textDecoration: 'none',
+  minWidth: 0,
   boxSizing: 'border-box',
   textAlign: 'left',
   paddingTop: 8,

package/modern/OutlinedInput/OutlinedInput.js

@@ -178,7 +178,9 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/modern/Pagination/Pagination.js

@@ -155,6 +155,8 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/PaginationItem/PaginationItem.js

@@ -300,6 +300,8 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/Popper/Popper.js

@@ -1,12 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
-import { HTMLElementType, refType } from '@mui/utils';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
-import useThemeProps from '../styles/useThemeProps';
+import { HTMLElementType, refType } from '@mui/utils';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
+const PopperRoot = styled(PopperUnstyled, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 /**
  *
  * Demos:
@@ -19,13 +23,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [Popper API](https://mui.com/api/popper/)
  */
+
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPopper'
   });
-  return /*#__PURE__*/_jsx(PopperUnstyled, _extends({
+  return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme?.direction
   }, props, {
     ref: ref
@@ -129,6 +134,11 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    */
   popperRef: refType,
 
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false

package/modern/Radio/Radio.js

@@ -153,7 +153,9 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Slider/Slider.js

@@ -538,7 +538,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/SvgIcon/SvgIcon.js

@@ -133,7 +133,9 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
    * @default 'inherit'
    */

package/modern/Switch/Switch.js

@@ -256,7 +256,9 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/TextField/TextField.js

@@ -248,7 +248,9 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/ToggleButton/ToggleButton.js

@@ -166,6 +166,8 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
 
   /**
    * The color of the button when it is in an active state.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -191,7 +191,9 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of a button when it is selected.
+   * The color of the button when it is selected.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/modern/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/Unstable_TrapFocus';
+export { default } from '@mui/base/TrapFocus';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.1
+/** @license MUI v5.6.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/locale/index.js

@@ -1047,9 +1047,12 @@ export const etEE = {
 
           return 'Vali eelmine lehekülg';
         },
-        labelRowsPerPage: 'Ridu leheküljel:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Ridu leheküljel:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `rohkem kui ${to}`}`
       }
     },
     MuiRating: {

package/modern/styles/CssVarsProvider.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
+import experimental_extendTheme from './experimental_extendTheme';
+import createTypography from './createTypography';
+const defaultTheme = experimental_extendTheme();
+const {
+  CssVarsProvider: Experimental_CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = createCssVarsProvider({
+  theme: defaultTheme,
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  prefix: 'md',
+  resolveTheme: theme => {
+    const newTheme = _extends({}, theme, {
+      typography: createTypography(theme.palette, theme.typography)
+    });
+
+    return newTheme;
+  },
+  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+});
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/modern/styles/experimental_extendTheme.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colorSchemes", "opacity"],
+      _excluded2 = ["palette"];
+import { deepmerge } from '@mui/utils';
+import { colorChannel } from '@mui/system';
+import createThemeWithoutVars from './createTheme';
+import createPalette from './createPalette';
+export const defaultOpacity = {
+  active: 0.54,
+  hover: 0.04,
+  selected: 0.08,
+  disabled: 0.26,
+  focus: 0.12
+};
+
+function createTheme(options = {}, ...args) {
+  const {
+    colorSchemes: colorSchemesInput = {},
+    opacity: opacityInput = {}
+  } = options,
+        input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
+
+
+  let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+    palette: colorSchemesInput.light?.palette
+  })),
+      {
+    palette: lightPalette
+  } = _createThemeWithoutVa,
+      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+
+  const {
+    palette: darkPalette
+  } = createThemeWithoutVars({
+    palette: _extends({
+      mode: 'dark'
+    }, colorSchemesInput.dark?.palette)
+  });
+  colorSchemesInput.light = {
+    palette: lightPalette
+  };
+  colorSchemesInput.dark = {
+    palette: darkPalette
+  };
+  const colorSchemes = {};
+  Object.keys(colorSchemesInput).forEach(key => {
+    const palette = createPalette(colorSchemesInput[key].palette);
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      if (colors.main) {
+        palette[color].mainChannel = colorChannel(colors.main);
+      }
+
+      if (colors.light) {
+        palette[color].lightChannel = colorChannel(colors.light);
+      }
+
+      if (colors.dark) {
+        palette[color].darkChannel = colorChannel(colors.dark);
+      }
+
+      if (colors.primary) {
+        palette[color].primaryChannel = colorChannel(colors.primary);
+      }
+
+      if (colors.secondary) {
+        palette[color].secondaryChannel = colorChannel(colors.secondary);
+      }
+
+      if (colors.disabled) {
+        palette[color].disabledChannel = colorChannel(colors.disabled);
+      }
+    });
+    colorSchemes[key] = {
+      palette
+    };
+  });
+
+  const opacity = _extends({}, defaultOpacity, opacityInput);
+
+  muiTheme.colorSchemes = colorSchemes;
+  muiTheme.opacity = opacity;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  return muiTheme;
+}
+
+export default createTheme;

package/modern/styles/index.js

@@ -16,4 +16,6 @@ export { StyledEngineProvider } from '@mui/system'; // The legacy utilities from
 
 export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
+export { default as withTheme } from './withTheme';
+export * from './CssVarsProvider';
+export { default as experimental_extendTheme } from './experimental_extendTheme';

package/node/Alert/Alert.js

@@ -246,7 +246,9 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   closeText: _propTypes.default.string,
 
   /**
-   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: _propTypes.default
   /* @typescript-to-proptypes-ignore */