@mui/material 5.12.3 → 5.13.1

package/Chip/Chip.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-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';
@@ -78,7 +75,7 @@ const ChipRoot = styled('div', {
   ownerState
 }) => {
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-  return _extends({
+  return {
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
@@ -129,19 +126,22 @@ const ChipRoot = styled('div', {
       height: 18,
       fontSize: theme.typography.pxToRem(10)
     },
-    [`& .${chipClasses.icon}`]: _extends({
+    [`& .${chipClasses.icon}`]: {
       marginLeft: 5,
-      marginRight: -6
-    }, ownerState.size === 'small' && {
-      fontSize: 18,
-      marginLeft: 4,
-      marginRight: -4
-    }, ownerState.iconColor === ownerState.color && _extends({
-      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
-    }, ownerState.color !== 'default' && {
-      color: 'inherit'
-    })),
-    [`& .${chipClasses.deleteIcon}`]: _extends({
+      marginRight: -6,
+      ...(ownerState.size === 'small' && {
+        fontSize: 18,
+        marginLeft: 4,
+        marginRight: -4
+      }),
+      ...(ownerState.iconColor === ownerState.color && {
+        color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
+        ...(ownerState.color !== 'default' && {
+          color: 'inherit'
+        })
+      })
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
       WebkitTapHighlightColor: 'transparent',
       color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
       fontSize: 22,
@@ -149,96 +149,108 @@ const ChipRoot = styled('div', {
       margin: '0 5px 0 -6px',
       '&:hover': {
         color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+      },
+      ...(ownerState.size === 'small' && {
+        fontSize: 16,
+        marginRight: 4,
+        marginLeft: -4
+      }),
+      ...(ownerState.color !== 'default' && {
+        color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
+        '&:hover, &:active': {
+          color: (theme.vars || theme).palette[ownerState.color].contrastText
+        }
+      })
+    },
+    ...(ownerState.size === 'small' && {
+      height: 24
+    }),
+    ...(ownerState.color !== 'default' && {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+      color: (theme.vars || theme).palette[ownerState.color].contrastText
+    }),
+    ...(ownerState.onDelete && {
+      [`&.${chipClasses.focusVisible}`]: {
+        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)
       }
-    }, ownerState.size === 'small' && {
-      fontSize: 16,
-      marginRight: 4,
-      marginLeft: -4
-    }, ownerState.color !== 'default' && {
-      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
-      '&:hover, &:active': {
-        color: (theme.vars || theme).palette[ownerState.color].contrastText
+    }),
+    ...(ownerState.onDelete && ownerState.color !== 'default' && {
+      [`&.${chipClasses.focusVisible}`]: {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
       }
     })
-  }, ownerState.size === 'small' && {
-    height: 24
-  }, ownerState.color !== 'default' && {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-    color: (theme.vars || theme).palette[ownerState.color].contrastText
-  }, ownerState.onDelete && {
+  };
+}, ({
+  theme,
+  ownerState
+}) => ({
+  ...(ownerState.clickable && {
+    userSelect: 'none',
+    WebkitTapHighlightColor: 'transparent',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    },
     [`&.${chipClasses.focusVisible}`]: {
       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)
+    },
+    '&:active': {
+      boxShadow: (theme.vars || theme).shadows[1]
     }
-  }, ownerState.onDelete && ownerState.color !== 'default' && {
-    [`&.${chipClasses.focusVisible}`]: {
+  }),
+  ...(ownerState.clickable && ownerState.color !== 'default' && {
+    [`&:hover, &.${chipClasses.focusVisible}`]: {
       backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
-  });
-}, ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.clickable && {
-  userSelect: 'none',
-  WebkitTapHighlightColor: 'transparent',
-  cursor: 'pointer',
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
-  },
-  [`&.${chipClasses.focusVisible}`]: {
-    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)
-  },
-  '&:active': {
-    boxShadow: (theme.vars || theme).shadows[1]
-  }
-}, ownerState.clickable && ownerState.color !== 'default' && {
-  [`&:hover, &.${chipClasses.focusVisible}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-  }
+  })
 }), ({
   theme,
   ownerState
-}) => _extends({}, ownerState.variant === 'outlined' && {
-  backgroundColor: 'transparent',
-  border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
-  [`&.${chipClasses.clickable}:hover`]: {
-    backgroundColor: (theme.vars || theme).palette.action.hover
-  },
-  [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: (theme.vars || theme).palette.action.focus
-  },
-  [`& .${chipClasses.avatar}`]: {
-    marginLeft: 4
-  },
-  [`& .${chipClasses.avatarSmall}`]: {
-    marginLeft: 2
-  },
-  [`& .${chipClasses.icon}`]: {
-    marginLeft: 4
-  },
-  [`& .${chipClasses.iconSmall}`]: {
-    marginLeft: 2
-  },
-  [`& .${chipClasses.deleteIcon}`]: {
-    marginRight: 5
-  },
-  [`& .${chipClasses.deleteIconSmall}`]: {
-    marginRight: 3
-  }
-}, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
-  color: (theme.vars || theme).palette[ownerState.color].main,
-  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
-  [`&.${chipClasses.clickable}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
-  },
-  [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
-  },
-  [`& .${chipClasses.deleteIcon}`]: {
-    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
-    '&:hover, &:active': {
-      color: (theme.vars || theme).palette[ownerState.color].main
+}) => ({
+  ...(ownerState.variant === 'outlined' && {
+    backgroundColor: 'transparent',
+    border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+    [`&.${chipClasses.clickable}:hover`]: {
+      backgroundColor: (theme.vars || theme).palette.action.hover
+    },
+    [`&.${chipClasses.focusVisible}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.focus
+    },
+    [`& .${chipClasses.avatar}`]: {
+      marginLeft: 4
+    },
+    [`& .${chipClasses.avatarSmall}`]: {
+      marginLeft: 2
+    },
+    [`& .${chipClasses.icon}`]: {
+      marginLeft: 4
+    },
+    [`& .${chipClasses.iconSmall}`]: {
+      marginLeft: 2
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
+      marginRight: 5
+    },
+    [`& .${chipClasses.deleteIconSmall}`]: {
+      marginRight: 3
     }
-  }
+  }),
+  ...(ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
+    [`&.${chipClasses.clickable}:hover`]: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
+    },
+    [`&.${chipClasses.focusVisible}`]: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
+      '&:hover, &:active': {
+        color: (theme.vars || theme).palette[ownerState.color].main
+      }
+    }
+  })
 }));
 const ChipLabel = styled('span', {
   name: 'MuiChip',
@@ -254,15 +266,16 @@ const ChipLabel = styled('span', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   paddingLeft: 12,
   paddingRight: 12,
-  whiteSpace: 'nowrap'
-}, ownerState.size === 'small' && {
-  paddingLeft: 8,
-  paddingRight: 8
+  whiteSpace: 'nowrap',
+  ...(ownerState.size === 'small' && {
+    paddingLeft: 8,
+    paddingRight: 8
+  })
 }));
 function isDeleteKeyboardEvent(keyboardEvent) {
   return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -277,25 +290,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 => {
@@ -331,7 +345,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,
@@ -340,14 +355,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, {
@@ -375,7 +391,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,
@@ -384,14 +400,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

@@ -1,96 +1,96 @@
-export interface ChipClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"`. */
-    sizeMedium: string;
-    /** Styles applied to the root element if `color="error"`. */
-    colorError: string;
-    /** Styles applied to the root element if `color="info"`. */
-    colorInfo: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: string;
-    /** Styles applied to the root element if `color="success"`. */
-    colorSuccess: string;
-    /** Styles applied to the root element if `color="warning"`. */
-    colorWarning: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    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}`. */
-    clickableColorPrimary: string;
-    /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */
-    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. */
-    deletableColorPrimary: string;
-    /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
-    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"`. */
-    outlinedPrimary: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
-    outlinedSecondary: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="primary"`. */
-    filledPrimary: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. */
-    filledSecondary: string;
-    /** Styles applied to the avatar element. */
-    avatar: string;
-    /** Styles applied to the avatar element if `size="small"`. */
-    avatarSmall: string;
-    /** Styles applied to the avatar element if `size="medium"`. */
-    avatarMedium: string;
-    /** Styles applied to the avatar element if `color="primary"`. */
-    avatarColorPrimary: string;
-    /** Styles applied to the avatar element if `color="secondary"`. */
-    avatarColorSecondary: string;
-    /** Styles applied to the icon element. */
-    icon: string;
-    /** Styles applied to the icon element if `size="small"`. */
-    iconSmall: string;
-    /** Styles applied to the icon element if `size="medium"`. */
-    iconMedium: string;
-    /** Styles applied to the icon element if `color="primary"`. */
-    iconColorPrimary: string;
-    /** Styles applied to the icon element if `color="secondary"`. */
-    iconColorSecondary: string;
-    /** Styles applied to the label `span` element. */
-    label: string;
-    /** Styles applied to the label `span` element if `size="small"`. */
-    labelSmall: string;
-    /** Styles applied to the label `span` element if `size="medium"`. */
-    labelMedium: string;
-    /** Styles applied to the deleteIcon element. */
-    deleteIcon: string;
-    /** Styles applied to the deleteIcon element if `size="small"`. */
-    deleteIconSmall: string;
-    /** Styles applied to the deleteIcon element if `size="medium"`. */
-    deleteIconMedium: string;
-    /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
-    deleteIconColorPrimary: string;
-    /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
-    deleteIconColorSecondary: string;
-    /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */
-    deleteIconOutlinedColorPrimary: string;
-    /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */
-    deleteIconOutlinedColorSecondary: string;
-    /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
-    deleteIconFilledColorPrimary: string;
-    /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
-    deleteIconFilledColorSecondary: string;
-    /** State class applied to the root element if keyboard focused. */
-    focusVisible: string;
-}
-export type ChipClassKey = keyof ChipClasses;
-export declare function getChipUtilityClass(slot: string): string;
-declare const chipClasses: ChipClasses;
-export default chipClasses;
+export interface ChipClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    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}`. */
+    clickableColorPrimary: string;
+    /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */
+    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. */
+    deletableColorPrimary: string;
+    /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
+    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"`. */
+    outlinedPrimary: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+    outlinedSecondary: string;
+    /** Styles applied to the root element if `variant="filled"` and `color="primary"`. */
+    filledPrimary: string;
+    /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. */
+    filledSecondary: string;
+    /** Styles applied to the avatar element. */
+    avatar: string;
+    /** Styles applied to the avatar element if `size="small"`. */
+    avatarSmall: string;
+    /** Styles applied to the avatar element if `size="medium"`. */
+    avatarMedium: string;
+    /** Styles applied to the avatar element if `color="primary"`. */
+    avatarColorPrimary: string;
+    /** Styles applied to the avatar element if `color="secondary"`. */
+    avatarColorSecondary: string;
+    /** Styles applied to the icon element. */
+    icon: string;
+    /** Styles applied to the icon element if `size="small"`. */
+    iconSmall: string;
+    /** Styles applied to the icon element if `size="medium"`. */
+    iconMedium: string;
+    /** Styles applied to the icon element if `color="primary"`. */
+    iconColorPrimary: string;
+    /** Styles applied to the icon element if `color="secondary"`. */
+    iconColorSecondary: string;
+    /** Styles applied to the label `span` element. */
+    label: string;
+    /** Styles applied to the label `span` element if `size="small"`. */
+    labelSmall: string;
+    /** Styles applied to the label `span` element if `size="medium"`. */
+    labelMedium: string;
+    /** Styles applied to the deleteIcon element. */
+    deleteIcon: string;
+    /** Styles applied to the deleteIcon element if `size="small"`. */
+    deleteIconSmall: string;
+    /** Styles applied to the deleteIcon element if `size="medium"`. */
+    deleteIconMedium: string;
+    /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
+    deleteIconColorPrimary: string;
+    /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
+    deleteIconColorSecondary: string;
+    /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */
+    deleteIconOutlinedColorPrimary: string;
+    /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */
+    deleteIconOutlinedColorSecondary: string;
+    /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
+    deleteIconFilledColorPrimary: string;
+    /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
+    deleteIconFilledColorSecondary: string;
+    /** State class applied to the root element if keyboard focused. */
+    focusVisible: string;
+}
+export type ChipClassKey = keyof ChipClasses;
+export declare function getChipUtilityClass(slot: string): string;
+declare const chipClasses: ChipClasses;
+export default chipClasses;