@mui/material 5.10.2 → 5.10.3

package/Autocomplete/Autocomplete.js

@@ -1,32 +1,73 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createFilterOptions", {
+  enumerable: true,
+  get: function () {
+    return _base.createFilterOptions;
+  }
+});
+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 _utils = require("@mui/utils");
+
+var _base = require("@mui/base");
+
+var _system = require("@mui/system");
+
+var _Popper = _interopRequireDefault(require("../Popper"));
+
+var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
+
+var _Paper = _interopRequireDefault(require("../Paper"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _Chip = _interopRequireDefault(require("../Chip"));
+
+var _inputClasses = _interopRequireDefault(require("../Input/inputClasses"));
+
+var _inputBaseClasses = _interopRequireDefault(require("../InputBase/inputBaseClasses"));
+
+var _outlinedInputClasses = _interopRequireDefault(require("../OutlinedInput/outlinedInputClasses"));
+
+var _filledInputClasses = _interopRequireDefault(require("../FilledInput/filledInputClasses"));
+
+var _Close = _interopRequireDefault(require("../internal/svg-icons/Close"));
+
+var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
+
+var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+
+var _styled = _interopRequireDefault(require("../styles/styled"));
+
+var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));
+
+var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _ClearIcon, _ArrowDropDownIcon;
 
 const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { chainPropTypes, integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses, useAutocomplete, createFilterOptions } from '@mui/base';
