@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.6

package/node/SpeedDial/SpeedDial.js

@@ -6,8 +6,8 @@ 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 _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,8 +15,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _Zoom = _interopRequireDefault(require("../Zoom"));
 var _Fab = _interopRequireDefault(require("../Fab"));
@@ -25,12 +24,14 @@ var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _speedDialClasses = _interopRequireWildcard(require("./speedDialClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ref"],
-  _excluded2 = ["ariaLabel", "FabProps", "children", "className", "direction", "hidden", "icon", "onBlur", "onClose", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onOpen", "open", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"],
+  _excluded2 = ["ariaLabel", "FabProps", "children", "className", "direction", "hidden", "icon", "onBlur", "onClose", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onOpen", "open", "openIcon", "slots", "slotProps", "TransitionComponent", "TransitionProps", "transitionDuration"],
   _excluded3 = ["ref"];
 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 && {}.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)('MuiSpeedDial');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -55,7 +56,7 @@ function getOrientation(direction) {
 }
 const dialRadius = 32;
 const spacingActions = 16;
-const SpeedDialRoot = (0, _styled.default)('div', {
+const SpeedDialRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiSpeedDial',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -65,50 +66,70 @@ const SpeedDialRoot = (0, _styled.default)('div', {
     return [styles.root, styles[`direction${(0, _capitalize.default)(ownerState.direction)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   zIndex: (theme.vars || theme).zIndex.speedDial,
   display: 'flex',
   alignItems: 'center',
-  pointerEvents: 'none'
-}, ownerState.direction === 'up' && {
-  flexDirection: 'column-reverse',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'column-reverse',
-    marginBottom: -dialRadius,
-    paddingBottom: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'down' && {
-  flexDirection: 'column',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'column',
-    marginTop: -dialRadius,
-    paddingTop: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'left' && {
-  flexDirection: 'row-reverse',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'row-reverse',
-    marginRight: -dialRadius,
-    paddingRight: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'right' && {
-  flexDirection: 'row',
-  [`& .${_speedDialClasses.default.actions}`]: {
-    flexDirection: 'row',
-    marginLeft: -dialRadius,
-    paddingLeft: spacingActions + dialRadius
-  }
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      direction: 'up'
+    },
+    style: {
+      flexDirection: 'column-reverse',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'column-reverse',
+        marginBottom: -dialRadius,
+        paddingBottom: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'down'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'column',
+        marginTop: -dialRadius,
+        paddingTop: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'left'
+    },
+    style: {
+      flexDirection: 'row-reverse',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'row-reverse',
+        marginRight: -dialRadius,
+        paddingRight: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'right'
+    },
+    style: {
+      flexDirection: 'row',
+      [`& .${_speedDialClasses.default.actions}`]: {
+        flexDirection: 'row',
+        marginLeft: -dialRadius,
+        paddingLeft: spacingActions + dialRadius
+      }
+    }
+  }]
 }));
-const SpeedDialFab = (0, _styled.default)(_Fab.default, {
+const SpeedDialFab = (0, _zeroStyled.styled)(_Fab.default, {
   name: 'MuiSpeedDial',
   slot: 'Fab',
   overridesResolver: (props, styles) => styles.fab
 })(() => ({
   pointerEvents: 'auto'
 }));
-const SpeedDialActions = (0, _styled.default)('div', {
+const SpeedDialActions = (0, _zeroStyled.styled)('div', {
   name: 'MuiSpeedDial',
   slot: 'Actions',
   overridesResolver: (props, styles) => {
@@ -117,17 +138,21 @@ const SpeedDialActions = (0, _styled.default)('div', {
     } = props;
     return [styles.actions, !ownerState.open && styles.actionsClosed];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   display: 'flex',
-  pointerEvents: 'auto'
-}, !ownerState.open && {
-  transition: 'top 0s linear 0.2s',
-  pointerEvents: 'none'
-}));
+  pointerEvents: 'auto',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open,
+    style: {
+      transition: 'top 0s linear 0.2s',
+      pointerEvents: 'none'
+    }
+  }]
+});
 const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSpeedDial'
   });
@@ -154,9 +179,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
       onMouseLeave,
       onOpen,
       open: openProp,
-      TransitionComponent = _Zoom.default,
-      transitionDuration = defaultTransitionDuration,
-      TransitionProps
+      slots = {},
+      slotProps = {},
+      TransitionComponent: TransitionComponentProp,
+      TransitionProps: TransitionPropsProp,
+      transitionDuration = defaultTransitionDuration
     } = props,
     FabProps = (0, _objectWithoutPropertiesLoose2.default)(props.FabProps, _excluded),
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
@@ -344,6 +371,21 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
       id: `${id}-action-${index}`
     });
   });
+  const backwardCompatibleSlots = (0, _extends2.default)({
+    transition: TransitionComponentProp
+  }, slots);
+  const backwardCompatibleSlotProps = (0, _extends2.default)({
+    transition: TransitionPropsProp
+  }, slotProps);
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
+    elementType: _Zoom.default,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpeedDialRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
@@ -355,11 +397,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     onMouseLeave: handleClose,
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, (0, _extends2.default)({
       in: !hidden,
       timeout: transitionDuration,
       unmountOnExit: true
-    }, TransitionProps, {
+    }, transitionProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialFab, (0, _extends2.default)({
         color: "primary",
         "aria-label": ariaLabel,
@@ -469,6 +511,20 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
    * The icon to display in the SpeedDial Fab when the SpeedDial is open.
    */
   openIcon: _propTypes.default.node,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -477,6 +533,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Zoom
+   * * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   TransitionComponent: _propTypes.default.elementType,
   /**
@@ -495,6 +552,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes /* remove-proptypes
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
    */
   TransitionProps: _propTypes.default.object
 } : void 0;

package/node/SpeedDialAction/SpeedDialAction.js

@@ -14,8 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _Fab = _interopRequireDefault(require("../Fab"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -24,6 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "delay", "FabProps", "icon", "id", "open", "TooltipClasses", "tooltipOpen", "tooltipPlacement", "tooltipTitle"];
 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 && {}.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)('MuiSpeedDialAction');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -37,7 +37,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _speedDialActionClasses.getSpeedDialActionUtilityClass, classes);
 };
-const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
+const SpeedDialActionFab = (0, _zeroStyled.styled)(_Fab.default, {
   name: 'MuiSpeedDialAction',
   slot: 'Fab',
   skipVariantsResolver: false,
@@ -48,9 +48,8 @@ const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
     return [styles.fab, !ownerState.open && styles.fabClosed];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   margin: 8,
   color: (theme.vars || theme).palette.text.secondary,
   backgroundColor: (theme.vars || theme).palette.background.paper,
@@ -60,12 +59,18 @@ const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
   })}, opacity 0.8s`,
-  opacity: 1
-}, !ownerState.open && {
-  opacity: 0,
-  transform: 'scale(0)'
+  opacity: 1,
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open,
+    style: {
+      opacity: 0,
+      transform: 'scale(0)'
+    }
+  }]
 }));
