@mui/material 5.8.5 → 5.9.0

package/node/Unstable_Grid2/grid2Classes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getGrid2UtilityClass = getGrid2UtilityClass;
+
+var _base = require("@mui/base");
+
+function getGrid2UtilityClass(slot) {
+  return (0, _base.generateUtilityClass)('MuiGrid2', slot);
+}
+
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const grid2Classes = (0, _base.generateUtilityClasses)('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth', // spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+var _default = grid2Classes;
+exports.default = _default;

package/node/Unstable_Grid2/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  grid2Classes: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "grid2Classes", {
+  enumerable: true,
+  get: function () {
+    return _grid2Classes.default;
+  }
+});
+
+var _Grid = _interopRequireDefault(require("./Grid2"));
+
+var _Grid2Props = require("./Grid2Props");
+
+Object.keys(_Grid2Props).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Grid2Props[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Grid2Props[key];
+    }
+  });
+});
+
+var _grid2Classes = _interopRequireWildcard(require("./grid2Classes"));
+
+Object.keys(_grid2Classes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _grid2Classes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _grid2Classes[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.5
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,6 +62,7 @@ var _exportNames = {
   FormHelperText: true,
   FormLabel: true,
   Grid: true,
+  Unstable_Grid2: true,
   Grow: true,
   Hidden: true,
   Icon: true,
@@ -918,6 +919,12 @@ Object.defineProperty(exports, "Typography", {
     return _Typography.default;
   }
 });
+Object.defineProperty(exports, "Unstable_Grid2", {
+  enumerable: true,
+  get: function () {
+    return _Unstable_Grid.default;
+  }
+});
 Object.defineProperty(exports, "Zoom", {
   enumerable: true,
   get: function () {
@@ -1692,6 +1699,20 @@ Object.keys(_Grid).forEach(function (key) {
   });
 });
 
+var _Unstable_Grid = _interopRequireWildcard(require("./Unstable_Grid2"));
+
+Object.keys(_Unstable_Grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Unstable_Grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Unstable_Grid[key];
+    }
+  });
+});
+
 var _Grow = _interopRequireWildcard(require("./Grow"));
 
 Object.keys(_Grow).forEach(function (key) {

package/node/styles/CssVarsProvider.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useColorScheme = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
+exports.useColorScheme = exports.shouldSkipGeneratingVar = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,10 +15,16 @@ var _experimental_extendTheme = _interopRequireDefault(require("./experimental_e
 
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 
-/* eslint-disable @typescript-eslint/naming-convention */
+const shouldSkipGeneratingVar = keys => {
+  var _keys$;
+
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+
+exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
 const defaultTheme = (0, _experimental_extendTheme.default)();
 const {
-  CssVarsProvider: Experimental_CssVarsProvider,
+  CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
@@ -30,15 +36,14 @@ const {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'mui',
   resolveTheme: theme => {
     const newTheme = (0, _extends2.default)({}, theme, {
       typography: (0, _createTypography.default)(theme.palette, theme.typography)
     });
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  shouldSkipGeneratingVar
 });
 exports.getInitColorSchemeScript = getInitColorSchemeScript;
 exports.useColorScheme = useColorScheme;
-exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
+exports.Experimental_CssVarsProvider = CssVarsProvider;

package/node/styles/experimental_extendTheme.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createGetCssVar = void 0;
 exports.default = extendTheme;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,7 +20,7 @@ var _createTheme = _interopRequireDefault(require("./createTheme"));
 
 var _Paper = require("../Paper/Paper");
 
-const _excluded = ["colorSchemes"],
+const _excluded = ["colorSchemes", "cssVarPrefix"],
       _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -42,13 +43,19 @@ function setColor(obj, key, defaultValue) {
   obj[key] = obj[key] || defaultValue;
 }
 
+const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
+
+exports.createGetCssVar = createGetCssVar;
+
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+  const getCssVar = createGetCssVar(cssVarPrefix);
 
   const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -66,12 +73,14 @@ function extendTheme(options = {}, ...args) {
     }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
   });
   let theme = (0, _extends2.default)({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
       light: (0, _extends2.default)({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: (0, _extends2.default)({
           inputPlaceholder: 0.42,
-          inputTouchBottomLine: 0.42,
+          inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
           switchTrack: 0.38
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
@@ -81,7 +90,7 @@ function extendTheme(options = {}, ...args) {
         palette: darkPalette,
         opacity: (0, _extends2.default)({
           inputPlaceholder: 0.5,
-          inputTouchBottomLine: 0.7,
+          inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
           switchTrack: 0.3
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
@@ -101,14 +110,34 @@ function extendTheme(options = {}, ...args) {
     } // assign component variables
 
 
-    assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
 
     if (key === 'light') {
-      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
-      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
-      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
-      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
-      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.Alert, 'errorColor', (0, _system.darken)(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', (0, _system.darken)(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', (0, _system.darken)(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', (0, _system.darken)(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', (0, _system.lighten)(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', (0, _system.lighten)(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', (0, _system.lighten)(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', (0, _system.lighten)(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'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
       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)');
@@ -118,19 +147,21 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', (0, _system.lighten)(palette.info.main, 0.62));
       setColor(palette.LinearProgress, 'successBg', (0, _system.lighten)(palette.success.main, 0.62));
       setColor(palette.LinearProgress, 'warningBg', (0, _system.lighten)(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
       setColor(palette.Slider, 'primaryTrack', (0, _system.lighten)(palette.primary.main, 0.62));
       setColor(palette.Slider, 'secondaryTrack', (0, _system.lighten)(palette.secondary.main, 0.62));
       setColor(palette.Slider, 'errorTrack', (0, _system.lighten)(palette.error.main, 0.62));
       setColor(palette.Slider, 'infoTrack', (0, _system.lighten)(palette.info.main, 0.62));
       setColor(palette.Slider, 'successTrack', (0, _system.lighten)(palette.success.main, 0.62));
       setColor(palette.Slider, 'warningTrack', (0, _system.lighten)(palette.warning.main, 0.62));
-      setColor(palette.SnackbarContent, 'bg', (0, _system.emphasize)(palette.background.default, 0.8));
+      const snackbarContentBackground = (0, _system.emphasize)(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
-      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
-      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
-      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+      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', (0, _system.lighten)(palette.primary.main, 0.62));
       setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.lighten)(palette.secondary.main, 0.62));
       setColor(palette.Switch, 'errorDisabledColor', (0, _system.lighten)(palette.error.main, 0.62));
@@ -140,15 +171,35 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.TableCell, 'border', (0, _system.lighten)((0, _system.alpha)(palette.divider, 1), 0.88));
       setColor(palette.Tooltip, 'bg', (0, _system.alpha)(palette.grey[700], 0.92));
     } else {
-      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
-      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
-
-      setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
-
-      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
-      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
-      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
-      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Alert, 'errorColor', (0, _system.lighten)(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', (0, _system.lighten)(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', (0, _system.lighten)(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', (0, _system.lighten)(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', (0, _system.darken)(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', (0, _system.darken)(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', (0, _system.darken)(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', (0, _system.darken)(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'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
       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)');
@@ -158,19 +209,21 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', (0, _system.darken)(palette.info.main, 0.5));
       setColor(palette.LinearProgress, 'successBg', (0, _system.darken)(palette.success.main, 0.5));
       setColor(palette.LinearProgress, 'warningBg', (0, _system.darken)(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
       setColor(palette.Slider, 'primaryTrack', (0, _system.darken)(palette.primary.main, 0.5));
       setColor(palette.Slider, 'secondaryTrack', (0, _system.darken)(palette.secondary.main, 0.5));
       setColor(palette.Slider, 'errorTrack', (0, _system.darken)(palette.error.main, 0.5));
       setColor(palette.Slider, 'infoTrack', (0, _system.darken)(palette.info.main, 0.5));
       setColor(palette.Slider, 'successTrack', (0, _system.darken)(palette.success.main, 0.5));
       setColor(palette.Slider, 'warningTrack', (0, _system.darken)(palette.warning.main, 0.5));
-      setColor(palette.SnackbarContent, 'bg', (0, _system.emphasize)(palette.background.default, 0.98));
+      const snackbarContentBackground = (0, _system.emphasize)(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
-      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
-      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
-      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+      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', (0, _system.darken)(palette.primary.main, 0.55));
       setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.darken)(palette.secondary.main, 0.55));
       setColor(palette.Switch, 'errorDisabledColor', (0, _system.darken)(palette.error.main, 0.55));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.8.5",
+  "version": "5.9.0",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,15 +46,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.86",
-    "@mui/system": "^5.8.5",
+    "@mui/base": "5.0.0-alpha.89",
+    "@mui/system": "^5.9.0",
     "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.8.4",
-    "@types/react-transition-group": "^4.4.4",
-    "clsx": "^1.1.1",
+    "@mui/utils": "^5.9.0",
+    "@types/react-transition-group": "^4.4.5",
+    "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-transition-group": "^4.4.2"
   },
   "sideEffects": false,

package/styles/CssVarsProvider.d.ts

@@ -1,28 +1,14 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { CreateCssVarsProviderResult } from '@mui/system';
-import { ThemeOptions, SupportedColorScheme } from './experimental_extendTheme';
-import { PaletteWithChannels } from './createPalette';
-
-export interface ThemeInput extends Omit<ThemeOptions, 'colorSchemes'> {
-  colorSchemes: Partial<
-    Record<
-      SupportedColorScheme,
-      {
-        palette: PaletteWithChannels;
-      }
-    >
-  >;
-}
-
-type MDCreateCssVarsProviderResult = CreateCssVarsProviderResult<SupportedColorScheme, ThemeInput>;
-
-declare const useColorScheme: MDCreateCssVarsProviderResult['useColorScheme'];
-declare const getInitColorSchemeScript: MDCreateCssVarsProviderResult['getInitColorSchemeScript'];
-
-/**
- * This component is an experimental Theme Provider that generates CSS variabels out of the theme tokens.
- * It should preferably be used at **the root of your component tree**.
- */
-declare const Experimental_CssVarsProvider: MDCreateCssVarsProviderResult['CssVarsProvider'];
-
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/CssVarsProvider.js

@@ -1,12 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable @typescript-eslint/naming-convention */
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
+
+const shouldSkipGeneratingVar = keys => {
+  var _keys$;
+
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+
 const defaultTheme = experimental_extendTheme();
 const {
-  CssVarsProvider: Experimental_CssVarsProvider,
+  CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = createCssVarsProvider({
@@ -18,7 +23,6 @@ const {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'mui',
   resolveTheme: theme => {
     const newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
@@ -26,6 +30,6 @@ const {
 
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  shouldSkipGeneratingVar
 });
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };

package/styles/components.d.ts

@@ -228,6 +228,11 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiGrid'];
     variants?: ComponentsVariants['MuiGrid'];
   };
+  MuiGrid2?: {
+    defaultProps?: ComponentsProps['MuiGrid2'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiGrid2'];
+    variants?: ComponentsVariants['MuiGrid2'];
+  };
   MuiImageList?: {
     defaultProps?: ComponentsProps['MuiImageList'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiImageList'];

package/styles/createPalette.d.ts

@@ -105,95 +105,6 @@ export interface Channels {
   contrastTextChannel: string;
 }
 
-export interface PaletteWithChannels {
-  common: CommonColors & {
-    background: string;
-    onBackground: string;
-    backgroundChannel: string;
-    onBackgroundChannel: string;
-  };
-  mode: PaletteMode;
-  contrastThreshold: number;
-  tonalOffset: PaletteTonalOffset;
-  primary: PaletteColor & Channels;
-  secondary: PaletteColor & Channels;
-  error: PaletteColor & Channels;
-  warning: PaletteColor & Channels;
-  info: PaletteColor & Channels;
-  success: PaletteColor & Channels;
-  grey: Color & { darkChannel: string };
-  text: TypeText & { primaryChannel: string; secondaryChannel: string };
-  divider: TypeDivider;
-  dividerChannel: TypeDivider;
-  action: TypeAction & { activeChannel: string; selectedChannel: string };
-  background: TypeBackground;
-  getContrastText: (background: string) => string;
-  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
-  // component tokens
-  AppBar: {
-    defaultBg: string;
-    darkBg: string;
-    darkColor: string;
-  };
-  Avatar: {
-    defaultBg: string;
-  };
-  Chip: {
-    defaultBorder: string;
-    defaultAvatarColor: string;
-    defaultIconColor: string;
-  };
-  FilledInput: {
-    bg: string;
-    hoverBg: string;
-    disabledBg: string;
-  };
-  LinearProgress: {
-    primaryBg: string;
-    secondaryBg: string;
-    errorBg: string;
-    infoBg: string;
-    successBg: string;
-    warningBg: string;
-  };
-  Slider: {
-    primaryTrack: string;
-    secondaryTrack: string;
-    errorTrack: string;
-    infoTrack: string;
-    successTrack: string;
-    warningTrack: string;
-  };
-  SnackbarContent: {
-    bg: string;
-  };
-  SpeedDialAction: {
-    fabHoverBg: string;
-  };
-  StepConnector: {
-    border: string;
-  };
-  StepContent: {
-    border: string;
-  };
-  Switch: {
-    defaultColor: string;
-    defaultDisabledColor: string;
-    primaryDisabledColor: string;
-    secondaryDisabledColor: string;
-    errorDisabledColor: string;
-    infoDisabledColor: string;
-    successDisabledColor: string;
-    warningDisabledColor: string;
-  };
-  TableCell: {
-    border: string;
-  };
-  Tooltip: {
-    bg: string;
-  };
-}
-
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
 
 export interface PaletteOptions {

package/styles/createTheme.d.ts

@@ -9,7 +9,7 @@ import { Components } from './components';
 
 export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   mixins?: MixinsOptions;
-  components?: Components<BaseTheme>;
+  components?: Components<Omit<Theme, 'components'>>;
   palette?: PaletteOptions;
   shadows?: Shadows;
   transitions?: TransitionsOptions;