@mui/material 5.10.15 → 5.10.17

package/esm/styles/experimental_extendTheme.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["colorSchemes", "cssVarPrefix"],
   _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
-import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
+import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -21,8 +21,18 @@ function assignNode(obj, keys) {
   });
 }
 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;
+};
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
@@ -87,22 +97,22 @@ export default function extendTheme(options = {}, ...args) {
     // 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', safeDarken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', 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', safeLighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', 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'));
@@ -115,52 +125,52 @@ export default function extendTheme(options = {}, ...args) {
       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', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', 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', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
+      const snackbarContentBackground = 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', 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', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', 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', safeLighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', 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', safeDarken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', 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'));
@@ -175,72 +185,74 @@ export default function extendTheme(options = {}, ...args) {
       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', safeDarken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', 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', safeDarken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
+      const snackbarContentBackground = 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', 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));
+      setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
     }
-    palette.background.defaultChannel = colorChannel(palette.background.default); // MUI X - DataGrid needs this token.
+    setColor(palette.background, 'defaultChannel', 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.
 
-    palette.common.backgroundChannel = colorChannel(palette.common.background);
-    palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
-    palette.dividerChannel = colorChannel(palette.divider);
+    setColor(palette.common, 'backgroundChannel', 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', 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', 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', safeColorChannel(colors.main));
+        }
+        if (colors.light) {
+          setColor(palette[color], 'lightChannel', safeColorChannel(colors.light));
+        }
+        if (colors.dark) {
+          setColor(palette[color], 'darkChannel', safeColorChannel(colors.dark));
+        }
+        if (colors.contrastText) {
+          setColor(palette[color], 'contrastTextChannel', safeColorChannel(colors.contrastText));
+        }
+        if (color === 'text') {
+          // Text colors: text.primary, text.secondary
+          setColor(palette[color], 'primaryChannel', 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', 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', 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', safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          }
+        }
       }
     });
   });

package/esm/utils/index.js

@@ -20,7 +20,9 @@ export { default as useIsFocusVisible } from './useIsFocusVisible';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export 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'));
+    if (process.env.NODE_ENV !== 'production') {
+      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.configure(generator);
   }
 };

package/index.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.

package/internal/switchBaseClasses.d.ts

@@ -6,7 +6,7 @@ export interface SwitchBaseClasses {
     edgeStart: string;
     edgeEnd: string;
 }
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export type SwitchBaseClassKey = keyof SwitchBaseClasses;
 export declare function getSwitchBaseUtilityClass(slot: string): string;
 declare const switchBaseClasses: SwitchBaseClasses;
 export default switchBaseClasses;

package/legacy/Chip/Chip.js

