@mui/material 5.15.15 → 6.0.0-alpha.1

package/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;
@@ -35,102 +34,96 @@ export const SliderRoot = styled('span', {
   }
 })(({
   theme
-}) => {
-  var _theme$vars;
-  return {
-    borderRadius: 12,
-    boxSizing: 'content-box',
-    display: 'inline-block',
-    position: 'relative',
-    cursor: 'pointer',
-    touchAction: 'none',
-    WebkitTapHighlightColor: 'transparent',
-    '@media print': {
-      colorAdjust: 'exact'
+}) => ({
+  borderRadius: 12,
+  boxSizing: 'content-box',
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'pointer',
+  touchAction: 'none',
+  WebkitTapHighlightColor: 'transparent',
+  '@media print': {
+    colorAdjust: 'exact'
+  },
+  [`&.${sliderClasses.disabled}`]: {
+    pointerEvents: 'none',
+    cursor: 'default',
+    color: (theme.vars || theme).palette.grey[400]
+  },
+  [`&.${sliderClasses.dragging}`]: {
+    [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+      transition: 'none'
+    }
+  },
+  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+    props: {
+      color
     },
-    [`&.${sliderClasses.disabled}`]: {
-      pointerEvents: 'none',
-      cursor: 'default',
-      color: (theme.vars || theme).palette.grey[400]
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  })), {
+    props: {
+      orientation: 'horizontal'
     },
-    [`&.${sliderClasses.dragging}`]: {
-      [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
-        transition: 'none'
+    style: {
+      height: 4,
+      width: '100%',
+      padding: '13px 0',
+      // The primary input mechanism of the device includes a pointing device of limited accuracy.
+      '@media (pointer: coarse)': {
+        // Reach 42px touch target, about ~8mm on screen.
+        padding: '20px 0'
       }
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      size: 'small'
     },
-    variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
-      var _theme$vars2;
-      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
-    }).map(color => ({
-      props: {
-        color
-      },
-      style: {
-        color: (theme.vars || theme).palette[color].main
-      }
-    })), {
-      props: {
-        orientation: 'horizontal'
-      },
-      style: {
-        height: 4,
-        width: '100%',
-        padding: '13px 0',
-        // The primary input mechanism of the device includes a pointing device of limited accuracy.
-        '@media (pointer: coarse)': {
-          // Reach 42px touch target, about ~8mm on screen.
-          padding: '20px 0'
-        }
-      }
-    }, {
-      props: {
-        orientation: 'horizontal',
-        size: 'small'
-      },
-      style: {
-        height: 2
-      }
-    }, {
-      props: {
-        orientation: 'horizontal',
-        marked: true
-      },
-      style: {
-        marginBottom: 20
-      }
-    }, {
-      props: {
-        orientation: 'vertical'
-      },
-      style: {
-        height: '100%',
-        width: 4,
-        padding: '0 13px',
-        // The primary input mechanism of the device includes a pointing device of limited accuracy.
-        '@media (pointer: coarse)': {
-          // Reach 42px touch target, about ~8mm on screen.
-          padding: '0 20px'
-        }
-      }
-    }, {
-      props: {
-        orientation: 'vertical',
-        size: 'small'
-      },
-      style: {
-        width: 2
-      }
-    }, {
-      props: {
-        orientation: 'vertical',
-        marked: true
-      },
-      style: {
-        marginRight: 44
+    style: {
+      height: 2
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      marked: true
+    },
+    style: {
+      marginBottom: 20
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      height: '100%',
+      width: 4,
+      padding: '0 13px',
+      // The primary input mechanism of the device includes a pointing device of limited accuracy.
+      '@media (pointer: coarse)': {
+        // Reach 42px touch target, about ~8mm on screen.
+        padding: '0 20px'
       }
-    }]
-  };
-});
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      size: 'small'
+    },
+    style: {
+      width: 2
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      marked: true
+    },
+    style: {
+      marginRight: 44
+    }
+  }]
+}));
 export const SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
