@mui/material 5.0.6 → 5.1.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.6
+/** @license MUI v5.1.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5423,12 +5423,12 @@
     xs: 0,
     // phone
     sm: 600,
-    // tablets
+    // tablet
     md: 900,
     // small laptop
     lg: 1200,
     // desktop
-    xl: 1536 // large screens
+    xl: 1536 // large screen
 
   };
   const defaultBreakpoints = {
@@ -5490,10 +5490,40 @@
       return acc;
     }, style);
   }
+  // [1,2,3] => {xs: true, sm: true, md: true}
+  // {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+
+  function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+    // fixed value
+    if (typeof breakpointValues !== 'object') {
+      return {};
+    }
+
+    const base = {};
+    const breakpointsKeys = Object.keys(themeBreakpoints);
+
+    if (Array.isArray(breakpointValues)) {
+      breakpointsKeys.forEach((breakpoint, i) => {
+        if (i < breakpointValues.length) {
+          base[breakpoint] = true;
+        }
+      });
+    } else {
+      breakpointsKeys.forEach(breakpoint => {
+        if (breakpointValues[breakpoint] != null) {
+          base[breakpoint] = true;
+        }
+      });
+    }
+
+    return base;
+  }
   function resolveBreakpointValues({
     values: breakpointValues,
-    base
+    breakpoints: themeBreakpoints,
+    base: customBase
   }) {
+    const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
     const keys = Object.keys(base);
 
     if (keys.length === 0) {
@@ -5501,14 +5531,15 @@
     }
 
     let previous;
-    return keys.reduce((acc, breakpoint) => {
-      if (typeof breakpointValues === 'object') {
-        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+    return keys.reduce((acc, breakpoint, i) => {
+      if (Array.isArray(breakpointValues)) {
+        acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+        previous = i;
       } else {
-        acc[breakpoint] = breakpointValues;
+        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+        previous = breakpoint;
       }
 
-      previous = breakpoint;
       return acc;
     }, {});
   }
@@ -6176,53 +6207,63 @@
 
   function styleFunctionSx(props) {
     const {
-      sx: styles,
+      sx,
       theme = {}
     } = props || {};
 
-    if (!styles) {
-      return null;
+    if (!sx) {
+      return null; // emotion & styled-components will neglect null
     }
+    /*
+     * Receive `sxInput` as object or callback
+     * and then recursively check keys & values to create media query object styles.
+     * (the result will be used in `styled`)
+     */
 
-    let stylesObject = styles;
 
-    if (typeof styles === 'function') {
-      stylesObject = styles(theme);
-    } else if (typeof styles !== 'object') {
-      // value
-      return styles;
-    }
+    function traverse(sxInput) {
+      let sxObject = sxInput;
 
-    const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-    const breakpointsKeys = Object.keys(emptyBreakpoints);
-    let css = emptyBreakpoints;
-    Object.keys(stylesObject).forEach(styleKey => {
-      const value = callIfFn(stylesObject[styleKey], theme);
+      if (typeof sxInput === 'function') {
+        sxObject = sxInput(theme);
+      } else if (typeof sxInput !== 'object') {
+        // value
+        return sxInput;
+      }
 
-      if (typeof value === 'object') {
-        if (propToStyleFunction[styleKey]) {
-          css = merge(css, getThemeValue(styleKey, value, theme));
-        } else {
-          const breakpointsValues = handleBreakpoints({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
+      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      const breakpointsKeys = Object.keys(emptyBreakpoints);
+      let css = emptyBreakpoints;
+      Object.keys(sxObject).forEach(styleKey => {
+        const value = callIfFn(sxObject[styleKey], theme);
 
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+        if (typeof value === 'object') {
+          if (propToStyleFunction[styleKey]) {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           } else {
-            css = merge(css, breakpointsValues);
+            const breakpointsValues = handleBreakpoints({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme
+              });
+            } else {
+              css = merge(css, breakpointsValues);
+            }
           }
+        } else {
+          css = merge(css, getThemeValue(styleKey, value, theme));
         }
-      } else {
-        css = merge(css, getThemeValue(styleKey, value, theme));
-      }
-    });
-    return removeUnusedBreakpoints(breakpointsKeys, css);
+      });
+      return removeUnusedBreakpoints(breakpointsKeys, css);
+    }
+
+    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
 
   styleFunctionSx.filterProps = ['sx'];
@@ -6254,8 +6295,26 @@
       systemProps,
       otherProps
     } = splitProps(other);
+    let finalSx;
+
+    if (Array.isArray(inSx)) {
+      finalSx = [systemProps, ...inSx];
+    } else if (typeof inSx === 'function') {
+      finalSx = (...args) => {
+        const result = inSx(...args);
+
+        if (!isPlainObject(result)) {
+          return systemProps;
+        }
+
+        return _extends({}, systemProps, result);
+      };
+    } else {
+      finalSx = _extends({}, systemProps, inSx);
+    }
+
     return _extends({}, otherProps, {
-      sx: _extends({}, systemProps, inSx)
+      sx: finalSx
     });
   }
 
