@mui/material 5.15.14 → 6.0.0-alpha.0

package/node/StepButton/StepButton.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _StepLabel = _interopRequireDefault(require("../StepLabel"));
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
@@ -23,7 +22,8 @@ var _stepButtonClasses = _interopRequireWildcard(require("./stepButtonClasses"))
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "icon", "optional"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiStepButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -35,7 +35,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepButtonClasses.getStepButtonUtilityClass, classes);
 };
-const StepButtonRoot = (0, _styled.default)(_ButtonBase.default, {
+const StepButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiStepButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -46,24 +46,27 @@ const StepButtonRoot = (0, _styled.default)(_ButtonBase.default, {
       [`& .${_stepButtonClasses.default.touchRipple}`]: styles.touchRipple
     }, styles.root, styles[ownerState.orientation]];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   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.default.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 = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiStepButton'
   });

package/node/StepButton/index.js

@@ -34,4 +34,4 @@ Object.keys(_stepButtonClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/StepConnector/StepConnector.js

@@ -6,22 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepConnectorClasses = require("./stepConnectorClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiStepConnector');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,7 +37,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepConnectorClasses.getStepConnectorUtilityClass, classes);
 };
-const StepConnectorRoot = (0, _styled.default)('div', {
+const StepConnectorRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiStepConnector',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -46,19 +46,28 @@ const StepConnectorRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel, ownerState.completed && styles.completed];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  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)'
-}));
-const StepConnectorLine = (0, _styled.default)('span', {
+})({
+  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 = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepConnector',
   slot: 'Line',
   overridesResolver: (props, styles) => {
@@ -68,24 +77,34 @@ const StepConnectorLine = (0, _styled.default)('span', {
     return [styles.line, styles[`line${(0, _capitalize.default)(ownerState.orientation)}`]];
   }
 })(({
-  ownerState,
   theme
 }) => {
   const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
-  return (0, _extends2.default)({
+  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 = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiStepConnector'
   });

package/node/StepConnector/index.js

@@ -34,4 +34,4 @@ Object.keys(_stepConnectorClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/StepContent/StepContent.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _Collapse = _interopRequireDefault(require("../Collapse"));
 var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
@@ -21,7 +20,8 @@ var _stepContentClasses = require("./stepContentClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "TransitionComponent", "transitionDuration", "TransitionProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiStepContent');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepContentClasses.getStepContentUtilityClass, classes);
 };
-const StepContentRoot = (0, _styled.default)('div', {
+const StepContentRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiStepContent',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -43,25 +43,30 @@ const StepContentRoot = (0, _styled.default)('div', {
     return [styles.root, ownerState.last && styles.last];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   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 = (0, _styled.default)(_Collapse.default, {
+const StepContentTransition = (0, _zeroStyled.styled)(_Collapse.default, {
   name: 'MuiStepContent',
   slot: 'Transition',
   overridesResolver: (props, styles) => styles.transition
 })({});
 const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiStepContent'
   });

package/node/StepContent/index.js

@@ -34,4 +34,4 @@ Object.keys(_stepContentClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/StepIcon/StepIcon.js

@@ -12,8 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _CheckCircle = _interopRequireDefault(require("../internal/svg-icons/CheckCircle"));
 var _Warning = _interopRequireDefault(require("../internal/svg-icons/Warning"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
@@ -22,7 +21,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _circle;
 const _excluded = ["active", "className", "completed", "error", "icon"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiStepIcon');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepIconClasses.getStepIconUtilityClass, classes);
 };
-const StepIconRoot = (0, _styled.default)(_SvgIcon.default, {
+const StepIconRoot = (0, _zeroStyled.styled)(_SvgIcon.default, {
   name: 'MuiStepIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -58,7 +58,7 @@ const StepIconRoot = (0, _styled.default)(_SvgIcon.default, {
     color: (theme.vars || theme).palette.error.main
   }
 }));
-const StepIconText = (0, _styled.default)('text', {
+const StepIconText = (0, _zeroStyled.styled)('text', {
   name: 'MuiStepIcon',
   slot: 'Text',
   overridesResolver: (props, styles) => styles.text
@@ -70,7 +70,7 @@ const StepIconText = (0, _styled.default)('text', {
   fontFamily: theme.typography.fontFamily
 }));
 const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiStepIcon'
   });

package/node/StepIcon/index.js

@@ -34,4 +34,4 @@ Object.keys(_stepIconClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/StepLabel/StepLabel.js

@@ -8,20 +8,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _StepIcon = _interopRequireDefault(require("../StepIcon"));
 var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
-var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
+var _zeroStyled = require("../zero-styled");
 var _stepLabelClasses = _interopRequireWildcard(require("./stepLabelClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slotProps", "StepIconComponent", "StepIconProps"];
+const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slots", "slotProps", "StepIconComponent", "StepIconProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiStepLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,7 +41,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepLabelClasses.getStepLabelUtilityClass, classes);
 };
-const StepLabelRoot = (0, _styled.default)('span', {
+const StepLabelRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -49,9 +50,7 @@ const StepLabelRoot = (0, _styled.default)('span', {
     } = props;
     return [styles.root, styles[ownerState.orientation]];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   display: 'flex',
   alignItems: 'center',
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
@@ -59,12 +58,18 @@ const StepLabelRoot = (0, _styled.default)('span', {
   },
   [`&.${_stepLabelClasses.default.disabled}`]: {
     cursor: 'default'
-  }
-}, ownerState.orientation === 'vertical' && {
-  textAlign: 'left',
-  padding: '8px 0'
-}));
-const StepLabelLabel = (0, _styled.default)('span', {
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      textAlign: 'left',
+      padding: '8px 0'
+    }
+  }]
+});
+const StepLabelLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
@@ -90,11 +95,11 @@ const StepLabelLabel = (0, _styled.default)('span', {
     color: (theme.vars || theme).palette.error.main
   }
 }));
-const StepLabelIconContainer = (0, _styled.default)('span', {
+const StepLabelIconContainer = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
   slot: 'IconContainer',
   overridesResolver: (props, styles) => styles.iconContainer
-})(() => ({
+})({
   flexShrink: 0,
   // Fix IE11 issue
   display: 'flex',
@@ -102,8 +107,8 @@ const StepLabelIconContainer = (0, _styled.default)('span', {
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
     paddingRight: 0
   }
-}));
-const StepLabelLabelContainer = (0, _styled.default)('span', {
+});
+const StepLabelLabelContainer = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
   slot: 'LabelContainer',
   overridesResolver: (props, styles) => styles.labelContainer
@@ -117,8 +122,7 @@ const StepLabelLabelContainer = (0, _styled.default)('span', {
   }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
-  var _slotProps$label;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiStepLabel'
   });
@@ -129,6 +133,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       error = false,
       icon: iconProp,
       optional,
+      slots = {},
       slotProps = {},
       StepIconComponent: StepIconComponentProp,
       StepIconProps
@@ -158,7 +163,15 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     orientation
   });
   const classes = useUtilityClasses(ownerState);
-  const labelSlotProps = (_slotProps$label = slotProps.label) != null ? _slotProps$label : componentsProps.label;
+  const externalForwardedProps = {
+    slots,
+    slotProps: (0, _extends2.default)({}, componentsProps, slotProps)
+  };
+  const [LabelSlot, labelProps] = (0, _useSlot.default)('label', {
+    elementType: StepLabelLabel,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
@@ -176,10 +189,8 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
-      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelLabel, (0, _extends2.default)({
-        ownerState: ownerState
-      }, labelSlotProps, {
-        className: (0, _clsx.default)(classes.label, labelSlotProps == null ? void 0 : labelSlotProps.className),
+      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelSlot, (0, _extends2.default)({}, labelProps, {
+        className: (0, _clsx.default)(classes.label, labelProps == null ? void 0 : labelProps.className),
         children: children
       })) : null, optional]
     })]
@@ -205,6 +216,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.default.shape({
     label: _propTypes.default.object
@@ -227,7 +239,14 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    label: _propTypes.default.object
+    label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    label: _propTypes.default.elementType
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
@@ -242,5 +261,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-StepLabel.muiName = 'StepLabel';
+if (StepLabel) {
+  StepLabel.muiName = 'StepLabel';
+}
 var _default = exports.default = StepLabel;

package/node/StepLabel/index.js

@@ -34,4 +34,4 @@ Object.keys(_stepLabelClasses).forEach(function (key) {
   });
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/Stepper/Stepper.js

@@ -6,22 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _stepperClasses = require("./stepperClasses");
 var _StepConnector = _interopRequireDefault(require("../StepConnector"));
 var _StepperContext = _interopRequireDefault(require("./StepperContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiStepper');
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepperClasses.getStepperUtilityClass, classes);
 };
-const StepperRoot = (0, _styled.default)('div', {
+const StepperRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiStepper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -42,21 +42,35 @@ const StepperRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  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'
+    }
+  }]
+});
 const defaultConnector = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepConnector.default, {});
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiStepper'
   });