@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.11

package/node/DialogContentText/DialogContentText.js

@@ -6,20 +6,18 @@ 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 React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _dialogContentTextClasses = require("./dialogContentTextClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "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 && {}.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)('MuiDialogContentText');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -28,34 +26,39 @@ const useUtilityClasses = ownerState => {
     root: ['root']
   };
   const composedClasses = (0, _composeClasses.default)(slots, _dialogContentTextClasses.getDialogContentTextUtilityClass, classes);
-  return (0, _extends2.default)({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the Typography
+    ...composedClasses
+  };
 };
-const DialogContentTextRoot = (0, _styled.default)(_Typography.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const DialogContentTextRoot = (0, _zeroStyled.styled)(_Typography.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiDialogContentText',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
 const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDialogContentText'
   });
   const {
-      className
-    } = props,
-    ownerState = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    className,
+    ...ownerState
+  } = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContentTextRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContentTextRoot, {
     component: "p",
     variant: "body1",
     color: "text.secondary",
     ref: ref,
     ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className)
-  }, props, {
+    className: (0, _clsx.default)(classes.root, className),
+    ...props,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogContentText.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/DialogTitle/DialogTitle.js

@@ -6,21 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-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 _Typography = _interopRequireDefault(require("../Typography"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _dialogTitleClasses = require("./dialogTitleClasses");
 var _DialogContext = _interopRequireDefault(require("../Dialog/DialogContext"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "id"];
 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)('MuiDialogTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _dialogTitleClasses.getDialogTitleUtilityClass, classes);
 };
-const DialogTitleRoot = (0, _styled.default)(_Typography.default, {
+const DialogTitleRoot = (0, _zeroStyled.styled)(_Typography.default, {
   name: 'MuiDialogTitle',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -39,28 +36,29 @@ const DialogTitleRoot = (0, _styled.default)(_Typography.default, {
   flex: '0 0 auto'
 });
 const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDialogTitle'
   });
   const {
-      className,
-      id: idProp
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    className,
+    id: idProp,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const {
     titleId = idProp
   } = React.useContext(_DialogContext.default);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogTitleRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogTitleRoot, {
     component: "h2",
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: idProp != null ? idProp : titleId
-  }, other));
+    id: idProp != null ? idProp : titleId,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/Divider/Divider.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-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"));
@@ -16,7 +14,6 @@ var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _dividerClasses = require("./dividerClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
 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)('MuiDivider');
@@ -207,19 +204,20 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     name: 'MuiDivider'
   });
   const {
-      absolute = false,
-      children,
-      className,
-      component = children ? 'div' : 'hr',
-      flexItem = false,
-      light = false,
-      orientation = 'horizontal',
-      role = component !== 'hr' ? 'separator' : undefined,
-      textAlign = 'center',
-      variant = 'fullWidth'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    absolute = false,
+    children,
+    className,
+    component = children ? 'div' : 'hr',
+    flexItem = false,
+    light = false,
+    orientation = 'horizontal',
+    role = component !== 'hr' ? 'separator' : undefined,
+    textAlign = 'center',
+    variant = 'fullWidth',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     absolute,
     component,
     flexItem,
@@ -228,21 +226,21 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     role,
     textAlign,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DividerRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DividerRoot, {
     as: component,
     className: (0, _clsx.default)(classes.root, className),
     role: role,
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DividerWrapper, {
       className: classes.wrapper,
       ownerState: ownerState,
       children: children
     }) : null
-  }));
+  });
 });
 
 /**
@@ -288,7 +286,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
-   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   light: _propTypes.default.bool,
   /**

package/node/Drawer/Drawer.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getAnchor = getAnchor;
 exports.isHorizontal = isHorizontal;
-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"));
@@ -20,15 +18,13 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 var _Slide = _interopRequireDefault(require("../Slide"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _drawerClasses = require("./drawerClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
 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)('MuiDrawer');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -49,7 +45,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _drawerClasses.getDrawerUtilityClass, classes);
 };
-const DrawerRoot = (0, _styled.default)(_Modal.default, {
+const DrawerRoot = (0, _zeroStyled.styled)(_Modal.default, {
   name: 'MuiDrawer',
   slot: 'Root',
   overridesResolver
@@ -58,8 +54,8 @@ const DrawerRoot = (0, _styled.default)(_Modal.default, {
 }) => ({
   zIndex: (theme.vars || theme).zIndex.drawer
 }));
-const DrawerDockedRoot = (0, _styled.default)('div', {
-  shouldForwardProp: _styled.rootShouldForwardProp,
+const DrawerDockedRoot = (0, _zeroStyled.styled)('div', {
+  shouldForwardProp: _rootShouldForwardProp.default,
   name: 'MuiDrawer',
   slot: 'Docked',
   skipVariantsResolver: false,
@@ -67,7 +63,7 @@ const DrawerDockedRoot = (0, _styled.default)('div', {
 })({
   flex: '0 0 auto'
 });
-const DrawerPaper = (0, _styled.default)(_Paper.default, {
+const DrawerPaper = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiDrawer',
   slot: 'Paper',
   overridesResolver: (props, styles) => {
@@ -77,9 +73,8 @@ const DrawerPaper = (0, _styled.default)(_Paper.default, {
     return [styles.paper, styles[`paperAnchor${(0, _capitalize.default)(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${(0, _capitalize.default)(ownerState.anchor)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   overflowY: 'auto',
   display: 'flex',
   flexDirection: 'column',
@@ -94,32 +89,73 @@ const DrawerPaper = (0, _styled.default)(_Paper.default, {
   // We disable the focus ring for mouse, touch and keyboard users.
   // At some point, it would be better to keep it for keyboard users.
   // :focus-ring CSS pseudo-class will help.
-  outline: 0
-}, ownerState.anchor === 'left' && {
-  left: 0
-}, ownerState.anchor === 'top' && {
-  top: 0,
-  left: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'right' && {
-  right: 0
-}, ownerState.anchor === 'bottom' && {
-  top: 'auto',
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
+  outline: 0,
+  variants: [{
+    props: {
+      anchor: 'left'
+    },
+    style: {
+      left: 0
+    }
+  }, {
+    props: {
+      anchor: 'top'
+    },
+    style: {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 'auto',
+      maxHeight: '100%'
+    }
+  }, {
+    props: {
+      anchor: 'right'
+    },
+    style: {
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'bottom'
+    },
+    style: {
+      top: 'auto',
+      left: 0,
+      bottom: 0,
+      right: 0,
+      height: 'auto',
+      maxHeight: '100%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'left' && ownerState.variant !== 'temporary',
+    style: {
+      borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'top' && ownerState.variant !== 'temporary',
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'right' && ownerState.variant !== 'temporary',
+    style: {
+      borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary',
+    style: {
+      borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }]
 }));
 const oppositeDirection = {
   left: 'right',
@@ -141,37 +177,37 @@ function getAnchor({
  * when `variant="temporary"` is set.
  */
 const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDrawer'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      anchor: anchorProp = 'left',
