@dartcom/ui-kit 3.4.0 → 3.4.2

package/dist/node_modules/@mui/material/esm/Autocomplete/Autocomplete.js

@@ -0,0 +1,1228 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../../../../_virtual/index.js');
+var clsx = require('../../../../clsx/dist/clsx.js');
+var inputClasses = require('../Input/inputClasses.js');
+var inputBaseClasses = require('../InputBase/inputBaseClasses.js');
+var outlinedInputClasses = require('../OutlinedInput/outlinedInputClasses.js');
+var filledInputClasses = require('../FilledInput/filledInputClasses.js');
+var Close = require('../internal/svg-icons/Close.js');
+var ArrowDropDown = require('../internal/svg-icons/ArrowDropDown.js');
+var memoTheme = require('../utils/memoTheme.js');
+var autocompleteClasses = require('./autocompleteClasses.js');
+var useSlot = require('../utils/useSlot.js');
+var jsxRuntime = require('react/jsx-runtime');
+var DefaultPropsProvider = require('../DefaultPropsProvider/DefaultPropsProvider.js');
+var useAutocomplete = require('../useAutocomplete/useAutocomplete.js');
+var styled = require('../styles/styled.js');
+var Paper = require('../Paper/Paper.js');
+var Popper = require('../Popper/Popper.js');
+var Chip = require('../Chip/Chip.js');
+var capitalize = require('../../../utils/esm/capitalize/capitalize.js');
+var composeClasses = require('../../../utils/esm/composeClasses/composeClasses.js');
+var IconButton = require('../IconButton/IconButton.js');
+var ListSubheader = require('../ListSubheader/ListSubheader.js');
+var chainPropTypes = require('../../../utils/esm/chainPropTypes/chainPropTypes.js');
+var integerPropType = require('../../../utils/esm/integerPropType/integerPropType.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _ClearIcon, _ArrowDropDownIcon;
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    disablePortal,
+    expanded,
+    focused,
+    fullWidth,
+    hasClearIcon,
+    hasPopupIcon,
+    inputFocused,
+    popupOpen,
+    size
+  } = ownerState;
+  const slots = {
+    root: ['root', expanded && 'expanded', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
+    inputRoot: ['inputRoot'],
+    input: ['input', inputFocused && 'inputFocused'],
+    tag: ['tag', `tagSize${capitalize.default(size)}`],
+    endAdornment: ['endAdornment'],
+    clearIndicator: ['clearIndicator'],
+    popupIndicator: ['popupIndicator', popupOpen && 'popupIndicatorOpen'],
+    popper: ['popper', disablePortal && 'popperDisablePortal'],
+    paper: ['paper'],
+    listbox: ['listbox'],
+    loading: ['loading'],
+    noOptions: ['noOptions'],
+    option: ['option'],
+    groupLabel: ['groupLabel'],
+    groupUl: ['groupUl']
+  };
+  return composeClasses.default(slots, autocompleteClasses.getAutocompleteUtilityClass, classes);
+};
+const AutocompleteRoot = styled.default('div', {
+  name: 'MuiAutocomplete',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      fullWidth,
+      hasClearIcon,
+      hasPopupIcon,
+      inputFocused,
+      size
+    } = ownerState;
+    return [{
+      [`& .${autocompleteClasses.default.tag}`]: styles.tag
+    }, {
+      [`& .${autocompleteClasses.default.tag}`]: styles[`tagSize${capitalize.default(size)}`]
+    }, {
+      [`& .${autocompleteClasses.default.inputRoot}`]: styles.inputRoot
+    }, {
+      [`& .${autocompleteClasses.default.input}`]: styles.input
+    }, {
+      [`& .${autocompleteClasses.default.input}`]: inputFocused && styles.inputFocused
+    }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
+  }
+})({
+  [`&.${autocompleteClasses.default.focused} .${autocompleteClasses.default.clearIndicator}`]: {
+    visibility: 'visible'
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${autocompleteClasses.default.clearIndicator}`]: {
+      visibility: 'visible'
+    }
+  },
+  [`& .${autocompleteClasses.default.tag}`]: {
+    margin: 3,
+    maxWidth: 'calc(100% - 6px)'
+  },
+  [`& .${autocompleteClasses.default.inputRoot}`]: {
+    [`.${autocompleteClasses.default.hasPopupIcon}&, .${autocompleteClasses.default.hasClearIcon}&`]: {
+      paddingRight: 26 + 4
+    },
+    [`.${autocompleteClasses.default.hasPopupIcon}.${autocompleteClasses.default.hasClearIcon}&`]: {
+      paddingRight: 52 + 4
+    },
+    [`& .${autocompleteClasses.default.input}`]: {
+      width: 0,
+      minWidth: 30
+    }
+  },
+  [`& .${inputClasses.default.root}`]: {
+    paddingBottom: 1,
+    '& .MuiInput-input': {
+      padding: '4px 4px 4px 0px'
+    }
+  },
+  [`& .${inputClasses.default.root}.${inputBaseClasses.default.sizeSmall}`]: {
+    [`& .${inputClasses.default.input}`]: {
+      padding: '2px 4px 3px 0'
+    }
+  },
+  [`& .${outlinedInputClasses.default.root}`]: {
+    padding: 9,
+    [`.${autocompleteClasses.default.hasPopupIcon}&, .${autocompleteClasses.default.hasClearIcon}&`]: {
+      paddingRight: 26 + 4 + 9
+    },
+    [`.${autocompleteClasses.default.hasPopupIcon}.${autocompleteClasses.default.hasClearIcon}&`]: {
+      paddingRight: 52 + 4 + 9
+    },
+    [`& .${autocompleteClasses.default.input}`]: {
+      padding: '7.5px 4px 7.5px 5px'
+    },
+    [`& .${autocompleteClasses.default.endAdornment}`]: {
+      right: 9
+    }
+  },
+  [`& .${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 8px'
+    }
+  },
+  [`& .${filledInputClasses.default.root}`]: {
+    paddingTop: 19,
+    paddingLeft: 8,
+    [`.${autocompleteClasses.default.hasPopupIcon}&, .${autocompleteClasses.default.hasClearIcon}&`]: {
+      paddingRight: 26 + 4 + 9
+    },
+    [`.${autocompleteClasses.default.hasPopupIcon}.${autocompleteClasses.default.hasClearIcon}&`]: {
+      paddingRight: 52 + 4 + 9
+    },
+    [`& .${filledInputClasses.default.input}`]: {
+      padding: '7px 4px'
+    },
+    [`& .${autocompleteClasses.default.endAdornment}`]: {
+      right: 9
+    }
+  },
+  [`& .${filledInputClasses.default.root}.${inputBaseClasses.default.sizeSmall}`]: {
+    paddingBottom: 1,
+    [`& .${filledInputClasses.default.input}`]: {
+      padding: '2.5px 4px'
+    }
+  },
+  [`& .${inputBaseClasses.default.hiddenLabel}`]: {
+    paddingTop: 8
+  },
+  [`& .${filledInputClasses.default.root}.${inputBaseClasses.default.hiddenLabel}`]: {
+    paddingTop: 0,
+    paddingBottom: 0,
+    [`& .${autocompleteClasses.default.input}`]: {
+      paddingTop: 16,
+      paddingBottom: 17
+    }
+  },
+  [`& .${filledInputClasses.default.root}.${inputBaseClasses.default.hiddenLabel}.${inputBaseClasses.default.sizeSmall}`]: {
+    [`& .${autocompleteClasses.default.input}`]: {
+      paddingTop: 8,
+      paddingBottom: 9
+    }
+  },
+  [`& .${autocompleteClasses.default.input}`]: {
+    flexGrow: 1,
+    textOverflow: 'ellipsis',
+    opacity: 0
+  },
+  variants: [{
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      [`& .${autocompleteClasses.default.tag}`]: {
+        margin: 2,
+        maxWidth: 'calc(100% - 4px)'
+      }
+    }
+  }, {
+    props: {
+      inputFocused: true
+    },
+    style: {
+      [`& .${autocompleteClasses.default.input}`]: {
+        opacity: 1
+      }
+    }
+  }, {
+    props: {
+      multiple: true
+    },
+    style: {
+      [`& .${autocompleteClasses.default.inputRoot}`]: {
+        flexWrap: 'wrap'
+      }
+    }
+  }]
+});
+const AutocompleteEndAdornment = styled.default('div', {
+  name: 'MuiAutocomplete',
+  slot: 'EndAdornment'
+})({
+  // We use a position absolute to support wrapping tags.
+  position: 'absolute',
+  right: 0,
+  top: '50%',
+  transform: 'translate(0, -50%)'
+});
+const AutocompleteClearIndicator = styled.default(IconButton.default, {
+  name: 'MuiAutocomplete',
+  slot: 'ClearIndicator'
+})({
+  marginRight: -2,
+  padding: 4,
+  visibility: 'hidden'
+});
+const AutocompletePopupIndicator = styled.default(IconButton.default, {
+  name: 'MuiAutocomplete',
+  slot: 'PopupIndicator',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen];
+  }
+})({
+  padding: 2,
+  marginRight: -2,
+  variants: [{
+    props: {
+      popupOpen: true
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
+});
+const AutocompletePopper = styled.default(Popper.default, {
+  name: 'MuiAutocomplete',
+  slot: 'Popper',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${autocompleteClasses.default.option}`]: styles.option
+    }, styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
+  }
+})(memoTheme.default(({
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.modal,
+  variants: [{
+    props: {
+      disablePortal: true
+    },
+    style: {
+      position: 'absolute'
+    }
+  }]
+})));
+const AutocompletePaper = styled.default(Paper.default, {
+  name: 'MuiAutocomplete',
+  slot: 'Paper'
+})(memoTheme.default(({
+  theme
+}) => ({
+  ...theme.typography.body1,
+  overflow: 'auto'
+})));
+const AutocompleteLoading = styled.default('div', {
+  name: 'MuiAutocomplete',
+  slot: 'Loading'
+})(memoTheme.default(({
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  padding: '14px 16px'
+})));
+const AutocompleteNoOptions = styled.default('div', {
+  name: 'MuiAutocomplete',
+  slot: 'NoOptions'
+})(memoTheme.default(({
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  padding: '14px 16px'
+})));
+const AutocompleteListbox = styled.default('ul', {
+  name: 'MuiAutocomplete',
+  slot: 'Listbox'
+})(memoTheme.default(({
+  theme
+}) => ({
+  listStyle: 'none',
+  margin: 0,
+  padding: '8px 0',
+  maxHeight: '40vh',
+  overflow: 'auto',
+  position: 'relative',
+  [`& .${autocompleteClasses.default.option}`]: {
+    minHeight: 48,
+    display: 'flex',
+    overflow: 'hidden',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    cursor: 'pointer',
+    paddingTop: 6,
+    boxSizing: 'border-box',
+    outline: '0',
+    WebkitTapHighlightColor: 'transparent',
+    paddingBottom: 6,
+    paddingLeft: 16,
+    paddingRight: 16,
+    [theme.breakpoints.up('sm')]: {
+      minHeight: 'auto'
+    },
+    [`&.${autocompleteClasses.default.focused}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.hover,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    },
+    '&[aria-disabled="true"]': {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      pointerEvents: 'none'
+    },
+    [`&.${autocompleteClasses.default.focusVisible}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.focus
+    },
+    '&[aria-selected="true"]': {
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
+      [`&.${autocompleteClasses.default.focused}`]: {
+        backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette.action.selected
+        }
+      },
+      [`&.${autocompleteClasses.default.focusVisible}`]: {
+        backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
+      }
+    }
+  }
+})));
+const AutocompleteGroupLabel = styled.default(ListSubheader.default, {
+  name: 'MuiAutocomplete',
+  slot: 'GroupLabel'
+})(memoTheme.default(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  top: -8
+})));
+const AutocompleteGroupUl = styled.default('ul', {
+  name: 'MuiAutocomplete',
+  slot: 'GroupUl'
+})({
+  padding: 0,
+  [`& .${autocompleteClasses.default.option}`]: {
+    paddingLeft: 24
+  }
+});
+const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
+  const props = DefaultPropsProvider.useDefaultProps({
+    props: inProps,
+    name: 'MuiAutocomplete'
+  });
+
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  const {
+    autoComplete = false,
+    autoHighlight = false,
+    autoSelect = false,
+    blurOnSelect = false,
+    ChipProps: ChipPropsProp,
+    className,
+    clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/jsxRuntime.jsx(Close.default, {
+      fontSize: "small"
+    })),
+    clearOnBlur = !props.freeSolo,
+    clearOnEscape = false,
+    clearText = 'Clear',
+    closeText = 'Close',
+    componentsProps,
+    defaultValue = props.multiple ? [] : null,
+    disableClearable = false,
+    disableCloseOnSelect = false,
+    disabled = false,
+    disabledItemsFocusable = false,
+    disableListWrap = false,
+    disablePortal = false,
+    filterOptions,
+    filterSelectedOptions = false,
+    forcePopupIcon = 'auto',
+    freeSolo = false,
+    fullWidth = false,
+    getLimitTagsText = more => `+${more}`,
+    getOptionDisabled,
+    getOptionKey,
+    getOptionLabel: getOptionLabelProp,
+    isOptionEqualToValue,
+    groupBy,
+    handleHomeEndKeys = !props.freeSolo,
+    id: idProp,
+    includeInputInList = false,
+    inputValue: inputValueProp,
+    limitTags = -1,
+    ListboxComponent: ListboxComponentProp,
+    ListboxProps: ListboxPropsProp,
+    loading = false,
+    loadingText = 'Loading…',
+    multiple = false,
+    noOptionsText = 'No options',
+    onChange,
+    onClose,
+    onHighlightChange,
+    onInputChange,
+    onOpen,
+    open,
+    openOnFocus = false,
+    openText = 'Open',
+    options,
+    PaperComponent: PaperComponentProp,
+    PopperComponent: PopperComponentProp,
+    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/jsxRuntime.jsx(ArrowDropDown.default, {})),
+    readOnly = false,
+    renderGroup: renderGroupProp,
+    renderInput,
+    renderOption: renderOptionProp,
+    renderTags,
+    renderValue,
+    selectOnFocus = !props.freeSolo,
+    size = 'medium',
+    slots = {},
+    slotProps = {},
+    value: valueProp,
+    ...other
+  } = props;
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  const {
+    getRootProps,
+    getInputProps,
+    getInputLabelProps,
+    getPopupIndicatorProps,
+    getClearProps,
+    getItemProps,
+    getListboxProps,
+    getOptionProps,
+    value,
+    dirty,
+    expanded,
+    id,
+    popupOpen,
+    focused,
+    focusedItem,
+    anchorEl,
+    setAnchorEl,
+    inputValue,
+    groupedOptions
+  } = useAutocomplete.default({
+    ...props,
+    componentName: 'Autocomplete'
+  });
+  const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
+  const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+  const {
+    onMouseDown: handleInputMouseDown
+  } = getInputProps();
+  const {
+    ref: listboxRef,
+    ...otherListboxProps
+  } = getListboxProps();
+  const defaultGetOptionLabel = option => option.label ?? option;
+  const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
+
+  // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
+  const ownerState = {
+    ...props,
+    disablePortal,
+    expanded,
+    focused,
+    fullWidth,
+    getOptionLabel,
+    hasClearIcon,
+    hasPopupIcon,
+    inputFocused: focusedItem === -1,
+    popupOpen,
+    size
+  };
+  const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots: {
+      paper: PaperComponentProp,
+      popper: PopperComponentProp,
+      ...slots
+    },
+    slotProps: {
+      chip: ChipPropsProp,
+      listbox: ListboxPropsProp,
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [ListboxSlot, listboxProps] = useSlot.default('listbox', {
+    elementType: AutocompleteListbox,
+    externalForwardedProps,
+    ownerState,
+    className: classes.listbox,
+    additionalProps: otherListboxProps,
+    ref: listboxRef
+  });
+  const [PaperSlot, paperProps] = useSlot.default('paper', {
+    elementType: Paper.default,
+    externalForwardedProps,
+    ownerState,
+    className: classes.paper
+  });
+  const [PopperSlot, popperProps] = useSlot.default('popper', {
+    elementType: Popper.default,
+    externalForwardedProps,
+    ownerState,
+    className: classes.popper,
+    additionalProps: {
+      disablePortal,
+      style: {
+        width: anchorEl ? anchorEl.clientWidth : null
+      },
+      role: 'presentation',
+      anchorEl,
+      open: popupOpen
+    }
+  });
+  let startAdornment;
+  const getCustomizedItemProps = params => ({
+    className: classes.tag,
+    disabled,
+    ...getItemProps(params)
+  });
+  if (multiple) {
+    if (value.length > 0) {
+      if (renderTags) {
+        startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
+      } else if (renderValue) {
+        startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
+      } else {
+        startAdornment = value.map((option, index) => {
+          const {
+            key,
+            ...customItemProps
+          } = getCustomizedItemProps({
+            index
+          });
+          return /*#__PURE__*/jsxRuntime.jsx(Chip.default, {
+            label: getOptionLabel(option),
+            size: size,
+            ...customItemProps,
+            ...externalForwardedProps.slotProps.chip
+          }, key);
+        });
+      }
+    }
+  } else if (renderValue && value != null) {
+    startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
+  }
+  if (limitTags > -1 && Array.isArray(startAdornment)) {
+    const more = startAdornment.length - limitTags;
+    if (!focused && more > 0) {
+      startAdornment = startAdornment.splice(0, limitTags);
+      startAdornment.push(/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: classes.tag,
+        children: getLimitTagsText(more)
+      }, startAdornment.length));
+    }
+  }
+  const defaultRenderGroup = params => /*#__PURE__*/jsxRuntime.jsxs("li", {
+    children: [/*#__PURE__*/jsxRuntime.jsx(AutocompleteGroupLabel, {
+      className: classes.groupLabel,
+      ownerState: ownerState,
+      component: "div",
+      children: params.group
+    }), /*#__PURE__*/jsxRuntime.jsx(AutocompleteGroupUl, {
+      className: classes.groupUl,
+      ownerState: ownerState,
+      children: params.children
+    })]
+  }, params.key);
+  const renderGroup = renderGroupProp || defaultRenderGroup;
+  const defaultRenderOption = (props2, option) => {
+    // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
+    const {
+      key,
+      ...otherProps
+    } = props2;
+    return /*#__PURE__*/jsxRuntime.jsx("li", {
+      ...otherProps,
+      children: getOptionLabel(option)
+    }, key);
+  };
+  const renderOption = renderOptionProp || defaultRenderOption;
+  const renderListOption = (option, index) => {
+    const optionProps = getOptionProps({
+      option,
+      index
+    });
+    return renderOption({
+      ...optionProps,
+      className: classes.option
+    }, option, {
+      selected: optionProps['aria-selected'],
+      index,
+      inputValue
+    }, ownerState);
+  };
+  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
+  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
+  return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(AutocompleteRoot, {
+      ref: ref,
+      className: clsx.clsx(classes.root, className),
+      ownerState: ownerState,
+      ...getRootProps(other),
+      children: renderInput({
+        id,
+        disabled,
+        fullWidth: true,
+        size: size === 'small' ? 'small' : undefined,
+        InputLabelProps: getInputLabelProps(),
+        InputProps: {
+          ref: setAnchorEl,
+          className: classes.inputRoot,
+          startAdornment,
+          onMouseDown: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          },
+          ...((hasClearIcon || hasPopupIcon) && {
+            endAdornment: /*#__PURE__*/jsxRuntime.jsxs(AutocompleteEndAdornment, {
+              className: classes.endAdornment,
+              ownerState: ownerState,
+              children: [hasClearIcon ? /*#__PURE__*/jsxRuntime.jsx(AutocompleteClearIndicator, {
+                ...getClearProps(),
+                "aria-label": clearText,
+                title: clearText,
+                ownerState: ownerState,
+                ...clearIndicatorSlotProps,
+                className: clsx.clsx(classes.clearIndicator, clearIndicatorSlotProps?.className),
+                children: clearIcon
+              }) : null, hasPopupIcon ? /*#__PURE__*/jsxRuntime.jsx(AutocompletePopupIndicator, {
+                ...getPopupIndicatorProps(),
+                disabled: disabled,
+                "aria-label": popupOpen ? closeText : openText,
+                title: popupOpen ? closeText : openText,
+                ownerState: ownerState,
+                ...popupIndicatorSlotProps,
+                className: clsx.clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
+                children: popupIcon
+              }) : null]
+            })
+          })
+        },
+        inputProps: {
+          className: classes.input,
+          disabled,
+          readOnly,
+          ...getInputProps()
+        }
+      })
+    }), anchorEl ? /*#__PURE__*/jsxRuntime.jsx(AutocompletePopper, {
+      as: PopperSlot,
+      ...popperProps,
+      children: /*#__PURE__*/jsxRuntime.jsxs(AutocompletePaper, {
+        as: PaperSlot,
+        ...paperProps,
+        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(AutocompleteLoading, {
+          className: classes.loading,
+          ownerState: ownerState,
+          children: loadingText
+        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/jsxRuntime.jsx(AutocompleteNoOptions, {
+          className: classes.noOptions,
+          ownerState: ownerState,
+          role: "presentation",
+          onMouseDown: event => {
+            // Prevent input blur when interacting with the "no options" content
+            event.preventDefault();
+          },
+          children: noOptionsText
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(ListboxSlot, {
+          as: ListboxComponentProp,
+          ...listboxProps,
+          children: groupedOptions.map((option, index) => {
+            if (groupBy) {
+              return renderGroup({
+                key: option.key,
+                group: option.group,
+                children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
+              });
+            }
+            return renderListOption(option, index);
+          })
+        }) : null]
+      })
+    }) : null]
+  });
+});
+process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the portion of the selected suggestion that the user hasn't typed,
+   * known as the completion string, appears inline after the input cursor in the textbox.
+   * The inline completion string is visually highlighted and has a selected state.
+   * @default false
+   */
+  autoComplete: index.default.bool,
+  /**
+   * If `true`, the first option is automatically highlighted.
+   * @default false
+   */
+  autoHighlight: index.default.bool,
+  /**
+   * If `true`, the selected option becomes the value of the input
+   * when the Autocomplete loses focus unless the user chooses
+   * a different option or changes the character string in the input.
+   *
+   * When using the `freeSolo` mode, the typed value will be the input value
+   * if the Autocomplete loses focus without highlighting an option.
+   * @default false
+   */
+  autoSelect: index.default.bool,
+  /**
+   * Control if the input should be blurred when an option is selected:
+   *
+   * - `false` the input is not blurred.
+   * - `true` the input is always blurred.
+   * - `touch` the input is blurred after a touch event.
+   * - `mouse` the input is blurred after a mouse event.
+   * @default false
+   */
+  blurOnSelect: index.default.oneOfType([index.default.oneOf(['mouse', 'touch']), index.default.bool]),
+  /**
+   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
+   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  ChipProps: index.default.object,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: index.default.object,
+  /**
+   * @ignore
+   */
+  className: index.default.string,
+  /**
+   * The icon to display in place of the default clear icon.
+   * @default <ClearIcon fontSize="small" />
+   */
+  clearIcon: index.default.node,
+  /**
+   * If `true`, the input's text is cleared on blur if no value is selected.
+   *
+   * Set it to `true` if you want to help the user enter a new value.
+   * Set it to `false` if you want to help the user resume their search.
+   * @default !props.freeSolo
+   */
+  clearOnBlur: index.default.bool,
+  /**
+   * If `true`, clear all values when the user presses escape and the popup is closed.
+   * @default false
+   */
+  clearOnEscape: index.default.bool,
+  /**
+   * Override the default text for the *clear* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'Clear'
+   */
+  clearText: index.default.string,
+  /**
+   * Override the default text for the *close popup* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'Close'
+   */
+  closeText: index.default.string,
+  /**
+   * The props used for each slot inside.
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  componentsProps: index.default.shape({
+    clearIndicator: index.default.object,
+    paper: index.default.object,
+    popper: index.default.object,
+    popupIndicator: index.default.object
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   * @default props.multiple ? [] : null
+   */
+  defaultValue: chainPropTypes.default(index.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'));
+    }
+    return null;
+  }),
+  /**
+   * If `true`, the input can't be cleared.
+   * @default false
+   */
+  disableClearable: index.default.bool,
+  /**
+   * If `true`, the popup won't close when a value is selected.
+   * @default false
+   */
+  disableCloseOnSelect: index.default.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: index.default.bool,
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable: index.default.bool,
+  /**
+   * If `true`, the list box in the popup will not wrap focus.
+   * @default false
+   */
+  disableListWrap: index.default.bool,
+  /**
+   * If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: index.default.bool,
+  /**
+   * A function that determines the filtered options to be rendered on search.
+   *
+   * @default createFilterOptions()
+   * @param {Value[]} options The options to render.
+   * @param {object} state The state of the component.
+   * @returns {Value[]}
+   */
+  filterOptions: index.default.func,
+  /**
+   * If `true`, hide the selected options from the list box.
+   * @default false
+   */
+  filterSelectedOptions: index.default.bool,
+  /**
+   * Force the visibility display of the popup icon.
+   * @default 'auto'
+   */
+  forcePopupIcon: index.default.oneOfType([index.default.oneOf(['auto']), index.default.bool]),
+  /**
+   * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
+   * @default false
+   */
+  freeSolo: index.default.bool,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: index.default.bool,
+  /**
+   * The label to display when the tags are truncated (`limitTags`).
+   *
+   * @param {number} more The number of truncated tags.
+   * @returns {ReactNode}
+   * @default (more) => `+${more}`
+   */
+  getLimitTagsText: index.default.func,
+  /**
+   * Used to determine the disabled state for a given option.
+   *
+   * @param {Value} option The option to test.
+   * @template Value The option shape. Will be the same shape as an item of the options.
+   * @returns {boolean}
+   */
+  getOptionDisabled: index.default.func,
+  /**
+   * Used to determine the key for a given option.
+   * This can be useful when the labels of options are not unique (since labels are used as keys by default).
+   *
+   * @param {Value} option The option to get the key for.
+   * @returns {string | number}
+   */
+  getOptionKey: index.default.func,
+  /**
+   * Used to determine the string value for a given option.
+   * It's used to fill the input (and the list box options if `renderOption` is not provided).
+   *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
+   * @param {Value} option
+   * @returns {string}
+   * @default (option) => option.label ?? option
+   */
+  getOptionLabel: index.default.func,
+  /**
+   * If provided, the options will be grouped under the returned string.
+   * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
+   *
+   * @param {Value} option The Autocomplete option.
+   * @returns {string}
+   */
+  groupBy: index.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: index.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: index.default.string,
+  /**
+   * If `true`, the highlight can move to the input.
+   * @default false
+   */
+  includeInputInList: index.default.bool,
+  /**
+   * The input value.
+   */
+  inputValue: index.default.string,
+  /**
+   * Used to determine if the option represents the given value.
+   * Uses strict equality by default.
+   * ⚠️ Both arguments need to be handled, an option can only match with one value.
+   *
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
+   * @returns {boolean}
+   */
+  isOptionEqualToValue: index.default.func,
+  /**
+   * The maximum number of tags that will be visible when not focused.
+   * Set `-1` to disable the limit.
+   * @default -1
+   */
+  limitTags: integerPropType.default,
+  /**
+   * The component used to render the listbox.
+   * @default 'ul'
+   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  ListboxComponent: index.default.elementType,
+  /**
+   * Props applied to the Listbox element.
+   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  ListboxProps: index.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, for example `options` are empty).
+   * @default false
+   */
+  loading: index.default.bool,
+  /**
+   * Text to display when in a loading state.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'Loading…'
+   */
+  loadingText: index.default.node,
+  /**
+   * If `true`, `value` must be an array and the menu will support multiple selections.
+   * @default false
+   */
+  multiple: index.default.bool,
+  /**
+   * Text to display when there are no options.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'No options'
+   */
+  noOptionsText: index.default.node,
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {Value|Value[]} value The new value of the component.
+   * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
+   * @param {string} [details]
+   */
+  onChange: index.default.func,
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see open).
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`.
+   */
+  onClose: index.default.func,
+  /**
+   * Callback fired when the highlight option changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {Value} option The highlighted option.
+   * @param {string} reason Can be: `"keyboard"`, `"mouse"`, `"touch"`.
+   */
+  onHighlightChange: index.default.func,
+  /**
+   * Callback fired when the input value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {string} value The new value of the text input.
+   * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`, `"blur"`, `"selectOption"`, `"removeOption"`
+   */
+  onInputChange: index.default.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: index.default.func,
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see open).
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   */
+  onOpen: index.default.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: index.default.bool,
+  /**
+   * If `true`, the popup will open on input focus.
+   * @default false
+   */
+  openOnFocus: index.default.bool,
+  /**
+   * Override the default text for the *open popup* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'Open'
+   */
+  openText: index.default.string,
+  /**
+   * A list of options that will be shown in the Autocomplete.
+   */
+  options: index.default.array.isRequired,
+  /**
+   * The component used to render the body of the popup.
+   * @default Paper
+   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  PaperComponent: index.default.elementType,
+  /**
+   * The component used to position the popup.
+   * @default Popper
+   * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  PopperComponent: index.default.elementType,
+  /**
+   * The icon to display in place of the default popup icon.
+   * @default <ArrowDropDownIcon />
+   */
+  popupIcon: index.default.node,
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly: index.default.bool,
+  /**
+   * Render the group.
+   *
+   * @param {AutocompleteRenderGroupParams} params The group to render.
+   * @returns {ReactNode}
+   */
+  renderGroup: index.default.func,
+  /**
+   * Render the input.
+   *
+   * **Note:** The `renderInput` prop must return a `TextField` component or a compatible custom component
+   * that correctly forwards `InputProps.ref` and spreads `inputProps`. This ensures proper integration
+   * with the Autocomplete's internal logic (e.g., focus management and keyboard navigation).
+   *
+   * Avoid using components like `DatePicker` or `Select` directly, as they may not forward the required props,
+   * leading to runtime errors or unexpected behavior.
+   *
+   * @param {object} params
+   * @returns {ReactNode}
+   */
+  renderInput: index.default.func.isRequired,
+  /**
+   * Render the option, use `getOptionLabel` by default.
+   *
+   * @param {object} props The props to apply on the li element.
+   * @param {Value} option The option to render.
+   * @param {object} state The state of each option.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderOption: index.default.func,
+  /**
+   * Render the selected value when doing multiple selections.
+   *
+   * @deprecated Use `renderValue` prop instead
+   *
+   * @param {Value[]} value The `value` provided to the component.
+   * @param {function} getTagProps A tag props getter.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderTags: index.default.func,
+  /**
+   * Renders the selected value(s) as rich content in the input for both single and multiple selections.
+   *
+   * @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
+   * @param {function} getItemProps The value item props.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderValue: index.default.func,
+  /**
+   * If `true`, the input's text is selected on focus.
+   * It helps the user clear the selected value.
+   * @default !props.freeSolo
+   */
+  selectOnFocus: index.default.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: index.default /* @typescript-to-proptypes-ignore */.oneOfType([index.default.oneOf(['small', 'medium']), index.default.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: index.default /* @typescript-to-proptypes-ignore */.shape({
+    chip: index.default.oneOfType([index.default.func, index.default.object]),
+    clearIndicator: index.default.oneOfType([index.default.func, index.default.object]),
+    listbox: index.default.oneOfType([index.default.func, index.default.object]),
+    paper: index.default.oneOfType([index.default.func, index.default.object]),
+    popper: index.default.oneOfType([index.default.func, index.default.object]),
+    popupIndicator: index.default.oneOfType([index.default.func, index.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: index.default.shape({
+    listbox: index.default.elementType,
+    paper: index.default.elementType,
+    popper: index.default.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: index.default.oneOfType([index.default.arrayOf(index.default.oneOfType([index.default.func, index.default.object, index.default.bool])), index.default.func, index.default.object]),
+  /**
+   * The value of the autocomplete.
+   *
+   * 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.default(index.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'));
+    }
+    return null;
+  })
+} : void 0;
+
+exports.createFilterOptions = useAutocomplete.createFilterOptions;
+exports.default = Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map