@@ -6310,12 +6369,12 @@
         xs: 0,
         // phone
         sm: 600,
-        // tablets
+        // tablet
         md: 900,
         // small laptop
         lg: 1200,
         // desktop
-        xl: 1536 // large screens
+        xl: 1536 // large screen
 
       },
       unit = 'px',
@@ -6530,7 +6589,9 @@
   const _excluded$2l = ["className", "component"];
   function createBox(options = {}) {
     const {
-      defaultTheme
+      defaultTheme,
+      defaultClassName = 'MuiBox-root',
+      generateClassName
     } = options;
     const BoxRoot = styled$2('div')(styleFunctionSx);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
@@ -6546,7 +6607,7 @@
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
-        className: clsx(className, 'MuiBox-root'),
+        className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
         theme: theme
       }, other));
     });
@@ -6572,7 +6633,7 @@
       /**
        * @ignore
        */
-      sx: propTypes.object
+      sx: propTypes.oneOfType([propTypes.object, propTypes.array])
     } ;
     return Box;
   }
@@ -14850,7 +14911,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
 
     return {
-      main: '#ED6C02',
+      main: '#ed6c02',
       // closest to orange[800] that pass 3:1.
       light: orange$1[500],
       dark: orange$1[900]
@@ -15705,7 +15766,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Provides a human-readable title for the element that contains it.
@@ -17129,7 +17190,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -17301,7 +17362,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -17578,7 +17639,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -17690,7 +17751,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AccordionActions$1 = AccordionActions;
 
@@ -17766,7 +17827,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AccordionDetails$1 = AccordionDetails;
 
@@ -18705,7 +18766,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -18923,7 +18984,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AccordionSummary$1 = AccordionSummary;
 
@@ -19139,7 +19200,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var IconButton$1 = IconButton;
 
@@ -19413,7 +19474,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -19601,7 +19662,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Applies the theme typography styles.
@@ -19713,7 +19774,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AlertTitle$1 = AlertTitle;
 
@@ -19881,7 +19942,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var AppBar$1 = AppBar;
 
@@ -20030,7 +20091,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListSubheader$1 = ListSubheader;
 
@@ -20544,7 +20605,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -20742,6 +20803,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         padding: '2.5px 4px'
       }
     },
