@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/modern/CardActions/CardActions.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 = ["disableSpacing", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -51,19 +48,21 @@ const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps,
     name: 'MuiCardActions'
   });
   const {
-      disableSpacing = false,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    disableSpacing = false,
+    className,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableSpacing
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CardActionsRoot, _extends({
+  return /*#__PURE__*/_jsx(CardActionsRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? CardActions.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/CardContent/CardContent.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 = ["className", "component"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,20 +33,22 @@ const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps,
     name: 'MuiCardContent'
   });
   const {
-      className,
-      component = 'div'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CardContentRoot, _extends({
+  return /*#__PURE__*/_jsx(CardContentRoot, {
     as: component,
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/CardHeader/CardHeader.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -29,10 +26,11 @@ const useUtilityClasses = ownerState => {
 const CardHeaderRoot = styled('div', {
   name: 'MuiCardHeader',
   slot: 'Root',
-  overridesResolver: (props, styles) => _extends({
+  overridesResolver: (props, styles) => ({
     [`& .${cardHeaderClasses.title}`]: styles.title,
-    [`& .${cardHeaderClasses.subheader}`]: styles.subheader
-  }, styles.root)
+    [`& .${cardHeaderClasses.subheader}`]: styles.subheader,
+    ...styles.root
+  })
 })({
   display: 'flex',
   alignItems: 'center',
@@ -71,51 +69,52 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
     name: 'MuiCardHeader'
   });
   const {
-      action,
-      avatar,
-      className,
-      component = 'div',
-      disableTypography = false,
-      subheader: subheaderProp,
-      subheaderTypographyProps,
-      title: titleProp,
-      titleTypographyProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    action,
+    avatar,
+    className,
+    component = 'div',
+    disableTypography = false,
+    subheader: subheaderProp,
+    subheaderTypographyProps,
+    title: titleProp,
+    titleTypographyProps,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     disableTypography
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   let title = titleProp;
   if (title != null && title.type !== Typography && !disableTypography) {
-    title = /*#__PURE__*/_jsx(Typography, _extends({
+    title = /*#__PURE__*/_jsx(Typography, {
       variant: avatar ? 'body2' : 'h5',
       className: classes.title,
       component: "span",
-      display: "block"
-    }, titleTypographyProps, {
+      display: "block",
+      ...titleTypographyProps,
       children: title
-    }));
+    });
   }
   let subheader = subheaderProp;
   if (subheader != null && subheader.type !== Typography && !disableTypography) {
-    subheader = /*#__PURE__*/_jsx(Typography, _extends({
+    subheader = /*#__PURE__*/_jsx(Typography, {
       variant: avatar ? 'body2' : 'body1',
       className: classes.subheader,
       color: "text.secondary",
       component: "span",
-      display: "block"
-    }, subheaderTypographyProps, {
+      display: "block",
+      ...subheaderTypographyProps,
       children: subheader
-    }));
+    });
   }
-  return /*#__PURE__*/_jsxs(CardHeaderRoot, _extends({
+  return /*#__PURE__*/_jsxs(CardHeaderRoot, {
     className: clsx(classes.root, className),
     as: component,
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [avatar && /*#__PURE__*/_jsx(CardHeaderAvatar, {
       className: classes.avatar,
       ownerState: ownerState,
@@ -129,7 +128,7 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
       ownerState: ownerState,
       children: action
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/CardMedia/CardMedia.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 = ["children", "className", "component", "image", "src", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -53,7 +50,6 @@ const CardMediaRoot = styled('div', {
       isImageComponent: true
     },
     style: {
-      // ⚠️ object-fit is not supported by IE11.
       objectFit: 'cover'
     }
   }]
@@ -66,35 +62,37 @@ const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref)
     name: 'MuiCardMedia'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      image,
-      src,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'div',
+    image,
+    src,
+    style,
+    ...other
+  } = props;
   const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
-  const composedStyle = !isMediaComponent && image ? _extends({
-    backgroundImage: `url("${image}")`
-  }, style) : style;
-  const ownerState = _extends({}, props, {
+  const composedStyle = !isMediaComponent && image ? {
+    backgroundImage: `url("${image}")`,
+    ...style
+  } : style;
+  const ownerState = {
+    ...props,
     component,
     isMediaComponent,
     isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CardMediaRoot, _extends({
+  return /*#__PURE__*/_jsx(CardMediaRoot, {
     className: clsx(classes.root, className),
     as: component,
     role: !isMediaComponent && image ? 'img' : undefined,
     ref: ref,
     style: composedStyle,
     ownerState: ownerState,
-    src: isMediaComponent ? image || src : undefined
-  }, other, {
+    src: isMediaComponent ? image || src : undefined,
+    ...other,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? CardMedia.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Checkbox/Checkbox.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -14,10 +11,11 @@ import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank
 import CheckBoxIcon from '../internal/svg-icons/CheckBox';
 import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
+import { createUseThemeProps, styled } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCheckbox');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -29,7 +27,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', indeterminate && 'indeterminate', `color${capitalize(color)}`, `size${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the disabled and checked classes to the SwitchBase
+    ...composedClasses
+  };
 };
 const CheckboxRoot = styled(SwitchBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -42,25 +44,55 @@ const CheckboxRoot = styled(SwitchBase, {
     return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${capitalize(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  variants: [{
+    props: {
+      color: 'default',
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${checkboxClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.action.disabled
-  }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color,
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
+        color: (theme.vars || theme).palette[color].main
+      },
+      [`&.${checkboxClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: false
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      '&:hover': {
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  }]
 }));
 const defaultCheckedIcon = /*#__PURE__*/_jsx(CheckBoxIcon, {});
 const defaultIcon = /*#__PURE__*/_jsx(CheckBoxOutlineBlankIcon, {});
@@ -71,29 +103,33 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     name: 'MuiCheckbox'
   });
   const {
-      checkedIcon = defaultCheckedIcon,
-      color = 'primary',
-      icon: iconProp = defaultIcon,
-      indeterminate = false,
-      indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
-      inputProps,
-      size = 'medium',
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    checkedIcon = defaultCheckedIcon,
+    color = 'primary',
+    icon: iconProp = defaultIcon,
+    indeterminate = false,
+    indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
+    inputProps,
+    size = 'medium',
+    disableRipple = false,
+    className,
+    ...other
+  } = props;
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
+    disableRipple,
     color,
     indeterminate,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CheckboxRoot, _extends({
+  return /*#__PURE__*/_jsx(CheckboxRoot, {
     type: "checkbox",
-    inputProps: _extends({
-      'data-indeterminate': indeterminate
-    }, inputProps),
+    inputProps: {
+      'data-indeterminate': indeterminate,
+      ...inputProps
+    },
     icon: /*#__PURE__*/React.cloneElement(icon, {
       fontSize: icon.props.fontSize ?? size
     }),
@@ -102,10 +138,10 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     }),
     ownerState: ownerState,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other, {
+    className: clsx(classes.root, className),
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/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 => {
@@ -408,7 +406,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 +416,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 +452,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 +461,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/modern/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;