[material-ui][Stepper] Convert to support CSS extraction

apps/pigment-css-next-app/src/app/material-ui/react-stepper/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import CustomizedSteppers from '../../../../../../docs/data/material/components/steppers/CustomizedSteppers';
+import DotsMobileStepper from '../../../../../../docs/data/material/components/steppers/DotsMobileStepper';
+import HorizontalLinearAlternativeLabelStepper from '../../../../../../docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper';
+import HorizontalLinearStepper from '../../../../../../docs/data/material/components/steppers/HorizontalLinearStepper';
+import HorizontalNonLinearStepper from '../../../../../../docs/data/material/components/steppers/HorizontalNonLinearStepper';
+import HorizontalStepperWithError from '../../../../../../docs/data/material/components/steppers/HorizontalStepperWithError';
+import ProgressMobileStepper from '../../../../../../docs/data/material/components/steppers/ProgressMobileStepper';
+import SwipeableTextMobileStepper from '../../../../../../docs/data/material/components/steppers/SwipeableTextMobileStepper';
+import TextMobileStepper from '../../../../../../docs/data/material/components/steppers/TextMobileStepper';
+import VerticalLinearStepper from '../../../../../../docs/data/material/components/steppers/VerticalLinearStepper';
+
+export default function Steppers() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Customized Steppers</h2>
+        <div className="demo-container">
+          <CustomizedSteppers />
+        </div>
+      </section>
+      <section>
+        <h2> Dots Mobile Stepper</h2>
+        <div className="demo-container">
+          <DotsMobileStepper />
+        </div>
+      </section>
+      <section>
+        <h2> Horizontal Linear Alternative Label Stepper</h2>
+        <div className="demo-container">
+          <HorizontalLinearAlternativeLabelStepper />
+        </div>
+      </section>
+      <section>
+        <h2> Horizontal Linear Stepper</h2>
+        <div className="demo-container">
+          <HorizontalLinearStepper />
+        </div>
+      </section>
+      <section>
+        <h2> Horizontal Non Linear Stepper</h2>
+        <div className="demo-container">
+          <HorizontalNonLinearStepper />
+        </div>
+      </section>
+      <section>
+        <h2> Horizontal Stepper With Error</h2>
+        <div className="demo-container">
+          <HorizontalStepperWithError />
+        </div>
+      </section>
+      <section>
+        <h2> Progress Mobile Stepper</h2>
+        <div className="demo-container">
+          <ProgressMobileStepper />
+        </div>
+      </section>
+      <section>
+        <h2> Swipeable Text Mobile Stepper</h2>
+        <div className="demo-container">
+          <SwipeableTextMobileStepper />
+        </div>
+      </section>
+      <section>
+        <h2> Text Mobile Stepper</h2>
+        <div className="demo-container">
+          <TextMobileStepper />
+        </div>
+      </section>
+      <section>
+        <h2> Vertical Linear Stepper</h2>
+        <div className="demo-container">
+          <VerticalLinearStepper />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

packages/mui-material/src/Step/Step.js

@@ -6,10 +6,11 @@ import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from './StepContext';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getStepUtilityClass } from './stepClasses';
 
+const useThemeProps = createUseThemeProps('MuiStep');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, orientation, alternativeLabel, completed } = ownerState;
 
@@ -33,16 +34,24 @@ const StepRoot = styled('div', {
       ownerState.completed && styles.completed,
     ];
   },
-})(({ ownerState }) => ({
-  ...(ownerState.orientation === 'horizontal' && {
-    paddingLeft: 8,
-    paddingRight: 8,
-  }),
-  ...(ownerState.alternativeLabel && {
-    flex: 1,
-    position: 'relative',
-  }),
-}));
+})({
+  variants: [
+    {
+      props: { orientation: 'horizontal' },
+      style: {
+        paddingLeft: 8,
+        paddingRight: 8,
+      },
+    },
+    {
+      props: { alternativeLabel: true },
+      style: {
+        flex: 1,
+        position: 'relative',
+      },
+    },
+  ],
+});
 
 const Step = React.forwardRef(function Step(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiStep' });

packages/mui-material/src/StepButton/StepButton.js

@@ -3,15 +3,16 @@ 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 ButtonBase from '../ButtonBase';
 import StepLabel from '../StepLabel';
 import isMuiElement from '../utils/isMuiElement';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import stepButtonClasses, { getStepButtonUtilityClass } from './stepButtonClasses';
 
+const useThemeProps = createUseThemeProps('MuiStepButton');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, orientation } = ownerState;
 
@@ -35,20 +36,25 @@ const StepButtonRoot = styled(ButtonBase, {
       styles[ownerState.orientation],
     ];
   },
-})(({ ownerState }) => ({
+})({
   width: '100%',
   padding: '24px 16px',
   margin: '-24px -16px',
   boxSizing: 'content-box',
-  ...(ownerState.orientation === 'vertical' && {
-    justifyContent: 'flex-start',
-    padding: '8px',
-    margin: '-8px',
-  }),
   [`& .${stepButtonClasses.touchRipple}`]: {
     color: 'rgba(0, 0, 0, 0.3)',
   },
-}));
+  variants: [
+    {
+      props: { orientation: 'vertical' },
+      style: {
+        justifyContent: 'flex-start',
+        padding: '8px',
+        margin: '-8px',
+      },
+    },
+  ],
+});
 
 const StepButton = React.forwardRef(function StepButton(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiStepButton' });

packages/mui-material/src/StepConnector/StepConnector.js

@@ -4,12 +4,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepConnectorUtilityClass } from './stepConnectorClasses';
 
+const useThemeProps = createUseThemeProps('MuiStepConnector');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, orientation, alternativeLabel, active, completed, disabled } = ownerState;
 
