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

package/node/FilledInput/FilledInput.js

@@ -14,14 +14,15 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _InputBase = _interopRequireDefault(require("../InputBase"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _filledInputClasses = _interopRequireWildcard(require("./filledInputClasses"));
 var _InputBase2 = require("../InputBase/InputBase");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 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)('MuiFilledInput');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,8 +35,8 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _filledInputClasses.getFilledInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiFilledInput',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -45,16 +46,14 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     return [...(0, _InputBase2.rootOverridesResolver)(props, styles), !ownerState.disableUnderline && styles.underline];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  var _palette;
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
   const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
   const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
-  return (0, _extends2.default)({
+  return {
     position: 'relative',
     backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
     borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
@@ -75,76 +74,125 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     },
     [`&.${_filledInputClasses.default.disabled}`]: {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
-    }
-  }, !ownerState.disableUnderline && {
-    '&::after': {
-      borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '""',
-      position: 'absolute',
-      right: 0,
-      transform: 'scaleX(0)',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&.${_filledInputClasses.default.focused}:after`]: {
-      // translateX(0) is a workaround for Safari transform scale bug
-      // See https://github.com/mui/material-ui/issues/31766
-      transform: 'scaleX(1) translateX(0)'
     },
-    [`&.${_filledInputClasses.default.error}`]: {
-      '&::before, &::after': {
-        borderBottomColor: (theme.vars || theme).palette.error.main
+    variants: [{
+      props: ({
+        ownerState
+      }) => !ownerState.disableUnderline,
+      style: {
+        '&::after': {
+          left: 0,
+          bottom: 0,
+          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          content: '""',
+          position: 'absolute',
+          right: 0,
+          transform: 'scaleX(0)',
+          transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&.${_filledInputClasses.default.focused}:after`]: {
+          // translateX(0) is a workaround for Safari transform scale bug
+          // See https://github.com/mui/material-ui/issues/31766
+          transform: 'scaleX(1) translateX(0)'
+        },
+        [`&.${_filledInputClasses.default.error}`]: {
+          '&::before, &::after': {
+            borderBottomColor: (theme.vars || theme).palette.error.main
+          }
+        },
+        '&::before': {
+          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+          left: 0,
+          bottom: 0,
+          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          content: '"\\00a0"',
+          position: 'absolute',
+          right: 0,
+          transition: theme.transitions.create('border-bottom-color', {
+            duration: theme.transitions.duration.shorter
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&:hover:not(.${_filledInputClasses.default.disabled}, .${_filledInputClasses.default.error}):before`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
+        },
+        [`&.${_filledInputClasses.default.disabled}:before`]: {
+          borderBottomStyle: 'dotted'
+        }
       }
-    },
-    '&::before': {
-      borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '"\\00a0"',
-      position: 'absolute',
-      right: 0,
-      transition: theme.transitions.create('border-bottom-color', {
-        duration: theme.transitions.duration.shorter
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&:hover:not(.${_filledInputClasses.default.disabled}, .${_filledInputClasses.default.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
-    },
-    [`&.${_filledInputClasses.default.disabled}:before`]: {
-      borderBottomStyle: 'dotted'
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 12
-  }, ownerState.endAdornment && {
-    paddingRight: 12
-  }, ownerState.multiline && (0, _extends2.default)({
-    padding: '25px 12px 8px'
-  }, ownerState.size === 'small' && {
-    paddingTop: 21,
-    paddingBottom: 4
-  }, ownerState.hiddenLabel && {
-    paddingTop: 16,
-    paddingBottom: 17
-  }, ownerState.hiddenLabel && ownerState.size === 'small' && {
-    paddingTop: 8,
-    paddingBottom: 9
-  }));
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    .map(([color]) => {
+      var _palette$color;
+      return {
+        props: {
+          disableUnderline: false,
+          color
+        },
+        style: {
+          '&::after': {
+            borderBottom: `2px solid ${(_palette$color = (theme.vars || theme).palette[color]) == null ? void 0 : _palette$color.main}`
+          }
+        }
+      };
+    }), {
+      props: ({
+        ownerState
+      }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        padding: '25px 12px 8px'
+      }
+    }, {
+      props: ({
+        ownerState,
+        size
+      }) => ownerState.multiline && size === 'small',
+      style: {
+        paddingTop: 21,
+        paddingBottom: 4
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline && ownerState.hiddenLabel,
+      style: {
+        paddingTop: 16,
+        paddingBottom: 17
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline && ownerState.hiddenLabel && ownerState.size === 'small',
+      style: {
+        paddingTop: 8,
+        paddingBottom: 9
+      }
+    }]
+  };
 });
-const FilledInputInput = (0, _styled.default)(_InputBase2.InputBaseComponent, {
+const FilledInputInput = (0, _zeroStyled.styled)(_InputBase2.InputBaseInput, {
   name: 'MuiFilledInput',
   slot: 'Input',
   overridesResolver: _InputBase2.inputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({
   paddingTop: 25,
   paddingRight: 12,
@@ -170,32 +218,65 @@ const FilledInputInput = (0, _styled.default)(_InputBase2.InputBaseComponent, {
       caretColor: '#fff'
     }
   }
-}, ownerState.size === 'small' && {
-  paddingTop: 21,
-  paddingBottom: 4
-}, ownerState.hiddenLabel && {
-  paddingTop: 16,
-  paddingBottom: 17
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
-}, ownerState.hiddenLabel && ownerState.size === 'small' && {
-  paddingTop: 8,
-  paddingBottom: 9
-}, ownerState.multiline && {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0
+}, {
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      paddingTop: 21,
+      paddingBottom: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hiddenLabel,
+    style: {
+      paddingTop: 16,
+      paddingBottom: 17
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hiddenLabel && ownerState.size === 'small',
+    style: {
+      paddingTop: 8,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }]
 }));
 const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$input;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFilledInput'
   });
   const {
+      disableUnderline = false,
       components = {},
       componentsProps: componentsPropsProp,
       fullWidth = false,
@@ -208,6 +289,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
+    disableUnderline,
     fullWidth,
     inputComponent,
     multiline,
@@ -302,6 +384,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
   disabled: _propTypes.default.bool,
   /**
    * If `true`, the input will not have an underline.
+   * @default false
    */
   disableUnderline: _propTypes.default.bool,
   /**
@@ -433,5 +516,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    */
   value: _propTypes.default.any
 } : void 0;
-FilledInput.muiName = 'Input';
+if (FilledInput) {
+  FilledInput.muiName = 'Input';
+}
 var _default = exports.default = FilledInput;

package/node/FormControlLabel/FormControlLabel.js

@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
   /**
    * The props used for each slot inside.
    * @default {}
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: _propTypes.default.shape({
     typography: _propTypes.default.object

package/node/FormHelperText/FormHelperText.js

@@ -14,15 +14,15 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _formHelperTextClasses = _interopRequireWildcard(require("./formHelperTextClasses"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const _excluded = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "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)('MuiFormHelperText');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,7 +39,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _formHelperTextClasses.getFormHelperTextUtilityClasses, classes);
 };
-const FormHelperTextRoot = (0, _styled.default)('p', {
+const FormHelperTextRoot = (0, _zeroStyled.styled)('p', {
   name: 'MuiFormHelperText',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -82,7 +82,7 @@ const FormHelperTextRoot = (0, _styled.default)('p', {
   }]
 }));
 const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFormHelperText'
   });

package/node/FormLabel/FormLabel.js

@@ -15,13 +15,13 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _formLabelClasses = _interopRequireWildcard(require("./formLabelClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 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)('MuiFormLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _formLabelClasses.getFormLabelUtilityClasses, classes);
 };
-const FormLabelRoot = exports.FormLabelRoot = (0, _styled.default)('label', {
+const FormLabelRoot = exports.FormLabelRoot = (0, _zeroStyled.styled)('label', {
   name: 'MuiFormLabel',
   slot: 'Root',
   overridesResolver: ({
@@ -47,25 +47,35 @@ const FormLabelRoot = exports.FormLabelRoot = (0, _styled.default)('label', {
     return (0, _extends2.default)({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({
   color: (theme.vars || theme).palette.text.secondary
 }, theme.typography.body1, {
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  [`&.${_formLabelClasses.default.focused}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${_formLabelClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  },
-  [`&.${_formLabelClasses.default.error}`]: {
-    color: (theme.vars || theme).palette.error.main
-  }
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${_formLabelClasses.default.focused}`]: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }
+  })), {
+    props: {},
+    style: {
+      [`&.${_formLabelClasses.default.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      },
+      [`&.${_formLabelClasses.default.error}`]: {
+        color: (theme.vars || theme).palette.error.main
+      }
+    }
+  }]
 }));