-import { alpha } from '@mui/system';
-import Popper from '../Popper';
-import ListSubheader from '../ListSubheader';
-import Paper from '../Paper';
-import IconButton from '../IconButton';
-import Chip from '../Chip';
-import inputClasses from '../Input/inputClasses';
-import inputBaseClasses from '../InputBase/inputBaseClasses';
-import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
-import filledInputClasses from '../FilledInput/filledInputClasses';
-import ClearIcon from '../internal/svg-icons/Close';
-import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
-import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
-import capitalize from '../utils/capitalize';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+
+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 => {
   const {
@@ -44,7 +85,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
     inputRoot: ['inputRoot'],
     input: ['input', inputFocused && 'inputFocused'],
-    tag: ['tag', `tagSize${capitalize(size)}`],
+    tag: ['tag', `tagSize${(0, _capitalize.default)(size)}`],
     endAdornment: ['endAdornment'],
     clearIndicator: ['clearIndicator'],
     popupIndicator: ['popupIndicator', popupOpen && 'popupIndicatorOpen'],
@@ -57,10 +98,10 @@ const useUtilityClasses = ownerState => {
     groupLabel: ['groupLabel'],
     groupUl: ['groupUl']
   };
-  return composeClasses(slots, getAutocompleteUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _autocompleteClasses.getAutocompleteUtilityClass, classes);
 };
 
-const AutocompleteRoot = styled('div', {
+const AutocompleteRoot = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -75,111 +116,115 @@ const AutocompleteRoot = styled('div', {
       size
     } = ownerState;
     return [{
-      [`& .${autocompleteClasses.tag}`]: styles.tag
+      [`& .${_autocompleteClasses.default.tag}`]: styles.tag
     }, {
-      [`& .${autocompleteClasses.tag}`]: styles[`tagSize${capitalize(size)}`]
+      [`& .${_autocompleteClasses.default.tag}`]: styles[`tagSize${(0, _capitalize.default)(size)}`]
     }, {
-      [`& .${autocompleteClasses.inputRoot}`]: styles.inputRoot
+      [`& .${_autocompleteClasses.default.inputRoot}`]: styles.inputRoot
     }, {
-      [`& .${autocompleteClasses.input}`]: styles.input
+      [`& .${_autocompleteClasses.default.input}`]: styles.input
     }, {
-      [`& .${autocompleteClasses.input}`]: inputFocused && styles.inputFocused
+      [`& .${_autocompleteClasses.default.input}`]: inputFocused && styles.inputFocused
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })(({
   ownerState
-}) => _extends({
-  [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
+}) => (0, _extends2.default)({
+  [`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {
     visibility: 'visible'
   },
 
   /* Avoid double tap issue on iOS */
   '@media (pointer: fine)': {
-    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
+    [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
       visibility: 'visible'
     }
   }
 }, ownerState.fullWidth && {
   width: '100%'
 }, {
-  [`& .${autocompleteClasses.tag}`]: _extends({
+  [`& .${_autocompleteClasses.default.tag}`]: (0, _extends2.default)({
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
   }, ownerState.size === 'small' && {
     margin: 2,
     maxWidth: 'calc(100% - 4px)'
   }),
-  [`& .${autocompleteClasses.inputRoot}`]: {
+  [`& .${_autocompleteClasses.default.inputRoot}`]: {
     flexWrap: 'wrap',
-    [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
+    [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 26 + 4
     },
-    [`.${autocompleteClasses.hasPopupIcon}.${autocompleteClasses.hasClearIcon}&`]: {
+    [`.${_autocompleteClasses.default.hasPopupIcon}.${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 52 + 4
     },
-    [`& .${autocompleteClasses.input}`]: {
+    [`& .${_autocompleteClasses.default.input}`]: {
       width: 0,
       minWidth: 30
     }
   },
-  [`& .${inputClasses.root}`]: {
+  [`& .${_inputClasses.default.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px'
     }
   },
-  [`& .${inputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
-    [`& .${inputClasses.input}`]: {
+  [`& .${_inputClasses.default.root}.${_inputBaseClasses.default.sizeSmall}`]: {
+    [`& .${_inputClasses.default.input}`]: {
       padding: '2px 4px 3px 0'
     }
   },
-  [`& .${outlinedInputClasses.root}`]: {
+  [`& .${_outlinedInputClasses.default.root}`]: {
     padding: 9,
-    [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
+    [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 26 + 4 + 9
     },
-    [`.${autocompleteClasses.hasPopupIcon}.${autocompleteClasses.hasClearIcon}&`]: {
+    [`.${_autocompleteClasses.default.hasPopupIcon}.${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 52 + 4 + 9
     },
-    [`& .${autocompleteClasses.input}`]: {
+    [`& .${_autocompleteClasses.default.input}`]: {
       padding: '7.5px 4px 7.5px 6px'
     },
-    [`& .${autocompleteClasses.endAdornment}`]: {
+    [`& .${_autocompleteClasses.default.endAdornment}`]: {
       right: 9
     }
   },
-  [`& .${outlinedInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
-    padding: 6,
-    [`& .${autocompleteClasses.input}`]: {
+  [`& .${_outlinedInputClasses.default.root}.${_inputBaseClasses.default.sizeSmall}`]: {
+    // Don't specify paddingRight, as it overrides the default value set when there is only
+    // one of the popup or clear icon as the specificity is equal so the latter one wins
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingLeft: 6,
+    [`& .${_autocompleteClasses.default.input}`]: {
       padding: '2.5px 4px 2.5px 6px'
     }
   },
-  [`& .${filledInputClasses.root}`]: {
+  [`& .${_filledInputClasses.default.root}`]: {
     paddingTop: 19,
     paddingLeft: 8,
-    [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
+    [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 26 + 4 + 9
     },
-    [`.${autocompleteClasses.hasPopupIcon}.${autocompleteClasses.hasClearIcon}&`]: {
+    [`.${_autocompleteClasses.default.hasPopupIcon}.${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 52 + 4 + 9
     },
-    [`& .${filledInputClasses.input}`]: {
+    [`& .${_filledInputClasses.default.input}`]: {
       padding: '7px 4px'
     },
-    [`& .${autocompleteClasses.endAdornment}`]: {
+    [`& .${_autocompleteClasses.default.endAdornment}`]: {
       right: 9
     }
   },
-  [`& .${filledInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
+  [`& .${_filledInputClasses.default.root}.${_inputBaseClasses.default.sizeSmall}`]: {
     paddingBottom: 1,
-    [`& .${filledInputClasses.input}`]: {
+    [`& .${_filledInputClasses.default.input}`]: {
       padding: '2.5px 4px'
     }
   },
-  [`& .${inputBaseClasses.hiddenLabel}`]: {
+  [`& .${_inputBaseClasses.default.hiddenLabel}`]: {
     paddingTop: 8
   },
-  [`& .${autocompleteClasses.input}`]: _extends({
+  [`& .${_autocompleteClasses.default.input}`]: (0, _extends2.default)({
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0
@@ -187,7 +232,7 @@ const AutocompleteRoot = styled('div', {
     opacity: 1
   })
 }));
-const AutocompleteEndAdornment = styled('div', {
+const AutocompleteEndAdornment = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
   slot: 'EndAdornment',
   overridesResolver: (props, styles) => styles.endAdornment
@@ -198,7 +243,7 @@ const AutocompleteEndAdornment = styled('div', {
   top: 'calc(50% - 14px)' // Center vertically
 
 });
-const AutocompleteClearIndicator = styled(IconButton, {
+const AutocompleteClearIndicator = (0, _styled.default)(_IconButton.default, {
   name: 'MuiAutocomplete',
   slot: 'ClearIndicator',
   overridesResolver: (props, styles) => styles.clearIndicator
@@ -207,21 +252,21 @@ const AutocompleteClearIndicator = styled(IconButton, {
   padding: 4,
   visibility: 'hidden'
 });
-const AutocompletePopupIndicator = styled(IconButton, {
+const AutocompletePopupIndicator = (0, _styled.default)(_IconButton.default, {
   name: 'MuiAutocomplete',
   slot: 'PopupIndicator',
   overridesResolver: ({
     ownerState
-  }, styles) => _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
+  }, styles) => (0, _extends2.default)({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
 })(({
   ownerState
-}) => _extends({
+}) => (0, _extends2.default)({
   padding: 2,
   marginRight: -2
 }, ownerState.popupOpen && {
   transform: 'rotate(180deg)'
 }));
-const AutocompletePopper = styled(Popper, {
+const AutocompletePopper = (0, _styled.default)(_Popper.default, {
   name: 'MuiAutocomplete',
   slot: 'Popper',
   overridesResolver: (props, styles) => {
@@ -229,27 +274,27 @@ const AutocompletePopper = styled(Popper, {
       ownerState
     } = props;
     return [{
-      [`& .${autocompleteClasses.option}`]: styles.option
+      [`& .${_autocompleteClasses.default.option}`]: styles.option
     }, styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
   }
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => (0, _extends2.default)({
   zIndex: (theme.vars || theme).zIndex.modal
 }, ownerState.disablePortal && {
   position: 'absolute'
 }));
-const AutocompletePaper = styled(Paper, {
+const AutocompletePaper = (0, _styled.default)(_Paper.default, {
   name: 'MuiAutocomplete',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
 })(({
   theme
-}) => _extends({}, theme.typography.body1, {
+}) => (0, _extends2.default)({}, theme.typography.body1, {
   overflow: 'auto'
 }));
-const AutocompleteLoading = styled('div', {
+const AutocompleteLoading = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
   slot: 'Loading',
   overridesResolver: (props, styles) => styles.loading
@@ -259,7 +304,7 @@ const AutocompleteLoading = styled('div', {
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
-const AutocompleteNoOptions = styled('div', {
+const AutocompleteNoOptions = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
   slot: 'NoOptions',
   overridesResolver: (props, styles) => styles.noOptions
@@ -269,7 +314,7 @@ const AutocompleteNoOptions = styled('div', {
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
-const AutocompleteListbox = styled('div', {
+const AutocompleteListbox = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
   slot: 'Listbox',
   overridesResolver: (props, styles) => styles.listbox
@@ -281,7 +326,7 @@ const AutocompleteListbox = styled('div', {
   padding: '8px 0',
   maxHeight: '40vh',
   overflow: 'auto',
-  [`& .${autocompleteClasses.option}`]: {
+  [`& .${_autocompleteClasses.default.option}`]: {
     minHeight: 48,
     display: 'flex',
     overflow: 'hidden',
@@ -298,7 +343,7 @@ const AutocompleteListbox = styled('div', {
     [theme.breakpoints.up('sm')]: {
       minHeight: 'auto'
     },
-    [`&.${autocompleteClasses.focused}`]: {
+    [`&.${_autocompleteClasses.default.focused}`]: {
       backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
@@ -309,25 +354,25 @@ const AutocompleteListbox = styled('div', {
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
-    [`&.${autocompleteClasses.focusVisible}`]: {
+    [`&.${_autocompleteClasses.default.focusVisible}`]: {
       backgroundColor: (theme.vars || theme).palette.action.focus
     },
     '&[aria-selected="true"]': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-      [`&.${autocompleteClasses.focused}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      [`&.${_autocompleteClasses.default.focused}`]: {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
-      [`&.${autocompleteClasses.focusVisible}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      [`&.${_autocompleteClasses.default.focusVisible}`]: {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     }
   }
 }));
-const AutocompleteGroupLabel = styled(ListSubheader, {
+const AutocompleteGroupLabel = (0, _styled.default)(_ListSubheader.default, {
   name: 'MuiAutocomplete',
   slot: 'GroupLabel',
   overridesResolver: (props, styles) => styles.groupLabel
@@ -337,21 +382,20 @@ const AutocompleteGroupLabel = styled(ListSubheader, {
   backgroundColor: (theme.vars || theme).palette.background.paper,
   top: -8
 }));
-const AutocompleteGroupUl = styled('ul', {
+const AutocompleteGroupUl = (0, _styled.default)('ul', {
   name: 'MuiAutocomplete',
   slot: 'GroupUl',
   overridesResolver: (props, styles) => styles.groupUl
 })({
   padding: 0,
-  [`& .${autocompleteClasses.option}`]: {
+  [`& .${_autocompleteClasses.default.option}`]: {
     paddingLeft: 24
   }
 });
-export { createFilterOptions };
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
   var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
-  const props = useThemeProps({
+  const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiAutocomplete'
   });
@@ -364,7 +408,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     blurOnSelect = false,
     ChipProps,
     className,
-    clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
+    clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
       fontSize: "small"
     })),
     clearOnBlur = !props.freeSolo,
@@ -401,9 +445,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     noOptionsText = 'No options',
     openOnFocus = false,
     openText = 'Open',
-    PaperComponent = Paper,
-    PopperComponent = Popper,
-    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
+    PaperComponent = _Paper.default,
+    PopperComponent = _Popper.default,
+    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
     readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
@@ -412,10 +456,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     selectOnFocus = !props.freeSolo,
     size = 'medium'
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
-
   const {
     getRootProps,
     getInputProps,
@@ -435,13 +478,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     setAnchorEl,
     inputValue,
     groupedOptions
-  } = useAutocomplete(_extends({}, props, {
+  } = (0, _base.useAutocomplete)((0, _extends2.default)({}, props, {
     componentName: 'Autocomplete'
   }));
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
 
-  const ownerState = _extends({}, props, {
+  const ownerState = (0, _extends2.default)({}, props, {
     disablePortal,
     focused,
     fullWidth,
@@ -451,12 +494,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     popupOpen,
     size
   });
-
   const classes = useUtilityClasses(ownerState);
   let startAdornment;
 
   if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => _extends({
+    const getCustomizedTagProps = params => (0, _extends2.default)({
       className: classes.tag,
       disabled
     }, getTagProps(params));
@@ -464,7 +506,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
+      startAdornment = value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         label: getOptionLabel(option),
         size: size
       }, getCustomizedTagProps({
@@ -478,20 +520,20 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
 
     if (!focused && more > 0) {
       startAdornment = startAdornment.splice(0, limitTags);
-      startAdornment.push( /*#__PURE__*/_jsx("span", {
+      startAdornment.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: classes.tag,
         children: getLimitTagsText(more)
       }, startAdornment.length));
     }
   }
 
-  const defaultRenderGroup = params => /*#__PURE__*/_jsxs("li", {
-    children: [/*#__PURE__*/_jsx(AutocompleteGroupLabel, {
+  const defaultRenderGroup = params => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteGroupLabel, {
       className: classes.groupLabel,
       ownerState: ownerState,
       component: "div",
       children: params.group
-    }), /*#__PURE__*/_jsx(AutocompleteGroupUl, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteGroupUl, {
       className: classes.groupUl,
       ownerState: ownerState,
       children: params.children
@@ -500,7 +542,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
 
   const renderGroup = renderGroupProp || defaultRenderGroup;
 
-  const defaultRenderOption = (props2, option) => /*#__PURE__*/_jsx("li", _extends({}, props2, {
+  const defaultRenderOption = (props2, option) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _extends2.default)({}, props2, {
     children: getOptionLabel(option)
   }));
 
@@ -511,7 +553,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       option,
       index
     });
-    return renderOption(_extends({}, optionProps, {
+    return renderOption((0, _extends2.default)({}, optionProps, {
       className: classes.option
     }), option, {
       selected: optionProps['aria-selected'],
@@ -519,10 +561,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     });
   };
 
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, (0, _extends2.default)({
       ref: ref,
-      className: clsx(classes.root, className),
+      className: (0, _clsx.default)(classes.root, className),
       ownerState: ownerState
     }, getRootProps(other), {
       children: renderInput({
@@ -531,39 +573,39 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: _extends({
+        InputProps: (0, _extends2.default)({
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment
         }, (hasClearIcon || hasPopupIcon) && {
-          endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
             className: classes.endAdornment,
             ownerState: ownerState,
-            children: [hasClearIcon ? /*#__PURE__*/_jsx(AutocompleteClearIndicator, _extends({}, getClearProps(), {
+            children: [hasClearIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteClearIndicator, (0, _extends2.default)({}, getClearProps(), {
               "aria-label": clearText,
               title: clearText,
               ownerState: ownerState
             }, componentsProps.clearIndicator, {
-              className: clsx(classes.clearIndicator, (_componentsProps$clea = componentsProps.clearIndicator) == null ? void 0 : _componentsProps$clea.className),
+              className: (0, _clsx.default)(classes.clearIndicator, (_componentsProps$clea = componentsProps.clearIndicator) == null ? void 0 : _componentsProps$clea.className),
               children: clearIcon
-            })) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
+            })) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopupIndicator, (0, _extends2.default)({}, getPopupIndicatorProps(), {
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
               ownerState: ownerState
             }, componentsProps.popupIndicator, {
-              className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
+              className: (0, _clsx.default)(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
               children: popupIcon
             })) : null]
           })
         }),
-        inputProps: _extends({
+        inputProps: (0, _extends2.default)({
           className: classes.input,
           disabled,
           readOnly
         }, getInputProps())
       })
-    })), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
+    })), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, (0, _extends2.default)({
       as: PopperComponent,
       disablePortal: disablePortal,
       style: {
@@ -574,17 +616,17 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       anchorEl: anchorEl,
       open: popupOpen
     }, componentsProps.popper, {
-      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
+      className: (0, _clsx.default)(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, (0, _extends2.default)({
         ownerState: ownerState,
         as: PaperComponent
       }, componentsProps.paper, {
-        className: clsx(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
+        className: (0, _clsx.default)(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
+        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
           children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
           className: classes.noOptions,
           ownerState: ownerState,
           role: "presentation",
@@ -593,7 +635,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, (0, _extends2.default)({
           as: ListboxComponent,
           className: classes.listbox,
           ownerState: ownerState
@@ -628,13 +670,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The inline completion string is visually highlighted and has a selected state.
    * @default false
    */
-  autoComplete: PropTypes.bool,
+  autoComplete: _propTypes.default.bool,
 
   /**
    * If `true`, the first option is automatically highlighted.
    * @default false
    */
-  autoHighlight: PropTypes.bool,
+  autoHighlight: _propTypes.default.bool,
 
   /**
    * If `true`, the selected option becomes the value of the input
@@ -642,7 +684,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * a different option or changes the character string in the input.
    * @default false
    */
-  autoSelect: PropTypes.bool,
+  autoSelect: _propTypes.default.bool,
 
   /**
    * Control if the input should be blurred when an option is selected:
@@ -653,28 +695,28 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * - `mouse` the input is blurred after a mouse event.
    * @default false
    */
-  blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
+  blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
 
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
    */
-  ChipProps: PropTypes.object,
+  ChipProps: _propTypes.default.object,
 
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
+  classes: _propTypes.default.object,
 
   /**
    * @ignore
    */
-  className: PropTypes.string,
+  className: _propTypes.default.string,
 
   /**
    * The icon to display in place of the default clear icon.
    * @default <ClearIcon fontSize="small" />
    */
-  clearIcon: PropTypes.node,
+  clearIcon: _propTypes.default.node,
 
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
@@ -683,13 +725,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * Set to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
-  clearOnBlur: PropTypes.bool,
+  clearOnBlur: _propTypes.default.bool,
 
   /**
    * If `true`, clear all values when the user presses escape and the popup is closed.
    * @default false
    */
-  clearOnEscape: PropTypes.bool,
+  clearOnEscape: _propTypes.default.bool,
 
   /**
    * Override the default text for the *clear* icon button.
@@ -697,7 +739,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Clear'
    */
-  clearText: PropTypes.string,
+  clearText: _propTypes.default.string,
 
   /**
    * Override the default text for the *close popup* icon button.
@@ -705,24 +747,24 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Close'
    */
-  closeText: PropTypes.string,
+  closeText: _propTypes.default.string,
 
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.shape({
-    clearIndicator: PropTypes.object,
-    paper: PropTypes.object,
-    popper: PropTypes.object,
-    popupIndicator: PropTypes.object
+  componentsProps: _propTypes.default.shape({
+    clearIndicator: _propTypes.default.object,
+    paper: _propTypes.default.object,
+    popper: _propTypes.default.object,
+    popupIndicator: _propTypes.default.object
   }),
 
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
    */
-  defaultValue: chainPropTypes(PropTypes.any, props => {
+  defaultValue: (0, _utils.chainPropTypes)(_propTypes.default.any, props => {
     if (props.multiple && props.defaultValue !== undefined && !Array.isArray(props.defaultValue)) {
       return new Error(['MUI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', `However, ${props.defaultValue} was provided.`].join('\n'));
     }
@@ -734,37 +776,37 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * If `true`, the input can't be cleared.
    * @default false
    */
-  disableClearable: PropTypes.bool,
+  disableClearable: _propTypes.default.bool,
 
   /**
    * If `true`, the popup won't close when a value is selected.
    * @default false
    */
-  disableCloseOnSelect: PropTypes.bool,
+  disableCloseOnSelect: _propTypes.default.bool,
 
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: PropTypes.bool,
+  disabled: _propTypes.default.bool,
 
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
    */
-  disabledItemsFocusable: PropTypes.bool,
+  disabledItemsFocusable: _propTypes.default.bool,
 
   /**
    * If `true`, the list box in the popup will not wrap focus.
    * @default false
    */
-  disableListWrap: PropTypes.bool,
+  disableListWrap: _propTypes.default.bool,
 
   /**
    * If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
    * @default false
    */
-  disablePortal: PropTypes.bool,
+  disablePortal: _propTypes.default.bool,
 
   /**
    * A function that determines the filtered options to be rendered on search.
@@ -773,31 +815,31 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {object} state The state of the component.
    * @returns {T[]}
    */
-  filterOptions: PropTypes.func,
+  filterOptions: _propTypes.default.func,
 
   /**
    * If `true`, hide the selected options from the list box.
    * @default false
    */
-  filterSelectedOptions: PropTypes.bool,
+  filterSelectedOptions: _propTypes.default.bool,
 
   /**
    * Force the visibility display of the popup icon.
    * @default 'auto'
    */
-  forcePopupIcon: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]),
+  forcePopupIcon: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.bool]),
 
   /**
    * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
    * @default false
    */
-  freeSolo: PropTypes.bool,
+  freeSolo: _propTypes.default.bool,
 
   /**
    * If `true`, the input will take up the full width of its container.
    * @default false
    */
-  fullWidth: PropTypes.bool,
+  fullWidth: _propTypes.default.bool,
 
   /**
    * The label to display when the tags are truncated (`limitTags`).
@@ -806,7 +848,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    * @default (more) => `+${more}`
    */
-  getLimitTagsText: PropTypes.func,
+  getLimitTagsText: _propTypes.default.func,
 
   /**
    * Used to determine the disabled state for a given option.
@@ -814,7 +856,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {T} option The option to test.
    * @returns {boolean}
    */
-  getOptionDisabled: PropTypes.func,
+  getOptionDisabled: _propTypes.default.func,
 
   /**
    * Used to determine the string value for a given option.
@@ -826,7 +868,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {string}
    * @default (option) => option.label ?? option
    */
-  getOptionLabel: PropTypes.func,
+  getOptionLabel: _propTypes.default.func,
 
   /**
    * If provided, the options will be grouped under the returned string.
@@ -835,31 +877,31 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {T} options The options to group.
    * @returns {string}
    */
-  groupBy: PropTypes.func,
+  groupBy: _propTypes.default.func,
 
   /**
    * If `true`, the component handles the "Home" and "End" keys when the popup is open.
    * It should move focus to the first option and last option, respectively.
    * @default !props.freeSolo
    */
-  handleHomeEndKeys: PropTypes.bool,
+  handleHomeEndKeys: _propTypes.default.bool,
 
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide an id it will fall back to a randomly generated one.
    */
-  id: PropTypes.string,
+  id: _propTypes.default.string,
 
   /**
    * If `true`, the highlight can move to the input.
    * @default false
    */
-  includeInputInList: PropTypes.bool,
+  includeInputInList: _propTypes.default.bool,
 
   /**
    * The input value.
    */
-  inputValue: PropTypes.string,
+  inputValue: _propTypes.default.string,
 
   /**
    * Used to determine if the option represents the given value.
@@ -870,32 +912,32 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {T} value The value to test against.
    * @returns {boolean}
    */
-  isOptionEqualToValue: PropTypes.func,
+  isOptionEqualToValue: _propTypes.default.func,
 
   /**
    * The maximum number of tags that will be visible when not focused.
    * Set `-1` to disable the limit.
    * @default -1
    */
-  limitTags: integerPropType,
+  limitTags: _utils.integerPropType,
 
   /**
    * The component used to render the listbox.
    * @default 'ul'
    */
-  ListboxComponent: PropTypes.elementType,
+  ListboxComponent: _propTypes.default.elementType,
 
   /**
    * Props applied to the Listbox element.
    */
-  ListboxProps: PropTypes.object,
+  ListboxProps: _propTypes.default.object,
 
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
    * @default false
    */
-  loading: PropTypes.bool,
+  loading: _propTypes.default.bool,
 
   /**
    * Text to display when in a loading state.
@@ -903,13 +945,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Loading…'
    */
-  loadingText: PropTypes.node,
+  loadingText: _propTypes.default.node,
 
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
    * @default false
    */
-  multiple: PropTypes.bool,
+  multiple: _propTypes.default.bool,
 
   /**
    * Text to display when there are no options.
@@ -917,7 +959,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'No options'
    */
-  noOptionsText: PropTypes.node,
+  noOptionsText: _propTypes.default.node,
 
   /**
    * Callback fired when the value changes.
@@ -927,7 +969,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
    * @param {string} [details]
    */
-  onChange: PropTypes.func,
+  onChange: _propTypes.default.func,
 
   /**
    * Callback fired when the popup requests to be closed.
@@ -936,7 +978,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {React.SyntheticEvent} event The event source of the callback.
    * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`.
    */
-  onClose: PropTypes.func,
+  onClose: _propTypes.default.func,
 
   /**
    * Callback fired when the highlight option changes.
@@ -945,7 +987,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {T} option The highlighted option.
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
    */
-  onHighlightChange: PropTypes.func,
+  onHighlightChange: _propTypes.default.func,
 
   /**
    * Callback fired when the input value changes.
@@ -954,7 +996,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} value The new value of the text input.
    * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
-  onInputChange: PropTypes.func,
+  onInputChange: _propTypes.default.func,
 
   /**
    * Callback fired when the popup requests to be opened.
@@ -962,18 +1004,18 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
-  onOpen: PropTypes.func,
+  onOpen: _propTypes.default.func,
 
   /**
    * If `true`, the component is shown.
    */
-  open: PropTypes.bool,
+  open: _propTypes.default.bool,
 
   /**
    * If `true`, the popup will open on input focus.
    * @default false
    */
-  openOnFocus: PropTypes.bool,
+  openOnFocus: _propTypes.default.bool,
 
   /**
    * Override the default text for the *open popup* icon button.
@@ -981,36 +1023,36 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Open'
    */
-  openText: PropTypes.string,
+  openText: _propTypes.default.string,
 
   /**
    * Array of options.
    */
-  options: PropTypes.array.isRequired,
+  options: _propTypes.default.array.isRequired,
 
   /**
    * The component used to render the body of the popup.
    * @default Paper
    */
-  PaperComponent: PropTypes.elementType,
+  PaperComponent: _propTypes.default.elementType,
 
   /**
    * The component used to position the popup.
    * @default Popper
    */
-  PopperComponent: PropTypes.elementType,
+  PopperComponent: _propTypes.default.elementType,
 
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
    */
-  popupIcon: PropTypes.node,
+  popupIcon: _propTypes.default.node,
 
   /**
    * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
    * @default false
    */
-  readOnly: PropTypes.bool,
+  readOnly: _propTypes.default.bool,
 
   /**
    * Render the group.
@@ -1018,7 +1060,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {AutocompleteRenderGroupParams} params The group to render.
    * @returns {ReactNode}
    */
-  renderGroup: PropTypes.func,
+  renderGroup: _propTypes.default.func,
 
   /**
    * Render the input.
@@ -1026,7 +1068,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {object} params
    * @returns {ReactNode}
    */
-  renderInput: PropTypes.func.isRequired,
+  renderInput: _propTypes.default.func.isRequired,
 
   /**
    * Render the option, use `getOptionLabel` by default.
@@ -1036,7 +1078,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {object} state The state of the component.
    * @returns {ReactNode}
    */
-  renderOption: PropTypes.func,
+  renderOption: _propTypes.default.func,
 
   /**
    * Render the selected value.
@@ -1046,27 +1088,27 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
    */
-  renderTags: PropTypes.func,
+  renderTags: _propTypes.default.func,
 
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
    * @default !props.freeSolo
    */
-  selectOnFocus: PropTypes.bool,
+  selectOnFocus: _propTypes.default.bool,
 
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size: PropTypes
+  size: _propTypes.default
   /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
+  .oneOfType([_propTypes.default.oneOf(['small', 'medium']), _propTypes.default.string]),
 
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  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]),
 
   /**
    * The value of the autocomplete.
@@ -1074,7 +1116,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The value must have reference equality with the option in order to be selected.
    * You can customize the equality behavior with the `isOptionEqualToValue` prop.
    */
-  value: chainPropTypes(PropTypes.any, props => {
+  value: (0, _utils.chainPropTypes)(_propTypes.default.any, props => {
     if (props.multiple && props.value !== undefined && !Array.isArray(props.value)) {
       return new Error(['MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', `However, ${props.value} was provided.`].join('\n'));
     }
@@ -1082,4 +1124,5 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
     return null;
   })
 } : void 0;
-export default Autocomplete;
+var _default = Autocomplete;
+exports.default = _default;