+    [`& .${inputBaseClasses$1.hiddenLabel}`]: {
+      paddingTop: 8
+    },
     [`& .${autocompleteClasses$1.input}`]: _extends({
       flexGrow: 1,
       textOverflow: 'ellipsis',
@@ -21608,7 +21672,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the autocomplete.
@@ -21882,7 +21946,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The shape of the avatar.
@@ -22054,7 +22118,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -22416,7 +22480,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -22718,7 +22782,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -22856,7 +22920,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the currently selected `BottomNavigationAction`.
@@ -23036,7 +23100,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -23051,7 +23115,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
    */
 
   const Box = createBox({
-    defaultTheme
+    defaultTheme,
+    defaultClassName: 'MuiBox-root',
+    generateClassName: ClassNameGenerator$1.generate
   });
   var Box$1 = Box;
 
@@ -23343,7 +23409,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Breadcrumbs$1 = Breadcrumbs;
 
@@ -23353,7 +23419,18 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
   var buttonClasses$1 = buttonClasses;
 
-  const _excluded$1G = ["children", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+  /**
+   * @ignore - internal component.
+   */
+  const ButtonGroupContext = /*#__PURE__*/React__namespace.createContext({});
+
+  {
+    ButtonGroupContext.displayName = 'ButtonGroupContext';
+  }
+
+  var ButtonGroupContext$1 = ButtonGroupContext;
+
+  const _excluded$1G = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
   const useUtilityClasses$1p = ownerState => {
     const {
@@ -23558,24 +23635,47 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       props: inProps,
       name: 'MuiButton'
     });
+    const {
+      className: classNameContext,
+      color: colorContext,
+      disabled: disabledContext,
+      disableElevation: disableElevationContext,
+      disableFocusRipple: disableFocusRippleContext,
+      disableRipple: disableRippleContext,
+      fullWidth: fullWidthContext,
+      size: sizeContext,
+      variant: variantContext
+    } = React__namespace.useContext(ButtonGroupContext$1);
 
     const {
       children,
-      color = 'primary',
+      className,
+      color: colorProp,
       component = 'button',
-      disabled = false,
-      disableElevation = false,
-      disableFocusRipple = false,
+      disabled: disabledProp,
+      disableElevation: disableElevationProp,
+      disableFocusRipple: disableFocusRippleProp,
+      disableRipple: disableRippleProp,
       endIcon: endIconProp,
       focusVisibleClassName,
-      fullWidth = false,
-      size = 'medium',
+      fullWidth: fullWidthProp,
+      size: sizeProp,
       startIcon: startIconProp,
       type,
-      variant = 'text'
+      variant: variantProp
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
+    const color = colorProp || colorContext || 'primary'; // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
+
+    const disabled = disabledProp || disabledContext || false;
+    const disableElevation = disableElevationProp || disableElevationContext || false;
+    const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
+    const fullWidth = fullWidthProp || fullWidthContext || false;
+    const size = sizeProp || sizeContext || 'medium';
+    const variant = variantProp || variantContext || 'text';
+    const disableRipple = disableRippleProp || disableRippleContext || false;
+
     const ownerState = _extends({}, props, {
       color,
       component,
@@ -23604,8 +23704,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     return /*#__PURE__*/jsxRuntime_2(ButtonRoot, _extends({
       ownerState: ownerState,
+      className: clsx(className, classNameContext),
       component: component,
       disabled: disabled,
+      disableRipple: disableRipple,
       focusRipple: !disableFocusRipple,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ref: ref,
@@ -23633,6 +23735,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     classes: propTypes.object,
 
+    /**
+     * @ignore
+     */
+    className: propTypes.string,
+
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'primary'
@@ -23713,7 +23820,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * @ignore
@@ -23832,10 +23939,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         }
       }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
         borderColor: theme.palette[ownerState.color].dark
+      }, {
+        '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+          borderRightColor: 'currentColor'
+        }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+          borderBottomColor: 'currentColor'
+        })
       }),
-      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-        borderColor: theme.palette[ownerState.color].main
-      }, ownerState.variant === 'contained' && {
+      '&:hover': _extends({}, ownerState.variant === 'contained' && {
         boxShadow: 'none'
       })
     }, ownerState.variant === 'contained' && {
@@ -23878,6 +23989,17 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const classes = useUtilityClasses$1o(ownerState);
+    const context = React__namespace.useMemo(() => ({
+      className: classes.grouped,
+      color,
+      disabled,
+      disableElevation,
+      disableFocusRipple,
+      disableRipple,
+      fullWidth,
+      size,
+      variant
+    }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
     return /*#__PURE__*/jsxRuntime_1(ButtonGroupRoot, _extends({
       as: component,
       role: "group",
@@ -23885,28 +24007,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       ref: ref,
       ownerState: ownerState
     }, other, {
-      children: React__namespace.Children.map(children, child => {
-        if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
-          return null;
-        }
-
-        {
-          if (reactIs_2(child)) {
-            console.error(["MUI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-          }
-        }
-
-        return /*#__PURE__*/React__namespace.cloneElement(child, {
-          className: clsx(classes.grouped, child.props.className),
-          color: child.props.color || color,
-          disabled: child.props.disabled || disabled,
-          disableElevation: child.props.disableElevation || disableElevation,
-          disableFocusRipple,
-          disableRipple,
-          fullWidth,
-          size: child.props.size || size,
-          variant: child.props.variant || variant
-        });
+      children: /*#__PURE__*/jsxRuntime_1(ButtonGroupContext$1.Provider, {
+        value: context,
+        children: children
       })
     }));
   });
@@ -23995,7 +24098,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -24096,7 +24199,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Card$1 = Card;
 
@@ -24218,7 +24321,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardActionArea$1 = CardActionArea;
 
@@ -24316,7 +24419,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardActions$1 = CardActions;
 
@@ -24406,7 +24509,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardContent$1 = CardContent;
 
@@ -24609,7 +24712,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The content of the component.
@@ -24769,7 +24872,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var CardMedia$1 = CardMedia;
 
@@ -25315,7 +25418,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -25567,7 +25670,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The thickness of the circle.
@@ -25935,7 +26038,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Container$1 = Container;
 
@@ -25961,8 +26064,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }), propTypes.string, propTypes.bool])
   } ;
 
-  var _GlobalStyles;
-  const html = {
+  const html = (theme, enableColorScheme) => _extends({
     WebkitFontSmoothing: 'antialiased',
     // Antialiasing.
     MozOsxFontSmoothing: 'grayscale',
@@ -25972,7 +26074,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     boxSizing: 'border-box',
     // Fix font resize problem in iOS
     WebkitTextSizeAdjust: '100%'
-  };
+  }, enableColorScheme && {
+    colorScheme: theme.palette.mode
+  });
   const body = theme => _extends({
     color: theme.palette.text.primary
   }, theme.typography.body1, {
@@ -25982,11 +26086,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       backgroundColor: theme.palette.common.white
     }
   });
