@mui/material 5.9.2 → 5.10.1

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.2
+/** @license MUI v5.10.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -4738,7 +4738,15 @@
         return stylesFactory(...styles);
       };
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/naming-convention
+
+  const internal_processStyles = (tag, processor) => {
+    // Emotion attaches all the styles as `__emotion_styles`.
+    // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
+    if (Array.isArray(tag.__emotion_styles)) {
+      tag.__emotion_styles = processor(tag.__emotion_styles);
+    }
+  };
 
   const responsivePropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) ;
   var responsivePropType$1 = responsivePropType;
@@ -5575,11 +5583,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;
@@ -5720,6 +5728,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}
 
@@ -6867,7 +6880,9 @@
       generateClassName,
       styleFunctionSx = defaultStyleFunctionSx
     } = options;
-    const BoxRoot = styled$3('div')(styleFunctionSx);
+    const BoxRoot = styled$3('div', {
+      shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+    })(styleFunctionSx);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
       const theme = useTheme$1(defaultTheme);
 
@@ -6918,11 +6933,19 @@
   }
 
   const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$c = ["theme"],
+        _excluded2$d = ["theme"],
         _excluded3$1 = ["theme"];
 
   function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
+  } // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+
+
+  function isStringTag(tag) {
+    return typeof tag === 'string' && // 96 is one less than the char code
+    // for "a" so this is checking that
+    // it's a lowercase character
+    tag.charCodeAt(0) > 96;
   }
 
   const getStyleOverrides = (name, theme) => {
@@ -6992,7 +7015,19 @@
       slotShouldForwardProp = shouldForwardProp,
       styleFunctionSx = defaultStyleFunctionSx
     } = input;
+
+    const systemSx = props => {
+      const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
+      return styleFunctionSx(_extends({}, props, {
+        theme
+      }));
+    };
+
+    systemSx.__mui_systemSx = true;
     return (tag, inputOptions = {}) => {
+      // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
+      internal_processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
+
       const {
         name: componentName,
         slot: componentSlot,
@@ -7020,6 +7055,9 @@
       } else if (componentSlot) {
         // any other slot specified
         shouldForwardPropOption = slotShouldForwardProp;
+      } else if (isStringTag(tag)) {
+        // for string (html) tag, preserve the behavior in emotion & styled-components.
+        shouldForwardPropOption = undefined;
       }
 
       const defaultStyledResolver = styled$3(tag, _extends({
@@ -7032,12 +7070,11 @@
           // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
-          // eslint-disable-next-line no-underscore-dangle
           return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
 
             return stylesArg(_extends({
               theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
@@ -7073,12 +7110,7 @@
         }
 
         if (!skipSx) {
-          expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
-            return styleFunctionSx(_extends({}, props, {
-              theme
-            }));
-          });
+          expressionsWithDefaultTheme.push(systemSx);
         }
 
         const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
@@ -7091,7 +7123,6 @@
         } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
-        // eslint-disable-next-line no-underscore-dangle
         styleArg.__emotion_real !== styleArg) {
           // If the type is function, we need to define the default theme.
           transformedStyleArg = _ref2 => {
@@ -8080,7 +8111,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;
         }
@@ -8817,7 +8848,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'));
@@ -8882,7 +8913,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({
@@ -10641,38 +10672,57 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   var min = Math.min;
   var round$2 = Math.round;
 
-  function getBoundingClientRect(element, includeScale) {
+  function getUAString() {
+    var uaData = navigator.userAgentData;
+
+    if (uaData != null && uaData.brands) {
+      return uaData.brands.map(function (item) {
+        return item.brand + "/" + item.version;
+      }).join(' ');
+    }
+
+    return navigator.userAgent;
+  }
+
+  function isLayoutViewport() {
+    return !/^((?!chrome|android).)*safari/i.test(getUAString());
+  }
+
+  function getBoundingClientRect(element, includeScale, isFixedStrategy) {
     if (includeScale === void 0) {
       includeScale = false;
     }
 
-    var rect = element.getBoundingClientRect();
+    if (isFixedStrategy === void 0) {
+      isFixedStrategy = false;
+    }
+
+    var clientRect = element.getBoundingClientRect();
     var scaleX = 1;
     var scaleY = 1;
 
-    if (isHTMLElement(element) && includeScale) {
-      var offsetHeight = element.offsetHeight;
-      var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-      // Fallback to 1 in case both values are `0`
-
-      if (offsetWidth > 0) {
-        scaleX = round$2(rect.width) / offsetWidth || 1;
-      }
-
-      if (offsetHeight > 0) {
-        scaleY = round$2(rect.height) / offsetHeight || 1;
-      }
+    if (includeScale && isHTMLElement(element)) {
+      scaleX = element.offsetWidth > 0 ? round$2(clientRect.width) / element.offsetWidth || 1 : 1;
+      scaleY = element.offsetHeight > 0 ? round$2(clientRect.height) / element.offsetHeight || 1 : 1;
     }
 
+    var _ref = isElement(element) ? getWindow(element) : window,
+        visualViewport = _ref.visualViewport;
+
+    var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+    var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+    var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+    var width = clientRect.width / scaleX;
+    var height = clientRect.height / scaleY;
     return {
-      width: rect.width / scaleX,
-      height: rect.height / scaleY,
-      top: rect.top / scaleY,
-      right: rect.right / scaleX,
-      bottom: rect.bottom / scaleY,
-      left: rect.left / scaleX,
-      x: rect.left / scaleX,
-      y: rect.top / scaleY
+      width: width,
+      height: height,
+      top: y,
+      right: x + width,
+      bottom: y + height,
+      left: x,
+      x: x,
+      y: y
     };
   }
 
@@ -10767,8 +10817,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
 
   function getContainingBlock(element) {
-    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-    var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+    var isFirefox = /firefox/i.test(getUAString());
+    var isIE = /Trident/i.test(getUAString());
 
     if (isIE && isHTMLElement(element)) {
       // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -11208,31 +11258,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
   }
 
-  function getViewportRect(element) {
+  function getViewportRect(element, strategy) {
     var win = getWindow(element);
     var html = getDocumentElement(element);
     var visualViewport = win.visualViewport;
     var width = html.clientWidth;
     var height = html.clientHeight;
     var x = 0;
-    var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-    // can be obscured underneath it.
-    // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-    // if it isn't open, so if this isn't available, the popper will be detected
-    // to overflow the bottom of the screen too early.
+    var y = 0;
 
     if (visualViewport) {
       width = visualViewport.width;
-      height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-      // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-      // errors due to floating point numbers, so we need to check precision.
-      // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-      // Feature detection fails in mobile emulation mode in Chrome.
-      // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-      // 0.001
-      // Fallback here: "Not Safari" userAgent
-
-      if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+      height = visualViewport.height;
+      var layoutViewport = isLayoutViewport();
+
+      if (layoutViewport || !layoutViewport && strategy === 'fixed') {
         x = visualViewport.offsetLeft;
         y = visualViewport.offsetTop;
       }
@@ -11326,8 +11366,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  function getInnerBoundingClientRect(element) {
-    var rect = getBoundingClientRect(element);
+  function getInnerBoundingClientRect(element, strategy) {
+    var rect = getBoundingClientRect(element, false, strategy === 'fixed');
     rect.top = rect.top + element.clientTop;
     rect.left = rect.left + element.clientLeft;
     rect.bottom = rect.top + element.clientHeight;
@@ -11339,8 +11379,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return rect;
   }
 
-  function getClientRectFromMixedType(element, clippingParent) {
-    return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  function getClientRectFromMixedType(element, clippingParent, strategy) {
+    return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
   } // A "clipping parent" is an overflowable container with the characteristic of
   // clipping (or hiding) overflowing elements with a position different from
   // `initial`
@@ -11363,18 +11403,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   // clipping parents
 
 
-  function getClippingRect(element, boundary, rootBoundary) {
+  function getClippingRect(element, boundary, rootBoundary, strategy) {
     var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
     var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
     var firstClippingParent = clippingParents[0];
     var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-      var rect = getClientRectFromMixedType(element, clippingParent);
+      var rect = getClientRectFromMixedType(element, clippingParent, strategy);
       accRect.top = max(rect.top, accRect.top);
       accRect.right = min(rect.right, accRect.right);
       accRect.bottom = min(rect.bottom, accRect.bottom);
       accRect.left = max(rect.left, accRect.left);
       return accRect;
-    }, getClientRectFromMixedType(element, firstClippingParent));
+    }, getClientRectFromMixedType(element, firstClippingParent, strategy));
     clippingRect.width = clippingRect.right - clippingRect.left;
     clippingRect.height = clippingRect.bottom - clippingRect.top;
     clippingRect.x = clippingRect.left;
@@ -11455,6 +11495,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     var _options = options,
         _options$placement = _options.placement,
         placement = _options$placement === void 0 ? state.placement : _options$placement,
+        _options$strategy = _options.strategy,
+        strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
         _options$boundary = _options.boundary,
         boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
         _options$rootBoundary = _options.rootBoundary,
@@ -11469,7 +11511,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     var altContext = elementContext === popper ? reference : popper;
     var popperRect = state.rects.popper;
     var element = state.elements[altBoundary ? altContext : elementContext];
-    var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+    var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
     var referenceClientRect = getBoundingClientRect(state.elements.reference);
     var popperOffsets = computeOffsets({
       reference: referenceClientRect,
@@ -11987,7 +12029,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     var isOffsetParentAnElement = isHTMLElement(offsetParent);
     var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
     var documentElement = getDocumentElement(offsetParent);
-    var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+    var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
     var scroll = {
       scrollLeft: 0,
       scrollTop: 0
@@ -12533,7 +12575,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   generateUtilityClasses('MuiPopperUnstyled', ['root']);
 
   const _excluded$2b = ["anchorEl", "children", "component", "components", "componentsProps", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
-        _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
+        _excluded2$b = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -12722,7 +12764,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);
 
@@ -13436,18 +13478,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1("div", {
-        tabIndex: 0,
+        tabIndex: open ? 0 : -1,
         onFocus: handleFocusSentinel,
         ref: sentinelStart,
-        "data-test": "sentinelStart"
+        "data-testid": "sentinelStart"
       }), /*#__PURE__*/React__namespace.cloneElement(children, {
         ref: handleRef,
         onFocus
       }), /*#__PURE__*/jsxRuntime_1("div", {
-        tabIndex: 0,
+        tabIndex: open ? 0 : -1,
         onFocus: handleFocusSentinel,
         ref: sentinelEnd,
-        "data-test": "sentinelEnd"
+        "data-testid": "sentinelEnd"
       })]
     });
   }