-const AsteriskComponent = (0, _styled.default)('span', {
+const AsteriskComponent = (0, _zeroStyled.styled)('span', {
   name: 'MuiFormLabel',
   slot: 'Asterisk',
   overridesResolver: (props, styles) => styles.asterisk
@@ -77,7 +87,7 @@ const AsteriskComponent = (0, _styled.default)('span', {
   }
 }));
 const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFormLabel'
   });

package/node/Grow/Grow.js

@@ -259,5 +259,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
     exit: _propTypes.default.number
   })])
 } : void 0;
-Grow.muiSupportAuto = true;
+if (Grow) {
+  Grow.muiSupportAuto = true;
+}
 var _default = exports.default = Grow;

package/node/Icon/Icon.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 _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _zeroStyled = require("../zero-styled");
 var _iconClasses = require("./iconClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["baseClassName", "className", "color", "component", "fontSize"];
 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)('MuiIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _iconClasses.getIconUtilityClass, classes);
 };
-const IconRoot = (0, _styled.default)('span', {
+const IconRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -41,8 +41,7 @@ const IconRoot = (0, _styled.default)('span', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], styles[`fontSize${(0, _capitalize.default)(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
@@ -55,27 +54,66 @@ const IconRoot = (0, _styled.default)('span', {
   textAlign: 'center',
   // support non-square icon
   flexShrink: 0,
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography.pxToRem(20),
-    medium: theme.typography.pxToRem(24),
-    large: theme.typography.pxToRem(36)
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: {
-    primary: (theme.vars || theme).palette.primary.main,
-    secondary: (theme.vars || theme).palette.secondary.main,
-    info: (theme.vars || theme).palette.info.main,
-    success: (theme.vars || theme).palette.success.main,
-    warning: (theme.vars || theme).palette.warning.main,
-    action: (theme.vars || theme).palette.action.active,
-    error: (theme.vars || theme).palette.error.main,
-    disabled: (theme.vars || theme).palette.action.disabled,
-    inherit: undefined
-  }[ownerState.color]
+  variants: [{
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(20)
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(24)
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(36)
+    }
+  }, {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
 }));
 const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiIcon'
   });
@@ -150,5 +188,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-Icon.muiName = 'Icon';
+if (Icon) {
+  Icon.muiName = 'Icon';
+}
 var _default = exports.default = Icon;

package/node/ImageList/ImageList.js

@@ -13,14 +13,14 @@ var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropTyp
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _imageListClasses = require("./imageListClasses");
 var _ImageListContext = _interopRequireDefault(require("./ImageListContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "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)('MuiImageList');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _imageListClasses.getImageListUtilityClass, classes);
 };
-const ImageListRoot = (0, _styled.default)('ul', {
+const ImageListRoot = (0, _zeroStyled.styled)('ul', {
   name: 'MuiImageList',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -57,7 +57,7 @@ const ImageListRoot = (0, _styled.default)('ul', {
   }]
 });
 const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiImageList'
   });