@mui/material 5.0.6 → 5.1.0

package/legacy/ButtonGroup/ButtonGroup.js

@@ -2,7 +2,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
@@ -11,6 +10,7 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
+import ButtonGroupContext from './ButtonGroupContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var overridesResolver = function overridesResolver(props, styles) {
@@ -90,10 +90,14 @@ var ButtonGroupRoot = styled('div', {
       borderBottom: "1px solid ".concat(theme.palette.action.disabled)
     }), 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' && {
@@ -144,6 +148,19 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, re
   });
 
   var classes = useUtilityClasses(ownerState);
+  var context = React.useMemo(function () {
+    return {
+      className: classes.grouped,
+      color: color,
+      disabled: disabled,
+      disableElevation: disableElevation,
+      disableFocusRipple: disableFocusRipple,
+      disableRipple: disableRipple,
+      fullWidth: fullWidth,
+      size: size,
+      variant: variant
+    };
+  }, [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
   return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
     as: component,
     role: "group",
@@ -151,28 +168,9 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, re
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: React.Children.map(children, function (child) {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-
-      if (process.env.NODE_ENV !== 'production') {
-        if (isFragment(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.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: disableFocusRipple,
-        disableRipple: disableRipple,
-        fullWidth: fullWidth,
-        size: child.props.size || size,
-        variant: child.props.variant || variant
-      });
+    children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: children
     })
   }));
 });
@@ -261,7 +259,7 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   /**
    * 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.

package/legacy/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+var ButtonGroupContext = /*#__PURE__*/React.createContext({});
+
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
+
+export default ButtonGroupContext;

package/legacy/Card/Card.js

@@ -91,6 +91,6 @@ process.env.NODE_ENV !== "production" ? Card.propTypes
   /**
    * 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])
 } : void 0;
 export default Card;

package/legacy/CardActionArea/CardActionArea.js

@@ -124,6 +124,6 @@ process.env.NODE_ENV !== "production" ? CardActionArea.propTypes
   /**
    * 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])
 } : void 0;
 export default CardActionArea;

package/legacy/CardActions/CardActions.js

@@ -91,6 +91,6 @@ process.env.NODE_ENV !== "production" ? CardActions.propTypes
   /**
    * 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])
 } : void 0;
 export default CardActions;

package/legacy/CardContent/CardContent.js

@@ -86,6 +86,6 @@ process.env.NODE_ENV !== "production" ? CardContent.propTypes
   /**
    * 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])
 } : void 0;
 export default CardContent;

package/legacy/CardHeader/CardHeader.js

@@ -208,7 +208,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes
   /**
    * 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.

package/legacy/CardMedia/CardMedia.js

@@ -141,6 +141,6 @@ process.env.NODE_ENV !== "production" ? CardMedia.propTypes
   /**
    * 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])
 } : void 0;
 export default CardMedia;

package/legacy/Checkbox/Checkbox.js

@@ -223,7 +223,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   /**
    * 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.

package/legacy/Chip/Chip.js

@@ -469,7 +469,7 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   /**
    * 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.

package/legacy/CircularProgress/CircularProgress.js

@@ -221,7 +221,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   /**
    * 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.

package/legacy/Collapse/Collapse.js

@@ -407,7 +407,7 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes
   /**
    * 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.

package/legacy/Container/Container.js

@@ -157,6 +157,6 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
   /**
    * 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])
 } : void 0;
 export default Container;

package/legacy/CssBaseline/CssBaseline.js

@@ -1,23 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-var _GlobalStyles;
-
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
 import GlobalStyles from '../GlobalStyles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var html = {
-  WebkitFontSmoothing: 'antialiased',
-  // Antialiasing.
-  MozOsxFontSmoothing: 'grayscale',
-  // Antialiasing.
-  // Change from `box-sizing: content-box` so that `width`
-  // is not affected by `padding` or `border`.
-  boxSizing: 'border-box',
-  // Fix font resize problem in iOS
-  WebkitTextSizeAdjust: '100%'
+export var html = function html(theme, enableColorScheme) {
+  return _extends({
+    WebkitFontSmoothing: 'antialiased',
+    // Antialiasing.
+    MozOsxFontSmoothing: 'grayscale',
+    // Antialiasing.
+    // Change from `box-sizing: content-box` so that `width`
+    // is not affected by `padding` or `border`.
+    boxSizing: 'border-box',
+    // Fix font resize problem in iOS
+    WebkitTextSizeAdjust: '100%'
+  }, enableColorScheme && {
+    colorScheme: theme.palette.mode
+  });
 };
 export var body = function body(theme) {
   return _extends({
@@ -30,11 +31,13 @@ export var body = function body(theme) {
     }
   });
 };
-export var styles = function styles(theme) {
+
+var _styles = function styles(theme) {
   var _theme$components, _theme$components$Mui;
 
+  var enableColorScheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var defaultStyles = {
-    html: html,
+    html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
     },
@@ -63,16 +66,23 @@ export var styles = function styles(theme) {
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
 
+
+export { _styles as styles };
+
 function CssBaseline(inProps) {
   var props = useThemeProps({
     props: inProps,
     name: 'MuiCssBaseline'
   });
-  var children = props.children;
+  var children = props.children,
+      _props$enableColorSch = props.enableColorScheme,
+      enableColorScheme = _props$enableColorSch === void 0 ? false : _props$enableColorSch;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
-      styles: styles
-    })), children]
+    children: [/*#__PURE__*/_jsx(GlobalStyles, {
+      styles: function styles(theme) {
+        return _styles(theme, enableColorScheme);
+      }
+    }), children]
   });
 }
 