@@ -16052,6 +16094,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, {
@@ -16546,7 +16593,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;
@@ -16586,7 +16633,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
@@ -17102,6 +17149,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';
@@ -17321,6 +17372,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();
@@ -19321,7 +19380,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, {
@@ -21405,7 +21464,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"];
@@ -21425,7 +21484,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);
   };
@@ -21463,8 +21522,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,
@@ -21732,7 +21791,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, {
@@ -21755,12 +21813,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
       });
     }
@@ -22012,7 +22069,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"];
@@ -22041,13 +22098,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);
   };
@@ -24911,7 +24969,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,
@@ -25705,7 +25763,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 {
@@ -25949,7 +26008,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,
@@ -25965,7 +26028,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,
@@ -31982,6 +32045,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
@@ -31997,9 +32086,20 @@ 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) => {
+        var _zeroValueBreakpointK;
+
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -32011,7 +32111,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           };
         }
 
-        return {};
+        if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
+          return {};
+        }
+
+        return {
+          marginTop: 0,
+          [`& > .${gridClasses$1.item}`]: {
+            paddingTop: 0
+          }
+        };
       });
     }
 
@@ -32032,9 +32141,20 @@ 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) => {
+        var _zeroValueBreakpointK2;
+
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -32047,7 +32167,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           };
         }
 