-  const styles$3 = theme => {
+  const styles$3 = (theme, enableColorScheme = false) => {
     var _theme$components, _theme$components$Mui;
 
     let defaultStyles = {
-      html,
+      html: html(theme, enableColorScheme),
       '*, *::before, *::after': {
         boxSizing: 'inherit'
       },
@@ -26021,12 +26125,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       name: 'MuiCssBaseline'
     });
     const {
-      children
+      children,
+      enableColorScheme = false
     } = props;
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
-      children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/jsxRuntime_1(GlobalStyles, {
-        styles: styles$3
-      })), children]
+      children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles, {
+        styles: theme => styles$3(theme, enableColorScheme)
+      }), children]
     });
   }
 
@@ -26041,7 +26146,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * You can wrap a node.
      */
-    children: propTypes.node
+    children: propTypes.node,
+
+    /**
+     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+     * For browser support, check out https://caniuse.com/?search=color-scheme
+     * @default false
+     */
+    enableColorScheme: propTypes.bool
   } ;
 
   // track, thumb and active are derieved from macOS 10.15.7
@@ -26341,7 +26454,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Modal$1 = Modal;
 
@@ -26730,7 +26843,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -26854,7 +26967,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogActions$1 = DialogActions;
 
@@ -26965,7 +27078,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogContent$1 = DialogContent;
 
@@ -27034,7 +27147,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogContentText$1 = DialogContentText;
 
@@ -27115,7 +27228,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var DialogTitle$1 = DialogTitle;
 
@@ -27363,7 +27476,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The text alignment.
@@ -28042,7 +28155,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The duration for the transition, in milliseconds.
@@ -28297,7 +28410,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -28517,8 +28630,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       paddingTop: 0
     }, ownerState.type === 'search' && {
       // Improve type search style.
-      MozAppearance: 'textfield',
-      WebkitAppearance: 'textfield'
+      MozAppearance: 'textfield'
     });
   });
 