@@ -41,18 +42,26 @@ const StepConnectorRoot = styled('div', {
       ownerState.completed && styles.completed,
     ];
   },
-})(({ ownerState }) => ({
+})({
   flex: '1 1 auto',
-  ...(ownerState.orientation === 'vertical' && {
-    marginLeft: 12, // half icon
-  }),
-  ...(ownerState.alternativeLabel && {
-    position: 'absolute',
-    top: 8 + 4,
-    left: 'calc(-50% + 20px)',
-    right: 'calc(50% + 20px)',
-  }),
-}));
+  variants: [
+    {
+      props: { orientation: 'vertical' },
+      style: {
+        marginLeft: 12, // half icon
+      },
+    },
+    {
+      props: { alternativeLabel: true },
+      style: {
+        position: 'absolute',
+        top: 8 + 4,
+        left: 'calc(-50% + 20px)',
+        right: 'calc(50% + 20px)',
+      },
+    },
+  ],
+});
 
 const StepConnectorLine = styled('span', {
   name: 'MuiStepConnector',
@@ -62,21 +71,29 @@ const StepConnectorLine = styled('span', {
 
     return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]];
   },
-})(({ ownerState, theme }) => {
+})(({ theme }) => {
   const borderColor =
     theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
   return {
     display: 'block',
     borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor,
-    ...(ownerState.orientation === 'horizontal' && {
-      borderTopStyle: 'solid',
-      borderTopWidth: 1,
-    }),
-    ...(ownerState.orientation === 'vertical' && {
-      borderLeftStyle: 'solid',
-      borderLeftWidth: 1,
-      minHeight: 24,
-    }),
+    variants: [
+      {
+        props: { orientation: 'horizontal' },
+        style: {
+          borderTopStyle: 'solid',
+          borderTopWidth: 1,
+        },
+      },
+      {
+        props: { orientation: 'vertical' },
+        style: {
+          borderLeftStyle: 'solid',
+          borderLeftWidth: 1,
+          minHeight: 24,
+        },
+      },
+    ],
   };
 });
 

packages/mui-material/src/StepContent/StepContent.js

@@ -3,13 +3,14 @@ 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 Collapse from '../Collapse';
 import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import { getStepContentUtilityClass } from './stepContentClasses';
 
+const useThemeProps = createUseThemeProps('MuiStepContent');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, last } = ownerState;
 
@@ -26,7 +27,7 @@ const StepContentRoot = styled('div', {
 
     return [styles.root, ownerState.last && styles.last];
   },
-})(({ ownerState, theme }) => ({
+})(({ theme }) => ({
   marginLeft: 12, // half icon
   paddingLeft: 8 + 12, // margin + half icon
   paddingRight: 8,
@@ -35,9 +36,14 @@ const StepContentRoot = styled('div', {
     : `1px solid ${
         theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
       }`,
-  ...(ownerState.last && {
-    borderLeft: 'none',
-  }),
+  variants: [
+    {
+      props: { last: true },
+      style: {
+        borderLeft: 'none',
+      },
+    },
+  ],
 }));
 
 const StepContentTransition = styled(Collapse, {

packages/mui-material/src/StepIcon/StepIcon.js

@@ -3,13 +3,14 @@ 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 CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
 import SvgIcon from '../SvgIcon';
 import stepIconClasses, { getStepIconUtilityClass } from './stepIconClasses';
 
+const useThemeProps = createUseThemeProps('MuiStepIcon');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, active, completed, error } = ownerState;