@pismo/marola 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,690 @@
+import '../../assets/Autocomplete.css';
+import { jsxs as qe, jsx as $ } from "react/jsx-runtime";
+import * as g from "react";
+import { useId as pt, useState as Be } from "react";
+import { c as ee } from "../../clsx-DB4S2d7J.js";
+import { Icon as Ke } from "../Icon/Icon.js";
+import { s as P, I as gt } from "../../Input.module-ZTRZRcNt.js";
+import { Typography as Ue } from "../Typography/Typography.js";
+import { b as je, s as ht } from "../../useSlotProps-kRhf7Gil.js";
+import { u as mt } from "../../useId-BW-oWmul.js";
+import { u as $e } from "../../useControlled-CCMYYdCM.js";
+import { u as me } from "../../useEventCallback-BAQJJ3ye.js";
+const bt = (u) => {
+  const b = g.useRef({});
+  return g.useEffect(() => {
+    b.current = u;
+  }), b.current;
+};
+function ze(u) {
+  return typeof u.normalize < "u" ? u.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : u;
+}
+function xt(u = {}) {
+  const {
+    ignoreAccents: b = !0,
+    ignoreCase: h = !0,
+    limit: A,
+    matchFrom: D = "any",
+    stringify: H,
+    trim: V = !1
+  } = u;
+  return (M, {
+    inputValue: F,
+    getOptionLabel: m
+  }) => {
+    let I = V ? F.trim() : F;
+    h && (I = I.toLowerCase()), b && (I = ze(I));
+    const q = I ? M.filter((Y) => {
+      let _ = (H || m)(Y);
+      return h && (_ = _.toLowerCase()), b && (_ = ze(_)), D === "start" ? _.indexOf(I) === 0 : _.indexOf(I) > -1;
+    }) : M;
+    return typeof A == "number" ? q.slice(0, A) : q;
+  };
+}
+function be(u, b) {
+  for (let h = 0; h < u.length; h += 1)
+    if (b(u[h]))
+      return h;
+  return -1;
+}
+const yt = xt(), Je = 5, Ot = (u) => {
+  var b;
+  return u.current !== null && ((b = u.current.parentElement) == null ? void 0 : b.contains(document.activeElement));
+};
+function It(u) {
+  const {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    unstable_isActiveElementInListbox: b = Ot,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    unstable_classNamePrefix: h = "Mui",
+    autoComplete: A = !1,
+    autoHighlight: D = !1,
+    autoSelect: H = !1,
+    blurOnSelect: V = !1,
+    clearOnBlur: M = !u.freeSolo,
+    clearOnEscape: F = !1,
+    componentName: m = "useAutocomplete",
+    defaultValue: I = u.multiple ? [] : null,
+    disableClearable: q = !1,
+    disableCloseOnSelect: Y = !1,
+    disabled: _,
+    disabledItemsFocusable: xe = !1,
+    disableListWrap: te = !1,
+    filterOptions: ye = yt,
+    filterSelectedOptions: ne = !1,
+    freeSolo: R = !1,
+    getOptionDisabled: U,
+    getOptionKey: W,
+    getOptionLabel: re = (t) => {
+      var e;
+      return (e = t.label) != null ? e : t;
+    },
+    groupBy: j,
+    handleHomeEndKeys: oe = !u.freeSolo,
+    id: Oe,
+    includeInputInList: se = !1,
+    inputValue: Ie,
+    isOptionEqualToValue: E = (t, e) => t === e,
+    multiple: i = !1,
+    onChange: ie,
+    onClose: X,
+    onHighlightChange: le,
+    onInputChange: v,
+    onOpen: ae,
+    open: c,
+    openOnFocus: T = !1,
+    options: _e,
+    readOnly: G = !1,
+    selectOnFocus: Ye = !u.freeSolo,
+    value: We
+  } = u, k = mt(Oe);
+  let y = re;
+  y = (t) => {
+    const e = re(t);
+    if (typeof e != "string") {
+      if (process.env.NODE_ENV !== "production") {
+        const n = e === void 0 ? "undefined" : `${typeof e} (${e})`;
+        console.error(`MUI: The \`getOptionLabel\` method of ${m} returned ${n} instead of a string for ${JSON.stringify(t)}.`);
+      }
+      return String(e);
+    }
+    return e;
+  };
+  const we = g.useRef(!1), ke = g.useRef(!0), d = g.useRef(null), N = g.useRef(null), [ue, Xe] = g.useState(null), [S, Ne] = g.useState(-1), De = D ? 0 : -1, x = g.useRef(De), [r, Ge] = $e({
+    controlled: We,
+    default: I,
+    name: m
+  }), [a, ce] = $e({
+    controlled: Ie,
+    default: "",
+    name: m,
+    state: "inputValue"
+  }), [fe, Ee] = g.useState(!1), de = g.useCallback((t, e) => {
+    if (!(i ? r.length < e.length : e !== null) && !M)
+      return;
+    let o;
+    if (i)
+      o = "";
+    else if (e == null)
+      o = "";
+    else {
+      const s = y(e);
+      o = typeof s == "string" ? s : "";
+    }
+    a !== o && (ce(o), v && v(t, o, "reset"));
+  }, [y, a, i, v, ce, M, r]), [z, ve] = $e({
+    controlled: c,
+    default: !1,
+    name: m,
+    state: "open"
+  }), [Qe, Ce] = g.useState(!0), Le = !i && r != null && a === y(r), w = z && !G, f = w ? ye(
+    _e.filter((t) => !(ne && (i ? r : [r]).some((e) => e !== null && E(t, e)))),
+    // we use the empty string to manipulate `filterOptions` to not filter any options
+    // i.e. the filter predicate always returns true
+    {
+      inputValue: Le && Qe ? "" : a,
+      getOptionLabel: y
+    }
+  ) : [], C = bt({
+    filteredOptions: f,
+    value: r,
+    inputValue: a
+  });
+  g.useEffect(() => {
+    const t = r !== C.value;
+    fe && !t || R && !t || de(null, r);
+  }, [r, de, fe, C.value, R]);
+  const Se = z && f.length > 0 && !G;
+  if (process.env.NODE_ENV !== "production" && r !== null && !R && _e.length > 0) {
+    const t = (i ? r : [r]).filter((e) => !_e.some((n) => E(n, e)));
+    t.length > 0 && console.warn([`MUI: The value provided to ${m} is invalid.`, `None of the options match with \`${t.length > 1 ? JSON.stringify(t) : JSON.stringify(t[0])}\`.`, "You can use the `isOptionEqualToValue` prop to customize the equality test."].join(`
+`));
+  }
+  const pe = me((t) => {
+    t === -1 ? d.current.focus() : ue.querySelector(`[data-tag-index="${t}"]`).focus();
+  });
+  g.useEffect(() => {
+    i && S > r.length - 1 && (Ne(-1), pe(-1));
+  }, [r, i, S, pe]);
+  function Ze(t, e) {
+    if (!N.current || t < 0 || t >= f.length)
+      return -1;
+    let n = t;
+    for (; ; ) {
+      const o = N.current.querySelector(`[data-option-index="${n}"]`), s = xe ? !1 : !o || o.disabled || o.getAttribute("aria-disabled") === "true";
+      if (o && o.hasAttribute("tabindex") && !s)
+        return n;
+      if (e === "next" ? n = (n + 1) % f.length : n = (n - 1 + f.length) % f.length, n === t)
+        return -1;
+    }
+  }
+  const B = me(({
+    event: t,
+    index: e,
+    reason: n = "auto"
+  }) => {
+    if (x.current = e, e === -1 ? d.current.removeAttribute("aria-activedescendant") : d.current.setAttribute("aria-activedescendant", `${k}-option-${e}`), le && le(t, e === -1 ? null : f[e], n), !N.current)
+      return;
+    const o = N.current.querySelector(`[role="option"].${h}-focused`);
+    o && (o.classList.remove(`${h}-focused`), o.classList.remove(`${h}-focusVisible`));
+    let s = N.current;
+    if (N.current.getAttribute("role") !== "listbox" && (s = N.current.parentElement.querySelector('[role="listbox"]')), !s)
+      return;
+    if (e === -1) {
+      s.scrollTop = 0;
+      return;
+    }
+    const l = N.current.querySelector(`[data-option-index="${e}"]`);
+    if (l && (l.classList.add(`${h}-focused`), n === "keyboard" && l.classList.add(`${h}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
+      const p = l, O = s.clientHeight + s.scrollTop, he = p.offsetTop + p.offsetHeight;
+      he > O ? s.scrollTop = he - s.clientHeight : p.offsetTop - p.offsetHeight * (j ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (j ? 1.3 : 0));
+    }
+  }), L = me(({
+    event: t,
+    diff: e,
+    direction: n = "next",
+    reason: o = "auto"
+  }) => {
+    if (!w)
+      return;
+    const l = Ze((() => {
+      const p = f.length - 1;
+      if (e === "reset")
+        return De;
+      if (e === "start")
+        return 0;
+      if (e === "end")
+        return p;
+      const O = x.current + e;
+      return O < 0 ? O === -1 && se ? -1 : te && x.current !== -1 || Math.abs(e) > 1 ? 0 : p : O > p ? O === p + 1 && se ? -1 : te || Math.abs(e) > 1 ? p : 0 : O;
+    })(), n);
+    if (B({
+      index: l,
+      reason: o,
+      event: t
+    }), A && e !== "reset")
+      if (l === -1)
+        d.current.value = a;
+      else {
+        const p = y(f[l]);
+        d.current.value = p, p.toLowerCase().indexOf(a.toLowerCase()) === 0 && a.length > 0 && d.current.setSelectionRange(a.length, p.length);
+      }
+  }), et = () => {
+    const t = (e, n) => {
+      const o = e ? y(e) : "", s = n ? y(n) : "";
+      return o === s;
+    };
+    if (x.current !== -1 && C.filteredOptions && C.filteredOptions.length !== f.length && C.inputValue === a && (i ? r.length === C.value.length && C.value.every((e, n) => y(r[n]) === y(e)) : t(C.value, r))) {
+      const e = C.filteredOptions[x.current];
+      if (e)
+        return be(f, (n) => y(n) === y(e));
+    }
+    return -1;
+  }, Pe = g.useCallback(() => {
+    if (!w)
+      return;
+    const t = et();
+    if (t !== -1) {
+      x.current = t;
+      return;
+    }
+    const e = i ? r[0] : r;
+    if (f.length === 0 || e == null) {
+      L({
+        diff: "reset"
+      });
+      return;
+    }
+    if (N.current) {
+      if (e != null) {
+        const n = f[x.current];
+        if (i && n && be(r, (s) => E(n, s)) !== -1)
+          return;
+        const o = be(f, (s) => E(s, e));
+        o === -1 ? L({
+          diff: "reset"
+        }) : B({
+          index: o
+        });
+        return;
+      }
+      if (x.current >= f.length - 1) {
+        B({
+          index: f.length - 1
+        });
+        return;
+      }
+      B({
+        index: x.current
+      });
+    }
+  }, [
+    // Only sync the highlighted index when the option switch between empty and not
+    f.length,
+    // Don't sync the highlighted index with the value when multiple
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    i ? !1 : r,
+    ne,
+    L,
+    B,
+    w,
+    a,
+    i
+  ]), tt = me((t) => {
+    ht(N, t), t && Pe();
+  });
+  process.env.NODE_ENV !== "production" && g.useEffect(() => {
+    (!d.current || d.current.nodeName !== "INPUT") && (d.current && d.current.nodeName === "TEXTAREA" ? console.warn([`A textarea element was provided to ${m} where input was expected.`, "This is not a supported scenario but it may work under certain conditions.", "A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).", "Make sure to test keyboard navigation and add custom event handlers if necessary."].join(`
+`)) : console.error([`MUI: Unable to find the input element. It was resolved to ${d.current} while an HTMLInputElement was expected.`, `Instead, ${m} expects an input element.`, "", m === "useAutocomplete" ? "Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed." : "Make sure you have customized the input component correctly."].join(`
+`)));
+  }, [m]), g.useEffect(() => {
+    Pe();
+  }, [Pe]);
+  const K = (t) => {
+    z || (ve(!0), Ce(!0), ae && ae(t));
+  }, Q = (t, e) => {
+    z && (ve(!1), X && X(t, e));
+  }, J = (t, e, n, o) => {
+    if (i) {
+      if (r.length === e.length && r.every((s, l) => s === e[l]))
+        return;
+    } else if (r === e)
+      return;
+    ie && ie(t, e, n, o), Ge(e);
+  }, ge = g.useRef(!1), Z = (t, e, n = "selectOption", o = "options") => {
+    let s = n, l = e;
+    if (i) {
+      if (l = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
+        const O = l.filter((he) => E(e, he));
+        O.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${m} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${O.length} matches.`].join(`
+`));
+      }
+      const p = be(l, (O) => E(e, O));
+      p === -1 ? l.push(e) : o !== "freeSolo" && (l.splice(p, 1), s = "removeOption");
+    }
+    de(t, l), J(t, l, s, {
+      option: e
+    }), !Y && (!t || !t.ctrlKey && !t.metaKey) && Q(t, s), (V === !0 || V === "touch" && ge.current || V === "mouse" && !ge.current) && d.current.blur();
+  };
+  function nt(t, e) {
+    if (t === -1)
+      return -1;
+    let n = t;
+    for (; ; ) {
+      if (e === "next" && n === r.length || e === "previous" && n === -1)
+        return -1;
+      const o = ue.querySelector(`[data-tag-index="${n}"]`);
+      if (!o || !o.hasAttribute("tabindex") || o.disabled || o.getAttribute("aria-disabled") === "true")
+        n += e === "next" ? 1 : -1;
+      else
+        return n;
+    }
+  }
+  const Ve = (t, e) => {
+    if (!i)
+      return;
+    a === "" && Q(t, "toggleInput");
+    let n = S;
+    S === -1 ? a === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = nt(n, e), Ne(n), pe(n);
+  }, Me = (t) => {
+    we.current = !0, ce(""), v && v(t, "", "clear"), J(t, i ? [] : null, "clear");
+  }, rt = (t) => (e) => {
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (S !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (Ne(-1), pe(-1)), e.which !== 229))
+      switch (e.key) {
+        case "Home":
+          w && oe && (e.preventDefault(), L({
+            diff: "start",
+            direction: "next",
+            reason: "keyboard",
+            event: e
+          }));
+          break;
+        case "End":
+          w && oe && (e.preventDefault(), L({
+            diff: "end",
+            direction: "previous",
+            reason: "keyboard",
+            event: e
+          }));
+          break;
+        case "PageUp":
+          e.preventDefault(), L({
+            diff: -Je,
+            direction: "previous",
+            reason: "keyboard",
+            event: e
+          }), K(e);
+          break;
+        case "PageDown":
+          e.preventDefault(), L({
+            diff: Je,
+            direction: "next",
+            reason: "keyboard",
+            event: e
+          }), K(e);
+          break;
+        case "ArrowDown":
+          e.preventDefault(), L({
+            diff: 1,
+            direction: "next",
+            reason: "keyboard",
+            event: e
+          }), K(e);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), L({
+            diff: -1,
+            direction: "previous",
+            reason: "keyboard",
+            event: e
+          }), K(e);
+          break;
+        case "ArrowLeft":
+          Ve(e, "previous");
+          break;
+        case "ArrowRight":
+          Ve(e, "next");
+          break;
+        case "Enter":
+          if (x.current !== -1 && w) {
+            const n = f[x.current], o = U ? U(n) : !1;
+            if (e.preventDefault(), o)
+              return;
+            Z(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
+          } else
+            R && a !== "" && Le === !1 && (i && e.preventDefault(), Z(e, a, "createOption", "freeSolo"));
+          break;
+        case "Escape":
+          w ? (e.preventDefault(), e.stopPropagation(), Q(e, "escape")) : F && (a !== "" || i && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Me(e));
+          break;
+        case "Backspace":
+          if (i && !G && a === "" && r.length > 0) {
+            const n = S === -1 ? r.length - 1 : S, o = r.slice();
+            o.splice(n, 1), J(e, o, "removeOption", {
+              option: r[n]
+            });
+          }
+          break;
+        case "Delete":
+          if (i && !G && a === "" && r.length > 0 && S !== -1) {
+            const n = S, o = r.slice();
+            o.splice(n, 1), J(e, o, "removeOption", {
+              option: r[n]
+            });
+          }
+          break;
+      }
+  }, ot = (t) => {
+    Ee(!0), T && !we.current && K(t);
+  }, Re = (t) => {
+    if (b(N)) {
+      d.current.focus();
+      return;
+    }
+    Ee(!1), ke.current = !0, we.current = !1, H && x.current !== -1 && w ? Z(t, f[x.current], "blur") : H && R && a !== "" ? Z(t, a, "blur", "freeSolo") : M && de(t, r), Q(t, "blur");
+  }, st = (t) => {
+    const e = t.target.value;
+    a !== e && (ce(e), Ce(!1), v && v(t, e, "input")), e === "" ? !q && !i && J(t, null, "clear") : K(t);
+  }, it = (t) => {
+    const e = Number(t.currentTarget.getAttribute("data-option-index"));
+    x.current !== e && B({
+      event: t,
+      index: e,
+      reason: "mouse"
+    });
+  }, lt = (t) => {
+    B({
+      event: t,
+      index: Number(t.currentTarget.getAttribute("data-option-index")),
+      reason: "touch"
+    }), ge.current = !0;
+  }, at = (t) => {
+    const e = Number(t.currentTarget.getAttribute("data-option-index"));
+    Z(t, f[e], "selectOption"), ge.current = !1;
+  }, ut = (t) => (e) => {
+    const n = r.slice();
+    n.splice(t, 1), J(e, n, "removeOption", {
+      option: r[t]
+    });
+  }, He = (t) => {
+    z ? Q(t, "toggleInput") : K(t);
+  }, ct = (t) => {
+    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== k && t.preventDefault();
+  }, ft = (t) => {
+    t.currentTarget.contains(t.target) && (d.current.focus(), Ye && ke.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), ke.current = !1);
+  }, dt = (t) => {
+    !_ && (a === "" || !z) && He(t);
+  };
+  let Te = R && a.length > 0;
+  Te = Te || (i ? r.length > 0 : r !== null);
+  let Fe = f;
+  if (j) {
+    const t = /* @__PURE__ */ new Map();
+    let e = !1;
+    Fe = f.reduce((n, o, s) => {
+      const l = j(o);
+      return n.length > 0 && n[n.length - 1].group === l ? n[n.length - 1].options.push(o) : (process.env.NODE_ENV !== "production" && (t.get(l) && !e && (console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${m} returns duplicated headers.`, "You can solve the issue by sorting the options with the output of `groupBy`."), e = !0), t.set(l, !0)), n.push({
+        key: s,
+        index: s,
+        group: l,
+        options: [o]
+      })), n;
+    }, []);
+  }
+  return _ && fe && Re(), {
+    getRootProps: (t = {}) => je({
+      "aria-owns": Se ? `${k}-listbox` : null
+    }, t, {
+      onKeyDown: rt(t),
+      onMouseDown: ct,
+      onClick: ft
+    }),
+    getInputLabelProps: () => ({
+      id: `${k}-label`,
+      htmlFor: k
+    }),
+    getInputProps: () => ({
+      id: k,
+      value: a,
+      onBlur: Re,
+      onFocus: ot,
+      onChange: st,
+      onMouseDown: dt,
+      // if open then this is handled imperatively so don't let react override
+      // only have an opinion about this when closed
+      "aria-activedescendant": w ? "" : null,
+      "aria-autocomplete": A ? "both" : "list",
+      "aria-controls": Se ? `${k}-listbox` : void 0,
+      "aria-expanded": Se,
+      // Disable browser's suggestion that might overlap with the popup.
+      // Handle autocomplete but not autofill.
+      autoComplete: "off",
+      ref: d,
+      autoCapitalize: "none",
+      spellCheck: "false",
+      role: "combobox",
+      disabled: _
+    }),
+    getClearProps: () => ({
+      tabIndex: -1,
+      type: "button",
+      onClick: Me
+    }),
+    getPopupIndicatorProps: () => ({
+      tabIndex: -1,
+      type: "button",
+      onClick: He
+    }),
+    getTagProps: ({
+      index: t
+    }) => je({
+      key: t,
+      "data-tag-index": t,
+      tabIndex: -1
+    }, !G && {
+      onDelete: ut(t)
+    }),
+    getListboxProps: () => ({
+      role: "listbox",
+      id: `${k}-listbox`,
+      "aria-labelledby": `${k}-label`,
+      ref: tt,
+      onMouseDown: (t) => {
+        t.preventDefault();
+      }
+    }),
+    getOptionProps: ({
+      index: t,
+      option: e
+    }) => {
+      var n;
+      const o = (i ? r : [r]).some((l) => l != null && E(e, l)), s = U ? U(e) : !1;
+      return {
+        key: (n = W == null ? void 0 : W(e)) != null ? n : y(e),
+        tabIndex: -1,
+        role: "option",
+        id: `${k}-option-${t}`,
+        onMouseMove: it,
+        onClick: at,
+        onTouchStart: lt,
+        "data-option-index": t,
+        "aria-disabled": s,
+        "aria-selected": o
+      };
+    },
+    id: k,
+    inputValue: a,
+    value: r,
+    dirty: Te,
+    expanded: w && ue,
+    popupOpen: w,
+    focused: fe || S !== -1,
+    anchorEl: ue,
+    setAnchorEl: Xe,
+    focusedTag: S,
+    groupedOptions: Fe
+  };
+}
+const _t = "_autocomplete_1k4ph_1", Ae = {
+  autocomplete: _t,
+  "autocomplete__dropdown-list": "_autocomplete__dropdown-list_1k4ph_5",
+  "autocomplete__dropdown-item": "_autocomplete__dropdown-item_1k4ph_15"
+}, vt = ({
+  label: u,
+  type: b,
+  options: h,
+  infoMessage: A,
+  errorMessage: D,
+  leftIcon: H,
+  rightIcon: V,
+  id: M,
+  disabled: F,
+  maxLength: m,
+  onChange: I,
+  onInputChange: q,
+  classNameLabel: Y,
+  classNameInput: _,
+  classNameErrorMessage: xe,
+  classNameInfoMessage: te,
+  "data-testid-label": ye,
+  "data-testid-input": ne,
+  "data-testid-infoMessage": R,
+  "data-testid-errorMessage": U,
+  ...W
+}) => {
+  const re = pt(), j = M || `input_${re}`;
+  Object.assign(W, { "data-testid": ne });
+  const [oe, Oe] = Be(), [se, Ie] = Be(""), { getRootProps: E, getInputProps: i, getOptionProps: ie, groupedOptions: X, getListboxProps: le, focused: v, getInputLabelProps: ae } = It({
+    id: j,
+    options: h,
+    getOptionLabel: (c) => typeof c == "string" ? c : c == null ? void 0 : c.label,
+    value: oe,
+    inputValue: se,
+    onChange: (c, T) => {
+      I && I(c, T), Oe(T);
+    },
+    onInputChange: (c, T) => {
+      q && q(c, T), Ie(T);
+    }
+  });
+  return /* @__PURE__ */ qe("div", { className: Ae.autocomplete, children: [
+    u && /* @__PURE__ */ $(
+      Ue,
+      {
+        element: "label",
+        elementProps: { ...ae() },
+        className: ee(P.input__label, Y),
+        "data-testid": ye,
+        children: u
+      }
+    ),
+    /* @__PURE__ */ $("div", { ...E(), className: v ? "Mui-focused" : "", children: /* @__PURE__ */ $(
+      gt,
+      {
+        disabled: F,
+        error: !!D,
+        "aria-label": u,
+        slotProps: {
+          root: (c) => ({
+            className: ee(P["input__input-el-wrapper"], {
+              [P["input--disabled"]]: c.disabled,
+              [P["input--focused"]]: c.focused,
+              [P["input--error"]]: c.error
+            })
+          }),
+          input: {
+            ...i(),
+            className: ee(P["input__input-el"], _),
+            maxLength: m,
+            ...W
+          }
+        },
+        startAdornment: H && /* @__PURE__ */ $("span", { className: P["input__left-icon"], children: H }),
+        endAdornment: b === "search" ? /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: /* @__PURE__ */ $(Ke, { color: "var(--accent)", icon: "magnifying-glass" }) }) : V && /* @__PURE__ */ $("span", { className: P["input__right-icon"], children: V })
+      }
+    ) }),
+    X.length > 0 && !F && /* @__PURE__ */ $("ul", { ...le(), className: Ae["autocomplete__dropdown-list"], children: X.map((c, T) => /* @__PURE__ */ $(
+      "li",
+      {
+        tabIndex: T,
+        className: Ae["autocomplete__dropdown-item"],
+        ...ie({ option: c, index: T }),
+        children: typeof c == "string" ? c : c == null ? void 0 : c.label
+      }
+    )) }),
+    (D || A) && /* @__PURE__ */ qe(
+      Ue,
+      {
+        className: D ? ee(P["input__error-message"], xe) : ee(P["input__info-message"], te),
+        "data-testid": D ? U : R,
+        children: [
+          /* @__PURE__ */ $(Ke, { icon: "circle-exclamation" }),
+          D || A
+        ]
+      }
+    )
+  ] });
+};
+export {
+  vt as Autocomplete
+};