@@ -28821,7 +28933,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
             ownerState: _extends({}, ownerState, inputProps.ownerState)
           }, {
             ref: handleInputRef,
-            className: clsx(classes.input, inputProps.className, inputPropsProp.className),
+            className: clsx(classes.input, inputProps.className),
             onBlur: handleBlur,
             onChange: handleChange,
             onFocus: handleFocus
@@ -29047,7 +29159,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -29441,7 +29553,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -29765,7 +29877,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -29953,9 +30065,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     inputRef: refType$1,
 
     /**
-     * The text to be used in an enclosing label element.
+     * A text or an element to be used in an enclosing label element.
      */
-    label: propTypes.node,
+    label: propTypes.oneOfType([propTypes.element, propTypes.number, propTypes.string]).isRequired,
 
     /**
      * The position of the label.
@@ -29979,7 +30091,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component.
@@ -30086,7 +30198,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var FormGroup$1 = FormGroup;
 
@@ -30263,7 +30375,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -30444,7 +30556,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var FormLabel$1 = FormLabel;
 
@@ -30508,10 +30620,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     } else {
       const columnsBreakpointValues = resolveBreakpointValues({
         values: ownerState.columns,
-        base: theme.breakpoints.values
-      }); // Keep 7 significant numbers.
+        breakpoints: theme.breakpoints.values
+      });
+      const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
 
-      const width = `${Math.round(size / columnsBreakpointValues[breakpoint] * 10e7) / 10e5}%`;
+      const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
       let more = {};
 
       if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
@@ -30547,9 +30660,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     theme,
     ownerState
   }) {
+    const directionValues = resolveBreakpointValues({
+      values: ownerState.direction,
+      breakpoints: theme.breakpoints.values
+    });
     return handleBreakpoints({
       theme
-    }, ownerState.direction, propValue => {
+    }, directionValues, propValue => {
       const output = {
         flexDirection: propValue
       };
@@ -30563,7 +30680,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       return output;
     });
   }
-
   function generateRowGap({
     theme,
     ownerState
@@ -30575,9 +30691,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     let styles = {};
 
     if (container && rowSpacing !== 0) {
+      const rowSpacingValues = resolveBreakpointValues({
+        values: rowSpacing,
+        breakpoints: theme.breakpoints.values
+      });
       styles = handleBreakpoints({
         theme
-      }, rowSpacing, propValue => {
+      }, rowSpacingValues, propValue => {
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -30606,9 +30726,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     let styles = {};
 
     if (container && columnSpacing !== 0) {
+      const columnSpacingValues = resolveBreakpointValues({
+        values: columnSpacing,
+        breakpoints: theme.breakpoints.values
+      });
       styles = handleBreakpoints({
         theme
-      }, columnSpacing, propValue => {
+      }, columnSpacingValues, propValue => {
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -30826,18 +30950,26 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     item: propTypes.bool,
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `lg` breakpoint and wider screens if not overridden.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
      * @default false
      */
-    lg: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    lg: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `md` breakpoint and wider screens if not overridden.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `md` breakpoint and wider screens if not overridden.
      * @default false
      */
-    md: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    md: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
      * Defines the vertical space between the type `item` components.
@@ -30846,11 +30978,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     rowSpacing: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.number, propTypes.string])), propTypes.number, propTypes.object, propTypes.string]),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `sm` breakpoint and wider screens if not overridden.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
      * @default false
      */
-    sm: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    sm: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
      * Defines the space between the type `item` components.
@@ -30862,7 +30998,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Defines the `flex-wrap` style property.
@@ -30872,18 +31008,26 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     wrap: propTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for the `xl` breakpoint and wider screens.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
      * @default false
      */
-    xl: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    xl: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
-     * Defines the number of grids the component is going to use.
-     * It's applied for all the screen sizes with the lowest priority.
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for all the screen sizes with the lowest priority.
      * @default false
      */