-        return {};
+        if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
+          return {};
+        }
+
+        return {
+          width: '100%',
+          marginLeft: 0,
+          [`& > .${gridClasses$1.item}`]: {
+            paddingLeft: 0
+          }
+        };
       });
     }
 
@@ -41767,7 +41897,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
@@ -42281,7 +42411,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getSkeletonUtilityClass(slot) {
     return generateUtilityClass('MuiSkeleton', slot);
   }
-  const skeletonClasses = generateUtilityClasses('MuiSkeleton', ['root', 'text', 'rectangular', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
+  const skeletonClasses = generateUtilityClasses('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
   var skeletonClasses$1 = skeletonClasses;
 
   const _excluded$C = ["animation", "className", "component", "height", "style", "variant", "width"];
@@ -42366,6 +42496,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, ownerState.variant === 'circular' && {
       borderRadius: '50%'
+    }, ownerState.variant === 'rounded' && {
+      borderRadius: (theme.vars || theme).shape.borderRadius
     }, ownerState.hasChildren && {
       '& > *': {
         visibility: 'hidden'
@@ -42501,7 +42633,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     variant: PropTypes
     /* @typescript-to-proptypes-ignore */
-    .oneOfType([PropTypes.oneOf(['circular', 'rectangular', 'text']), PropTypes.string]),
+    .oneOfType([PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']), PropTypes.string]),
 
     /**
      * Width of the skeleton.
@@ -44784,7 +44916,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* = width / sqrt(2) = (length of the hypotenuse) */
     ,
     boxSizing: 'border-box',
-    color: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)` : alpha(theme.palette.grey[700], 0.9),
+    color: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.9),
     '&::before': {
       content: '""',
       margin: 'auto',
@@ -45918,6 +46050,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', {
@@ -46412,7 +46545,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const slots = {
       root: ['root', orientation, error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
       label: ['label', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
-      iconContainer: ['iconContainer', alternativeLabel && 'alternativeLabel'],
+      iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
       labelContainer: ['labelContainer']
     };
     return composeClasses(slots, getStepLabelUtilityClass, classes);
@@ -48982,7 +49115,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Specify the size of the cell.
      * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
      */
-    size: PropTypes.oneOf(['small', 'medium']),
+    size: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
 
     /**
      * Set aria-sort direction.
@@ -48998,7 +49133,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * Specify the cell type.
      * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
      */
-    variant: PropTypes.oneOf(['body', 'footer', 'head'])
+    variant: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['body', 'footer', 'head']), PropTypes.string])
   } ;
   var TableCell$1 = TableCell;
 
@@ -52320,9 +52457,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       handleScroll(); // Re-evaluate trigger when dependencies change
 
-      target.addEventListener('scroll', handleScroll);
+      target.addEventListener('scroll', handleScroll, {
+        passive: true
+      });
       return () => {
-        target.removeEventListener('scroll', handleScroll);
+        target.removeEventListener('scroll', handleScroll, {
+          passive: true
+        });
       }; // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [target, getTrigger, JSON.stringify(other)]);