@mui/material 7.0.2 → 7.1.0

package/BottomNavigationAction/BottomNavigationAction.js

@@ -17,6 +17,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
 var _bottomNavigationActionClasses = _interopRequireWildcard(require("./bottomNavigationActionClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -75,8 +76,7 @@ const BottomNavigationActionRoot = (0, _zeroStyled.styled)(_ButtonBase.default,
 })));
 const BottomNavigationActionLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiBottomNavigationAction',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
+  slot: 'Label'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -114,6 +114,8 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     selected,
     showLabel,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
@@ -126,16 +128,41 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomNavigationActionRoot, {
-    ref: ref,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: BottomNavigationActionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: (0, _clsx.default)(classes.root, className),
-    focusRipple: true,
-    onClick: handleChange,
-    ownerState: ownerState,
-    ...other,
-    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomNavigationActionLabel, {
-      className: classes.label,
-      ownerState: ownerState,
+    additionalProps: {
+      focusRipple: true
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      }
+    })
+  });
+  const [LabelSlot, labelProps] = (0, _useSlot.default)('label', {
+    elementType: BottomNavigationActionLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootProps,
+    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelSlot, {
+      ...labelProps,
       children: label
     })]
   });
@@ -182,6 +209,22 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remo
    * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
    */
   showLabel: _propTypes.default.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    label: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Breadcrumbs/Breadcrumbs.js

