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

package/node/List/List.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 _ListContext = _interopRequireDefault(require("./ListContext"));
 var _listClasses = require("./listClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 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)('MuiList');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _listClasses.getListUtilityClass, classes);
 };
-const ListRoot = (0, _styled.default)('ul', {
+const ListRoot = (0, _zeroStyled.styled)('ul', {
   name: 'MuiList',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -41,21 +41,30 @@ const ListRoot = (0, _styled.default)('ul', {
     } = props;
     return [styles.root, !ownerState.disablePadding && styles.padding, ownerState.dense && styles.dense, ownerState.subheader && styles.subheader];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   listStyle: 'none',
   margin: 0,
   padding: 0,
-  position: 'relative'
-}, !ownerState.disablePadding && {
-  paddingTop: 8,
-  paddingBottom: 8
-}, ownerState.subheader && {
-  paddingTop: 0
-}));
+  position: 'relative',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding,
+    style: {
+      paddingTop: 8,
+      paddingBottom: 8
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.subheader,
+    style: {
+      paddingTop: 0
+    }
+  }]
+});
 const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiList'
   });

package/node/ListItem/ListItem.js

@@ -16,8 +16,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -31,6 +30,7 @@ const _excluded = ["className"],
   _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 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)('MuiListItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -57,7 +57,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _listItemClasses.getListItemUtilityClass, classes);
 };
-const ListItemRoot = exports.ListItemRoot = (0, _styled.default)('div', {
+const ListItemRoot = exports.ListItemRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiListItem',
   slot: 'Root',
   overridesResolver
@@ -176,7 +176,7 @@ const ListItemRoot = exports.ListItemRoot = (0, _styled.default)('div', {
     }
   }]
 }));
-const ListItemContainer = (0, _styled.default)('li', {
+const ListItemContainer = (0, _zeroStyled.styled)('li', {
   name: 'MuiListItem',
   slot: 'Container',
   overridesResolver: (props, styles) => styles.container
@@ -188,7 +188,7 @@ const ListItemContainer = (0, _styled.default)('li', {
  * Uses an additional container component if `ListItemSecondaryAction` is the last child.
  */
 const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiListItem'
   });

package/node/ListItemAvatar/ListItemAvatar.js

@@ -13,13 +13,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _listItemAvatarClasses = require("./listItemAvatarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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)('MuiListItemAvatar');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _listItemAvatarClasses.getListItemAvatarUtilityClass, classes);
 };
-const ListItemAvatarRoot = (0, _styled.default)('div', {
+const ListItemAvatarRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiListItemAvatar',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -56,7 +56,7 @@ const ListItemAvatarRoot = (0, _styled.default)('div', {
  * A simple wrapper to apply `List` styles to an `Avatar`.
  */
 const ListItemAvatar = /*#__PURE__*/React.forwardRef(function ListItemAvatar(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiListItemAvatar'
   });

package/node/ListItemButton/ListItemButton.js

@@ -13,8 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireWildcard(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -24,6 +24,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "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)('MuiListItemButton');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -47,8 +48,8 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _listItemButtonClasses.getListItemButtonUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const ListItemButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiListItemButton',
   slot: 'Root',
   overridesResolver
@@ -130,7 +131,7 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   }]
 }));
 const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiListItemButton'
   });

package/node/ListItemIcon/ListItemIcon.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 _listItemIconClasses = require("./listItemIconClasses");
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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)('MuiListItemIcon');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _listItemIconClasses.getListItemIconUtilityClass, classes);
 };
-const ListItemIconRoot = (0, _styled.default)('div', {
+const ListItemIconRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiListItemIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -40,22 +40,27 @@ const ListItemIconRoot = (0, _styled.default)('div', {
     return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   minWidth: 56,
   color: (theme.vars || theme).palette.action.active,
   flexShrink: 0,
-  display: 'inline-flex'
-}, ownerState.alignItems === 'flex-start' && {
-  marginTop: 8
+  display: 'inline-flex',
+  variants: [{
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      marginTop: 8
+    }
+  }]
 }));
 
 /**
  * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
  */
 const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiListItemIcon'
   });

package/node/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -12,14 +12,14 @@ 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 _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _listItemSecondaryActionClasses = require("./listItemSecondaryActionClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["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)('MuiListItemSecondaryAction');
 const useUtilityClasses = ownerState => {
   const {
     disableGutters,
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _listItemSecondaryActionClasses.getListItemSecondaryActionClassesUtilityClass, classes);
 };
-const ListItemSecondaryActionRoot = (0, _styled.default)('div', {
+const ListItemSecondaryActionRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiListItemSecondaryAction',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -58,7 +58,7 @@ const ListItemSecondaryActionRoot = (0, _styled.default)('div', {
  * Must be used as the last child of ListItem to function properly.
  */
 const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiListItemSecondaryAction'
   });

