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

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'
   });

package/node/NativeSelect/NativeSelectInput.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nativeSelectSelectStyles = exports.nativeSelectIconStyles = exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+exports.default = exports.StyledSelectSelect = exports.StyledSelectIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -15,7 +15,8 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _nativeSelectClasses = _interopRequireWildcard(require("./nativeSelectClasses"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "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); }
@@ -35,27 +36,23 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
 };
-const nativeSelectSelectStyles = ({
-  ownerState,
+const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)('select')(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
+  // Reset
   MozAppearance: 'none',
   // Reset
   WebkitAppearance: 'none',
-  // Reset
   // When interacting quickly, the text can end up selected.
   // Native select can't be selected either.
   userSelect: 'none',
-  borderRadius: 0,
   // Reset
+  borderRadius: 0,
   cursor: 'pointer',
-  '&:focus': (0, _extends2.default)({}, theme.vars ? {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
-  } : {
-    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
-  }, {
-    borderRadius: 0 // Reset Chrome style
-  }),
+  '&:focus': {
+    // Reset Chrome style
+    borderRadius: 0
+  },
   // Remove IE11 arrow
   '&::-ms-expand': {
     display: 'none'
@@ -69,29 +66,45 @@ const nativeSelectSelectStyles = ({
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
     backgroundColor: (theme.vars || theme).palette.background.paper
   },
-  // Bump specificity to allow extending custom inputs
-  '&&&': {
-    paddingRight: 24,
-    minWidth: 16 // So it doesn't collapse.
-  }
-}, ownerState.variant === 'filled' && {
-  '&&&': {
-    paddingRight: 32
-  }
-}, ownerState.variant === 'outlined' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius,
-  '&:focus': {
-    borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
-  },
-  '&&&': {
-    paddingRight: 32
-  }
-});
-exports.nativeSelectSelectStyles = nativeSelectSelectStyles;
-const NativeSelectSelect = (0, _styled.default)('select', {
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'filled' && ownerState.variant !== 'outlined',
+    style: {
+      // Bump specificity to allow extending custom inputs
+      '&&&': {
+        paddingRight: 24,
+        minWidth: 16 // So it doesn't collapse.
+      }
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      '&&&': {
+        paddingRight: 32
+      }
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      '&:focus': {
+        borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
+      },
+      '&&&': {
+        paddingRight: 32
+      }
+    }
+  }]
+}));
+const NativeSelectSelect = (0, _zeroStyled.styled)(StyledSelectSelect, {
   name: 'MuiNativeSelect',
   slot: 'Select',
-  shouldForwardProp: _styled.rootShouldForwardProp,
+  shouldForwardProp: _rootShouldForwardProp.default,
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -100,32 +113,46 @@ const NativeSelectSelect = (0, _styled.default)('select', {
       [`&.${_nativeSelectClasses.default.multiple}`]: styles.multiple
     }];
   }
-})(nativeSelectSelectStyles);
-const nativeSelectIconStyles = ({
-  ownerState,
+})({});
+const StyledSelectIcon = exports.StyledSelectIcon = (0, _zeroStyled.styled)('svg')(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events
   // to the input and to support wrapping tags..
   position: 'absolute',
   right: 0,
-  top: 'calc(50% - .5em)',
   // Center vertically, height is 1em
-  pointerEvents: 'none',
+  top: 'calc(50% - .5em)',
   // Don't block pointer events on the select under the icon.
+  pointerEvents: 'none',
   color: (theme.vars || theme).palette.action.active,
   [`&.${_nativeSelectClasses.default.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
-  }
-}, ownerState.open && {
-  transform: 'rotate(180deg)'
-}, ownerState.variant === 'filled' && {
-  right: 7
-}, ownerState.variant === 'outlined' && {
-  right: 7
-});
-exports.nativeSelectIconStyles = nativeSelectIconStyles;
-const NativeSelectIcon = (0, _styled.default)('svg', {
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.open,
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      right: 7
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      right: 7
+    }
+  }]
+}));
+const NativeSelectIcon = (0, _zeroStyled.styled)(StyledSelectIcon, {
   name: 'MuiNativeSelect',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -134,7 +161,7 @@ const NativeSelectIcon = (0, _styled.default)('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${(0, _capitalize.default)(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(nativeSelectIconStyles);
+})({});
 
 /**
  * @ignore - internal component.