@mui/material 5.10.16 → 5.11.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.16
+/** @license MUI v5.11.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5980,7 +5980,7 @@
       value = getPath(themeMapping, propValueFinal) || userValue;
     }
     if (transform) {
-      value = transform(value, userValue);
+      value = transform(value, userValue, themeMapping);
     }
     return value;
   }
@@ -5991,6 +5991,9 @@
       themeKey,
       transform
     } = options;
+
+    // false positive
+    // eslint-disable-next-line react/function-component-definition
     const fn = props => {
       if (props[prop] == null) {
         return null;
@@ -6027,6 +6030,9 @@
       });
       return acc;
     }, {});
+
+    // false positive
+    // eslint-disable-next-line react/function-component-definition
     const fn = props => {
       return Object.keys(props).reduce((acc, prop) => {
         if (handlers[prop]) {
@@ -6166,24 +6172,28 @@
     const transformer = createUnarySpacing(props.theme);
     return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
   }
-  marginKeys.reduce((obj, key) => {
+  function margin(props) {
+    return style$1(props, marginKeys);
+  }
+  margin.propTypes = marginKeys.reduce((obj, key) => {
     obj[key] = responsivePropType$1;
     return obj;
   }, {}) ;
-  paddingKeys.reduce((obj, key) => {
+  margin.filterProps = marginKeys;
+  function padding(props) {
+    return style$1(props, paddingKeys);
+  }
+  padding.propTypes = paddingKeys.reduce((obj, key) => {
     obj[key] = responsivePropType$1;
     return obj;
   }, {}) ;
-  function spacing(props) {
-    return style$1(props, spacingKeys);
-  }
-  spacing.propTypes = spacingKeys.reduce((obj, key) => {
+  padding.filterProps = paddingKeys;
+  spacingKeys.reduce((obj, key) => {
     obj[key] = responsivePropType$1;
     return obj;
   }, {}) ;
-  spacing.filterProps = spacingKeys;
 
-  function getBorder(value) {
+  function borderTransform(value) {
     if (typeof value !== 'number') {
       return value;
     }
@@ -6192,27 +6202,27 @@
   const border = style$2({
     prop: 'border',
     themeKey: 'borders',
-    transform: getBorder
+    transform: borderTransform
   });
   const borderTop = style$2({
     prop: 'borderTop',
     themeKey: 'borders',
-    transform: getBorder
+    transform: borderTransform
   });
   const borderRight = style$2({
     prop: 'borderRight',
     themeKey: 'borders',
-    transform: getBorder
+    transform: borderTransform
   });
   const borderBottom = style$2({
     prop: 'borderBottom',
     themeKey: 'borders',
-    transform: getBorder
+    transform: borderTransform
   });
   const borderLeft = style$2({
     prop: 'borderLeft',
     themeKey: 'borders',
-    transform: getBorder
+    transform: borderTransform
   });
   const borderColor = style$2({
     prop: 'borderColor',
@@ -6234,6 +6244,9 @@
     prop: 'borderLeftColor',
     themeKey: 'palette'
   });
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const borderRadius = props => {
     if (props.borderRadius !== undefined && props.borderRadius !== null) {
       const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
@@ -6248,77 +6261,10 @@
     borderRadius: responsivePropType$1
   } ;
   borderRadius.filterProps = ['borderRadius'];
-  const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
-  var borders$1 = borders;
-
-  const displayPrint = style$2({
-    prop: 'displayPrint',
-    cssProperty: false,
-    transform: value => ({
-      '@media print': {
-        display: value
-      }
-    })
-  });
-  const displayRaw = style$2({
-    prop: 'display'
-  });
-  const overflow = style$2({
-    prop: 'overflow'
-  });
-  const textOverflow = style$2({
-    prop: 'textOverflow'
-  });
-  const visibility = style$2({
-    prop: 'visibility'
-  });
-  const whiteSpace = style$2({
-    prop: 'whiteSpace'
-  });
-  var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
-
-  const flexBasis = style$2({
-    prop: 'flexBasis'
-  });
-  const flexDirection = style$2({
-    prop: 'flexDirection'
-  });
-  const flexWrap = style$2({
-    prop: 'flexWrap'
-  });
-  const justifyContent = style$2({
-    prop: 'justifyContent'
-  });
-  const alignItems = style$2({
-    prop: 'alignItems'
-  });
-  const alignContent = style$2({
-    prop: 'alignContent'
-  });
-  const order$1 = style$2({
-    prop: 'order'
-  });
-  const flex = style$2({
-    prop: 'flex'
-  });
-  const flexGrow = style$2({
-    prop: 'flexGrow'
-  });
-  const flexShrink = style$2({
-    prop: 'flexShrink'
-  });
-  const alignSelf = style$2({
-    prop: 'alignSelf'
-  });
-  const justifyItems = style$2({
-    prop: 'justifyItems'
-  });
-  const justifySelf = style$2({
-    prop: 'justifySelf'
-  });
-  const flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order$1, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-  var flexbox$1 = flexbox;
+  compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
 
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const gap = props => {
     if (props.gap !== undefined && props.gap !== null) {
       const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
@@ -6333,6 +6279,9 @@
     gap: responsivePropType$1
   } ;
   gap.filterProps = ['gap'];
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const columnGap = props => {
     if (props.columnGap !== undefined && props.columnGap !== null) {
       const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
@@ -6347,6 +6296,9 @@
     columnGap: responsivePropType$1
   } ;
   columnGap.filterProps = ['columnGap'];
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const rowGap = props => {
     if (props.rowGap !== undefined && props.rowGap !== null) {
       const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
@@ -6388,10 +6340,9 @@
   const gridArea = style$2({
     prop: 'gridArea'
   });
-  const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-  var grid$1 = grid;
+  compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
 
-  function transform$1(value, userValue) {
+  function paletteTransform(value, userValue) {
     if (userValue === 'grey') {
       return userValue;
     }
@@ -6400,55 +6351,27 @@
   const color = style$2({
     prop: 'color',
     themeKey: 'palette',
-    transform: transform$1
+    transform: paletteTransform
   });
   const bgcolor = style$2({
     prop: 'bgcolor',
     cssProperty: 'backgroundColor',
     themeKey: 'palette',
-    transform: transform$1
+    transform: paletteTransform
   });
   const backgroundColor = style$2({
     prop: 'backgroundColor',
     themeKey: 'palette',
-    transform: transform$1
+    transform: paletteTransform
   });
-  const palette = compose(color, bgcolor, backgroundColor);
-  var palette$1 = palette;
+  compose(color, bgcolor, backgroundColor);
 
-  const position = style$2({
-    prop: 'position'
-  });
-  const zIndex$2 = style$2({
-    prop: 'zIndex',
-    themeKey: 'zIndex'
-  });
-  const top$1 = style$2({
-    prop: 'top'
-  });
-  const right$1 = style$2({
-    prop: 'right'
-  });
-  const bottom$1 = style$2({
-    prop: 'bottom'
-  });
-  const left$1 = style$2({
-    prop: 'left'
-  });
-  var positions = compose(position, zIndex$2, top$1, right$1, bottom$1, left$1);
-
-  const boxShadow = style$2({
-    prop: 'boxShadow',
-    themeKey: 'shadows'
-  });
-  var shadows$2 = boxShadow;
-
-  function transform(value) {
+  function sizingTransform(value) {
     return value <= 1 && value !== 0 ? `${value * 100}%` : value;
   }
   const width = style$2({
     prop: 'width',
-    transform
+    transform: sizingTransform
   });
   const maxWidth = props => {
     if (props.maxWidth !== undefined && props.maxWidth !== null) {
@@ -6456,7 +6379,7 @@
         var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
         const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$1[propValue];
         return {
-          maxWidth: breakpoint || transform(propValue)
+          maxWidth: breakpoint || sizingTransform(propValue)
         };
       };
       return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -6466,102 +6389,314 @@
   maxWidth.filterProps = ['maxWidth'];
   const minWidth = style$2({
     prop: 'minWidth',
-    transform
+    transform: sizingTransform
   });
   const height = style$2({
     prop: 'height',
-    transform
+    transform: sizingTransform
   });
   const maxHeight = style$2({
     prop: 'maxHeight',
-    transform
+    transform: sizingTransform
   });
   const minHeight = style$2({
     prop: 'minHeight',
-    transform
+    transform: sizingTransform
   });
   style$2({
     prop: 'size',
     cssProperty: 'width',
-    transform
+    transform: sizingTransform
   });
   style$2({
     prop: 'size',
     cssProperty: 'height',
-    transform
+    transform: sizingTransform
   });
   const boxSizing = style$2({
     prop: 'boxSizing'
   });
-  const sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
-  var sizing$1 = sizing;
-
-  const fontFamily = style$2({
-    prop: 'fontFamily',
-    themeKey: 'typography'
-  });
-  const fontSize = style$2({
-    prop: 'fontSize',
-    themeKey: 'typography'
-  });
-  const fontStyle = style$2({
-    prop: 'fontStyle',
-    themeKey: 'typography'
-  });
-  const fontWeight = style$2({
-    prop: 'fontWeight',
-    themeKey: 'typography'
-  });
-  const letterSpacing = style$2({
-    prop: 'letterSpacing'
-  });
-  const textTransform = style$2({
-    prop: 'textTransform'
-  });
-  const lineHeight = style$2({
-    prop: 'lineHeight'
-  });
-  const textAlign = style$2({
-    prop: 'textAlign'
-  });
-  const typographyVariant = style$2({
-    prop: 'typography',
-    cssProperty: false,
-    themeKey: 'typography'
-  });
-  const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
-  var typography$1 = typography;
-
-  const filterPropsMapping = {
-    borders: borders$1.filterProps,
-    display: display.filterProps,
-    flexbox: flexbox$1.filterProps,
-    grid: grid$1.filterProps,
-    positions: positions.filterProps,
-    palette: palette$1.filterProps,
-    shadows: shadows$2.filterProps,
-    sizing: sizing$1.filterProps,
-    spacing: spacing.filterProps,
-    typography: typography$1.filterProps
-  };
-  const styleFunctionMapping = {
-    borders: borders$1,
-    display,
-    flexbox: flexbox$1,
-    grid: grid$1,
-    positions,
-    palette: palette$1,
-    shadows: shadows$2,
-    sizing: sizing$1,
-    spacing,
-    typography: typography$1
-  };
-  const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
-    filterPropsMapping[styleFnName].forEach(propName => {
-      acc[propName] = styleFunctionMapping[styleFnName];
-    });
-    return acc;
-  }, {});
+  compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
+
+  const defaultSxConfig = {
+    // borders
+    border: {
+      themeKey: 'borders',
+      transform: borderTransform
+    },
+    borderTop: {
+      themeKey: 'borders',
+      transform: borderTransform
+    },
+    borderRight: {
+      themeKey: 'borders',
+      transform: borderTransform
+    },
+    borderBottom: {
+      themeKey: 'borders',
+      transform: borderTransform
+    },
+    borderLeft: {
+      themeKey: 'borders',
+      transform: borderTransform
+    },
+    borderColor: {
+      themeKey: 'palette'
+    },
+    borderTopColor: {
+      themeKey: 'palette'
+    },
+    borderRightColor: {
+      themeKey: 'palette'
+    },
+    borderBottomColor: {
+      themeKey: 'palette'
+    },
+    borderLeftColor: {
+      themeKey: 'palette'
+    },
+    borderRadius: {
+      themeKey: 'shape.borderRadius',
+      style: borderRadius
+    },
+    // palette
+    color: {
+      themeKey: 'palette',
+      transform: paletteTransform
+    },
+    bgcolor: {
+      themeKey: 'palette',
+      cssProperty: 'backgroundColor',
+      transform: paletteTransform
+    },
+    backgroundColor: {
+      themeKey: 'palette',
+      transform: paletteTransform
+    },
+    // spacing
+    p: {
+      style: padding
+    },
+    pt: {
+      style: padding
+    },
+    pr: {
+      style: padding
+    },
+    pb: {
+      style: padding
+    },
+    pl: {
+      style: padding
+    },
+    px: {
+      style: padding
+    },
+    py: {
+      style: padding
+    },
+    padding: {
+      style: padding
+    },
+    paddingTop: {
+      style: padding
+    },
+    paddingRight: {
+      style: padding
+    },
+    paddingBottom: {
+      style: padding
+    },
+    paddingLeft: {
+      style: padding
+    },
+    paddingX: {
+      style: padding
+    },
+    paddingY: {
+      style: padding
+    },
+    paddingInline: {
+      style: padding
+    },
+    paddingInlineStart: {
+      style: padding
+    },
+    paddingInlineEnd: {
+      style: padding
+    },
+    paddingBlock: {
+      style: padding
+    },
+    paddingBlockStart: {
+      style: padding
+    },
+    paddingBlockEnd: {
+      style: padding
+    },
+    m: {
+      style: margin
+    },
+    mt: {
+      style: margin
+    },
+    mr: {
+      style: margin
+    },
+    mb: {
+      style: margin
+    },
+    ml: {
+      style: margin
+    },
+    mx: {
+      style: margin
+    },
+    my: {
+      style: margin
+    },
+    margin: {
+      style: margin
+    },
+    marginTop: {
+      style: margin
+    },
+    marginRight: {
+      style: margin
+    },
+    marginBottom: {
+      style: margin
+    },
+    marginLeft: {
+      style: margin
+    },
+    marginX: {
+      style: margin
+    },
+    marginY: {
+      style: margin
+    },
+    marginInline: {
+      style: margin
+    },
+    marginInlineStart: {
+      style: margin
+    },
+    marginInlineEnd: {
+      style: margin
+    },
+    marginBlock: {
+      style: margin
+    },
+    marginBlockStart: {
+      style: margin
+    },
+    marginBlockEnd: {
+      style: margin
+    },
+    // display
+    displayPrint: {
+      cssProperty: false,
+      transform: value => ({
+        '@media print': {
+          display: value
+        }
+      })
+    },
+    display: {},
+    overflow: {},
+    textOverflow: {},
+    visibility: {},
+    whiteSpace: {},
+    // flexbox
+    flexBasis: {},
+    flexDirection: {},
+    flexWrap: {},
+    justifyContent: {},
+    alignItems: {},
+    alignContent: {},
+    order: {},
+    flex: {},
+    flexGrow: {},
+    flexShrink: {},
+    alignSelf: {},
+    justifyItems: {},
+    justifySelf: {},
+    // grid
+    gap: {
+      style: gap
+    },
+    rowGap: {
+      style: rowGap
+    },
+    columnGap: {
+      style: columnGap
+    },
+    gridColumn: {},
+    gridRow: {},
+    gridAutoFlow: {},
+    gridAutoColumns: {},
+    gridAutoRows: {},
+    gridTemplateColumns: {},
+    gridTemplateRows: {},
+    gridTemplateAreas: {},
+    gridArea: {},
+    // positions
+    position: {},
+    zIndex: {
+      themeKey: 'zIndex'
+    },
+    top: {},
+    right: {},
+    bottom: {},
+    left: {},
+    // shadows
+    boxShadow: {
+      themeKey: 'shadows'
+    },
+    // sizing
+    width: {
+      transform: sizingTransform
+    },
+    maxWidth: {
+      style: maxWidth
+    },
+    minWidth: {
+      transform: sizingTransform
+    },
+    height: {
+      transform: sizingTransform
+    },
+    maxHeight: {
+      transform: sizingTransform
+    },
+    minHeight: {
+      transform: sizingTransform
+    },
+    boxSizing: {},
+    // typography
+    fontFamily: {
+      themeKey: 'typography'
+    },
+    fontSize: {
+      themeKey: 'typography'
+    },
+    fontStyle: {
+      themeKey: 'typography'
+    },
+    fontWeight: {
+      themeKey: 'typography'
+    },
+    letterSpacing: {},
+    textTransform: {},
+    lineHeight: {},
+    textAlign: {},
+    typography: {
+      cssProperty: false,
+      themeKey: 'typography'
+    }
+  };
+  var defaultSxConfig$1 = defaultSxConfig;
 
   function objectsHaveSameKeys(...objects) {
     const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -6573,24 +6708,48 @@
   }
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
-  function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMapping) {
-    const propToStyleFunction = Object.keys(styleFunctionMapping$1).reduce((acc, styleFnName) => {
-      styleFunctionMapping$1[styleFnName].filterProps.forEach(propName => {
-        acc[propName] = styleFunctionMapping$1[styleFnName];
-      });
-      return acc;
-    }, {});
-    function getThemeValue(prop, value, theme) {
-      const inputProps = {
-        [prop]: value,
+  function unstable_createStyleFunctionSx() {
+    function getThemeValue(prop, val, theme, config) {
+      const props = {
+        [prop]: val,
         theme
       };
-      const styleFunction = propToStyleFunction[prop];
-      return styleFunction ? styleFunction(inputProps) : {
-        [prop]: value
+      const options = config[prop];
+      if (!options) {
+        return {
+          [prop]: val
+        };
+      }
+      const {
+        cssProperty = prop,
+        themeKey,
+        transform,
+        style
+      } = options;
+      if (val == null) {
+        return null;
+      }
+      const themeMapping = getPath(theme, themeKey) || {};
+      if (style) {
+        return style(props);
+      }
+      const styleFromPropValue = propValueFinal => {
+        let value = getStyleValue$1(themeMapping, transform, propValueFinal);
+        if (propValueFinal === value && typeof propValueFinal === 'string') {
+          // Haven't found value
+          value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+        }
+        if (cssProperty === false) {
+          return value;
+        }
+        return {
+          [cssProperty]: value
+        };
       };
+      return handleBreakpoints(props, val, styleFromPropValue);
     }
     function styleFunctionSx(props) {
+      var _theme$unstable_sxCon;
       const {
         sx,
         theme = {}
@@ -6599,6 +6758,8 @@
         return null; // Emotion & styled-components will neglect null
       }
 
+      const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
+
       /*
        * Receive `sxInput` as object or callback
        * and then recursively check keys & values to create media query object styles.
@@ -6622,8 +6783,8 @@
           const value = callIfFn(sxObject[styleKey], theme);
           if (value !== null && value !== undefined) {
             if (typeof value === 'object') {
-              if (propToStyleFunction[styleKey]) {
-                css = merge(css, getThemeValue(styleKey, value, theme));
+              if (config[styleKey]) {
+                css = merge(css, getThemeValue(styleKey, value, theme, config));
               } else {
                 const breakpointsValues = handleBreakpoints({
                   theme
@@ -6640,7 +6801,7 @@
                 }
               }
             } else {
-              css = merge(css, getThemeValue(styleKey, value, theme));
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             }
           }
         });
@@ -6652,16 +6813,18 @@
   }
   const styleFunctionSx = unstable_createStyleFunctionSx();
   styleFunctionSx.filterProps = ['sx'];
-  var defaultStyleFunctionSx = styleFunctionSx;
+  var styleFunctionSx$1 = styleFunctionSx;
 
   const _excluded$2o = ["sx"];
   const splitProps = props => {
+    var _props$theme$unstable, _props$theme;
     const result = {
       systemProps: {},
       otherProps: {}
     };
+    const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
     Object.keys(props).forEach(prop => {
-      if (propToStyleFunction[prop]) {
+      if (config[prop]) {
         result.systemProps[prop] = props[prop];
       } else {
         result.otherProps[prop] = props[prop];
@@ -6697,15 +6860,6 @@
     });
   }
 
-  function sx(styles) {
-    return ({
-      theme
-    }) => defaultStyleFunctionSx({
-      sx: styles,
-      theme
-    });
-  }
-
   function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
   const _excluded$2n = ["values", "unit", "step"];
@@ -6845,6 +6999,13 @@
       shape: _extends({}, shape$1, shapeInput)
     }, other);
     muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+    muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+    muiTheme.unstable_sx = function sx(props) {
+      return styleFunctionSx$1({
+        sx: props,
+        theme: this
+      });
+    };
     return muiTheme;
   }
 
@@ -6939,12 +7100,11 @@
     const {
       defaultTheme,
       defaultClassName = 'MuiBox-root',
-      generateClassName,
-      styleFunctionSx = defaultStyleFunctionSx
+      generateClassName
     } = options;
     const BoxRoot = styled$3('div', {
       shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-    })(styleFunctionSx);
+    })(styleFunctionSx$1);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
       const theme = useTheme$1(defaultTheme);
       const _extendSxProp = extendSxProp(inProps),
@@ -7057,12 +7217,11 @@
     const {
       defaultTheme = systemDefaultTheme,
       rootShouldForwardProp = shouldForwardProp,
-      slotShouldForwardProp = shouldForwardProp,
-      styleFunctionSx = defaultStyleFunctionSx
+      slotShouldForwardProp = shouldForwardProp
     } = input;
     const systemSx = props => {
       const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
-      return styleFunctionSx(_extends({}, props, {
+      return styleFunctionSx$1(_extends({}, props, {
         theme
       }));
     };
@@ -7305,6 +7464,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const decomposedColor = decomposeColor(color);
     return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
   };
+  const private_safeColorChannel = (color, warning) => {
+    try {
+      return colorChannel(color);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  };
 
   /**
    * Converts a color object with type and values to a string.
@@ -7435,6 +7604,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
     return recomposeColor(color);
   }
+  function private_safeAlpha(color, value, warning) {
+    try {
+      return alpha(color, value);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   /**
    * Darkens a color.
@@ -7454,6 +7633,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
     return recomposeColor(color);
   }
+  function private_safeDarken(color, coefficient, warning) {
+    try {
+      return darken(color, coefficient);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   /**
    * Lightens a color.
@@ -7477,6 +7666,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
     return recomposeColor(color);
   }
+  function private_safeLighten(color, coefficient, warning) {
+    try {
+      return lighten(color, coefficient);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   /**
    * Darken or lighten a color, depending on its luminance.
@@ -7488,6 +7687,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   function emphasize(color, coefficient = 0.15) {
     return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
   }
+  function private_safeEmphasize(color, coefficient, warning) {
+    try {
+      return private_safeEmphasize(color, coefficient);
+    } catch (error) {
+      if (warning && "development" !== 'production') {
+        console.warn(warning);
+      }
+      return color;
+    }
+  }
 
   const EMPTY_THEME = {};
   function InnerThemeProvider(props) {
@@ -7963,9 +8172,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       colorSchemeSelector = ':root',
-      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
+      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false
     }) {
       const hasMounted = React__namespace.useRef(false);
+      const upperTheme = useTheme$3();
+      const ctx = React__namespace.useContext(ColorSchemeContext);
+      const nested = !!ctx && !disableNestedContext;
       const {
           colorSchemes = {},
           components = {},
@@ -7978,12 +8192,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
       const {
-        mode,
+        mode: stateMode,
         setMode,
         systemMode,
         lightColorScheme,
         darkColorScheme,
-        colorScheme,
+        colorScheme: stateColorScheme,
         setColorScheme
       } = useCurrentColorScheme({
         supportedColorSchemes: allColorSchemes,
@@ -7994,6 +8208,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         defaultMode,
         storageWindow
       });
+      let mode = stateMode;
+      let colorScheme = stateColorScheme;
+      if (nested) {
+        mode = ctx.mode;
+        colorScheme = ctx.colorScheme;
+      }
       const calculatedMode = (() => {
         if (!mode) {
           // This scope occurs on the server
@@ -8130,21 +8350,33 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         setColorScheme,
         allColorSchemes
       }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
-      return /*#__PURE__*/jsxRuntime_2(ColorSchemeContext.Provider, {
-        value: contextValue,
-        children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
-          styles: {
-            [colorSchemeSelector]: rootCss
-          }
-        }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
-          styles: defaultColorSchemeStyleSheet
-        }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
-          styles: otherColorSchemesStyleSheet
+      let shouldGenerateStyleSheet = true;
+      if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+        shouldGenerateStyleSheet = false;
+      }
+      const element = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+        children: [shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+            styles: {
+              [colorSchemeSelector]: rootCss
+            }
+          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+            styles: defaultColorSchemeStyleSheet
+          }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+            styles: otherColorSchemesStyleSheet
+          })]
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
           theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
         })]
       });