-const SpeedDialActionStaticTooltip = (0, _styled.default)('span', {
+const SpeedDialActionStaticTooltip = (0, _zeroStyled.styled)('span', {
   name: 'MuiSpeedDialAction',
   slot: 'StaticTooltip',
   overridesResolver: (props, styles) => {
@@ -75,31 +80,52 @@ const SpeedDialActionStaticTooltip = (0, _styled.default)('span', {
     return [styles.staticTooltip, !ownerState.open && styles.staticTooltipClosed, styles[`tooltipPlacement${(0, _capitalize.default)(ownerState.tooltipPlacement)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
-  [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: (0, _extends2.default)({
+  [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
     transition: theme.transitions.create(['transform', 'opacity'], {
       duration: theme.transitions.duration.shorter
     }),
     opacity: 1
-  }, !ownerState.open && {
-    opacity: 0,
-    transform: 'scale(0.5)'
-  }, ownerState.tooltipPlacement === 'left' && {
-    transformOrigin: '100% 50%',
-    right: '100%',
-    marginRight: 8
-  }, ownerState.tooltipPlacement === 'right' && {
-    transformOrigin: '0% 50%',
-    left: '100%',
-    marginLeft: 8
-  })
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open,
+    style: {
+      [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
+        opacity: 0,
+        transform: 'scale(0.5)'
+      }
+    }
+  }, {
+    props: {
+      tooltipPlacement: 'left'
+    },
+    style: {
+      [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
+        transformOrigin: '100% 50%',
+        right: '100%',
+        marginRight: 8
+      }
+    }
+  }, {
+    props: {
+      tooltipPlacement: 'right'
+    },
+    style: {
+      [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
+        transformOrigin: '0% 50%',
+        left: '100%',
+        marginLeft: 8
+      }
+    }
+  }]
 }));
-const SpeedDialActionStaticTooltipLabel = (0, _styled.default)('span', {
+const SpeedDialActionStaticTooltipLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiSpeedDialAction',
   slot: 'StaticTooltipLabel',
   overridesResolver: (props, styles) => styles.staticTooltipLabel
@@ -116,7 +142,7 @@ const SpeedDialActionStaticTooltipLabel = (0, _styled.default)('span', {
   wordBreak: 'keep-all'
 }));
 const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSpeedDialAction'
   });

package/node/SpeedDialIcon/SpeedDialIcon.js

@@ -6,20 +6,20 @@ 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 _Add = _interopRequireDefault(require("../internal/svg-icons/Add"));
 var _speedDialIconClasses = _interopRequireWildcard(require("./speedDialIconClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "icon", "open", "openIcon"];
 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 && {}.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)('MuiSpeedDialIcon');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _speedDialIconClasses.getSpeedDialIconUtilityClass, classes);
 };
-const SpeedDialIconRoot = (0, _styled.default)('span', {
+const SpeedDialIconRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSpeedDialIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -53,33 +53,54 @@ const SpeedDialIconRoot = (0, _styled.default)('span', {
     }, styles.root];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   height: 24,
-  [`& .${_speedDialIconClasses.default.icon}`]: (0, _extends2.default)({
+  [`& .${_speedDialIconClasses.default.icon}`]: {
     transition: theme.transitions.create(['transform', 'opacity'], {
       duration: theme.transitions.duration.short
     })
-  }, ownerState.open && (0, _extends2.default)({
-    transform: 'rotate(45deg)'
-  }, ownerState.openIcon && {
-    opacity: 0
-  })),
-  [`& .${_speedDialIconClasses.default.openIcon}`]: (0, _extends2.default)({
+  },
+  [`& .${_speedDialIconClasses.default.openIcon}`]: {
     position: 'absolute',
     transition: theme.transitions.create(['transform', 'opacity'], {
       duration: theme.transitions.duration.short
     }),
     opacity: 0,
     transform: 'rotate(-45deg)'
-  }, ownerState.open && {
-    transform: 'rotate(0deg)',
-    opacity: 1
-  })
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.open,
+    style: {
+      [`& .${_speedDialIconClasses.default.icon}`]: {
+        transform: 'rotate(45deg)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.open && ownerState.openIcon,
+    style: {
+      [`& .${_speedDialIconClasses.default.icon}`]: {
+        opacity: 0
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.open,
+    style: {
+      [`& .${_speedDialIconClasses.default.openIcon}`]: {
+        transform: 'rotate(0deg)',
+        opacity: 1
+      }
+    }
+  }]
 }));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSpeedDialIcon'
   });

package/node/StepLabel/StepLabel.js

@@ -223,7 +223,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/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: _propTypes.default.shape({
     label: _propTypes.default.object
@@ -259,12 +259,12 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
-   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconComponent: _propTypes.default.elementType,
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
-   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconProps: _propTypes.default.object,
   /**

package/node/SwipeableDrawer/SwipeArea.js

@@ -6,41 +6,62 @@ 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 _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Drawer = require("../Drawer/Drawer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["anchor", "classes", "className", "width", "style"];
 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 && {}.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 SwipeAreaRoot = (0, _styled.default)('div', {
-  shouldForwardProp: _styled.rootShouldForwardProp
+const SwipeAreaRoot = (0, _zeroStyled.styled)('div', {
+  shouldForwardProp: _rootShouldForwardProp.default
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   position: 'fixed',
   top: 0,
   left: 0,
   bottom: 0,
-  zIndex: theme.zIndex.drawer - 1
-}, ownerState.anchor === 'left' && {
-  right: 'auto'
-}, ownerState.anchor === 'right' && {
-  left: 'auto',
-  right: 0
-}, ownerState.anchor === 'top' && {
-  bottom: 'auto',
-  right: 0
-}, ownerState.anchor === 'bottom' && {
-  top: 'auto',
-  bottom: 0,
-  right: 0
+  zIndex: theme.zIndex.drawer - 1,
+  variants: [{
+    props: {
+      anchor: 'left'
+    },
+    style: {
+      right: 'auto'
+    }
+  }, {
+    props: {
+      anchor: 'right'
+    },
+    style: {
+      left: 'auto',
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'top'
+    },
+    style: {
+      bottom: 'auto',
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'bottom'
+    },
+    style: {
+      top: 'auto',
+      bottom: 0,
+      right: 0
+    }
+  }]
 }));
 
 /**