@mui/material 5.10.15 → 5.10.17

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.15
+/** @license MUI v5.10.17
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7305,6 +7305,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const decomposedColor = decomposeColor(color);
     return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
   };
+  const private_safeColorChannel = (color, warning) => {
+    try {
+      return colorChannel(color);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  };
 
   /**
    * Converts a color object with type and values to a string.
@@ -7435,6 +7445,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
     return recomposeColor(color);
   }
+  function private_safeAlpha(color, value, warning) {
+    try {
+      return alpha(color, value);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   /**
    * Darkens a color.
@@ -7454,6 +7474,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
     return recomposeColor(color);
   }
+  function private_safeDarken(color, coefficient, warning) {
+    try {
+      return darken(color, coefficient);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   /**
    * Lightens a color.
@@ -7477,6 +7507,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
     return recomposeColor(color);
   }
+  function private_safeLighten(color, coefficient, warning) {
+    try {
+      return lighten(color, coefficient);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   /**
    * Darken or lighten a color, depending on its luminance.
@@ -7488,6 +7528,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   function emphasize(color, coefficient = 0.15) {
     return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
   }
+  function private_safeEmphasize(color, coefficient, warning) {
+    try {
+      return private_safeEmphasize(color, coefficient);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   const EMPTY_THEME = {};
   function InnerThemeProvider(props) {
@@ -7626,10 +7676,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * }} options.
    *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
    *
-   * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
+   * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
    *
    * @example
-   * const { css, vars, parsedTheme } = parser({
+   * const { css, vars } = parser({
    *   fontSize: 12,
    *   lineHeight: 1.2,
    *   palette: { primary: { 500: 'var(--color)' } }
@@ -7637,7 +7687,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *
    * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
    * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
-   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
    */
   function cssVarsParser(theme, options) {
     const {
@@ -7646,7 +7695,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     } = options || {};
     const css = {};
     const vars = {};
-    const parsedTheme = {};
     walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
         if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
@@ -7658,14 +7706,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
         }
       }
-      assignNestedKeys(parsedTheme, keys, value, arrayKeys);
     }, keys => keys[0] === 'vars' // skip 'vars/*' paths
     );
 
     return {
       css,
-      vars,
-      parsedTheme
+      vars
     };
   }
 
