@mui/material 5.0.2 → 5.0.6

package/node/Divider/Divider.js

@@ -268,7 +268,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The text alignment.

package/node/Divider/dividerClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDividerUtilityClass = getDividerUtilityClass;
 exports.default = void 0;
+exports.getDividerUtilityClass = getDividerUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Drawer/Drawer.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isHorizontal = isHorizontal;
-exports.getAnchor = getAnchor;
 exports.default = void 0;
+exports.getAnchor = getAnchor;
+exports.isHorizontal = isHorizontal;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -343,7 +343,7 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The duration for the transition, in milliseconds.

package/node/Drawer/drawerClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDrawerUtilityClass = getDrawerUtilityClass;
 exports.default = void 0;
+exports.getDrawerUtilityClass = getDrawerUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Fab/Fab.js

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

package/node/Fab/fabClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFabUtilityClass = getFabUtilityClass;
 exports.default = void 0;
+exports.getFabUtilityClass = getFabUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Fade/Fade.js

@@ -29,7 +29,7 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -54,6 +54,7 @@ const defaultTimeout = {
 
 const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   const {
+    addEndListener,
     appear = true,
     children,
     easing,
@@ -124,6 +125,14 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }
   });
   const handleExited = normalizedTransitionCallback(onExited);
+
+  const handleAddEndListener = next => {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
     appear: appear,
     in: inProp,
@@ -134,6 +143,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
     timeout: timeout
   }, other, {
     children: (state, childProps) => {
@@ -155,6 +165,13 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: _propTypes.default.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -165,7 +182,7 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
   /**
    * A single child content element.
    */
-  children: _utils.elementAcceptingRef,
+  children: _utils.elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

package/node/FilledInput/FilledInput.js

@@ -411,7 +411,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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/node/FilledInput/filledInputClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFilledInputUtilityClass = getFilledInputUtilityClass;
 exports.default = void 0;
+exports.getFilledInputUtilityClass = getFilledInputUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/FormControl/FormControl.js

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

package/node/FormControl/formControlClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFormControlUtilityClasses = getFormControlUtilityClasses;
 exports.default = void 0;
+exports.getFormControlUtilityClasses = getFormControlUtilityClasses;
 
 var _core = require("@mui/core");
 

package/node/FormControl/index.js

@@ -15,16 +15,16 @@ Object.defineProperty(exports, "default", {
     return _FormControl.default;
   }
 });
-Object.defineProperty(exports, "useFormControl", {
+Object.defineProperty(exports, "formControlClasses", {
   enumerable: true,
   get: function () {
-    return _useFormControl.default;
+    return _formControlClasses.default;
   }
 });
-Object.defineProperty(exports, "formControlClasses", {
+Object.defineProperty(exports, "useFormControl", {
   enumerable: true,
   get: function () {
-    return _formControlClasses.default;
+    return _useFormControl.default;
   }
 });
 

package/node/FormControlLabel/FormControlLabel.js

@@ -234,7 +234,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The value of the component.

package/node/FormControlLabel/formControlLabelClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFormControlLabelUtilityClasses = getFormControlLabelUtilityClasses;
 exports.default = void 0;
+exports.getFormControlLabelUtilityClasses = getFormControlLabelUtilityClasses;
 
 var _core = require("@mui/core");
 

package/node/FormGroup/FormGroup.js

@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? FormGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = FormGroup;
 exports.default = _default;

package/node/FormGroup/formGroupClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFormGroupUtilityClass = getFormGroupUtilityClass;
 exports.default = void 0;
+exports.getFormGroupUtilityClass = getFormGroupUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/FormHelperText/FormHelperText.js

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

package/node/FormHelperText/formHelperTextClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFormHelperTextUtilityClasses = getFormHelperTextUtilityClasses;
 exports.default = void 0;
+exports.getFormHelperTextUtilityClasses = getFormHelperTextUtilityClasses;
 
 var _core = require("@mui/core");
 

package/node/FormLabel/FormLabel.js

@@ -200,7 +200,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = FormLabel;
 exports.default = _default;

package/node/FormLabel/formLabelClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFormLabelUtilityClasses = getFormLabelUtilityClasses;
 exports.default = void 0;
+exports.getFormLabelUtilityClasses = getFormLabelUtilityClasses;
 
 var _core = require("@mui/core");
 

package/node/Grid/Grid.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateRowGap = generateRowGap;
-exports.generateColumnGap = generateColumnGap;
 exports.default = void 0;
+exports.generateColumnGap = generateColumnGap;
+exports.generateRowGap = generateRowGap;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -274,7 +274,7 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   const props = (0, _system.unstable_extendSxProp)(themeProps);
   const {
     className,
-    columns: columnsProp = 12,
+    columns: columnsProp,
     columnSpacing: columnSpacingProp,
     component = 'div',
     container = false,
@@ -293,7 +293,10 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
-  const columns = React.useContext(_GridContext.default) || columnsProp;
+  const columnsContext = React.useContext(_GridContext.default); // setting prop before context to accomodate nesting
+  // colums set with default breakpoint unit of 12
+
+  const columns = columnsProp || columnsContext || 12;
   const ownerState = (0, _extends2.default)({}, props, {
     columns,
     container,
@@ -422,7 +425,7 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Defines the `flex-wrap` style property.

package/node/Grid/gridClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGridUtilityClass = getGridUtilityClass;
 exports.default = void 0;
+exports.getGridUtilityClass = getGridUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Grow/Grow.js

@@ -27,7 +27,7 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -55,6 +55,7 @@ const styles = {
 
 const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const {
+    addEndListener,
     appear = true,
     children,
     easing,
@@ -167,10 +168,15 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   });
   const handleExited = normalizedTransitionCallback(onExited);
 
-  const addEndListener = next => {
+  const handleAddEndListener = next => {
     if (timeout === 'auto') {
       timer.current = setTimeout(next, autoTimeout.current || 0);
     }
+
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(nodeRef.current, next);
+    }
   };
 
   React.useEffect(() => {
@@ -188,7 +194,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
-    addEndListener: addEndListener,
+    addEndListener: handleAddEndListener,
     timeout: timeout === 'auto' ? null : timeout
   }, other, {
     children: (state, childProps) => {
@@ -211,6 +217,13 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: _propTypes.default.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -221,7 +234,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes
   /**
    * A single child content element.
    */
-  children: _utils.elementAcceptingRef,
+  children: _utils.elementAcceptingRef.isRequired,
 
   /**
    * The transition timing function.

package/node/Hidden/hiddenCssClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getHiddenCssUtilityClass = getHiddenCssUtilityClass;
 exports.default = void 0;
+exports.getHiddenCssUtilityClass = getHiddenCssUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Hidden/withWidth.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.isWidthDown = exports.isWidthUp = void 0;
+exports.isWidthUp = exports.isWidthDown = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/node/Icon/Icon.js

@@ -175,7 +175,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 Icon.muiName = 'Icon';
 var _default = Icon;

package/node/Icon/iconClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIconUtilityClass = getIconUtilityClass;
 exports.default = void 0;
+exports.getIconUtilityClass = getIconUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/IconButton/IconButton.js

@@ -236,7 +236,7 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = IconButton;
 exports.default = _default;

package/node/IconButton/iconButtonClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIconButtonUtilityClass = getIconButtonUtilityClass;
 exports.default = void 0;
+exports.getIconButtonUtilityClass = getIconButtonUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/ImageList/ImageList.js

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

package/node/ImageList/imageListClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getImageListUtilityClass = getImageListUtilityClass;
 exports.default = void 0;
+exports.getImageListUtilityClass = getImageListUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/ImageListItem/ImageListItem.js

@@ -209,7 +209,7 @@ process.env.NODE_ENV !== "production" ? ImageListItem.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = ImageListItem;
 exports.default = _default;

package/node/ImageListItem/imageListItemClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getImageListItemUtilityClass = getImageListItemUtilityClass;
 exports.default = void 0;
+exports.getImageListItemUtilityClass = getImageListItemUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/ImageListItemBar/ImageListItemBar.js

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

package/node/ImageListItemBar/imageListItemBarClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getImageListItemBarUtilityClass = getImageListItemBarUtilityClass;
 exports.default = void 0;
+exports.getImageListItemBarUtilityClass = getImageListItemBarUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Input/Input.js

@@ -339,7 +339,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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/node/Input/inputClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getInputUtilityClass = getInputUtilityClass;
 exports.default = void 0;
+exports.getInputUtilityClass = getInputUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/InputAdornment/InputAdornment.js

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

package/node/InputAdornment/inputAdornmentClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getInputAdornmentUtilityClass = getInputAdornmentUtilityClass;
 exports.default = void 0;
+exports.getInputAdornmentUtilityClass = getInputAdornmentUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/InputBase/InputBase.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.InputBaseComponent = exports.InputBaseRoot = exports.inputOverridesResolver = exports.rootOverridesResolver = void 0;
+exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseComponent = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -31,16 +31,12 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
 
-var _TextareaAutosize = _interopRequireDefault(require("../TextareaAutosize"));
-
 var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
 
 var _utils2 = require("./utils");
@@ -285,7 +281,6 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     value: valueProp
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _useTheme.default)();
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -453,7 +448,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       }, inputProps);
     }
 
-    InputComponent = _TextareaAutosize.default;
+    InputComponent = _core.TextareaAutosize;
   }
 
   const handleAutoFill = event => {
@@ -489,8 +484,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   inputProps = (0, _extends2.default)({}, inputProps, componentsProps.input);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, !(0, _core.isHostComponent)(Root) && {
-      ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState),
-      theme
+      ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState)
     }, {
       ref: ref,
       onClick: handleClick
@@ -519,8 +513,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           type: type
         }, inputProps, !(0, _core.isHostComponent)(Input) && {
           as: InputComponent,
-          ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState),
-          theme
+          ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState)
         }, {
           ref: handleInputRef,
           className: (0, _clsx.default)(classes.input, inputProps.className, inputPropsProp.className),
@@ -749,7 +742,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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).