-      BackdropProps,
-      children,
-      className,
-      elevation = 16,
-      hideBackdrop = false,
-      ModalProps: {
-        BackdropProps: BackdropPropsProp
-      } = {},
-      onClose,
-      open = false,
-      PaperProps = {},
-      SlideProps,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = _Slide.default,
-      transitionDuration = defaultTransitionDuration,
-      variant = 'temporary'
-    } = props,
-    ModalProps = (0, _objectWithoutPropertiesLoose2.default)(props.ModalProps, _excluded),
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    anchor: anchorProp = 'left',
+    BackdropProps,
+    children,
+    className,
+    elevation = 16,
+    hideBackdrop = false,
+    ModalProps: {
+      BackdropProps: BackdropPropsProp,
+      ...ModalProps
+    } = {},
+    onClose,
+    open = false,
+    PaperProps = {},
+    SlideProps,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = _Slide.default,
+    transitionDuration = defaultTransitionDuration,
+    variant = 'temporary',
+    ...other
+  } = props;
 
   // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
@@ -184,62 +220,67 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
   const anchor = anchorProp;
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     anchor,
     elevation,
     open,
-    variant
-  }, other);
+    variant,
+    ...other
+  };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerPaper, (0, _extends2.default)({
+  const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerPaper, {
     elevation: variant === 'temporary' ? elevation : 0,
-    square: true
-  }, PaperProps, {
+    square: true,
+    ...PaperProps,
     className: (0, _clsx.default)(classes.paper, PaperProps.className),
     ownerState: ownerState,
     children: children
-  }));
+  });
   if (variant === 'permanent') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, {
       className: (0, _clsx.default)(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: drawer
-    }));
+    });
   }
-  const slidingDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+  const slidingDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
     in: open,
     direction: oppositeDirection[anchorInvariant],
     timeout: transitionDuration,
-    appear: mounted.current
-  }, SlideProps, {
+    appear: mounted.current,
+    ...SlideProps,
     children: drawer
-  }));
+  });
   if (variant === 'persistent') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerDockedRoot, {
       className: (0, _clsx.default)(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: slidingDrawer
-    }));
+    });
   }
 
   // variant === temporary
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerRoot, (0, _extends2.default)({
-    BackdropProps: (0, _extends2.default)({}, BackdropProps, BackdropPropsProp, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerRoot, {
+    BackdropProps: {
+      ...BackdropProps,
+      ...BackdropPropsProp,
       transitionDuration
-    }),
+    },
     className: (0, _clsx.default)(classes.root, classes.modal, className),
     open: open,
     ownerState: ownerState,
     onClose: onClose,
     hideBackdrop: hideBackdrop,
-    ref: ref
-  }, other, ModalProps, {
+    ref: ref,
+    ...other,
+    ...ModalProps,
     children: slidingDrawer
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