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

package/node/InputLabel/InputLabel.js

@@ -15,14 +15,15 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _FormLabel = _interopRequireWildcard(require("../FormLabel"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _inputLabelClasses = require("./inputLabelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["disableAnimation", "margin", "shrink", "variant", "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)('MuiInputLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,8 +41,8 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _inputLabelClasses.getInputLabelUtilityClasses, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const InputLabelRoot = (0, _zeroStyled.styled)(_FormLabel.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiInputLabel',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -53,69 +54,130 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
     }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'block',
   transformOrigin: 'top left',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: '100%'
-}, ownerState.formControl && {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  // slight alteration to spec spacing to match visual spec result
-  transform: 'translate(0, 20px) scale(1)'
-}, ownerState.size === 'small' && {
-  // Compensation for the `Input.inputSizeSmall` style.
-  transform: 'translate(0, 17px) scale(1)'
-}, ownerState.shrink && {
-  transform: 'translate(0, -1.5px) scale(0.75)',
-  transformOrigin: 'top left',
-  maxWidth: '133%'
-}, !ownerState.disableAnimation && {
-  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
-    duration: theme.transitions.duration.shorter,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.variant === 'filled' && (0, _extends2.default)({
-  // Chrome's autofill feature gives the input field a yellow background.
-  // Since the input field is behind the label in the HTML tree,
-  // the input field is drawn last and hides the label with an opaque background color.
-  // zIndex: 1 will raise the label above opaque background-colors of input.
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(12px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 13px) scale(1)'
-}, ownerState.shrink && (0, _extends2.default)({
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  transform: 'translate(12px, 7px) scale(0.75)',
-  maxWidth: 'calc(133% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 4px) scale(0.75)'
-})), ownerState.variant === 'outlined' && (0, _extends2.default)({
-  // see comment above on filled.zIndex
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(14px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(14px, 9px) scale(1)'
-}, ownerState.shrink && {
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  // Theoretically, we should have (8+5)*2/0.75 = 34px
-  // but it feels a better when it bleeds a bit on the left, so 32px.
-  maxWidth: 'calc(133% - 32px)',
-  transform: 'translate(14px, -9px) scale(0.75)'
-})));
+  maxWidth: '100%',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.formControl,
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      // slight alteration to spec spacing to match visual spec result
+      transform: 'translate(0, 20px) scale(1)'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      // Compensation for the `Input.inputSizeSmall` style.
+      transform: 'translate(0, 17px) scale(1)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.shrink,
+    style: {
+      transform: 'translate(0, -1.5px) scale(0.75)',
+      transformOrigin: 'top left',
+      maxWidth: '133%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableAnimation,
+    style: {
+      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      // Chrome's autofill feature gives the input field a yellow background.
+      // Since the input field is behind the label in the HTML tree,
+      // the input field is drawn last and hides the label with an opaque background color.
+      // zIndex: 1 will raise the label above opaque background-colors of input.
+      zIndex: 1,
+      pointerEvents: 'none',
+      transform: 'translate(12px, 16px) scale(1)',
+      maxWidth: 'calc(100% - 24px)'
+    }
+  }, {
+    props: {
+      variant: 'filled',
+      size: 'small'
+    },
+    style: {
+      transform: 'translate(12px, 13px) scale(1)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'filled' && ownerState.shrink,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      transform: 'translate(12px, 7px) scale(0.75)',
+      maxWidth: 'calc(133% - 24px)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState,
+      size
+    }) => variant === 'filled' && ownerState.shrink && size === 'small',
+    style: {
+      transform: 'translate(12px, 4px) scale(0.75)'
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      // see comment above on filled.zIndex
+      zIndex: 1,
+      pointerEvents: 'none',
+      transform: 'translate(14px, 16px) scale(1)',
+      maxWidth: 'calc(100% - 24px)'
+    }
+  }, {
+    props: {
+      variant: 'outlined',
+      size: 'small'
+    },
+    style: {
+      transform: 'translate(14px, 9px) scale(1)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'outlined' && ownerState.shrink,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      // Theoretically, we should have (8+5)*2/0.75 = 34px
+      // but it feels a better when it bleeds a bit on the left, so 32px.
+      maxWidth: 'calc(133% - 32px)',
+      transform: 'translate(14px, -9px) scale(0.75)'
+    }
+  }]
+}));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     name: 'MuiInputLabel',
     props: inProps
   });

package/node/Link/Link.js

@@ -6,25 +6,27 @@ 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 _colorManipulator = require("@mui/system/colorManipulator");
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
 var _getTextDecoration = _interopRequireWildcard(require("./getTextDecoration"));
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 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)('MuiLink');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,7 +39,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _linkClasses.getLinkUtilityClass, classes);
 };
