@mui/material 5.15.14 → 6.0.0-alpha.0

package/modern/MobileStepper/MobileStepper.js

@@ -1,7 +1,7 @@
 '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 = ["activeStep", "backButton", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -11,11 +11,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
 import LinearProgress from '../LinearProgress';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import { getMobileStepperUtilityClass } from './mobileStepperClasses';
-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";
+const useThemeProps = createUseThemeProps('MuiMobileStepper');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,38 +40,55 @@ const MobileStepperRoot = styled(Paper, {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
   background: (theme.vars || theme).palette.background.default,
-  padding: 8
-}, ownerState.position === 'bottom' && {
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  zIndex: (theme.vars || theme).zIndex.mobileStepper
-}, ownerState.position === 'top' && {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  zIndex: (theme.vars || theme).zIndex.mobileStepper
+  padding: 8,
+  variants: [{
+    props: ({
+      position
+    }) => position === 'top' || position === 'bottom',
+    style: {
+      position: 'fixed',
+      left: 0,
+      right: 0,
+      zIndex: (theme.vars || theme).zIndex.mobileStepper
+    }
+  }, {
+    props: {
+      position: 'top'
+    },
+    style: {
+      top: 0
+    }
+  }, {
+    props: {
+      position: 'bottom'
+    },
+    style: {
+      bottom: 0
+    }
+  }]
 }));
 const MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
   slot: 'Dots',
   overridesResolver: (props, styles) => styles.dots
-})(({
-  ownerState
-}) => _extends({}, ownerState.variant === 'dots' && {
-  display: 'flex',
-  flexDirection: 'row'
-}));
+})({
+  variants: [{
+    props: {
+      variant: 'dots'
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  }]
+});
 const MobileStepperDot = styled('div', {
   name: 'MuiMobileStepper',
   slot: 'Dot',
@@ -83,30 +100,46 @@ const MobileStepperDot = styled('div', {
     return [styles.dot, dotActive && styles.dotActive];
   }
 })(({
-  theme,
-  ownerState,
-  dotActive
-}) => _extends({}, ownerState.variant === 'dots' && _extends({
-  transition: theme.transitions.create('background-color', {
-    duration: theme.transitions.duration.shortest
-  }),
-  backgroundColor: (theme.vars || theme).palette.action.disabled,
-  borderRadius: '50%',
-  width: 8,
-  height: 8,
-  margin: '0 2px'
-}, dotActive && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-})));
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'dots'
+    },
+    style: {
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shortest
+      }),
+      backgroundColor: (theme.vars || theme).palette.action.disabled,
+      borderRadius: '50%',
+      width: 8,
+      height: 8,
+      margin: '0 2px'
+    }
+  }, {
+    props: {
+      variant: 'dots',
+      dotActive: true
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main
+    }
+  }]
+}));
 const MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',
   slot: 'Progress',
   overridesResolver: (props, styles) => styles.progress
-})(({
-  ownerState
-}) => _extends({}, ownerState.variant === 'progress' && {
-  width: '50%'
-}));
+})({
+  variants: [{
+    props: {
+      variant: 'progress'
+    },
+    style: {
+      width: '50%'
+    }
+  }]
+});
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/Modal/Modal.js

@@ -1,7 +1,7 @@
 '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 = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,12 +13,11 @@ import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
