jcicl 0.0.209 → 0.0.213

package/LabeledDropdown/LabeledDropdown.js

@@ -1,33 +1,33 @@
-import { jsx as T, jsxs as Ne } from "react/jsx-runtime";
-import { n as qo } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as Yo } from "../.chunks/emotion-react.browser.esm.js";
-import jo from "../theme.js";
-import * as b from "react";
+import { jsx as k, jsxs as Me } from "react/jsx-runtime";
+import { n as Yo } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as Mo } from "../.chunks/emotion-react.browser.esm.js";
+import Bo from "../theme.js";
+import * as m from "react";
 import { g as po, a as co, s as F, c as d, u as uo, b as J, P as o, d as fo, e as V } from "../.chunks/DefaultPropsProvider.js";
-import { i as Io, a as be, b as No, f as Ae, P as Bo, A as Jo, T as Xo } from "../.chunks/TextField.js";
-import { c as Uo } from "../.chunks/createSvgIcon.js";
+import { i as Io, a as be, b as No, f as Ae, P as Uo, A as Jo, T as Xo } from "../.chunks/TextField.js";
+import { c as Ho } from "../.chunks/createSvgIcon.js";
 import { m as ee } from "../.chunks/memoTheme.js";
 import { u as Oo, i as Qo } from "../.chunks/useSlot.js";
 import { c as De } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as So } from "../.chunks/ButtonBase.js";
 import { c as wo } from "../.chunks/chainPropTypes.js";
