@mui/material 5.13.0 → 5.13.1

package/node/CardMedia/CardMedia.js

@@ -5,8 +5,6 @@ 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"));
@@ -16,7 +14,6 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _cardMediaClasses = require("./cardMediaClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "component", "image", "src", "style"];
 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; }
 const useUtilityClasses = ownerState => {
@@ -45,16 +42,18 @@ const CardMediaRoot = (0, _styled.default)('div', {
   }
 })(({
   ownerState
-}) => (0, _extends2.default)({
+}) => ({
   display: 'block',
   backgroundSize: 'cover',
   backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center'
-}, ownerState.isMediaComponent && {
-  width: '100%'
-}, ownerState.isImageComponent && {
-  // ⚠️ object-fit is not supported by IE11.
-  objectFit: 'cover'
+  backgroundPosition: 'center',
+  ...(ownerState.isMediaComponent && {
+    width: '100%'
+  }),
+  ...(ownerState.isImageComponent && {
+    // ⚠️ object-fit is not supported by IE11.
+    objectFit: 'cover'
+  })
 }));
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 const IMAGE_COMPONENTS = ['picture', 'img'];
@@ -64,35 +63,37 @@ const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref)
     name: 'MuiCardMedia'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      image,
-      src,
-      style
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    className,
+    component = 'div',
+    image,
+    src,
+    style,
+    ...other
+  } = props;
   const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
