@mui/material 5.10.17 → 5.11.0

package/styles/experimental_extendTheme.d.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { OverridableStringUnion } from '@mui/types';
+import { SxConfig, SxProps, CSSObject } from '@mui/system';
 import { ThemeOptions, Theme } from './createTheme';
 import { Palette, PaletteOptions } from './createPalette';
 import { Shadows } from './shadows';
@@ -401,6 +402,8 @@ export interface CssVarsTheme extends ColorSystem {
   shadows: Theme['shadows'];
   mixins: Theme['mixins'];
   zIndex: Theme['zIndex'];
+  unstable_sxConfig: SxConfig;
+  unstable_sx: (props: SxProps<CssVarsTheme>) => CSSObject;
 }
 
 /**

package/styles/experimental_extendTheme.js

@@ -1,24 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createGetCssVar = void 0;
-exports.default = extendTheme;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _utils = require("@mui/utils");
-var _system = require("@mui/system");
-var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["colorSchemes", "cssVarPrefix"],
   _excluded2 = ["palette"];
+import { deepmerge } from '@mui/utils';
+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, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
+import createThemeWithoutVars from './createTheme';
+import getOverlayAlpha from './getOverlayAlpha';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
   }
-  const overlay = (0, _getOverlayAlpha.default)(index);
+  const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
 function assignNode(obj, keys) {
@@ -41,37 +33,36 @@ const silent = fn => {
   }
   return undefined;
 };
-const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
-exports.createGetCssVar = createGetCssVar;
-function extendTheme(options = {}, ...args) {
+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;
   const {
       colorSchemes: colorSchemesInput = {},
       cssVarPrefix = 'mui'
     } = options,
-    input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    input = _objectWithoutPropertiesLoose(options, _excluded);
   const getCssVar = createGetCssVar(cssVarPrefix);
-  const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
+  const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
     })),
     {
       palette: lightPalette
     } = _createThemeWithoutVa,
-    muiTheme = (0, _objectWithoutPropertiesLoose2.default)(_createThemeWithoutVa, _excluded2);
+    muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
   const {
     palette: darkPalette
-  } = (0, _createTheme.default)({
-    palette: (0, _extends2.default)({
+  } = createThemeWithoutVars({
+    palette: _extends({
       mode: 'dark'
     }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
   });
-  let theme = (0, _extends2.default)({}, muiTheme, {
+  let theme = _extends({}, muiTheme, {
     cssVarPrefix,
     getCssVar,
-    colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
-      light: (0, _extends2.default)({}, colorSchemesInput.light, {
+    colorSchemes: _extends({}, colorSchemesInput, {
+      light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
-        opacity: (0, _extends2.default)({
+        opacity: _extends({
           inputPlaceholder: 0.42,
           inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
@@ -79,9 +70,9 @@ function extendTheme(options = {}, ...args) {
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
         overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
-      dark: (0, _extends2.default)({}, colorSchemesInput.dark, {
+      dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
-        opacity: (0, _extends2.default)({
+        opacity: _extends({
           inputPlaceholder: 0.5,
           inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
@@ -106,10 +97,10 @@ 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', (0, _system.private_safeDarken)(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', (0, _system.private_safeDarken)(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', (0, _system.private_safeDarken)(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', (0, _system.private_safeDarken)(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'));
@@ -118,14 +109,14 @@ function extendTheme(options = {}, ...args) {
       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', (0, _system.private_safeLighten)(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', (0, _system.private_safeLighten)(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', (0, _system.private_safeLighten)(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', (0, _system.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'));
-      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      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-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-100'));
       setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
       setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
@@ -134,40 +125,40 @@ 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', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', (0, _system.private_safeLighten)(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', (0, _system.private_safeLighten)(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', (0, _system.private_safeLighten)(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', (0, _system.private_safeLighten)(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', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', (0, _system.private_safeLighten)(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', (0, _system.private_safeLighten)(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', (0, _system.private_safeLighten)(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', (0, _system.private_safeLighten)(palette.warning.main, 0.62));
-      const snackbarContentBackground = (0, _system.private_safeEmphasize)(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', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
-      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.private_safeEmphasize)(palette.background.paper, 0.15));
+      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', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', (0, _system.private_safeLighten)(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', (0, _system.private_safeLighten)(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', (0, _system.private_safeLighten)(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', (0, _system.private_safeLighten)(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', (0, _system.private_safeLighten)((0, _system.private_safeAlpha)(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', (0, _system.private_safeAlpha)(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', (0, _system.private_safeLighten)(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', (0, _system.private_safeLighten)(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', (0, _system.private_safeLighten)(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', (0, _system.private_safeLighten)(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'));
@@ -176,10 +167,10 @@ function extendTheme(options = {}, ...args) {
       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', (0, _system.private_safeDarken)(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', (0, _system.private_safeDarken)(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', (0, _system.private_safeDarken)(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', (0, _system.private_safeDarken)(palette.warning.light, 0.9));
+      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'));
@@ -194,41 +185,41 @@ 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', (0, _system.private_safeDarken)(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.private_safeDarken)(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', (0, _system.private_safeDarken)(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', (0, _system.private_safeDarken)(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', (0, _system.private_safeDarken)(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', (0, _system.private_safeDarken)(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', (0, _system.private_safeDarken)(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', (0, _system.private_safeDarken)(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', (0, _system.private_safeDarken)(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', (0, _system.private_safeDarken)(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', (0, _system.private_safeDarken)(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', (0, _system.private_safeDarken)(palette.warning.main, 0.5));
-      const snackbarContentBackground = (0, _system.private_safeEmphasize)(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', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
-      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.private_safeEmphasize)(palette.background.paper, 0.15));
+      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', (0, _system.private_safeDarken)(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.private_safeDarken)(palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', (0, _system.private_safeDarken)(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', (0, _system.private_safeDarken)(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', (0, _system.private_safeDarken)(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', (0, _system.private_safeDarken)(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', (0, _system.private_safeDarken)((0, _system.private_safeAlpha)(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', (0, _system.private_safeAlpha)(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));
     }
-    setColor(palette.background, 'defaultChannel', (0, _system.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.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.
 
-    setColor(palette.common, 'backgroundChannel', (0, _system.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', (0, _system.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', (0, _system.private_safeColorChannel)(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+    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];
 
@@ -237,34 +228,41 @@ function extendTheme(options = {}, ...args) {
       if (colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
-          setColor(palette[color], 'mainChannel', (0, _system.private_safeColorChannel)(colors.main));
+          setColor(palette[color], 'mainChannel', safeColorChannel(colors.main));
         }
         if (colors.light) {
-          setColor(palette[color], 'lightChannel', (0, _system.private_safeColorChannel)(colors.light));
+          setColor(palette[color], 'lightChannel', safeColorChannel(colors.light));
         }
         if (colors.dark) {
-          setColor(palette[color], 'darkChannel', (0, _system.private_safeColorChannel)(colors.dark));
+          setColor(palette[color], 'darkChannel', safeColorChannel(colors.dark));
         }
         if (colors.contrastText) {
-          setColor(palette[color], 'contrastTextChannel', (0, _system.private_safeColorChannel)(colors.contrastText));
+          setColor(palette[color], 'contrastTextChannel', safeColorChannel(colors.contrastText));
         }
         if (color === 'text') {
           // Text colors: text.primary, text.secondary
-          setColor(palette[color], 'primaryChannel', (0, _system.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', (0, _system.private_safeColorChannel)(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          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', (0, _system.private_safeColorChannel)(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            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', (0, _system.private_safeColorChannel)(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            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().'));
           }
         }
       }
     });
   });
-  theme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), theme);
+  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+  theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
+  theme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
   return theme;
 }

package/styles/getOverlayAlpha.d.ts

@@ -1,2 +1,2 @@
-declare const getOverlayAlpha: (elevation: number) => string;
-export default getOverlayAlpha;
+declare const getOverlayAlpha: (elevation: number) => string;
+export default getOverlayAlpha;

package/styles/getOverlayAlpha.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
 const getOverlayAlpha = elevation => {
   let alphaValue;
@@ -14,5 +8,4 @@ const getOverlayAlpha = elevation => {
   }
   return (alphaValue / 100).toFixed(2);
 };
-var _default = getOverlayAlpha;
-exports.default = _default;
+export default getOverlayAlpha;

package/styles/index.d.ts

@@ -64,7 +64,6 @@ export {
   ColorObject,
   StyledEngineProvider,
   SxProps,
-  experimental_sx,
 } from '@mui/system';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';