-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('MuiModal');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -41,17 +40,22 @@ const ModalRoot = styled('div', {
     return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'fixed',
   zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,
-  left: 0
-}, !ownerState.open && ownerState.exited && {
-  visibility: 'hidden'
+  left: 0,
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open && ownerState.exited,
+    style: {
+      visibility: 'hidden'
+    }
+  }]
 }));
 const ModalBackdrop = styled(Backdrop, {
   name: 'MuiModal',

package/modern/NativeSelect/NativeSelectInput.js

@@ -11,8 +11,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
 import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-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 useUtilityClasses = ownerState => {
   const {
     classes,

package/modern/OutlinedInput/OutlinedInput.js

@@ -14,8 +14,7 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
 import useThemeProps from '../styles/useThemeProps';
-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";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/PaginationItem/PaginationItem.js

@@ -18,8 +18,7 @@ import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
 import styled from '../styles/styled';
-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 overridesResolver = (props, styles) => {
   const {
     ownerState

package/modern/Popover/Popover.js

@@ -15,8 +15,7 @@ import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import debounce from '../utils/debounce';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
@@ -26,6 +25,7 @@ import Modal from '../Modal';
 import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPopover');
 export function getOffsetTop(rect, vertical) {
   let offset = 0;
   if (typeof vertical === 'number') {

package/modern/Radio/RadioButtonIcon.js

@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-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 RadioButtonIconRoot = styled('span', {
   shouldForwardProp: rootShouldForwardProp
 })({

package/modern/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) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;

package/modern/Select/SelectInput.js

@@ -21,8 +21,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";
 const SelectSelect = styled('div', {
   name: 'MuiSelect',
   slot: 'Select',

package/modern/Slider/Slider.js

@@ -18,8 +18,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";
 const useThemeProps = createUseThemeProps('MuiSlider');
 function Identity(x) {
   return x;

package/modern/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";
 const useValueLabelClasses = props => {
   const {
     open

package/modern/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";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/SpeedDial/SpeedDial.js

@@ -22,8 +22,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";
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/modern/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";
 const useUtilityClasses = ownerState => {
   const {
     open,

package/modern/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";
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/modern/Step/Step.js

@@ -1,7 +1,7 @@
 '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 = ["active", "children", "className", "component", "completed", "disabled", "expanded", "index", "last"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -10,11 +10,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";
+const useThemeProps = createUseThemeProps('MuiStep');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,15 +35,25 @@ const StepRoot = styled('div', {
     } = props;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
   }
-})(({
-  ownerState
-}) => _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'
+    }
+  }]
+});
 const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/StepButton/StepButton.js

@@ -1,14 +1,13 @@
 '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", "icon", "optional"];
 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";
+const useThemeProps = createUseThemeProps('MuiStepButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,22 +38,25 @@ const StepButtonRoot = styled(ButtonBase, {
       [`& .${stepButtonClasses.touchRipple}`]: styles.touchRipple
     }, styles.root, styles[ownerState.orientation]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   width: '100%',
   padding: '24px 16px',
   margin: '-24px -16px',
-  boxSizing: 'content-box'
-}, ownerState.orientation === 'vertical' && {
-  justifyContent: 'flex-start',
-  padding: '8px',
-  margin: '-8px'
-}, {
+  boxSizing: 'content-box',
   [`& .${stepButtonClasses.touchRipple}`]: {
     color: 'rgba(0, 0, 0, 0.3)'
-  }
-}));
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      justifyContent: 'flex-start',
+      padding: '8px',
+      margin: '-8px'
+    }
+  }]
+});
 const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/StepConnector/StepConnector.js

@@ -1,19 +1,19 @@
 '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 = ["className"];
 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";
+const useThemeProps = createUseThemeProps('MuiStepConnector');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,18 +38,27 @@ const StepConnectorRoot = styled('div', {
     } = props;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
   }
-})(({
-  ownerState
-}) => _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)'
+    }
+  }]
+});
 const StepConnectorLine = styled('span', {
   name: 'MuiStepConnector',
   slot: 'Line',
@@ -60,21 +69,31 @@ const StepConnectorLine = styled('span', {
     return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]];
   }
 })(({
-  ownerState,
   theme
 }) => {
   const 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
+      }
+    }]
+  };
 });
 const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
   const props = useThemeProps({

package/modern/StepContent/StepContent.js

@@ -1,19 +1,19 @@
 '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", "TransitionComponent", "transitionDuration", "TransitionProps"];
 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";
+const useThemeProps = createUseThemeProps('MuiStepContent');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -35,17 +35,22 @@ const StepContentRoot = styled('div', {
     return [styles.root, ownerState.last && styles.last];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   marginLeft: 12,
   // half icon
   paddingLeft: 8 + 12,
   // margin + half icon
   paddingRight: 8,
-  borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
-}, ownerState.last && {
-  borderLeft: 'none'
+  borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`,
+  variants: [{
+    props: {
+      last: true
+    },
+    style: {
+      borderLeft: 'none'
+    }
+  }]
 }));
 const StepContentTransition = styled(Collapse, {
   name: 'MuiStepContent',