package/node/ListItemText/ListItemText.js

@@ -14,13 +14,13 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _listItemTextClasses = _interopRequireWildcard(require("./listItemTextClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"];
 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)('MuiListItemText');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _listItemTextClasses.getListItemTextUtilityClass, classes);
 };
-const ListItemTextRoot = (0, _styled.default)('div', {
+const ListItemTextRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiListItemText',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -72,7 +72,7 @@ const ListItemTextRoot = (0, _styled.default)('div', {
   }]
 });
 const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiListItemText'
   });

package/node/ListSubheader/ListSubheader.js

@@ -12,14 +12,14 @@ 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 _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _listSubheaderClasses = require("./listSubheaderClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 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)('MuiListSubheader');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _listSubheaderClasses.getListSubheaderUtilityClass, classes);
 };
-const ListSubheaderRoot = (0, _styled.default)('li', {
+const ListSubheaderRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiListSubheader',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -94,7 +94,7 @@ const ListSubheaderRoot = (0, _styled.default)('li', {
   }]
 }));
 const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiListSubheader'
   });
@@ -122,7 +122,9 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ownerState: ownerState
   }, other));
 });
-ListSubheader.muiSkipListHighlight = true;
+if (ListSubheader) {
+  ListSubheader.muiSkipListHighlight = true;
+}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/node/Menu/Menu.js

@@ -18,14 +18,15 @@ var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementTyp
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _MenuList = _interopRequireDefault(require("../MenuList"));
 var _Popover = _interopRequireWildcard(require("../Popover"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _menuClasses = require("./menuClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onEntering"],
   _excluded2 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiMenu');
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -45,13 +46,13 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _menuClasses.getMenuUtilityClass, classes);
 };
-const MenuRoot = (0, _styled.default)(_Popover.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const MenuRoot = (0, _zeroStyled.styled)(_Popover.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiMenu',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MenuPaper = exports.MenuPaper = (0, _styled.default)(_Popover.PopoverPaper, {
+const MenuPaper = exports.MenuPaper = (0, _zeroStyled.styled)(_Popover.PopoverPaper, {
   name: 'MuiMenu',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -63,7 +64,7 @@ const MenuPaper = exports.MenuPaper = (0, _styled.default)(_Popover.PopoverPaper
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch'
 });
-const MenuMenuList = (0, _styled.default)(_MenuList.default, {
+const MenuMenuList = (0, _zeroStyled.styled)(_MenuList.default, {
   name: 'MuiMenu',
   slot: 'List',
   overridesResolver: (props, styles) => styles.list
@@ -73,7 +74,7 @@ const MenuMenuList = (0, _styled.default)(_MenuList.default, {
 });
 const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   var _slots$paper, _slotProps$paper;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiMenu'
   });

package/node/MenuItem/MenuItem.js

@@ -13,8 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireWildcard(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -27,6 +27,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "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)('MuiMenuItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -49,14 +50,13 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _menuItemClasses.getMenuItemUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const MenuItemRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiMenuItem',
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
   display: 'flex',
   justifyContent: 'flex-start',
@@ -67,14 +67,7 @@ const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
   paddingTop: 6,
   paddingBottom: 6,
   boxSizing: 'border-box',
-  whiteSpace: 'nowrap'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, {
+  whiteSpace: 'nowrap',
   '&:hover': {
     textDecoration: 'none',
     backgroundColor: (theme.vars || theme).palette.action.hover,
@@ -118,23 +111,50 @@ const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
   },
   [`& .${_ListItemIcon.listItemIconClasses.root}`]: {
     minWidth: 36
-  }
-}, !ownerState.dense && {
-  [theme.breakpoints.up('sm')]: {
-    minHeight: 'auto'
-  }
-}, ownerState.dense && (0, _extends2.default)({
-  minHeight: 32,
-  // https://m2.material.io/components/menus#specs > Dense
-  paddingTop: 4,
-  paddingBottom: 4
-}, theme.typography.body2, {
-  [`& .${_ListItemIcon.listItemIconClasses.root} svg`]: {
-    fontSize: '1.25rem'
-  }
-})));
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.dense,
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        minHeight: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: (0, _extends2.default)({
+      minHeight: 32,
+      // https://m2.material.io/components/menus#specs > Dense
+      paddingTop: 4,
+      paddingBottom: 4
+    }, theme.typography.body2, {
+      [`& .${_ListItemIcon.listItemIconClasses.root} svg`]: {
+        fontSize: '1.25rem'
+      }
+    })
+  }]
+}));
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiMenuItem'
   });