@mui/material 5.0.3 → 5.1.0

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.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.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

@@ -1,4 +1,5 @@
 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 * as React from 'react';
 import PropTypes from 'prop-types';
@@ -7,6 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/core';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getDialogContentUtilityClass } from './dialogContentClasses';
+import dialogTitleClasses from '../DialogTitle/dialogTitleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -38,11 +40,9 @@ var DialogContentRoot = styled('div', {
     padding: '16px 24px',
     borderTop: "1px solid ".concat(theme.palette.divider),
     borderBottom: "1px solid ".concat(theme.palette.divider)
-  } : {
-    '.MuiDialogTitle-root + &': {
-      paddingTop: 0
-    }
-  });
+  } : _defineProperty({}, ".".concat(dialogTitleClasses.root, " + &"), {
+    paddingTop: 0
+  }));
 });
 var DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inProps, ref) {
   var props = useThemeProps({
@@ -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.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.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.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.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.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.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/Fade/Fade.js

@@ -159,7 +159,7 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
   /**
    * A single child content element.
    */
-  children: elementAcceptingRef,
+  children: elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

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.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.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.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.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.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.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') {
@@ -244,8 +257,7 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   var props = extendSxProp(themeProps);
 
   var className = props.className,
-      _props$columns = props.columns,
-      columnsProp = _props$columns === void 0 ? 12 : _props$columns,
+      columnsProp = props.columns,
       columnSpacingProp = props.columnSpacing,
       _props$component = props.component,
       component = _props$component === void 0 ? 'div' : _props$component,
@@ -276,7 +288,10 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
 
   var rowSpacing = rowSpacingProp || spacing;
   var columnSpacing = columnSpacingProp || spacing;
-  var columns = React.useContext(GridContext) || columnsProp;
+  var columnsContext = React.useContext(GridContext); // setting prop before context to accomodate nesting
+  // colums set with default breakpoint unit of 12
+
+  var columns = columnsProp || columnsContext || 12;
 
   var ownerState = _extends({}, props, {
     columns: columns,
@@ -373,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.
@@ -393,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.
@@ -409,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.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Defines the `flex-wrap` style property.
@@ -419,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/Grow/Grow.js

@@ -213,7 +213,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes
   /**
    * A single child content element.
    */
-  children: elementAcceptingRef,
+  children: elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

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.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/legacy/IconButton/IconButton.js

@@ -213,6 +213,6 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default IconButton;

package/legacy/ImageList/ImageList.js

@@ -162,7 +162,7 @@ process.env.NODE_ENV !== "production" ? ImageList.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/ImageListItem/ImageListItem.js

@@ -179,6 +179,6 @@ process.env.NODE_ENV !== "production" ? ImageListItem.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default ImageListItem;

package/legacy/ImageListItemBar/ImageListItemBar.js

@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? ImageListItemBar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Title to be displayed.

package/legacy/Input/Input.js

@@ -314,7 +314,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: 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/InputAdornment/InputAdornment.js

@@ -181,7 +181,7 @@ process.env.NODE_ENV !== "production" ? InputAdornment.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/InputBase/InputBase.js

@@ -6,17 +6,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType, elementTypeAcceptingRef } from '@mui/utils';
-import { unstable_composeClasses as composeClasses, isHostComponent } from '@mui/core';
+import { unstable_composeClasses as composeClasses, isHostComponent, TextareaAutosize } from '@mui/core';
 import formControlState from '../FormControl/formControlState';
 import FormControlContext from '../FormControl/FormControlContext';
 import useFormControl from '../FormControl/useFormControl';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import useTheme from '../styles/useTheme';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import TextareaAutosize from '../TextareaAutosize';
 import GlobalStyles from '../GlobalStyles';
 import { isFilled } from './utils';
 import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses';
@@ -173,8 +171,7 @@ export var InputBaseComponent = styled('input', {
     paddingTop: 0
   }, ownerState.type === 'search' && {
     // Improve type search style.
-    MozAppearance: 'textfield',
-    WebkitAppearance: 'textfield'
+    MozAppearance: 'textfield'
   });
 });
 
@@ -249,7 +246,6 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       valueProp = props.value,
       other = _objectWithoutProperties(props, ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"]);
 
-  var theme = useTheme();
   var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
 
   var _React$useRef = React.useRef(value != null),
@@ -464,8 +460,7 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   inputProps = _extends({}, inputProps, componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
-      ownerState: _extends({}, ownerState, rootProps.ownerState),
-      theme: theme
+      ownerState: _extends({}, ownerState, rootProps.ownerState)
     }, {
       ref: ref,
       onClick: handleClick
@@ -494,11 +489,10 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
           type: type
         }, inputProps, !isHostComponent(Input) && {
           as: InputComponent,
-          ownerState: _extends({}, ownerState, inputProps.ownerState),
-          theme: theme
+          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
@@ -724,7 +718,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: 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/InputLabel/InputLabel.js

@@ -204,7 +204,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.