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

package/modern/PaginationItem/PaginationItem.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -16,6 +16,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
+import useSlot from '../utils/useSlot';
 import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiPaginationItem');
@@ -281,6 +282,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
       shape = 'circular',
       size = 'medium',
       slots = {},
+      slotProps = {},
       type = 'page',
       variant = 'text'
     } = props,
@@ -296,18 +298,53 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   });
   const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = isRtl ? {
-    previous: slots.next || components.next || NavigateNextIcon,
-    next: slots.previous || components.previous || NavigateBeforeIcon,
-    last: slots.first || components.first || FirstPageIcon,
-    first: slots.last || components.last || LastPageIcon
-  } : {
-    previous: slots.previous || components.previous || NavigateBeforeIcon,
-    next: slots.next || components.next || NavigateNextIcon,
-    first: slots.first || components.first || FirstPageIcon,
-    last: slots.last || components.last || LastPageIcon
+  const externalForwardedProps = {
+    slots: {
+      previous: slots.previous ?? components.previous,
+      next: slots.next ?? components.next,
+      first: slots.first ?? components.first,
+      last: slots.last ?? components.last
+    },
+    slotProps
   };
-  const Icon = normalizedIcons[type];
+  const [PreviousSlot, previousSlotProps] = useSlot('previous', {
+    elementType: NavigateBeforeIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [NextSlot, nextSlotProps] = useSlot('next', {
+    elementType: NavigateNextIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [FirstSlot, firstSlotProps] = useSlot('first', {
+    elementType: FirstPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [LastSlot, lastSlotProps] = useSlot('last', {
+    elementType: LastPageIcon,
+    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__*/_jsx(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
@@ -320,11 +357,10 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     disabled: disabled,
     className: clsx(classes.root, className)
   }, other, {
-    children: [type === 'page' && page, Icon ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
-      as: Icon,
-      ownerState: ownerState,
-      className: classes.icon
-    }) : null]
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/_jsx(PaginationItemPageIcon, _extends({}, iconSlotProps, {
+      className: classes.icon,
+      as: IconSlot
+    })) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
@@ -363,6 +399,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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   components: PropTypes.shape({
     first: PropTypes.elementType,
@@ -394,11 +431,18 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    previous: PropTypes.oneOfType([PropTypes.func, PropTypes.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.shape({

package/modern/SvgIcon/SvgIcon.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -33,32 +33,82 @@ const SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  // the <svg> will define the property that has `currentColor`
-  // for example heroicons uses fill="none" and stroke="currentColor"
-  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
-    duration: theme.transitions?.duration?.shorter
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography?.pxToRem?.(20) || '1.25rem',
-    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
-    action: (theme.vars || theme).palette?.action?.active,
-    disabled: (theme.vars || theme).palette?.action?.disabled,
-    inherit: undefined
-  }[ownerState.color]
+  variants: [{
+    props: props => !props.hasSvgAsChild,
+    style: {
+      // the <svg> will define the property that has `currentColor`
+      // for example heroicons uses fill="none" and stroke="currentColor"
+      fill: 'currentColor'
+    }
+  }, {
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(20) || '1.25rem'
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(24) || '1.5rem'
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem'
+    }
+  },
+  // TODO v5 deprecate color prop, v6 remove for sx
+  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.[color]?.main
+    }
+  })), {
+    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
+    }
+  }]
 }));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = useThemeProps({
@@ -179,5 +229,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 export default SvgIcon;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.4
+ * @mui/material v6.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/FormControlLabel/FormControlLabel.js

@@ -20,8 +20,9 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLabelClasses"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "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)('MuiFormControlLabel');
@@ -119,7 +120,7 @@ const AsteriskComponent = (0, _zeroStyled.styled)('span', {
  * Use this component if you want to display an extra label.
  */
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _ref, _slotProps$typography;
+  var _ref;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -133,6 +134,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       label: labelProp,
       labelPlacement = 'end',
       required: requiredProp,
+      slots = {},
       slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -160,10 +162,18 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
-  const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
+  const externalForwardedProps = {
+    slots,
+    slotProps: (0, _extends2.default)({}, componentsProps, slotProps)
+  };
+  const [TypographySlot, typographySlotProps] = (0, _useSlot.default)('typography', {
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState
+  });
   let label = labelProp;
   if (label != null && label.type !== _Typography.default && !disableTypography) {
-    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({
+    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographySlot, (0, _extends2.default)({
       component: "span"
     }, typographySlotProps, {
       className: (0, _clsx.default)(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
@@ -206,6 +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/).
    */
   componentsProps: _propTypes.default.shape({
     typography: _propTypes.default.object
@@ -255,7 +266,14 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    typography: _propTypes.default.object
+    typography: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    typography: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   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/SvgIcon/SvgIcon.js

@@ -13,13 +13,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _svgIconClasses = require("./svgIconClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 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)('MuiSvgIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _svgIconClasses.getSvgIconUtilityClass, classes);
 };
-const SvgIconRoot = (0, _styled.default)('svg', {
+const SvgIconRoot = (0, _zeroStyled.styled)('svg', {
   name: 'MuiSvgIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -41,38 +41,91 @@ const SvgIconRoot = (0, _styled.default)('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], styles[`fontSize${(0, _capitalize.default)(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
+  var _theme$transitions, _theme$transitions$cr, _transitions, _theme$vars, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$vars2, _palette2, _theme$vars4, _palette3, _theme$vars5;
   return {
     userSelect: 'none',
     width: '1em',
     height: '1em',
     display: 'inline-block',
-    // the <svg> will define the property that has `currentColor`
-    // for example heroicons uses fill="none" and stroke="currentColor"
-    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
     flexShrink: 0,
     transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-      duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
+      duration: (_transitions = ((_theme$vars = theme.vars) != null ? _theme$vars : theme).transitions) == null || (_transitions = _transitions.duration) == null ? void 0 : _transitions.shorter
     }),
-    fontSize: {
-      inherit: 'inherit',
-      small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-      medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-      large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
-    }[ownerState.fontSize],
-    // TODO v5 deprecate, v6 remove for sx
-    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
-      action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
-      disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
-      inherit: undefined
-    }[ownerState.color]
+    variants: [{
+      props: props => !props.hasSvgAsChild,
+      style: {
+        // the <svg> will define the property that has `currentColor`
+        // for example heroicons uses fill="none" and stroke="currentColor"
+        fill: 'currentColor'
+      }
+    }, {
+      props: {
+        fontSize: 'inherit'
+      },
+      style: {
+        fontSize: 'inherit'
+      }
+    }, {
+      props: {
+        fontSize: 'small'
+      },
+      style: {
+        fontSize: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem'
+      }
+    }, {
+      props: {
+        fontSize: 'medium'
+      },
+      style: {
+        fontSize: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem'
+      }
+    }, {
+      props: {
+        fontSize: 'large'
+      },
+      style: {
+        fontSize: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+      }
+    },
+    // TODO v5 deprecate color prop, v6 remove for sx
+    ...Object.entries(((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette).filter(([, value]) => value.main).map(([color]) => {
+      var _palette, _theme$vars3;
+      return {
+        props: {
+          color
+        },
+        style: {
+          color: (_palette = ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette) == null || (_palette = _palette[color]) == null ? void 0 : _palette.main
+        }
+      };
+    }), {
+      props: {
+        color: 'action'
+      },
+      style: {
+        color: (_palette2 = ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active
+      }
+    }, {
+      props: {
+        color: 'disabled'
+      },
+      style: {
+        color: (_palette3 = ((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled
+      }
+    }, {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        color: undefined
+      }
+    }]
   };
 });
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSvgIcon'
   });
@@ -190,5 +243,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: _propTypes.default.string
 } : void 0;
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 var _default = exports.default = SvgIcon;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.4
+ * @mui/material v6.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.4",
+  "version": "6.0.0-alpha.5",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -29,16 +29,16 @@
   "dependencies": {
     "@babel/runtime": "^7.24.4",
     "@types/react-transition-group": "^4.4.10",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.5",
     "@mui/types": "^7.2.14",
-    "@mui/system": "^6.0.0-alpha.4",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.4",
-    "@mui/utils": "^6.0.0-alpha.3",
-    "@mui/base": "5.0.0-beta.42"
+    "@mui/utils": "^6.0.0-alpha.5",
+    "@mui/system": "^6.0.0-alpha.5",
+    "@mui/base": "5.0.0-beta.43"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",