-    xs: propTypes.oneOfType([propTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), propTypes.bool]),
+    xs: propTypes.oneOfType([propTypes.oneOf(['auto']), propTypes.number, propTypes.bool]),
 
     /**
      * If `true`, it sets `min-width: 0` on the item.
@@ -32015,7 +32159,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   Icon.muiName = 'Icon';
   var Icon$1 = Icon;
@@ -32192,7 +32336,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -32380,7 +32524,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ImageListItem$1 = ImageListItem;
 
@@ -32606,7 +32750,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Title to be displayed.
@@ -32921,7 +33065,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -33116,7 +33260,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -33329,7 +33473,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -33678,7 +33822,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the progress indicator for the determinate and buffer variants.
@@ -33911,7 +34055,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Typography`](/api/typography/) element.
@@ -34079,7 +34223,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var List$1 = List;
 
@@ -34322,7 +34466,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemButton$1 = ListItemButton;
 
@@ -34418,7 +34562,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
   var ListItemSecondaryAction$1 = ListItemSecondaryAction;
@@ -34819,7 +34963,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItem$1 = ListItem;
 
@@ -34913,7 +35057,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemAvatar$1 = ListItemAvatar;
 
@@ -35011,7 +35155,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemIcon$1 = ListItemIcon;
 
@@ -35193,7 +35337,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var ListItemText$1 = ListItemText;
 
@@ -35947,7 +36091,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * This is the point on the popover which
@@ -36250,7 +36394,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The length of the transition in `ms`, or 'auto'
@@ -36533,7 +36677,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * @default 0
@@ -36746,7 +36890,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -37091,7 +37235,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. The DOM API casts this to a string.
@@ -37128,7 +37272,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   })(({
     ownerState,
     theme
-  }) => _extends({}, ownerState.label === undefined && {
+  }) => _extends({
+    float: 'unset'
+  }, ownerState.label === undefined && {
     padding: 0,
     lineHeight: '11px',
     // sync with `height` in `legend` styles
@@ -37138,7 +37284,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     })
   }, ownerState.label !== undefined && _extends({
     display: 'block',
+    // Fix conflict with normalize.css and sanitize.css
     width: 'auto',
+    // Fix conflict with bootstrap
     padding: 0,
     height: 11,
     // sync with `lineHeight` in `legend` styles
@@ -37149,6 +37297,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       duration: 50,
       easing: theme.transitions.easing.easeOut
     }),
+    whiteSpace: 'nowrap',
     '& > span': {
       paddingLeft: 5,
       paddingRight: 5,
@@ -37534,7 +37683,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -37686,7 +37835,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
   }), 'NavigateNext');
 
-  const _excluded$K = ["className", "color", "component", "disabled", "page", "selected", "shape", "size", "type", "variant"];
+  const _excluded$K = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
 
   const overridesResolver = (props, styles) => {
     const {
@@ -37885,6 +38034,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       className,
       color = 'standard',
       component,
+      components = {
+        first: FirstPageIcon,
+        last: LastPageIcon,
+        next: NavigateNextIcon,
+        previous: NavigateBeforeIcon
+      },
       disabled = false,
       page,
       selected = false,
@@ -37908,15 +38063,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const theme = useTheme();
     const classes = useUtilityClasses$B(ownerState);
     const normalizedIcons = theme.direction === 'rtl' ? {
-      previous: NavigateNextIcon,
-      next: NavigateBeforeIcon,
-      last: FirstPageIcon,
-      first: LastPageIcon
+      previous: components.next || NavigateNextIcon,
+      next: components.previous || NavigateBeforeIcon,
+      last: components.first || FirstPageIcon,
+      first: components.last || LastPageIcon
     } : {
-      previous: NavigateBeforeIcon,
-      next: NavigateNextIcon,
-      first: FirstPageIcon,
-      last: LastPageIcon
+      previous: components.previous || NavigateBeforeIcon,
+      next: components.next || NavigateNextIcon,
+      first: components.first || FirstPageIcon,
+      last: components.last || LastPageIcon
     };
     const Icon = normalizedIcons[type];
     return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
@@ -37975,6 +38130,22 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     component: propTypes.elementType,
 
+    /**
+     * The components used for first, last, next & previous item type
+     * @default {
+     *   first: FirstPageIcon,
+     *   last: LastPageIcon,
+     *   next: NavigateNextIcon,
+     *   previous: NavigateBeforeIcon,
+     * }
+     */
+    components: propTypes.shape({
+      first: propTypes.elementType,
+      last: propTypes.elementType,
+      next: propTypes.elementType,
+      previous: propTypes.elementType
+    }),
+
     /**
      * If `true`, the component is disabled.
      * @default false
@@ -38009,7 +38180,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The type of pagination item.
@@ -38275,7 +38446,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -38377,8 +38548,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   /**
    * @ignore - internal component.
    */
