@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/Dialog/Dialog.js

@@ -6,8 +6,6 @@ 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"));
@@ -17,17 +15,16 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _Paper = _interopRequireDefault(require("../Paper"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
 var _dialogClasses = _interopRequireWildcard(require("./dialogClasses"));
 var _DialogContext = _interopRequireDefault(require("./DialogContext"));
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "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 && {}.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 DialogBackdrop = (0, _styled.default)(_Backdrop.default, {
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiDialog');
+const DialogBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
   name: 'MuiDialog',
   slot: 'Backdrop',
   overrides: (props, styles) => styles.backdrop
@@ -50,7 +47,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _dialogClasses.getDialogUtilityClass, classes);
 };
-const DialogRoot = (0, _styled.default)(_Modal.default, {
+const DialogRoot = (0, _zeroStyled.styled)(_Modal.default, {
   name: 'MuiDialog',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -60,7 +57,7 @@ const DialogRoot = (0, _styled.default)(_Modal.default, {
     position: 'absolute !important'
   }
 });
-const DialogContainer = (0, _styled.default)('div', {
+const DialogContainer = (0, _zeroStyled.styled)('div', {
   name: 'MuiDialog',
   slot: 'Container',
   overridesResolver: (props, styles) => {
@@ -69,32 +66,41 @@ const DialogContainer = (0, _styled.default)('div', {
     } = props;
     return [styles.container, styles[`scroll${(0, _capitalize.default)(ownerState.scroll)}`]];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   height: '100%',
   '@media print': {
     height: 'auto'
   },
   // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0
-}, ownerState.scroll === 'paper' && {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-}, ownerState.scroll === 'body' && {
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  textAlign: 'center',
-  '&::after': {
-    content: '""',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    height: '100%',
-    width: '0'
-  }
-}));
-const DialogPaper = (0, _styled.default)(_Paper.default, {
+  outline: 0,
+  variants: [{
+    props: {
+      scroll: 'paper'
+    },
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, {
+    props: {
+      scroll: 'body'
+    },
+    style: {
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      textAlign: 'center',
+      '&::after': {
+        content: '""',
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        height: '100%',
+        width: '0'
+      }
+    }
+  }]
+});
+const DialogPaper = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiDialog',
   slot: 'Paper',
   overridesResolver: (props, styles) => {
@@ -104,61 +110,93 @@ const DialogPaper = (0, _styled.default)(_Paper.default, {
     return [styles.paper, styles[`scrollPaper${(0, _capitalize.default)(ownerState.scroll)}`], styles[`paperWidth${(0, _capitalize.default)(String(ownerState.maxWidth))}`], ownerState.fullWidth && styles.paperFullWidth, ownerState.fullScreen && styles.paperFullScreen];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   margin: 32,
   position: 'relative',
-  overflowY: 'auto',
-  // Fix IE11 issue, to remove at some point.
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'
-  }
-}, ownerState.scroll === 'paper' && {
-  display: 'flex',
-  flexDirection: 'column',
-  maxHeight: 'calc(100% - 64px)'
-}, ownerState.scroll === 'body' && {
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  textAlign: 'left' // 'initial' doesn't work on IE11
-}, !ownerState.maxWidth && {
-  maxWidth: 'calc(100% - 64px)'
-}, ownerState.maxWidth === 'xs' && {
-  maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `max(${theme.breakpoints.values.xs}${theme.breakpoints.unit}, 444px)`,
-  [`&.${_dialogClasses.default.paperScrollBody}`]: {
-    [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {
-      maxWidth: 'calc(100% - 64px)'
+  },
+  variants: [{
+    props: {
+      scroll: 'paper'
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      maxHeight: 'calc(100% - 64px)'
     }
-  }
-}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
-  maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
-  [`&.${_dialogClasses.default.paperScrollBody}`]: {
-    [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
+  }, {
+    props: {
+      scroll: 'body'
+    },
+    style: {
+      display: 'inline-block',
+      verticalAlign: 'middle'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.maxWidth,
+    style: {
       maxWidth: 'calc(100% - 64px)'
     }
-  }
-}, ownerState.fullWidth && {
-  width: 'calc(100% - 64px)'
-}, ownerState.fullScreen && {
-  margin: 0,
-  width: '100%',
-  maxWidth: '100%',
-  height: '100%',
-  maxHeight: 'none',
-  borderRadius: 0,
-  [`&.${_dialogClasses.default.paperScrollBody}`]: {
-    margin: 0,
-    maxWidth: '100%'
-  }
+  }, {
+    props: {
+      maxWidth: 'xs'
+    },
+    style: {
+      maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `max(${theme.breakpoints.values.xs}${theme.breakpoints.unit}, 444px)`,
+      [`&.${_dialogClasses.default.paperScrollBody}`]: {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
+        }
+      }
+    }
+  }, ...Object.keys(theme.breakpoints.values).filter(maxWidth => maxWidth !== 'xs').map(maxWidth => ({
+    props: {
+      maxWidth
+    },
+    style: {
+      maxWidth: `${theme.breakpoints.values[maxWidth]}${theme.breakpoints.unit}`,
+      [`&.${_dialogClasses.default.paperScrollBody}`]: {
+        [theme.breakpoints.down(theme.breakpoints.values[maxWidth] + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
+        }
+      }
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      width: 'calc(100% - 64px)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullScreen,
+    style: {
+      margin: 0,
+      width: '100%',
+      maxWidth: '100%',
+      height: '100%',
+      maxHeight: 'none',
+      borderRadius: 0,
+      [`&.${_dialogClasses.default.paperScrollBody}`]: {
+        margin: 0,
+        maxWidth: '100%'
+      }
+    }
+  }]
 }));
 
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
 const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDialog'
   });
@@ -168,34 +206,36 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      'aria-describedby': ariaDescribedby,
-      'aria-labelledby': ariaLabelledbyProp,
-      BackdropComponent,
-      BackdropProps,
-      children,
-      className,
-      disableEscapeKeyDown = false,
-      fullScreen = false,
-      fullWidth = false,
-      maxWidth = 'sm',
-      onBackdropClick,
-      onClose,
-      open,
-      PaperComponent = _Paper.default,
-      PaperProps = {},
-      scroll = 'paper',
-      TransitionComponent = _Fade.default,
-      transitionDuration = defaultTransitionDuration,
-      TransitionProps
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    'aria-describedby': ariaDescribedby,
+    'aria-labelledby': ariaLabelledbyProp,
+    BackdropComponent,
+    BackdropProps,
+    children,
+    className,
+    disableEscapeKeyDown = false,
+    fullScreen = false,
+    fullWidth = false,
+    maxWidth = 'sm',
+    onBackdropClick,
+    onClick,
+    onClose,
+    open,
+    PaperComponent = _Paper.default,
+    PaperProps = {},
+    scroll = 'paper',
+    TransitionComponent = _Fade.default,
+    transitionDuration = defaultTransitionDuration,
+    TransitionProps,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableEscapeKeyDown,
     fullScreen,
     fullWidth,
     maxWidth,
     scroll
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const backdropClick = React.useRef();
   const handleMouseDown = event => {
@@ -204,6 +244,10 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     backdropClick.current = event.target === event.currentTarget;
   };
   const handleBackdropClick = event => {
+    if (onClick) {
+      onClick(event);
+    }
+
     // Ignore the events not coming from the "backdrop".
     if (!backdropClick.current) {
       return;
@@ -222,52 +266,53 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       titleId: ariaLabelledby
     };
   }, [ariaLabelledby]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogRoot, {
     className: (0, _clsx.default)(classes.root, className),
     closeAfterTransition: true,
     components: {
       Backdrop: DialogBackdrop
     },
     componentsProps: {
-      backdrop: (0, _extends2.default)({
+      backdrop: {
         transitionDuration,
-        as: BackdropComponent
-      }, BackdropProps)
+        as: BackdropComponent,
+        ...BackdropProps
+      }
     },
     disableEscapeKeyDown: disableEscapeKeyDown,
     onClose: onClose,
     open: open,
     ref: ref,
     onClick: handleBackdropClick,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
       appear: true,
       in: open,
       timeout: transitionDuration,
-      role: "presentation"
-    }, TransitionProps, {
+      role: "presentation",
+      ...TransitionProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContainer, {
         className: (0, _clsx.default)(classes.container),
         onMouseDown: handleMouseDown,
         ownerState: ownerState,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPaper, (0, _extends2.default)({
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPaper, {
           as: PaperComponent,
           elevation: 24,
           role: "dialog",
           "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby
-        }, PaperProps, {
+          "aria-labelledby": ariaLabelledby,
+          ...PaperProps,
           className: (0, _clsx.default)(classes.paper, PaperProps.className),
           ownerState: ownerState,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContext.default.Provider, {
             value: dialogContextValue,
             children: children
           })
-        }))
+        })
       })
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -342,6 +387,10 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes.default.func,
   /**
    * Callback fired when the component requests to be closed.
    *

package/node/DialogActions/DialogActions.js

@@ -6,19 +6,16 @@ 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 = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _dialogActionsClasses = require("./dialogActionsClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "disableSpacing"];
 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)('MuiDialogActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -29,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _dialogActionsClasses.getDialogActionsUtilityClass, classes);
 };
-const DialogActionsRoot = (0, _styled.default)('div', {
+const DialogActionsRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiDialogActions',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -38,38 +35,44 @@ const DialogActionsRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   display: 'flex',
   alignItems: 'center',
   padding: 8,
   justifyContent: 'flex-end',
-  flex: '0 0 auto'
-}, !ownerState.disableSpacing && {
-  '& > :not(style) ~ :not(style)': {
-    marginLeft: 8
-  }
-}));
+  flex: '0 0 auto',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableSpacing,
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
+    }
+  }]
+});
 const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDialogActions'
   });
   const {
-      className,
-      disableSpacing = false
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    disableSpacing = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableSpacing
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogActionsRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogActionsRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogActions.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/DialogContent/DialogContent.js

@@ -6,20 +6,17 @@ 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 = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _dialogContentClasses = require("./dialogContentClasses");
 var _dialogTitleClasses = _interopRequireDefault(require("../DialogTitle/dialogTitleClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "dividers"];
 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)('MuiDialogContent');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _dialogContentClasses.getDialogContentUtilityClass, classes);
 };
-const DialogContentRoot = (0, _styled.default)('div', {
+const DialogContentRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiDialogContent',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -40,42 +37,54 @@ const DialogContentRoot = (0, _styled.default)('div', {
     return [styles.root, ownerState.dividers && styles.dividers];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   flex: '1 1 auto',
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
   overflowY: 'auto',
-  padding: '20px 24px'
-}, ownerState.dividers ? {
-  padding: '16px 24px',
-  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-} : {
-  [`.${_dialogTitleClasses.default.root} + &`]: {
-    paddingTop: 0
-  }
+  padding: '20px 24px',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.dividers,
+    style: {
+      padding: '16px 24px',
+      borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.dividers,
+    style: {
+      [`.${_dialogTitleClasses.default.root} + &`]: {
+        paddingTop: 0
+      }
+    }
+  }]
 }));
 const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDialogContent'
   });
   const {
-      className,
-      dividers = false
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    dividers = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     dividers
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContentRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContentRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