@mui/material 5.8.7 → 5.9.2

package/README.md

@@ -1,6 +1,6 @@
 <!-- markdownlint-disable-next-line -->
 <p align="center">
-  <a href="https://mui.com/" rel="noopener" target="_blank"><img width="150" src="https://mui.com/static/logo.svg" alt="MUI logo"></a>
+  <a href="https://mui.com/" rel="noopener" target="_blank"><img width="150" src="/docs/public/static/logo.svg" alt="MUI logo"></a>
 </p>
 
 <h1 align="center">MUI Core</h1>
@@ -39,11 +39,15 @@
 
 Material UI is available as an [npm package](https://www.npmjs.com/package/@mui/material).
 
+**npm:**
+
 ```sh
-// with npm
 npm install @mui/material @emotion/react @emotion/styled
+```
 
-// with yarn
+**yarn:**
+
+```sh
 yarn add @mui/material @emotion/react @emotion/styled
 ```
 
@@ -63,11 +67,15 @@ Use `@latest` for the latest stable release.
 
 MUI Base is available as an [npm package](https://www.npmjs.com/package/@mui/base).
 
+**npm:**
+
 ```sh
-// with npm
 npm install @mui/base
+```
 
-// with yarn
+**yarn:**
+
+```sh
 yarn add @mui/base
 ```
 
@@ -78,22 +86,30 @@ We are adding new components regularly and you're welcome to contribute!
 
 MUI System is available as an [npm package](https://www.npmjs.com/package/@mui/system).
 
+**npm:**
+
 ```sh
-// with npm
 npm install @mui/system @emotion/react @emotion/styled
+```
 
-// with yarn
+**yarn:**
+
+```sh
 yarn add @mui/system @emotion/react @emotion/styled
 ```
 
 Or if you want to use `styled-components` as a styling engine:
 
+**npm:**
+
 ```sh
-// with npm
-npm install @mui/system @mui/styled-engine-sc styled-components
+npm install @mui/material @mui/styled-engine-sc styled-components
+```
 
-// with yarn
-yarn add @mui/system @mui/styled-engine-sc styled-components
+**yarn:**
+
+```sh
+yarn add @mui/material @mui/styled-engine-sc styled-components
 ```
 
 Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
@@ -103,7 +119,7 @@ Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engi
 ### Diamond 💎
 
 <p align="center">
-  <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/1287123?s=256" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
+  <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://i.ibb.co/w0HF0Nz/Logo-Blue-140px-rgb.png" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
   <a href="https://www.doit-intl.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/8424863?s=256" alt="doit-intl" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
   <a href="https://www.zesty.io/integrations/nextjs-cms/?utm_source=mui&utm_medium=referral&utm_campaign=sponsor" rel="noopener sponsored" target="_blank"><img height="90" width="90" src="https://brand.zesty.io/zesty-io-logo.svg" alt="zesty.io" title="The only Next.js CMS you need" loading="lazy" /></a>
 </p>
@@ -118,10 +134,11 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww
   <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://github.com/tidelift.png?size=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
   <a href="https://bit.dev/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-rig ht: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=192" alt="bit.dev" title="The fastest way to share code" loading="lazy" /></a>
   <a href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img src="https://images.opencollective.com/callemall/09710fe/logo/192.png" alt="text-em-all.com" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
-  <a href="https://www.laststance.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/laststance/daffd6c/avatar/192.png" alt="laststance.io" title="Indipendent organization for OSS activity based on Tokyo" loading="lazy" /></a>
   <a href="https://online-aussie-casino.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/aussiecasinohex/923df37/logo/192.png" alt="online-aussie-casino.com" title="Aussie Gambling Guide" loading="lazy" /></a>
   <a href="https://sumatosoft.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/sumatosoft_company/0b78570/avatar/192.png" alt="sumatosoft.com" title="We help companies to digitalize their businesses" loading="lazy" /></a>
   <a href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://p18.zdusercontent.com/attachment/9422375/Rullx0rw9lUGKuyKOy4VQ9Zxq?size=192" alt="megafamous.com" title="The best place to buy Instagram followers & likes." loading="lazy" /></a>
+  <a href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/192.png" alt="dialmycalls.com" title="Send text messages, calls & emails to thousands with ease." loading="lazy" /></a>
+  <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://goread.io/assets/uploads/usereb4ac3033e8ab3591e0fcefa8c26ce3fd36d5a0f/bd81e54effbcc265ad169015455a0c1e.png" alt="goread.io" title="Instagram followers, likes, power likes, views, comments, saves in minutes." loading="lazy" /></a>
 </p>
 
 Gold Sponsors are those who have pledged \$500/month or more to MUI.
@@ -147,7 +164,7 @@ In the interactive demo below, try changing the code and see how it affects the
 (Hint: change `variant` to `"outlined"` and `color` to `"secondary"`.
 For more options, see the [`Button` component page](https://mui.com/material-ui/react-button/) in our docs.)
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4j7m47vlm4)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/material-ui-u9sy1h)
 
 ## Questions
 
@@ -160,8 +177,9 @@ Our documentation features [a collection of example projects using Material UI](
 
 ## Documentation
 
-- [Material UI](https://mui.com/material-ui/getting-started/installation/)
-- [MUI Base](https://mui.com/base/getting-started/installation/)
+- [Material UI](https://mui.com/material-ui/getting-started/overview/)
+- [Joy UI](https://mui.com/joy-ui/getting-started/overview/)
+- [MUI Base](https://mui.com/base/getting-started/overview/)
 - [MUI System](https://mui.com/system/basics/)
 
 ## Premium themes
@@ -196,22 +214,38 @@ For details of supported versions and contact details for reporting security iss
 
 These great services sponsor MUI's core infrastructure:
 
-[<img loading="lazy" alt="GitHub" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" height="25">](https://github.com/)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/github-darkmode.svg">
+  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/github-lightmode.svg">
+  <img alt="GitHub logo" src="/docs/public/static/readme/github-darkmode.svg">
+</picture>
 
-GitHub lets us host the Git repository and coordinate contributions.
+[GitHub](https://github.com/) lets us host the Git repository and coordinate contributions.
 
-[<img loading="lazy" alt="Netlify" src="https://cdn.netlify.com/15ecf59b59c9d04b88097c6b5d2c7e8a7d1302d0/1b6d6/img/press/logos/full-logo-light.svg" height="30">](https://www.netlify.com/)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/netlify-darkmode.svg">
+  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/netlify-lightmode.svg">
+  <img alt="Netlify logo" src="/docs/public/static/readme/netlify-darkmode.svg">
+</picture>
 
-Netlify lets us distribute the documentation.
+[Netlify](https://www.netlify.com/) lets us distribute the documentation.
 
-[<img loading="lazy" alt="Crowdin" src="https://support.crowdin.com/assets/logos/crowdin-logo-small-black.svg" height="30">](https://crowdin.com/)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/crowdin-darkmode.svg">
+  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/crowdin-lightmode.svg">
+  <img alt="Crowdin logo" src="/docs/public/static/readme/crowdin-darkmode.svg">
+</picture>
 
-Crowdin lets us translate the documentation.
+[Crowdin](https://crowdin.com/) lets us translate the documentation.
 
-[<img loading="lazy" alt="BrowserStack" src="https://www.browserstack.com/images/mail/browserstack-logo-footer.png" height="30">](https://www.browserstack.com/)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/browserstack-darkmode.svg">
+  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/browserstack-lightmode.svg">
+  <img alt="GitHub logo" src="/docs/public/static/readme/browserstack-darkmode.svg">
+</picture>
 
-BrowserStack lets us test in real browsers.
+[BrowserStack](https://www.browserstack.com/) lets us test in real browsers.
 
-[<img loading="lazy" alt="CodeCov" src="https://github.com/codecov.png?size=70" width="35" height="35">](https://codecov.io/)
+<img loading="lazy" alt="CodeCov logo" src="https://github.com/codecov.png?size=70" width="35" height="35">
 
-CodeCov lets us monitor test coverage.
+[CodeCov](https://about.codecov.io/) lets us monitor test coverage.

package/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -1,4 +1,6 @@
+import { SxProps } from '@mui/system';
 import * as React from 'react';
+import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ScopedCssBaselineClasses } from './scopedCssBaselineClasses';
 
@@ -18,6 +20,10 @@ export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType =
      * For browser support, check out https://caniuse.com/?search=color-scheme
      */
     enableColorScheme?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }

package/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/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/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/Tabs/Tabs.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
 import ButtonBase from '../ButtonBase';
 import { TabScrollButtonProps } from '../TabScrollButton';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TabsClasses } from './tabsClasses';
 
+export interface TabsPropsIndicatorColorOverrides {}
+
 export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof ButtonBase> {
   props: P & {
     /**
@@ -49,7 +52,10 @@ export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof Button
      * Determines the color of the indicator.
      * @default 'primary'
      */
-    indicatorColor?: 'secondary' | 'primary';
+    indicatorColor?: OverridableStringUnion<
+      'secondary' | 'primary',
+      TabsPropsIndicatorColorOverrides
+    >;
     /**
      * Callback fired when the value changes.
      *

package/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/Unstable_Grid2/Grid2.d.ts

@@ -0,0 +1,4 @@
+import { OverridableComponent } from '@mui/types';
+import { Grid2TypeMap } from './Grid2Props';
+declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
+export default Grid2;

package/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/Unstable_Grid2/Grid2Props.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+export declare type Grid2Slot = 'root';
+export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export declare type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<Grid2TypeMap<P, D>, D>;

package/Unstable_Grid2/Grid2Props.js

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

package/Unstable_Grid2/grid2Classes.d.ts

@@ -0,0 +1,5 @@
+import { GridClasses } from '@mui/system/Unstable_Grid';
+export declare type Grid2ClassKey = keyof GridClasses;
+export declare function getGrid2UtilityClass(slot: string): string;
+declare const grid2Classes: GridClasses;
+export default grid2Classes;

package/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/Unstable_Grid2/index.d.ts

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

package/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/Unstable_Grid2/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Unstable_Grid2/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -224,6 +224,9 @@ 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';
 

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

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

package/legacy/ButtonBase/TouchRipple.js

@@ -158,7 +158,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
       rippleX = Math.round(rect.width / 2);
       rippleY = Math.round(rect.height / 2);
     } else {
-      var _ref5 = event.touches ? event.touches[0] : event,
+      var _ref5 = event.touches && event.touches.length > 0 ? event.touches[0] : event,
           clientX = _ref5.clientX,
           clientY = _ref5.clientY;
 

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

@@ -184,6 +184,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/legacy/ImageListItem/ImageListItem.js

@@ -34,9 +34,8 @@ var ImageListItemRoot = styled('li', {
 })(function (_ref2) {
   var ownerState = _ref2.ownerState;
   return _extends({
-    display: 'inline-block',
-    position: 'relative',
-    lineHeight: 0
+    display: 'block',
+    position: 'relative'
   }, ownerState.variant === 'standard' && {
     // For titlebar under list item
     display: 'flex',
@@ -50,7 +49,8 @@ var ImageListItemRoot = styled('li', {
   }, _defineProperty({}, "& .".concat(imageListItemClasses.img), _extends({
     objectFit: 'cover',
     width: '100%',
-    height: '100%'
+    height: '100%',
+    display: 'block'
   }, ownerState.variant === 'standard' && {
     height: 'auto',
     flexGrow: 1

package/legacy/Modal/Modal.js

@@ -2,9 +2,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 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';
@@ -125,11 +125,15 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: _extends({}, componentsProps.root, !isHostComponent(Root) && {
-        as: component,
-        theme: theme
-      }),
-      backdrop: _extends({}, BackdropProps, componentsProps.backdrop)
+      root: function root() {
+        return _extends({}, resolveComponentProps(componentsProps.root, ownerState), !isHostComponent(Root) && {
+          as: component,
+          theme: theme
+        });
+      },
+      backdrop: function backdrop() {
+        return _extends({}, BackdropProps, resolveComponentProps(componentsProps.backdrop, ownerState));
+      }
     },
     onTransitionEnter: function onTransitionEnter() {
       return setExited(false);
@@ -154,7 +158,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',
@@ -210,8 +215,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/legacy/Popper/Popper.js

@@ -63,6 +63,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/legacy/ScopedCssBaseline/ScopedCssBaseline.js

@@ -94,6 +94,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/legacy/Slider/Slider.js

@@ -283,7 +283,6 @@ var 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],
@@ -295,6 +294,7 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     padding: '0.25rem 0.75rem'
   }, ownerState.orientation === 'horizontal' && {
     top: '-10px',
+    transformOrigin: 'bottom center',
     '&:before': {
       position: 'absolute',
       content: '""',
@@ -307,7 +307,8 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     }
   }, ownerState.orientation === 'vertical' && {
     right: '30px',
-    top: '25px',
+    top: '24px',
+    transformOrigin: 'right center',
     '&:before': {
       position: 'absolute',
       content: '""',