@pismo/marola 1.1.22 → 2.0.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,356 +1,356 @@
-import { jsx as Z, jsxs as lt } from "react/jsx-runtime";
+import { jsx as Z, jsxs as it } from "react/jsx-runtime";
 import * as h from "react";
-import { useId as at, useState as ut } from "react";
-import { c as ct } from "../../clsx-DB4S2d7J.js";
-import { Icon as pt } from "../Icon/Icon.js";
+import { useId as lt, useState as at } from "react";
+import { c as ut } from "../../clsx-OuTLNxxd.js";
+import { Icon as ct } from "../Icon/Icon.js";
 import { Input as ft } from "../Input/Input.js";
-import { b as Ve, s as dt } from "../../useSlotProps-C_I1kEHr.js";
-import { u as gt } from "../../useId-BW-oWmul.js";
-import { u as Ie } from "../../useControlled-CCMYYdCM.js";
+import { s as dt, b as Me } from "../../useSlotProps-DSnfx453.js";
+import { u as pt } from "../../useId-BW-oWmul.js";
+import { u as Se } from "../../useControlled-CCMYYdCM.js";
 import { u as ce } from "../../useEventCallback-BAQJJ3ye.js";
-import '../../assets/Autocomplete.css';const ht = (c) => {
+import '../../assets/Autocomplete.css';const gt = (c) => {
   const m = h.useRef({});
   return h.useEffect(() => {
     m.current = c;
   }), m.current;
 };
-function Me(c) {
+function Re(c) {
   return typeof c.normalize < "u" ? c.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : c;
 }
-function mt(c = {}) {
+function ht(c = {}) {
   const {
     ignoreAccents: m = !0,
     ignoreCase: g = !0,
     limit: A,
     matchFrom: J = "any",
-    stringify: j,
+    stringify: V,
     trim: D = !1
   } = c;
   return (C, {
-    inputValue: q,
+    inputValue: j,
     getOptionLabel: b
   }) => {
-    let I = D ? q.trim() : q;
-    g && (I = I.toLowerCase()), m && (I = Me(I));
-    const B = I ? C.filter((W) => {
-      let S = (j || b)(W);
-      return g && (S = S.toLowerCase()), m && (S = Me(S)), J === "start" ? S.indexOf(I) === 0 : S.indexOf(I) > -1;
+    let S = D ? j.trim() : j;
+    g && (S = S.toLowerCase()), m && (S = Re(S));
+    const B = S ? C.filter((W) => {
+      let w = (V || b)(W);
+      return g && (w = w.toLowerCase()), m && (w = Re(w)), J === "start" ? w.indexOf(S) === 0 : w.indexOf(S) > -1;
     }) : C;
     return typeof A == "number" ? B.slice(0, A) : B;
   };
 }
-function pe(c, m) {
+function fe(c, m) {
   for (let g = 0; g < c.length; g += 1)
     if (m(c[g]))
       return g;
   return -1;
 }
-const bt = mt(), Re = 5, yt = (c) => {
+const mt = ht(), bt = 5, xt = (c) => {
   var m;
   return c.current !== null && ((m = c.current.parentElement) == null ? void 0 : m.contains(document.activeElement));
 };
-function xt(c) {
+function yt(c) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_isActiveElementInListbox: m = yt,
+    unstable_isActiveElementInListbox: m = xt,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     unstable_classNamePrefix: g = "Mui",
     autoComplete: A = !1,
     autoHighlight: J = !1,
-    autoSelect: j = !1,
+    autoSelect: V = !1,
     blurOnSelect: D = !1,
     clearOnBlur: C = !c.freeSolo,
-    clearOnEscape: q = !1,
+    clearOnEscape: j = !1,
     componentName: b = "useAutocomplete",
-    defaultValue: I = c.multiple ? [] : null,
+    defaultValue: S = c.multiple ? [] : null,
     disableClearable: B = !1,
     disableCloseOnSelect: W = !1,
-    disabled: S,
-    disabledItemsFocusable: fe = !1,
+    disabled: w,
+    disabledItemsFocusable: de = !1,
     disableListWrap: te = !1,
-    filterOptions: de = bt,
+    filterOptions: pe = mt,
     filterSelectedOptions: Y = !1,
     freeSolo: N = !1,
     getOptionDisabled: U,
     getOptionKey: i,
-    getOptionLabel: y = (t) => {
+    getOptionLabel: x = (t) => {
       var e;
       return (e = t.label) != null ? e : t;
     },
     groupBy: L,
-    handleHomeEndKeys: V = !c.freeSolo,
+    handleHomeEndKeys: M = !c.freeSolo,
     id: v,
-    includeInputInList: re = !1,
+    includeInputInList: ne = !1,
     inputValue: ge,
-    isOptionEqualToValue: M = (t, e) => t === e,
+    isOptionEqualToValue: R = (t, e) => t === e,
     multiple: u = !1,
-    onChange: Se,
-    onClose: we,
-    onHighlightChange: ke,
-    onInputChange: R,
-    onOpen: Ee,
+    onChange: we,
+    onClose: ke,
+    onHighlightChange: Ee,
+    onInputChange: H,
+    onOpen: Te,
     open: He,
     openOnFocus: Fe = !1,
     options: he,
     readOnly: X = !1,
     selectOnFocus: qe = !c.freeSolo,
-    value: Be
-  } = c, k = gt(v);
-  let _ = y;
-  _ = (t) => {
-    const e = y(t);
+    value: je
+  } = c, E = pt(v);
+  let O = x;
+  O = (t) => {
+    const e = x(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 ${b} 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 ${b} returned ${n} instead of a string for ${JSON.stringify(t)}.`);
       }
       return String(e);
     }
     return e;
   };
-  const me = h.useRef(!1), be = h.useRef(!0), f = h.useRef(null), E = h.useRef(null), [oe, Ue] = h.useState(null), [T, ye] = h.useState(-1), Te = J ? 0 : -1, x = h.useRef(Te), [o, Ke] = Ie({
-    controlled: Be,
-    default: I,
+  const me = h.useRef(!1), be = h.useRef(!0), d = h.useRef(null), T = h.useRef(null), [re, Be] = h.useState(null), [_, xe] = h.useState(-1), _e = J ? 0 : -1, y = h.useRef(_e), [r, Ue] = Se({
+    controlled: je,
+    default: S,
     name: b
-  }), [a, ne] = Ie({
+  }), [a, oe] = Se({
     controlled: ge,
     default: "",
     name: b,
     state: "inputValue"
   }), [se, $e] = h.useState(!1), ie = h.useCallback((t, e) => {
-    if (!(u ? o.length < e.length : e !== null) && !C)
+    if (!(u ? r.length < e.length : e !== null) && !C)
       return;
-    let n;
+    let o;
     if (u)
-      n = "";
+      o = "";
     else if (e == null)
-      n = "";
+      o = "";
     else {
-      const s = _(e);
-      n = typeof s == "string" ? s : "";
+      const s = O(e);
+      o = typeof s == "string" ? s : "";
     }
-    a !== n && (ne(n), R && R(t, n, "reset"));
-  }, [_, a, u, R, ne, C, o]), [K, Pe] = Ie({
+    a !== o && (oe(o), H && H(t, o, "reset"));
+  }, [O, a, u, H, oe, C, r]), [K, Pe] = Se({
     controlled: He,
     default: !1,
     name: b,
     state: "open"
-  }), [ze, Ae] = h.useState(!0), De = !u && o != null && a === _(o), w = K && !X, p = w ? de(
-    he.filter((t) => !(Y && (u ? o : [o]).some((e) => e !== null && M(t, e)))),
+  }), [Ke, Ae] = h.useState(!0), De = !u && r != null && a === O(r), k = K && !X, f = k ? pe(
+    he.filter((t) => !(Y && (u ? r : [r]).some((e) => e !== null && R(t, e)))),
     // we use the empty string to manipulate `filterOptions` to not filter any options
     // i.e. the filter predicate always returns true
     {
-      inputValue: De && ze ? "" : a,
-      getOptionLabel: _
+      inputValue: De && Ke ? "" : a,
+      getOptionLabel: O
     }
-  ) : [], $ = ht({
-    filteredOptions: p,
-    value: o,
+  ) : [], $ = gt({
+    filteredOptions: f,
+    value: r,
     inputValue: a
   });
   h.useEffect(() => {
-    const t = o !== $.value;
-    se && !t || N && !t || ie(null, o);
-  }, [o, ie, se, $.value, N]);
-  const xe = K && p.length > 0 && !X;
-  if (process.env.NODE_ENV !== "production" && o !== null && !N && he.length > 0) {
-    const t = (u ? o : [o]).filter((e) => !he.some((r) => M(r, e)));
+    const t = r !== $.value;
+    se && !t || N && !t || ie(null, r);
+  }, [r, ie, se, $.value, N]);
+  const ye = K && f.length > 0 && !X;
+  if (process.env.NODE_ENV !== "production" && r !== null && !N && he.length > 0) {
+    const t = (u ? r : [r]).filter((e) => !he.some((n) => R(n, e)));
     t.length > 0 && console.warn([`MUI: The value provided to ${b} 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 le = ce((t) => {
-    t === -1 ? f.current.focus() : oe.querySelector(`[data-tag-index="${t}"]`).focus();
+    t === -1 ? d.current.focus() : re.querySelector(`[data-tag-index="${t}"]`).focus();
   });
   h.useEffect(() => {
-    u && T > o.length - 1 && (ye(-1), le(-1));
-  }, [o, u, T, le]);
-  function Je(t, e) {
-    if (!E.current || t < 0 || t >= p.length)
+    u && _ > r.length - 1 && (xe(-1), le(-1));
+  }, [r, u, _, le]);
+  function ze(t, e) {
+    if (!T.current || t < 0 || t >= f.length)
       return -1;
-    let r = t;
+    let n = t;
     for (; ; ) {
-      const n = E.current.querySelector(`[data-option-index="${r}"]`), s = fe ? !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 = T.current.querySelector(`[data-option-index="${n}"]`), s = de ? !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 = ce(({
+  const F = ce(({
     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", `${k}-option-${e}`), ke && ke(t, e === -1 ? null : p[e], r), !E.current)
+    if (y.current = e, e === -1 ? d.current.removeAttribute("aria-activedescendant") : d.current.setAttribute("aria-activedescendant", `${E}-option-${e}`), Ee && Ee(t, e === -1 ? null : f[e], n), !T.current)
       return;
-    const n = E.current.querySelector(`[role="option"].${g}-focused`);
-    n && (n.classList.remove(`${g}-focused`), n.classList.remove(`${g}-focusVisible`));
-    let s = E.current;
-    if (E.current.getAttribute("role") !== "listbox" && (s = E.current.parentElement.querySelector('[role="listbox"]')), !s)
+    const o = T.current.querySelector(`[role="option"].${g}-focused`);
+    o && (o.classList.remove(`${g}-focused`), o.classList.remove(`${g}-focusVisible`));
+    let s = T.current;
+    if (T.current.getAttribute("role") !== "listbox" && (s = T.current.parentElement.querySelector('[role="listbox"]')), !s)
       return;
     if (e === -1) {
       s.scrollTop = 0;
       return;
     }
-    const l = E.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, O = s.clientHeight + s.scrollTop, ue = d.offsetTop + d.offsetHeight;
-      ue > O ? s.scrollTop = ue - s.clientHeight : d.offsetTop - d.offsetHeight * (L ? 1.3 : 0) < s.scrollTop && (s.scrollTop = d.offsetTop - d.offsetHeight * (L ? 1.3 : 0));
+    const l = T.current.querySelector(`[data-option-index="${e}"]`);
+    if (l && (l.classList.add(`${g}-focused`), n === "keyboard" && l.classList.add(`${g}-focusVisible`), s.scrollHeight > s.clientHeight && n !== "mouse" && n !== "touch")) {
+      const p = l, I = s.clientHeight + s.scrollTop, ue = p.offsetTop + p.offsetHeight;
+      ue > I ? s.scrollTop = ue - s.clientHeight : p.offsetTop - p.offsetHeight * (L ? 1.3 : 0) < s.scrollTop && (s.scrollTop = p.offsetTop - p.offsetHeight * (L ? 1.3 : 0));
     }
   }), P = ce(({
     event: t,
     diff: e,
-    direction: r = "next",
-    reason: n = "auto"
+    direction: n = "next",
+    reason: o = "auto"
   }) => {
-    if (!w)
+    if (!k)
       return;
-    const l = Je((() => {
-      const d = p.length - 1;
+    const l = ze((() => {
+      const p = f.length - 1;
       if (e === "reset")
-        return Te;
+        return _e;
       if (e === "start")
         return 0;
       if (e === "end")
-        return d;
-      const O = x.current + e;
-      return O < 0 ? O === -1 && re ? -1 : te && x.current !== -1 || Math.abs(e) > 1 ? 0 : d : O > d ? O === d + 1 && re ? -1 : te || Math.abs(e) > 1 ? d : 0 : O;
-    })(), r);
-    if (H({
+        return p;
+      const I = y.current + e;
+      return I < 0 ? I === -1 && ne ? -1 : te && y.current !== -1 || Math.abs(e) > 1 ? 0 : p : I > p ? I === p + 1 && ne ? -1 : te || Math.abs(e) > 1 ? p : 0 : I;
+    })(), n);
+    if (F({
       index: l,
-      reason: n,
+      reason: o,
       event: t
     }), A && e !== "reset")
       if (l === -1)
-        f.current.value = a;
+        d.current.value = a;
       else {
-        const d = _(p[l]);
-        f.current.value = d, d.toLowerCase().indexOf(a.toLowerCase()) === 0 && a.length > 0 && f.current.setSelectionRange(a.length, d.length);
+        const p = O(f[l]);
+        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 ? _(e) : "", s = r ? _(r) : "";
-      return n === s;
+  }), Je = () => {
+    const t = (e, n) => {
+      const o = e ? O(e) : "", s = n ? O(n) : "";
+      return o === s;
     };
-    if (x.current !== -1 && $.filteredOptions && $.filteredOptions.length !== p.length && $.inputValue === a && (u ? o.length === $.value.length && $.value.every((e, r) => _(o[r]) === _(e)) : t($.value, o))) {
-      const e = $.filteredOptions[x.current];
+    if (y.current !== -1 && $.filteredOptions && $.filteredOptions.length !== f.length && $.inputValue === a && (u ? r.length === $.value.length && $.value.every((e, n) => O(r[n]) === O(e)) : t($.value, r))) {
+      const e = $.filteredOptions[y.current];
       if (e)
-        return pe(p, (r) => _(r) === _(e));
+        return fe(f, (n) => O(n) === O(e));
     }
     return -1;
-  }, _e = h.useCallback(() => {
-    if (!w)
+  }, Oe = h.useCallback(() => {
+    if (!k)
       return;
-    const t = We();
+    const t = Je();
     if (t !== -1) {
-      x.current = t;
+      y.current = t;
       return;
     }
-    const e = u ? o[0] : o;
-    if (p.length === 0 || e == null) {
+    const e = u ? r[0] : r;
+    if (f.length === 0 || e == null) {
       P({
         diff: "reset"
       });
       return;
     }
-    if (E.current) {
+    if (T.current) {
       if (e != null) {
-        const r = p[x.current];
-        if (u && r && pe(o, (s) => M(r, s)) !== -1)
+        const n = f[y.current];
+        if (u && n && fe(r, (s) => R(n, s)) !== -1)
           return;
-        const n = pe(p, (s) => M(s, e));
-        n === -1 ? P({
+        const o = fe(f, (s) => R(s, e));
+        o === -1 ? P({
           diff: "reset"
-        }) : H({
-          index: n
+        }) : F({
+          index: o
         });
         return;
       }
-      if (x.current >= p.length - 1) {
-        H({
-          index: p.length - 1
+      if (y.current >= f.length - 1) {
+        F({
+          index: f.length - 1
         });
         return;
       }
-      H({
-        index: x.current
+      F({
+        index: y.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,
+    u ? !1 : r,
     Y,
     P,
-    H,
-    w,
+    F,
+    k,
     a,
     u
-  ]), Ye = ce((t) => {
-    dt(E, t), t && _e();
+  ]), We = ce((t) => {
+    dt(T, t), t && Oe();
   });
   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 ${b} 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, ${b} expects an input element.`, "", b === "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(`
+    (!d.current || d.current.nodeName !== "INPUT") && (d.current && d.current.nodeName === "TEXTAREA" ? console.warn([`A textarea element was provided to ${b} 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, ${b} expects an input element.`, "", b === "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(`
 `)));
   }, [b]), h.useEffect(() => {
-    _e();
-  }, [_e]);
-  const F = (t) => {
-    K || (Pe(!0), Ae(!0), Ee && Ee(t));
+    Oe();
+  }, [Oe]);
+  const q = (t) => {
+    K || (Pe(!0), Ae(!0), Te && Te(t));
   }, G = (t, e) => {
-    K && (Pe(!1), we && we(t, e));
-  }, z = (t, e, r, n) => {
+    K && (Pe(!1), ke && ke(t, e));
+  }, z = (t, e, n, o) => {
     if (u) {
-      if (o.length === e.length && o.every((s, l) => s === e[l]))
+      if (r.length === e.length && r.every((s, l) => s === e[l]))
         return;
-    } else if (o === e)
+    } else if (r === e)
       return;
-    Se && Se(t, e, r, n), Ke(e);
-  }, ae = h.useRef(!1), Q = (t, e, r = "selectOption", n = "options") => {
-    let s = r, l = e;
+    we && we(t, e, n, o), Ue(e);
+  }, ae = h.useRef(!1), Q = (t, e, n = "selectOption", o = "options") => {
+    let s = n, l = e;
     if (u) {
-      if (l = Array.isArray(o) ? o.slice() : [], process.env.NODE_ENV !== "production") {
-        const O = l.filter((ue) => M(e, ue));
-        O.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${b} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${O.length} matches.`].join(`
+      if (l = Array.isArray(r) ? r.slice() : [], process.env.NODE_ENV !== "production") {
+        const I = l.filter((ue) => R(e, ue));
+        I.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${b} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${I.length} matches.`].join(`
 `));
       }
-      const d = pe(l, (O) => M(e, O));
-      d === -1 ? l.push(e) : n !== "freeSolo" && (l.splice(d, 1), s = "removeOption");
+      const p = fe(l, (I) => R(e, I));
+      p === -1 ? l.push(e) : o !== "freeSolo" && (l.splice(p, 1), s = "removeOption");
     }
     ie(t, l), z(t, l, s, {
       option: e
-    }), !W && (!t || !t.ctrlKey && !t.metaKey) && G(t, s), (D === !0 || D === "touch" && ae.current || D === "mouse" && !ae.current) && f.current.blur();
+    }), !W && (!t || !t.ctrlKey && !t.metaKey) && G(t, s), (D === !0 || D === "touch" && ae.current || D === "mouse" && !ae.current) && d.current.blur();
   };
-  function Xe(t, e) {
+  function Ye(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 = oe.querySelector(`[data-tag-index="${r}"]`);
-      if (!n || !n.hasAttribute("tabindex") || n.disabled || n.getAttribute("aria-disabled") === "true")
-        r += e === "next" ? 1 : -1;
+      const o = re.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 Ce = (t, e) => {
     if (!u)
       return;
     a === "" && G(t, "toggleInput");
-    let r = T;
-    T === -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), ye(r), le(r);
+    let n = _;
+    _ === -1 ? a === "" && e === "previous" && (n = r.length - 1) : (n += e === "next" ? 1 : -1, n < 0 && (n = 0), n === r.length && (n = -1)), n = Ye(n, e), xe(n), le(n);
   }, Ne = (t) => {
-    me.current = !0, ne(""), R && R(t, "", "clear"), z(t, u ? [] : null, "clear");
-  }, Ge = (t) => (e) => {
-    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (T !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (ye(-1), le(-1)), e.which !== 229))
+    me.current = !0, oe(""), H && H(t, "", "clear"), z(t, u ? [] : null, "clear");
+  }, Xe = (t) => (e) => {
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (_ !== -1 && ["ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 && (xe(-1), le(-1)), e.which !== 229))
       switch (e.key) {
         case "Home":
-          w && V && (e.preventDefault(), P({
+          k && M && (e.preventDefault(), P({
             diff: "start",
             direction: "next",
             reason: "keyboard",
@@ -358,7 +358,7 @@ function xt(c) {
           }));
           break;
         case "End":
-          w && V && (e.preventDefault(), P({
+          k && M && (e.preventDefault(), P({
             diff: "end",
             direction: "previous",
             reason: "keyboard",
@@ -367,19 +367,19 @@ function xt(c) {
           break;
         case "PageUp":
           e.preventDefault(), P({
-            diff: -Re,
+            diff: -5,
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), F(e);
+          }), q(e);
           break;
         case "PageDown":
           e.preventDefault(), P({
-            diff: Re,
+            diff: bt,
             direction: "next",
             reason: "keyboard",
             event: e
-          }), F(e);
+          }), q(e);
           break;
         case "ArrowDown":
           e.preventDefault(), P({
@@ -387,7 +387,7 @@ function xt(c) {
             direction: "next",
             reason: "keyboard",
             event: e
-          }), F(e);
+          }), q(e);
           break;
         case "ArrowUp":
           e.preventDefault(), P({
@@ -395,7 +395,7 @@ function xt(c) {
             direction: "previous",
             reason: "keyboard",
             event: e
-          }), F(e);
+          }), q(e);
           break;
         case "ArrowLeft":
           Ce(e, "previous");
@@ -404,124 +404,123 @@ function xt(c) {
           Ce(e, "next");
           break;
         case "Enter":
-          if (x.current !== -1 && w) {
-            const r = p[x.current], n = U ? U(r) : !1;
-            if (e.preventDefault(), n)
+          if (y.current !== -1 && k) {
+            const n = f[y.current], o = U ? U(n) : !1;
+            if (e.preventDefault(), o)
               return;
-            Q(e, r, "selectOption"), A && f.current.setSelectionRange(f.current.value.length, f.current.value.length);
-          } else
-            N && a !== "" && De === !1 && (u && e.preventDefault(), Q(e, a, "createOption", "freeSolo"));
+            Q(e, n, "selectOption"), A && d.current.setSelectionRange(d.current.value.length, d.current.value.length);
+          } else N && a !== "" && De === !1 && (u && e.preventDefault(), Q(e, a, "createOption", "freeSolo"));
           break;
         case "Escape":
-          w ? (e.preventDefault(), e.stopPropagation(), G(e, "escape")) : q && (a !== "" || u && o.length > 0) && (e.preventDefault(), e.stopPropagation(), Ne(e));
+          k ? (e.preventDefault(), e.stopPropagation(), G(e, "escape")) : j && (a !== "" || u && r.length > 0) && (e.preventDefault(), e.stopPropagation(), Ne(e));
           break;
         case "Backspace":
-          if (u && !X && a === "" && o.length > 0) {
-            const r = T === -1 ? o.length - 1 : T, n = o.slice();
-            n.splice(r, 1), z(e, n, "removeOption", {
-              option: o[r]
+          if (u && !X && a === "" && r.length > 0) {
+            const n = _ === -1 ? r.length - 1 : _, o = r.slice();
+            o.splice(n, 1), z(e, o, "removeOption", {
+              option: r[n]
             });
           }
           break;
         case "Delete":
-          if (u && !X && a === "" && o.length > 0 && T !== -1) {
-            const r = T, n = o.slice();
-            n.splice(r, 1), z(e, n, "removeOption", {
-              option: o[r]
+          if (u && !X && a === "" && r.length > 0 && _ !== -1) {
+            const n = _, o = r.slice();
+            o.splice(n, 1), z(e, o, "removeOption", {
+              option: r[n]
             });
           }
           break;
       }
-  }, Qe = (t) => {
-    $e(!0), Fe && !me.current && F(t);
+  }, Ge = (t) => {
+    $e(!0), Fe && !me.current && q(t);
   }, Le = (t) => {
-    if (m(E)) {
-      f.current.focus();
+    if (m(T)) {
+      d.current.focus();
       return;
     }
-    $e(!1), be.current = !0, me.current = !1, j && x.current !== -1 && w ? Q(t, p[x.current], "blur") : j && N && a !== "" ? Q(t, a, "blur", "freeSolo") : C && ie(t, o), G(t, "blur");
-  }, Ze = (t) => {
+    $e(!1), be.current = !0, me.current = !1, V && y.current !== -1 && k ? Q(t, f[y.current], "blur") : V && N && a !== "" ? Q(t, a, "blur", "freeSolo") : C && ie(t, r), G(t, "blur");
+  }, Qe = (t) => {
     const e = t.target.value;
-    a !== e && (ne(e), Ae(!1), R && R(t, e, "input")), e === "" ? !B && !u && z(t, null, "clear") : F(t);
-  }, et = (t) => {
+    a !== e && (oe(e), Ae(!1), H && H(t, e, "input")), e === "" ? !B && !u && z(t, null, "clear") : q(t);
+  }, Ze = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    x.current !== e && H({
+    y.current !== e && F({
       event: t,
       index: e,
       reason: "mouse"
     });
-  }, tt = (t) => {
-    H({
+  }, et = (t) => {
+    F({
       event: t,
       index: Number(t.currentTarget.getAttribute("data-option-index")),
       reason: "touch"
     }), ae.current = !0;
-  }, rt = (t) => {
+  }, tt = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    Q(t, p[e], "selectOption"), ae.current = !1;
-  }, ot = (t) => (e) => {
-    const r = o.slice();
-    r.splice(t, 1), z(e, r, "removeOption", {
-      option: o[t]
+    Q(t, f[e], "selectOption"), ae.current = !1;
+  }, nt = (t) => (e) => {
+    const n = r.slice();
+    n.splice(t, 1), z(e, n, "removeOption", {
+      option: r[t]
     });
   }, ve = (t) => {
-    K ? G(t, "toggleInput") : F(t);
-  }, nt = (t) => {
-    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== k && t.preventDefault();
+    K ? G(t, "toggleInput") : q(t);
+  }, rt = (t) => {
+    t.currentTarget.contains(t.target) && t.target.getAttribute("id") !== E && t.preventDefault();
+  }, ot = (t) => {
+    t.currentTarget.contains(t.target) && (d.current.focus(), qe && be.current && d.current.selectionEnd - d.current.selectionStart === 0 && d.current.select(), be.current = !1);
   }, st = (t) => {
-    t.currentTarget.contains(t.target) && (f.current.focus(), qe && be.current && f.current.selectionEnd - f.current.selectionStart === 0 && f.current.select(), be.current = !1);
-  }, it = (t) => {
-    !S && (a === "" || !K) && ve(t);
+    !w && (a === "" || !K) && ve(t);
   };
-  let Oe = N && a.length > 0;
-  Oe = Oe || (u ? o.length > 0 : o !== null);
-  let je = p;
+  let Ie = N && a.length > 0;
+  Ie = Ie || (u ? r.length > 0 : r !== null);
+  let Ve = f;
   if (L) {
     const t = /* @__PURE__ */ new Map();
     let e = !1;
-    je = p.reduce((r, n, s) => {
-      const l = 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 ${b} 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({
+    Ve = f.reduce((n, o, s) => {
+      const l = L(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 ${b} 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: [n]
-      })), r;
+        options: [o]
+      })), n;
     }, []);
   }
-  return S && se && Le(), {
-    getRootProps: (t = {}) => Ve({
-      "aria-owns": xe ? `${k}-listbox` : null
+  return w && se && Le(), {
+    getRootProps: (t = {}) => Me({
+      "aria-owns": ye ? `${E}-listbox` : null
     }, t, {
-      onKeyDown: Ge(t),
-      onMouseDown: nt,
-      onClick: st
+      onKeyDown: Xe(t),
+      onMouseDown: rt,
+      onClick: ot
     }),
     getInputLabelProps: () => ({
-      id: `${k}-label`,
-      htmlFor: k
+      id: `${E}-label`,
+      htmlFor: E
     }),
     getInputProps: () => ({
-      id: k,
+      id: E,
       value: a,
       onBlur: Le,
-      onFocus: Qe,
-      onChange: Ze,
-      onMouseDown: it,
+      onFocus: Ge,
+      onChange: Qe,
+      onMouseDown: st,
       // 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-activedescendant": k ? "" : null,
       "aria-autocomplete": A ? "both" : "list",
-      "aria-controls": xe ? `${k}-listbox` : void 0,
-      "aria-expanded": xe,
+      "aria-controls": ye ? `${E}-listbox` : void 0,
+      "aria-expanded": ye,
       // 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: S
+      disabled: w
     }),
     getClearProps: () => ({
       tabIndex: -1,
@@ -535,18 +534,18 @@ function xt(c) {
     }),
     getTagProps: ({
       index: t
-    }) => Ve({
+    }) => Me({
       key: t,
       "data-tag-index": t,
       tabIndex: -1
     }, !X && {
-      onDelete: ot(t)
+      onDelete: nt(t)
     }),
     getListboxProps: () => ({
       role: "listbox",
-      id: `${k}-listbox`,
-      "aria-labelledby": `${k}-label`,
-      ref: Ye,
+      id: `${E}-listbox`,
+      "aria-labelledby": `${E}-label`,
+      ref: We,
       onMouseDown: (t) => {
         t.preventDefault();
       }
@@ -555,52 +554,37 @@ function xt(c) {
       index: t,
       option: e
     }) => {
-      var r;
-      const n = (u ? o : [o]).some((l) => l != null && M(e, l)), s = U ? U(e) : !1;
+      var n;
+      const o = (u ? r : [r]).some((l) => l != null && R(e, l)), s = U ? U(e) : !1;
       return {
-        key: (r = i == null ? void 0 : i(e)) != null ? r : _(e),
+        key: (n = i == null ? void 0 : i(e)) != null ? n : O(e),
         tabIndex: -1,
         role: "option",
-        id: `${k}-option-${t}`,
-        onMouseMove: et,
-        onClick: rt,
-        onTouchStart: tt,
+        id: `${E}-option-${t}`,
+        onMouseMove: Ze,
+        onClick: tt,
+        onTouchStart: et,
         "data-option-index": t,
         "aria-disabled": s,
-        "aria-selected": n
+        "aria-selected": o
       };
     },
-    id: k,
+    id: E,
     inputValue: a,
-    value: o,
-    dirty: Oe,
-    expanded: w && oe,
-    popupOpen: w,
-    focused: se || T !== -1,
-    anchorEl: oe,
-    setAnchorEl: Ue,
-    focusedTag: T,
-    groupedOptions: je
+    value: r,
+    dirty: Ie,
+    expanded: k && re,
+    popupOpen: k,
+    focused: se || _ !== -1,
+    anchorEl: re,
+    setAnchorEl: Be,
+    focusedTag: _,
+    groupedOptions: Ve
   };
 }
-const _t = "_autocomplete_mj65r_65", ee = {
-  "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",
+const Ot = "_autocomplete_mj65r_65", ee = {
   "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",
-  autocomplete: _t,
+  autocomplete: Ot,
   "autocomplete__dropdown-list": "_autocomplete__dropdown-list_mj65r_82",
   "option-focused": "_option-focused_mj65r_106"
 }, At = ({
@@ -609,62 +593,62 @@ const _t = "_autocomplete_mj65r_65", ee = {
   options: g,
   type: A,
   value: J,
-  onChange: j,
+  onChange: V,
   onInputChange: D,
   classNameWrapper: C,
-  "data-testid-wrapper": q,
+  "data-testid-wrapper": j,
   classNameInputWrapper: b,
-  ...I
+  ...S
 }) => {
-  const B = at(), [W, S] = ut("");
+  const B = lt(), [W, w] = at("");
   g != null && g.some((i) => typeof i != "string") && (!c || !m) && console.error(
     '[autocomplete] When options is a list of objects, you must provide the "labelKey" and "valueKey" parameters.'
   );
-  const { getRootProps: fe, getInputProps: te, getOptionProps: de, groupedOptions: Y, getListboxProps: N } = xt({
+  const { getRootProps: de, getInputProps: te, getOptionProps: pe, groupedOptions: Y, getListboxProps: N } = yt({
     id: `autocomplete_${B}`,
     options: g,
     getOptionLabel: (i) => typeof i == "string" ? i : String(i[c || "label"]),
     value: J,
     inputValue: W,
-    isOptionEqualToValue: (i, y) => typeof i == "string" ? String(i) === String(y) : String(i[m || "id"]) === String(y[m || "id"]),
+    isOptionEqualToValue: (i, x) => typeof i == "string" ? String(i) === String(x) : String(i[m || "id"]) === String(x[m || "id"]),
     getOptionKey(i) {
       return String(typeof i == "string" ? i : i[m || "id"]);
     },
-    onChange: (i, y) => {
-      j && j(i, y);
+    onChange: (i, x) => {
+      V && V(i, x);
     },
-    onInputChange: (i, y) => {
-      D && D(i, y), S(y);
+    onInputChange: (i, x) => {
+      D && D(i, x), w(x);
     },
-    onHighlightChange: (i, y, L) => {
-      var V;
+    onHighlightChange: (i, x, L) => {
+      var M;
       if (L === "keyboard") {
-        const v = document.querySelector("#autocomplete-list"), re = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
-        v == null || v.querySelectorAll("li").forEach((ge) => ge.classList.remove(ee["option-focused"])), (V = v == null ? void 0 : v.querySelector(`[id="${re}"]`)) == null || V.classList.add(ee["option-focused"]);
+        const v = document.querySelector("#autocomplete-list"), ne = (i == null ? void 0 : i.target).getAttribute("aria-activedescendant");
+        v == null || v.querySelectorAll("li").forEach((ge) => ge.classList.remove(ee["option-focused"])), (M = v == null ? void 0 : v.querySelector(`[id="${ne}"]`)) == null || M.classList.add(ee["option-focused"]);
       }
     }
   }), U = {
     ...te(),
-    ...I,
+    ...S,
     classNameWrapper: b
   };
-  return /* @__PURE__ */ Z("div", { className: ct(ee.autocomplete, C), "data-testid": q, children: /* @__PURE__ */ lt("div", { ...fe(), children: [
+  return /* @__PURE__ */ Z("div", { className: ut(ee.autocomplete, C), "data-testid": j, children: /* @__PURE__ */ it("div", { ...de(), children: [
     /* @__PURE__ */ Z(
       ft,
       {
-        rightIcon: A === "search" && /* @__PURE__ */ Z(pt, { color: "var(--accent)", icon: "magnifying-glass" }),
+        rightIcon: A === "search" && /* @__PURE__ */ Z(ct, { color: "var(--accent)", icon: "magnifying-glass" }),
         ...U
       }
     ),
-    Y.length > 0 && !I.disabled && /* @__PURE__ */ Z(
+    Y.length > 0 && !S.disabled && /* @__PURE__ */ Z(
       "ul",
       {
         ...N(),
         id: "autocomplete-list",
         className: ee["autocomplete__dropdown-list"],
-        children: Y.map((i, y) => {
-          const L = de({ option: i, index: y }), V = typeof i == "string" ? i : String(i[c || "label"]);
-          return /* @__PURE__ */ Z("li", { tabIndex: y, className: ee["autocomplete__dropdown-item"], ...L, children: V });
+        children: Y.map((i, x) => {
+          const L = pe({ option: i, index: x }), M = typeof i == "string" ? i : String(i[c || "label"]);
+          return /* @__PURE__ */ Z("li", { tabIndex: x, className: ee["autocomplete__dropdown-item"], ...L, children: M });
         })
       }
     )