@mui/material 5.10.16 → 5.11.0

package/Chip/Chip.js

@@ -1,29 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _base = require("@mui/base");
-var _system = require("@mui/system");
-var _Cancel = _interopRequireDefault(require("../internal/svg-icons/Cancel"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
-var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
-var _jsxRuntime = require("react/jsx-runtime");
+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"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { alpha } from '@mui/system';
+import CancelIcon from '../internal/svg-icons/Cancel';
+import useForkRef from '../utils/useForkRef';
+import unsupportedProp from '../utils/unsupportedProp';
+import capitalize from '../utils/capitalize';
+import ButtonBase from '../ButtonBase';
+import useThemeProps from '../styles/useThemeProps';
+import styled from '../styles/styled';
+import chipClasses, { getChipUtilityClass } from './chipClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,15 +28,15 @@ const useUtilityClasses = ownerState => {
     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${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)}`]
   };
-  return (0, _base.unstable_composeClasses)(slots, _chipClasses.getChipUtilityClass, classes);
+  return composeClasses(slots, getChipUtilityClass, classes);
 };
-const ChipRoot = (0, _styled.default)('div', {
+const ChipRoot = styled('div', {
   name: 'MuiChip',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -60,34 +52,34 @@ const ChipRoot = (0, _styled.default)('div', {
       variant
     } = ownerState;
     return [{
-      [`& .${_chipClasses.default.avatar}`]: styles.avatar
+      [`& .${chipClasses.avatar}`]: styles.avatar
     }, {
-      [`& .${_chipClasses.default.avatar}`]: styles[`avatar${(0, _capitalize.default)(size)}`]
+      [`& .${chipClasses.avatar}`]: styles[`avatar${capitalize(size)}`]
     }, {
-      [`& .${_chipClasses.default.avatar}`]: styles[`avatarColor${(0, _capitalize.default)(color)}`]
+      [`& .${chipClasses.avatar}`]: styles[`avatarColor${capitalize(color)}`]
     }, {
-      [`& .${_chipClasses.default.icon}`]: styles.icon
+      [`& .${chipClasses.icon}`]: styles.icon
     }, {
-      [`& .${_chipClasses.default.icon}`]: styles[`icon${(0, _capitalize.default)(size)}`]
+      [`& .${chipClasses.icon}`]: styles[`icon${capitalize(size)}`]
     }, {
-      [`& .${_chipClasses.default.icon}`]: styles[`iconColor${(0, _capitalize.default)(iconColor)}`]
+      [`& .${chipClasses.icon}`]: styles[`iconColor${capitalize(iconColor)}`]
     }, {
-      [`& .${_chipClasses.default.deleteIcon}`]: styles.deleteIcon
+      [`& .${chipClasses.deleteIcon}`]: styles.deleteIcon
     }, {
-      [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIcon${(0, _capitalize.default)(size)}`]
+      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(size)}`]
     }, {
-      [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIconColor${(0, _capitalize.default)(color)}`]
+      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIconColor${capitalize(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)}`]];
+      [`& .${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)}`]];
   }
 })(({
   theme,
   ownerState
 }) => {
-  const deleteIconColor = (0, _system.alpha)(theme.palette.text.primary, 0.26);
+  const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-  return (0, _extends2.default)({
+  return _extends({
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
@@ -111,11 +103,11 @@ const ChipRoot = (0, _styled.default)('div', {
     // Remove `button` padding
     verticalAlign: 'middle',
     boxSizing: 'border-box',
-    [`&.${_chipClasses.default.disabled}`]: {
+    [`&.${chipClasses.disabled}`]: {
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
-    [`& .${_chipClasses.default.avatar}`]: {
+    [`& .${chipClasses.avatar}`]: {
       marginLeft: 5,
       marginRight: -6,
       width: 24,
@@ -123,48 +115,48 @@ const ChipRoot = (0, _styled.default)('div', {
       color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
       fontSize: theme.typography.pxToRem(12)
     },
-    [`& .${_chipClasses.default.avatarColorPrimary}`]: {
+    [`& .${chipClasses.avatarColorPrimary}`]: {
       color: (theme.vars || theme).palette.primary.contrastText,
       backgroundColor: (theme.vars || theme).palette.primary.dark
     },
-    [`& .${_chipClasses.default.avatarColorSecondary}`]: {
+    [`& .${chipClasses.avatarColorSecondary}`]: {
       color: (theme.vars || theme).palette.secondary.contrastText,
       backgroundColor: (theme.vars || theme).palette.secondary.dark
     },
-    [`& .${_chipClasses.default.avatarSmall}`]: {
+    [`& .${chipClasses.avatarSmall}`]: {
       marginLeft: 4,
       marginRight: -4,
       width: 18,
       height: 18,
       fontSize: theme.typography.pxToRem(10)
     },
-    [`& .${_chipClasses.default.icon}`]: (0, _extends2.default)({
+    [`& .${chipClasses.icon}`]: _extends({
       marginLeft: 5,
       marginRight: -6
     }, ownerState.size === 'small' && {
       fontSize: 18,
       marginLeft: 4,
       marginRight: -4
-    }, ownerState.iconColor === ownerState.color && (0, _extends2.default)({
+    }, ownerState.iconColor === ownerState.color && _extends({
       color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
     }, ownerState.color !== 'default' && {
       color: 'inherit'
     })),
-    [`& .${_chipClasses.default.deleteIcon}`]: (0, _extends2.default)({
+    [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: 'transparent',
       color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _system.alpha)(deleteIconColor, 0.4)
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(deleteIconColor, 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)` : (0, _system.alpha)(theme.palette[ownerState.color].contrastText, 0.7),
+      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
       }
