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

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -9,14 +9,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from './toggleButtonGroupClasses';
 import ToggleButtonGroupContext from './ToggleButtonGroupContext';
 import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext';
 import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiToggleButtonGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
     disabled
   } = ownerState;
   const slots = {
-    root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
+    root: ['root', orientation, fullWidth && 'fullWidth'],
     grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
@@ -53,57 +53,69 @@ const ToggleButtonGroupRoot = styled('div', {
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${toggleButtonGroupClasses.grouped}`]: _extends({}, ownerState.orientation === 'horizontal' ? {
-    [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
-      borderLeft: 0,
-      marginLeft: 0
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderTop: 0,
+          marginTop: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginTop: -1,
+        borderTop: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderTop: '1px solid transparent'
+      }
     }
-  } : {
-    [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
-      borderTop: 0,
-      marginTop: 0
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
     }
-  })
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    marginLeft: -1,
-    borderLeft: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }
-} : {
-  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    marginTop: -1,
-    borderTop: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0
-  }
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
-    borderLeft: '1px solid transparent'
-  }
-} : {
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
-    borderTop: '1px solid transparent'
-  }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderLeft: 0,
+          marginLeft: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginLeft: -1,
+        borderLeft: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderLeft: '1px solid transparent'
+      }
+    }
+  }]
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
   const props = useThemeProps({

package/modern/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/modern/Toolbar/Toolbar.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "component", "disableGutters", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -32,25 +32,41 @@ const ToolbarRoot = styled('div', {
     return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
-  alignItems: 'center'
-}, !ownerState.disableGutters && {
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  [theme.breakpoints.up('sm')]: {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3)
-  }
-}, ownerState.variant === 'dense' && {
-  minHeight: 48
+  alignItems: 'center',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
+      }
+    }
+  }, {
+    props: {
+      variant: 'dense'
+    },
+    style: {
+      minHeight: 48
+    }
+  }]
 }), ({
-  theme,
-  ownerState
-}) => ownerState.variant === 'regular' && theme.mixins.toolbar);
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'regular'
+    },
+    style: theme.mixins.toolbar
+  }]
+}));
 const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/Tooltip/Tooltip.js

@@ -417,8 +417,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
      * @param {KeyboardEvent} nativeEvent
      */
     function handleKeyDown(nativeEvent) {
-      // IE11, Edge (prior to using Bink?) use 'Esc'
-      if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+      if (nativeEvent.key === 'Escape') {
         handleClose(nativeEvent);
       }
     }

package/modern/Typography/Typography.js

@@ -43,7 +43,9 @@ export const TypographyRoot = styled('span', {
   margin: 0
 }, ownerState.variant === 'inherit' && {
   // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-  font: 'inherit'
+  font: 'inherit',
+  lineHeight: 'inherit',
+  letterSpacing: 'inherit'
 }, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
   textAlign: ownerState.align
 }, ownerState.noWrap && {
@@ -116,9 +118,10 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
   return /*#__PURE__*/_jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
-    ownerState: ownerState,
     className: clsx(classes.root, className)
-  }, other));
+  }, other, {
+    ownerState: ownerState
+  }));
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/index.js

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

package/modern/styles/createTransitions.js

@@ -54,9 +54,7 @@ export default function createTransitions(inputTransitions) {
       other = _objectWithoutPropertiesLoose(options, _excluded);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
-      // IE11 support, replace with Number.isNaN
-      // eslint-disable-next-line no-restricted-globals
-      const isNumber = value => !isNaN(parseFloat(value));
+      const isNumber = value => !Number.isNaN(parseFloat(value));
       if (!isString(props) && !Array.isArray(props)) {
         console.error('MUI: Argument "props" must be a string or Array.');
       }

package/modern/styles/experimental_extendTheme.js

@@ -5,7 +5,7 @@ const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "g
 import deepmerge from '@mui/utils/deepmerge';
 import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
 import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars } from '@mui/system/cssVars';
+import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
@@ -118,6 +118,7 @@ export default function extendTheme(options = {}, ...args) {
         overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
       })
     }),
+    font: _extends({}, prepareTypographyVars(muiTheme.typography), muiTheme.font),
     spacing: getSpacingVal(input.spacing)
   });
   Object.keys(theme.colorSchemes).forEach(key => {

package/modern/styles/getOverlayAlpha.js

@@ -1,11 +1,10 @@
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-const getOverlayAlpha = elevation => {
+export default function getOverlayAlpha(elevation) {
   let alphaValue;
   if (elevation < 1) {
     alphaValue = 5.11916 * elevation ** 2;
   } else {
     alphaValue = 4.5 * Math.log(elevation + 1) + 2;
   }
-  return (alphaValue / 100).toFixed(2);
-};
-export default getOverlayAlpha;
+  return Math.round(alphaValue * 10) / 1000;
+}

package/modern/zero-styled/index.js

@@ -1,5 +1,5 @@
 import useThemeProps from '../styles/useThemeProps';
-export { keyframes } from '@mui/system';
+export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/node/AppBar/AppBar.js

@@ -87,7 +87,6 @@ const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
         position: 'sticky'
       },
       style: {
-        // ⚠️ sticky is not supported by IE11.
         position: 'sticky',
         zIndex: (theme.vars || theme).zIndex.appBar,
         top: 0,

package/node/Avatar/Avatar.js

@@ -96,7 +96,7 @@ const AvatarImg = (0, _zeroStyled.styled)('img', {
   width: '100%',
   height: '100%',
   textAlign: 'center',
-  // Handle non-square image. The property isn't supported by IE11.
+  // Handle non-square image.
   objectFit: 'cover',
   // Hide alt text.
   color: 'transparent',

package/node/CardMedia/CardMedia.js

@@ -61,7 +61,6 @@ const CardMediaRoot = (0, _zeroStyled.styled)('div', {
       isImageComponent: true
     },
     style: {
-      // ⚠️ object-fit is not supported by IE11.
       objectFit: 'cover'
     }
   }]

package/node/Checkbox/Checkbox.js

@@ -19,13 +19,14 @@ var _CheckBoxOutlineBlank = _interopRequireDefault(require("../internal/svg-icon
 var _CheckBox = _interopRequireDefault(require("../internal/svg-icons/CheckBox"));
 var _IndeterminateCheckBox = _interopRequireDefault(require("../internal/svg-icons/IndeterminateCheckBox"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "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)('MuiCheckbox');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,8 +40,8 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _checkboxClasses.getCheckboxUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const CheckboxRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiCheckbox',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -50,32 +51,62 @@ const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
     return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  variants: [{
+    props: {
+      color: 'default',
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${_checkboxClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.action.disabled
-  }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color,
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
+        color: (theme.vars || theme).palette[color].main
+      },
+      [`&.${_checkboxClasses.default.disabled}`]: {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: false
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      '&:hover': {
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  }]
 }));
 const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.default, {});
 const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBoxOutlineBlank.default, {});
 const defaultIndeterminateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IndeterminateCheckBox.default, {});
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
   var _icon$props$fontSize, _indeterminateIcon$pr;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiCheckbox'
   });

package/node/CircularProgress/CircularProgress.js

@@ -6,24 +6,23 @@ 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 _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
 var _circularProgressClasses = require("./circularProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "disableShrink", "size", "style", "thickness", "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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCircularProgress');
 const SIZE = 44;
-const circularRotateKeyframe = (0, _system.keyframes)`
+const circularRotateKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     transform: rotate(0deg);
   }
@@ -32,7 +31,7 @@ const circularRotateKeyframe = (0, _system.keyframes)`
     transform: rotate(360deg);
   }
 `;
-const circularDashKeyframe = (0, _system.keyframes)`
+const circularDashKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     stroke-dasharray: 1px, 200px;
     stroke-dashoffset: 0;
@@ -48,6 +47,16 @@ const circularDashKeyframe = (0, _system.keyframes)`
     stroke-dashoffset: -125px;
   }
 `;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const rotateAnimation = typeof circularRotateKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -62,7 +71,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _circularProgressClasses.getCircularProgressUtilityClass, classes);
 };
-const CircularProgressRoot = (0, _styled.default)('span', {
+const CircularProgressRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiCircularProgress',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -72,27 +81,40 @@ const CircularProgressRoot = (0, _styled.default)('span', {
     return [styles.root, styles[ownerState.variant], styles[`color${(0, _capitalize.default)(ownerState.color)}`]];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
-  display: 'inline-block'
-}, ownerState.variant === 'determinate' && {
-  transition: theme.transitions.create('transform')
-}, ownerState.color !== 'inherit' && {
-  color: (theme.vars || theme).palette[ownerState.color].main
-}), ({
-  ownerState
-}) => ownerState.variant === 'indeterminate' && (0, _system.css)`
-      animation: ${circularRotateKeyframe} 1.4s linear infinite;
-    `);
-const CircularProgressSVG = (0, _styled.default)('svg', {
+}) => ({
+  display: 'inline-block',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('transform')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: rotateAnimation || {
+      animation: `${circularRotateKeyframe} 1.4s linear infinite`
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
+}));
+const CircularProgressSVG = (0, _zeroStyled.styled)('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg',
   overridesResolver: (props, styles) => styles.svg
 })({
   display: 'block' // Keeps the progress centered
 });
-const CircularProgressCircle = (0, _styled.default)('circle', {
+const CircularProgressCircle = (0, _zeroStyled.styled)('circle', {
   name: 'MuiCircularProgress',
   slot: 'Circle',
   overridesResolver: (props, styles) => {
@@ -102,21 +124,35 @@ const CircularProgressCircle = (0, _styled.default)('circle', {
     return [styles.circle, styles[`circle${(0, _capitalize.default)(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
-  stroke: 'currentColor'
-}, ownerState.variant === 'determinate' && {
-  transition: theme.transitions.create('stroke-dashoffset')
-}, ownerState.variant === 'indeterminate' && {
-  // Some default value that looks fine waiting for the animation to kicks in.
-  strokeDasharray: '80px, 200px',
-  strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-}), ({
-  ownerState
-}) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink && (0, _system.css)`
-      animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
-    `);
+}) => ({
+  stroke: 'currentColor',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('stroke-dashoffset')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: '80px, 200px',
+      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+    style: dashAnimation || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+    }
+  }]
+}));
 
 /**
  * ## ARIA
@@ -126,7 +162,7 @@ const CircularProgressCircle = (0, _styled.default)('circle', {
  * attribute to `true` on that region until it has finished loading.
  */
 const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiCircularProgress'
   });