@@ -87,6 +97,14 @@ process.env.NODE_ENV !== "production" ? CssBaseline.propTypes
   /**
    * 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
 } : void 0;
 export default CssBaseline;

package/legacy/Dialog/Dialog.js

@@ -387,7 +387,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
   /**
    * 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.

package/legacy/DialogActions/DialogActions.js

@@ -93,6 +93,6 @@ process.env.NODE_ENV !== "production" ? DialogActions.propTypes
   /**
    * 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])
 } : void 0;
 export default DialogActions;

package/legacy/DialogContent/DialogContent.js

@@ -98,6 +98,6 @@ process.env.NODE_ENV !== "production" ? DialogContent.propTypes
   /**
    * 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])
 } : void 0;
 export default DialogContent;

package/legacy/DialogContentText/DialogContentText.js

@@ -69,6 +69,6 @@ process.env.NODE_ENV !== "production" ? DialogContentText.propTypes
   /**
    * 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])
 } : void 0;
 export default DialogContentText;

package/legacy/DialogTitle/DialogTitle.js

@@ -86,6 +86,6 @@ process.env.NODE_ENV !== "production" ? DialogTitle.propTypes
   /**
    * 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])
 } : void 0;
 export default DialogTitle;

package/legacy/Divider/Divider.js

@@ -251,7 +251,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes
   /**
    * 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.

package/legacy/Drawer/Drawer.js

@@ -312,7 +312,7 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * 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.

package/legacy/Fab/Fab.js

@@ -240,7 +240,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   /**
    * 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.

package/legacy/FilledInput/FilledInput.js

@@ -387,7 +387,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   /**
    * 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).

package/legacy/FormControl/FormControl.js

@@ -328,7 +328,7 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   /**
    * 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.

package/legacy/FormControlLabel/FormControlLabel.js

@@ -179,9 +179,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   inputRef: refType,
 
   /**
-   * 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.
@@ -205,7 +205,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * 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.

package/legacy/FormGroup/FormGroup.js

@@ -95,6 +95,6 @@ process.env.NODE_ENV !== "production" ? FormGroup.propTypes
   /**
    * 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])
 } : void 0;
 export default FormGroup;

package/legacy/FormHelperText/FormHelperText.js

@@ -181,7 +181,7 @@ process.env.NODE_ENV !== "production" ? FormHelperText.propTypes
   /**
    * 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.

package/legacy/FormLabel/FormLabel.js

@@ -180,6 +180,6 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   /**
    * 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])
 } : void 0;
 export default FormLabel;

package/legacy/Grid/Grid.js

@@ -1,6 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 // A grid component using the following libs as inspiration.
 //
 // For the implementation:
@@ -55,10 +56,11 @@ function generateGrid(globalStyles, theme, breakpoint, ownerState) {
   } else {
     var columnsBreakpointValues = resolveBreakpointValues({
       values: ownerState.columns,
-      base: theme.breakpoints.values
-    }); // Keep 7 significant numbers.
+      breakpoints: theme.breakpoints.values
+    });
+    var columnValue = _typeof(columnsBreakpointValues) === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
 
-    var width = "".concat(Math.round(size / columnsBreakpointValues[breakpoint] * 10e7) / 10e5, "%");
+    var width = "".concat(Math.round(size / columnValue * 10e7) / 10e5, "%");
     var more = {};
 
     if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
@@ -90,12 +92,16 @@ function generateGrid(globalStyles, theme, breakpoint, ownerState) {
   }
 }
 
-function generateDirection(_ref) {
+export function generateDirection(_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
+  var directionValues = resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  });
   return handleBreakpoints({
     theme: theme
-  }, ownerState.direction, function (propValue) {
+  }, directionValues, function (propValue) {
     var output = {
       flexDirection: propValue
     };
@@ -109,7 +115,6 @@ function generateDirection(_ref) {
     return output;
   });
 }
-
 export function generateRowGap(_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
@@ -118,9 +123,13 @@ export function generateRowGap(_ref2) {
   var styles = {};
 
   if (container && rowSpacing !== 0) {
+    var rowSpacingValues = resolveBreakpointValues({
+      values: rowSpacing,
+      breakpoints: theme.breakpoints.values
+    });
     styles = handleBreakpoints({
       theme: theme
-    }, rowSpacing, function (propValue) {
+    }, rowSpacingValues, function (propValue) {
       var themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -145,9 +154,13 @@ export function generateColumnGap(_ref4) {
   var styles = {};
 
   if (container && columnSpacing !== 0) {
+    var columnSpacingValues = resolveBreakpointValues({
+      values: columnSpacing,
+      breakpoints: theme.breakpoints.values
+    });
     styles = handleBreakpoints({
       theme: theme
-    }, columnSpacing, function (propValue) {
+    }, columnSpacingValues, function (propValue) {
       var themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -375,18 +388,26 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   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.
@@ -395,11 +416,15 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   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.
@@ -411,7 +436,7 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   /**
    * 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.
@@ -421,18 +446,26 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   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.

package/legacy/Icon/Icon.js

@@ -152,7 +152,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   /**
    * 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])
 } : void 0;
 Icon.muiName = 'Icon';
 export default Icon;