@@ -177,7 +170,6 @@ export const SliderTrack = styled('span', {
 })(({
   theme
 }) => {
-  var _theme$vars3;
   return {
     display: 'block',
     position: 'absolute',
@@ -219,10 +211,7 @@ export const SliderTrack = styled('span', {
       style: {
         display: 'none'
       }
-    }, ...Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter(key => {
-      var _theme$vars4;
-      return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
-    }).map(color => ({
+    }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
       props: {
         color,
         track: 'inverted'
@@ -252,99 +241,93 @@ export const SliderThumb = styled('span', {
   }
 })(({
   theme
-}) => {
-  var _theme$vars5;
-  return {
+}) => ({
+  position: 'absolute',
+  width: 20,
+  height: 20,
+  boxSizing: 'border-box',
+  borderRadius: '50%',
+  outline: 0,
+  backgroundColor: 'currentColor',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  '&::before': {
     position: 'absolute',
-    width: 20,
-    height: 20,
-    boxSizing: 'border-box',
+    content: '""',
+    borderRadius: 'inherit',
+    width: '100%',
+    height: '100%',
+    boxShadow: (theme.vars || theme).shadows[2]
+  },
+  '&::after': {
+    position: 'absolute',
+    content: '""',
     borderRadius: '50%',
-    outline: 0,
-    backgroundColor: 'currentColor',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
-      duration: theme.transitions.duration.shortest
-    }),
-    '&::before': {
-      position: 'absolute',
-      content: '""',
-      borderRadius: 'inherit',
-      width: '100%',
-      height: '100%',
-      boxShadow: (theme.vars || theme).shadows[2]
+    // 42px is the hit target
+    width: 42,
+    height: 42,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)'
+  },
+  [`&.${sliderClasses.disabled}`]: {
+    '&:hover': {
+      boxShadow: 'none'
+    }
+  },
+  variants: [{
+    props: {
+      size: 'small'
     },
-    '&::after': {
-      position: 'absolute',
-      content: '""',
-      borderRadius: '50%',
-      // 42px is the hit target
-      width: 42,
-      height: 42,
+    style: {
+      width: 12,
+      height: 12,
+      '&::before': {
+        boxShadow: 'none'
+      }
+    }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
       top: '50%',
-      left: '50%',
       transform: 'translate(-50%, -50%)'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
     },
-    [`&.${sliderClasses.disabled}`]: {
-      '&:hover': {
-        boxShadow: 'none'
-      }
+    style: {
+      left: '50%',
+      transform: 'translate(-50%, 50%)'
+    }
+  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+    props: {
+      color
     },
-    variants: [...Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(key => {
-      var _theme$vars6;
-      return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
-    }).map(color => ({
-      props: {
-        color
-      },
-      style: {
-        [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
-        }, {
-          '@media (hover: none)': {
-            boxShadow: 'none'
-          }
-        }),
-        [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
-        } : {
-          boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
-        })
-      }
-    })), {
-      props: {
-        size: 'small'
-      },
-      style: {
-        width: 12,
-        height: 12,
-        '&::before': {
+    style: {
+      [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
+        boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+      } : {
+        boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
+      }, {
+        '@media (hover: none)': {
           boxShadow: 'none'
         }
-      }
-    }, {
-      props: {
-        orientation: 'horizontal'
-      },
-      style: {
-        top: '50%',
-        transform: 'translate(-50%, -50%)'
-      }
-    }, {
-      props: {
-        orientation: 'vertical'
-      },
-      style: {
-        left: '50%',
-        transform: 'translate(-50%, 50%)'
-      }
-    }]
-  };
-});
+      }),
+      [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
+        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+      } : {
+        boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
+      })
+    }
+  }))]
+}));
 export const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
@@ -547,7 +530,6 @@ const Forward = ({
   children
 }) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
   const props = useThemeProps({
     props: inputProps,
     name: 'MuiSlider'
@@ -626,22 +608,22 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : SliderRoot;
-  const RailSlot = (_ref2 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref2 : SliderRail;
-  const TrackSlot = (_ref3 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref3 : SliderTrack;
-  const ThumbSlot = (_ref4 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref4 : SliderThumb;
-  const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : SliderValueLabel;
-  const MarkSlot = (_ref6 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref6 : SliderMark;
-  const MarkLabelSlot = (_ref7 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref7 : SliderMarkLabel;
-  const InputSlot = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
-  const trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
-  const thumbSlotProps = (_slotProps$thumb = slotProps == null ? void 0 : slotProps.thumb) != null ? _slotProps$thumb : componentsProps.thumb;
-  const valueLabelSlotProps = (_slotProps$valueLabel = slotProps == null ? void 0 : slotProps.valueLabel) != null ? _slotProps$valueLabel : componentsProps.valueLabel;
-  const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
-  const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
-  const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
+  const RootSlot = slots?.root ?? components.Root ?? SliderRoot;
+  const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
+  const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
+  const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb;
+  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel;
+  const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark;
+  const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel;
+  const InputSlot = slots?.input ?? components.Input ?? 'input';
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const railSlotProps = slotProps?.rail ?? componentsProps.rail;
+  const trackSlotProps = slotProps?.track ?? componentsProps.track;
+  const thumbSlotProps = slotProps?.thumb ?? componentsProps.thumb;
+  const valueLabelSlotProps = slotProps?.valueLabel ?? componentsProps.valueLabel;
+  const markSlotProps = slotProps?.mark ?? componentsProps.mark;
+  const markLabelSlotProps = slotProps?.markLabel ?? componentsProps.markLabel;
+  const inputSlotProps = slotProps?.input ?? componentsProps.input;
   const rootProps = useSlotProps({
     elementType: RootSlot,
     getSlotProps: getRootProps,
@@ -650,7 +632,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
       as: component
     }),
-    ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
     className: [classes.root, className]
   });
   const railProps = useSlotProps({
@@ -665,20 +647,20 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     additionalProps: {
       style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
     },
-    ownerState: _extends({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
+    ownerState: _extends({}, ownerState, trackSlotProps?.ownerState),
     className: classes.track
   });
   const thumbProps = useSlotProps({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    ownerState: _extends({}, ownerState, thumbSlotProps?.ownerState),
     className: classes.thumb
   });
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
-    ownerState: _extends({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    ownerState: _extends({}, ownerState, valueLabelSlotProps?.ownerState),
     className: classes.valueLabel
   });
   const markProps = useSlotProps({

package/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/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/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/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/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/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/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,