@mui/material 5.10.17 → 5.11.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.17
+/** @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
       }));
     };
@@ -9465,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;
@@ -9848,10 +10014,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoStandardBg', private_safeLighten(palette.info.light, 0.9));
         setColor(palette.Alert, 'successStandardBg', private_safeLighten(palette.success.light, 0.9));
         setColor(palette.Alert, 'warningStandardBg', private_safeLighten(palette.warning.light, 0.9));
-        setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
-        setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
-        setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
-        setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+        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'));
@@ -9992,6 +10158,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       });
     });
     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;
   }
 
@@ -10023,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,
@@ -13873,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();
@@ -13920,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
@@ -13930,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
     };
@@ -19559,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),
@@ -19567,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
@@ -19576,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', {
@@ -29346,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) {
@@ -35628,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',
@@ -35651,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,
@@ -44442,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,
@@ -44838,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,
     /**
@@ -49007,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;