@mui/material 5.15.13 → 6.0.0-alpha.0

package/FormControlLabel/FormControlLabel.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 = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,15 +9,14 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { useFormControl } from '../FormControl';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
 import formControlState from '../FormControl/formControlState';
-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('MuiFormControlLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,9 +44,8 @@ export const FormControlLabelRoot = styled('label', {
     }, styles.root, styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'inline-flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -59,24 +57,42 @@ export const FormControlLabelRoot = styled('label', {
   // used for row presentation of radio/checkbox
   [`&.${formControlLabelClasses.disabled}`]: {
     cursor: 'default'
-  }
-}, ownerState.labelPlacement === 'start' && {
-  flexDirection: 'row-reverse',
-  marginLeft: 16,
-  // used for row presentation of radio/checkbox
-  marginRight: -11
-}, ownerState.labelPlacement === 'top' && {
-  flexDirection: 'column-reverse',
-  marginLeft: 16
-}, ownerState.labelPlacement === 'bottom' && {
-  flexDirection: 'column',
-  marginLeft: 16
-}, {
+  },
   [`& .${formControlLabelClasses.label}`]: {
     [`&.${formControlLabelClasses.disabled}`]: {
       color: (theme.vars || theme).palette.text.disabled
     }
-  }
+  },
+  variants: [{
+    props: {
+      labelPlacement: 'start'
+    },
+    style: {
+      flexDirection: 'row-reverse',
+      marginRight: -11
+    }
+  }, {
+    props: {
+      labelPlacement: 'top'
+    },
+    style: {
+      flexDirection: 'column-reverse'
+    }
+  }, {
+    props: {
+      labelPlacement: 'bottom'
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      labelPlacement
+    }) => labelPlacement === 'start' || labelPlacement === 'top' || labelPlacement === 'bottom',
+    style: {
+      marginLeft: 16 // used for row presentation of radio/checkbox
+    }
+  }]
 }));
 const AsteriskComponent = styled('span', {
   name: 'MuiFormControlLabel',
@@ -95,7 +111,6 @@ const AsteriskComponent = styled('span', {
  * Use this component if you want to display an extra label.
  */
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _ref, _slotProps$typography;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -113,8 +128,8 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
-  const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
-  const required = requiredProp != null ? requiredProp : control.props.required;
+  const disabled = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
+  const required = requiredProp ?? control.props.required;
   const controlProps = {
     disabled,
     required
@@ -136,13 +151,13 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
-  const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
+  const typographySlotProps = slotProps.typography ?? componentsProps.typography;
   let label = labelProp;
   if (label != null && label.type !== Typography && !disableTypography) {
     label = /*#__PURE__*/_jsx(Typography, _extends({
       component: "span"
     }, typographySlotProps, {
-      className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
+      className: clsx(classes.label, typographySlotProps?.className),
       children: label
     }));
   }

package/FormGroup/FormGroup.js

@@ -1,18 +1,18 @@
 '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", "row"];
 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 { getFormGroupUtilityClass } from './formGroupClasses';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,15 +33,19 @@ const FormGroupRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.row && styles.row];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'flex',
   flexDirection: 'column',
-  flexWrap: 'wrap'
-}, ownerState.row && {
-  flexDirection: 'row'
-}));
+  flexWrap: 'wrap',
+  variants: [{
+    props: {
+      row: true
+    },
+    style: {
+      flexDirection: 'row'
+    }
+  }]
+});
 
 /**
  * `FormGroup` wraps controls such as `Checkbox` and `Switch`.

package/Grid/Grid.js

@@ -170,7 +170,6 @@ export function generateRowGap({
     styles = handleBreakpoints({
       theme
     }, rowSpacingValues, (propValue, breakpoint) => {
-      var _zeroValueBreakpointK;
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
@@ -180,7 +179,7 @@ export function generateRowGap({
           }
         };
       }
-      if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
       return {
@@ -217,7 +216,6 @@ export function generateColumnGap({
     styles = handleBreakpoints({
       theme
     }, columnSpacingValues, (propValue, breakpoint) => {
-      var _zeroValueBreakpointK2;
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
@@ -228,7 +226,7 @@ export function generateColumnGap({
           }
         };
       }
-      if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
       return {

package/Icon/Icon.d.ts

@@ -12,7 +12,7 @@ export interface IconPropsColorOverrides {}
 export interface IconOwnProps {
   /**
    * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-   * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+   * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
    * @default 'material-icons'
    */
   baseClassName?: string;

package/Icon/Icon.js

@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
   // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-   * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+   * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc).
    * @default 'material-icons'
    */
   baseClassName: PropTypes.string,

package/IconButton/IconButton.js

@@ -68,12 +68,11 @@ const IconButtonRoot = styled(ButtonBase, {
   theme,
   ownerState
 }) => {
-  var _palette;
-  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  const palette = (theme.vars || theme).palette?.[ownerState.color];
   return _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
   }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-    color: palette == null ? void 0 : palette.main
+    color: palette?.main
   }, !ownerState.disableRipple && {
     '&:hover': _extends({}, palette && {
       backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)

package/ImageListItemBar/ImageListItemBar.js

@@ -11,8 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import { getImageListItemBarUtilityClass } from './imageListItemBarClasses';
-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/Input/Input.js

@@ -108,7 +108,6 @@ const InputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })({});
 const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$input;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiInput'