@@ -43,8 +43,7 @@ const BreadcrumbsRoot = (0, _zeroStyled.styled)(_Typography.default, {
 })({});
 const BreadcrumbsOl = (0, _zeroStyled.styled)('ol', {
   name: 'MuiBreadcrumbs',
-  slot: 'Ol',
-  overridesResolver: (props, styles) => styles.ol
+  slot: 'Ol'
 })({
   display: 'flex',
   flexWrap: 'wrap',
@@ -55,8 +54,7 @@ const BreadcrumbsOl = (0, _zeroStyled.styled)('ol', {
 });
 const BreadcrumbsSeparator = (0, _zeroStyled.styled)('li', {
   name: 'MuiBreadcrumbs',
-  slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
+  slot: 'Separator'
 })({
   display: 'flex',
   userSelect: 'none',

package/Button/Button.js

@@ -379,8 +379,7 @@ const ButtonEndIcon = (0, _zeroStyled.styled)('span', {
 }));
 const ButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
   name: 'MuiButton',
-  slot: 'LoadingIndicator',
-  overridesResolver: (props, styles) => styles.loadingIndicator
+  slot: 'LoadingIndicator'
 })(({
   theme
 }) => ({
@@ -471,8 +470,7 @@ const ButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
 }));
 const ButtonLoadingIconPlaceholder = (0, _zeroStyled.styled)('span', {
   name: 'MuiButton',
-  slot: 'LoadingIconPlaceholder',
-  overridesResolver: (props, styles) => styles.loadingIconPlaceholder
+  slot: 'LoadingIconPlaceholder'
 })({
   display: 'inline-block',
   width: '1em',

package/ButtonBase/ButtonBase.js

@@ -40,8 +40,7 @@ const useUtilityClasses = ownerState => {
 };
 const ButtonBaseRoot = exports.ButtonBaseRoot = (0, _zeroStyled.styled)('button', {
   name: 'MuiButtonBase',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   display: 'inline-flex',
   alignItems: 'center',

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.1.0
+
+<!-- generated comparing v7.0.2..master -->
+
+_May 6, 2025_
+
+A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Material UI now works with **Tailwind CSS v4**! Check out the [setup guide](https://mui.com/material-ui/integrations/tailwindcss/tailwindcss-v4/).
+
+### `@mui/material@7.1.0`
+
+- [InputBase] Text cursor jumps several lines up when inserting text fragment with new line at the end (#45246) @yermartee
+- [OutlinedInput] Add missing `notchedOutline` slot (#45917) @siriwatknp
+- [Snackbar] Skip default `onClickAway` behavior when `defaultMuiPrevented` is provided (#45629) @sai6855
+- [Avatar] Fix img slot types and add missing slots (#45483) @siriwatknp
+- [Badge] Replace useSlotProps with useSlot hook (#45871) @sai6855
+- [BottomNavigationAction] Add slots and slotProps (#45776) @sai6855
+- [CardActionArea] Add slots and slotProps (#45866) @sai6855
+- [useMediaQuery] Add warning and docs for using `useMediaQuery('print')` (#44790) @good-jinu
+- Remove unnecessary clsx usages (#46084) @sai6855
+- Corrected generic type definition in `SelectChangeEvent` (#45941) @SuyashShukla0007
+- Fix theme object changes between renders (#45863) @siriwatknp
+
+### `@mui/material-nextjs@7.1.0`
+
+- Add option to enable CSS layers for pages router (#45596) @siriwatknp
+- Do not wrap `@layer` order rules in App Router (#45864) @Nayeem-XTREME
+
+### `@mui/system@7.1.0`
+
+- Fix `@mui/system` types organization (#45860) @Janpot
+
+### `@mui/styled-engine@7.1.0`
+
+- Infer `ownerState` from props in `styled` (#46083) @siriwatknp
+- Fix style overrides variants type (#45478) @siriwatknp
+
+### Docs
+
+- [Avatar] Add avatar upload demo (#45986) @Demianeen
+- [Dialog] Remove deprecated props usage in demos (#45923) @sai6855
+- [Menu] Update `paper` slot JSDoc default from `Paper` to `PopoverPaper` (#45722) @andreachiera
+- [examples] Remove create-react-app usages (#45426) @CodeLeom
+- Add `AccordionSummary` to the v5 breaking change migration (#45947) @siriwatknp
+- Update CSS variable usage in migration guide for Pigment CSS (#46033) @sai6855
+- Fix docs API dark mode color (#46086) @alexfauquette
+- Add a guide for extending Material UI classes in Tailwind CSS (#46039) @siriwatknp
+- Add `InitColorSchemeScript` docs and API (#45927) @siriwatknp
+- Add Tailwind CSS v4 integration guide (#45906) @siriwatknp
+- Fix 301 links to the system v6 (#45931) @oliviertassinari
+- Add notification for MUI X v8 announcement (#45942) @joserodolfofreitas
+- Fix som 301 redirections (ae84b35) @oliviertassinari
+- Fix some 301 redirections (057384e) @oliviertassinari
+- Fix logo is not centered on small screens (#45920) @crabsim
+- Fix line break typo (a2a62d5) @oliviertassinari
+- Fix markdown typo in templates.md (#45914) @scyzoryck
+- Add Next.js App Router guide for custom classnames (#45852) @siriwatknp
+
+### Core
+
+- [code-infra] Give a stable name to dev tool app (3889ded) @oliviertassinari
+- [code-infra] Normalize author package in org (8135638) @oliviertassinari
+- [code-infra] Correct some manually curated .d.ts files (#46054) @Janpot
+- [code-infra] Align deps versions (#46048) @Janpot
+- [code-infra] Fix dynamic import in imports resolver (#46046) @Janpot
+- [code-infra] Eliminate `@mui/utils` deep imports (#46004) @Janpot
+- [code-infra] Expand renovate.json for react types (#45935) @Janpot
+- [code-infra] Make Argos upload script reusable (#45883) @Janpot
+- [code-infra] Disallow redundant window prefixes for globals (#45880) @Janpot
+- [code-infra] Remove type generation of modern build (#45912) @Janpot
+- [code-infra] Clean up bundle size checker (#45622) @Janpot
+- [code-infra] Fix `StrictMode` effects not being called twice in React 19 tests (#45812) @bernardobelchior
+- [code-infra] Convert `@mui/utils` to typescript (#45671) @Janpot
+- [docs-infra] Improve export into sandbox package.json (#46044) @oliviertassinari
+- [docs-infra] Update feedback Node.js to v22 (#46064) @oliviertassinari
+- [docs-infra] Normalize netlify.toml in org (b101d5c) @oliviertassinari
+- [docs-infra] Uniformize Vale between repositories (0f79796) @oliviertassinari
+- [docs-infra] Fix Vale no longer working (#46029) @oliviertassinari
+- [docs-infra] Remove demo styling switch (#45926) @Janpot
+- [docs-infra] StackBlitz WebContainer demos (#45924) @Janpot
+- [docs-infra] Fix feedback management (#45872) @alexfauquette
+- [test] Replace `playwright` with `@playwright/test` (#45998) @ZeeshanTamboli
+- Fix internal version duplication (#46051) @oliviertassinari
+- Avoid the need for `@mui/material/themeCssVarsAugmentation` (#46053) @Janpot
+- Add security label to dependabot PRs (0a5c027) @oliviertassinari
+- Remove unecessary versions (#46034) @oliviertassinari
+- Remove redundant overrides resolver (#45970) @romgrk
+- Fix duplicate branch reference (#45915) @oliviertassinari
+- Fix outdated <link rel="shortcut icon" (#45916) @oliviertassinari
+- Fix redirection chains (#45930) @oliviertassinari
+- Run pnpm docs:sync-team (beee09f) @oliviertassinari
+- Add `pkg.pr.new` publishing (#42984) @Aslemammad
+- Remove @mui/base from the master branch (#45857) @mnajdova
+
+All contributors of this release in alphabetical order: @alexfauquette, @andreachiera, @Aslemammad, @bernardobelchior, @CodeLeom, @crabsim, @Demianeen, @good-jinu, @Janpot, @joserodolfofreitas, @mnajdova, @Nayeem-XTREME, @oliviertassinari, @renovate[bot], @romgrk, @sai6855, @scyzoryck, @siriwatknp, @SuyashShukla0007, @yermartee, @ZeeshanTamboli
+
 ## 7.0.2
 
 _Apr 9, 2025_

package/Card/Card.js

@@ -28,8 +28,7 @@ const useUtilityClasses = ownerState => {
 };
 const CardRoot = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiCard',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   overflow: 'hidden'
 });

package/CardActionArea/CardActionArea.d.ts

@@ -1,9 +1,34 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from "../index.js";
-import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
+import { SlotProps, CreateSlotsAndSlotProps, Theme } from "../index.js";
+import { ButtonBaseProps, ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
 import { OverrideProps } from "../OverridableComponent/index.js";
 import { CardActionAreaClasses } from "./cardActionAreaClasses.js";
+export interface CardActionAreaSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the focusHighlight.
+   * @default span
+   */
+  focusHighlight: React.ElementType;
+}
+export type CardActionAreaSlotsAndSlotProps = CreateSlotsAndSlotProps<CardActionAreaSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the span element.
+   */
+  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, CardActionAreaOwnerState>;
+  /**
+   * Props forwarded to the focusHighlight slot.
+   * By default, the avaible props are based on the span element.
+   */
+  focusHighlight: SlotProps<'span', {}, CardActionAreaOwnerState>;
+}>;
+export interface CardActionAreaOwnerState extends Omit<CardActionAreaProps, 'slots' | 'slotProps'> {}
 export interface CardActionAreaOwnProps {
   /**
    * Override or extend the styles applied to the component.
@@ -16,7 +41,7 @@ export interface CardActionAreaOwnProps {
   sx?: SxProps<Theme>;
 }
 export type CardActionAreaTypeMap<AdditionalProps, RootComponent extends React.ElementType> = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & CardActionAreaOwnProps;
+  props: AdditionalProps & CardActionAreaOwnProps & CardActionAreaSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }>;
 

package/CardActionArea/CardActionArea.js

@@ -16,6 +16,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardActionAreaClasses = _interopRequireWildcard(require("./cardActionAreaClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -29,8 +30,7 @@ const useUtilityClasses = ownerState => {
 };
 const CardActionAreaRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiCardActionArea',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -51,8 +51,7 @@ const CardActionAreaRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
 })));
 const CardActionAreaFocusHighlight = (0, _zeroStyled.styled)('span', {
   name: 'MuiCardActionArea',
-  slot: 'FocusHighlight',
-  overridesResolver: (props, styles) => styles.focusHighlight
+  slot: 'FocusHighlight'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -79,19 +78,41 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     children,
     className,
     focusVisibleClassName,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardActionAreaRoot, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: CardActionAreaRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: (0, _clsx.default)(classes.root, className),
-    focusVisibleClassName: (0, _clsx.default)(focusVisibleClassName, classes.focusVisible),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(CardActionAreaFocusHighlight, {
-      className: classes.focusHighlight,
-      ownerState: ownerState
+    additionalProps: {
+      focusVisibleClassName: (0, _clsx.default)(focusVisibleClassName, classes.focusVisible)
+    }
+  });
+  const [FocusHighlightSlot, focusHighlightProps] = (0, _useSlot.default)('focusHighlight', {
+    elementType: CardActionAreaFocusHighlight,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.focusHighlight
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootProps,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusHighlightSlot, {
+      ...focusHighlightProps
     })]
   });
 });
@@ -116,6 +137,22 @@ process.env.NODE_ENV !== "production" ? CardActionArea.propTypes /* remove-propt
    * @ignore
    */
   focusVisibleClassName: _propTypes.default.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    focusHighlight: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    focusHighlight: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/CardContent/CardContent.js

@@ -26,8 +26,7 @@ const useUtilityClasses = ownerState => {
 };
 const CardContentRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiCardContent',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   padding: 16,
   '&:last-child': {

package/CardHeader/CardHeader.js

@@ -47,8 +47,7 @@ const CardHeaderRoot = (0, _zeroStyled.styled)('div', {
 });
 const CardHeaderAvatar = (0, _zeroStyled.styled)('div', {
   name: 'MuiCardHeader',
-  slot: 'Avatar',
-  overridesResolver: (props, styles) => styles.avatar
+  slot: 'Avatar'
 })({
   display: 'flex',
   flex: '0 0 auto',
@@ -56,8 +55,7 @@ const CardHeaderAvatar = (0, _zeroStyled.styled)('div', {
 });
 const CardHeaderAction = (0, _zeroStyled.styled)('div', {
   name: 'MuiCardHeader',
-  slot: 'Action',
-  overridesResolver: (props, styles) => styles.action
+  slot: 'Action'
 })({
   flex: '0 0 auto',
   alignSelf: 'flex-start',
@@ -67,8 +65,7 @@ const CardHeaderAction = (0, _zeroStyled.styled)('div', {
 });
 const CardHeaderContent = (0, _zeroStyled.styled)('div', {
   name: 'MuiCardHeader',
-  slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  slot: 'Content'
 })({
   flex: '1 1 auto',
   [`.${_Typography.typographyClasses.root}:where(& .${_cardHeaderClasses.default.title})`]: {

package/Checkbox/Checkbox.js

@@ -236,7 +236,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
    */
   indeterminateIcon: _propTypes.default.node,
   /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
    * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: _propTypes.default.object,

package/Chip/Chip.js

@@ -438,7 +438,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
       className: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
     })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel.default, {
-      className: (0, _clsx.default)(classes.deleteIcon),
+      className: classes.deleteIcon,
       onClick: handleDeleteIconClick
     });
   }
@@ -472,7 +472,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     ...moreProps,
     ...other,
     children: [avatar || icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipLabel, {
-      className: (0, _clsx.default)(classes.label),
+      className: classes.label,
       ownerState: ownerState,
       children: label
     }), deleteIcon]

package/CircularProgress/CircularProgress.js

@@ -107,8 +107,7 @@ const CircularProgressRoot = (0, _zeroStyled.styled)('span', {
 })));
 const CircularProgressSVG = (0, _zeroStyled.styled)('svg', {
   name: 'MuiCircularProgress',
-  slot: 'Svg',
-  overridesResolver: (props, styles) => styles.svg
+  slot: 'Svg'
 })({
   display: 'block' // Keeps the progress centered
 });

package/ClickAwayListener/ClickAwayListener.js

@@ -9,7 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.ClickAwayListener = ClickAwayListener;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 function mapEventPropToEvent(eventProp) {
@@ -53,7 +57,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = (0, _utils.unstable_useForkRef)((0, _getReactElementRef.default)(children), nodeRef);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //
@@ -61,12 +65,12 @@ function ClickAwayListener(props) {
   // clicking a checkbox to check it, hitting a button to submit a form,
   // and hitting left arrow to move the cursor in a text input etc.
   // Only special HTML elements have these default behaviors.
-  const handleClickAway = (0, _utils.unstable_useEventCallback)(event => {
+  const handleClickAway = (0, _useEventCallback.default)(event => {
     // Given developers can stop the propagation of the synthetic event,
     // we can only be confident with a positive value.
     const insideReactTree = syntheticEventRef.current;
     syntheticEventRef.current = false;
-    const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
+    const doc = (0, _ownerDocument.default)(nodeRef.current);
 
     // 1. IE11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
@@ -114,7 +118,7 @@ function ClickAwayListener(props) {
   React.useEffect(() => {
     if (touchEvent !== false) {
       const mappedTouchEvent = mapEventPropToEvent(touchEvent);
-      const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
+      const doc = (0, _ownerDocument.default)(nodeRef.current);
       const handleTouchMove = () => {
         movedRef.current = true;
       };
@@ -133,7 +137,7 @@ function ClickAwayListener(props) {
   React.useEffect(() => {
     if (mouseEvent !== false) {
       const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
-      const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
+      const doc = (0, _ownerDocument.default)(nodeRef.current);
       doc.addEventListener(mappedMouseEvent, handleClickAway);
       return () => {
         doc.removeEventListener(mappedMouseEvent, handleClickAway);
@@ -151,7 +155,7 @@ process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-pr
   /**
    * The wrapped element.
    */
-  children: _utils.elementAcceptingRef.isRequired,
+  children: _elementAcceptingRef.default.isRequired,
   /**
    * If `true`, the React tree is ignored and only the DOM tree is considered.
    * This prop changes how portaled elements are handled.
@@ -175,5 +179,5 @@ process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-pr
 } : void 0;
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
-  ClickAwayListener['propTypes' + ''] = (0, _utils.exactProp)(ClickAwayListener.propTypes);
+  ClickAwayListener['propTypes' + ''] = (0, _exactProp.default)(ClickAwayListener.propTypes);
 }

package/Collapse/Collapse.js

@@ -87,8 +87,7 @@ const CollapseRoot = (0, _zeroStyled.styled)('div', {
 })));
 const CollapseWrapper = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
-  slot: 'Wrapper',
-  overridesResolver: (props, styles) => styles.wrapper
+  slot: 'Wrapper'
 })({
   // Hack to get children with a negative margin to not falsify the height computation.
   display: 'flex',
@@ -105,8 +104,7 @@ const CollapseWrapper = (0, _zeroStyled.styled)('div', {
 });
 const CollapseWrapperInner = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
-  slot: 'WrapperInner',
-  overridesResolver: (props, styles) => styles.wrapperInner
+  slot: 'WrapperInner'
 })({
   width: '100%',
   variants: [{

package/Dialog/Dialog.js

@@ -49,8 +49,7 @@ const useUtilityClasses = ownerState => {
 };
 const DialogRoot = (0, _zeroStyled.styled)(_Modal.default, {
   name: 'MuiDialog',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   '@media print': {
     // Use !important to override the Modal inline-style.
@@ -306,7 +305,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     elementType: DialogContainer,
     externalForwardedProps,
     ownerState,
-    className: (0, _clsx.default)(classes.container)
+    className: classes.container
   });
   const [TransitionSlot, transitionSlotProps] = (0, _useSlot.default)('transition', {
     elementType: _Fade.default,
@@ -385,9 +384,6 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
-   *   overridesResolver: (props, styles) => {
-   *     return styles.backdrop;
-   *   },
    * })({
    *   zIndex: -1,
    * })

package/DialogContentText/DialogContentText.js

@@ -34,8 +34,7 @@ const useUtilityClasses = ownerState => {
 const DialogContentTextRoot = (0, _zeroStyled.styled)(_Typography.default, {
   shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiDialogContentText',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({

package/DialogTitle/DialogTitle.js

@@ -28,8 +28,7 @@ const useUtilityClasses = ownerState => {
 };
 const DialogTitleRoot = (0, _zeroStyled.styled)(_Typography.default, {
   name: 'MuiDialogTitle',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   padding: '16px 24px',
   flex: '0 0 auto'

package/FilledInput/FilledInput.js

@@ -422,7 +422,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    */
   inputComponent: _propTypes.default.elementType,
   /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
    * @default {}
    */
   inputProps: _propTypes.default.object,
@@ -510,7 +510,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    */
   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]),
   /**
-   * 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).
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
    * @default 'text'
    */
   type: _propTypes.default.string,