-
-  const RadioGroupContext = /*#__PURE__*/React__namespace.createContext();
+  const RadioGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
 
   {
     RadioGroupContext.displayName = 'RadioGroupContext';
@@ -38606,7 +38776,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -39423,7 +39593,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The rating value.
@@ -39438,7 +39608,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const scopedCssBaselineClasses = generateUtilityClasses('MuiScopedCssBaseline', ['root']);
   var scopedCssBaselineClasses$1 = scopedCssBaselineClasses;
 
-  const _excluded$F = ["className", "component"];
+  const _excluded$F = ["className", "component", "enableColorScheme"];
 
   const useUtilityClasses$x = ownerState => {
     const {
@@ -39455,15 +39625,18 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   })(({
-    theme
-  }) => _extends({}, html, body(theme), {
-    '& *, & *::before, & *::after': {
-      boxSizing: 'inherit'
-    },
-    '& strong, & b': {
-      fontWeight: theme.typography.fontWeightBold
-    }
-  }));
+    theme,
+    ownerState
+  }) => {
+    return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
+      '& *, & *::before, & *::after': {
+        boxSizing: 'inherit'
+      },
+      '& strong, & b': {
+        fontWeight: theme.typography.fontWeightBold
+      }
+    });
+  });
   const ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
     const props = useThemeProps({
       props: inProps,
@@ -39515,7 +39688,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
      */
-    component: propTypes.elementType
+    component: propTypes.elementType,
+
+    /**
+     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+     * For browser support, check out https://caniuse.com/?search=color-scheme
+     */
+    enableColorScheme: propTypes.bool
   } ;
   var ScopedCssBaseline$1 = ScopedCssBaseline;
 
@@ -40429,7 +40609,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The `input` value. Providing an empty string will select no options.
@@ -40659,7 +40839,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The type of content that will be rendered.
@@ -41298,7 +41478,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Tab index attribute of the hidden `input` element.
@@ -41480,7 +41660,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var SnackbarContent$1 = SnackbarContent;
 
@@ -41852,7 +42032,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -42618,7 +42798,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -43243,7 +43423,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         id: id,
         transition: true
       }, interactiveWrapperListeners, popperProps, {
-        className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
+        className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
         popperOptions: popperOptions,
         children: ({
           TransitionProps: TransitionPropsInner
@@ -43308,6 +43488,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * The props used for each slot inside the Tooltip.
+     * Note that `componentsProps.popper` prop values win over `PopperProps`
+     * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
      * @default {}
      */
     componentsProps: propTypes.object,
@@ -43428,7 +43610,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Tooltip title. Zero-length titles string are never displayed.
@@ -43687,7 +43869,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.
@@ -43857,7 +44039,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   SpeedDialIcon.muiName = 'SpeedDialIcon';
   var SpeedDialIcon$1 = SpeedDialIcon;
@@ -43896,7 +44078,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       display: 'flex'
     }, handleBreakpoints({
       theme
-    }, ownerState.direction, propValue => ({
+    }, resolveBreakpointValues({
+      values: ownerState.direction,
+      breakpoints: theme.breakpoints.values
+    }), propValue => ({
       flexDirection: propValue
     })));
 
@@ -44009,7 +44194,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop, which allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Stack$1 = Stack;
 
@@ -44207,7 +44392,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Step$1 = Step;
 
@@ -44386,7 +44571,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var StepIcon$1 = StepIcon;
 
@@ -44620,7 +44805,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   StepLabel.muiName = 'StepLabel';
   var StepLabel$1 = StepLabel;
@@ -44754,7 +44939,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var StepButton$1 = StepButton;
 
@@ -44889,7 +45074,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var StepConnector$1 = StepConnector;
 
@@ -45025,7 +45210,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The component used for the transition.
@@ -45205,7 +45390,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Stepper$1 = Stepper;
 
@@ -46216,7 +46401,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value of the component. The DOM API casts this to a string.
@@ -46491,7 +46676,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
@@ -46658,7 +46843,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var Table$1 = Table;
 
@@ -46763,7 +46948,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableBody$1 = TableBody;
 
@@ -46983,7 +47168,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Specify the cell type.
@@ -47075,7 +47260,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableContainer$1 = TableContainer;
 
@@ -47168,7 +47353,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableFooter$1 = TableFooter;
 
@@ -47261,7 +47446,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableHead$1 = TableHead;
 
@@ -47381,7 +47566,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The variant to use.
@@ -47931,7 +48116,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TablePagination$1 = TablePagination;
 
@@ -48067,7 +48252,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableRow$1 = TableRow;
 
@@ -48248,7 +48433,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TableSortLabel$1 = TableSortLabel;
 
@@ -48481,7 +48666,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object])
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object])
   } ;
   var TabScrollButton$1 = TabScrollButton;
 
@@ -49275,7 +49460,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Props applied to the tab indicator element.
@@ -49722,7 +49907,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
@@ -49964,7 +50149,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The value to associate with the button when selected in a
@@ -50226,7 +50411,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx: propTypes.oneOfType([propTypes.func, propTypes.object]),
+    sx: propTypes.oneOfType([propTypes.arrayOf(propTypes.oneOfType([propTypes.func, propTypes.object])), propTypes.func, propTypes.object]),
 
     /**
      * The currently selected value within the group or an array of selected