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

package/SpeedDial/SpeedDial.d.ts

@@ -5,12 +5,35 @@ import { InternalStandardProps as StandardProps } from '..';
 import { FabProps } from '../Fab';
 import { TransitionProps } from '../transitions';
 import { SpeedDialClasses } from './speedDialClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
 export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';
 
+export interface SpeedDialSlots {
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default {}
+   */
+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children: React.ReactElement<any, any> }
+  >;
+}
+
+export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  SpeedDialSlots,
+  {
+    transition: SlotProps<React.JSXElementConstructor<TransitionProps>, {}, SpeedDialOwnerState>;
+  }
+>;
+
 export interface SpeedDialProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  extends Omit<
+      StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'>,
+      'slots' | 'slotProps'
+    >,
+    SpeedDialSlotsAndSlotProps {
   /**
    * SpeedDialActions to display when the SpeedDial is `open`.
    */
@@ -74,6 +97,7 @@ export interface SpeedDialProps
    * 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?: React.JSXElementConstructor<TransitionProps>;
   /**
@@ -88,10 +112,13 @@ export interface SpeedDialProps
   /**
    * 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?: TransitionProps;
 }
 
+export interface SpeedDialOwnerState extends SpeedDialProps {}
+
 /**
  *
  * Demos:

package/SpeedDial/SpeedDial.js

@@ -1,9 +1,9 @@
 '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 = ["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"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -12,8 +12,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import useTimeout from '@mui/utils/useTimeout';
 import clamp from '@mui/utils/clamp';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useTheme from '../styles/useTheme';
 import Zoom from '../Zoom';
 import Fab from '../Fab';
@@ -22,7 +21,9 @@ import isMuiElement from '../utils/isMuiElement';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import speedDialClasses, { getSpeedDialUtilityClass } from './speedDialClasses';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSpeedDial');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -57,41 +58,61 @@ const SpeedDialRoot = styled('div', {
     return [styles.root, styles[`direction${capitalize(ownerState.direction)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   zIndex: (theme.vars || theme).zIndex.speedDial,
   display: 'flex',
   alignItems: 'center',
-  pointerEvents: 'none'
-}, ownerState.direction === 'up' && {
-  flexDirection: 'column-reverse',
-  [`& .${speedDialClasses.actions}`]: {
-    flexDirection: 'column-reverse',
-    marginBottom: -dialRadius,
-    paddingBottom: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'down' && {
-  flexDirection: 'column',
-  [`& .${speedDialClasses.actions}`]: {
-    flexDirection: 'column',
-    marginTop: -dialRadius,
-    paddingTop: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'left' && {
-  flexDirection: 'row-reverse',
-  [`& .${speedDialClasses.actions}`]: {
-    flexDirection: 'row-reverse',
-    marginRight: -dialRadius,
-    paddingRight: spacingActions + dialRadius
-  }
-}, ownerState.direction === 'right' && {
-  flexDirection: 'row',
-  [`& .${speedDialClasses.actions}`]: {
-    flexDirection: 'row',
-    marginLeft: -dialRadius,
-    paddingLeft: spacingActions + dialRadius
-  }
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      direction: 'up'
+    },
+    style: {
+      flexDirection: 'column-reverse',
+      [`& .${speedDialClasses.actions}`]: {
+        flexDirection: 'column-reverse',
+        marginBottom: -dialRadius,
+        paddingBottom: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'down'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${speedDialClasses.actions}`]: {
+        flexDirection: 'column',
+        marginTop: -dialRadius,
+        paddingTop: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'left'
+    },
+    style: {
+      flexDirection: 'row-reverse',
+      [`& .${speedDialClasses.actions}`]: {
+        flexDirection: 'row-reverse',
+        marginRight: -dialRadius,
+        paddingRight: spacingActions + dialRadius
+      }
+    }
+  }, {
+    props: {
+      direction: 'right'
+    },
+    style: {
+      flexDirection: 'row',
+      [`& .${speedDialClasses.actions}`]: {
+        flexDirection: 'row',
+        marginLeft: -dialRadius,
+        paddingLeft: spacingActions + dialRadius
+      }
+    }
+  }]
 }));
 const SpeedDialFab = styled(Fab, {
   name: 'MuiSpeedDial',
@@ -109,15 +130,19 @@ const SpeedDialActions = styled('div', {
     } = props;
     return [styles.actions, !ownerState.open && styles.actionsClosed];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   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 = useThemeProps({
     props: inProps,
@@ -146,9 +171,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
       onMouseLeave,
       onOpen,
       open: openProp,
-      TransitionComponent = Zoom,
-      transitionDuration = defaultTransitionDuration,
-      TransitionProps
+      slots = {},
+      slotProps = {},
+      TransitionComponent: TransitionComponentProp,
+      TransitionProps: TransitionPropsProp,
+      transitionDuration = defaultTransitionDuration
     } = props,
     FabProps = _objectWithoutPropertiesLoose(props.FabProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -336,6 +363,21 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
       id: `${id}-action-${index}`
     });
   });
+  const backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp
+  }, slots);
+  const backwardCompatibleSlotProps = _extends({
+    transition: TransitionPropsProp
+  }, slotProps);
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: Zoom,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/_jsxs(SpeedDialRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -347,11 +389,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     onMouseLeave: handleClose,
     ownerState: ownerState
   }, other, {
-    children: [/*#__PURE__*/_jsx(TransitionComponent, _extends({
+    children: [/*#__PURE__*/_jsx(TransitionSlot, _extends({
       in: !hidden,
       timeout: transitionDuration,
       unmountOnExit: true
-    }, TransitionProps, {
+    }, transitionProps, {
       children: /*#__PURE__*/_jsx(SpeedDialFab, _extends({
         color: "primary",
         "aria-label": ariaLabel,
@@ -461,6 +503,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.node,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    transition: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -469,6 +525,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.elementType,
   /**
@@ -487,6 +544,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.object
 } : void 0;

package/SpeedDialAction/SpeedDialAction.js

@@ -9,13 +9,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { emphasize } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Fab from '../Fab';
 import Tooltip from '../Tooltip';
 import capitalize from '../utils/capitalize';
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSpeedDialAction');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -40,9 +40,8 @@ const SpeedDialActionFab = styled(Fab, {
     return [styles.fab, !ownerState.open && styles.fabClosed];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   margin: 8,
   color: (theme.vars || theme).palette.text.secondary,
   backgroundColor: (theme.vars || theme).palette.background.paper,
@@ -52,10 +51,16 @@ const SpeedDialActionFab = styled(Fab, {
   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 = styled('span', {
   name: 'MuiSpeedDialAction',
@@ -67,29 +72,50 @@ const SpeedDialActionStaticTooltip = styled('span', {
     return [styles.staticTooltip, !ownerState.open && styles.staticTooltipClosed, styles[`tooltipPlacement${capitalize(ownerState.tooltipPlacement)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
-  [`& .${speedDialActionClasses.staticTooltipLabel}`]: _extends({
+  [`& .${speedDialActionClasses.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.staticTooltipLabel}`]: {
+        opacity: 0,
+        transform: 'scale(0.5)'
+      }
+    }
+  }, {
+    props: {
+      tooltipPlacement: 'left'
+    },
+    style: {
+      [`& .${speedDialActionClasses.staticTooltipLabel}`]: {
+        transformOrigin: '100% 50%',
+        right: '100%',
+        marginRight: 8
+      }
+    }
+  }, {
+    props: {
+      tooltipPlacement: 'right'
+    },
+    style: {
+      [`& .${speedDialActionClasses.staticTooltipLabel}`]: {
+        transformOrigin: '0% 50%',
+        left: '100%',
+        marginLeft: 8
+      }
+    }
+  }]
 }));
 const SpeedDialActionStaticTooltipLabel = styled('span', {
   name: 'MuiSpeedDialAction',

package/SpeedDialIcon/SpeedDialIcon.js

@@ -1,17 +1,17 @@
 '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", "icon", "open", "openIcon"];
 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 AddIcon from '../internal/svg-icons/Add';
 import speedDialIconClasses, { getSpeedDialIconUtilityClass } from './speedDialIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSpeedDialIcon');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,30 +45,51 @@ const SpeedDialIconRoot = styled('span', {
     }, styles.root];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   height: 24,
-  [`& .${speedDialIconClasses.icon}`]: _extends({
+  [`& .${speedDialIconClasses.icon}`]: {
     transition: theme.transitions.create(['transform', 'opacity'], {
       duration: theme.transitions.duration.short
     })
-  }, ownerState.open && _extends({
-    transform: 'rotate(45deg)'
-  }, ownerState.openIcon && {
-    opacity: 0
-  })),
-  [`& .${speedDialIconClasses.openIcon}`]: _extends({
+  },
+  [`& .${speedDialIconClasses.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.icon}`]: {
+        transform: 'rotate(45deg)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.open && ownerState.openIcon,
+    style: {
+      [`& .${speedDialIconClasses.icon}`]: {
+        opacity: 0
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.open,
+    style: {
+      [`& .${speedDialIconClasses.openIcon}`]: {
+        transform: 'rotate(0deg)',
+        opacity: 1
+      }
+    }
+  }]
 }));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
   const props = useThemeProps({

package/StepConnector/stepConnectorClasses.d.ts

@@ -16,11 +16,11 @@ export interface StepConnectorClasses {
     /** Styles applied to the line element. */
     line: string;
     /** Styles applied to the line element if `orientation="horizontal"`.
-     * @deprecated Combine the [.MuiStepConnector-horizontal](/material-ui/api/step-connector/#step-connector-classes-horizontal) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiStepConnector-horizontal](/material-ui/api/step-connector/#step-connector-classes-horizontal) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     lineHorizontal: string;
     /** Styles applied to the line element if `orientation="vertical"`.
-     * @deprecated Combine the [.MuiStepConnector-vertical](/material-ui/api/step-connector/#step-connector-classes-vertical) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiStepConnector-vertical](/material-ui/api/step-connector/#step-connector-classes-vertical) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     lineVertical: string;
 }

package/StepLabel/StepLabel.d.ts

@@ -42,7 +42,7 @@ export interface StepLabelProps
   /**
    * 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?: {
     /**
@@ -66,12 +66,12 @@ export interface StepLabelProps
   optional?: React.ReactNode;
   /**
    * 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?: React.ElementType<StepIconProps>;
   /**
    * 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?: Partial<StepIconProps>;
   /**

package/StepLabel/StepLabel.js

@@ -215,7 +215,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.shape({
     label: PropTypes.object
@@ -251,12 +251,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.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.object,
   /**

package/SwipeableDrawer/SwipeArea.js

@@ -1,38 +1,59 @@
 '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 = ["anchor", "classes", "className", "width", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
   shouldForwardProp: rootShouldForwardProp
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  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
+    }
+  }]
 }));
 
 /**