@mui/material 7.0.1 → 7.1.0

package/Badge/Badge.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _usePreviousProps = _interopRequireDefault(require("@mui/utils/usePreviousProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useBadge = _interopRequireDefault(require("./useBadge"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -20,6 +19,7 @@ var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/c
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -40,8 +40,7 @@ const useUtilityClasses = ownerState => {
 };
 const BadgeRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiBadge',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   position: 'relative',
   display: 'inline-flex',
@@ -289,26 +288,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
-  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  const rootProps = (0, _useSlotProps.default)({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component
+  const externalForwardedProps = {
+    slots: {
+      root: slots?.root ?? components.Root,
+      badge: slots?.badge ?? components.Badge
+    },
+    slotProps: {
+      root: slotProps?.root ?? componentsProps.root,
+      badge: slotProps?.badge ?? componentsProps.badge
+    }
+  };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: BadgeRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
     },
     ownerState,
-    className: (0, _clsx.default)(rootSlotProps?.className, classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    ref,
+    additionalProps: {
+      as: component
+    }
   });
-  const badgeProps = (0, _useSlotProps.default)({
-    elementType: BadgeSlot,
-    externalSlotProps: badgeSlotProps,
+  const [BadgeSlot, badgeProps] = (0, _useSlot.default)('badge', {
+    elementType: BadgeBadge,
+    externalForwardedProps,
     ownerState,
-    className: (0, _clsx.default)(classes.badge, badgeSlotProps?.className)
+    className: classes.badge
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
     ...rootProps,
@@ -406,7 +413,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    */
   showZero: _propTypes.default.bool,
   /**
-   * The props used for each slot inside the Badge.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: _propTypes.default.shape({
@@ -414,8 +421,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
     root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({

package/Badge/useBadge.d.ts

@@ -1,13 +1,3 @@
 import { UseBadgeParameters, UseBadgeReturnValue } from "./useBadge.types.js";
-/**
- *
- * Demos:
- *
- * - [Badge](https://mui.com/base-ui/react-badge/#hook)
- *
- * API:
- *
- * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
- */
 declare function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue;
 export default useBadge;

package/Badge/useBadge.js

@@ -1,21 +1,12 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _utils = require("@mui/utils");
-/**
- *
- * Demos:
- *
- * - [Badge](https://mui.com/base-ui/react-badge/#hook)
- *
- * API:
- *
- * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
- */
+var _usePreviousProps = _interopRequireDefault(require("@mui/utils/usePreviousProps"));
 function useBadge(parameters) {
   const {
     badgeContent: badgeContentProp,
@@ -23,7 +14,7 @@ function useBadge(parameters) {
     max: maxProp = 99,
     showZero = false
   } = parameters;
-  const prevProps = (0, _utils.usePreviousProps)({
+  const prevProps = (0, _usePreviousProps.default)({
     badgeContent: badgeContentProp,
     max: maxProp
   });

package/BottomNavigation/BottomNavigation.js

@@ -28,8 +28,7 @@ const useUtilityClasses = ownerState => {
 };
 const BottomNavigationRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiBottomNavigation',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })((0, _memoTheme.default)(({
   theme
 }) => ({

package/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -1,10 +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 { CreateSlotsAndSlotProps, SlotProps, Theme } from "../index.js";
+import { ButtonBaseProps, ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
 import { OverrideProps } from "../OverridableComponent/index.js";
 import { BottomNavigationActionClasses } from "./bottomNavigationActionClasses.js";
-export interface BottomNavigationActionOwnProps {
+export interface BottomNavigationActionSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label: React.ElementType;
+}
+export type BottomNavigationActionSlotsAndSlotProps = CreateSlotsAndSlotProps<BottomNavigationActionSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the ButtonBase element.
+   */
+  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, BottomNavigationActionOwnerState>;
+  /**
+   * Props forwarded to the label slot.
+   * By default, the avaible props are based on the span element.
+   */
+  label: SlotProps<'span', {}, BottomNavigationActionOwnerState>;
+}>;
+export interface BottomNavigationActionOwnProps extends BottomNavigationActionSlotsAndSlotProps {
   /**
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
@@ -59,4 +83,5 @@ declare const BottomNavigationAction: ExtendButtonBase<BottomNavigationActionTyp
 export type BottomNavigationActionProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
   component?: React.ElementType;
 };
+export interface BottomNavigationActionOwnerState extends Omit<BottomNavigationActionProps, 'slots' | 'slotProps'> {}
 export default BottomNavigationAction;

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,162 @@
 # [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_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@7.0.2`
+
+- [Autocomplete] Add ability to render custom single value (#45387) @ZeeshanTamboli
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45734) @imadx
+- [AvatarGroup] Fix `spacing` prop ignoring value `0` (#45799) @Kartik-Murthy
+- [Dialog] Deprecate composed classes (#45418) @sai6855
+
+### `@mui/material-nextjs@7.0.2`
+
+- Fix nonce issues (#45794) @Janpot
+- Add warnings to nextjs router integration (#45778) @Janpot
+
+### `@mui/styled-engine@7.0.2`
+
+- Added caching to `StyledEngineProvider` to improve performance for running tests with Jest (#45846) @siriwatknp
+
+### Core
+
+- [blog] Improve upvote video (0646444) @oliviertassinari
+- [code-infra] Remove webpack aliases (#45841) @Janpot
+- [code-infra] Remove .tsbuildinfo from build folder (#45727) @Janpot
+- [code-infra] Stabilize theme viewer screenshot tests (#45768) @Janpot
+- [code-infra] Remove modern bundles (#45808) @Janpot
+- Update buildTypes script to optionally remove css imports (#45835) @brijeshb42
+- Allow repo to be accepted as an argument for releaseTag (#45801) @brijeshb42
+- Update scripts to support base-ui (#45784) @brijeshb42
+- Sync scorecards.yml across codebase (4de5076) @oliviertassinari
+- Remove baseUrl and skipLibCheck (#45806) @Janpot
+- [docs-infra] Fix redirect styles pages (#45848) @siriwatknp
+- [docs-infra] Remove false-positive Vale rules (#45843) @oliviertassinari
+- [docs-infra] Make sure Next.js can find package.json through its aliases (#45840) @Janpot
+- [docs-infra] Fix Next.js brand name coverage (6915f8d) @oliviertassinari
+- [docs-infra] Fix layout shift between MIT and commercial pages (#45760) @oliviertassinari
+- [docs-infra] Non breaking space for ESM (#45758) @oliviertassinari
+- [support-infra] Remove dead 'workflow_call:' (#45736) @oliviertassinari
+- [utils] Support cleanup callbacks in useForkRef (#45621) @DiegoAndai
+
+### Docs
+
+- Fix pigment vite integration example (#44746) @brijeshb42
+- Update migration instructions and codemod references for deprecated APIs (#45793) @sai6855
+- Add TanStack Router routing example (#44930) @vetledv
+- Fix layout shifting in icons page (#45779) @sai6855
+- Fix migration instructions (#45762) @oliviertassinari
+- Fix wrong TypeScript support version (#45761) @oliviertassinari
+- Fix link to mui-joy/src/styles/components.d.ts (#45763) @oliviertassinari
+- Fix 301 link (ae94c40) @oliviertassinari
+- Fix 301 links (abd8f63) @oliviertassinari
+- Fix 301 redirection (c7658de) @oliviertassinari
+- [nextjs] Migrate from deprecated "legacyBehavior" prop (#44871) @oliviertassinari
+- [nextjs] Document CSP for Next.js Pages Router (#45798) @Grohden
+
+All contributors of this release in alphabetical order: @brijeshb42, @DiegoAndai, @Grohden, @imadx, @Janpot, @Kartik-Murthy, @oliviertassinari, @renovate[bot], @sai6855, @siriwatknp, @vetledv, @ZeeshanTamboli
+
 ## 7.0.1
 
 <!-- generated comparing v7.0.0..master -->

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