@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.11

package/Chip/Chip.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -160,7 +157,7 @@ const ChipRoot = styled('div', {
           marginLeft: -4
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main && value.contrastText).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.contrastText).map(([color]) => {
       return {
         props: {
           color
@@ -199,7 +196,7 @@ const ChipRoot = styled('div', {
           backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => {
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => {
       return {
         props: {
           color,
@@ -229,7 +226,7 @@ const ChipRoot = styled('div', {
           boxShadow: (theme.vars || theme).shadows[1]
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
       props: {
         color,
         clickable: true
@@ -271,7 +268,7 @@ const ChipRoot = styled('div', {
           marginRight: 3
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // no need to check for mainChannel as it's calculated from main
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main
     .map(([color]) => ({
       props: {
         variant: 'outlined',
@@ -354,25 +351,26 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     name: 'MuiChip'
   });
   const {
-      avatar: avatarProp,
-      className,
-      clickable: clickableProp,
-      color = 'default',
-      component: ComponentProp,
-      deleteIcon: deleteIconProp,
-      disabled = false,
-      icon: iconProp,
-      label,
-      onClick,
-      onDelete,
-      onKeyDown,
-      onKeyUp,
-      size = 'medium',
-      variant = 'filled',
-      tabIndex,
-      skipFocusWhenDisabled = false // TODO v6: Rename to `focusableWhenDisabled`.
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    avatar: avatarProp,
+    className,
+    clickable: clickableProp,
+    color = 'default',
+    component: ComponentProp,
+    deleteIcon: deleteIconProp,
+    disabled = false,
+    icon: iconProp,
+    label,
+    onClick,
+    onDelete,
+    onKeyDown,
+    onKeyUp,
+    size = 'medium',
+    variant = 'filled',
+    tabIndex,
+    skipFocusWhenDisabled = false,
+    // TODO v6: Rename to `focusableWhenDisabled`.
+    ...other
+  } = props;
   const chipRef = React.useRef(null);
   const handleRef = useForkRef(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -398,8 +396,6 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     if (event.currentTarget === event.target) {
       if (onDelete && isDeleteKeyboardEvent(event)) {
         onDelete(event);
-      } else if (event.key === 'Escape' && chipRef.current) {
-        chipRef.current.blur();
       }
     }
     if (onKeyUp) {
@@ -408,7 +404,8 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   };
   const clickable = clickableProp !== false && onClick ? true : clickableProp;
   const component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     disabled,
     size,
@@ -417,14 +414,15 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     onDelete: !!onDelete,
     clickable,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const moreProps = component === ButtonBase ? _extends({
+  const moreProps = component === ButtonBase ? {
     component: ComponentProp || 'div',
-    focusVisibleClassName: classes.focusVisible
-  }, onDelete && {
-    disableRipple: true
-  }) : {};
+    focusVisibleClassName: classes.focusVisible,
+    ...(onDelete && {
+      disableRipple: true
+    })
+  } : {};
   let deleteIcon = null;
   if (onDelete) {
     deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? ( /*#__PURE__*/React.cloneElement(deleteIconProp, {
@@ -452,7 +450,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
       console.error('MUI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
     }
   }
-  return /*#__PURE__*/_jsxs(ChipRoot, _extends({
+  return /*#__PURE__*/_jsxs(ChipRoot, {
     as: component,
     className: clsx(classes.root, className),
     disabled: clickable && disabled ? true : undefined,
@@ -461,14 +459,15 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     onKeyUp: handleKeyUp,
     ref: handleRef,
     tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
-    ownerState: ownerState
-  }, moreProps, other, {
+    ownerState: ownerState,
+    ...moreProps,
+    ...other,
     children: [avatar || icon, /*#__PURE__*/_jsx(ChipLabel, {
       className: clsx(classes.label),
       ownerState: ownerState,
       children: label
     }), deleteIcon]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Chip/chipClasses.d.ts

@@ -5,6 +5,8 @@ export interface ChipClasses {
     sizeSmall: string;
     /** Styles applied to the root element if `size="medium"`. */
     sizeMedium: string;
+    /** Styles applied to the root element if `color="default"`. */
+    colorDefault: string;
     /** Styles applied to the root element if `color="error"`. */
     colorError: string;
     /** Styles applied to the root element if `color="info"`. */
@@ -22,21 +24,21 @@ export interface ChipClasses {
     /** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
     clickable: string;
     /** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`.
-     * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     clickableColorPrimary: string;
     /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`.
-     * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     clickableColorSecondary: string;
     /** Styles applied to the root element if `onDelete` is defined. */
     deletable: string;
     /** Styles applied to the root element if `onDelete` and `color="primary"` is defined.
-     * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deletableColorPrimary: string;
     /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
-     * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deletableColorSecondary: string;
     /** Styles applied to the root element if `variant="outlined"`. */
@@ -44,99 +46,99 @@ export interface ChipClasses {
     /** Styles applied to the root element if `variant="filled"`. */
     filled: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
-     * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedPrimary: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
-     * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedSecondary: string;
     /** Styles applied to the root element if `variant="filled"` and `color="primary"`.
-     * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledPrimary: string;
     /** Styles applied to the root element if `variant="filled"` and `color="secondary"`.
-     * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledSecondary: string;
     /** Styles applied to the avatar element. */
     avatar: string;
     /** Styles applied to the avatar element if `size="small"`.
-     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     avatarSmall: string;
     /** Styles applied to the avatar element if `size="medium"`.
-     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     avatarMedium: string;
     /** Styles applied to the avatar element if `color="primary"`.
-     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     avatarColorPrimary: string;
     /** Styles applied to the avatar element if `color="secondary"`.
-     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     avatarColorSecondary: string;
     /** Styles applied to the icon element. */
     icon: string;
     /** Styles applied to the icon element if `size="small"`.
-     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     iconSmall: string;
     /** Styles applied to the icon element if `size="medium"`.
-     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     iconMedium: string;
     /** Styles applied to the icon element if `color="primary"`.
-     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     iconColorPrimary: string;
     /** Styles applied to the icon element if `color="secondary"`.
-     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     iconColorSecondary: string;
     /** Styles applied to the label `span` element. */
     label: string;
     /** Styles applied to the label `span` element if `size="small"`.
-     * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     labelSmall: string;
     /** Styles applied to the label `span` element if `size="medium"`.
-     * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     labelMedium: string;
     /** Styles applied to the deleteIcon element. */
     deleteIcon: string;
     /** Styles applied to the deleteIcon element if `size="small"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconSmall: string;
     /** Styles applied to the deleteIcon element if `size="medium"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconMedium: string;
     /** Styles applied to the deleteIcon element if `color="primary"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconColorPrimary: string;
     /** Styles applied to the deleteIcon element if `color="secondary"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconColorSecondary: string;
     /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconOutlinedColorPrimary: string;
     /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconOutlinedColorSecondary: string;
     /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconFilledColorPrimary: string;
     /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`.
-     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     deleteIconFilledColorSecondary: string;
     /** State class applied to the root element if keyboard focused. */

package/Chip/chipClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getChipUtilityClass(slot) {
   return generateUtilityClass('MuiChip', slot);
 }
-const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
+const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorDefault', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 export default chipClasses;

package/CircularProgress/CircularProgress.d.ts

@@ -67,10 +67,10 @@ export interface CircularProgressProps
  *
  * Demos:
  *
- * - [Progress](https://mui.com/material-ui/react-progress/)
+ * - [Progress](https://next.mui.com/material-ui/react-progress/)
  *
  * API:
  *
- * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
+ * - [CircularProgress API](https://next.mui.com/material-ui/api/circular-progress/)
  */
-export default function CircularProgress(props: CircularProgressProps): JSX.Element;
+export default function CircularProgress(props: CircularProgressProps): React.JSX.Element;

package/CircularProgress/CircularProgress.js

@@ -1,19 +1,15 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { keyframes, css } from '@mui/system';
+import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCircularProgress');
 const SIZE = 44;
 const circularRotateKeyframe = keyframes`
   0% {
@@ -40,6 +36,16 @@ const circularDashKeyframe = 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' ? css`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== 'string' ? css`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -64,19 +70,32 @@ const CircularProgressRoot = styled('span', {
     return [styles.root, styles[ownerState.variant], styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
-  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' && css`
-      animation: ${circularRotateKeyframe} 1.4s linear infinite;
-    `);
+}) => ({
+  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 && palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
+}));
 const CircularProgressSVG = styled('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg',
@@ -94,21 +113,35 @@ const CircularProgressCircle = styled('circle', {
     return [styles.circle, styles[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
-  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 && 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
@@ -123,24 +156,25 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     name: 'MuiCircularProgress'
   });
   const {
-      className,
-      color = 'primary',
-      disableShrink = false,
-      size = 40,
-      style,
-      thickness = 3.6,
-      value = 0,
-      variant = 'indeterminate'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'primary',
+    disableShrink = false,
+    size = 40,
+    style,
+    thickness = 3.6,
+    value = 0,
+    variant = 'indeterminate',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disableShrink,
     size,
     thickness,
     value,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
   const rootStyle = {};
@@ -152,16 +186,19 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
     rootStyle.transform = 'rotate(-90deg)';
   }
-  return /*#__PURE__*/_jsx(CircularProgressRoot, _extends({
+  return /*#__PURE__*/_jsx(CircularProgressRoot, {
     className: clsx(classes.root, className),
-    style: _extends({
+    style: {
       width: size,
-      height: size
-    }, rootStyle, style),
+      height: size,
+      ...rootStyle,
+      ...style
+    },
     ownerState: ownerState,
     ref: ref,
-    role: "progressbar"
-  }, rootProps, other, {
+    role: "progressbar",
+    ...rootProps,
+    ...other,
     children: /*#__PURE__*/_jsx(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
@@ -177,7 +214,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
         strokeWidth: thickness
       })
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/CircularProgress/circularProgressClasses.d.ts

@@ -13,9 +13,13 @@ export interface CircularProgressClasses {
     svg: string;
     /** Styles applied to the `circle` svg path. */
     circle: string;
-    /** Styles applied to the `circle` svg path if `variant="determinate"`. */
+    /** Styles applied to the `circle` svg path if `variant="determinate"`.
+     * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-determinate](/material-ui/api/circular-progress/#circular-progress-classes-determinate) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     circleDeterminate: string;
-    /** Styles applied to the `circle` svg path if `variant="indeterminate"`. */
+    /** Styles applied to the `circle` svg path if `variant="indeterminate"`.
+     * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-indeterminate](/material-ui/api/circular-progress/#circular-progress-classes-indeterminate) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     circleIndeterminate: string;
     /** Styles applied to the `circle` svg path if `disableShrink={true}`. */
     circleDisableShrink: string;

package/Collapse/Collapse.d.ts

@@ -54,19 +54,19 @@ export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>
 
 /**
  * The Collapse transition is used by the
- * [Vertical Stepper](https://mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
+ * [Vertical Stepper](https://next.mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Card](https://mui.com/material-ui/react-card/)
- * - [Lists](https://mui.com/material-ui/react-list/)
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Card](https://next.mui.com/material-ui/react-card/)
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ * - [Transitions](https://next.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Collapse API](https://mui.com/material-ui/api/collapse/)
+ * - [Collapse API](https://next.mui.com/material-ui/api/collapse/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 
-export default function Collapse(props: CollapseProps): JSX.Element;
+export default function Collapse(props: CollapseProps): React.JSX.Element;