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

package/node/PaginationItem/PaginationItem.js

@@ -21,9 +21,10 @@ var _FirstPage = _interopRequireDefault(require("../internal/svg-icons/FirstPage
 var _LastPage = _interopRequireDefault(require("../internal/svg-icons/LastPage"));
 var _NavigateBefore = _interopRequireDefault(require("../internal/svg-icons/NavigateBefore"));
 var _NavigateNext = _interopRequireDefault(require("../internal/svg-icons/NavigateNext"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "slotProps", "type", "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)('MuiPaginationItem');
@@ -274,6 +275,7 @@ const PaginationItemPageIcon = (0, _zeroStyled.styled)('div', {
   }]
 }));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
+  var _slots$previous, _slots$next, _slots$first, _slots$last;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPaginationItem'
@@ -289,6 +291,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
       shape = 'circular',
       size = 'medium',
       slots = {},
+      slotProps = {},
       type = 'page',
       variant = 'text'
     } = props,
@@ -304,18 +307,53 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   });
   const isRtl = (0, _RtlProvider.useRtl)();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = isRtl ? {
-    previous: slots.next || components.next || _NavigateNext.default,
-    next: slots.previous || components.previous || _NavigateBefore.default,
-    last: slots.first || components.first || _FirstPage.default,
-    first: slots.last || components.last || _LastPage.default
-  } : {
-    previous: slots.previous || components.previous || _NavigateBefore.default,
-    next: slots.next || components.next || _NavigateNext.default,
-    first: slots.first || components.first || _FirstPage.default,
-    last: slots.last || components.last || _LastPage.default
+  const externalForwardedProps = {
+    slots: {
+      previous: (_slots$previous = slots.previous) != null ? _slots$previous : components.previous,
+      next: (_slots$next = slots.next) != null ? _slots$next : components.next,
+      first: (_slots$first = slots.first) != null ? _slots$first : components.first,
+      last: (_slots$last = slots.last) != null ? _slots$last : components.last
+    },
+    slotProps
   };
-  const Icon = normalizedIcons[type];
+  const [PreviousSlot, previousSlotProps] = (0, _useSlot.default)('previous', {
+    elementType: _NavigateBefore.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [NextSlot, nextSlotProps] = (0, _useSlot.default)('next', {
+    elementType: _NavigateNext.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [FirstSlot, firstSlotProps] = (0, _useSlot.default)('first', {
+    elementType: _FirstPage.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [LastSlot, lastSlotProps] = (0, _useSlot.default)('last', {
+    elementType: _LastPage.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const rtlAwareType = isRtl ? {
+    previous: 'next',
+    next: 'previous',
+    first: 'last',
+    last: 'first'
+  }[type] : type;
+  const IconSlot = {
+    previous: PreviousSlot,
+    next: NextSlot,
+    first: FirstSlot,
+    last: LastSlot
+  }[rtlAwareType];
+  const iconSlotProps = {
+    previous: previousSlotProps,
+    next: nextSlotProps,
+    first: firstSlotProps,
+    last: lastSlotProps
+  }[rtlAwareType];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
@@ -328,11 +366,10 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     disabled: disabled,
     className: (0, _clsx.default)(classes.root, className)
   }, other, {
-    children: [type === 'page' && page, Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItemPageIcon, {
-      as: Icon,
-      ownerState: ownerState,
-      className: classes.icon
-    }) : null]
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItemPageIcon, (0, _extends2.default)({}, iconSlotProps, {
+      className: classes.icon,
+      as: IconSlot
+    })) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
@@ -371,6 +408,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @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.
    */
   components: _propTypes.default.shape({
     first: _propTypes.default.elementType,
@@ -402,11 +440,18 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default 'medium'
    */
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['small', 'medium', 'large']), _propTypes.default.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    first: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    last: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    next: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    previous: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: _propTypes.default.shape({

package/node/Paper/Paper.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"));
@@ -15,15 +15,15 @@ var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropTyp
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _paperClasses = require("./paperClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "component", "elevation", "square", "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)('MuiPaper');
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _paperClasses.getPaperUtilityClass, classes);
 };
-const PaperRoot = (0, _styled.default)('div', {
+const PaperRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiPaper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -46,31 +46,42 @@ const PaperRoot = (0, _styled.default)('div', {
     return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  var _theme$vars$overlays;
-  return (0, _extends2.default)({
-    backgroundColor: (theme.vars || theme).palette.background.paper,
-    color: (theme.vars || theme).palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && (0, _extends2.default)({
-    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-  }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))})`
-  }, theme.vars && {
-    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
-  }));
-});
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.square,
+    style: {
+      borderRadius: theme.shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: {
+      variant: 'elevation'
+    },
+    style: {
+      boxShadow: 'var(--Paper-shadow)',
+      backgroundImage: 'var(--Paper-overlay)'
+    }
+  }]
+}));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  var _theme$overlays;
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiPaper'
   });
+  const theme = (0, _useTheme.default)();
   const {
       className,
       component = 'div',
@@ -87,8 +98,6 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const theme = (0, _useTheme.default)();
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
     }
@@ -98,7 +107,15 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref
-  }, other));
+  }, other, {
+    style: (0, _extends2.default)({}, variant === 'elevation' && (0, _extends2.default)({
+      '--Paper-shadow': (theme.vars || theme).shadows[elevation]
+    }, theme.vars && {
+      '--Paper-overlay': (_theme$overlays = theme.overlays) == null ? void 0 : _theme$overlays[elevation]
+    }, !theme.vars && theme.palette.mode === 'dark' && {
+      '--Paper-overlay': `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))})`
+    }), other.style)
+  }));
 });
 process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -142,6 +159,10 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
    * @default false
    */
   square: _propTypes.default.bool,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Radio/Radio.js

@@ -20,10 +20,10 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("../utils/createChainedFunction"));
 var _useRadioGroup = _interopRequireDefault(require("../RadioGroup/useRadioGroup"));
 var _radioClasses = _interopRequireWildcard(require("./radioClasses"));
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
+const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className", "disableRipple"];
 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)('MuiRadio');
@@ -39,7 +39,7 @@ const useUtilityClasses = ownerState => {
   return (0, _extends2.default)({}, classes, (0, _composeClasses.default)(slots, _radioClasses.getRadioUtilityClass, classes));
 };
 const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiRadio',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -125,10 +125,12 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name: nameProp,
       onChange: onChangeProp,
       size = 'medium',
-      className
+      className,
+      disableRipple = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
+    disableRipple,
     color,
     size
   });

package/node/Radio/RadioButtonIcon.js

@@ -11,13 +11,13 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonUnchecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonUnchecked"));
 var _RadioButtonChecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonChecked"));
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 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 RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
-  shouldForwardProp: _styled.rootShouldForwardProp
+  shouldForwardProp: _rootShouldForwardProp.default
 })({
   position: 'relative',
   display: 'flex'

package/node/Rating/Rating.js

@@ -19,14 +19,15 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../utils");
 var _Star = _interopRequireDefault(require("../internal/svg-icons/Star"));
 var _StarBorder = _interopRequireDefault(require("../internal/svg-icons/StarBorder"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _ratingClasses = _interopRequireWildcard(require("./ratingClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value"],
   _excluded2 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 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)('MuiRating');
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
@@ -62,7 +63,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _ratingClasses.getRatingUtilityClass, classes);
 };
-const RatingRoot = (0, _styled.default)('span', {
+const RatingRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -117,7 +118,7 @@ const RatingRoot = (0, _styled.default)('span', {
     }
   }]
 }));
-const RatingLabel = (0, _styled.default)('label', {
+const RatingLabel = (0, _zeroStyled.styled)('label', {
   name: 'MuiRating',
   slot: 'Label',
   overridesResolver: ({
@@ -138,7 +139,7 @@ const RatingLabel = (0, _styled.default)('label', {
     }
   }]
 });
-const RatingIcon = (0, _styled.default)('span', {
+const RatingIcon = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -174,10 +175,10 @@ const RatingIcon = (0, _styled.default)('span', {
     }
   }]
 }));
-const RatingDecimal = (0, _styled.default)('span', {
+const RatingDecimal = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Decimal',
-  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'iconActive',
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'iconActive',
   overridesResolver: (props, styles) => {
     const {
       iconActive
@@ -308,7 +309,7 @@ function defaultLabelText(value) {
   return `${value} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     name: 'MuiRating',
     props: inProps
   });

package/node/Select/Select.js

@@ -22,7 +22,8 @@ var _FilledInput = _interopRequireDefault(require("../FilledInput"));
 var _OutlinedInput = _interopRequireDefault(require("../OutlinedInput"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-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 = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
   _excluded2 = ["root"];
@@ -37,12 +38,12 @@ const useUtilityClasses = ownerState => {
 const styledRootConfig = {
   name: 'MuiSelect',
   overridesResolver: (props, styles) => styles.root,
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) && prop !== 'variant',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) && prop !== 'variant',
   slot: 'Root'
 };
-const StyledInput = (0, _styled.default)(_Input.default, styledRootConfig)('');
-const StyledOutlinedInput = (0, _styled.default)(_OutlinedInput.default, styledRootConfig)('');
-const StyledFilledInput = (0, _styled.default)(_FilledInput.default, styledRootConfig)('');
+const StyledInput = (0, _zeroStyled.styled)(_Input.default, styledRootConfig)('');
+const StyledOutlinedInput = (0, _zeroStyled.styled)(_OutlinedInput.default, styledRootConfig)('');
+const StyledFilledInput = (0, _zeroStyled.styled)(_FilledInput.default, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     name: 'MuiSelect',

package/node/Select/SelectInput.js

@@ -21,7 +21,8 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Menu = _interopRequireDefault(require("../Menu/Menu"));
 var _NativeSelectInput = require("../NativeSelect/NativeSelectInput");
 var _utils = require("../InputBase/utils");
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
@@ -30,7 +31,7 @@ var _span;
 const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "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 SelectSelect = (0, _styled.default)('div', {
+const SelectSelect = (0, _zeroStyled.styled)(_NativeSelectInput.StyledSelectSelect, {
   name: 'MuiSelect',
   slot: 'Select',
   overridesResolver: (props, styles) => {
@@ -49,7 +50,7 @@ const SelectSelect = (0, _styled.default)('div', {
       [`&.${_selectClasses.default.multiple}`]: styles.multiple
     }];
   }
-})(_NativeSelectInput.nativeSelectSelectStyles, {
+})({
   // Win specificity over the input base
   [`&.${_selectClasses.default.select}`]: {
     height: 'auto',
@@ -61,7 +62,7 @@ const SelectSelect = (0, _styled.default)('div', {
     overflow: 'hidden'
   }
 });
-const SelectIcon = (0, _styled.default)('svg', {
+const SelectIcon = (0, _zeroStyled.styled)(_NativeSelectInput.StyledSelectIcon, {
   name: 'MuiSelect',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -70,9 +71,9 @@ const SelectIcon = (0, _styled.default)('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${(0, _capitalize.default)(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(_NativeSelectInput.nativeSelectIconStyles);
-const SelectNativeInput = (0, _styled.default)('input', {
-  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'classes',
+})({});
+const SelectNativeInput = (0, _zeroStyled.styled)('input', {
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'classes',
   name: 'MuiSelect',
   slot: 'NativeInput',
   overridesResolver: (props, styles) => styles.nativeInput
@@ -444,6 +445,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const listboxId = (0, _useId.default)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SelectSelect, (0, _extends2.default)({
+      as: "div",
       ref: handleDisplayRef,
       tabIndex: tabIndex,
       role: "combobox",