@@ -134,9 +133,9 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState
     }
   };
-  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
-  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : InputRoot;
-  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : InputInput;
+  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const RootSlot = slots.root ?? components.Root ?? InputRoot;
+  const InputSlot = slots.input ?? components.Input ?? InputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
     slots: {
       root: RootSlot,

package/InputAdornment/InputAdornment.js

@@ -15,8 +15,7 @@ import useFormControl from '../FormControl/useFormControl';
 import styled from '../styles/styled';
 import inputAdornmentClasses, { getInputAdornmentUtilityClass } from './inputAdornmentClasses';
 import useThemeProps from '../styles/useThemeProps';
-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/InputBase/InputBase.js

@@ -23,8 +23,7 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
 import GlobalStyles from '../GlobalStyles';
 import { isFilled } from './utils';
 import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses';
-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";
 export const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -212,7 +211,6 @@ const inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
  * It contains a load of style reset and some state logic.
  */
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
-  var _slotProps$input;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
@@ -431,7 +429,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
-  inputProps = _extends({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
+  inputProps = _extends({}, inputProps, slotProps.input ?? componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)

package/LinearProgress/LinearProgress.js

@@ -3,13 +3,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "color", "value", "valueBuffer", "variant"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -21,10 +14,9 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
-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 TRANSITION_DURATION = 4; // seconds
-const indeterminate1Keyframe = keyframes(_t || (_t = _`
+const indeterminate1Keyframe = keyframes`
   0% {
     left: -35%;
     right: 100%;
@@ -39,8 +31,8 @@ const indeterminate1Keyframe = keyframes(_t || (_t = _`
     left: 100%;
     right: -90%;
   }
-`));
-const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`
+`;
+const indeterminate2Keyframe = keyframes`
   0% {
     left: -200%;
     right: 100%;
@@ -55,8 +47,8 @@ const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`
     left: 107%;
     right: -8%;
   }
-`));
-const bufferKeyframe = keyframes(_t3 || (_t3 = _`
+`;
+const bufferKeyframe = keyframes`
   0% {
     opacity: 1;
     background-position: 0 -23px;
@@ -71,7 +63,7 @@ const bufferKeyframe = keyframes(_t3 || (_t3 = _`
     opacity: 1;
     background-position: -200px -23px;
   }
-`));
+`;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -161,9 +153,9 @@ const LinearProgressDashed = styled('span', {
     backgroundSize: '10px 10px',
     backgroundPosition: '0 -23px'
   });
-}, css(_t4 || (_t4 = _`
-    animation: ${0} 3s infinite linear;
-  `), bufferKeyframe));
+}, css`
+    animation: ${bufferKeyframe} 3s infinite linear;
+  `);
 const LinearProgressBar1 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -192,10 +184,10 @@ const LinearProgressBar1 = styled('span', {
   transition: `transform .${TRANSITION_DURATION}s linear`
 }), ({
   ownerState
-}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t5 || (_t5 = _`
+}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css`
       width: auto;
-      animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    `), indeterminate1Keyframe));
+      animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    `);
 const LinearProgressBar2 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar2',
@@ -225,10 +217,10 @@ const LinearProgressBar2 = styled('span', {
   transition: `transform .${TRANSITION_DURATION}s linear`
 }), ({
   ownerState
-}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t6 || (_t6 = _`
+}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css`
       width: auto;
-      animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
-    `), indeterminate2Keyframe));
+      animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+    `);
 
 /**
  * ## ARIA

package/List/List.js

@@ -11,8 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import ListContext from './ListContext';
 import { getListUtilityClass } from './listClasses';
-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/ListItem/ListItem.js

@@ -22,8 +22,7 @@ import ListContext from '../List/ListContext';
 import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 import { listItemButtonClasses } from '../ListItemButton';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
-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";
 export const overridesResolver = (props, styles) => {
   const {
     ownerState

package/ListItemText/ListItemText.js

@@ -12,8 +12,7 @@ import ListContext from '../List/ListContext';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
-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,
@@ -88,7 +87,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primary = /*#__PURE__*/_jsx(Typography, _extends({
       variant: dense ? 'body2' : 'body1',
       className: classes.primary,
-      component: primaryTypographyProps != null && primaryTypographyProps.variant ? undefined : 'span',
+      component: primaryTypographyProps?.variant ? undefined : 'span',
       display: "block"
     }, primaryTypographyProps, {
       children: primary

package/Menu/Menu.js

@@ -64,7 +64,6 @@ const MenuMenuList = styled(MenuList, {
   outline: 0
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
-  var _slots$paper, _slotProps$paper;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMenu'
@@ -148,8 +147,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       }
     }
   });
-  const PaperSlot = (_slots$paper = slots.paper) != null ? _slots$paper : MenuPaper;
-  const paperExternalSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : PaperProps;
+  const PaperSlot = slots.paper ?? MenuPaper;
+  const paperExternalSlotProps = slotProps.paper ?? PaperProps;
   const rootSlotProps = useSlotProps({
     elementType: slots.root,
     externalSlotProps: slotProps.root,

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