-const LinkRoot = (0, _styled.default)(_Typography.default, {
+const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
   name: 'MuiLink',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -47,60 +49,92 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
     return [styles.root, styles[`underline${(0, _capitalize.default)(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return (0, _extends2.default)({}, ownerState.underline === 'none' && {
-    textDecoration: 'none'
-  }, ownerState.underline === 'hover' && {
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'underline'
-    }
-  }, ownerState.underline === 'always' && (0, _extends2.default)({
-    textDecoration: 'underline'
-  }, ownerState.color !== 'inherit' && {
-    textDecorationColor: (0, _getTextDecoration.default)({
-      theme,
-      ownerState
-    })
-  }, {
-    '&:hover': {
-      textDecorationColor: 'inherit'
-    }
-  }), ownerState.component === 'button' && {
-    position: 'relative',
-    WebkitTapHighlightColor: 'transparent',
-    backgroundColor: 'transparent',
-    // Reset default value
-    // We disable the focus ring for mouse, touch and keyboard users.
-    outline: 0,
-    border: 0,
-    margin: 0,
-    // Remove the margin in Safari
-    borderRadius: 0,
-    padding: 0,
-    // Remove the padding in Firefox
-    cursor: 'pointer',
-    userSelect: 'none',
-    verticalAlign: 'middle',
-    MozAppearance: 'none',
-    // Reset
-    WebkitAppearance: 'none',
-    // Reset
-    '&::-moz-focus-inner': {
-      borderStyle: 'none' // Remove Firefox dotted outline.
-    },
-    [`&.${_linkClasses.default.focusVisible}`]: {
-      outline: 'auto'
-    }
-  });
+  return {
+    variants: [{
+      props: {
+        underline: 'none'
+      },
+      style: {
+        textDecoration: 'none'
+      }
+    }, {
+      props: {
+        underline: 'hover'
+      },
+      style: {
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline'
+        }
+      }
+    }, {
+      props: {
+        underline: 'always'
+      },
+      style: {
+        textDecoration: 'underline',
+        '&:hover': {
+          textDecorationColor: 'inherit'
+        }
+      }
+    }, {
+      props: ({
+        underline,
+        ownerState
+      }) => underline === 'always' && ownerState.color !== 'inherit',
+      style: {
+        textDecorationColor: 'var(--Link-underlineColor)'
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+      props: {
+        underline: 'always',
+        color
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.4)
+      }
+    })), {
+      props: {
+        component: 'button'
+      },
+      style: {
+        position: 'relative',
+        WebkitTapHighlightColor: 'transparent',
+        backgroundColor: 'transparent',
+        // Reset default value
+        // We disable the focus ring for mouse, touch and keyboard users.
+        outline: 0,
+        border: 0,
+        margin: 0,
+        // Remove the margin in Safari
+        borderRadius: 0,
+        padding: 0,
+        // Remove the padding in Firefox
+        cursor: 'pointer',
+        userSelect: 'none',
+        verticalAlign: 'middle',
+        MozAppearance: 'none',
+        // Reset
+        WebkitAppearance: 'none',
+        // Reset
+        '&::-moz-focus-inner': {
+          borderStyle: 'none' // Remove Firefox dotted outline.
+        },
+        [`&.${_linkClasses.default.focusVisible}`]: {
+          outline: 'auto'
+        }
+      }
+    }]
+  };
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
   });
+  const theme = (0, _useTheme.default)();
   const {
       className,
       color = 'primary',
@@ -156,11 +190,18 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant,
-    sx: [...(!Object.keys(_getTextDecoration.colorTransformations).includes(color) ? [{
+    variant: variant
+  }, other, {
+    sx: [...(_getTextDecoration.colorTransformations[color] === undefined ? [{
       color
-    }] : []), ...(Array.isArray(sx) ? sx : [sx])]
-  }, other));
+    }] : []), ...(Array.isArray(sx) ? sx : [sx])],
+    style: (0, _extends2.default)({}, other.style, underline === 'always' && color !== 'inherit' && {
+      '--Link-underlineColor': (0, _getTextDecoration.default)({
+        theme,
+        ownerState
+      })
+    })
+  }));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -197,6 +238,10 @@ process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ =
    * @ignore
    */
   onFocus: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Link/getTextDecoration.js

@@ -4,25 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.colorTransformations = void 0;
-var _system = require("@mui/system");
+var _style = require("@mui/system/style");
 var _colorManipulator = require("@mui/system/colorManipulator");
+// TODO v7: remove this transformation
 const colorTransformations = exports.colorTransformations = {
-  primary: 'primary.main',
   textPrimary: 'text.primary',
-  secondary: 'secondary.main',
   textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
+  // For main palette, the color will be applied by the styles above.
+  primary: null,
+  secondary: null,
+  error: null,
+  info: null,
+  success: null,
+  warning: null
 };
 const getTextDecoration = ({
   theme,
   ownerState
 }) => {
-  const transformedColor = transformDeprecatedColors(ownerState.color);
-  const color = (0, _system.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = (0, _system.getPath)(theme, `palette.${transformedColor}Channel`);
+  let transformedColor = colorTransformations[ownerState.color];
+  if (transformedColor === null) {
+    return null;
+  }
+  if (transformedColor === undefined) {
+    transformedColor = ownerState.color;
+  }
+  const color = (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }

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