@mui/material 5.9.0 → 5.9.3

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.9.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5575,11 +5575,11 @@
     slot => {
       output[slot] = slots[slot].reduce((acc, key) => {
         if (key) {
+          acc.push(getUtilityClass(key));
+
           if (classes && classes[key]) {
             acc.push(classes[key]);
           }
-
-          acc.push(getUtilityClass(key));
         }
 
         return acc;
@@ -5701,7 +5701,7 @@
   function createEmptyBreakpointObject(breakpointsInput = {}) {
     var _breakpointsInput$key;
 
-    const breakpointsInOrder = breakpointsInput == null ? void 0 : (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+    const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
       const breakpointStyleKey = breakpointsInput.up(key);
       acc[breakpointStyleKey] = {};
       return acc;
@@ -5720,6 +5720,11 @@
       return acc;
     }, style);
   }
+  function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
+    const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
+    const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
+    return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
+  } // compute base for responsive values; e.g.,
   // [1,2,3] => {xs: true, sm: true, md: true}
   // {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
 
@@ -6918,7 +6923,7 @@
   }
 
   const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$c = ["theme"],
+        _excluded2$d = ["theme"],
         _excluded3$1 = ["theme"];
 
   function isEmpty$2(obj) {
@@ -7037,7 +7042,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
 
             return stylesArg(_extends({
               theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
@@ -8080,7 +8085,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         })();
 
         if (key === resolvedDefaultColorScheme) {
-          defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
+          defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
         } else {
           otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
         }
@@ -8292,7 +8297,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     defaultTheme: defaultTheme$5
   });
 
-  const useUtilityClasses$1P = (ownerState, componentName) => {
+  const useUtilityClasses$1Q = (ownerState, componentName) => {
     const getContainerUtilityClass = slot => {
       return generateUtilityClass(componentName, slot);
     };
@@ -8385,7 +8390,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }); // @ts-ignore module augmentation fails if custom breakpoints are used
 
 
-      const classes = useUtilityClasses$1P(ownerState, componentName);
+      const classes = useUtilityClasses$1Q(ownerState, componentName);
       return (
         /*#__PURE__*/
         // @ts-ignore theme is injected by the styled util
@@ -8601,14 +8606,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       flexWrap: ownerState.wrap
     }, {
       margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
-    }, ownerState.nested ? {
+    }, ownerState.disableEqualOverflow && {
+      margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`
+    }, ownerState.nested ? _extends({
       padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
-    } : {
+    }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
+      padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`
+    }) : {
       '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
       '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
-    }) : {
+    }) : _extends({
       padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
-    });
+    }, ownerState.disableEqualOverflow && {
+      padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
+    }));
   };
   const generateSizeClassNames = gridSize => {
     const classNames = [];
@@ -8645,7 +8656,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [];
   };
 
-  const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing"];
+  const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
   const defaultTheme$4 = createTheme$1(); // widening Theme to any so that the consumer can own the theme structure.
 
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -8670,6 +8681,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       componentName = 'MuiGrid'
     } = options;
     const NestedContext = /*#__PURE__*/React__namespace.createContext(false);
+    const OverflowContext = /*#__PURE__*/React__namespace.createContext(undefined);
 
     const useUtilityClasses = (ownerState, theme) => {
       const {
@@ -8687,13 +8699,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
     const Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-      var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin;
+      var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
 
       const theme = useTheme$1();
       const themeProps = useThemeProps(inProps);
       const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
 
       const nested = React__namespace.useContext(NestedContext);
+      const overflow = React__namespace.useContext(OverflowContext);
 
       const {
         className,
@@ -8704,9 +8717,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         wrap = 'wrap',
         spacing: spacingProp = 0,
         rowSpacing: rowSpacingProp = spacingProp,
-        columnSpacing: columnSpacingProp = spacingProp
+        columnSpacing: columnSpacingProp = spacingProp,
+        disableEqualOverflow: themeDisableEqualOverflow
       } = props,
-            rest = _objectWithoutPropertiesLoose(props, _excluded$2f); // collect breakpoints related props because they can be custom from the theme.
+            rest = _objectWithoutPropertiesLoose(props, _excluded$2f); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
+
+
+      let disableEqualOverflow = themeDisableEqualOverflow;
+
+      if (nested && themeDisableEqualOverflow !== undefined) {
+        disableEqualOverflow = inProps.disableEqualOverflow;
+      } // collect breakpoints related props because they can be customized from the theme.
 
 
       const gridSize = {};
@@ -8736,7 +8757,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         rowSpacing,
         columnSpacing,
         gridSize,
-        gridOffset
+        gridOffset,
+        disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
+        // use context value if exists.
+        parentDisableEqualOverflow: overflow // for nested grid
+
       });
 
       const classes = useUtilityClasses(ownerState, theme);