+      if (nested) {
+        return element;
+      }
+      return /*#__PURE__*/jsxRuntime_1(ColorSchemeContext.Provider, {
+        value: contextValue,
+        children: element
+      });
     }
     CssVarsProvider.propTypes = {
       /**
@@ -8175,6 +8407,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        * The initial mode used.
        */
       defaultMode: PropTypes.string,
+      /**
+       * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+       */
+      disableNestedContext: PropTypes.bool,
+      /**
+       * If `true`, the style sheet won't be generated.
+       *
+       * This is useful for controlling nested CssVarsProvider behavior.
+       */
+      disableStyleSheetGeneration: PropTypes.bool,
       /**
        * Disable CSS transitions when switching between modes or color schemes
        */
@@ -9382,6 +9624,13 @@ Please use another name.` );
         }
       });
     }
+    muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+    muiTheme.unstable_sx = function sx(props) {
+      return styleFunctionSx$1({
+        sx: props,
+        theme: this
+      });
+    };
     return muiTheme;
   }
   let warnedOnce$1 = false;
@@ -9673,8 +9922,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
   }
   function setColor(obj, key, defaultValue) {
-    obj[key] = obj[key] || defaultValue;
+    if (!obj[key] && defaultValue) {
+      obj[key] = defaultValue;
+    }
   }
+  const silent = fn => {
+    try {
+      return fn();
+    } catch (error) {
+      // ignore error
+    }
+    return undefined;
+  };
   const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
@@ -9739,26 +9998,26 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // assign component variables
       assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
       if (key === 'light') {
-        setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
-        setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
-        setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
-        setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorColor', private_safeDarken(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', private_safeDarken(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', private_safeDarken(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', private_safeDarken(palette.warning.light, 0.6));
         setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
         setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
         setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
         setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
-        setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
-        setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
-        setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
-        setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
-        setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
-        setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
-        setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
-        setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
-        setColor(palette.Alert, '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, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
+        setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
+        setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
+        setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
+        setColor(palette.Alert, 'errorStandardBg', private_safeLighten(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', private_safeLighten(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', private_safeLighten(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', private_safeLighten(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-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'));
@@ -9767,52 +10026,52 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
         setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
         setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-        setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
-        setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
-        setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
-        setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
-        setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
-        setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+        setColor(palette.LinearProgress, 'primaryBg', private_safeLighten(palette.primary.main, 0.62));
+        setColor(palette.LinearProgress, 'secondaryBg', private_safeLighten(palette.secondary.main, 0.62));
+        setColor(palette.LinearProgress, 'errorBg', private_safeLighten(palette.error.main, 0.62));
+        setColor(palette.LinearProgress, 'infoBg', private_safeLighten(palette.info.main, 0.62));
+        setColor(palette.LinearProgress, 'successBg', private_safeLighten(palette.success.main, 0.62));
+        setColor(palette.LinearProgress, 'warningBg', private_safeLighten(palette.warning.main, 0.62));
         setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
-        setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
-        setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
-        setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
-        setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
-        setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
-        setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
-        const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+        setColor(palette.Slider, 'primaryTrack', private_safeLighten(palette.primary.main, 0.62));
+        setColor(palette.Slider, 'secondaryTrack', private_safeLighten(palette.secondary.main, 0.62));
+        setColor(palette.Slider, 'errorTrack', private_safeLighten(palette.error.main, 0.62));
+        setColor(palette.Slider, 'infoTrack', private_safeLighten(palette.info.main, 0.62));
+        setColor(palette.Slider, 'successTrack', private_safeLighten(palette.success.main, 0.62));
+        setColor(palette.Slider, 'warningTrack', private_safeLighten(palette.warning.main, 0.62));
+        const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.8);
         setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-        setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
-        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', private_safeEmphasize(palette.background.paper, 0.15));
         setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
         setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
         setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
         setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
-        setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
-        setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
-        setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
-        setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
-        setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
-        setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
-        setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
-        setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
+        setColor(palette.Switch, 'primaryDisabledColor', private_safeLighten(palette.primary.main, 0.62));
+        setColor(palette.Switch, 'secondaryDisabledColor', private_safeLighten(palette.secondary.main, 0.62));
+        setColor(palette.Switch, 'errorDisabledColor', private_safeLighten(palette.error.main, 0.62));
+        setColor(palette.Switch, 'infoDisabledColor', private_safeLighten(palette.info.main, 0.62));
+        setColor(palette.Switch, 'successDisabledColor', private_safeLighten(palette.success.main, 0.62));
+        setColor(palette.Switch, 'warningDisabledColor', private_safeLighten(palette.warning.main, 0.62));
+        setColor(palette.TableCell, 'border', private_safeLighten(private_safeAlpha(palette.divider, 1), 0.88));
+        setColor(palette.Tooltip, 'bg', private_safeAlpha(palette.grey[700], 0.92));
       } else {
-        setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
-        setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
-        setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
-        setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorColor', private_safeLighten(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', private_safeLighten(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', private_safeLighten(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', private_safeLighten(palette.warning.light, 0.6));
         setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
         setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
         setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
         setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
-        setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
-        setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
-        setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
-        setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
-        setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
-        setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
-        setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
-        setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
+        setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
+        setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
+        setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
+        setColor(palette.Alert, 'errorStandardBg', private_safeDarken(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', private_safeDarken(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', private_safeDarken(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', private_safeDarken(palette.warning.light, 0.9));
         setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
         setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
         setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
@@ -9827,76 +10086,85 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
         setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
         setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-        setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
-        setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
-        setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
-        setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
-        setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
-        setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+        setColor(palette.LinearProgress, 'primaryBg', private_safeDarken(palette.primary.main, 0.5));
+        setColor(palette.LinearProgress, 'secondaryBg', private_safeDarken(palette.secondary.main, 0.5));
+        setColor(palette.LinearProgress, 'errorBg', private_safeDarken(palette.error.main, 0.5));
+        setColor(palette.LinearProgress, 'infoBg', private_safeDarken(palette.info.main, 0.5));
+        setColor(palette.LinearProgress, 'successBg', private_safeDarken(palette.success.main, 0.5));
+        setColor(palette.LinearProgress, 'warningBg', private_safeDarken(palette.warning.main, 0.5));
         setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
-        setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
-        setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
-        setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
-        setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
-        setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
-        setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
-        const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+        setColor(palette.Slider, 'primaryTrack', private_safeDarken(palette.primary.main, 0.5));
+        setColor(palette.Slider, 'secondaryTrack', private_safeDarken(palette.secondary.main, 0.5));
+        setColor(palette.Slider, 'errorTrack', private_safeDarken(palette.error.main, 0.5));
+        setColor(palette.Slider, 'infoTrack', private_safeDarken(palette.info.main, 0.5));
+        setColor(palette.Slider, 'successTrack', private_safeDarken(palette.success.main, 0.5));
+        setColor(palette.Slider, 'warningTrack', private_safeDarken(palette.warning.main, 0.5));
+        const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.98);
         setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-        setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
-        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', private_safeEmphasize(palette.background.paper, 0.15));
         setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
         setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
         setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
         setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
-        setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
-        setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
-        setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
-        setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
-        setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
-        setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
-        setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
-        setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
-      }
-      palette.background.defaultChannel = colorChannel(palette.background.default); // MUI X - DataGrid needs this token.
-
-      palette.common.backgroundChannel = colorChannel(palette.common.background);
-      palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
-      palette.dividerChannel = colorChannel(palette.divider);
+        setColor(palette.Switch, 'primaryDisabledColor', private_safeDarken(palette.primary.main, 0.55));
+        setColor(palette.Switch, 'secondaryDisabledColor', private_safeDarken(palette.secondary.main, 0.55));
+        setColor(palette.Switch, 'errorDisabledColor', private_safeDarken(palette.error.main, 0.55));
+        setColor(palette.Switch, 'infoDisabledColor', private_safeDarken(palette.info.main, 0.55));
+        setColor(palette.Switch, 'successDisabledColor', private_safeDarken(palette.success.main, 0.55));
+        setColor(palette.Switch, 'warningDisabledColor', private_safeDarken(palette.warning.main, 0.55));
+        setColor(palette.TableCell, 'border', private_safeDarken(private_safeAlpha(palette.divider, 1), 0.68));
+        setColor(palette.Tooltip, 'bg', private_safeAlpha(palette.grey[700], 0.92));
+      }
+      setColor(palette.background, 'defaultChannel', private_safeColorChannel(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
+
+      setColor(palette.common, 'backgroundChannel', private_safeColorChannel(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+      setColor(palette.common, 'onBackgroundChannel', private_safeColorChannel(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+      setColor(palette, 'dividerChannel', private_safeColorChannel(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
       Object.keys(palette).forEach(color => {
         const colors = palette[color];
 
-        // Color palettes: primary, secondary, error, info, success, and warning
-        if (colors.main) {
-          palette[color].mainChannel = colorChannel(colors.main);
-        }
-        if (colors.light) {
-          palette[color].lightChannel = colorChannel(colors.light);
-        }
-        if (colors.dark) {
-          palette[color].darkChannel = colorChannel(colors.dark);
-        }
-        if (colors.contrastText) {
-          palette[color].contrastTextChannel = colorChannel(colors.contrastText);
-        }
-
-        // Text colors: text.primary, text.secondary
-        if (colors.primary) {
-          palette[color].primaryChannel = colorChannel(colors.primary);
-        }
-        if (colors.secondary) {
-          palette[color].secondaryChannel = colorChannel(colors.secondary);
-        }
+        // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-        // Action colors: action.active, action.selected
-        if (colors.active) {
-          palette[color].activeChannel = colorChannel(colors.active);
-        }
-        if (colors.selected) {
-          palette[color].selectedChannel = colorChannel(colors.selected);
+        if (colors && typeof colors === 'object') {
+          // Silent the error for custom palettes.
+          if (colors.main) {
+            setColor(palette[color], 'mainChannel', private_safeColorChannel(colors.main));
+          }
+          if (colors.light) {
+            setColor(palette[color], 'lightChannel', private_safeColorChannel(colors.light));
+          }
+          if (colors.dark) {
+            setColor(palette[color], 'darkChannel', private_safeColorChannel(colors.dark));
+          }
+          if (colors.contrastText) {
+            setColor(palette[color], 'contrastTextChannel', private_safeColorChannel(colors.contrastText));
+          }
+          if (color === 'text') {
+            // Text colors: text.primary, text.secondary
+            setColor(palette[color], 'primaryChannel', private_safeColorChannel(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColor(palette[color], 'secondaryChannel', private_safeColorChannel(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          }
+          if (color === 'action') {
+            // Action colors: action.active, action.selected
+            if (colors.active) {
+              setColor(palette[color], 'activeChannel', private_safeColorChannel(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            }
+            if (colors.selected) {
+              setColor(palette[color], 'selectedChannel', private_safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            }
+          }
         }
       });
     });
     theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+    theme.unstable_sxConfig = _extends({}, defaultSxConfig$1, input == null ? void 0 : input.unstable_sxConfig);
+    theme.unstable_sx = function sx(props) {
+      return styleFunctionSx$1({
+        sx: props,
+        theme: this
+      });
+    };
     return theme;
   }
 
@@ -9928,6 +10196,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const newTheme = _extends({}, theme, {
         typography: createTypography(theme.palette, theme.typography)
       });
+      newTheme.unstable_sx = function sx(props) {
+        return styleFunctionSx$1({
+          sx: props,
+          theme: this
+        });
+      };
       return newTheme;
     },
     shouldSkipGeneratingVar,
@@ -13778,19 +14052,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
      */
     const [placement, setPlacement] = React__namespace.useState(rtlPlacement);
+    const [tooltipAnchorEl, setTooltipAnchorEl] = React__namespace.useState(anchorEl);
     React__namespace.useEffect(() => {
       if (popperRef.current) {
         popperRef.current.forceUpdate();
       }
     });
+    React__namespace.useEffect(() => {
+      if (anchorEl) {
+        setTooltipAnchorEl(anchorEl);
+      }
+    }, [anchorEl]);
     useEnhancedEffect$1(() => {
-      if (!anchorEl || !open) {
+      if (!tooltipAnchorEl || !open) {
         return undefined;
       }
       const handlePopperUpdate = data => {
         setPlacement(data.placement);
       };
-      const resolvedAnchorEl = resolveAnchorEl$1(anchorEl);
+      const resolvedAnchorEl = resolveAnchorEl$1(tooltipAnchorEl);
       {
         if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
           const box = resolvedAnchorEl.getBoundingClientRect();
@@ -13825,7 +14105,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       if (popperOptions && popperOptions.modifiers != null) {
         popperModifiers = popperModifiers.concat(popperOptions.modifiers);
       }
-      const popper = createPopper(resolveAnchorEl$1(anchorEl), tooltipRef.current, _extends({
+      const popper = createPopper(resolveAnchorEl$1(tooltipAnchorEl), tooltipRef.current, _extends({
         placement: rtlPlacement
       }, popperOptions, {
         modifiers: popperModifiers
@@ -13835,7 +14115,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         popper.destroy();
         handlePopperRefRef.current(null);
       };
-    }, [anchorEl, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
+    }, [tooltipAnchorEl, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
     const childProps = {
       placement
     };
@@ -14336,7 +14616,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         slots = {}
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$26);
-    const [exited, setExited] = React__namespace.useState(true);
+    const [exited, setExited] = React__namespace.useState(!open);
     const modal = React__namespace.useRef({});
     const mountNodeRef = React__namespace.useRef(null);
     const modalRef = React__namespace.useRef(null);
@@ -16217,7 +16497,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const unstable_ClassNameGenerator = {
     configure: generator => {
-      console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
+      {
+        console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
+      }
       ClassNameGenerator$1.configure(generator);
     }
   };
@@ -19462,7 +19744,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`& .${alertClasses$1.icon}`]: theme.vars ? {
         color: theme.vars.palette.Alert[`${color}IconColor`]
       } : {
-        color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
+        color: theme.palette[color].main
       }
     }, color && ownerState.variant === 'outlined' && {
       color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
@@ -19470,7 +19752,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`& .${alertClasses$1.icon}`]: theme.vars ? {
         color: theme.vars.palette.Alert[`${color}IconColor`]
       } : {
-        color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
+        color: theme.palette[color].main
       }
     }, color && ownerState.variant === 'filled' && _extends({
       fontWeight: theme.typography.fontWeightMedium
@@ -19479,7 +19761,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
     } : {
       backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
-      color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+      color: theme.palette.getContrastText(theme.palette[color].main)
     }));
   });
   const AlertIcon = styled$1('div', {
@@ -28606,11 +28888,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       },
       [`&.${fabClasses$1.focusVisible}`]: {
         boxShadow: (theme.vars || theme).shadows[6]
-      },
-      [`&.${fabClasses$1.disabled}`]: {
-        color: (theme.vars || theme).palette.action.disabled,
-        boxShadow: (theme.vars || theme).shadows[0],
-        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
       }
     }, ownerState.size === 'small' && {
       width: 40,
@@ -28653,6 +28930,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }
+  }), ({
+    theme
+  }) => ({
+    [`&.${fabClasses$1.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    }
   }));
   const Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
     const props = useThemeProps({
@@ -29246,7 +29531,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * </FormControl>
    * ```
    *
-   * ⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
+   * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
    * For instance, only one input can be focused at the same time, the state shouldn't be shared.
    */
   const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
@@ -35528,7 +35813,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     });
     return /*#__PURE__*/jsxRuntime_1(MenuRoot, _extends({
-      classes: PopoverClasses,
       onClose: onClose,
       anchorOrigin: {
         vertical: 'bottom',
@@ -35551,6 +35835,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }, TransitionProps),
       ownerState: ownerState
     }, other, {
+      classes: PopoverClasses,
       children: /*#__PURE__*/jsxRuntime_1(MenuMenuList, _extends({
         onKeyDown: handleListKeyDown,
         actions: menuListActionsRef,
@@ -38057,7 +38342,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const RatingLabel = styled$1('label', {
     name: 'MuiRating',
     slot: 'Label',
-    overridesResolver: (props, styles) => styles.label
+    overridesResolver: ({
+      ownerState
+    }, styles) => [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive]
   })(({
     ownerState
   }) => _extends({
@@ -40116,7 +40403,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     name: 'MuiSlider',
     slot: 'Mark',
     shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markActive',
-    overridesResolver: (props, styles) => styles.mark
+    overridesResolver: (props, styles) => {
+      const {
+        markActive
+      } = props;
+      return [styles.mark, markActive && styles.markActive];
+    }
   })(({
     theme,
     ownerState,
@@ -44335,7 +44627,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         } = {},
         onClose,
         onOpen,
-        open,
+        open = false,
         PaperProps = {},
         SwipeAreaProps,
         swipeAreaWidth = 20,
@@ -44731,6 +45023,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onOpen: PropTypes.func.isRequired,
     /**
      * If `true`, the component is shown.
+     * @default false
      */
     open: PropTypes.bool.isRequired,
     /**
@@ -48900,7 +49193,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
   exports.experimental_extendTheme = extendTheme;
-  exports.experimental_sx = sx;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
   exports.formControlClasses = formControlClasses$1;