@@ -175,81 +167,81 @@ const ChipRoot = (0, _styled.default)('div', {
     backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
     color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && {
-    [`&.${_chipClasses.default.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    [`&.${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.onDelete && ownerState.color !== 'default' && {
-    [`&.${_chipClasses.default.focusVisible}`]: {
+    [`&.${chipClasses.focusVisible}`]: {
       backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
   });
 }, ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, ownerState.clickable && {
+}) => _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}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    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.default.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+  [`&.${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.default.focusVisible}`]: {
+  [`&:hover, &.${chipClasses.focusVisible}`]: {
     backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }
 }), ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, ownerState.variant === 'outlined' && {
+}) => _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.default.clickable}:hover`]: {
+  [`&.${chipClasses.clickable}:hover`]: {
     backgroundColor: (theme.vars || theme).palette.action.hover
   },
-  [`&.${_chipClasses.default.focusVisible}`]: {
+  [`&.${chipClasses.focusVisible}`]: {
     backgroundColor: (theme.vars || theme).palette.action.focus
   },
-  [`& .${_chipClasses.default.avatar}`]: {
+  [`& .${chipClasses.avatar}`]: {
     marginLeft: 4
   },
-  [`& .${_chipClasses.default.avatarSmall}`]: {
+  [`& .${chipClasses.avatarSmall}`]: {
     marginLeft: 2
   },
-  [`& .${_chipClasses.default.icon}`]: {
+  [`& .${chipClasses.icon}`]: {
     marginLeft: 4
   },
-  [`& .${_chipClasses.default.iconSmall}`]: {
+  [`& .${chipClasses.iconSmall}`]: {
     marginLeft: 2
   },
-  [`& .${_chipClasses.default.deleteIcon}`]: {
+  [`& .${chipClasses.deleteIcon}`]: {
     marginRight: 5
   },
-  [`& .${_chipClasses.default.deleteIconSmall}`]: {
+  [`& .${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)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7)}`,
-  [`&.${_chipClasses.default.clickable}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
+  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.default.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+  [`&.${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.default.deleteIcon}`]: {
-    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7),
+  [`& .${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 = (0, _styled.default)('span', {
+const ChipLabel = styled('span', {
   name: 'MuiChip',
   slot: 'Label',
   overridesResolver: (props, styles) => {
@@ -259,11 +251,11 @@ const ChipLabel = (0, _styled.default)('span', {
     const {
       size
     } = ownerState;
-    return [styles.label, styles[`label${(0, _capitalize.default)(size)}`]];
+    return [styles.label, styles[`label${capitalize(size)}`]];
   }
 })(({
   ownerState
-}) => (0, _extends2.default)({
+}) => _extends({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   paddingLeft: 12,
@@ -281,7 +273,7 @@ function isDeleteKeyboardEvent(keyboardEvent) {
  * Chips represent complex entities in small blocks, such as a contact.
  */
 const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiChip'
   });
@@ -304,9 +296,9 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
       tabIndex,
       skipFocusWhenDisabled = false
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const chipRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(chipRef, ref);
+  const handleRef = useForkRef(chipRef, ref);
   const handleDeleteIconClick = event => {
     // Stop the event from bubbling up to the `Chip`
     event.stopPropagation();
@@ -339,8 +331,8 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     }
   };
   const clickable = clickableProp !== false && onClick ? true : clickableProp;
-  const component = clickable || onDelete ? _ButtonBase.default : ComponentProp || 'div';
-  const ownerState = (0, _extends2.default)({}, props, {
+  const component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
+  const ownerState = _extends({}, props, {
     component,
     disabled,
     size,
@@ -351,7 +343,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  const moreProps = component === _ButtonBase.default ? (0, _extends2.default)({
+  const moreProps = component === ButtonBase ? _extends({
     component: ComponentProp || 'div',
     focusVisibleClassName: classes.focusVisible
   }, onDelete && {
@@ -360,23 +352,23 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   let deleteIcon = null;
   if (onDelete) {
     deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
-      className: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon),
+      className: clsx(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel.default, {
-      className: (0, _clsx.default)(classes.deleteIcon),
+    }) : /*#__PURE__*/_jsx(CancelIcon, {
+      className: clsx(classes.deleteIcon),
       onClick: handleDeleteIconClick
     });
   }
   let avatar = null;
   if (avatarProp && /*#__PURE__*/React.isValidElement(avatarProp)) {
     avatar = /*#__PURE__*/React.cloneElement(avatarProp, {
-      className: (0, _clsx.default)(classes.avatar, avatarProp.props.className)
+      className: clsx(classes.avatar, avatarProp.props.className)
     });
   }
   let icon = null;
   if (iconProp && /*#__PURE__*/React.isValidElement(iconProp)) {
     icon = /*#__PURE__*/React.cloneElement(iconProp, {
-      className: (0, _clsx.default)(classes.icon, iconProp.props.className)
+      className: clsx(classes.icon, iconProp.props.className)
     });
   }
   if (process.env.NODE_ENV !== 'production') {
@@ -384,9 +376,9 @@ 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__*/(0, _jsxRuntime.jsxs)(ChipRoot, (0, _extends2.default)({
+  return /*#__PURE__*/_jsxs(ChipRoot, _extends({
     as: component,
-    className: (0, _clsx.default)(classes.root, className),
+    className: clsx(classes.root, className),
     disabled: clickable && disabled ? true : undefined,
     onClick: onClick,
     onKeyDown: handleKeyDown,
@@ -395,8 +387,8 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
     ownerState: ownerState
   }, moreProps, other, {
-    children: [avatar || icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipLabel, {
-      className: (0, _clsx.default)(classes.label),
+    children: [avatar || icon, /*#__PURE__*/_jsx(ChipLabel, {
+      className: clsx(classes.label),
       ownerState: ownerState,
       children: label
     }), deleteIcon]
@@ -410,20 +402,20 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
   /**
    * The Avatar element to display.
    */
-  avatar: _propTypes.default.element,
+  avatar: PropTypes.element,
   /**
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
    */
-  children: _unsupportedProp.default,
+  children: unsupportedProp,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: _propTypes.default.object,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
-  className: _propTypes.default.string,
+  className: PropTypes.string,
   /**
    * If `true`, the chip will appear clickable, and will raise when pressed,
    * even if the onClick prop is not defined.
@@ -432,77 +424,76 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
    * along with the component prop to indicate an anchor Chip is clickable.
    * Note: this controls the UI and does not affect the onClick event.
    */
-  clickable: _propTypes.default.bool,
+  clickable: PropTypes.bool,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
-  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: _propTypes.default.elementType,
+  component: PropTypes.elementType,
   /**
    * Override the default delete icon element. Shown only if `onDelete` is set.
    */
-  deleteIcon: _propTypes.default.element,
+  deleteIcon: PropTypes.element,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: _propTypes.default.bool,
+  disabled: PropTypes.bool,
   /**
    * Icon element.
    */
-  icon: _propTypes.default.element,
+  icon: PropTypes.element,
   /**
    * The content of the component.
    */
-  label: _propTypes.default.node,
+  label: PropTypes.node,
   /**
    * @ignore
    */
-  onClick: _propTypes.default.func,
+  onClick: PropTypes.func,
   /**
    * Callback fired when the delete icon is clicked.
    * If set, the delete icon will be shown.
    */
-  onDelete: _propTypes.default.func,
+  onDelete: PropTypes.func,
   /**
    * @ignore
    */
-  onKeyDown: _propTypes.default.func,
+  onKeyDown: PropTypes.func,
   /**
    * @ignore
    */
-  onKeyUp: _propTypes.default.func,
+  onKeyUp: PropTypes.func,
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**
    * If `true`, allows the disabled chip to escape focus.
    * If `false`, allows the disabled chip to receive focus.
    * @default false
    */
-  skipFocusWhenDisabled: _propTypes.default.bool,
+  skipFocusWhenDisabled: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * @ignore
    */
-  tabIndex: _propTypes.default.number,
+  tabIndex: PropTypes.number,
   /**
    * The variant to use.
    * @default 'filled'
    */
-  variant: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['filled', 'outlined']), _propTypes.default.string])
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined']), PropTypes.string])
 } : void 0;
-var _default = Chip;
-exports.default = _default;
+export default Chip;

package/Chip/chipClasses.js

@@ -1,16 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.getChipUtilityClass = getChipUtilityClass;
-var _utils = require("@mui/utils");
-var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
-function getChipUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiChip', slot);
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
+export function getChipUtilityClass(slot) {
+  return generateUtilityClass('MuiChip', slot);
 }
-const chipClasses = (0, _utils.unstable_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']);
-var _default = chipClasses;
-exports.default = _default;
+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']);
+export default chipClasses;

package/Chip/index.js

@@ -1,36 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  chipClasses: true
-};
-Object.defineProperty(exports, "chipClasses", {
-  enumerable: true,
-  get: function () {
-    return _chipClasses.default;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Chip.default;
-  }
-});
-var _Chip = _interopRequireDefault(require("./Chip"));
-var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
-Object.keys(_chipClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _chipClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _chipClasses[key];
-    }
-  });
-});
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+export { default } from './Chip';
+export { default as chipClasses } from './chipClasses';
+export * from './chipClasses';

package/Chip/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/Chip/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/Chip/index.js",
   "types": "./index.d.ts"
 }