-  const composedStyle = !isMediaComponent && image ? (0, _extends2.default)({
-    backgroundImage: `url("${image}")`
-  }, style) : style;
-  const ownerState = (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsx)(CardMediaRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMediaRoot, {
     className: (0, _clsx.default)(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/node/Checkbox/Checkbox.js

@@ -5,8 +5,6 @@ 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"));
@@ -22,7 +20,6 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 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; }
 const useUtilityClasses = ownerState => {
@@ -35,7 +32,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', indeterminate && 'indeterminate', `color${(0, _capitalize.default)(color)}`]
   };
   const composedClasses = (0, _base.unstable_composeClasses)(slots, _checkboxClasses.getCheckboxUtilityClass, classes);
-  return (0, _extends2.default)({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the disabled and checked classes to the SwitchBase
+    ...composedClasses
+  };
 };
 const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
   shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
@@ -50,23 +51,25 @@ const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({
-  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.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.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'
+}) => ({
+  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.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.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'
+      }
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${_checkboxClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.action.disabled
-  }
+  }),
+  ...(ownerState.color !== 'default' && {
+    [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
+      color: (theme.vars || theme).palette[ownerState.color].main
+    },
+    [`&.${_checkboxClasses.default.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  })
 }));
 const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.default, {});
 const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBoxOutlineBlank.default, {});
@@ -78,29 +81,31 @@ 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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    checkedIcon = defaultCheckedIcon,
+    color = 'primary',
+    icon: iconProp = defaultIcon,
+    indeterminate = false,
+    indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
+    inputProps,
+    size = 'medium',
+    className,
+    ...other
+  } = props;
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     color,
     indeterminate,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxRoot, {
     type: "checkbox",
-    inputProps: (0, _extends2.default)({
-      'data-indeterminate': indeterminate
-    }, inputProps),
+    inputProps: {
+      'data-indeterminate': indeterminate,
+      ...inputProps
+    },
     icon: /*#__PURE__*/React.cloneElement(icon, {
       fontSize: (_icon$props$fontSize = icon.props.fontSize) != null ? _icon$props$fontSize : size
     }),
@@ -109,10 +114,10 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     }),
     ownerState: ownerState,
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
-  }, other, {
+    className: (0, _clsx.default)(classes.root, className),
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/node/Chip/Chip.js

@@ -5,8 +5,6 @@ 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"));
@@ -21,7 +19,6 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-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; }
 const useUtilityClasses = ownerState => {
@@ -86,7 +83,7 @@ const ChipRoot = (0, _styled.default)('div', {
   ownerState
 }) => {
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-  return (0, _extends2.default)({
+  return {
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
@@ -137,19 +134,22 @@ const ChipRoot = (0, _styled.default)('div', {
       height: 18,
       fontSize: theme.typography.pxToRem(10)
     },
-    [`& .${_chipClasses.default.icon}`]: (0, _extends2.default)({
+    [`& .${_chipClasses.default.icon}`]: {
       marginLeft: 5,
-      marginRight: -6
-    }, ownerState.size === 'small' && {
-      fontSize: 18,
-      marginLeft: 4,
-      marginRight: -4
-    }, ownerState.iconColor === ownerState.color && (0, _extends2.default)({
-      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
-    }, ownerState.color !== 'default' && {
-      color: 'inherit'
-    })),
-    [`& .${_chipClasses.default.deleteIcon}`]: (0, _extends2.default)({
+      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.default.deleteIcon}`]: {
       WebkitTapHighlightColor: 'transparent',
       color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : (0, _system.alpha)(theme.palette.text.primary, 0.26),
       fontSize: 22,
@@ -157,96 +157,108 @@ const ChipRoot = (0, _styled.default)('div', {
       margin: '0 5px 0 -6px',
       '&:hover': {
         color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _system.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)` : (0, _system.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.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)
       }
-    }, 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),
-      '&:hover, &:active': {
-        color: (theme.vars || theme).palette[ownerState.color].contrastText
+    }),
+    ...(ownerState.onDelete && ownerState.color !== 'default' && {
+      [`&.${_chipClasses.default.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}))` : (0, _system.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)
+    },
+    '&:active': {
+      boxShadow: (theme.vars || theme).shadows[1]
     }
-  }, ownerState.onDelete && ownerState.color !== 'default' && {
-    [`&.${_chipClasses.default.focusVisible}`]: {
+  }),
+  ...(ownerState.clickable && ownerState.color !== 'default' && {
+    [`&:hover, &.${_chipClasses.default.focusVisible}`]: {
       backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
-  });
-}, ({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({}, 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)
-  },
-  [`&.${_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)
-  },
-  '&:active': {
-    boxShadow: (theme.vars || theme).shadows[1]
-  }
-}, ownerState.clickable && ownerState.color !== 'default' && {
-  [`&:hover, &.${_chipClasses.default.focusVisible}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-  }
+  })
 }), ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, 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`]: {
-    backgroundColor: (theme.vars || theme).palette.action.hover
-  },
-  [`&.${_chipClasses.default.focusVisible}`]: {
-    backgroundColor: (theme.vars || theme).palette.action.focus
-  },
-  [`& .${_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
-  },
-  [`& .${_chipClasses.default.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)
-  },
-  [`&.${_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.default.deleteIcon}`]: {
-    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _system.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.default.clickable}:hover`]: {
+      backgroundColor: (theme.vars || theme).palette.action.hover
+    },
+    [`&.${_chipClasses.default.focusVisible}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.focus
+    },
+    [`& .${_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
+    },
+    [`& .${_chipClasses.default.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)
+    },
+    [`&.${_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.default.deleteIcon}`]: {
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7),
+      '&:hover, &:active': {
+        color: (theme.vars || theme).palette[ownerState.color].main
+      }
+    }
+  })
 }));
 const ChipLabel = (0, _styled.default)('span', {
   name: 'MuiChip',
@@ -262,15 +274,16 @@ const ChipLabel = (0, _styled.default)('span', {
   }
 })(({
   ownerState
-}) => (0, _extends2.default)({
+}) => ({
   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';
@@ -285,25 +298,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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _useForkRef.default)(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -339,7 +353,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 ownerState = {
+    ...props,
     component,
     disabled,
     size,
@@ -348,14 +363,15 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     onDelete: !!onDelete,
     clickable,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const moreProps = component === _ButtonBase.default ? (0, _extends2.default)({
+  const moreProps = component === _ButtonBase.default ? {
     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, {
@@ -383,7 +399,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__*/(0, _jsxRuntime.jsxs)(ChipRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChipRoot, {
     as: component,
     className: (0, _clsx.default)(classes.root, className),
     disabled: clickable && disabled ? true : undefined,
@@ -392,14 +408,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__*/(0, _jsxRuntime.jsx)(ChipLabel, {
       className: (0, _clsx.default)(classes.label),
       ownerState: ownerState,
       children: label
     }), deleteIcon]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------