@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/Chip/Chip.js

@@ -20,6 +20,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -29,30 +30,29 @@ const useUtilityClasses = ownerState => {
     disabled,
     size,
     color,
-    iconColor,
     onDelete,
     clickable,
     variant
   } = ownerState;
   const slots = {
-    root: ['root', variant, disabled && 'disabled', `size${(0, _capitalize.default)(size)}`, `color${(0, _capitalize.default)(color)}`, clickable && 'clickable', clickable && `clickableColor${(0, _capitalize.default)(color)}`, onDelete && 'deletable', onDelete && `deletableColor${(0, _capitalize.default)(color)}`, `${variant}${(0, _capitalize.default)(color)}`],
-    label: ['label', `label${(0, _capitalize.default)(size)}`],
-    avatar: ['avatar', `avatar${(0, _capitalize.default)(size)}`, `avatarColor${(0, _capitalize.default)(color)}`],
-    icon: ['icon', `icon${(0, _capitalize.default)(size)}`, `iconColor${(0, _capitalize.default)(iconColor)}`],
-    deleteIcon: ['deleteIcon', `deleteIcon${(0, _capitalize.default)(size)}`, `deleteIconColor${(0, _capitalize.default)(color)}`, `deleteIcon${(0, _capitalize.default)(variant)}Color${(0, _capitalize.default)(color)}`]
+    root: ['root', variant, disabled && 'disabled', `size${(0, _capitalize.default)(size)}`, `color${(0, _capitalize.default)(color)}`, clickable && 'clickable', onDelete && 'deletable'],
+    label: ['label'],
+    avatar: ['avatar'],
+    icon: ['icon'],
+    deleteIcon: ['deleteIcon']
   };
   return (0, _composeClasses.default)(slots, _chipClasses.getChipUtilityClass, classes);
 };
 const ChipRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiChip',
   slot: 'Root',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) && prop !== 'focusableWhenDisabled' && prop !== 'skipFocusWhenDisabled',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
     const {
       color,
-      iconColor,
       clickable,
       onDelete,
       size,
@@ -60,25 +60,11 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
     } = ownerState;
     return [{
       [`& .${_chipClasses.default.avatar}`]: styles.avatar
-    }, {
-      [`& .${_chipClasses.default.avatar}`]: styles[`avatar${(0, _capitalize.default)(size)}`]
-    }, {
-      [`& .${_chipClasses.default.avatar}`]: styles[`avatarColor${(0, _capitalize.default)(color)}`]
     }, {
       [`& .${_chipClasses.default.icon}`]: styles.icon
-    }, {
-      [`& .${_chipClasses.default.icon}`]: styles[`icon${(0, _capitalize.default)(size)}`]
-    }, {
-      [`& .${_chipClasses.default.icon}`]: styles[`iconColor${(0, _capitalize.default)(iconColor)}`]
     }, {
       [`& .${_chipClasses.default.deleteIcon}`]: styles.deleteIcon
-    }, {
-      [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIcon${(0, _capitalize.default)(size)}`]
-    }, {
-      [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIconColor${(0, _capitalize.default)(color)}`]
-    }, {
-      [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIcon${(0, _capitalize.default)(variant)}Color${(0, _capitalize.default)(color)}`]
-    }, styles.root, styles[`size${(0, _capitalize.default)(size)}`], styles[`color${(0, _capitalize.default)(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${(0, _capitalize.default)(color)}`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${(0, _capitalize.default)(color)}`], styles[variant], styles[`${variant}${(0, _capitalize.default)(color)}`]];
+    }, styles.root, styles[`size${(0, _capitalize.default)(size)}`], styles[`color${(0, _capitalize.default)(color)}`], clickable && styles.clickable, onDelete && styles.deletable, styles[variant]];
   }
 })((0, _memoTheme.default)(({
   theme
@@ -121,21 +107,6 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
       color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
       fontSize: theme.typography.pxToRem(12)
     },
-    [`& .${_chipClasses.default.avatarColorPrimary}`]: {
-      color: (theme.vars || theme).palette.primary.contrastText,
-      backgroundColor: (theme.vars || theme).palette.primary.dark
-    },
-    [`& .${_chipClasses.default.avatarColorSecondary}`]: {
-      color: (theme.vars || theme).palette.secondary.contrastText,
-      backgroundColor: (theme.vars || theme).palette.secondary.dark
-    },
-    [`& .${_chipClasses.default.avatarSmall}`]: {
-      marginLeft: 4,
-      marginRight: -4,
-      width: 18,
-      height: 18,
-      fontSize: theme.typography.pxToRem(10)
-    },
     [`& .${_chipClasses.default.icon}`]: {
       marginLeft: 5,
       marginRight: -6
@@ -151,11 +122,38 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
       }
     },
     variants: [{
+      props: {
+        color: 'primary'
+      },
+      style: {
+        [`& .${_chipClasses.default.avatar}`]: {
+          color: (theme.vars || theme).palette.primary.contrastText,
+          backgroundColor: (theme.vars || theme).palette.primary.dark
+        }
+      }
+    }, {
+      props: {
+        color: 'secondary'
+      },
+      style: {
+        [`& .${_chipClasses.default.avatar}`]: {
+          color: (theme.vars || theme).palette.secondary.contrastText,
+          backgroundColor: (theme.vars || theme).palette.secondary.dark
+        }
+      }
+    }, {
       props: {
         size: 'small'
       },
       style: {
         height: 24,
+        [`& .${_chipClasses.default.avatar}`]: {
+          marginLeft: 4,
+          marginRight: -4,
+          width: 18,
+          height: 18,
+          fontSize: theme.typography.pxToRem(10)
+        },
         [`& .${_chipClasses.default.icon}`]: {
           fontSize: 18,
           marginLeft: 4,
@@ -262,19 +260,26 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
         [`& .${_chipClasses.default.avatar}`]: {
           marginLeft: 4
         },
-        [`& .${_chipClasses.default.avatarSmall}`]: {
-          marginLeft: 2
-        },
         [`& .${_chipClasses.default.icon}`]: {
           marginLeft: 4
         },
-        [`& .${_chipClasses.default.iconSmall}`]: {
-          marginLeft: 2
-        },
         [`& .${_chipClasses.default.deleteIcon}`]: {
           marginRight: 5
+        }
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'outlined'
+      },
+      style: {
+        [`& .${_chipClasses.default.avatar}`]: {
+          marginLeft: 2
         },
-        [`& .${_chipClasses.default.deleteIconSmall}`]: {
+        [`& .${_chipClasses.default.icon}`]: {
+          marginLeft: 2
+        },
+        [`& .${_chipClasses.default.deleteIcon}`]: {
           marginRight: 3
         }
       }
@@ -305,16 +310,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
 }));
 const ChipLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiChip',
-  slot: 'Label',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    const {
-      size
-    } = ownerState;
-    return [styles.label, styles[`label${(0, _capitalize.default)(size)}`]];
-  }
+  slot: 'Label'
 })({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -383,6 +379,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const chipRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -428,9 +428,13 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
   const moreProps = component === _ButtonBase.default ? {
     component: ComponentProp || 'div',
+    internalNativeButton: false,
     focusVisibleClassName: classes.focusVisible,
     ...(onDelete && {
       disableRipple: true
+    }),
+    ...(nativeButton !== undefined && {
+      nativeButton
     })
   } : {};
   let deleteIcon = null;
@@ -468,7 +472,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     elementType: ChipRoot,
     externalForwardedProps: {
       ...externalForwardedProps,
-      ...other
+      ...buttonBaseProps
     },
     ownerState,
     // The `component` prop is preserved because `Chip` relies on it for internal logic. If `shouldForwardComponentProp` were `false`, `useSlot` would remove the `component` prop, potentially breaking the component's behavior.
@@ -571,6 +575,13 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
    * The content of the component.
    */
   label: _propTypes.default.node,
+  /**
+   * If `true`, the component is expected to resolve to a native `<button>` element.
+   * When omitted, custom components inherit the default button semantics of the current wrapper.
+   * Set to `true` when a custom component resolves to a native `<button>`, or `false`
+   * when it resolves to a non-button host.
+   */
+  nativeButton: _propTypes.default.bool,
   /**
    * @ignore
    */

package/Chip/Chip.mjs

@@ -13,6 +13,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import chipClasses, { getChipUtilityClass } from "./chipClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,30 +23,29 @@ const useUtilityClasses = ownerState => {
     disabled,
     size,
     color,
-    iconColor,
     onDelete,
     clickable,
     variant
   } = ownerState;
   const slots = {
-    root: ['root', variant, disabled && 'disabled', `size${capitalize(size)}`, `color${capitalize(color)}`, clickable && 'clickable', clickable && `clickableColor${capitalize(color)}`, onDelete && 'deletable', onDelete && `deletableColor${capitalize(color)}`, `${variant}${capitalize(color)}`],
-    label: ['label', `label${capitalize(size)}`],
-    avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
-    icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(iconColor)}`],
-    deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
+    root: ['root', variant, disabled && 'disabled', `size${capitalize(size)}`, `color${capitalize(color)}`, clickable && 'clickable', onDelete && 'deletable'],
+    label: ['label'],
+    avatar: ['avatar'],
+    icon: ['icon'],
+    deleteIcon: ['deleteIcon']
   };
   return composeClasses(slots, getChipUtilityClass, classes);
 };
 const ChipRoot = styled('div', {
   name: 'MuiChip',
   slot: 'Root',
+  shouldForwardProp: prop => rootShouldForwardProp(prop) && prop !== 'focusableWhenDisabled' && prop !== 'skipFocusWhenDisabled',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
     const {
       color,
-      iconColor,
       clickable,
       onDelete,
       size,
@@ -53,25 +53,11 @@ const ChipRoot = styled('div', {
     } = ownerState;
     return [{
       [`& .${chipClasses.avatar}`]: styles.avatar
-    }, {
-      [`& .${chipClasses.avatar}`]: styles[`avatar${capitalize(size)}`]
-    }, {
-      [`& .${chipClasses.avatar}`]: styles[`avatarColor${capitalize(color)}`]
     }, {
       [`& .${chipClasses.icon}`]: styles.icon
-    }, {
-      [`& .${chipClasses.icon}`]: styles[`icon${capitalize(size)}`]
-    }, {
-      [`& .${chipClasses.icon}`]: styles[`iconColor${capitalize(iconColor)}`]
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles.deleteIcon
-    }, {
-      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(size)}`]
-    }, {
-      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIconColor${capitalize(color)}`]
-    }, {
-      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
-    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)}`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
+    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, onDelete && styles.deletable, styles[variant]];
   }
 })(memoTheme(({
   theme
@@ -114,21 +100,6 @@ const ChipRoot = styled('div', {
       color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
       fontSize: theme.typography.pxToRem(12)
     },
-    [`& .${chipClasses.avatarColorPrimary}`]: {
-      color: (theme.vars || theme).palette.primary.contrastText,
-      backgroundColor: (theme.vars || theme).palette.primary.dark
-    },
-    [`& .${chipClasses.avatarColorSecondary}`]: {
-      color: (theme.vars || theme).palette.secondary.contrastText,
-      backgroundColor: (theme.vars || theme).palette.secondary.dark
-    },
-    [`& .${chipClasses.avatarSmall}`]: {
-      marginLeft: 4,
-      marginRight: -4,
-      width: 18,
-      height: 18,
-      fontSize: theme.typography.pxToRem(10)
-    },
     [`& .${chipClasses.icon}`]: {
       marginLeft: 5,
       marginRight: -6
@@ -144,11 +115,38 @@ const ChipRoot = styled('div', {
       }
     },
     variants: [{
+      props: {
+        color: 'primary'
+      },
+      style: {
+        [`& .${chipClasses.avatar}`]: {
+          color: (theme.vars || theme).palette.primary.contrastText,
+          backgroundColor: (theme.vars || theme).palette.primary.dark
+        }
+      }
+    }, {
+      props: {
+        color: 'secondary'
+      },
+      style: {
+        [`& .${chipClasses.avatar}`]: {
+          color: (theme.vars || theme).palette.secondary.contrastText,
+          backgroundColor: (theme.vars || theme).palette.secondary.dark
+        }
+      }
+    }, {
       props: {
         size: 'small'
       },
       style: {
         height: 24,
+        [`& .${chipClasses.avatar}`]: {
+          marginLeft: 4,
+          marginRight: -4,
+          width: 18,
+          height: 18,
+          fontSize: theme.typography.pxToRem(10)
+        },
         [`& .${chipClasses.icon}`]: {
           fontSize: 18,
           marginLeft: 4,
@@ -255,19 +253,26 @@ const ChipRoot = styled('div', {
         [`& .${chipClasses.avatar}`]: {
           marginLeft: 4
         },
-        [`& .${chipClasses.avatarSmall}`]: {
-          marginLeft: 2
-        },
         [`& .${chipClasses.icon}`]: {
           marginLeft: 4
         },
-        [`& .${chipClasses.iconSmall}`]: {
-          marginLeft: 2
-        },
         [`& .${chipClasses.deleteIcon}`]: {
           marginRight: 5
+        }
+      }
+    }, {
+      props: {
+        size: 'small',
+        variant: 'outlined'
+      },
+      style: {
+        [`& .${chipClasses.avatar}`]: {
+          marginLeft: 2
         },
-        [`& .${chipClasses.deleteIconSmall}`]: {
+        [`& .${chipClasses.icon}`]: {
+          marginLeft: 2
+        },
+        [`& .${chipClasses.deleteIcon}`]: {
           marginRight: 3
         }
       }
@@ -298,16 +303,7 @@ const ChipRoot = styled('div', {
 }));
 const ChipLabel = styled('span', {
   name: 'MuiChip',
-  slot: 'Label',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    const {
-      size
-    } = ownerState;
-    return [styles.label, styles[`label${capitalize(size)}`]];
-  }
+  slot: 'Label'
 })({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -376,6 +372,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const chipRef = React.useRef(null);
   const handleRef = useForkRef(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -421,9 +421,13 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || 'div',
+    internalNativeButton: false,
     focusVisibleClassName: classes.focusVisible,
     ...(onDelete && {
       disableRipple: true
+    }),
+    ...(nativeButton !== undefined && {
+      nativeButton
     })
   } : {};
   let deleteIcon = null;
@@ -461,7 +465,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     elementType: ChipRoot,
     externalForwardedProps: {
       ...externalForwardedProps,
-      ...other
+      ...buttonBaseProps
     },
     ownerState,
     // The `component` prop is preserved because `Chip` relies on it for internal logic. If `shouldForwardComponentProp` were `false`, `useSlot` would remove the `component` prop, potentially breaking the component's behavior.
@@ -564,6 +568,13 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
    * The content of the component.
    */
   label: PropTypes.node,
+  /**
+   * If `true`, the component is expected to resolve to a native `<button>` element.
+   * When omitted, custom components inherit the default button semantics of the current wrapper.
+   * Set to `true` when a custom component resolves to a native `<button>`, or `false`
+   * when it resolves to a non-button host.
+   */
+  nativeButton: PropTypes.bool,
   /**
    * @ignore
    */

package/Chip/chipClasses.d.mts

@@ -23,124 +23,20 @@ export interface ChipClasses {
   disabled: string;
   /** 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-MuiChip-clickable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-clickable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deletable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deletable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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"`. */
   outlined: string;
   /** 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-MuiChip-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-avatar) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-avatar) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-avatar) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-avatar) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-icon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-icon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-icon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-icon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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-css-MuiChip-label) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-MuiChip-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-css-MuiChip-label) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-MuiChip-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-MuiChip-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-MuiChip-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-MuiChip-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-MuiChip-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-MuiChip-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-MuiChip-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. */
   focusVisible: string;
 }