@mui/material 5.10.16 → 5.10.17

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.16
+/** @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) {
@@ -7963,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 = {},
@@ -7978,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,
@@ -7994,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
@@ -8130,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 = {
       /**
@@ -8175,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
        */
@@ -9673,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;
@@ -9739,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'));
@@ -9767,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'));
@@ -9827,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);
-        }
+        // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-        // Text colors: text.primary, text.secondary
-        if (colors.primary) {
-          palette[color].primaryChannel = colorChannel(colors.primary);
-        }
-        if (colors.secondary) {
-          palette[color].secondaryChannel = colorChannel(colors.secondary);
-        }
-
-        // 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().'));
+            }
+          }
         }
       });
     });
@@ -14336,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);
@@ -16217,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);
     }
   };
@@ -28606,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,
@@ -28653,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({
@@ -38057,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({
@@ -40116,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,