@@ -7967,9 +8013,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       colorSchemeSelector = ':root',
-      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
+      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false
     }) {
       const hasMounted = React__namespace.useRef(false);
+      const upperTheme = useTheme$3();
+      const ctx = React__namespace.useContext(ColorSchemeContext);
+      const nested = !!ctx && !disableNestedContext;
       const {
           colorSchemes = {},
           components = {},
@@ -7982,12 +8033,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
       const {
-        mode,
+        mode: stateMode,
         setMode,
         systemMode,
         lightColorScheme,
         darkColorScheme,
-        colorScheme,
+        colorScheme: stateColorScheme,
         setColorScheme
       } = useCurrentColorScheme({
         supportedColorSchemes: allColorSchemes,
@@ -7998,6 +8049,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         defaultMode,
         storageWindow
       });
+      let mode = stateMode;
+      let colorScheme = stateColorScheme;
+      if (nested) {
+        mode = ctx.mode;
+        colorScheme = ctx.colorScheme;
+      }
       const calculatedMode = (() => {
         if (!mode) {
           // This scope occurs on the server
@@ -8023,15 +8080,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
       const {
         css: rootCss,
-        vars: rootVars,
-        parsedTheme
+        vars: rootVars
       } = cssVarsParser(restThemeProp, {
         prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
 
       // 3. Start composing the theme object
-      const theme = _extends({}, parsedTheme, {
+      const theme = _extends({}, restThemeProp, {
         components,
         colorSchemes,
         cssVarPrefix,
@@ -8047,8 +8103,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       Object.entries(colorSchemes).forEach(([key, scheme]) => {
         const {
           css,
-          vars,
-          parsedTheme: parsedScheme
+          vars
         } = cssVarsParser(scheme, {
           prefix: cssVarPrefix,
           shouldSkipGeneratingVar
@@ -8056,12 +8111,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         theme.vars = deepmerge(theme.vars, vars);
         if (key === calculatedColorScheme) {
           // 4.1 Merge the selected color scheme to the theme
-          Object.keys(parsedScheme).forEach(schemeKey => {
-            if (parsedScheme[schemeKey] && typeof parsedScheme[schemeKey] === 'object') {
+          Object.keys(scheme).forEach(schemeKey => {
+            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
               // shallow merge the 1st level structure of the theme.
-              theme[schemeKey] = _extends({}, theme[schemeKey], parsedScheme[schemeKey]);
+              theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
             } else {
-              theme[schemeKey] = parsedScheme[schemeKey];
+              theme[schemeKey] = scheme[schemeKey];
             }
           });
           if (theme.palette) {
@@ -8136,21 +8191,33 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         setColorScheme,
         allColorSchemes
       }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-      return /*#__PURE__*/jsxRuntime_2(ColorSchemeContext.Provider, {
-        value: contextValue,
-        children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
-          styles: {
-            [colorSchemeSelector]: rootCss
-          }
-        }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
-          styles: otherColorSchemesStyleSheet
+      let shouldGenerateStyleSheet = true;
+      if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+        shouldGenerateStyleSheet = false;
+      }
+      const element = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+        children: [shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+            styles: {
+              [colorSchemeSelector]: rootCss
+            }
+          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+            styles: defaultColorSchemeStyleSheet
+          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+            styles: otherColorSchemesStyleSheet
+          })]
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
           theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
         })]
       });
+      if (nested) {
+        return element;
+      }
+      return /*#__PURE__*/jsxRuntime_1(ColorSchemeContext.Provider, {
+        value: contextValue,
+        children: element
+      });
     }
     CssVarsProvider.propTypes = {
       /**
@@ -8181,6 +8248,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        * The initial mode used.
        */
       defaultMode: PropTypes.string,
+      /**
+       * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+       */
+      disableNestedContext: PropTypes.bool,
+      /**
+       * If `true`, the style sheet won't be generated.
+       *
+       * This is useful for controlling nested CssVarsProvider behavior.
+       */
+      disableStyleSheetGeneration: PropTypes.bool,
       /**
        * Disable CSS transitions when switching between modes or color schemes
        */
@@ -9679,8 +9756,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
   }
   function setColor(obj, key, defaultValue) {
-    obj[key] = obj[key] || defaultValue;
+    if (!obj[key] && defaultValue) {
+      obj[key] = defaultValue;
+    }
   }
+  const silent = fn => {
+    try {
+      return fn();
+    } catch (error) {
+      // ignore error
+    }
+    return undefined;
+  };
   const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
@@ -9745,22 +9832,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // assign component variables
       assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
       if (key === 'light') {
-        setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
-        setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
-        setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
-        setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorColor', private_safeDarken(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', private_safeDarken(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', private_safeDarken(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', private_safeDarken(palette.warning.light, 0.6));
         setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
         setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
         setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
         setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
-        setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
-        setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
-        setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
-        setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
-        setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
-        setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
-        setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
-        setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
+        setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
+        setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
+        setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
+        setColor(palette.Alert, 'errorStandardBg', private_safeLighten(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', private_safeLighten(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', private_safeLighten(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', private_safeLighten(palette.warning.light, 0.9));
         setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
         setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
         setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
@@ -9773,52 +9860,52 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
         setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
         setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-        setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
-        setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
-        setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
-        setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
-        setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
-        setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+        setColor(palette.LinearProgress, 'primaryBg', private_safeLighten(palette.primary.main, 0.62));
+        setColor(palette.LinearProgress, 'secondaryBg', private_safeLighten(palette.secondary.main, 0.62));
+        setColor(palette.LinearProgress, 'errorBg', private_safeLighten(palette.error.main, 0.62));
+        setColor(palette.LinearProgress, 'infoBg', private_safeLighten(palette.info.main, 0.62));
+        setColor(palette.LinearProgress, 'successBg', private_safeLighten(palette.success.main, 0.62));
+        setColor(palette.LinearProgress, 'warningBg', private_safeLighten(palette.warning.main, 0.62));
         setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
-        setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
-        setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
-        setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
-        setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
-        setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
-        setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
-        const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+        setColor(palette.Slider, 'primaryTrack', private_safeLighten(palette.primary.main, 0.62));
+        setColor(palette.Slider, 'secondaryTrack', private_safeLighten(palette.secondary.main, 0.62));
+        setColor(palette.Slider, 'errorTrack', private_safeLighten(palette.error.main, 0.62));
+        setColor(palette.Slider, 'infoTrack', private_safeLighten(palette.info.main, 0.62));
+        setColor(palette.Slider, 'successTrack', private_safeLighten(palette.success.main, 0.62));
+        setColor(palette.Slider, 'warningTrack', private_safeLighten(palette.warning.main, 0.62));
+        const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.8);
         setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-        setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
-        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', private_safeEmphasize(palette.background.paper, 0.15));
         setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
         setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
         setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
         setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
-        setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
-        setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
-        setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
-        setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
-        setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
-        setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
-        setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
-        setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
+        setColor(palette.Switch, 'primaryDisabledColor', private_safeLighten(palette.primary.main, 0.62));
+        setColor(palette.Switch, 'secondaryDisabledColor', private_safeLighten(palette.secondary.main, 0.62));
+        setColor(palette.Switch, 'errorDisabledColor', private_safeLighten(palette.error.main, 0.62));
+        setColor(palette.Switch, 'infoDisabledColor', private_safeLighten(palette.info.main, 0.62));
+        setColor(palette.Switch, 'successDisabledColor', private_safeLighten(palette.success.main, 0.62));
+        setColor(palette.Switch, 'warningDisabledColor', private_safeLighten(palette.warning.main, 0.62));
+        setColor(palette.TableCell, 'border', private_safeLighten(private_safeAlpha(palette.divider, 1), 0.88));
+        setColor(palette.Tooltip, 'bg', private_safeAlpha(palette.grey[700], 0.92));
       } else {
-        setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
-        setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
-        setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
-        setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorColor', private_safeLighten(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', private_safeLighten(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', private_safeLighten(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', private_safeLighten(palette.warning.light, 0.6));
         setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
         setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
         setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
         setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
-        setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
-        setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
-        setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
-        setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
-        setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
-        setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
-        setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
-        setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
+        setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
+        setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
+        setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
+        setColor(palette.Alert, 'errorStandardBg', private_safeDarken(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', private_safeDarken(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', private_safeDarken(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', private_safeDarken(palette.warning.light, 0.9));
         setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
         setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
         setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
@@ -9833,72 +9920,74 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
         setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
         setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-        setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
-        setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
-        setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
-        setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
-        setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
-        setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+        setColor(palette.LinearProgress, 'primaryBg', private_safeDarken(palette.primary.main, 0.5));
+        setColor(palette.LinearProgress, 'secondaryBg', private_safeDarken(palette.secondary.main, 0.5));
+        setColor(palette.LinearProgress, 'errorBg', private_safeDarken(palette.error.main, 0.5));
+        setColor(palette.LinearProgress, 'infoBg', private_safeDarken(palette.info.main, 0.5));
+        setColor(palette.LinearProgress, 'successBg', private_safeDarken(palette.success.main, 0.5));
+        setColor(palette.LinearProgress, 'warningBg', private_safeDarken(palette.warning.main, 0.5));
         setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
-        setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
-        setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
-        setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
-        setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
-        setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
-        setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
-        const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+        setColor(palette.Slider, 'primaryTrack', private_safeDarken(palette.primary.main, 0.5));
+        setColor(palette.Slider, 'secondaryTrack', private_safeDarken(palette.secondary.main, 0.5));
+        setColor(palette.Slider, 'errorTrack', private_safeDarken(palette.error.main, 0.5));
+        setColor(palette.Slider, 'infoTrack', private_safeDarken(palette.info.main, 0.5));
+        setColor(palette.Slider, 'successTrack', private_safeDarken(palette.success.main, 0.5));
+        setColor(palette.Slider, 'warningTrack', private_safeDarken(palette.warning.main, 0.5));
+        const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.98);
         setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-        setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
-        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', private_safeEmphasize(palette.background.paper, 0.15));
         setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
         setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
         setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
         setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
-        setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
-        setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
-        setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
-        setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
-        setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
-        setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
-        setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
-        setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
-      }
-      palette.background.defaultChannel = colorChannel(palette.background.default); // MUI X - DataGrid needs this token.
-
-      palette.common.backgroundChannel = colorChannel(palette.common.background);
-      palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
-      palette.dividerChannel = colorChannel(palette.divider);
+        setColor(palette.Switch, 'primaryDisabledColor', private_safeDarken(palette.primary.main, 0.55));
+        setColor(palette.Switch, 'secondaryDisabledColor', private_safeDarken(palette.secondary.main, 0.55));
+        setColor(palette.Switch, 'errorDisabledColor', private_safeDarken(palette.error.main, 0.55));
+        setColor(palette.Switch, 'infoDisabledColor', private_safeDarken(palette.info.main, 0.55));
+        setColor(palette.Switch, 'successDisabledColor', private_safeDarken(palette.success.main, 0.55));
+        setColor(palette.Switch, 'warningDisabledColor', private_safeDarken(palette.warning.main, 0.55));
+        setColor(palette.TableCell, 'border', private_safeDarken(private_safeAlpha(palette.divider, 1), 0.68));
+        setColor(palette.Tooltip, 'bg', private_safeAlpha(palette.grey[700], 0.92));
+      }
+      setColor(palette.background, 'defaultChannel', private_safeColorChannel(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
+
+      setColor(palette.common, 'backgroundChannel', private_safeColorChannel(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+      setColor(palette.common, 'onBackgroundChannel', private_safeColorChannel(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+      setColor(palette, 'dividerChannel', private_safeColorChannel(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
       Object.keys(palette).forEach(color => {
         const colors = palette[color];
 
-        // Color palettes: primary, secondary, error, info, success, and warning
-        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.contrastText) {
-          palette[color].contrastTextChannel = colorChannel(colors.contrastText);
-        }
-
-        // Text colors: text.primary, text.secondary
-        if (colors.primary) {
-          palette[color].primaryChannel = colorChannel(colors.primary);
-        }
-        if (colors.secondary) {
-          palette[color].secondaryChannel = colorChannel(colors.secondary);
-        }
+        // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-        // Action colors: action.active, action.selected
-        if (colors.active) {
-          palette[color].activeChannel = colorChannel(colors.active);
-        }
-        if (colors.selected) {
-          palette[color].selectedChannel = colorChannel(colors.selected);
+        if (colors && typeof colors === 'object') {
+          // Silent the error for custom palettes.
+          if (colors.main) {
+            setColor(palette[color], 'mainChannel', private_safeColorChannel(colors.main));
+          }
+          if (colors.light) {
+            setColor(palette[color], 'lightChannel', private_safeColorChannel(colors.light));
+          }
+          if (colors.dark) {
+            setColor(palette[color], 'darkChannel', private_safeColorChannel(colors.dark));
+          }
+          if (colors.contrastText) {
+            setColor(palette[color], 'contrastTextChannel', private_safeColorChannel(colors.contrastText));
+          }
+          if (color === 'text') {
+            // Text colors: text.primary, text.secondary
+            setColor(palette[color], 'primaryChannel', private_safeColorChannel(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColor(palette[color], 'secondaryChannel', private_safeColorChannel(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          }
+          if (color === 'action') {
+            // Action colors: action.active, action.selected
+            if (colors.active) {
+              setColor(palette[color], 'activeChannel', private_safeColorChannel(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            }
+            if (colors.selected) {
+              setColor(palette[color], 'selectedChannel', private_safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            }
+          }
         }
       });
     });
@@ -9956,12 +10045,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /**
    * Appends the ownerState object to the props, merging with the existing one if necessary.
    *
-   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
    * @param otherProps Props of the element.
    * @param ownerState
    */
   function appendOwnerState(elementType, otherProps, ownerState) {
-    if (isHostComponent(elementType)) {
+    if (elementType === undefined || isHostComponent(elementType)) {
       return otherProps;
     }
     return _extends({}, otherProps, {
@@ -14342,7 +14431,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {}
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$26);
-    const [exited, setExited] = React__namespace.useState(true);
+    const [exited, setExited] = React__namespace.useState(!open);
     const modal = React__namespace.useRef({});
     const mountNodeRef = React__namespace.useRef(null);
     const modalRef = React__namespace.useRef(null);
@@ -16223,7 +16312,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const unstable_ClassNameGenerator = {
     configure: generator => {
-      console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
+      {
+        console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
+      }
       ClassNameGenerator$1.configure(generator);
     }
   };
@@ -19213,7 +19304,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getIconButtonUtilityClass(slot) {
     return generateUtilityClass('MuiIconButton', slot);
   }
-  const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+  const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
   const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
@@ -20473,7 +20564,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
-  const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
+  const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
   const useUtilityClasses$1x = ownerState => {
     const {
       classes,
@@ -20750,7 +20841,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onKeyDown,
         onKeyUp,
         size = 'medium',
-        variant = 'filled'
+        variant = 'filled',
+        tabIndex,
+        skipFocusWhenDisabled = false
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1P);
     const chipRef = React__namespace.useRef(null);
@@ -20840,6 +20933,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
       ref: handleRef,
+      tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
       ownerState: ownerState
     }, moreProps, other, {
       children: [avatar || icon, /*#__PURE__*/jsxRuntime_1(ChipLabel, {
@@ -20931,10 +21025,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default 'medium'
      */
     size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+    /**
+     * If `true`, allows the disabled chip to escape focus.
+     * If `false`, allows the disabled chip to receive focus.
+     * @default false
+     */
+    skipFocusWhenDisabled: PropTypes.bool,
     /**
      * 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]),
+    /**
+     * @ignore
+     */
+    tabIndex: PropTypes.number,
     /**
      * The variant to use.
      * @default 'filled'
@@ -20962,7 +21066,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /**
    * @ignore - internal component.
    */
-  const FormControlContext = /*#__PURE__*/React__namespace.createContext();
+  const FormControlContext = /*#__PURE__*/React__namespace.createContext(undefined);
   {
     FormControlContext.displayName = 'FormControlContext';
   }
@@ -28599,11 +28703,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       },
       [`&.${fabClasses$1.focusVisible}`]: {
         boxShadow: (theme.vars || theme).shadows[6]
-      },
-      [`&.${fabClasses$1.disabled}`]: {
-        color: (theme.vars || theme).palette.action.disabled,
-        boxShadow: (theme.vars || theme).shadows[0],
-        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
       }
     }, ownerState.size === 'small' && {
       width: 40,
@@ -28646,6 +28745,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }
+  }), ({
+    theme
+  }) => ({
+    [`&.${fabClasses$1.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    }
   }));
   const Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
     const props = useThemeProps({
@@ -38050,7 +38157,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const RatingLabel = styled$1('label', {
     name: 'MuiRating',
     slot: 'Label',
-    overridesResolver: (props, styles) => styles.label
+    overridesResolver: ({
+      ownerState
+    }, styles) => [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive]
   })(({
     ownerState
   }) => _extends({
@@ -40109,7 +40218,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     name: 'MuiSlider',
     slot: 'Mark',
     shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markActive',
-    overridesResolver: (props, styles) => styles.mark
+    overridesResolver: (props, styles) => {
+      const {
+        markActive
+      } = props;
+      return [styles.mark, markActive && styles.markActive];
+    }
   })(({
     theme,
     ownerState,
@@ -44344,6 +44458,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const swipeAreaRef = React__namespace.useRef();
     const backdropRef = React__namespace.useRef();
     const paperRef = React__namespace.useRef();
+    const handleRef = useForkRef(PaperProps.ref, paperRef);
     const touchDetected = React__namespace.useRef(false);
 
     // Ref for transition duration based on / to match swipe speed
@@ -44638,7 +44753,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           style: _extends({
             pointerEvents: variant === 'temporary' && !open ? 'none' : ''
           }, PaperProps.style),
-          ref: paperRef
+          ref: handleRef
         }),
         anchor: anchor,
         transitionDuration: calculatedDurationRef.current || transitionDuration,