-import { P as Ho } from "../.chunks/Popper.js";
+import { P as Wo } from "../.chunks/Popper.js";
 import { a as Zo } from "../.chunks/Portal.js";
 import { u as Po } from "../.chunks/useControlled.js";
 import { b as io, s as et, u as ot } from "../.chunks/TransitionGroupContext.js";
 function tt(e, n, a, i, g) {
   if (process.env.NODE_ENV === "production")
     return null;
-  const v = g || n;
-  return typeof e[n] < "u" ? new Error(`The prop \`${v}\` is not supported. Please remove it.`) : null;
+  const x = g || n;
+  return typeof e[n] < "u" ? new Error(`The prop \`${x}\` is not supported. Please remove it.`) : null;
 }
 const nt = (e) => {
-  const n = b.useRef({});
-  return b.useEffect(() => {
+  const n = m.useRef({});
+  return m.useEffect(() => {
     n.current = e;
   }), n.current;
 };
-function Mo(e) {
+function Eo(e) {
   return e.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 }
 function rt(e = {}) {
@@ -36,23 +36,23 @@ function rt(e = {}) {
     ignoreCase: a = !0,
     limit: i,
     matchFrom: g = "any",
-    stringify: v,
+    stringify: x,
     trim: y = !1
   } = e;
-  return (x, {
-    inputValue: $,
-    getOptionLabel: m
+  return (v, {
+    inputValue: P,
+    getOptionLabel: b
   }) => {
-    let k = y ? $.trim() : $;
-    a && (k = k.toLowerCase()), n && (k = Mo(k));
-    const L = k ? x.filter((X) => {
-      let A = (v || m)(X);
-      return a && (A = A.toLowerCase()), n && (A = Mo(A)), g === "start" ? A.startsWith(k) : A.includes(k);
-    }) : x;
+    let S = y ? P.trim() : P;
+    a && (S = S.toLowerCase()), n && (S = Eo(S));
+    const L = S ? v.filter((X) => {
+      let A = (x || b)(X);
+      return a && (A = A.toLowerCase()), n && (A = Eo(A)), g === "start" ? A.startsWith(S) : A.includes(S);
+    }) : v;
     return typeof i == "number" ? L.slice(0, i) : L;
   };
 }
-const at = rt(), Eo = 5, lt = (e) => {
+const at = rt(), zo = 5, lt = (e) => {
   var n;
   return e.current !== null && ((n = e.current.parentElement) == null ? void 0 : n.contains(document.activeElement));
 }, it = [];
@@ -64,18 +64,18 @@ function st(e) {
     unstable_classNamePrefix: a = "Mui",
     autoComplete: i = !1,
     autoHighlight: g = !1,
-    autoSelect: v = !1,
+    autoSelect: x = !1,
     blurOnSelect: y = !1,
-    clearOnBlur: x = !e.freeSolo,
-    clearOnEscape: $ = !1,
-    componentName: m = "useAutocomplete",
-    defaultValue: k = e.multiple ? it : null,
+    clearOnBlur: v = !e.freeSolo,
+    clearOnEscape: P = !1,
+    componentName: b = "useAutocomplete",
+    defaultValue: S = e.multiple ? it : null,
     disableClearable: L = !1,
     disableCloseOnSelect: X = !1,
     disabled: A,
     disabledItemsFocusable: E = !1,
     disableListWrap: ue = !1,
-    filterOptions: Me = at,
+    filterOptions: Ne = at,
     filterSelectedOptions: me = !1,
     freeSolo: le = !1,
     getOptionDisabled: H,
@@ -87,7 +87,7 @@ function st(e) {
     includeInputInList: de = !1,
     inputValue: ye,
     isOptionEqualToValue: W = (r, t) => r === t,
-    multiple: C = !1,
+    multiple: $ = !1,
     onChange: fe,
     onClose: _,
     onHighlightChange: ve,
@@ -100,77 +100,77 @@ function st(e) {
     selectOnFocus: Fe = !e.freeSolo,
     value: go
   } = e, U = Zo(Ve);
-  let N = Ee;
-  N = (r) => {
+  let M = Ee;
+  M = (r) => {
     const t = Ee(r);
     if (typeof t != "string") {
       if (process.env.NODE_ENV !== "production") {
         const l = t === void 0 ? "undefined" : `${typeof t} (${t})`;
-        console.error(`MUI: The \`getOptionLabel\` method of ${m} returned ${l} instead of a string for ${JSON.stringify(r)}.`);
+        console.error(`MUI: The \`getOptionLabel\` method of ${b} returned ${l} instead of a string for ${JSON.stringify(r)}.`);
       }
       return String(t);
     }
     return t;
   };
-  const je = b.useRef(!1), Be = b.useRef(!0), w = b.useRef(null), K = b.useRef(null), [Ue, Ro] = b.useState(null), [G, Xe] = b.useState(-1), bo = g ? 0 : -1, z = b.useRef(bo), [s, Lo] = Po({
+  const je = m.useRef(!1), Be = m.useRef(!0), T = m.useRef(null), K = m.useRef(null), [Ue, Ro] = m.useState(null), [G, Xe] = m.useState(-1), bo = g ? 0 : -1, z = m.useRef(bo), [s, Lo] = Po({
     controlled: go,
-    default: k,
-    name: m
-  }), [P, Ce] = Po({
+    default: S,
+    name: b
+  }), [O, Ce] = Po({
     controlled: ye,
     default: "",
-    name: m,
+    name: b,
     state: "inputValue"
-  }), [Ie, He] = b.useState(!1), Oe = b.useCallback((r, t, l) => {
-    if (!(C ? s.length < t.length : t !== null) && !x)
+  }), [Ie, He] = m.useState(!1), Oe = m.useCallback((r, t, l) => {
+    if (!($ ? s.length < t.length : t !== null) && !v)
       return;
     let c;
-    if (C)
+    if ($)
       c = "";
     else if (t == null)
       c = "";
     else {
-      const O = N(t);
-      c = typeof O == "string" ? O : "";
+      const I = M(t);
+      c = typeof I == "string" ? I : "";
     }
-    P !== c && (Ce(c), q && q(r, c, l));
-  }, [N, P, C, q, Ce, x, s]), [se, Qe] = Po({
+    O !== c && (Ce(c), q && q(r, c, l));
+  }, [M, O, $, q, Ce, v, s]), [se, Qe] = Po({
     controlled: xe,
     default: !1,
-    name: m,
+    name: b,
     state: "open"
-  }), [Ze, mo] = b.useState(!0), Pe = !C && s != null && P === N(s), j = se && !$e, S = j ? Me(
-    ko.filter((r) => !(me && (C ? s : [s]).some((t) => t !== null && W(r, t)))),
+  }), [Ze, mo] = m.useState(!0), Pe = !$ && s != null && O === M(s), j = se && !$e, w = j ? Ne(
+    ko.filter((r) => !(me && ($ ? s : [s]).some((t) => t !== null && W(r, t)))),
     // we use the empty string to manipulate `filterOptions` to not filter any options
     // i.e. the filter predicate always returns true
     {
-      inputValue: Pe && Ze ? "" : P,
-      getOptionLabel: N
+      inputValue: Pe && Ze ? "" : O,
+      getOptionLabel: M
     }
   ) : [], Q = nt({
-    filteredOptions: S,
+    filteredOptions: w,
     value: s,
-    inputValue: P
+    inputValue: O
   });
-  b.useEffect(() => {
+  m.useEffect(() => {
     const r = s !== Q.value;
     Ie && !r || le && !r || Oe(null, s, "reset");
   }, [s, Oe, Ie, Q.value, le]);
-  const We = se && S.length > 0 && !$e, Se = io((r) => {
-    r === -1 ? w.current.focus() : Ue.querySelector(`[data-tag-index="${r}"]`).focus();
+  const We = se && w.length > 0 && !$e, Se = io((r) => {
+    r === -1 ? T.current.focus() : Ue.querySelector(`[data-tag-index="${r}"]`).focus();
   });
-  b.useEffect(() => {
-    C && G > s.length - 1 && (Xe(-1), Se(-1));
-  }, [s, C, G, Se]);
+  m.useEffect(() => {
+    $ && G > s.length - 1 && (Xe(-1), Se(-1));
+  }, [s, $, G, Se]);
   function eo(r, t) {
-    if (!K.current || r < 0 || r >= S.length)
+    if (!K.current || r < 0 || r >= w.length)
       return -1;
     let l = r;
     for (; ; ) {
       const p = K.current.querySelector(`[data-option-index="${l}"]`), c = E ? !1 : !p || p.disabled || p.getAttribute("aria-disabled") === "true";
       if (p && p.hasAttribute("tabindex") && !c)
         return l;
-      if (t === "next" ? l = (l + 1) % S.length : l = (l - 1 + S.length) % S.length, l === r)
+      if (t === "next" ? l = (l + 1) % w.length : l = (l - 1 + w.length) % w.length, l === r)
         return -1;
     }
   }
@@ -179,7 +179,7 @@ function st(e) {
     index: t,
     reason: l = "auto"
   }) => {
-    if (z.current = t, t === -1 ? w.current.removeAttribute("aria-activedescendant") : w.current.setAttribute("aria-activedescendant", `${U}-option-${t}`), ve && ve(r, t === -1 ? null : S[t], l), !K.current)
+    if (z.current = t, t === -1 ? T.current.removeAttribute("aria-activedescendant") : T.current.setAttribute("aria-activedescendant", `${U}-option-${t}`), ve && ve(r, t === -1 ? null : w[t], l), !K.current)
       return;
     const p = K.current.querySelector(`[role="option"].${a}-focused`);
     p && (p.classList.remove(`${a}-focused`), p.classList.remove(`${a}-focusVisible`));
@@ -190,10 +190,10 @@ function st(e) {
       c.scrollTop = 0;
       return;
     }
-    const O = K.current.querySelector(`[data-option-index="${t}"]`);
-    if (O && (O.classList.add(`${a}-focused`), l === "keyboard" && O.classList.add(`${a}-focusVisible`), c.scrollHeight > c.clientHeight && l !== "mouse" && l !== "touch")) {
-      const I = O, B = c.clientHeight + c.scrollTop, Le = I.offsetTop + I.offsetHeight;
-      Le > B ? c.scrollTop = Le - c.clientHeight : I.offsetTop - I.offsetHeight * (oe ? 1.3 : 0) < c.scrollTop && (c.scrollTop = I.offsetTop - I.offsetHeight * (oe ? 1.3 : 0));
+    const I = K.current.querySelector(`[data-option-index="${t}"]`);
+    if (I && (I.classList.add(`${a}-focused`), l === "keyboard" && I.classList.add(`${a}-focusVisible`), c.scrollHeight > c.clientHeight && l !== "mouse" && l !== "touch")) {
+      const C = I, B = c.clientHeight + c.scrollTop, Le = C.offsetTop + C.offsetHeight;
+      Le > B ? c.scrollTop = Le - c.clientHeight : C.offsetTop - C.offsetHeight * (oe ? 1.3 : 0) < c.scrollTop && (c.scrollTop = C.offsetTop - C.offsetHeight * (oe ? 1.3 : 0));
     }
   }), Y = io(({
     event: r,
@@ -203,40 +203,40 @@ function st(e) {
   }) => {
     if (!j)
       return;
-    const O = eo((() => {
-      const I = S.length - 1;
+    const I = eo((() => {
+      const C = w.length - 1;
       if (t === "reset")
         return bo;
       if (t === "start")
         return 0;
       if (t === "end")
-        return I;
+        return C;
       const B = z.current + t;
-      return B < 0 ? B === -1 && de ? -1 : ue && z.current !== -1 || Math.abs(t) > 1 ? 0 : I : B > I ? B === I + 1 && de ? -1 : ue || Math.abs(t) > 1 ? I : 0 : B;
+      return B < 0 ? B === -1 && de ? -1 : ue && z.current !== -1 || Math.abs(t) > 1 ? 0 : C : B > C ? B === C + 1 && de ? -1 : ue || Math.abs(t) > 1 ? C : 0 : B;
     })(), l);
     if (te({
-      index: O,
+      index: I,
       reason: p,
       event: r
     }), i && t !== "reset")
-      if (O === -1)
-        w.current.value = P;
+      if (I === -1)
+        T.current.value = O;
       else {
-        const I = N(S[O]);
-        w.current.value = I, I.toLowerCase().indexOf(P.toLowerCase()) === 0 && P.length > 0 && w.current.setSelectionRange(P.length, I.length);
+        const C = M(w[I]);
+        T.current.value = C, C.toLowerCase().indexOf(O.toLowerCase()) === 0 && O.length > 0 && T.current.setSelectionRange(O.length, C.length);
       }
   }), ho = () => {
     const r = (t, l) => {
-      const p = t ? N(t) : "", c = l ? N(l) : "";
+      const p = t ? M(t) : "", c = l ? M(l) : "";
       return p === c;
     };
-    if (z.current !== -1 && Q.filteredOptions && Q.filteredOptions.length !== S.length && Q.inputValue === P && (C ? s.length === Q.value.length && Q.value.every((t, l) => N(s[l]) === N(t)) : r(Q.value, s))) {
+    if (z.current !== -1 && Q.filteredOptions && Q.filteredOptions.length !== w.length && Q.inputValue === O && ($ ? s.length === Q.value.length && Q.value.every((t, l) => M(s[l]) === M(t)) : r(Q.value, s))) {
       const t = Q.filteredOptions[z.current];
       if (t)
-        return S.findIndex((l) => N(l) === N(t));
+        return w.findIndex((l) => M(l) === M(t));
     }
     return -1;
-  }, Ke = b.useCallback(() => {
+  }, Ke = m.useCallback(() => {
     if (!j)
       return;
     const r = ho();
@@ -244,8 +244,8 @@ function st(e) {
       z.current = r;
       return;
     }
-    const t = C ? s[0] : s;
-    if (S.length === 0 || t == null) {
+    const t = $ ? s[0] : s;
+    if (w.length === 0 || t == null) {
       Y({
         diff: "reset"
       });
@@ -253,10 +253,10 @@ function st(e) {
     }
     if (K.current) {
       if (t != null) {
-        const l = S[z.current];
-        if (C && l && s.findIndex((c) => W(l, c)) !== -1)
+        const l = w[z.current];
+        if ($ && l && s.findIndex((c) => W(l, c)) !== -1)
           return;
-        const p = S.findIndex((c) => W(c, t));
+        const p = w.findIndex((c) => W(c, t));
         p === -1 ? Y({
           diff: "reset"
         }) : te({
@@ -264,9 +264,9 @@ function st(e) {
         });
         return;
       }
-      if (z.current >= S.length - 1) {
+      if (z.current >= w.length - 1) {
         te({
-          index: S.length - 1
+          index: w.length - 1
         });
         return;
       }
@@ -276,24 +276,24 @@ function st(e) {
     }
   }, [
     // Only sync the highlighted index when the option switch between empty and not
-    S.length,
+    w.length,
     // Don't sync the highlighted index with the value when multiple
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    C ? !1 : s,
+    $ ? !1 : s,
     me,
     Y,
     te,
     j,
-    P,
-    C
+    O,
+    $
   ]), yo = io((r) => {
     et(K, r), r && Ke();
   });
-  process.env.NODE_ENV !== "production" && b.useEffect(() => {
-    (!w.current || w.current.nodeName !== "INPUT") && (w.current && w.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 ${w.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(`
+  process.env.NODE_ENV !== "production" && m.useEffect(() => {
+    (!T.current || T.current.nodeName !== "INPUT") && (T.current && T.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 ${T.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(`
 `)));
-  }, [m]), b.useEffect(() => {
+  }, [b]), m.useEffect(() => {
     Ke();
   }, [Ke]);
   const ne = (r) => {
@@ -301,26 +301,26 @@ function st(e) {
   }, re = (r, t) => {
     se && (Qe(!1), _ && _(r, t));
   }, pe = (r, t, l, p) => {
-    if (C) {
-      if (s.length === t.length && s.every((c, O) => c === t[O]))
+    if ($) {
+      if (s.length === t.length && s.every((c, I) => c === t[I]))
         return;
     } else if (s === t)
       return;
     fe && fe(r, t, l, p), Lo(t);
-  }, we = b.useRef(!1), ge = (r, t, l = "selectOption", p = "options") => {
-    let c = l, O = t;
-    if (C) {
-      if (O = Array.isArray(s) ? s.slice() : [], process.env.NODE_ENV !== "production") {
-        const B = O.filter((Le) => W(t, Le));
-        B.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 ${B.length} matches.`].join(`
+  }, we = m.useRef(!1), ge = (r, t, l = "selectOption", p = "options") => {
+    let c = l, I = t;
+    if ($) {
+      if (I = Array.isArray(s) ? s.slice() : [], process.env.NODE_ENV !== "production") {
+        const B = I.filter((Le) => W(t, Le));
+        B.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 ${B.length} matches.`].join(`
 `));
       }
-      const I = O.findIndex((B) => W(t, B));
-      I === -1 ? O.push(t) : p !== "freeSolo" && (O.splice(I, 1), c = "removeOption");
+      const C = I.findIndex((B) => W(t, B));
+      C === -1 ? I.push(t) : p !== "freeSolo" && (I.splice(C, 1), c = "removeOption");
     }
-    Oe(r, O, c), pe(r, O, c, {
+    Oe(r, I, c), pe(r, I, c, {
       option: t
-    }), !X && (!r || !r.ctrlKey && !r.metaKey) && re(r, c), (y === !0 || y === "touch" && we.current || y === "mouse" && !we.current) && w.current.blur();
+    }), !X && (!r || !r.ctrlKey && !r.metaKey) && re(r, c), (y === !0 || y === "touch" && we.current || y === "mouse" && !we.current) && T.current.blur();
   };
   function Te(r, t) {
     if (r === -1)
@@ -337,13 +337,13 @@ function st(e) {
     }
   }
   const Ge = (r, t) => {
-    if (!C)
+    if (!$)
       return;
-    P === "" && re(r, "toggleInput");
+    O === "" && re(r, "toggleInput");
     let l = G;
-    G === -1 ? P === "" && t === "previous" && (l = s.length - 1) : (l += t === "next" ? 1 : -1, l < 0 && (l = 0), l === s.length && (l = -1)), l = Te(l, t), Xe(l), Se(l);
+    G === -1 ? O === "" && t === "previous" && (l = s.length - 1) : (l += t === "next" ? 1 : -1, l < 0 && (l = 0), l === s.length && (l = -1)), l = Te(l, t), Xe(l), Se(l);
   }, oo = (r) => {
-    je.current = !0, Ce(""), q && q(r, "", "clear"), pe(r, C ? [] : null, "clear");
+    je.current = !0, Ce(""), q && q(r, "", "clear"), pe(r, $ ? [] : null, "clear");
   }, ke = (r) => (t) => {
     if (r.onKeyDown && r.onKeyDown(t), !t.defaultMuiPrevented && (G !== -1 && !["ArrowLeft", "ArrowRight"].includes(t.key) && (Xe(-1), Se(-1)), t.which !== 229))
       switch (t.key) {
@@ -365,7 +365,7 @@ function st(e) {
           break;
         case "PageUp":
           t.preventDefault(), Y({
-            diff: -Eo,
+            diff: -zo,
             direction: "previous",
             reason: "keyboard",
             event: t
@@ -373,7 +373,7 @@ function st(e) {
           break;
         case "PageDown":
           t.preventDefault(), Y({
-            diff: Eo,
+            diff: zo,
             direction: "next",
             reason: "keyboard",
             event: t
@@ -403,17 +403,17 @@ function st(e) {
           break;
         case "Enter":
           if (z.current !== -1 && j) {
-            const l = S[z.current], p = H ? H(l) : !1;
+            const l = w[z.current], p = H ? H(l) : !1;
             if (t.preventDefault(), p)
               return;
-            ge(t, l, "selectOption"), i && w.current.setSelectionRange(w.current.value.length, w.current.value.length);
-          } else le && P !== "" && Pe === !1 && (C && t.preventDefault(), ge(t, P, "createOption", "freeSolo"));
+            ge(t, l, "selectOption"), i && T.current.setSelectionRange(T.current.value.length, T.current.value.length);
+          } else le && O !== "" && Pe === !1 && ($ && t.preventDefault(), ge(t, O, "createOption", "freeSolo"));
           break;
         case "Escape":
-          j ? (t.preventDefault(), t.stopPropagation(), re(t, "escape")) : $ && (P !== "" || C && s.length > 0) && (t.preventDefault(), t.stopPropagation(), oo(t));
+          j ? (t.preventDefault(), t.stopPropagation(), re(t, "escape")) : P && (O !== "" || $ && s.length > 0) && (t.preventDefault(), t.stopPropagation(), oo(t));
           break;
         case "Backspace":
-          if (C && !$e && P === "" && s.length > 0) {
+          if ($ && !$e && O === "" && s.length > 0) {
             const l = G === -1 ? s.length - 1 : G, p = s.slice();
             p.splice(l, 1), pe(t, p, "removeOption", {
               option: s[l]
@@ -421,7 +421,7 @@ function st(e) {
           }
           break;
         case "Delete":
-          if (C && !$e && P === "" && s.length > 0 && G !== -1) {
+          if ($ && !$e && O === "" && s.length > 0 && G !== -1) {
             const l = G, p = s.slice();
             p.splice(l, 1), pe(t, p, "removeOption", {
               option: s[l]
@@ -433,13 +433,13 @@ function st(e) {
     He(!0), D && !je.current && ne(r);
   }, to = (r) => {
     if (n(K)) {
-      w.current.focus();
+      T.current.focus();
       return;
     }
-    He(!1), Be.current = !0, je.current = !1, v && z.current !== -1 && j ? ge(r, S[z.current], "blur") : v && le && P !== "" ? ge(r, P, "blur", "freeSolo") : x && Oe(r, s, "blur"), re(r, "blur");
+    He(!1), Be.current = !0, je.current = !1, x && z.current !== -1 && j ? ge(r, w[z.current], "blur") : x && le && O !== "" ? ge(r, O, "blur", "freeSolo") : v && Oe(r, s, "blur"), re(r, "blur");
   }, Re = (r) => {
     const t = r.target.value;
-    P !== t && (Ce(t), mo(!1), q && q(r, t, "input")), t === "" ? !L && !C && pe(r, null, "clear") : ne(r);
+    O !== t && (Ce(t), mo(!1), q && q(r, t, "input")), t === "" ? !L && !$ && pe(r, null, "clear") : ne(r);
   }, _e = (r) => {
     const t = Number(r.currentTarget.getAttribute("data-option-index"));
     z.current !== t && te({
@@ -455,7 +455,7 @@ function st(e) {
     }), we.current = !0;
   }, xo = (r) => {
     const t = Number(r.currentTarget.getAttribute("data-option-index"));
-    ge(r, S[t], "selectOption"), we.current = !1;
+    ge(r, w[t], "selectOption"), we.current = !1;
   }, $o = (r) => (t) => {
     const l = s.slice();
     l.splice(r, 1), pe(t, l, "removeOption", {
@@ -466,22 +466,22 @@ function st(e) {
   }, Ao = (r) => {
     r.currentTarget.contains(r.target) && r.target.getAttribute("id") !== U && r.preventDefault();
   }, Ye = (r) => {
-    r.currentTarget.contains(r.target) && (w.current.focus(), Fe && Be.current && w.current.selectionEnd - w.current.selectionStart === 0 && w.current.select(), Be.current = !1);
-  }, M = (r) => {
-    !A && (P === "" || !se) && (no(r), r.stopPropagation());
+    r.currentTarget.contains(r.target) && (T.current.focus(), Fe && Be.current && T.current.selectionEnd - T.current.selectionStart === 0 && T.current.select(), Be.current = !1);
+  }, N = (r) => {
+    !A && (O === "" || !se) && (no(r), r.stopPropagation());
   };
-  let R = le && P.length > 0;
-  R = R || (C ? s.length > 0 : s !== null);
-  let ae = S;
+  let R = le && O.length > 0;
+  R = R || ($ ? s.length > 0 : s !== null);
+  let ae = w;
   if (oe) {
     const r = /* @__PURE__ */ new Map();
     let t = !1;
-    ae = S.reduce((l, p, c) => {
-      const O = oe(p);
-      return l.length > 0 && l[l.length - 1].group === O ? l[l.length - 1].options.push(p) : (process.env.NODE_ENV !== "production" && (r.get(O) && !t && (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`."), t = !0), r.set(O, !0)), l.push({
+    ae = w.reduce((l, p, c) => {
+      const I = oe(p);
+      return l.length > 0 && l[l.length - 1].group === I ? l[l.length - 1].options.push(p) : (process.env.NODE_ENV !== "production" && (r.get(I) && !t && (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`."), t = !0), r.set(I, !0)), l.push({
         key: c,
         index: c,
-        group: O,
+        group: I,
         options: [p]
       })), l;
     }, []);
@@ -500,11 +500,11 @@ function st(e) {
     }),
     getInputProps: () => ({
       id: U,
-      value: P,
+      value: O,
       onBlur: to,
       onFocus: vo,
       onChange: Re,
-      onMouseDown: M,
+      onMouseDown: N,
       // if open then this is handled imperatively so don't let react override
       // only have an opinion about this when closed
       "aria-activedescendant": j ? "" : null,
@@ -514,7 +514,7 @@ function st(e) {
       // Disable browser's suggestion that might overlap with the popup.
       // Handle autocomplete but not autofill.
       autoComplete: "off",
-      ref: w,
+      ref: T,
       autoCapitalize: "none",
       spellCheck: "false",
       role: "combobox",
@@ -554,9 +554,9 @@ function st(e) {
       index: r,
       option: t
     }) => {
-      const l = (C ? s : [s]).some((c) => c != null && W(t, c)), p = H ? H(t) : !1;
+      const l = ($ ? s : [s]).some((c) => c != null && W(t, c)), p = H ? H(t) : !1;
       return {
-        key: (he == null ? void 0 : he(t)) ?? N(t),
+        key: (he == null ? void 0 : he(t)) ?? M(t),
         tabIndex: -1,
         role: "option",
         id: `${U}-option-${r}`,
@@ -569,7 +569,7 @@ function st(e) {
       };
     },
     id: U,
-    inputValue: P,
+    inputValue: O,
     value: s,
     dirty: R,
     expanded: j && Ue,
@@ -591,9 +591,9 @@ const ct = (e) => {
     color: a,
     disableGutters: i,
     inset: g,
-    disableSticky: v
+    disableSticky: x
   } = e, y = {
-    root: ["root", a !== "default" && `color${d(a)}`, !i && "gutters", g && "inset", !v && "sticky"]
+    root: ["root", a !== "default" && `color${d(a)}`, !i && "gutters", g && "inset", !x && "sticky"]
   };
   return fo(y, pt, n);
 }, ut = F("li", {
@@ -655,32 +655,32 @@ const ct = (e) => {
       backgroundColor: (e.vars || e).palette.background.paper
     }
   }]
-}))), so = /* @__PURE__ */ b.forwardRef(function(n, a) {
+}))), so = /* @__PURE__ */ m.forwardRef(function(n, a) {
   const i = uo({
     props: n,
     name: "MuiListSubheader"
   }), {
     className: g,
-    color: v = "default",
+    color: x = "default",
     component: y = "li",
-    disableGutters: x = !1,
-    disableSticky: $ = !1,
-    inset: m = !1,
-    ...k
+    disableGutters: v = !1,
+    disableSticky: P = !1,
+    inset: b = !1,
+    ...S
   } = i, L = {
     ...i,
-    color: v,
+    color: x,
     component: y,
-    disableGutters: x,
-    disableSticky: $,
-    inset: m
+    disableGutters: v,
+    disableSticky: P,
+    inset: b
   }, X = ct(L);
-  return /* @__PURE__ */ T(ut, {
+  return /* @__PURE__ */ k(ut, {
     as: y,
     className: J(X.root, g),
     ref: a,
     ownerState: L,
-    ...k
+    ...S
   });
 });
 so && (so.muiSkipListHighlight = !0);
@@ -740,9 +740,9 @@ const ft = co("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimar
     disabled: a,
     color: i,
     edge: g,
-    size: v
+    size: x
   } = e, y = {
-    root: ["root", a && "disabled", i !== "default" && `color${d(i)}`, g && `edge${d(g)}`, `size${d(v)}`]
+    root: ["root", a && "disabled", i !== "default" && `color${d(i)}`, g && `edge${d(g)}`, `size${d(x)}`]
   };
   return fo(y, dt, n);
 }, bt = F(So, {
@@ -862,39 +862,39 @@ const ft = co("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimar
     backgroundColor: "transparent",
     color: (e.vars || e).palette.action.disabled
   }
-}))), To = /* @__PURE__ */ b.forwardRef(function(n, a) {
+}))), To = /* @__PURE__ */ m.forwardRef(function(n, a) {
   const i = uo({
     props: n,
     name: "MuiIconButton"
   }), {
     edge: g = !1,
-    children: v,
+    children: x,
     className: y,
-    color: x = "default",
-    disabled: $ = !1,
-    disableFocusRipple: m = !1,
-    disableRipple: k = !1,
+    color: v = "default",
+    disabled: P = !1,
+    disableFocusRipple: b = !1,
+    disableRipple: S = !1,
     size: L = "medium",
     ...X
   } = i, A = {
     ...i,
     edge: g,
-    color: x,
-    disabled: $,
-    disableFocusRipple: m,
-    disableRipple: k,
+    color: v,
+    disabled: P,
+    disableFocusRipple: b,
+    disableRipple: S,
     size: L
   }, E = gt(A);
-  return /* @__PURE__ */ T(bt, {
+  return /* @__PURE__ */ k(bt, {
     className: J(E.root, y),
     centerRipple: !0,
-    focusRipple: !m,
-    disabled: $,
-    disableRipple: k,
+    focusRipple: !b,
+    disabled: P,
+    disableRipple: S,
     ref: a,
     ...X,
     ownerState: A,
-    children: v
+    children: x
   });
 });
 process.env.NODE_ENV !== "production" && (To.propTypes = {
@@ -905,7 +905,7 @@ process.env.NODE_ENV !== "production" && (To.propTypes = {
   /**
    * The icon to display.
    */
-  children: wo(o.node, (e) => b.Children.toArray(e.children).some((a) => /* @__PURE__ */ b.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
+  children: wo(o.node, (e) => m.Children.toArray(e.children).some((a) => /* @__PURE__ */ m.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
 `)) : null),
   /**
    * Override or extend the styles applied to the component.
@@ -959,7 +959,7 @@ process.env.NODE_ENV !== "production" && (To.propTypes = {
    */
   sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
 });
-const mt = Uo(/* @__PURE__ */ T("path", {
+const mt = Ho(/* @__PURE__ */ k("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
 }), "Cancel");
 function ht(e) {
@@ -971,18 +971,18 @@ const f = co("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "col
     disabled: a,
     size: i,
     color: g,
-    iconColor: v,
+    iconColor: x,
     onDelete: y,
-    clickable: x,
-    variant: $
-  } = e, m = {
-    root: ["root", $, a && "disabled", `size${d(i)}`, `color${d(g)}`, x && "clickable", x && `clickableColor${d(g)}`, y && "deletable", y && `deletableColor${d(g)}`, `${$}${d(g)}`],
+    clickable: v,
+    variant: P
+  } = e, b = {
+    root: ["root", P, a && "disabled", `size${d(i)}`, `color${d(g)}`, v && "clickable", v && `clickableColor${d(g)}`, y && "deletable", y && `deletableColor${d(g)}`, `${P}${d(g)}`],
     label: ["label", `label${d(i)}`],
     avatar: ["avatar", `avatar${d(i)}`, `avatarColor${d(g)}`],
-    icon: ["icon", `icon${d(i)}`, `iconColor${d(v)}`],
-    deleteIcon: ["deleteIcon", `deleteIcon${d(i)}`, `deleteIconColor${d(g)}`, `deleteIcon${d($)}Color${d(g)}`]
+    icon: ["icon", `icon${d(i)}`, `iconColor${d(x)}`],
+    deleteIcon: ["deleteIcon", `deleteIcon${d(i)}`, `deleteIconColor${d(g)}`, `deleteIcon${d(P)}Color${d(g)}`]
   };
-  return fo(m, ht, n);
+  return fo(b, ht, n);
 }, vt = F("div", {
   name: "MuiChip",
   slot: "Root",
@@ -992,32 +992,32 @@ const f = co("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "col
     } = e, {
       color: i,
       iconColor: g,
-      clickable: v,
+      clickable: x,
       onDelete: y,
-      size: x,
-      variant: $
+      size: v,
+      variant: P
     } = a;
     return [{
       [`& .${f.avatar}`]: n.avatar
     }, {
-      [`& .${f.avatar}`]: n[`avatar${d(x)}`]
+      [`& .${f.avatar}`]: n[`avatar${d(v)}`]
     }, {
       [`& .${f.avatar}`]: n[`avatarColor${d(i)}`]
     }, {
       [`& .${f.icon}`]: n.icon
     }, {
-      [`& .${f.icon}`]: n[`icon${d(x)}`]
+      [`& .${f.icon}`]: n[`icon${d(v)}`]
     }, {
       [`& .${f.icon}`]: n[`iconColor${d(g)}`]
     }, {
       [`& .${f.deleteIcon}`]: n.deleteIcon
     }, {
-      [`& .${f.deleteIcon}`]: n[`deleteIcon${d(x)}`]
+      [`& .${f.deleteIcon}`]: n[`deleteIcon${d(v)}`]
     }, {
       [`& .${f.deleteIcon}`]: n[`deleteIconColor${d(i)}`]
     }, {
-      [`& .${f.deleteIcon}`]: n[`deleteIcon${d($)}Color${d(i)}`]
-    }, n.root, n[`size${d(x)}`], n[`color${d(i)}`], v && n.clickable, v && i !== "default" && n[`clickableColor${d(i)})`], y && n.deletable, y && i !== "default" && n[`deletableColor${d(i)}`], n[$], n[`${$}${d(i)}`]];
+      [`& .${f.deleteIcon}`]: n[`deleteIcon${d(P)}Color${d(i)}`]
+    }, n.root, n[`size${d(v)}`], n[`color${d(i)}`], x && n.clickable, x && i !== "default" && n[`clickableColor${d(i)})`], y && n.deletable, y && i !== "default" && n[`deletableColor${d(i)}`], n[P], n[`${P}${d(i)}`]];
   }
 })(ee(({
   theme: e
@@ -1279,91 +1279,91 @@ const f = co("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "col
     }
   }]
 });
-function zo(e) {
+function Vo(e) {
   return e.key === "Backspace" || e.key === "Delete";
 }
-const Wo = /* @__PURE__ */ b.forwardRef(function(n, a) {
+const Ko = /* @__PURE__ */ m.forwardRef(function(n, a) {
   const i = uo({
     props: n,
     name: "MuiChip"
   }), {
     avatar: g,
-    className: v,
+    className: x,
     clickable: y,
-    color: x = "default",
-    component: $,
-    deleteIcon: m,
-    disabled: k = !1,
+    color: v = "default",
+    component: P,
+    deleteIcon: b,
+    disabled: S = !1,
     icon: L,
     label: X,
     onClick: A,
     onDelete: E,
     onKeyDown: ue,
-    onKeyUp: Me,
+    onKeyUp: Ne,
     size: me = "medium",
     variant: le = "filled",
     tabIndex: H,
     skipFocusWhenDisabled: he = !1,
     // TODO v6: Rename to `focusableWhenDisabled`.
     ...Ee
-  } = i, oe = b.useRef(null), ze = ot(oe, a), Ve = (D) => {
+  } = i, oe = m.useRef(null), ze = ot(oe, a), Ve = (D) => {
     D.stopPropagation(), E && E(D);
   }, de = (D) => {
-    D.currentTarget === D.target && zo(D) && D.preventDefault(), ue && ue(D);
+    D.currentTarget === D.target && Vo(D) && D.preventDefault(), ue && ue(D);
   }, ye = (D) => {
-    D.currentTarget === D.target && E && zo(D) && E(D), Me && Me(D);
-  }, W = y !== !1 && A ? !0 : y, C = W || E ? So : $ || "div", fe = {
+    D.currentTarget === D.target && E && Vo(D) && E(D), Ne && Ne(D);
+  }, W = y !== !1 && A ? !0 : y, $ = W || E ? So : P || "div", fe = {
     ...i,
-    component: C,
-    disabled: k,
+    component: $,
+    disabled: S,
     size: me,
-    color: x,
-    iconColor: /* @__PURE__ */ b.isValidElement(L) && L.props.color || x,
+    color: v,
+    iconColor: /* @__PURE__ */ m.isValidElement(L) && L.props.color || v,
     onDelete: !!E,
     clickable: W,
     variant: le
-  }, _ = yt(fe), ve = C === So ? {
-    component: $ || "div",
+  }, _ = yt(fe), ve = $ === So ? {
+    component: P || "div",
     focusVisibleClassName: _.focusVisible,
     ...E && {
       disableRipple: !0
     }
   } : {};
   let q = null;
-  E && (q = m && /* @__PURE__ */ b.isValidElement(m) ? /* @__PURE__ */ b.cloneElement(m, {
-    className: J(m.props.className, _.deleteIcon),
+  E && (q = b && /* @__PURE__ */ m.isValidElement(b) ? /* @__PURE__ */ m.cloneElement(b, {
+    className: J(b.props.className, _.deleteIcon),
     onClick: Ve
-  }) : /* @__PURE__ */ T(mt, {
+  }) : /* @__PURE__ */ k(mt, {
     className: J(_.deleteIcon),
     onClick: Ve
   }));
   let ie = null;
-  g && /* @__PURE__ */ b.isValidElement(g) && (ie = /* @__PURE__ */ b.cloneElement(g, {
+  g && /* @__PURE__ */ m.isValidElement(g) && (ie = /* @__PURE__ */ m.cloneElement(g, {
     className: J(_.avatar, g.props.className)
   }));
   let xe = null;
-  return L && /* @__PURE__ */ b.isValidElement(L) && (xe = /* @__PURE__ */ b.cloneElement(L, {
+  return L && /* @__PURE__ */ m.isValidElement(L) && (xe = /* @__PURE__ */ m.cloneElement(L, {
     className: J(_.icon, L.props.className)
-  })), process.env.NODE_ENV !== "production" && ie && xe && console.error("MUI: The Chip component can not handle the avatar and the icon prop at the same time. Pick one."), /* @__PURE__ */ Ne(vt, {
-    as: C,
-    className: J(_.root, v),
-    disabled: W && k ? !0 : void 0,
+  })), process.env.NODE_ENV !== "production" && ie && xe && console.error("MUI: The Chip component can not handle the avatar and the icon prop at the same time. Pick one."), /* @__PURE__ */ Me(vt, {
+    as: $,
+    className: J(_.root, x),
+    disabled: W && S ? !0 : void 0,
     onClick: A,
     onKeyDown: de,
     onKeyUp: ye,
     ref: ze,
-    tabIndex: he && k ? -1 : H,
+    tabIndex: he && S ? -1 : H,
     ownerState: fe,
     ...ve,
     ...Ee,
-    children: [ie || xe, /* @__PURE__ */ T(xt, {
+    children: [ie || xe, /* @__PURE__ */ k(xt, {
       className: J(_.label),
       ownerState: fe,
       children: X
     }), q]
   });
 });
-process.env.NODE_ENV !== "production" && (Wo.propTypes = {
+process.env.NODE_ENV !== "production" && (Ko.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -1465,34 +1465,34 @@ process.env.NODE_ENV !== "production" && (Wo.propTypes = {
    */
   variant: o.oneOfType([o.oneOf(["filled", "outlined"]), o.string])
 });
-const $t = Uo(/* @__PURE__ */ T("path", {
+const $t = Ho(/* @__PURE__ */ k("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), "Close");
 function Ct(e) {
   return po("MuiAutocomplete", e);
 }
 const u = co("MuiAutocomplete", ["root", "expanded", "fullWidth", "focused", "focusVisible", "tag", "tagSizeSmall", "tagSizeMedium", "hasPopupIcon", "hasClearIcon", "inputRoot", "input", "inputFocused", "endAdornment", "clearIndicator", "popupIndicator", "popupIndicatorOpen", "popper", "popperDisablePortal", "paper", "listbox", "loading", "noOptions", "option", "groupLabel", "groupUl"]);
-var Vo, Fo;
+var Fo, jo;
 const It = (e) => {
   const {
     classes: n,
     disablePortal: a,
     expanded: i,
     focused: g,
-    fullWidth: v,
+    fullWidth: x,
     hasClearIcon: y,
-    hasPopupIcon: x,
-    inputFocused: $,
-    popupOpen: m,
-    size: k
+    hasPopupIcon: v,
+    inputFocused: P,
+    popupOpen: b,
+    size: S
   } = e, L = {
-    root: ["root", i && "expanded", g && "focused", v && "fullWidth", y && "hasClearIcon", x && "hasPopupIcon"],
+    root: ["root", i && "expanded", g && "focused", x && "fullWidth", y && "hasClearIcon", v && "hasPopupIcon"],
     inputRoot: ["inputRoot"],
-    input: ["input", $ && "inputFocused"],
-    tag: ["tag", `tagSize${d(k)}`],
+    input: ["input", P && "inputFocused"],
+    tag: ["tag", `tagSize${d(S)}`],
     endAdornment: ["endAdornment"],
     clearIndicator: ["clearIndicator"],
-    popupIndicator: ["popupIndicator", m && "popupIndicatorOpen"],
+    popupIndicator: ["popupIndicator", b && "popupIndicatorOpen"],
     popper: ["popper", a && "popperDisablePortal"],
     paper: ["paper"],
     listbox: ["listbox"],
@@ -1512,21 +1512,21 @@ const It = (e) => {
     } = e, {
       fullWidth: i,
       hasClearIcon: g,
-      hasPopupIcon: v,
+      hasPopupIcon: x,
       inputFocused: y,
-      size: x
+      size: v
     } = a;
     return [{
       [`& .${u.tag}`]: n.tag
     }, {
-      [`& .${u.tag}`]: n[`tagSize${d(x)}`]
+      [`& .${u.tag}`]: n[`tagSize${d(v)}`]
     }, {
       [`& .${u.inputRoot}`]: n.inputRoot
     }, {
       [`& .${u.input}`]: n.input
     }, {
       [`& .${u.input}`]: y && n.inputFocused
-    }, n.root, i && n.fullWidth, v && n.hasPopupIcon, g && n.hasClearIcon];
+    }, n.root, i && n.fullWidth, x && n.hasPopupIcon, g && n.hasClearIcon];
   }
 })({
   [`&.${u.focused} .${u.clearIndicator}`]: {
@@ -1708,7 +1708,7 @@ const It = (e) => {
       transform: "rotate(180deg)"
     }
   }]
-}), Tt = F(Ho, {
+}), Tt = F(Wo, {
   name: "MuiAutocomplete",
   slot: "Popper",
   overridesResolver: (e, n) => {
@@ -1731,7 +1731,7 @@ const It = (e) => {
       position: "absolute"
     }
   }]
-}))), kt = F(Bo, {
+}))), kt = F(Uo, {
   name: "MuiAutocomplete",
   slot: "Paper",
   overridesResolver: (e, n) => n.paper
@@ -1825,7 +1825,7 @@ const It = (e) => {
 }) => ({
   backgroundColor: (e.vars || e).palette.background.paper,
   top: -8
-}))), Nt = F("ul", {
+}))), Mt = F("ul", {
   name: "MuiAutocomplete",
   slot: "GroupUl",
   overridesResolver: (e, n) => n.groupUl
@@ -1834,18 +1834,18 @@ const It = (e) => {
   [`& .${u.option}`]: {
     paddingLeft: 24
   }
-}), Ko = /* @__PURE__ */ b.forwardRef(function(n, a) {
+}), Go = /* @__PURE__ */ m.forwardRef(function(n, a) {
   const i = uo({
     props: n,
     name: "MuiAutocomplete"
   }), {
     autoComplete: g = !1,
-    autoHighlight: v = !1,
+    autoHighlight: x = !1,
     autoSelect: y = !1,
-    blurOnSelect: x = !1,
-    ChipProps: $,
-    className: m,
-    clearIcon: k = Vo || (Vo = /* @__PURE__ */ T($t, {
+    blurOnSelect: v = !1,
+    ChipProps: P,
+    className: b,
+    clearIcon: S = Fo || (Fo = /* @__PURE__ */ k($t, {
       fontSize: "small"
     })),
     clearOnBlur: L = !i.freeSolo,
@@ -1853,7 +1853,7 @@ const It = (e) => {
     clearText: A = "Clear",
     closeText: E = "Close",
     componentsProps: ue,
-    defaultValue: Me = i.multiple ? [] : null,
+    defaultValue: Ne = i.multiple ? [] : null,
     disableClearable: me = !1,
     disableCloseOnSelect: le = !1,
     disabled: H = !1,
@@ -1865,7 +1865,7 @@ const It = (e) => {
     forcePopupIcon: de = "auto",
     freeSolo: ye = !1,
     fullWidth: W = !1,
-    getLimitTagsText: C = (h) => `+${h}`,
+    getLimitTagsText: $ = (h) => `+${h}`,
     getOptionDisabled: fe,
     getOptionKey: _,
     getOptionLabel: ve,
@@ -1878,10 +1878,10 @@ const It = (e) => {
     limitTags: Fe = -1,
     ListboxComponent: go,
     ListboxProps: U,
-    loading: N = !1,
+    loading: M = !1,
     loadingText: je = "Loading…",
     multiple: Be = !1,
-    noOptionsText: w = "No options",
+    noOptionsText: T = "No options",
     onChange: K,
     onClose: Ue,
     onHighlightChange: Ro,
@@ -1891,9 +1891,9 @@ const It = (e) => {
     openOnFocus: z = !1,
     openText: s = "Open",
     options: Lo,
-    PaperComponent: P,
+    PaperComponent: O,
     PopperComponent: Ce,
-    popupIcon: Ie = Fo || (Fo = /* @__PURE__ */ T(Jo, {})),
+    popupIcon: Ie = jo || (jo = /* @__PURE__ */ k(Jo, {})),
     readOnly: He = !1,
     renderGroup: Oe,
     renderInput: se,
@@ -1902,7 +1902,7 @@ const It = (e) => {
     selectOnFocus: mo = !i.freeSolo,
     size: Pe = "medium",
     slots: j = {},
-    slotProps: S = {},
+    slotProps: w = {},
     value: Q,
     ...We
   } = i, {
@@ -1933,7 +1933,7 @@ const It = (e) => {
   } = eo(), {
     ref: $o,
     ...no
-  } = yo(), Ye = ve || ((h) => h.label ?? h), M = {
+  } = yo(), Ye = ve || ((h) => h.label ?? h), N = {
     ...i,
     disablePortal: oe,
     expanded: we,
@@ -1945,35 +1945,35 @@ const It = (e) => {
     inputFocused: oo === -1,
     popupOpen: Te,
     size: Pe
-  }, R = It(M), ae = {
+  }, R = It(N), ae = {
     slots: {
       listbox: go,
-      paper: P,
+      paper: O,
       popper: Ce,
       ...j
     },
     slotProps: {
-      chip: $,
+      chip: P,
       listbox: U,
       ...ue,
-      ...S
+      ...w
     }
   }, [r, t] = Oo("listbox", {
     elementType: "ul",
     externalForwardedProps: ae,
-    ownerState: M,
+    ownerState: N,
     className: R.listbox,
     additionalProps: no,
     ref: $o
   }), [l, p] = Oo("paper", {
-    elementType: Bo,
+    elementType: Uo,
     externalForwardedProps: ae,
-    ownerState: M,
+    ownerState: N,
     className: R.paper
-  }), [c, O] = Oo("popper", {
-    elementType: Ho,
+  }), [c, I] = Oo("popper", {
+    elementType: Wo,
     externalForwardedProps: ae,
-    ownerState: M,
+    ownerState: N,
     className: R.popper,
     additionalProps: {
       disablePortal: oe,
@@ -1985,52 +1985,52 @@ const It = (e) => {
       open: Te
     }
   });
-  let I;
+  let C;
   if (Be && re.length > 0) {
     const h = (Z) => ({
       className: R.tag,
       disabled: H,
       ...Ke(Z)
     });
-    Ze ? I = Ze(re, h, M) : I = re.map((Z, ce) => {
+    Ze ? C = Ze(re, h, N) : C = re.map((Z, ce) => {
       const {
         key: Je,
-        ..._o
+        ...qo
       } = h({
         index: ce
       });
-      return /* @__PURE__ */ T(Wo, {
+      return /* @__PURE__ */ k(Ko, {
         label: Ye(Z),
         size: Pe,
-        ..._o,
+        ...qo,
         ...ae.slotProps.chip
       }, Je);
     });
   }
-  if (Fe > -1 && Array.isArray(I)) {
-    const h = I.length - Fe;
-    !Ge && h > 0 && (I = I.splice(0, Fe), I.push(/* @__PURE__ */ T("span", {
+  if (Fe > -1 && Array.isArray(C)) {
+    const h = C.length - Fe;
+    !Ge && h > 0 && (C = C.splice(0, Fe), C.push(/* @__PURE__ */ k("span", {
       className: R.tag,
-      children: C(h)
-    }, I.length)));
+      children: $(h)
+    }, C.length)));
   }
-  const Le = Oe || ((h) => /* @__PURE__ */ Ne("li", {
-    children: [/* @__PURE__ */ T(Dt, {
+  const Le = Oe || ((h) => /* @__PURE__ */ Me("li", {
+    children: [/* @__PURE__ */ k(Dt, {
       className: R.groupLabel,
-      ownerState: M,
+      ownerState: N,
       component: "div",
       children: h.group
-    }), /* @__PURE__ */ T(Nt, {
+    }), /* @__PURE__ */ k(Mt, {
       className: R.groupUl,
-      ownerState: M,
+      ownerState: N,
       children: h.children
     })]
-  }, h.key)), Go = Qe || ((h, Z) => {
+  }, h.key)), _o = Qe || ((h, Z) => {
     const {
       key: ce,
       ...Je
     } = h;
-    return /* @__PURE__ */ T("li", {
+    return /* @__PURE__ */ k("li", {
       ...Je,
       children: Ye(Z)
     }, ce);
@@ -2039,25 +2039,25 @@ const It = (e) => {
       option: h,
       index: Z
     });
-    return Go({
+    return _o({
       ...ce,
       className: R.option
     }, h, {
       selected: ce["aria-selected"],
       index: Z,
       inputValue: to
-    }, M);
-  }, ro = ae.slotProps.clearIndicator, ao = ae.slotProps.popupIndicator, Co = (h) => /* @__PURE__ */ T(Tt, {
+    }, N);
+  }, ro = ae.slotProps.clearIndicator, ao = ae.slotProps.popupIndicator, Co = (h) => /* @__PURE__ */ k(Tt, {
     as: c,
-    ...O,
-    children: /* @__PURE__ */ T(kt, {
+    ...I,
+    children: /* @__PURE__ */ k(kt, {
       as: l,
       ...p,
       children: h
     })
   });
   let lo = null;
-  return Re.length > 0 ? lo = Co(/* @__PURE__ */ T(At, {
+  return Re.length > 0 ? lo = Co(/* @__PURE__ */ k(At, {
     as: r,
     ...t,
     children: Re.map((h, Z) => ie ? Le({
@@ -2065,23 +2065,23 @@ const It = (e) => {
       group: h.group,
       children: h.options.map((ce, Je) => Do(ce, h.index + Je))
     }) : Do(h, Z))
-  })) : N && Re.length === 0 ? lo = Co(/* @__PURE__ */ T(Rt, {
+  })) : M && Re.length === 0 ? lo = Co(/* @__PURE__ */ k(Rt, {
     className: R.loading,
-    ownerState: M,
+    ownerState: N,
     children: je
-  })) : Re.length === 0 && !ye && !N && (lo = Co(/* @__PURE__ */ T(Lt, {
+  })) : Re.length === 0 && !ye && !M && (lo = Co(/* @__PURE__ */ k(Lt, {
     className: R.noOptions,
-    ownerState: M,
+    ownerState: N,
     role: "presentation",
     onMouseDown: (h) => {
       h.preventDefault();
     },
-    children: w
-  }))), /* @__PURE__ */ Ne(b.Fragment, {
-    children: [/* @__PURE__ */ T(Ot, {
+    children: T
+  }))), /* @__PURE__ */ Me(m.Fragment, {
+    children: [/* @__PURE__ */ k(Ot, {
       ref: a,
-      className: J(R.root, m),
-      ownerState: M,
+      className: J(R.root, b),
+      ownerState: N,
       ...Se(We),
       children: se({
         id: ge,
@@ -2092,26 +2092,26 @@ const It = (e) => {
         InputProps: {
           ref: vo,
           className: R.inputRoot,
-          startAdornment: I,
+          startAdornment: C,
           onMouseDown: (h) => xo(h),
           ...(_e || qe) && {
-            endAdornment: /* @__PURE__ */ Ne(Pt, {
+            endAdornment: /* @__PURE__ */ Me(Pt, {
               className: R.endAdornment,
-              ownerState: M,
-              children: [_e ? /* @__PURE__ */ T(St, {
+              ownerState: N,
+              children: [_e ? /* @__PURE__ */ k(St, {
                 ...ho(),
                 "aria-label": A,
                 title: A,
-                ownerState: M,
+                ownerState: N,
                 ...ro,
                 className: J(R.clearIndicator, ro == null ? void 0 : ro.className),
-                children: k
-              }) : null, qe ? /* @__PURE__ */ T(wt, {
+                children: S
+              }) : null, qe ? /* @__PURE__ */ k(wt, {
                 ...Y(),
                 disabled: H,
                 "aria-label": Te ? E : s,
                 title: Te ? E : s,
-                ownerState: M,
+                ownerState: N,
                 ...ao,
                 className: J(R.popupIndicator, ao == null ? void 0 : ao.className),
                 children: Ie
@@ -2129,7 +2129,7 @@ const It = (e) => {
     }), ke ? lo : null]
   });
 });
-process.env.NODE_ENV !== "production" && (Ko.propTypes = {
+process.env.NODE_ENV !== "production" && (Go.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -2559,8 +2559,8 @@ process.env.NODE_ENV !== "production" && (Ko.propTypes = {
   value: wo(o.any, (e) => e.multiple && e.value !== void 0 && !Array.isArray(e.value) ? new Error(["MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.", `However, ${e.value} was provided.`].join(`
 `)) : null)
 });
-const Mt = ["colon"], Et = qo("div", { shouldForwardProp: (e) => !Mt.includes(e) })(({ borderFocusColor: e, minWidth: n = "180px" }) => ({
-  ...Yo`
+const Nt = ["colon"], Et = Yo("div", { shouldForwardProp: (e) => !Nt.includes(e) })(({ borderFocusColor: e, minWidth: n = "180px", multiple: a }) => ({
+  ...Mo`
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -2592,6 +2592,11 @@ const Mt = ["colon"], Et = qo("div", { shouldForwardProp: (e) => !Mt.includes(e)
       height: 18px;
       padding: 0 !important;
 
+      ${a && Mo`
+        display: flex;
+        align-items: start;
+      `};
+
       input {
         padding: 0 !important;
         width: 100%;
@@ -2599,7 +2604,7 @@ const Mt = ["colon"], Et = qo("div", { shouldForwardProp: (e) => !Mt.includes(e)
 
       transition: 313ms all ease-out;
       border-radius: 0;
-      border-bottom: 1px solid ${jo.colors.gray};
+      border-bottom: 1px solid ${Bo.colors.gray};
       width: 100%;
 
       .Mui-select {
@@ -2611,6 +2616,24 @@ const Mt = ["colon"], Et = qo("div", { shouldForwardProp: (e) => !Mt.includes(e)
       &.Mui-focused {
         box-shadow: 0 -5px 4px -4px ${e} inset;
       }
+
+      .MuiButtonBase-root {
+        max-height: calc(100% - 0px);
+        padding: 0 2px;
+        margin: 0;
+      }
+
+      .MuiChip-label {
+        font-size: 13px;
+        padding: 0 6px;
+      }
+
+      .MuiSvgIcon-root {
+        margin: 0;
+        font-size: 13px;
+        height: 13px;
+        width: 13px;
+      }
     }
 
     .MuiAutocomplete-endAdornment {
@@ -2642,29 +2665,40 @@ const Mt = ["colon"], Et = qo("div", { shouldForwardProp: (e) => !Mt.includes(e)
   colon: n = !0,
   options: a = [],
   noLabel: i = !1,
-  borderFocusColor: g = jo.colors.green,
+  borderFocusColor: g = Bo.colors.green,
   // border primary
-  onChange: v,
+  onChange: x,
   minWidth: y,
-  ...x
-}) => /* @__PURE__ */ Ne(Et, { className: "jcLabeledDropdown", borderFocusColor: g, minWidth: y, children: [
-  !i && /* @__PURE__ */ Ne("span", { className: "jcDropdownLabel", children: [
-    e,
-    n && ":"
-  ] }),
-  /* @__PURE__ */ T(
-    Ko,
-    {
-      options: a,
-      onChange: ($, m) => (
-        // @ts-ignore
-        v && v({ ...$, target: { ...$.target, value: `${m == null ? void 0 : m.value}` || "" } })
-      ),
-      ...x,
-      renderInput: ($) => /* @__PURE__ */ T(Xo, { ...$ })
-    }
-  )
-] });
+  multiple: v,
+  ...P
+}) => /* @__PURE__ */ Me(
+  Et,
+  {
+    className: "jcLabeledDropdown",
+    borderFocusColor: g,
+    minWidth: y,
+    multiple: v,
+    children: [
+      !i && /* @__PURE__ */ Me("span", { className: "jcDropdownLabel", children: [
+        e,
+        n && ":"
+      ] }),
+      /* @__PURE__ */ k(
+        Go,
+        {
+          multiple: v,
+          options: a,
+          onChange: (b, S) => (
+            // @ts-ignore
+            x && x({ ...b, target: { ...b.target, value: `${S == null ? void 0 : S.value}` || "" } })
+          ),
+          ...P,
+          renderInput: (b) => /* @__PURE__ */ k(Xo, { ...b })
+        }
+      )
+    ]
+  }
+);
 export {
   en as LabeledDropdown,
   en as default