@mui/material 5.15.14 → 6.0.0-alpha.0

package/legacy/Rating/Rating.js

@@ -18,8 +18,7 @@ import StarBorder from '../internal/svg-icons/StarBorder';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
-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";
 function getDecimalPrecision(num) {
   var decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;

package/legacy/Select/SelectInput.js

@@ -23,8 +23,7 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import selectClasses, { getSelectUtilityClasses } from './selectClasses';
-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";
 var SelectSelect = styled('div', {
   name: 'MuiSelect',
   slot: 'Select',

package/legacy/Slider/Slider.js

@@ -19,8 +19,7 @@ import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import BaseSliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
-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";
 var useThemeProps = createUseThemeProps('MuiSlider');
 function Identity(x) {
   return x;

package/legacy/Slider/SliderValueLabel.js

@@ -4,8 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import sliderClasses from './sliderClasses';
-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";
 var useValueLabelClasses = function useValueLabelClasses(props) {
   var open = props.open;
   var utilityClasses = {

package/legacy/SnackbarContent/SnackbarContent.js

@@ -12,8 +12,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Paper from '../Paper';
 import { getSnackbarContentUtilityClass } from './snackbarContentClasses';
-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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/SpeedDial/SpeedDial.js

@@ -21,8 +21,7 @@ import isMuiElement from '../utils/isMuiElement';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import speedDialClasses, { getSpeedDialUtilityClass } from './speedDialClasses';
-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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     open = ownerState.open,

package/legacy/SpeedDialAction/SpeedDialAction.js

@@ -15,8 +15,7 @@ import Fab from '../Fab';
 import Tooltip from '../Tooltip';
 import capitalize from '../utils/capitalize';
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
-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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var open = ownerState.open,
     tooltipPlacement = ownerState.tooltipPlacement,

package/legacy/SpeedDialIcon/SpeedDialIcon.js

@@ -11,8 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import AddIcon from '../internal/svg-icons/Add';
 import speedDialIconClasses, { getSpeedDialIconUtilityClass } from './speedDialIconClasses';
-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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     open = ownerState.open,

package/legacy/Step/Step.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -9,11 +9,10 @@ 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';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiStep');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     orientation = ownerState.orientation,
@@ -31,15 +30,24 @@ var StepRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({}, 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'
+    }
+  }]
 });
 var Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
   var props = useThemeProps({

package/legacy/StepButton/StepButton.js

@@ -1,14 +1,13 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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';
@@ -16,6 +15,7 @@ import StepperContext from '../Stepper/StepperContext';
 import StepContext from '../Step/StepContext';
 import stepButtonClasses, { getStepButtonUtilityClass } from './stepButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiStepButton');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     orientation = ownerState.orientation;
@@ -32,21 +32,23 @@ var StepButtonRoot = styled(ButtonBase, {
     var ownerState = props.ownerState;
     return [_defineProperty({}, "& .".concat(stepButtonClasses.touchRipple), styles.touchRipple), styles.root, styles[ownerState.orientation]];
   }
-})(function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  return _extends({
-    width: '100%',
-    padding: '24px 16px',
-    margin: '-24px -16px',
-    boxSizing: 'content-box'
-  }, ownerState.orientation === 'vertical' && {
+})(_defineProperty(_defineProperty({
+  width: '100%',
+  padding: '24px 16px',
+  margin: '-24px -16px',
+  boxSizing: 'content-box'
+}, "& .".concat(stepButtonClasses.touchRipple), {
+  color: 'rgba(0, 0, 0, 0.3)'
+}), "variants", [{
+  props: {
+    orientation: 'vertical'
+  },
+  style: {
     justifyContent: 'flex-start',
     padding: '8px',
     margin: '-8px'
-  }, _defineProperty({}, "& .".concat(stepButtonClasses.touchRipple), {
-    color: 'rgba(0, 0, 0, 0.3)'
-  }));
-});
+  }
+}]));
 var StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref) {
   var props = useThemeProps({
     props: inProps,

package/legacy/StepConnector/StepConnector.js

@@ -1,18 +1,18 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 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';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiStepConnector');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     orientation = ownerState.orientation,
@@ -33,18 +33,26 @@ var StepConnectorRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    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)'
-  });
+})({
+  flex: '1 1 auto',
+  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)'
+    }
+  }]
 });
 var StepConnectorLine = styled('span', {
   name: 'MuiStepConnector',
@@ -53,21 +61,31 @@ var StepConnectorLine = styled('span', {
     var ownerState = props.ownerState;
     return [styles.line, styles["line".concat(capitalize(ownerState.orientation))]];
   }
-})(function (_ref2) {
-  var ownerState = _ref2.ownerState,
-    theme = _ref2.theme;
+})(function (_ref) {
+  var theme = _ref.theme;
   var borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
-  return _extends({
+  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
-  });
+    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor,
+    variants: [{
+      props: {
+        orientation: 'horizontal'
+      },
+      style: {
+        borderTopStyle: 'solid',
+        borderTopWidth: 1
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: {
+        borderLeftStyle: 'solid',
+        borderLeftWidth: 1,
+        minHeight: 24
+      }
+    }]
+  };
 });
 var StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
   var props = useThemeProps({

package/legacy/StepContent/StepContent.js

@@ -1,18 +1,18 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiStepContent');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     last = ownerState.last;
@@ -30,18 +30,23 @@ var StepContentRoot = styled('div', {
     return [styles.root, ownerState.last && styles.last];
   }
 })(function (_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
-  return _extends({
+  var theme = _ref.theme;
+  return {
     marginLeft: 12,
     // half icon
     paddingLeft: 8 + 12,
     // margin + half icon
     paddingRight: 8,
-    borderLeft: theme.vars ? "1px solid ".concat(theme.vars.palette.StepContent.border) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])
-  }, ownerState.last && {
-    borderLeft: 'none'
-  });
+    borderLeft: theme.vars ? "1px solid ".concat(theme.vars.palette.StepContent.border) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]),
+    variants: [{
+      props: {
+        last: true
+      },
+      style: {
+        borderLeft: 'none'
+      }
+    }]
+  };
 });
 var StepContentTransition = styled(Collapse, {
   name: 'MuiStepContent',

package/legacy/StepIcon/StepIcon.js

@@ -8,14 +8,13 @@ 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';
-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";
+var useThemeProps = createUseThemeProps('MuiStepIcon');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     active = ownerState.active,

package/legacy/StepLabel/StepLabel.js

@@ -1,20 +1,21 @@
 'use client';
 
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import StepContext from '../Step/StepContext';
 import StepIcon from '../StepIcon';
 import StepperContext from '../Stepper/StepperContext';
-import StepContext from '../Step/StepContext';
+import { createUseThemeProps, styled } from '../zero-styled';
 import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import useSlot from '../utils/useSlot';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiStepLabel');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     orientation = ownerState.orientation,
@@ -38,28 +39,30 @@ var StepLabelRoot = styled('span', {
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.orientation]];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends(_defineProperty(_defineProperty({
-    display: 'flex',
-    alignItems: 'center'
-  }, "&.".concat(stepLabelClasses.alternativeLabel), {
-    flexDirection: 'column'
-  }), "&.".concat(stepLabelClasses.disabled), {
-    cursor: 'default'
-  }), ownerState.orientation === 'vertical' && {
+})(_defineProperty(_defineProperty(_defineProperty({
+  display: 'flex',
+  alignItems: 'center'
+}, "&.".concat(stepLabelClasses.alternativeLabel), {
+  flexDirection: 'column'
+}), "&.".concat(stepLabelClasses.disabled), {
+  cursor: 'default'
+}), "variants", [{
+  props: {
+    orientation: 'vertical'
+  },
+  style: {
     textAlign: 'left',
     padding: '8px 0'
-  });
-});
+  }
+}]));
 var StepLabelLabel = styled('span', {
   name: 'MuiStepLabel',
   slot: 'Label',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.label;
   }
-})(function (_ref2) {
-  var theme = _ref2.theme;
+})(function (_ref) {
+  var theme = _ref.theme;
   return _extends({}, theme.typography.body2, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'block',
     transition: theme.transitions.create('color', {
@@ -83,24 +86,22 @@ var StepLabelIconContainer = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.iconContainer;
   }
-})(function () {
-  return _defineProperty({
-    flexShrink: 0,
-    // Fix IE11 issue
-    display: 'flex',
-    paddingRight: 8
-  }, "&.".concat(stepLabelClasses.alternativeLabel), {
-    paddingRight: 0
-  });
-});
+})(_defineProperty({
+  flexShrink: 0,
+  // Fix IE11 issue
+  display: 'flex',
+  paddingRight: 8
+}, "&.".concat(stepLabelClasses.alternativeLabel), {
+  paddingRight: 0
+}));
 var StepLabelLabelContainer = styled('span', {
   name: 'MuiStepLabel',
   slot: 'LabelContainer',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.labelContainer;
   }
-})(function (_ref4) {
-  var theme = _ref4.theme;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return _defineProperty({
     width: '100%',
     color: (theme.vars || theme).palette.text.secondary
@@ -109,7 +110,6 @@ var StepLabelLabelContainer = styled('span', {
   });
 });
 var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
-  var _slotProps$label;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiStepLabel'
@@ -122,11 +122,13 @@ var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
     error = _props$error === void 0 ? false : _props$error,
     iconProp = props.icon,
     optional = props.optional,
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
     _props$slotProps = props.slotProps,
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     StepIconComponentProp = props.StepIconComponent,
     StepIconProps = props.StepIconProps,
-    other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"]);
+    other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "error", "icon", "optional", "slots", "slotProps", "StepIconComponent", "StepIconProps"]);
   var _React$useContext = React.useContext(StepperContext),
     alternativeLabel = _React$useContext.alternativeLabel,
     orientation = _React$useContext.orientation;
