import S from "./index-objectWithoutPropertiesLoose.js";
import r from "./index-extends.js";
import * as lo from "react";
import o from "./index-_virtual16.js";
import { clsx as $ } from "./index-clsx.js";
import { c as D } from "./index-colorManipulator2.js";
import V from "./index-inputClasses.js";
import f from "./index-inputBaseClasses.js";
import io from "./index-outlinedInputClasses.js";
import v from "./index-filledInputClasses.js";
import ae from "./index-Close.js";
import pe from "./index-ArrowDropDown.js";
import t, { getAutocompleteUtilityClass as re } from "./index-autocompleteClasses.js";
import { jsx as i, jsxs as R } from "react/jsx-runtime";
import { useDefaultProps as le } from "./index-DefaultPropsProvider.js";
import mo from "./index-Paper.js";
import go from "./index-Popper.js";
import ie from "./index-useAutocomplete.js";
import { createFilterOptions as It } from "./index-useAutocomplete.js";
import se from "./index-useForkRef.js";
import ce from "./index-Chip.js";
import fo from "./index-capitalize.js";
import de from "./index-composeClasses.js";
import d from "./index-styled.js";
import bo from "./index-IconButton2.js";
import ue from "./index-ListSubheader.js";
import me from "./index-integerPropType.js";
import so from "./index-chainPropTypes.js";
var co, uo;
const ge = ["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", "getOptionKey", "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", "slotProps", "value"], fe = ["ref"], be = ["key"], he = ["key"], xe = (e) => {
  const {
    classes: n,
    disablePortal: g,
    expanded: b,
    focused: h,
    fullWidth: x,
    hasClearIcon: I,
    hasPopupIcon: c,
    inputFocused: G,
    popupOpen: H,
    size: U
  } = e, K = {
    root: ["root", b && "expanded", h && "focused", x && "fullWidth", I && "hasClearIcon", c && "hasPopupIcon"],
    inputRoot: ["inputRoot"],
    input: ["input", G && "inputFocused"],
    tag: ["tag", `tagSize${fo(U)}`],
    endAdornment: ["endAdornment"],
    clearIndicator: ["clearIndicator"],
    popupIndicator: ["popupIndicator", H && "popupIndicatorOpen"],
    popper: ["popper", g && "popperDisablePortal"],
    paper: ["paper"],
    listbox: ["listbox"],
    loading: ["loading"],
    noOptions: ["noOptions"],
    option: ["option"],
    groupLabel: ["groupLabel"],
    groupUl: ["groupUl"]
  };
  return de(K, re, n);
}, Ie = d("div", {
  name: "MuiAutocomplete",
  slot: "Root",
  overridesResolver: (e, n) => {
    const {
      ownerState: g
    } = e, {
      fullWidth: b,
      hasClearIcon: h,
      hasPopupIcon: x,
      inputFocused: I,
      size: c
    } = g;
    return [{
      [`& .${t.tag}`]: n.tag
    }, {
      [`& .${t.tag}`]: n[`tagSize${fo(c)}`]
    }, {
      [`& .${t.inputRoot}`]: n.inputRoot
    }, {
      [`& .${t.input}`]: n.input
    }, {
      [`& .${t.input}`]: I && n.inputFocused
    }, n.root, b && n.fullWidth, x && n.hasPopupIcon, h && n.hasClearIcon];
  }
})({
  [`&.${t.focused} .${t.clearIndicator}`]: {
    visibility: "visible"
  },
  /* Avoid double tap issue on iOS */
  "@media (pointer: fine)": {
    [`&:hover .${t.clearIndicator}`]: {
      visibility: "visible"
    }
  },
  [`& .${t.tag}`]: {
    margin: 3,
    maxWidth: "calc(100% - 6px)"
  },
  [`& .${t.inputRoot}`]: {
    [`.${t.hasPopupIcon}&, .${t.hasClearIcon}&`]: {
      paddingRight: 30
    },
    [`.${t.hasPopupIcon}.${t.hasClearIcon}&`]: {
      paddingRight: 56
    },
    [`& .${t.input}`]: {
      width: 0,
      minWidth: 30
    }
  },
  [`& .${V.root}`]: {
    paddingBottom: 1,
    "& .MuiInput-input": {
      padding: "4px 4px 4px 0px"
    }
  },
  [`& .${V.root}.${f.sizeSmall}`]: {
    [`& .${V.input}`]: {
      padding: "2px 4px 3px 0"
    }
  },
  [`& .${io.root}`]: {
    padding: 9,
    [`.${t.hasPopupIcon}&, .${t.hasClearIcon}&`]: {
      paddingRight: 39
    },
    [`.${t.hasPopupIcon}.${t.hasClearIcon}&`]: {
      paddingRight: 65
    },
    [`& .${t.input}`]: {
      padding: "7.5px 4px 7.5px 5px"
    },
    [`& .${t.endAdornment}`]: {
      right: 9
    }
  },
  [`& .${io.root}.${f.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,
    [`& .${t.input}`]: {
      padding: "2.5px 4px 2.5px 8px"
    }
  },
  [`& .${v.root}`]: {
    paddingTop: 19,
    paddingLeft: 8,
    [`.${t.hasPopupIcon}&, .${t.hasClearIcon}&`]: {
      paddingRight: 39
    },
    [`.${t.hasPopupIcon}.${t.hasClearIcon}&`]: {
      paddingRight: 65
    },
    [`& .${v.input}`]: {
      padding: "7px 4px"
    },
    [`& .${t.endAdornment}`]: {
      right: 9
    }
  },
  [`& .${v.root}.${f.sizeSmall}`]: {
    paddingBottom: 1,
    [`& .${v.input}`]: {
      padding: "2.5px 4px"
    }
  },
  [`& .${f.hiddenLabel}`]: {
    paddingTop: 8
  },
  [`& .${v.root}.${f.hiddenLabel}`]: {
    paddingTop: 0,
    paddingBottom: 0,
    [`& .${t.input}`]: {
      paddingTop: 16,
      paddingBottom: 17
    }
  },
  [`& .${v.root}.${f.hiddenLabel}.${f.sizeSmall}`]: {
    [`& .${t.input}`]: {
      paddingTop: 8,
      paddingBottom: 9
    }
  },
  [`& .${t.input}`]: {
    flexGrow: 1,
    textOverflow: "ellipsis",
    opacity: 0
  },
  variants: [{
    props: {
      fullWidth: !0
    },
    style: {
      width: "100%"
    }
  }, {
    props: {
      size: "small"
    },
    style: {
      [`& .${t.tag}`]: {
        margin: 2,
        maxWidth: "calc(100% - 4px)"
      }
    }
  }, {
    props: {
      inputFocused: !0
    },
    style: {
      [`& .${t.input}`]: {
        opacity: 1
      }
    }
  }, {
    props: {
      multiple: !0
    },
    style: {
      [`& .${t.inputRoot}`]: {
        flexWrap: "wrap"
      }
    }
  }]
}), Oe = d("div", {
  name: "MuiAutocomplete",
  slot: "EndAdornment",
  overridesResolver: (e, n) => n.endAdornment
})({
  // We use a position absolute to support wrapping tags.
  position: "absolute",
  right: 0,
  top: "50%",
  transform: "translate(0, -50%)"
}), ve = d(bo, {
  name: "MuiAutocomplete",
  slot: "ClearIndicator",
  overridesResolver: (e, n) => n.clearIndicator
})({
  marginRight: -2,
  padding: 4,
  visibility: "hidden"
}), Pe = d(bo, {
  name: "MuiAutocomplete",
  slot: "PopupIndicator",
  overridesResolver: ({
    ownerState: e
  }, n) => r({}, n.popupIndicator, e.popupOpen && n.popupIndicatorOpen)
})({
  padding: 2,
  marginRight: -2,
  variants: [{
    props: {
      popupOpen: !0
    },
    style: {
      transform: "rotate(180deg)"
    }
  }]
}), $e = d(go, {
  name: "MuiAutocomplete",
  slot: "Popper",
  overridesResolver: (e, n) => {
    const {
      ownerState: g
    } = e;
    return [{
      [`& .${t.option}`]: n.option
    }, n.popper, g.disablePortal && n.popperDisablePortal];
  }
})(({
  theme: e
}) => ({
  zIndex: (e.vars || e).zIndex.modal,
  variants: [{
    props: {
      disablePortal: !0
    },
    style: {
      position: "absolute"
    }
  }]
})), ye = d(mo, {
  name: "MuiAutocomplete",
  slot: "Paper",
  overridesResolver: (e, n) => n.paper
})(({
  theme: e
}) => r({}, e.typography.body1, {
  overflow: "auto"
})), Ce = d("div", {
  name: "MuiAutocomplete",
  slot: "Loading",
  overridesResolver: (e, n) => n.loading
})(({
  theme: e
}) => ({
  color: (e.vars || e).palette.text.secondary,
  padding: "14px 16px"
})), Te = d("div", {
  name: "MuiAutocomplete",
  slot: "NoOptions",
  overridesResolver: (e, n) => n.noOptions
})(({
  theme: e
}) => ({
  color: (e.vars || e).palette.text.secondary,
  padding: "14px 16px"
})), Le = d("div", {
  name: "MuiAutocomplete",
  slot: "Listbox",
  overridesResolver: (e, n) => n.listbox
})(({
  theme: e
}) => ({
  listStyle: "none",
  margin: 0,
  padding: "8px 0",
  maxHeight: "40vh",
  overflow: "auto",
  position: "relative",
  [`& .${t.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,
    [e.breakpoints.up("sm")]: {
      minHeight: "auto"
    },
    [`&.${t.focused}`]: {
      backgroundColor: (e.vars || e).palette.action.hover,
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: "transparent"
      }
    },
    '&[aria-disabled="true"]': {
      opacity: (e.vars || e).palette.action.disabledOpacity,
      pointerEvents: "none"
    },
    [`&.${t.focusVisible}`]: {
      backgroundColor: (e.vars || e).palette.action.focus
    },
    '&[aria-selected="true"]': {
      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : D.alpha(e.palette.primary.main, e.palette.action.selectedOpacity),
      [`&.${t.focused}`]: {
        backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : D.alpha(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        "@media (hover: none)": {
          backgroundColor: (e.vars || e).palette.action.selected
        }
      },
      [`&.${t.focusVisible}`]: {
        backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : D.alpha(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
      }
    }
  }
})), Ae = d(ue, {
  name: "MuiAutocomplete",
  slot: "GroupLabel",
  overridesResolver: (e, n) => n.groupLabel
})(({
  theme: e
}) => ({
  backgroundColor: (e.vars || e).palette.background.paper,
  top: -8
})), Se = d("ul", {
  name: "MuiAutocomplete",
  slot: "GroupUl",
  overridesResolver: (e, n) => n.groupUl
})({
  padding: 0,
  [`& .${t.option}`]: {
    paddingLeft: 24
  }
}), Re = /* @__PURE__ */ lo.forwardRef(function(n, g) {
  var b, h, x, I;
  const c = le({
    props: n,
    name: "MuiAutocomplete"
  }), {
    autoComplete: G = !1,
    autoHighlight: H = !1,
    autoSelect: U = !1,
    blurOnSelect: K = !1,
    ChipProps: ho,
    className: xo,
    clearIcon: Io = co || (co = /* @__PURE__ */ i(ae, {
      fontSize: "small"
    })),
    clearOnBlur: we = !c.freeSolo,
    clearOnEscape: Ne = !1,
    clearText: q = "Clear",
    closeText: J = "Close",
    componentsProps: y = {},
    defaultValue: ze = c.multiple ? [] : null,
    disableClearable: Oo = !1,
    disableCloseOnSelect: ke = !1,
    disabled: P = !1,
    disabledItemsFocusable: je = !1,
    disableListWrap: Ee = !1,
    disablePortal: Q = !1,
    filterSelectedOptions: Me = !1,
    forcePopupIcon: X = "auto",
    freeSolo: Y = !1,
    fullWidth: vo = !1,
    getLimitTagsText: Po = (a) => `+${a}`,
    getOptionLabel: $o,
    groupBy: yo,
    handleHomeEndKeys: We = !c.freeSolo,
    includeInputInList: Fe = !1,
    limitTags: w = -1,
    ListboxComponent: Co = "ul",
    ListboxProps: N,
    loading: Z = !1,
    loadingText: To = "Loading…",
    multiple: Lo = !1,
    noOptionsText: Ao = "No options",
    openOnFocus: _e = !1,
    openText: oo = "Open",
    PaperComponent: So = mo,
    PopperComponent: Ro = go,
    popupIcon: wo = uo || (uo = /* @__PURE__ */ i(pe, {})),
    readOnly: eo = !1,
    renderGroup: No,
    renderInput: zo,
    renderOption: ko,
    renderTags: to,
    selectOnFocus: Be = !c.freeSolo,
    size: z = "medium",
    slotProps: C = {}
  } = c, jo = S(c, ge), {
    getRootProps: Eo,
    getInputProps: no,
    getInputLabelProps: Mo,
    getPopupIndicatorProps: Wo,
    getClearProps: Fo,
    getTagProps: _o,
    getListboxProps: Bo,
    getOptionProps: Do,
    value: k,
    dirty: Vo,
    expanded: Go,
    id: Ho,
    popupOpen: T,
    focused: ao,
    focusedTag: Uo,
    anchorEl: L,
    setAnchorEl: Ko,
    inputValue: qo,
    groupedOptions: A
  } = ie(r({}, c, {
    componentName: "Autocomplete"
  })), j = !Oo && !P && Vo && !eo, E = (!Y || X === !0) && X !== !1, {
    onMouseDown: Jo
  } = no(), {
    ref: Qo
  } = N ?? {}, po = Bo(), {
    ref: Xo
  } = po, Yo = S(po, fe), Zo = se(Xo, Qo), M = $o || ((a) => {
    var s;
    return (s = a.label) != null ? s : a;
  }), l = r({}, c, {
    disablePortal: Q,
    expanded: Go,
    focused: ao,
    fullWidth: vo,
    getOptionLabel: M,
    hasClearIcon: j,
    hasPopupIcon: E,
    inputFocused: Uo === -1,
    popupOpen: T,
    size: z
  }), p = xe(l);
  let u;
  if (Lo && k.length > 0) {
    const a = (s) => r({
      className: p.tag,
      disabled: P
    }, _o(s));
    to ? u = to(k, a, l) : u = k.map((s, m) => {
      const O = a({
        index: m
      }), {
        key: te
      } = O, ne = S(O, be);
      return /* @__PURE__ */ i(ce, r({
        label: M(s),
        size: z
      }, ne, ho), te);
    });
  }
  if (w > -1 && Array.isArray(u)) {
    const a = u.length - w;
    !ao && a > 0 && (u = u.splice(0, w), u.push(/* @__PURE__ */ i("span", {
      className: p.tag,
      children: Po(a)
    }, u.length)));
  }
  const oe = No || ((a) => /* @__PURE__ */ R("li", {
    children: [/* @__PURE__ */ i(Ae, {
      className: p.groupLabel,
      ownerState: l,
      component: "div",
      children: a.group
    }), /* @__PURE__ */ i(Se, {
      className: p.groupUl,
      ownerState: l,
      children: a.children
    })]
  }, a.key)), ee = ko || ((a, s) => {
    const {
      key: m
    } = a, O = S(a, he);
    return /* @__PURE__ */ i("li", r({}, O, {
      children: M(s)
    }), m);
  }), ro = (a, s) => {
    const m = Do({
      option: a,
      index: s
    });
    return ee(r({}, m, {
      className: p.option
    }), a, {
      selected: m["aria-selected"],
      index: s,
      inputValue: qo
    }, l);
  }, W = (b = C.clearIndicator) != null ? b : y.clearIndicator, F = (h = C.paper) != null ? h : y.paper, _ = (x = C.popper) != null ? x : y.popper, B = (I = C.popupIndicator) != null ? I : y.popupIndicator;
  return /* @__PURE__ */ R(lo.Fragment, {
    children: [/* @__PURE__ */ i(Ie, r({
      ref: g,
      className: $(p.root, xo),
      ownerState: l
    }, Eo(jo), {
      children: zo({
        id: Ho,
        disabled: P,
        fullWidth: !0,
        size: z === "small" ? "small" : void 0,
        InputLabelProps: Mo(),
        InputProps: r({
          ref: Ko,
          className: p.inputRoot,
          startAdornment: u,
          onClick: (a) => {
            a.target === a.currentTarget && Jo(a);
          }
        }, (j || E) && {
          endAdornment: /* @__PURE__ */ R(Oe, {
            className: p.endAdornment,
            ownerState: l,
            children: [j ? /* @__PURE__ */ i(ve, r({}, Fo(), {
              "aria-label": q,
              title: q,
              ownerState: l
            }, W, {
              className: $(p.clearIndicator, W == null ? void 0 : W.className),
              children: Io
            })) : null, E ? /* @__PURE__ */ i(Pe, r({}, Wo(), {
              disabled: P,
              "aria-label": T ? J : oo,
              title: T ? J : oo,
              ownerState: l
            }, B, {
              className: $(p.popupIndicator, B == null ? void 0 : B.className),
              children: wo
            })) : null]
          })
        }),
        inputProps: r({
          className: p.input,
          disabled: P,
          readOnly: eo
        }, no())
      })
    })), L ? /* @__PURE__ */ i($e, r({
      as: Ro,
      disablePortal: Q,
      style: {
        width: L ? L.clientWidth : null
      },
      ownerState: l,
      role: "presentation",
      anchorEl: L,
      open: T
    }, _, {
      className: $(p.popper, _ == null ? void 0 : _.className),
      children: /* @__PURE__ */ R(ye, r({
        ownerState: l,
        as: So
      }, F, {
        className: $(p.paper, F == null ? void 0 : F.className),
        children: [Z && A.length === 0 ? /* @__PURE__ */ i(Ce, {
          className: p.loading,
          ownerState: l,
          children: To
        }) : null, A.length === 0 && !Y && !Z ? /* @__PURE__ */ i(Te, {
          className: p.noOptions,
          ownerState: l,
          role: "presentation",
          onMouseDown: (a) => {
            a.preventDefault();
          },
          children: Ao
        }) : null, A.length > 0 ? /* @__PURE__ */ i(Le, r({
          as: Co,
          className: p.listbox,
          ownerState: l
        }, Yo, N, {
          ref: Zo,
          children: A.map((a, s) => yo ? oe({
            key: a.key,
            group: a.group,
            children: a.options.map((m, O) => ro(m, a.index + O))
          }) : ro(a, s))
        })) : null]
      }))
    })) : null]
  });
});
process.env.NODE_ENV !== "production" && (Re.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: o.bool,
  /**
   * If `true`, the first option is automatically highlighted.
   * @default false
   */
  autoHighlight: o.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: o.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: o.oneOfType([o.oneOf(["mouse", "touch"]), o.bool]),
  /**
   * Props applied to the [`Chip`](/material-ui/api/chip/) element.
   */
  ChipProps: o.object,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: o.object,
  /**
   * @ignore
   */
  className: o.string,
  /**
   * The icon to display in place of the default clear icon.
   * @default <ClearIcon fontSize="small" />
   */
  clearIcon: o.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: o.bool,
  /**
   * If `true`, clear all values when the user presses escape and the popup is closed.
   * @default false
   */
  clearOnEscape: o.bool,
  /**
   * Override the default text for the *clear* icon button.
   *
   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
   * @default 'Clear'
   */
  clearText: o.string,
  /**
   * Override the default text for the *close popup* icon button.
   *
   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
   * @default 'Close'
   */
  closeText: o.string,
  /**
   * The props used for each slot inside.
   * @default {}
   */
  componentsProps: o.shape({
    clearIndicator: o.object,
    paper: o.object,
    popper: o.object,
    popupIndicator: o.object
  }),
  /**
   * The default value. Use when the component is not controlled.
   * @default props.multiple ? [] : null
   */
  defaultValue: so(o.any, (e) => e.multiple && e.defaultValue !== void 0 && !Array.isArray(e.defaultValue) ? new Error(["MUI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.", `However, ${e.defaultValue} was provided.`].join(`
`)) : null),
  /**
   * If `true`, the input can't be cleared.
   * @default false
   */
  disableClearable: o.bool,
  /**
   * If `true`, the popup won't close when a value is selected.
   * @default false
   */
  disableCloseOnSelect: o.bool,
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled: o.bool,
  /**
   * If `true`, will allow focus on disabled items.
   * @default false
   */
  disabledItemsFocusable: o.bool,
  /**
   * If `true`, the list box in the popup will not wrap focus.
   * @default false
   */
  disableListWrap: o.bool,
  /**
   * If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
   * @default false
   */
  disablePortal: o.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: o.func,
  /**
   * If `true`, hide the selected options from the list box.
   * @default false
   */
  filterSelectedOptions: o.bool,
  /**
   * Force the visibility display of the popup icon.
   * @default 'auto'
   */
  forcePopupIcon: o.oneOfType([o.oneOf(["auto"]), o.bool]),
  /**
   * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
   * @default false
   */
  freeSolo: o.bool,
  /**
   * If `true`, the input will take up the full width of its container.
   * @default false
   */
  fullWidth: o.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: o.func,
  /**
   * Used to determine the disabled state for a given option.
   *
   * @param {Value} option The option to test.
   * @returns {boolean}
   */
  getOptionDisabled: o.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: o.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: o.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} options The options to group.
   * @returns {string}
   */
  groupBy: o.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: o.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: o.string,
  /**
   * If `true`, the highlight can move to the input.
   * @default false
   */
  includeInputInList: o.bool,
  /**
   * The input value.
   */
  inputValue: o.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: o.func,
  /**
   * The maximum number of tags that will be visible when not focused.
   * Set `-1` to disable the limit.
   * @default -1
   */
  limitTags: me,
  /**
   * The component used to render the listbox.
   * @default 'ul'
   */
  ListboxComponent: o.elementType,
  /**
   * Props applied to the Listbox element.
   */
  ListboxProps: o.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: o.bool,
  /**
   * Text to display when in a loading state.
   *
   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
   * @default 'Loading…'
   */
  loadingText: o.node,
  /**
   * If `true`, `value` must be an array and the menu will support multiple selections.
   * @default false
   */
  multiple: o.bool,
  /**
   * Text to display when there are no options.
   *
   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
   * @default 'No options'
   */
  noOptionsText: o.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: o.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: o.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"`, `"auto"`, `"mouse"`, `"touch"`.
   */
  onHighlightChange: o.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"`.
   */
  onInputChange: o.func,
  /**
   * @ignore
   */
  onKeyDown: o.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: o.func,
  /**
   * If `true`, the component is shown.
   */
  open: o.bool,
  /**
   * If `true`, the popup will open on input focus.
   * @default false
   */
  openOnFocus: o.bool,
  /**
   * Override the default text for the *open popup* icon button.
   *
   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
   * @default 'Open'
   */
  openText: o.string,
  /**
   * Array of options.
   */
  options: o.array.isRequired,
  /**
   * The component used to render the body of the popup.
   * @default Paper
   */
  PaperComponent: o.elementType,
  /**
   * The component used to position the popup.
   * @default Popper
   */
  PopperComponent: o.elementType,
  /**
   * The icon to display in place of the default popup icon.
   * @default <ArrowDropDownIcon />
   */
  popupIcon: o.node,
  /**
   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
   * @default false
   */
  readOnly: o.bool,
  /**
   * Render the group.
   *
   * @param {AutocompleteRenderGroupParams} params The group to render.
   * @returns {ReactNode}
   */
  renderGroup: o.func,
  /**
   * Render the input.
   *
   * @param {object} params
   * @returns {ReactNode}
   */
  renderInput: o.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: o.func,
  /**
   * Render the selected value.
   *
   * @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: o.func,
  /**
   * If `true`, the input's text is selected on focus.
   * It helps the user clear the selected value.
   * @default !props.freeSolo
   */
  selectOnFocus: o.bool,
  /**
   * The size of the component.
   * @default 'medium'
   */
  size: o.oneOfType([o.oneOf(["small", "medium"]), o.string]),
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: o.shape({
    clearIndicator: o.object,
    paper: o.object,
    popper: o.object,
    popupIndicator: o.object
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.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: so(o.any, (e) => e.multiple && e.value !== void 0 && !Array.isArray(e.value) ? new Error(["MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.", `However, ${e.value} was provided.`].join(`
`)) : null)
});
export {
  It as createFilterOptions,
  Re as default
};
