@pismo/marola 1.0.0-beta.69 → 1.0.0-beta.8

package/dist/components/Autocomplete/Autocomplete.js

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