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

package/node/Avatar/Avatar.js

@@ -254,7 +254,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   imgProps: _propTypes.default.object,
   /**

package/node/Backdrop/Backdrop.js

@@ -197,7 +197,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.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 Fade
-   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: _propTypes.default.elementType,
   /**

package/node/Badge/Badge.js

@@ -366,7 +366,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -378,7 +378,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @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.
    *
    * @default {}
    */

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -11,14 +11,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _MoreHoriz = _interopRequireDefault(require("../internal/svg-icons/MoreHoriz"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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 BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
+const BreadcrumbCollapsedButton = (0, _zeroStyled.styled)(_ButtonBase.default)(({
   theme
 }) => (0, _extends2.default)({
   display: 'flex',
@@ -45,7 +45,7 @@ const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
     backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[600], 0.12)
   })
 }));
-const BreadcrumbCollapsedIcon = (0, _styled.default)(_MoreHoriz.default)({
+const BreadcrumbCollapsedIcon = (0, _zeroStyled.styled)(_MoreHoriz.default)({
   width: 24,
   height: 16
 });

package/node/Button/Button.js

@@ -14,7 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -73,7 +73,7 @@ const commonIconStyles = [{
   }
 }];
 const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {

package/node/Checkbox/Checkbox.js

@@ -23,7 +23,7 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "disableRipple", "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)('MuiCheckbox');
@@ -118,12 +118,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
       inputProps,
       size = 'medium',
+      disableRipple = false,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
   const ownerState = (0, _extends2.default)({}, props, {
+    disableRipple,
     color,
     indeterminate,
     size

package/node/Chip/chipClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getChipUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChip', slot);
 }
-const chipClasses = (0, _generateUtilityClasses.default)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
+const chipClasses = (0, _generateUtilityClasses.default)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorDefault', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 var _default = exports.default = chipClasses;

package/node/Collapse/Collapse.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 _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,8 +15,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 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 _createTransitions = require("../styles/createTransitions");
 var _utils = require("../transitions/utils");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -26,6 +25,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 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)('MuiCollapse');
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _collapseClasses.getCollapseUtilityClass, classes);
 };
-const CollapseRoot = (0, _styled.default)('div', {
+const CollapseRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -50,50 +50,79 @@ const CollapseRoot = (0, _styled.default)('div', {
     return [styles.root, styles[ownerState.orientation], ownerState.state === 'entered' && styles.entered, ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && styles.hidden];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   height: 0,
   overflow: 'hidden',
-  transition: theme.transitions.create('height')
-}, ownerState.orientation === 'horizontal' && {
-  height: 'auto',
-  width: 0,
-  transition: theme.transitions.create('width')
-}, ownerState.state === 'entered' && (0, _extends2.default)({
-  height: 'auto',
-  overflow: 'visible'
-}, ownerState.orientation === 'horizontal' && {
-  width: 'auto'
-}), ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && {
-  visibility: 'hidden'
+  transition: theme.transitions.create('height'),
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      height: 'auto',
+      width: 0,
+      transition: theme.transitions.create('width')
+    }
+  }, {
+    props: {
+      state: 'entered'
+    },
+    style: {
+      height: 'auto',
+      overflow: 'visible'
+    }
+  }, {
+    props: {
+      state: 'entered',
+      orientation: 'horizontal'
+    },
+    style: {
+      width: 'auto'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px',
+    style: {
+      visibility: 'hidden'
+    }
+  }]
 }));
-const CollapseWrapper = (0, _styled.default)('div', {
+const CollapseWrapper = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
   slot: 'Wrapper',
   overridesResolver: (props, styles) => styles.wrapper
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   // Hack to get children with a negative margin to not falsify the height computation.
   display: 'flex',
-  width: '100%'
-}, ownerState.orientation === 'horizontal' && {
-  width: 'auto',
-  height: '100%'
-}));
-const CollapseWrapperInner = (0, _styled.default)('div', {
+  width: '100%',
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      width: 'auto',
+      height: '100%'
+    }
+  }]
+});
+const CollapseWrapperInner = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
   slot: 'WrapperInner',
   overridesResolver: (props, styles) => styles.wrapperInner
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  width: '100%'
-}, ownerState.orientation === 'horizontal' && {
-  width: 'auto',
-  height: '100%'
-}));
+})({
+  width: '100%',
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      width: 'auto',
+      height: '100%'
+    }
+  }]
+});
 
 /**
  * The Collapse transition is used by the
@@ -101,7 +130,7 @@ const CollapseWrapperInner = (0, _styled.default)('div', {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiCollapse'
   });
@@ -381,5 +410,7 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes /* remove-proptypes *
     exit: _propTypes.default.number
   })])
 } : void 0;
-Collapse.muiSupportAuto = true;
+if (Collapse) {
+  Collapse.muiSupportAuto = true;
+}
 var _default = exports.default = Collapse;

package/node/Dialog/Dialog.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 _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -17,17 +17,17 @@ 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", "onClick", "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 +50,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 +60,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 +69,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,9 +113,8 @@ 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',
@@ -114,51 +122,87 @@ const DialogPaper = (0, _styled.default)(_Paper.default, {
   '@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',
+      textAlign: 'left' // 'initial' doesn't work on IE11
+    }
+  }, {
+    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'
   });

package/node/DialogActions/DialogActions.js

@@ -6,19 +6,19 @@ 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 _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 +29,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,21 +38,25 @@ 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'
   });