@@ -245,7 +245,10 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     size = _props$size === void 0 ? 'medium' : _props$size,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'filled' : _props$variant,
-    other = _objectWithoutProperties(props, ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"]);
+    tabIndex = props.tabIndex,
+    _props$skipFocusWhenD = props.skipFocusWhenDisabled,
+    skipFocusWhenDisabled = _props$skipFocusWhenD === void 0 ? false : _props$skipFocusWhenD,
+    other = _objectWithoutProperties(props, ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"]);
   var chipRef = React.useRef(null);
   var handleRef = useForkRef(chipRef, ref);
   var handleDeleteIconClick = function handleDeleteIconClick(event) {
@@ -333,6 +336,7 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     ref: handleRef,
+    tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
     ownerState: ownerState
   }, moreProps, other, {
     children: [avatar || icon, /*#__PURE__*/_jsx(ChipLabel, {
@@ -424,10 +428,20 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
    * @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'

package/legacy/Fab/Fab.js

@@ -33,10 +33,10 @@ var FabRoot = styled(ButtonBase, {
     return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
   }
 })(function (_ref) {
-  var _theme$palette$getCon, _theme$palette, _extends2;
+  var _theme$palette$getCon, _theme$palette;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
-  return _extends({}, theme.typography.button, (_extends2 = {
+  return _extends({}, theme.typography.button, _defineProperty({
     minHeight: 36,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
       duration: theme.transitions.duration.short
@@ -61,13 +61,9 @@ var FabRoot = styled(ButtonBase, {
       },
       textDecoration: 'none'
     }
-  }, _defineProperty(_extends2, "&.".concat(fabClasses.focusVisible), {
+  }, "&.".concat(fabClasses.focusVisible), {
     boxShadow: (theme.vars || theme).shadows[6]
-  }), _defineProperty(_extends2, "&.".concat(fabClasses.disabled), {
-    color: (theme.vars || theme).palette.action.disabled,
-    boxShadow: (theme.vars || theme).shadows[0],
-    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-  }), _extends2), ownerState.size === 'small' && {
+  }), ownerState.size === 'small' && {
     width: 40,
     height: 40
   }, ownerState.size === 'medium' && {
@@ -109,6 +105,13 @@ var FabRoot = styled(ButtonBase, {
       }
     }
   });
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return _defineProperty({}, "&.".concat(fabClasses.disabled), {
+    color: (theme.vars || theme).palette.action.disabled,
+    boxShadow: (theme.vars || theme).shadows[0],
+    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+  });
 });
 var Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
   var props = useThemeProps({

package/legacy/FormControl/FormControlContext.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
-
 /**
  * @ignore - internal component.
  */
-var FormControlContext = /*#__PURE__*/React.createContext();
+var FormControlContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {
   FormControlContext.displayName = 'FormControlContext';
 }

package/legacy/IconButton/iconButtonClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getIconButtonUtilityClass(slot) {
   return generateUtilityClass('MuiIconButton', slot);
 }
-var iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+var iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 export default iconButtonClasses;

package/legacy/Rating/Rating.js

@@ -94,11 +94,12 @@ var RatingRoot = styled('span', {
 var RatingLabel = styled('label', {
   name: 'MuiRating',
   slot: 'Label',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.label;
+  overridesResolver: function overridesResolver(_ref3, styles) {
+    var ownerState = _ref3.ownerState;
+    return [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive];
   }
-})(function (_ref3) {
-  var ownerState = _ref3.ownerState;
+})(function (_ref4) {
+  var ownerState = _ref4.ownerState;
   return _extends({
     cursor: 'inherit'
   }, ownerState.emptyValueFocused && {
@@ -116,9 +117,9 @@ var RatingIcon = styled('span', {
     var ownerState = props.ownerState;
     return [styles.icon, ownerState.iconEmpty && styles.iconEmpty, ownerState.iconFilled && styles.iconFilled, ownerState.iconHover && styles.iconHover, ownerState.iconFocus && styles.iconFocus, ownerState.iconActive && styles.iconActive];
   }
-})(function (_ref4) {
-  var theme = _ref4.theme,
-    ownerState = _ref4.ownerState;
+})(function (_ref5) {
+  var theme = _ref5.theme,
+    ownerState = _ref5.ownerState;
   return _extends({
     // Fit wrapper to actual icon size.
     display: 'flex',
@@ -144,8 +145,8 @@ var RatingDecimal = styled('span', {
     var iconActive = props.iconActive;
     return [styles.decimal, iconActive && styles.iconActive];
   }
-})(function (_ref5) {
-  var iconActive = _ref5.iconActive;
+})(function (_ref6) {
+  var iconActive = _ref6.iconActive;
   return _extends({
     position: 'relative'
   }, iconActive && {

package/legacy/Slider/Slider.js

@@ -327,7 +327,8 @@ var SliderMark = styled('span', {
     return slotShouldForwardProp(prop) && prop !== 'markActive';
   },
   overridesResolver: function overridesResolver(props, styles) {
-    return styles.mark;
+    var markActive = props.markActive;
+    return [styles.mark, markActive && styles.markActive];
   }
 })(function (_ref6) {
   var theme = _ref6.theme,

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -7,6 +7,7 @@ import { elementTypeAcceptingRef } from '@mui/utils';
 import { useThemeProps } from '@mui/system';
 import { NoSsr } from '@mui/base';
 import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
+import useForkRef from '../utils/useForkRef';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
@@ -161,6 +162,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
   var swipeAreaRef = React.useRef();
   var backdropRef = React.useRef();
   var paperRef = React.useRef();
+  var handleRef = useForkRef(PaperProps.ref, paperRef);
   var touchDetected = React.useRef(false);
 
   // Ref for transition duration based on / to match swipe speed
@@ -458,7 +460,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
         style: _extends({
           pointerEvents: variant === 'temporary' && !open ? 'none' : ''
         }, PaperProps.style),
-        ref: paperRef
+        ref: handleRef
       }),
       anchor: anchor,
       transitionDuration: calculatedDurationRef.current || transitionDuration,

package/legacy/index.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.

package/legacy/locale/index.js

@@ -3728,12 +3728,12 @@ export var zhTW = {
           }
           return '上一頁';
         },
-        labelRowsPerPage: '每頁行數:',
+        labelRowsPerPage: '每頁數量:',
         labelDisplayedRows: function labelDisplayedRows(_ref39) {
           var from = _ref39.from,
             to = _ref39.to,
             count = _ref39.count;
-          return "\u7B2C ".concat(from, " \u689D\u5230\u7B2C ").concat(to, " \u689D\uFF0C").concat(count !== -1 ? "\u5171 ".concat(count, " \u689D") : "\u81F3\u5C11 ".concat(to, " \u689D"));
+          return "".concat(from, " ~ ").concat(to, " / ").concat(count !== -1 ? count : "".concat(to, " \u4EE5\u4E0A"));
         }
       }
     },
@@ -3742,15 +3742,15 @@ export var zhTW = {
         getLabelText: function getLabelText(value) {
           return "".concat(value, " \u9846\u661F");
         },
-        emptyLabelText: '無標簽'
+        emptyLabelText: '無標籤'
       }
     },
     MuiAutocomplete: {
       defaultProps: {
         clearText: '清空',
         closeText: '關閉',
-        loadingText: '載入中……',
-        noOptionsText: '没有可用選項',
+        loadingText: '載入中…',
+        noOptionsText: '沒有可用選項',
         openText: '打開'
       }
     },