@@ -8755,6 +8780,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         });
       }
 
+      if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
+        // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+        // 1. It is the root grid with `disableEqualOverflow`.
+        // 2. It is a nested grid with different `disableEqualOverflow` from the context.
+        result = /*#__PURE__*/jsxRuntime_1(OverflowContext.Provider, {
+          value: disableEqualOverflow,
+          children: result
+        });
+      }
+
       return result;
     });
     Grid.propTypes
@@ -8767,6 +8802,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       component: PropTypes.elementType,
       container: PropTypes.bool,
       direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+      disableEqualOverflow: PropTypes.bool,
       lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
       lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
       md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
@@ -8786,7 +8822,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
 
   const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-        _excluded2$b = ["type", "mode"];
+        _excluded2$c = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
       console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
@@ -8851,7 +8887,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       type: typeInput,
       mode: modeInput
     } = palette,
-          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$b);
+          paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2$c);
 
     const finalMode = modeInput || typeInput || 'light';
     theme.palette = _extends({
@@ -9616,7 +9652,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         option
       });
 
-      if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
+      if (!disableCloseOnSelect && (!event || !event.ctrlKey && !event.metaKey)) {
         handleClose(event, reason);
       }
 
@@ -10128,7 +10164,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   const _excluded$2c = ["badgeContent", "component", "children", "components", "componentsProps", "invisible", "max", "showZero"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1P = ownerState => {
     const {
       invisible
     } = ownerState;
@@ -10177,7 +10213,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       showZero
     });
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1P(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = useSlotProps({
       elementType: Root,
@@ -12496,8 +12532,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var Portal$1 = Portal;
 
-  const _excluded$2b = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
-        _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
+  function getPopperUnstyledUtilityClass(slot) {
+    return generateUtilityClass('MuiPopperUnstyled', slot);
+  }
+  generateUtilityClasses('MuiPopperUnstyled', ['root']);
+
+  const _excluded$2b = ["anchorEl", "children", "component", "components", "componentsProps", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
+        _excluded2$b = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -12526,17 +12567,30 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
   }
 
+  const useUtilityClasses$1O = () => {
+    const slots = {
+      root: ['root']
+    };
+    return composeClasses(slots, getPopperUnstyledUtilityClass, {});
+  };
+
   const defaultPopperOptions = {};
   /* eslint-disable react/prop-types */
 
   const PopperTooltip = /*#__PURE__*/React__namespace.forwardRef(function PopperTooltip(props, ref) {
+    var _ref;
+
     const {
       anchorEl,
       children,
+      component,
+      components = {},
+      componentsProps = {},
       direction,
       disablePortal,
       modifiers,
       open,
+      ownerState,
       placement: initialPlacement,
       popperOptions,
       popperRef: popperRefProp,
@@ -12634,10 +12688,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       childProps.TransitionProps = TransitionProps;
     }
 
-    return /*#__PURE__*/jsxRuntime_1("div", _extends({
-      ref: ownRef,
-      role: "tooltip"
-    }, other, {
+    const classes = useUtilityClasses$1O();
+    const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
+    const rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: componentsProps.root,
+      externalForwardedProps: other,
+      additionalProps: {
+        role: 'tooltip',
+        ref: ownRef
+      },
+      ownerState: _extends({}, props, ownerState),
+      className: classes.root
+    });
+    return /*#__PURE__*/jsxRuntime_1(Root, _extends({}, rootProps, {
       children: typeof children === 'function' ? children(childProps) : children
     }));
   });
@@ -12663,7 +12727,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       transition = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded2$a);
+          other = _objectWithoutPropertiesLoose(props, _excluded2$b);
 
     const [exited, setExited] = React__namespace.useState(true);
 
@@ -12753,6 +12817,23 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /* @typescript-to-proptypes-ignore */
     .oneOfType([PropTypes.node, PropTypes.func]),
 
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: PropTypes.shape({
+      Root: PropTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    componentsProps: PropTypes.shape({
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+
     /**
      * An HTML element or function that returns one.
      * The `container` will have the portal children appended to it.
@@ -15976,6 +16057,11 @@ const theme2 = createTheme({ palette: {
     } = options,
           other = _objectWithoutPropertiesLoose(options, _excluded$24);
 
+    if (options.vars) {
+      throw new Error(`MUI: \`vars\` is a private field used for CSS variables support.
+Please use another name.` );
+    }
+
     const palette = createPalette(paletteInput);
     const systemTheme = createTheme$1(options);
     let muiTheme = deepmerge(systemTheme, {
@@ -16470,7 +16556,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var Paper$1 = Paper;
 
   const _excluded$22 = ["colorSchemes", "cssVarPrefix"],
-        _excluded2$9 = ["palette"];
+        _excluded2$a = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
       return undefined;
@@ -16510,7 +16596,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           {
       palette: lightPalette
     } = _createThemeWithoutVa,
-          muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$9);
+          muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$a);
 
     const {
       palette: darkPalette
@@ -17026,6 +17112,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var TransitionGroupContext = React__default["default"].createContext(null);
 
+  var forceReflow = function forceReflow(node) {
+    return node.scrollTop;
+  };
+
   var UNMOUNTED = 'unmounted';
   var EXITED = 'exited';
   var ENTERING = 'entering';
@@ -17245,6 +17335,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         this.cancelNextCallback();
 
         if (nextStatus === ENTERING) {
+          if (this.props.unmountOnExit || this.props.mountOnEnter) {
+            var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default["default"].findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+            // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
+            // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
+
+            if (node) forceReflow(node);
+          }
+
           this.performEnter(mounting);
         } else {
           this.performExit();
@@ -19159,7 +19257,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         const {
           clientX,
           clientY
-        } = event.touches ? event.touches[0] : event;
+        } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
         rippleX = Math.round(clientX - rect.left);
         rippleY = Math.round(clientY - rect.top);
       }
@@ -19245,7 +19343,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       stop
     }), [pulsate, start, stop]);
     return /*#__PURE__*/jsxRuntime_1(TouchRippleRoot, _extends({
-      className: clsx(classes.root, touchRippleClasses$1.root, className),
+      className: clsx(touchRippleClasses$1.root, classes.root, className),
       ref: container
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(TransitionGroup$1, {
@@ -21063,6 +21161,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* @typescript-to-proptypes-ignore */
     .oneOfType([PropTypes.node, PropTypes.func]),
 
+    /**
+     * @ignore
+     */
+    component: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .elementType,
+
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components: PropTypes.shape({
+      Root: PropTypes.elementType
+    }),
+
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    componentsProps: PropTypes.shape({
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+
     /**
      * An HTML element or function that returns one.
      * The `container` will have the portal children appended to it.
@@ -21305,7 +21427,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getChipUtilityClass(slot) {
     return generateUtilityClass('MuiChip', slot);
   }
-  const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'focusVisible']);
+  const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
   const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
@@ -21325,7 +21447,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       label: ['label', `label${capitalize(size)}`],
       avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
       icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(color)}`],
-      deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIconOutlinedColor${capitalize(color)}`]
+      deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
     };
     return composeClasses(slots, getChipUtilityClass, classes);
   };
@@ -21363,8 +21485,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }, {
         [`& .${chipClasses$1.deleteIcon}`]: styles[`deleteIconColor${capitalize(color)}`]
       }, {
-        [`& .${chipClasses$1.deleteIcon}`]: styles[`deleteIconOutlinedColor${capitalize(color)}`]
-      }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], variant === 'outlined' && styles[`outlined${capitalize(color)}`]];
+        [`& .${chipClasses$1.deleteIcon}`]: styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
+      }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
     }
   })(({
     theme,
@@ -21632,7 +21754,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
 
     const clickable = clickableProp !== false && onClick ? true : clickableProp;
-    const small = size === 'small';
     const component = clickable || onDelete ? ButtonBase$1 : ComponentProp || 'div';
 
     const ownerState = _extends({}, props, {
@@ -21655,12 +21776,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     let deleteIcon = null;
 
     if (onDelete) {
-      const customClasses = clsx(color !== 'default' && (variant === 'outlined' ? classes[`deleteIconOutlinedColor${capitalize(color)}`] : classes[`deleteIconColor${capitalize(color)}`]), small && classes.deleteIconSmall);
       deleteIcon = deleteIconProp && /*#__PURE__*/React__namespace.isValidElement(deleteIconProp) ? /*#__PURE__*/React__namespace.cloneElement(deleteIconProp, {
-        className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),
+        className: clsx(deleteIconProp.props.className, classes.deleteIcon),
         onClick: handleDeleteIconClick
       }) : /*#__PURE__*/jsxRuntime_1(CancelIcon, {
-        className: clsx(classes.deleteIcon, customClasses),
+        className: clsx(classes.deleteIcon),
         onClick: handleDeleteIconClick
       });
     }
@@ -21912,7 +22032,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getInputBaseUtilityClass(slot) {
     return generateUtilityClass('MuiInputBase', slot);
   }
-  const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
+  const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
   var inputBaseClasses$1 = inputBaseClasses;
 
   const _excluded$1O = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
@@ -21941,13 +22061,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       fullWidth,
       hiddenLabel,
       multiline,
+      readOnly,
       size,
       startAdornment,
       type
     } = ownerState;
     const slots = {
-      root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel'],
-      input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd']
+      root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+      input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
     };
     return composeClasses(slots, getInputBaseUtilityClass, classes);
   };
@@ -24811,7 +24932,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         Root: BadgeRoot,
         Badge: BadgeBadge
       }, components),
-      className: clsx(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
+      className: clsx((_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, classes.root, className),
       componentsProps: {
         root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps$1(components.Root) && {
           as: component,
@@ -25605,7 +25726,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var ButtonGroupContext$1 = ButtonGroupContext;
 
-  const _excluded$1E = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+  const _excluded$1E = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"],
+        _excluded2$9 = ["root"];
 
   const useUtilityClasses$1n = ownerState => {
     const {
@@ -25849,7 +25971,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1n(ownerState);
+    const _useUtilityClasses = useUtilityClasses$1n(ownerState),
+          {
+      root: classesRoot
+    } = _useUtilityClasses,
+          classes = _objectWithoutPropertiesLoose(_useUtilityClasses, _excluded2$9);
 
     const startIcon = startIconProp && /*#__PURE__*/jsxRuntime_1(ButtonStartIcon, {
       className: classes.startIcon,
@@ -25865,7 +25991,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
-      className: clsx(className, contextProps.className),
+      className: clsx(contextProps.className, classesRoot, className),
       component: component,
       disabled: disabled,
       focusRipple: !disableFocusRipple,
@@ -28177,7 +28303,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
-     * @deprecated Use `components.Backdrop` instead.
+     * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+     * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
      * @default styled(Backdrop, {
      *   name: 'MuiModal',
      *   slot: 'Backdrop',
@@ -28623,7 +28750,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
-     * @deprecated Use `components.Backdrop` instead.
+     * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+     * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
      * @default styled(Backdrop, {
      *   name: 'MuiModal',
      *   slot: 'Backdrop',
@@ -31561,7 +31689,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The variant to use.
      */
-    variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+    variant: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
   } ;
   var FormHelperText$1 = FormHelperText;
 
@@ -31878,6 +32008,32 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return output;
     });
   }
+  /**
+   * Extracts zero value breakpoint keys before a non-zero value breakpoint key.
+   * @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
+   * @returns [xs, sm]
+   */
+
+  function extractZeroValueBreakpointKeys({
+    breakpoints,
+    values
+  }) {
+    let nonZeroKey = '';
+    Object.keys(values).forEach(key => {
+      if (nonZeroKey !== '') {
+        return;
+      }
+
+      if (values[key] !== 0) {
+        nonZeroKey = key;
+      }
+    });
+    const sortedBreakpointKeysByValue = Object.keys(breakpoints).sort((a, b) => {
+      return breakpoints[a] - breakpoints[b];
+    });
+    return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
+  }
+
   function generateRowGap({
     theme,
     ownerState
@@ -31893,9 +32049,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         values: rowSpacing,
         breakpoints: theme.breakpoints.values
       });
+      let zeroValueBreakpointKeys;
+
+      if (typeof rowSpacingValues === 'object') {
+        zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+          breakpoints: theme.breakpoints.values,
+          values: rowSpacingValues
+        });
+      }
+
       styles = handleBreakpoints({
         theme
-      }, rowSpacingValues, propValue => {
+      }, rowSpacingValues, (propValue, breakpoint) => {
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -31907,7 +32072,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           };
         }
 
-        return {};
+        if (zeroValueBreakpointKeys.includes(breakpoint)) {
+          return {};
+        }
+
+        return {
+          marginTop: 0,
+          [`& > .${gridClasses$1.item}`]: {
+            paddingTop: 0
+          }
+        };
       });
     }
 
@@ -31928,9 +32102,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         values: columnSpacing,
         breakpoints: theme.breakpoints.values
       });
+      let zeroValueBreakpointKeys;
+
+      if (typeof columnSpacingValues === 'object') {
+        zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+          breakpoints: theme.breakpoints.values,
+          values: columnSpacingValues
+        });
+      }
+
       styles = handleBreakpoints({
         theme
-      }, columnSpacingValues, propValue => {
+      }, columnSpacingValues, (propValue, breakpoint) => {
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -31943,7 +32126,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           };
         }
 
-        return {};
+        if (zeroValueBreakpointKeys.includes(breakpoint)) {
+          return {};
+        }
+
+        return {
+          width: '100%',
+          marginLeft: 0,
+          [`& > .${gridClasses$1.item}`]: {
+            paddingLeft: 0
+          }
+        };
       });
     }
 
@@ -33736,9 +33929,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     ownerState
   }) => _extends({
-    display: 'inline-block',
-    position: 'relative',
-    lineHeight: 0
+    display: 'block',
+    position: 'relative'
   }, ownerState.variant === 'standard' && {
     // For titlebar under list item
     display: 'flex',
@@ -33753,7 +33945,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     [`& .${imageListItemClasses$1.img}`]: _extends({
       objectFit: 'cover',
       width: '100%',
-      height: '100%'
+      height: '100%',
+      display: 'block'
     }, ownerState.variant === 'standard' && {
       height: 'auto',
       flexGrow: 1
@@ -41663,7 +41856,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onFocus: onFocus
       }, SelectDisplayProps, {
         ownerState: ownerState,
-        className: clsx(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
+        className: clsx(SelectDisplayProps.className, classes.select, className) // The id is required for proper a11y
         ,
         id: buttonId,
         children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
@@ -42674,7 +42867,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
     backgroundColor: (theme.vars || theme).palette.grey[600],
@@ -42686,6 +42878,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     padding: '0.25rem 0.75rem'
   }, ownerState.orientation === 'horizontal' && {
     top: '-10px',
+    transformOrigin: 'bottom center',
     '&:before': {
       position: 'absolute',
       content: '""',
@@ -42698,7 +42891,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.orientation === 'vertical' && {
     right: '30px',
-    top: '25px',
+    top: '24px',
+    transformOrigin: 'right center',
     '&:before': {
       position: 'absolute',
       content: '""',
@@ -44828,15 +45022,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const handleEnter = event => {
       if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
         return;
-      } // Workaround for https://github.com/facebook/react/issues/7769
-
-
-      if (!childNode) {
-        setChildNode(event.currentTarget);
       } // Remove the title ahead of time.
       // We don't want to wait for the next render commit.
       // We would risk displaying two tooltips at the same time (native + this one).
-      else {
+
+
+      if (childNode) {
         childNode.removeAttribute('title');
       }
 
@@ -44881,6 +45072,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const handleFocus = event => {
       // Workaround for https://github.com/facebook/react/issues/7769
+      // The autoFocus of React might trigger the event before the componentDidMount.
+      // We need to account for this eventuality.
       if (!childNode) {
         setChildNode(event.currentTarget);
       }
@@ -45760,7 +45953,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => {
     let styles = _extends({
-      display: 'flex'
+      display: 'flex',
+      flexDirection: 'column'
     }, handleBreakpoints({
       theme
     }, resolveBreakpointValues({
@@ -45788,6 +45982,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         base
       });
 
+      if (typeof directionValues === 'object') {
+        Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+          const directionValue = directionValues[breakpoint];
+
+          if (!directionValue) {
+            const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+            directionValues[breakpoint] = previousDirectionValue;
+          }
+        });
+      }
+
       const styleFromPropValue = (propValue, breakpoint) => {
         return {
           '& > :not(style) + :not(style)': {
@@ -45802,6 +46007,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }, spacingValues, styleFromPropValue));
     }
 
+    styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
     return styles;
   };
   const StackRoot = styled$1('div', {
@@ -51136,7 +51342,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Determines the color of the indicator.
      * @default 'primary'
      */
-    indicatorColor: PropTypes.oneOf(['primary', 'secondary']),
+    indicatorColor: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
     /**
      * Callback fired when the value changes.