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

package/node/DialogContent/DialogContent.js

@@ -6,20 +6,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _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 +30,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,25 +40,35 @@ 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'
   });

package/node/DialogContentText/DialogContentText.js

@@ -12,14 +12,15 @@ 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
@@ -30,14 +31,14 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _dialogContentTextClasses.getDialogContentTextUtilityClass, classes);
   return (0, _extends2.default)({}, classes, 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'
   });

package/node/DialogTitle/DialogTitle.js

@@ -13,14 +13,14 @@ 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 +30,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,7 +39,7 @@ 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'
   });

package/node/Divider/Divider.js

@@ -288,7 +288,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,8 @@ 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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -21,14 +21,15 @@ 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 +50,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 +59,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 +68,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 +78,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 +94,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,7 +182,7 @@ 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'
   });

package/node/Fab/Fab.js

@@ -15,7 +15,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _fabClasses = _interopRequireWildcard(require("./fabClasses"));
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"];
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
 const FabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiFab',
   slot: 'Root',
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   overridesResolver: (props, styles) => {
     const {
       ownerState