@mui/material 5.15.14 → 6.0.0-alpha.0

package/ButtonBase/TouchRipple.js

@@ -3,11 +3,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["center", "classes", "className"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
@@ -21,7 +16,7 @@ import touchRippleClasses from './touchRippleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DURATION = 550;
 export const DELAY_RIPPLE = 80;
-const enterKeyframe = keyframes(_t || (_t = _`
+const enterKeyframe = keyframes`
   0% {
     transform: scale(0);
     opacity: 0.1;
@@ -31,8 +26,8 @@ const enterKeyframe = keyframes(_t || (_t = _`
     transform: scale(1);
     opacity: 0.3;
   }
-`));
-const exitKeyframe = keyframes(_t2 || (_t2 = _`
+`;
+const exitKeyframe = keyframes`
   0% {
     opacity: 1;
   }
@@ -40,8 +35,8 @@ const exitKeyframe = keyframes(_t2 || (_t2 = _`
   100% {
     opacity: 0;
   }
-`));
-const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
+`;
+const pulsateKeyframe = keyframes`
   0% {
     transform: scale(1);
   }
@@ -53,7 +48,7 @@ const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
   100% {
     transform: scale(1);
   }
-`));
+`;
 export const TouchRippleRoot = styled('span', {
   name: 'MuiTouchRipple',
   slot: 'Root'
@@ -74,23 +69,27 @@ export const TouchRippleRoot = styled('span', {
 export const TouchRippleRipple = styled(Ripple, {
   name: 'MuiTouchRipple',
   slot: 'Ripple'
-})(_t4 || (_t4 = _`
+})`
   opacity: 0;
   position: absolute;
 
-  &.${0} {
+  &.${touchRippleClasses.rippleVisible} {
     opacity: 0.3;
     transform: scale(1);
-    animation-name: ${0};
-    animation-duration: ${0}ms;
-    animation-timing-function: ${0};
+    animation-name: ${enterKeyframe};
+    animation-duration: ${DURATION}ms;
+    animation-timing-function: ${({
+  theme
+}) => theme.transitions.easing.easeInOut};
   }
 
-  &.${0} {
-    animation-duration: ${0}ms;
+  &.${touchRippleClasses.ripplePulsate} {
+    animation-duration: ${({
+  theme
+}) => theme.transitions.duration.shorter}ms;
   }
 
-  & .${0} {
+  & .${touchRippleClasses.child} {
     opacity: 1;
     display: block;
     width: 100%;
@@ -99,33 +98,29 @@ export const TouchRippleRipple = styled(Ripple, {
     background-color: currentColor;
   }
 
-  & .${0} {
+  & .${touchRippleClasses.childLeaving} {
     opacity: 0;
-    animation-name: ${0};
-    animation-duration: ${0}ms;
-    animation-timing-function: ${0};
+    animation-name: ${exitKeyframe};
+    animation-duration: ${DURATION}ms;
+    animation-timing-function: ${({
+  theme
+}) => theme.transitions.easing.easeInOut};
   }
 
-  & .${0} {
+  & .${touchRippleClasses.childPulsate} {
     position: absolute;
     /* @noflip */
     left: 0px;
     top: 0;
-    animation-name: ${0};
+    animation-name: ${pulsateKeyframe};
     animation-duration: 2500ms;
-    animation-timing-function: ${0};
+    animation-timing-function: ${({
+  theme
+}) => theme.transitions.easing.easeInOut};
     animation-iteration-count: infinite;
     animation-delay: 200ms;
   }
-`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({
-  theme
-}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({
-  theme
-}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({
-  theme
-}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({
-  theme
-}) => theme.transitions.easing.easeInOut);
+`;
 
 /**
  * @ignore - internal component.
@@ -194,11 +189,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       center = centerProp || options.pulsate,
       fakeElement = false // For test purposes
     } = options;
-    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
+    if (event?.type === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
       return;
     }
-    if ((event == null ? void 0 : event.type) === 'touchstart') {
+    if (event?.type === 'touchstart') {
       ignoringMouseDown.current = true;
     }
     const element = fakeElement ? null : container.current;
@@ -238,7 +233,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     }
 
     // Touche devices
-    if (event != null && event.touches) {
+    if (event?.touches) {
       // check that this isn't another touchstart due to multitouch
       // otherwise we will only clear a single timer when unmounting while two
       // are running
@@ -282,7 +277,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
 
     // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
-    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
+    if (event?.type === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
       startTimer.start(0, () => {

package/ButtonGroup/ButtonGroup.js

@@ -49,7 +49,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
+    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${capitalize(color)}`],
     grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],

package/ButtonGroup/buttonGroupClasses.d.ts

@@ -15,43 +15,83 @@ export interface ButtonGroupClasses {
     firstButton: string;
     /** Styles applied to the root element if `fullWidth={true}`. */
     fullWidth: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
     /** Styles applied to the root element if `orientation="vertical"`. */
     vertical: string;
     /** Styles applied to the children. */
     grouped: string;
-    /** Styles applied to the children if `orientation="horizontal"`. */
+    /** Styles applied to the root element if `color="primary"` */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"` */
+    colorSecondary: string;
+    /** Styles applied to the children if `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedHorizontal: string;
-    /** Styles applied to the children if `orientation="vertical"`. */
+    /** Styles applied to the children if `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedVertical: string;
-    /** Styles applied to the children if `variant="text"`. */
+    /** Styles applied to the children if `variant="text"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedText: string;
-    /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */
+    /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextHorizontal: string;
-    /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. */
+    /** Styles applied to the children if `variant="text"` and `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextVertical: string;
-    /** Styles applied to the children if `variant="text"` and `color="primary"`. */
+    /** Styles applied to the children if `variant="text"` and `color="primary"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextPrimary: string;
-    /** Styles applied to the children if `variant="text"` and `color="secondary"`. */
+    /** Styles applied to the children if `variant="text"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextSecondary: string;
-    /** Styles applied to the children if `variant="outlined"`. */
+    /** Styles applied to the children if `variant="outlined"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlined: string;
-    /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */
+    /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedHorizontal: string;
-    /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */
+    /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedVertical: string;
-    /** Styles applied to the children if `variant="outlined"` and `color="primary"`. */
+    /** Styles applied to the children if `variant="outlined"` and `color="primary"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedPrimary: string;
-    /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */
+    /** Styles applied to the children if `variant="outlined"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedSecondary: string;
-    /** Styles applied to the children if `variant="contained"`. */
+    /** Styles applied to the children if `variant="contained"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContained: string;
-    /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */
+    /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedHorizontal: string;
-    /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */
+    /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedVertical: string;
-    /** Styles applied to the children if `variant="contained"` and `color="primary"`. */
+    /** Styles applied to the children if `variant="contained"` and `color="primary"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedPrimary: string;
-    /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */
+    /** Styles applied to the children if `variant="contained"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedSecondary: string;
     /** Styles applied to the last button in the button group. */
     lastButton: string;

package/ButtonGroup/buttonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }
-const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
+const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'horizontal', 'vertical', 'colorPrimary', 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
 export default buttonGroupClasses;

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.0
+
+<!-- generated comparing v5.15.14..next -->
+
+_Mar 26, 2024_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔥 Converted 10+ Material UI components to support static CSS extraction
+- ⬅️ Added RTL support in Pigment CSS (#41570) @brijeshb42
+
+### `@mui/material@6.0.0-alpha.0`
+
+- [BottomNavigation] Convert to support CSS extraction (#41612) @aacevski
+- [AvatarGroup] Convert to support CSS extraction (#41485) @zanivan
+- [Backdrop] Convert to support CSS extraction (#41581) @aacevski
+- [Breadcrumbs] Convert to support CSS extraction (#41496) @aacevski
+- [Card] Convert to support CSS extraction (#41580) @aacevski
+- [Divider] Convert to support CSS extraction (#41366) @sai6855
+- [FormControl] Convert to support CSS extraction (#41613) @aacevski
+- [FormGroup] Convert to support CSS extraction (#41614) @aacevski
+- [MobileStepper] Convert to support CSS extraction (#41533) @aacevski
+- [Modal] Support CSS extraction (#41483) @sai6855
+- [Popover] Convert to support CSS extraction (#41564) @aacevski
+- [Stepper] Convert to support CSS extraction (#41546) @aacevski
+- [Autocomplete] Display options provided to the `options` prop even if loading is true (#41634) @nekoya
+- [Backdrop] Deprecate TransitionComponent (#40677) @harry-whorlow
+- [ButtonGroup] Deprecate composed classes (#41259) @sai6855
+- [StepLabel] Deprecate `componentProps` prop (#41321) @sai6855
+- [Chip] Convert to support CSS extraction (#41592) @DiegoAndai
+
+### `@pigment-css/react@0.0.4`
+
+- Fix evaluation of undefined variables (#41569) @siriwatknp
+- Fix react-modal demos location (#41560) @sai6855
+- [react] RTL Support (#41570) @brijeshb42
+
+### `@mui/system@6.0.0-alpha.0`
+
+- [core] Standardize index pattern (#41574) @DiegoAndai
+- Fix typo to avoid infinite recursion in function call (#41616) @michael-land
+- Move stylesheet generator to `extendTheme` (#41446) @siriwatknp
+
+### Docs
+
+- [joy-ui] Refresh the marketing example on the Color Inversion page (#41497) @cipherlogs
+- [material-ui] Add v5 to v6 migration guide (#41561) @DiegoAndai
+- [system] Add v5 to v6 migration guide (#41575) @DiegoAndai
+- [material-ui][Slider] Remove `valueLabelFormat` from restricted values demo so that the tooltip thumb label displays the same as the value text (#41567) @StylesTrip
+- [pigment-css] Update the RTL section on the readme (#41576) @danilo-leal
+
+### Core
+
+- [blog] Update the callout (#41645) @cherniavskii
+- [blog] Link to Romain's blog post in MUI X v7 announcement post (#41640) @cherniavskii
+- [blog] Blog post with MUI X v7.0.0 annoucement (#41563) @joserodolfofreitas
+- [blog] Add post about remote (#41565) @danilo-leal
+- [core] Restore the pnpm-lock.yaml (#41643) @mnajdova
+- [core] Fix failing CI steps (#41636) @mnajdova
+- [core] Update browser support versions (#41568) @siriwatknp
+- [core] Add instructions to deploying docs guide (#41582) @DiegoAndai
+- [core] Add comment explaining the frequency of no-response action runs (#41555) @michaldudak
+- [core] Init the next branch (#41552) @mnajdova
+- [core] Lower the frequency of no-response action runs (#41553) @michaldudak
+- [core] Update peerDependencies ranges to include v6 packages (#41662) @michaldudak
+- [core] Run pnpm dedupe (#41658) @michaldudak
+- [core] Fix dedupe check (#41657) @Janpot
+- [pigment-css][demo] Add index page for material-ui (#41577) @brijeshb42
+- [pigment-css][demo] Remove app specific pnpm workspace (#41393) @brijeshb42
+- [docs] Add notification for MUI X v7 blog post (#41587) @cherniavskii
+- [docs] MUI X v7 blog post annoucement followup (#41601) @joserodolfofreitas
+- [docs] Update the installation guides to use the next tag (#41558) @mnajdova
+- [docs][material-ui] Fix typo in CSS theme variables customization (#41632) @ZeeshanTamboli
+- [material-ui][docs] Remove deleted page from the sidenav (#41594) @danilo-leal
+- [website] Update pricing table (#41595) @cherniavskii
+- [website] Add stray design adjustments throughout the site (#41547) @danilo-leal
+
+All contributors of this release in alphabetical order: @aacevski, @brijeshb42, @cherniavskii, @cipherlogs, @danilo-leal, @DiegoAndai, @harry-whorlow, @Janpot, @joserodolfofreitas, @michael-land, @michaldudak, @mnajdova, @nekoya, @sai6855, @siriwatknp, @StylesTrip, @zanivan, @ZeeshanTamboli
+
 ## v5.15.14
 
 <!-- generated comparing v5.15.13..master -->
@@ -9,7 +88,7 @@ _Mar 18, 2024_
 A big thanks to the 15 contributors who made this release possible.
 This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
 
-### `@mui/material@5.15.13`
+### `@mui/material@5.15.14`
 
 - [Accordion] Convert to support CSS extraction (#41221) @mnajdova
 - &#8203;<!-- 24 -->[Autocomplete] Convert to support CSS extraction (#40330) @mnajdova

package/Card/Card.js

@@ -8,11 +8,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Paper from '../Paper';
 import { getCardUtilityClass } from './cardClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCard');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -26,10 +26,8 @@ const CardRoot = styled(Paper, {
   name: 'MuiCard',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(() => {
-  return {
-    overflow: 'hidden'
-  };
+})({
+  overflow: 'hidden'
 });
 const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
   const props = useThemeProps({

package/CardActionArea/CardActionArea.js

@@ -7,12 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardActionArea');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/CardActions/CardActions.js

@@ -1,16 +1,16 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["disableSpacing", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,17 +30,21 @@ const CardActionsRoot = styled('div', {
     } = props;
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'flex',
   alignItems: 'center',
-  padding: 8
-}, !ownerState.disableSpacing && {
-  '& > :not(style) ~ :not(style)': {
-    marginLeft: 8
-  }
-}));
+  padding: 8,
+  variants: [{
+    props: {
+      disableSpacing: false
+    },
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
+    }
+  }]
+});
 const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/CardContent/CardContent.js

@@ -7,10 +7,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardContentUtilityClass } from './cardContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -24,13 +24,11 @@ const CardContentRoot = styled('div', {
   name: 'MuiCardContent',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(() => {
-  return {
-    padding: 16,
-    '&:last-child': {
-      paddingBottom: 24
-    }
-  };
+})({
+  padding: 16,
+  '&:last-child': {
+    paddingBottom: 24
+  }
 });
 const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
   const props = useThemeProps({

package/CardHeader/CardHeader.js

@@ -8,11 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardHeader');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/CardMedia/CardMedia.js

@@ -1,17 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "component", "image", "src", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardMediaUtilityClass } from './cardMediaClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardMedia');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,19 +36,28 @@ const CardMediaRoot = styled('div', {
     } = ownerState;
     return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'block',
   backgroundSize: 'cover',
   backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center'
-}, ownerState.isMediaComponent && {
-  width: '100%'
-}, ownerState.isImageComponent && {
-  // ⚠️ object-fit is not supported by IE11.
-  objectFit: 'cover'
-}));
+  backgroundPosition: 'center',
+  variants: [{
+    props: {
+      isMediaComponent: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      isImageComponent: true
+    },
+    style: {
+      // ⚠️ object-fit is not supported by IE11.
+      objectFit: 'cover'
+    }
+  }]
+});
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 const IMAGE_COMPONENTS = ['picture', 'img'];
 const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref) {

package/Checkbox/Checkbox.js

@@ -66,7 +66,6 @@ const defaultCheckedIcon = /*#__PURE__*/_jsx(CheckBoxIcon, {});
 const defaultIcon = /*#__PURE__*/_jsx(CheckBoxOutlineBlankIcon, {});
 const defaultIndeterminateIcon = /*#__PURE__*/_jsx(IndeterminateCheckBoxIcon, {});
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
-  var _icon$props$fontSize, _indeterminateIcon$pr;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiCheckbox'
@@ -96,10 +95,10 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       'data-indeterminate': indeterminate
     }, inputProps),
     icon: /*#__PURE__*/React.cloneElement(icon, {
-      fontSize: (_icon$props$fontSize = icon.props.fontSize) != null ? _icon$props$fontSize : size
+      fontSize: icon.props.fontSize ?? size
     }),
     checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
-      fontSize: (_indeterminateIcon$pr = indeterminateIcon.props.fontSize) != null ? _indeterminateIcon$pr : size
+      fontSize: indeterminateIcon.props.fontSize ?? size
     }),
     ownerState: ownerState,
     ref: ref,