@@ -149,7 +151,18 @@ var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
     orientation: orientation
   });
   var classes = useUtilityClasses(ownerState);
-  var labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
+  var externalForwardedProps = {
+    slots: slots,
+    slotProps: _extends({}, componentsProps, slotProps)
+  };
+  var _useSlot = useSlot('label', {
+      elementType: StepLabelLabel,
+      externalForwardedProps: externalForwardedProps,
+      ownerState: ownerState
+    }),
+    _useSlot2 = _slicedToArray(_useSlot, 2),
+    LabelSlot = _useSlot2[0],
+    labelProps = _useSlot2[1];
   return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -167,10 +180,8 @@ var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
     }) : null, /*#__PURE__*/_jsxs(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
-      children: [children ? /*#__PURE__*/_jsx(StepLabelLabel, _extends({
-        ownerState: ownerState
-      }, labelSlotProps, {
-        className: clsx(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
+      children: [children ? /*#__PURE__*/_jsx(LabelSlot, _extends({}, labelProps, {
+        className: clsx(classes.label, labelProps == null ? void 0 : labelProps.className),
         children: children
       })) : null, optional]
     })]
@@ -196,6 +207,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
   /**
    * The props used for each slot inside.
    * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps: PropTypes.shape({
     label: PropTypes.object
@@ -218,7 +230,14 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: PropTypes.shape({
-    label: PropTypes.object
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
@@ -233,5 +252,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-StepLabel.muiName = 'StepLabel';
+if (StepLabel) {
+  StepLabel.muiName = 'StepLabel';
+}
 export default StepLabel;

package/legacy/Stepper/Stepper.js

@@ -1,18 +1,18 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getStepperUtilityClass } from './stepperClasses';
 import StepConnector from '../StepConnector';
 import StepperContext from './StepperContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiStepper');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var orientation = ownerState.orientation,
     alternativeLabel = ownerState.alternativeLabel,
@@ -29,18 +29,31 @@ var StepperRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'flex'
-  }, ownerState.orientation === 'horizontal' && {
-    flexDirection: 'row',
-    alignItems: 'center'
-  }, ownerState.orientation === 'vertical' && {
-    flexDirection: 'column'
-  }, ownerState.alternativeLabel && {
-    alignItems: 'flex-start'
-  });
+})({
+  display: 'flex',
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }]
 });
 var defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
 var Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {