@mui/material 5.0.6 → 5.1.0

package/CircularProgress/CircularProgress.js

@@ -248,7 +248,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/Collapse/Collapse.js

@@ -400,7 +400,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/Container/Container.js

@@ -161,6 +161,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/CssBaseline/CssBaseline.d.ts

@@ -6,6 +6,13 @@ export interface CssBaselineProps extends StyledComponentProps<never> {
    * You can wrap a node.
    */
   children?: React.ReactNode;
+  /**
+   * 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?: boolean;
 }
 
 /**

package/CssBaseline/CssBaseline.js

@@ -1,14 +1,11 @@
 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 const html = {
+export const html = (theme, enableColorScheme) => _extends({
   WebkitFontSmoothing: 'antialiased',
   // Antialiasing.
   MozOsxFontSmoothing: 'grayscale',
@@ -18,7 +15,9 @@ export const html = {
   boxSizing: 'border-box',
   // Fix font resize problem in iOS
   WebkitTextSizeAdjust: '100%'
-};
+}, enableColorScheme && {
+  colorScheme: theme.palette.mode
+});
 export const body = theme => _extends({
   color: theme.palette.text.primary
 }, theme.typography.body1, {
@@ -28,11 +27,11 @@ export const body = theme => _extends({
     backgroundColor: theme.palette.common.white
   }
 });
-export const styles = theme => {
+export const styles = (theme, enableColorScheme = false) => {
   var _theme$components, _theme$components$Mui;
 
   let defaultStyles = {
-    html,
+    html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
     },
@@ -67,12 +66,13 @@ function CssBaseline(inProps) {
     name: 'MuiCssBaseline'
   });
   const {
-    children
+    children,
+    enableColorScheme = false
   } = props;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
-      styles: styles
-    })), children]
+    children: [/*#__PURE__*/_jsx(GlobalStyles, {
+      styles: theme => styles(theme, enableColorScheme)
+    }), children]
   });
 }
 
@@ -87,6 +87,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/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/DialogActions/DialogActions.js

@@ -98,6 +98,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/DialogContent/DialogContent.js

@@ -104,6 +104,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/DialogContentText/DialogContentText.js

@@ -67,6 +67,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/DialogTitle/DialogTitle.js

@@ -87,6 +87,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/Divider/Divider.js

@@ -247,7 +247,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/Drawer/Drawer.js

@@ -313,7 +313,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/Fab/Fab.js

@@ -238,7 +238,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/FilledInput/FilledInput.js

@@ -389,7 +389,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/FormControl/FormControl.js

@@ -314,7 +314,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/FormControlLabel/FormControlLabel.d.ts

@@ -43,9 +43,9 @@ export interface FormControlLabelProps
    */
   inputRef?: React.Ref<any>;
   /**
-   * The text to be used in an enclosing label element.
+   * A text or an element to be used in an enclosing label element.
    */
-  label: React.ReactNode;
+  label: string | number | React.ReactElement;
   /**
    * The position of the label.
    * @default 'end'

package/FormControlLabel/FormControlLabel.js

@@ -185,9 +185,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.
@@ -211,7 +211,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/FormGroup/FormGroup.js

@@ -100,6 +100,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/FormHelperText/FormHelperText.js

@@ -178,7 +178,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/FormLabel/FormLabel.js

@@ -177,6 +177,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/Grid/Grid.d.ts

@@ -10,7 +10,7 @@ export type GridSpacing = number | string;
 
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
-export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridSize = 'auto' | number;
 
 export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
@@ -52,14 +52,22 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        */
       item?: boolean;
       /**
-       * 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?: boolean | GridSize;
       /**
-       * 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?: boolean | GridSize;
@@ -69,8 +77,12 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        */
       rowSpacing?: ResponsiveStyleValue<GridSpacing>;
       /**
-       * 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?: boolean | GridSize;
@@ -91,14 +103,22 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        */
       wrap?: GridWrap;
       /**
-       * 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?: boolean | GridSize;
       /**
-       * 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?: boolean | GridSize;

package/Grid/Grid.js

@@ -55,10 +55,11 @@ function generateGrid(globalStyles, theme, breakpoint, ownerState) {
   } 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) {
@@ -90,13 +91,17 @@ function generateGrid(globalStyles, theme, breakpoint, ownerState) {
   }
 }
 
-function generateDirection({
+export function generateDirection({
   theme,
   ownerState
 }) {
+  const directionValues = resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  });
   return handleBreakpoints({
     theme
-  }, ownerState.direction, propValue => {
+  }, directionValues, propValue => {
     const output = {
       flexDirection: propValue
     };
@@ -110,7 +115,6 @@ function generateDirection({
     return output;
   });
 }
-
 export function generateRowGap({
   theme,
   ownerState
@@ -122,9 +126,13 @@ export function generateRowGap({
   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') {
@@ -153,9 +161,13 @@ export function generateColumnGap({
   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') {
@@ -373,18 +385,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.
@@ -393,11 +413,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.
@@ -409,7 +433,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.
@@ -419,18 +443,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/Icon/Icon.js

@@ -154,7 +154,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;

package/IconButton/IconButton.js

@@ -212,6 +212,6 @@ process.env.NODE_ENV !== "production" ? IconButton.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 IconButton;

package/ImageList/ImageList.js

@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? ImageList.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/ImageListItem/ImageListItem.js

@@ -184,6 +184,6 @@ process.env.NODE_ENV !== "production" ? ImageListItem.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 ImageListItem;

package/ImageListItemBar/ImageListItemBar.js

@@ -226,7 +226,7 @@ process.env.NODE_ENV !== "production" ? ImageListItemBar.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]),
 
   /**
    * Title to be displayed.

package/Input/Input.js

@@ -316,7 +316,7 @@ process.env.NODE_ENV !== "production" ? Input.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/InputAdornment/InputAdornment.js

@@ -186,7 +186,7 @@ process.env.NODE_ENV !== "production" ? InputAdornment.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/InputBase/InputBase.js

@@ -180,8 +180,7 @@ export const InputBaseComponent = styled('input', {
     paddingTop: 0
   }, ownerState.type === 'search' && {
     // Improve type search style.
-    MozAppearance: 'textfield',
-    WebkitAppearance: 'textfield'
+    MozAppearance: 'textfield'
   });
 });
 
@@ -484,7 +483,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           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
@@ -710,7 +709,7 @@ process.env.NODE_ENV !== "production" ? InputBase.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/InputLabel/InputLabel.js

@@ -206,7 +206,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.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.