@mui/material 5.8.7 → 5.9.2

package/legacy/Stack/Stack.js

@@ -47,7 +47,8 @@ export var style = function style(_ref) {
       theme = _ref.theme;
 
   var styles = _extends({
-    display: 'flex'
+    display: 'flex',
+    flexDirection: 'column'
   }, handleBreakpoints({
     theme: theme
   }, resolveBreakpointValues({
@@ -77,6 +78,17 @@ export var style = function style(_ref) {
       base: base
     });
 
+    if (_typeof(directionValues) === 'object') {
+      Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
+        var directionValue = directionValues[breakpoint];
+
+        if (!directionValue) {
+          var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+
     var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
       return {
         '& > :not(style) + :not(style)': _defineProperty({

package/legacy/Tabs/Tabs.js

@@ -789,7 +789,9 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
    * Determines the color of the indicator.
    * @default 'primary'
    */
-  indicatorColor: PropTypes.oneOf(['primary', 'secondary']),
+  indicatorColor: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
    * Callback fired when the value changes.

package/legacy/Unstable_Grid2/Grid2.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { createGrid } from '@mui/system/Unstable_Grid';
+import { styled, useThemeProps as _useThemeProps } from '../styles';
+var Grid2 = createGrid({
+  createStyledComponent: styled('div', {
+    name: 'MuiGrid2',
+    overridesResolver: function overridesResolver(props, styles) {
+      return styles.root;
+    }
+  }),
+  componentName: 'MuiGrid2',
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps: function useThemeProps(inProps) {
+    return _useThemeProps({
+      props: inProps,
+      name: 'MuiGrid2'
+    });
+  }
+});
+process.env.NODE_ENV !== "production" ? Grid2.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export default Grid2;

package/legacy/Unstable_Grid2/Grid2Props.js

@@ -0,0 +1 @@
+export {};

package/legacy/Unstable_Grid2/grid2Classes.js

@@ -0,0 +1,27 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getGrid2UtilityClass(slot) {
+  return generateUtilityClass('MuiGrid2', slot);
+}
+var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+var DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+var WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var grid2Classes = generateUtilityClasses('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth'].concat(_toConsumableArray(SPACINGS.map(function (spacing) {
+  return "spacing-xs-".concat(spacing);
+})), _toConsumableArray(DIRECTIONS.map(function (direction) {
+  return "direction-xs-".concat(direction);
+})), _toConsumableArray(WRAPS.map(function (wrap) {
+  return "wrap-xs-".concat(wrap);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-xs-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-sm-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-md-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-lg-".concat(size);
+})), _toConsumableArray(GRID_SIZES.map(function (size) {
+  return "grid-xl-".concat(size);
+}))));
+export default grid2Classes;

package/legacy/Unstable_Grid2/index.js

@@ -0,0 +1,4 @@
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.7
+/** @license MUI v5.9.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -106,6 +106,8 @@ export { default as FormLabel } from './FormLabel';
 export * from './FormLabel';
 export { default as Grid } from './Grid';
 export * from './Grid';
+export { default as Unstable_Grid2 } from './Unstable_Grid2';
+export * from './Unstable_Grid2';
 export { default as Grow } from './Grow';
 export * from './Grow';
 export { default as Hidden } from './Hidden';

package/modern/Autocomplete/Autocomplete.js

@@ -451,7 +451,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
 
   if (multiple && value.length > 0) {
     const getCustomizedTagProps = params => _extends({
-      className: clsx(classes.tag),
+      className: classes.tag,
       disabled
     }, getTagProps(params));
 
@@ -552,7 +552,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           })
         }),
         inputProps: _extends({
-          className: clsx(classes.input),
+          className: classes.input,
           disabled,
           readOnly
         }, getInputProps())

package/modern/ButtonBase/TouchRipple.js

@@ -220,7 +220,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       const {
         clientX,
         clientY
-      } = event.touches ? event.touches[0] : event;
+      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
       rippleX = Math.round(clientX - rect.left);
       rippleY = Math.round(clientY - rect.top);
     }

package/modern/Dialog/Dialog.js

@@ -291,7 +291,8 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead.
+   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',

package/modern/FormHelperText/FormHelperText.js

@@ -181,6 +181,8 @@ process.env.NODE_ENV !== "production" ? FormHelperText.propTypes
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+  variant: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
 } : void 0;
 export default FormHelperText;

package/modern/ImageListItem/ImageListItem.js

@@ -40,9 +40,8 @@ const ImageListItemRoot = styled('li', {
 })(({
   ownerState
 }) => _extends({
-  display: 'inline-block',
-  position: 'relative',
-  lineHeight: 0
+  display: 'block',
+  position: 'relative'
 }, ownerState.variant === 'standard' && {
   // For titlebar under list item
   display: 'flex',
@@ -57,7 +56,8 @@ const ImageListItemRoot = styled('li', {
   [`& .${imageListItemClasses.img}`]: _extends({
     objectFit: 'cover',
     width: '100%',
-    height: '100%'
+    height: '100%',
+    display: 'block'
   }, ownerState.variant === 'standard' && {
     height: 'auto',
     flexGrow: 1

package/modern/Modal/Modal.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isHostComponent } from '@mui/base';
-import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
+import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
+import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
@@ -113,11 +113,11 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: _extends({}, componentsProps.root, !isHostComponent(Root) && {
+      root: () => _extends({}, resolveComponentProps(componentsProps.root, ownerState), !isHostComponent(Root) && {
         as: component,
         theme
       }),
-      backdrop: _extends({}, BackdropProps, componentsProps.backdrop)
+      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(componentsProps.backdrop, ownerState))
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
@@ -138,7 +138,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead.
+   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -194,8 +195,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    backdrop: PropTypes.object,
-    root: PropTypes.object
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
 
   /**

package/modern/Popper/Popper.js

@@ -61,6 +61,30 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.node, PropTypes.func]),
 
+  /**
+   * @ignore
+   */
+  component: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .elementType,
+
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Root: PropTypes.elementType
+  }),
+
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.

package/modern/ScopedCssBaseline/ScopedCssBaseline.js

@@ -96,6 +96,11 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    */
-  enableColorScheme: PropTypes.bool
+  enableColorScheme: PropTypes.bool,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default ScopedCssBaseline;

package/modern/Slider/Slider.js

@@ -284,7 +284,6 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
   backgroundColor: (theme.vars || theme).palette.grey[600],
@@ -296,6 +295,7 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   padding: '0.25rem 0.75rem'
 }, ownerState.orientation === 'horizontal' && {
   top: '-10px',
+  transformOrigin: 'bottom center',
   '&:before': {
     position: 'absolute',
     content: '""',
@@ -308,7 +308,8 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   }
 }, ownerState.orientation === 'vertical' && {
   right: '30px',
-  top: '25px',
+  top: '24px',
+  transformOrigin: 'right center',
   '&:before': {
     position: 'absolute',
     content: '""',

package/modern/Stack/Stack.js

@@ -46,7 +46,8 @@ export const style = ({
   theme
 }) => {
   let styles = _extends({
-    display: 'flex'
+    display: 'flex',
+    flexDirection: 'column'
   }, handleBreakpoints({
     theme
   }, resolveBreakpointValues({
@@ -74,6 +75,17 @@ export const style = ({
       base
     });
 
+    if (typeof directionValues === 'object') {
+      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+        const directionValue = directionValues[breakpoint];
+
+        if (!directionValue) {
+          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+
     const styleFromPropValue = (propValue, breakpoint) => {
       return {
         '& > :not(style) + :not(style)': {

package/modern/Tabs/Tabs.js

@@ -775,7 +775,9 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
    * Determines the color of the indicator.
    * @default 'primary'
    */
-  indicatorColor: PropTypes.oneOf(['primary', 'secondary']),
+  indicatorColor: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
 
   /**
    * Callback fired when the value changes.

package/modern/Unstable_Grid2/Grid2.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { createGrid } from '@mui/system/Unstable_Grid';
+import { styled, useThemeProps } from '../styles';
+const Grid2 = createGrid({
+  createStyledComponent: styled('div', {
+    name: 'MuiGrid2',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  componentName: 'MuiGrid2',
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps: inProps => useThemeProps({
+    props: inProps,
+    name: 'MuiGrid2'
+  })
+});
+process.env.NODE_ENV !== "production" ? Grid2.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export default Grid2;

package/modern/Unstable_Grid2/Grid2Props.js

@@ -0,0 +1 @@
+export {};

package/modern/Unstable_Grid2/grid2Classes.js

@@ -0,0 +1,14 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getGrid2UtilityClass(slot) {
+  return generateUtilityClass('MuiGrid2', slot);
+}
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const grid2Classes = generateUtilityClasses('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth', // spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+export default grid2Classes;

package/modern/Unstable_Grid2/index.js

@@ -0,0 +1,4 @@
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.7
+/** @license MUI v5.9.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -106,6 +106,8 @@ export { default as FormLabel } from './FormLabel';
 export * from './FormLabel';
 export { default as Grid } from './Grid';
 export * from './Grid';
+export { default as Unstable_Grid2 } from './Unstable_Grid2';
+export * from './Unstable_Grid2';
 export { default as Grow } from './Grow';
 export * from './Grow';
 export { default as Hidden } from './Hidden';

package/node/Autocomplete/Autocomplete.js

@@ -495,7 +495,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
 
   if (multiple && value.length > 0) {
     const getCustomizedTagProps = params => (0, _extends2.default)({
-      className: (0, _clsx.default)(classes.tag),
+      className: classes.tag,
       disabled
     }, getTagProps(params));
 
@@ -596,7 +596,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           })
         }),
         inputProps: (0, _extends2.default)({
-          className: (0, _clsx.default)(classes.input),
+          className: classes.input,
           disabled,
           readOnly
         }, getInputProps())

package/node/ButtonBase/TouchRipple.js

@@ -247,7 +247,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       const {
         clientX,
         clientY
-      } = event.touches ? event.touches[0] : event;
+      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
       rippleX = Math.round(clientX - rect.left);
       rippleY = Math.round(clientY - rect.top);
     }

package/node/Dialog/Dialog.js

@@ -320,7 +320,8 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead.
+   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',

package/node/FormHelperText/FormHelperText.js

@@ -202,7 +202,9 @@ process.env.NODE_ENV !== "production" ? FormHelperText.propTypes
   /**
    * The variant to use.
    */
-  variant: _propTypes.default.oneOf(['filled', 'outlined', 'standard'])
+  variant: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['filled', 'outlined', 'standard']), _propTypes.default.string])
 } : void 0;
 var _default = FormHelperText;
 exports.default = _default;

package/node/ImageListItem/ImageListItem.js

@@ -67,9 +67,8 @@ const ImageListItemRoot = (0, _styled.default)('li', {
 })(({
   ownerState
 }) => (0, _extends2.default)({
-  display: 'inline-block',
-  position: 'relative',
-  lineHeight: 0
+  display: 'block',
+  position: 'relative'
 }, ownerState.variant === 'standard' && {
   // For titlebar under list item
   display: 'flex',
@@ -84,7 +83,8 @@ const ImageListItemRoot = (0, _styled.default)('li', {
   [`& .${_imageListItemClasses.default.img}`]: (0, _extends2.default)({
     objectFit: 'cover',
     width: '100%',
-    height: '100%'
+    height: '100%',
+    display: 'block'
   }, ownerState.variant === 'standard' && {
     height: 'auto',
     flexGrow: 1

package/node/Modal/Modal.js

@@ -15,11 +15,11 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = require("@mui/base");
+var _ModalUnstyled = _interopRequireWildcard(require("@mui/base/ModalUnstyled"));
 
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
 
-var _ModalUnstyled = _interopRequireWildcard(require("@mui/base/ModalUnstyled"));
+var _utils2 = require("@mui/utils");
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -137,11 +137,11 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, !(0, _base.isHostComponent)(Root) && {
+      root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(componentsProps.root, ownerState), !(0, _utils.isHostComponent)(Root) && {
         as: component,
         theme
       }),
-      backdrop: (0, _extends2.default)({}, BackdropProps, componentsProps.backdrop)
+      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(componentsProps.backdrop, ownerState))
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
@@ -162,7 +162,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead.
+   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -184,7 +185,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   /**
    * A single child content element.
    */
-  children: _utils.elementAcceptingRef.isRequired,
+  children: _utils2.elementAcceptingRef.isRequired,
 
   /**
    * Override or extend the styles applied to the component.
@@ -218,8 +219,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
-    backdrop: _propTypes.default.object,
-    root: _propTypes.default.object
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
 
   /**
@@ -231,7 +232,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   container: _propTypes.default
   /* @typescript-to-proptypes-ignore */
-  .oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
+  .oneOfType([_utils2.HTMLElementType, _propTypes.default.func]),
 
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and

package/node/Popper/Popper.js

@@ -82,6 +82,30 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([_propTypes.default.node, _propTypes.default.func]),
 
+  /**
+   * @ignore
+   */
+  component: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .elementType,
+
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: _propTypes.default.shape({
+    Root: _propTypes.default.elementType
+  }),
+
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  componentsProps: _propTypes.default.shape({
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.

package/node/ScopedCssBaseline/ScopedCssBaseline.js

@@ -117,7 +117,12 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    */
-  enableColorScheme: _propTypes.default.bool
+  enableColorScheme: _propTypes.default.bool,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = ScopedCssBaseline;
 exports.default = _default;