@new-black/lyra 1.1.6 → 1.2.0-next.2

package/dist/lyra37.js

@@ -1,15 +1,15 @@
 import { j as r } from "./lyra94.js";
-import { useContext as nr, useRef as B, useState as z, useCallback as E, useMemo as sr, useEffect as X, useId as Nr } from "react";
-import { Provider as ar, ButtonContext as mr, Button as tr, Group as vr, Input as wr } from "./lyra93.js";
-import { flushSync as pr } from "react-dom";
-import { useVirtualizer as br } from "./lyra544.js";
-import { clsx as yr } from "./lyra117.js";
+import { useContext as nr, useRef as W, useState as Z, useCallback as U, useMemo as or, useEffect as g, useId as yr } from "react";
+import { RadioGroup as jr, Provider as cr, TextContext as ir, Radio as hr, CheckboxGroup as dr, Checkbox as br, ButtonContext as Nr, Button as lr, Group as Dr, Input as Br } from "./lyra93.js";
+import { flushSync as ur } from "react-dom";
+import { useVirtualizer as Tr } from "./lyra541.js";
+import { clsx as Ar } from "./lyra105.js";
 /* empty css      */
 import "./lyra3.js";
 import "./lyra4.js";
 import "./lyra5.js";
 import "./lyra6.js";
-import { SvgIcon as or } from "./lyra67.js";
+import { SvgIcon as tr } from "./lyra67.js";
 import "./lyra8.js";
 import "./lyra9.js";
 import "./lyra10.js";
@@ -28,36 +28,36 @@ import "./lyra22.js";
 import "./lyra23.js";
 import "./lyra24.js";
 import "./lyra25.js";
-import { FieldGroupContext as cr } from "./lyra26.js";
+import { FieldGroupContext as er } from "./lyra26.js";
 import "./lyra27.js";
 import "./lyra28.js";
 import "./lyra29.js";
-import { useDictionary as xr } from "./lyra99.js";
+import { useDictionary as vr } from "./lyra99.js";
 import "./lyra82.js";
-import "./lyra105.js";
-import { InputHeader as fr } from "./lyra38.js";
-import { InputFooter as dr } from "./lyra39.js";
-import { sharedInputStyles as q } from "./lyra40.js";
+import "./lyra112.js";
+import { InputHeader as Sr } from "./lyra38.js";
+import { InputFooter as $r } from "./lyra39.js";
+import { sharedInputStyles as C } from "./lyra40.js";
 import "./lyra44.js";
 import "./lyra31.js";
 import "./lyra32.js";
 import "./lyra33.js";
 import "./lyra34.js";
 import "./lyra35.js";
-import Sr from "./lyra475.js";
-import { sharedListItemStyles as Fr } from "./lyra106.js";
-import { SharedListItem as kr } from "./lyra107.js";
-import { Popover as Or } from "./lyra54.js";
+import Or from "./lyra475.js";
+import { sharedListItemStyles as Pr } from "./lyra108.js";
+import { SharedListItem as mr } from "./lyra109.js";
+import { Popover as Er } from "./lyra54.js";
 import "./lyra55.js";
 import "./lyra56.js";
 import "./lyra57.js";
-import { Text as ur } from "./lyra75.js";
+import { Text as xr } from "./lyra75.js";
 import "./lyra76.js";
-import { InputTagGroup as $r, InputTag as Br } from "./lyra108.js";
-import "./lyra109.js";
-import { shouldRenderInputHeader as jr, shouldRenderInputFooter as hr } from "./lyra540.js";
-import { useFilterItemsByQuery as Dr } from "./lyra87.js";
-import { useMousePosition as Pr } from "./lyra86.js";
+import { InputTagGroup as Wr, InputTag as zr } from "./lyra113.js";
+import "./lyra114.js";
+import { shouldRenderInputHeader as wr, shouldRenderInputFooter as kr } from "./lyra528.js";
+import { useFilterItemsByQuery as Gr } from "./lyra87.js";
+import { useMousePosition as Rr } from "./lyra86.js";
 import "./lyra41.js";
 import "./lyra42.js";
 import "./lyra43.js";
@@ -70,14 +70,14 @@ import "./lyra50.js";
 import "./lyra51.js";
 import "./lyra52.js";
 import "./lyra53.js";
-import { Separator as Ar } from "./lyra58.js";
+import { Separator as Ur } from "./lyra58.js";
 import "./lyra59.js";
 import "./lyra60.js";
 import "./lyra61.js";
 import "./lyra62.js";
 import "./lyra63.js";
 import "./lyra64.js";
-import { Spinner as Tr } from "./lyra65.js";
+import { Spinner as Lr } from "./lyra65.js";
 import "./lyra66.js";
 import "./lyra69.js";
 import "./lyra70.js";
@@ -90,474 +90,514 @@ import "./lyra80.js";
 import "./lyra81.js";
 import "./lyra83.js";
 import "./lyra102.js";
-import { useSpinDelay as Er } from "./lyra89.js";
+import { useSpinDelay as Hr } from "./lyra89.js";
 import "./lyra90.js";
 import "./lyra91.js";
-import { useLocale as er } from "./lyra92.js";
-const Rr = ({
-  disableClearLogic: n,
-  endSlot: s,
-  fullWidth: o,
-  getLabel: p,
-  isDisabled: x,
-  isInvalid: e,
-  onChange: a,
-  open: m,
-  openPopover: N,
-  placeholder: f,
-  renderCustomElementInValueButton: v,
-  searchInputRef: j,
-  selectRenderElements: c,
-  startSlot: h,
-  value: i
+import { useLocale as ar } from "./lyra92.js";
+const Zr = ({
+  "aria-label": e,
+  disableClearLogic: s,
+  endSlot: o,
+  fullWidth: j,
+  getLabel: a,
+  isDisabled: h,
+  isInvalid: u,
+  onChange: n,
+  open: x,
+  openPopover: f,
+  placeholder: d,
+  renderCustomElementInValueButton: m,
+  searchInputRef: i,
+  selectRenderElements: N,
+  startSlot: v,
+  value: l
 }) => {
-  var u;
-  const { buttonExcludedFromTabOrder: w, inputField: b } = q({
-    isInvalid: e,
+  var c;
+  const { buttonExcludedFromTabOrder: b, inputField: S } = C({
+    isInvalid: u,
     hasEndSlot: !0,
-    fullWidth: o,
-    isDisabled: x,
+    fullWidth: j,
+    isDisabled: h,
     isInputOnly: !1
-  }), t = (l) => {
-    (l.key === "Escape" || l.key === "Backspace") && !n ? (l.stopPropagation(), a == null || a(void 0)) : l.key === "ArrowDown" || l.key === "ArrowUp" ? N == null || N() : l.key && l.key.match(/^[a-zA-Z0-9]$/) && (pr(() => {
-      N == null || N();
-    }), j.current && (j.current.focus(), j.current.setSelectionRange(0, j.current.value.length)));
+  }), y = (t) => {
+    (t.key === "Escape" || t.key === "Backspace") && !s ? (t.stopPropagation(), n == null || n(void 0)) : t.key === "ArrowDown" || t.key === "ArrowUp" ? f == null || f() : t.key && t.key.match(/^[a-zA-Z0-9]$/) && (ur(() => {
+      f == null || f();
+    }), i.current && (i.current.focus(), i.current.setSelectionRange(0, i.current.value.length)));
   };
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-    h,
+    v,
     /* @__PURE__ */ r.jsxs(
-      tr,
+      lr,
       {
         "aria-haspopup": "listbox",
-        "aria-expanded": m,
-        className: ({ isFocused: l, isHovered: d }) => b({
-          isHovered: d,
-          isFocused: l,
+        "aria-expanded": x,
+        "aria-label": e,
+        className: ({ isFocused: t, isHovered: $ }) => S({
+          isHovered: $,
+          isFocused: t,
           className: "min-h-8 grow"
         }),
-        isDisabled: x,
-        onKeyDown: t,
-        onPress: N,
+        isDisabled: h,
+        onKeyDown: y,
+        onPress: f,
         children: [
           /* @__PURE__ */ r.jsxs("div", { className: "flex grow truncate text-start", children: [
-            v && i ? (u = c(i)) == null ? void 0 : u.customElement : null,
-            i && p(i) ? /* @__PURE__ */ r.jsx(r.Fragment, { children: p(i) }) : /* @__PURE__ */ r.jsx(ur, { variant: "body-medium", color: "secondary", children: f })
+            m && l ? (c = N(l)) == null ? void 0 : c.customElement : null,
+            l && a(l) ? /* @__PURE__ */ r.jsx(r.Fragment, { children: a(l) }) : /* @__PURE__ */ r.jsx(xr, { variant: "body-medium", color: "secondary", children: d })
           ] }),
           /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-            i && !x && !n ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
+            l && !h && !s ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
               "div",
               {
-                className: w(),
+                className: b(),
                 role: "button",
-                onPointerDown: (l) => {
-                  l.stopPropagation(), a == null || a(void 0);
+                onPointerDown: (t) => {
+                  t.stopPropagation(), n == null || n(void 0);
                 },
-                onClick: (l) => {
-                  l.stopPropagation(), a == null || a(void 0);
+                onClick: (t) => {
+                  t.stopPropagation(), n == null || n(void 0);
                 },
-                children: /* @__PURE__ */ r.jsx(or, { name: "clear" })
+                children: /* @__PURE__ */ r.jsx(tr, { name: "clear" })
               }
             ) }) : null,
-            /* @__PURE__ */ r.jsx(or, { name: "chevron-up-down", className: "h-4 w-4" })
+            /* @__PURE__ */ r.jsx(tr, { name: "chevron-up-down", className: "h-4 w-4" })
           ] })
         ]
       }
     ),
-    s
+    o
   ] });
-}, Wr = ({
-  fullWidth: n,
-  getItemId: s,
-  getLabel: o,
-  isDisabled: p,
-  isInvalid: x,
-  label: e,
-  onChange: a,
-  openPopover: m,
-  placeholder: N,
-  searchInputRef: f,
-  value: v
+}, Mr = ({
+  "aria-label": e,
+  fullWidth: s,
+  getItemId: o,
+  getLabel: j,
+  isDisabled: a,
+  isInvalid: h,
+  label: u,
+  onChange: n,
+  openPopover: x,
+  placeholder: f,
+  searchInputRef: d,
+  value: m
 }) => {
-  const { inputField: j } = q({
-    isInvalid: x,
+  const { inputField: i } = C({
+    isInvalid: h,
     hasEndSlot: !0,
-    fullWidth: n,
-    isDisabled: p,
+    fullWidth: s,
+    isDisabled: a,
     isInputOnly: !1
-  }), c = E(
-    (i) => {
-      i.key === "ArrowDown" || i.key === "ArrowUp" ? m() : i.key && i.key.match(/^[a-zA-Z0-9]$/) && (pr(() => {
-        m();
-      }), f.current && (f.current.focus(), f.current.setSelectionRange(0, f.current.value.length)));
+  }), N = U(
+    (l) => {
+      l.key === "ArrowDown" || l.key === "ArrowUp" ? x() : l.key && l.key.match(/^[a-zA-Z0-9]$/) && (ur(() => {
+        x();
+      }), d.current && (d.current.focus(), d.current.setSelectionRange(0, d.current.value.length)));
     },
-    [m, f]
-  ), h = E(
-    (i) => {
-      v && a(
-        v.filter((w) => {
-          const b = s(w);
-          return !i.has(b);
+    [x, d]
+  ), v = U(
+    (l) => {
+      m && n(
+        m.filter((b) => {
+          const S = o(b);
+          return !l.has(S);
         })
       );
     },
-    [s, a, v]
+    [o, n, m]
   );
   return /* @__PURE__ */ r.jsx(
-    vr,
+    Dr,
     {
-      className: ({ isFocusWithin: i, isHovered: w }) => j({
-        isHovered: w,
-        isFocused: i,
-        className: yr(
-          w && !x && !p && !i ? "border-hover" : "",
+      className: ({ isFocusWithin: l, isHovered: b }) => i({
+        isHovered: b,
+        isFocused: l,
+        className: Ar(
+          b && !h && !a && !l ? "border-hover" : "",
           "has:[data-focused]:border has:[data-focused]:border-focus",
           "py-[0.4375rem]"
         )
       }),
       children: /* @__PURE__ */ r.jsxs(
-        tr,
+        lr,
         {
-          onPress: m,
-          onKeyDown: c,
-          isDisabled: p,
+          onPress: x,
+          onKeyDown: N,
+          isDisabled: a,
           className: "flex w-full outline-none",
+          "aria-label": e,
           children: [
-            /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: v && v.length ? /* @__PURE__ */ r.jsx(
-              $r,
+            /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: m && m.length ? /* @__PURE__ */ r.jsx(
+              Wr,
               {
-                label: e ?? "Selected items",
+                label: u ?? "Selected items",
                 className: "-m-1.5 -mt-[0.3125rem] items-center",
-                onRemove: p ? void 0 : h,
-                children: v.map((i) => /* @__PURE__ */ r.jsx(Br, { id: s(i), isDisabled: p, children: o(i) }, s(i)))
+                onRemove: a ? void 0 : v,
+                children: m.map((l) => /* @__PURE__ */ r.jsx(zr, { id: o(l), isDisabled: a, children: j(l) }, o(l)))
               }
-            ) : /* @__PURE__ */ r.jsx(ur, { color: "secondary", children: N }) }),
-            /* @__PURE__ */ r.jsx(or, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
+            ) : /* @__PURE__ */ r.jsx(xr, { color: "secondary", children: f }) }),
+            /* @__PURE__ */ r.jsx(tr, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
           ]
         }
       )
     }
   );
-}, zr = ({
-  endSlot: n,
+}, Yr = ({
+  endSlot: e,
   isLoading: s,
   onKeyDown: o,
-  onQueryChange: p,
-  query: x,
-  searchInputRef: e,
-  setQuery: a
+  onQueryChange: j,
+  query: a,
+  searchInputRef: h,
+  setQuery: u
 }) => {
-  const m = Nr(), { clear: N, search: f } = xr(), v = Er(s ?? !1, { delay: 500, minDuration: 200 }), { buttonExcludedFromTabOrder: j } = q({ fullWidth: !0 });
-  return X(() => {
-    var c;
-    (c = e.current) == null || c.focus();
+  const n = yr(), { clear: x, search: f } = vr(), d = Hr(s ?? !1, { delay: 500, minDuration: 200 }), { buttonExcludedFromTabOrder: m } = C({ fullWidth: !0 });
+  return g(() => {
+    var i;
+    (i = h.current) == null || i.focus();
   }, []), /* @__PURE__ */ r.jsx("div", { className: "pb-1", children: /* @__PURE__ */ r.jsxs("div", { className: "flex h-6 w-full items-center gap-2 rounded-xs border border-solid border-default bg-overlay-subtle py-1 pe-1 ps-1.5", children: [
     /* @__PURE__ */ r.jsx(
-      wr,
+      Br,
       {
-        ref: e,
-        id: m,
+        ref: h,
+        id: n,
         className: "w-full bg-transparent text-base outline-none placeholder:text-tertiary",
-        onChange: (c) => {
-          var h, i;
-          a(((h = c.target) == null ? void 0 : h.value) ?? ""), p == null || p((i = c.target) == null ? void 0 : i.value);
+        onChange: (i) => {
+          var N, v;
+          u(((N = i.target) == null ? void 0 : N.value) ?? ""), j == null || j((v = i.target) == null ? void 0 : v.value);
         },
         placeholder: f,
-        value: x ?? "",
-        onKeyDown: (c) => {
-          c.code === "Tab" && c.preventDefault(), o == null || o(c);
+        value: a ?? "",
+        onKeyDown: (i) => {
+          i.code === "Tab" && i.preventDefault(), o == null || o(i);
         }
       }
     ),
-    x && x.length ? /* @__PURE__ */ r.jsx(
-      tr,
+    a && a.length ? /* @__PURE__ */ r.jsx(
+      lr,
       {
-        "aria-label": N,
-        className: j(),
+        "aria-label": x,
+        className: m(),
         excludeFromTabOrder: !0,
         onPress: () => {
-          var c;
-          a(""), (c = e.current) == null || c.focus();
+          var i;
+          u(""), (i = h.current) == null || i.focus();
         },
-        children: /* @__PURE__ */ r.jsx(or, { name: "clear" })
+        children: /* @__PURE__ */ r.jsx(tr, { name: "clear" })
       }
     ) : null,
-    n,
-    v ? /* @__PURE__ */ r.jsx(Tr, { className: "mx-2", size: "small" }) : null
+    e,
+    d ? /* @__PURE__ */ r.jsx(Lr, { className: "mx-2", size: "small" }) : null
   ] }) });
-}, Gr = (n) => {
-  const s = B(null), [o, p] = z(!1);
-  return X(() => p(!1), [n]), { loadMoreButtonRef: s, isLoadMoreButtonFocused: o, setIsLoadMoreButtonFocused: p };
-}, Ur = ({
-  disabledItemIdKeys: n,
+}, Jr = (e) => {
+  const s = W(null), [o, j] = Z(!1);
+  return g(() => j(!1), [e]), { loadMoreButtonRef: s, isLoadMoreButtonFocused: o, setIsLoadMoreButtonFocused: j };
+}, Xr = ({
+  disabledItemIdKeys: e,
   filteredItems: s,
   getItemId: o,
-  onMultiChange: p,
-  onSingleChange: x,
-  value: e
+  loadMoreButtonRef: j,
+  onMultiChange: a,
+  onSingleChange: h,
+  setOpenPopover: u,
+  value: n
 }) => {
-  const a = sr(() => {
-    if (Array.isArray(e))
-      return e.length ? s == null ? void 0 : s.findIndex((t) => o(t) === o(e[0])) : 0;
-    if (e)
-      return (s == null ? void 0 : s.findIndex((t) => o(t) === o(e))) ?? 0;
-  }, [s, o, e]), m = E(
-    (t) => {
-      if (Number.isInteger(t)) {
-        for (let u = t - 1; u >= 0; u--)
-          if (!(n != null && n.includes(o(s[u]))))
-            return Math.max(u, 0);
+  const x = or(() => {
+    if (Array.isArray(n))
+      return n.length ? s == null ? void 0 : s.findIndex((c) => o(c) === o(n[0])) : 0;
+    if (n)
+      return (s == null ? void 0 : s.findIndex((c) => o(c) === o(n))) ?? 0;
+  }, [s, o, n]), f = U(
+    (c) => {
+      if (Number.isInteger(c)) {
+        for (let t = c - 1; t >= 0; t--)
+          if (!(e != null && e.includes(o(s[t]))))
+            return Math.max(t, 0);
       }
       return -1;
     },
-    [n, s, o]
-  ), N = E(
-    (t) => {
-      if (Number.isInteger(t)) {
-        for (let u = t + 1; u < s.length; u++)
-          if (!(n != null && n.includes(o(s[u]))))
-            return Math.min(s.length - 1, u);
+    [e, s, o]
+  ), d = U(
+    (c) => {
+      if (Number.isInteger(c)) {
+        for (let t = c + 1; t < s.length; t++)
+          if (!(e != null && e.includes(o(s[t]))))
+            return Math.min(s.length - 1, t);
       }
       return -1;
     },
-    [n, s, o]
-  ), f = E(
-    (t) => {
-      if (p) {
-        const u = e ? [...e] : [], l = u.map(o), d = l != null && l.includes(o(t)) ? u.filter((D) => o(D) !== o(t)) : [...u, t];
-        p == null || p(d);
-      } else x && (x == null || x(t));
+    [e, s, o]
+  ), m = U(
+    (c) => {
+      if (a) {
+        const t = n ? [...n] : [], $ = t.map(o), T = $ != null && $.includes(o(c)) ? t.filter((P) => o(P) !== o(c)) : [...t, c];
+        a == null || a(T);
+      } else h && (h == null || h(c));
     },
-    [o, p, x, e]
-  ), v = E(
-    (t) => Array.isArray(e) ? e.some((u) => o(u) === o(t)) : e ? o(e) === o(t) : !1,
-    [o, e]
-  ), [j, c] = z(0), h = Pr(), i = B(void 0), w = E(
-    (t) => {
-      const u = j;
-      if (t.key === "ArrowDown") {
-        t.preventDefault();
-        const l = N(u);
-        l >= 0 && (c(l), i.current = h);
-      } else if (t.key === "ArrowUp") {
-        t.preventDefault();
-        const l = m(u);
-        l >= 0 && (c(l), i.current = h);
-      } else t.key === "Enter" && f(s[j]);
+    [o, a, h, n]
+  ), i = U(
+    (c) => Array.isArray(n) ? n.some((t) => o(t) === o(c)) : n ? o(n) === o(c) : !1,
+    [o, n]
+  ), [N, v] = Z(0), l = Rr(), b = W(void 0), S = U(
+    (c) => {
+      var $;
+      const t = N;
+      if (c.key === "ArrowDown") {
+        c.preventDefault();
+        const T = d(t);
+        T >= 0 && (v(T), b.current = l);
+      } else if (c.key === "ArrowUp") {
+        c.preventDefault();
+        const T = f(t);
+        T >= 0 && (v(T), b.current = l);
+      } else c.key === "Enter" ? m(s[N]) : c.key === "Tab" ? ($ = j.current) == null || $.focus() : c.key === "Escape" && (u == null || u(!1));
     },
     [
-      j,
-      s,
       N,
-      m,
-      h,
-      f
+      s,
+      d,
+      f,
+      j,
+      l,
+      u,
+      m
     ]
-  ), b = E(
-    (t, u) => {
-      t && i.current !== h && (c(u), i.current = h);
+  ), y = U(
+    (c, t) => {
+      c && b.current !== l && (v(t), b.current = l);
     },
-    [h]
+    [l]
   );
   return {
-    activeItem: j,
-    setActiveItem: c,
-    getItemIsSelected: v,
-    onKeyDown: w,
-    onHoverChange: b,
-    selectedItemIndex: a,
-    toggleSelection: f
+    activeItem: N,
+    setActiveItem: v,
+    getItemIsSelected: i,
+    onKeyDown: S,
+    onHoverChange: y,
+    selectedItemIndex: x,
+    toggleSelection: m
   };
-}, Vr = ({
-  selectedItemIndex: n,
+}, _r = ({
+  selectedItemIndex: e,
   setActiveItem: s
-}) => (X(() => {
-  if (n !== void 0 && n >= 0)
-    return s(n), () => {
+}) => (g(() => {
+  if (e !== void 0 && e >= 0)
+    return s(e), () => {
       s(0);
     };
-}, [n, s]), null), ir = ({
-  direction: n,
+}, [e, s]), null), pr = ({
+  direction: e,
   disabledItemIdKeys: s,
   getItemId: o,
-  getLabel: p,
-  isLoading: x,
-  items: e,
-  label: a,
-  onLoadMore: m,
-  onMultiChange: N,
+  getLabel: j,
+  isLoading: a,
+  items: h,
+  label: u,
+  onLoadMore: n,
+  onMultiChange: x,
   onQueryChange: f,
-  onSingleChange: v,
-  open: j,
-  placement: c,
-  searchInputRef: h,
-  selectRenderElements: i,
-  setOpenPopover: w,
+  onSingleChange: d,
+  open: m,
+  placement: i,
+  searchInputRef: N,
+  selectRenderElements: v,
+  setOpenPopover: l,
   triggerRef: b,
-  value: t
+  value: S
 }) => {
-  var g, J, C;
-  const { loadMore: u, noResultsFound: l } = xr(), { filteredItems: d, query: D, setQuery: G } = Dr({
-    getLabel: p,
-    items: e,
+  var _, rr, V;
+  const { loadMore: y, noResultsFound: c } = vr(), { filteredItems: t, query: $, setQuery: T } = Gr({
+    getLabel: j,
+    items: h,
     onQueryChange: f
-  }), { item: P } = Fr(), { isLoadMoreButtonFocused: U, loadMoreButtonRef: A, setIsLoadMoreButtonFocused: V } = Gr(j), {
-    activeItem: O,
-    getItemIsSelected: H,
-    onHoverChange: $,
-    onKeyDown: L,
-    selectedItemIndex: F,
-    setActiveItem: k,
-    toggleSelection: Q
-  } = Ur({
+  }), { item: P } = Pr(), { isLoadMoreButtonFocused: z, loadMoreButtonRef: E, setIsLoadMoreButtonFocused: M } = Jr(m), {
+    activeItem: A,
+    getItemIsSelected: G,
+    onHoverChange: Y,
+    onKeyDown: D,
+    selectedItemIndex: k,
+    setActiveItem: F,
+    toggleSelection: J
+  } = Xr({
     disabledItemIdKeys: s,
-    filteredItems: d,
+    filteredItems: t,
     getItemId: o,
-    loadMoreButtonRef: A,
-    onMultiChange: N,
-    onSingleChange: v,
-    value: t
-  }), [K, _] = z(
-    (g = b.current) == null ? void 0 : g.offsetWidth
+    loadMoreButtonRef: E,
+    onMultiChange: x,
+    onSingleChange: d,
+    value: S,
+    setOpenPopover: l
+  }), [K, I] = Z(
+    (_ = b.current) == null ? void 0 : _.offsetWidth
   );
-  Sr("resize", () => {
-    var y;
-    _((y = b.current) == null ? void 0 : y.offsetWidth);
+  Or("resize", () => {
+    var w;
+    I((w = b.current) == null ? void 0 : w.offsetWidth);
   });
-  const Z = K ?? ((J = b.current) == null ? void 0 : J.offsetWidth), Y = B(null), R = m ? ((d == null ? void 0 : d.length) ?? 0) + 1 : (d == null ? void 0 : d.length) ?? 0, T = br({
+  const X = K ?? ((rr = b.current) == null ? void 0 : rr.offsetWidth), q = W(null), R = n ? ((t == null ? void 0 : t.length) ?? 0) + 1 : (t == null ? void 0 : t.length) ?? 0, O = Tr({
     count: R,
     estimateSize: () => 40,
-    getScrollElement: () => Y.current,
+    getScrollElement: () => q.current,
     overscan: 6
   });
-  X(() => {
-    O !== void 0 && O >= 0 && (d != null && d.length) && (O === d.length - 1 && m ? T.scrollToIndex(R) : T.scrollToIndex(Math.min(O, R - 1)));
-  }, [O, R, d.length, m, T]);
-  const M = T.getVirtualItems();
+  g(() => {
+    A !== void 0 && A >= 0 && (t != null && t.length) && (A === t.length - 1 && n ? O.scrollToIndex(R) : O.scrollToIndex(Math.min(A, R - 1)));
+  }, [A, R, t.length, n, O]);
+  const Q = O.getVirtualItems();
   return /* @__PURE__ */ r.jsx(
-    Or,
+    Er,
     {
       className: "p-1",
-      isOpen: j,
+      isOpen: m,
       disablePadding: !0,
       triggerRef: b,
-      onOpenChange: w,
-      "aria-label": a,
+      onOpenChange: l,
+      "aria-label": u,
       shouldUpdatePosition: !0,
-      placement: c,
+      placement: i,
       style: {
-        width: Z && Z > 280 ? Z + "px" : "280px",
-        direction: n
+        width: X && X > 280 ? X + "px" : "280px",
+        direction: e
       },
-      children: j ? /* @__PURE__ */ r.jsxs("div", { className: "gap-1", children: [
+      children: m ? /* @__PURE__ */ r.jsxs("div", { className: "gap-1", children: [
         /* @__PURE__ */ r.jsx(
-          zr,
+          Yr,
           {
             onQueryChange: f,
-            isLoading: x,
-            query: D,
-            setQuery: (y) => {
-              pr(() => {
-                G(y), k(0);
-              }), T.scrollToOffset(0);
+            isLoading: a,
+            query: $,
+            setQuery: (w) => {
+              ur(() => {
+                T(w), F(0);
+              }), O.scrollToOffset(0);
             },
-            searchInputRef: h,
-            onKeyDown: L
+            searchInputRef: N,
+            onKeyDown: (w) => {
+              w.stopPropagation(), D(w);
+            }
           }
         ),
-        /* @__PURE__ */ r.jsx(Vr, { selectedItemIndex: F, setActiveItem: k }),
+        /* @__PURE__ */ r.jsx(_r, { selectedItemIndex: k, setActiveItem: F }),
         /* @__PURE__ */ r.jsx(
           "div",
           {
-            ref: Y,
+            ref: q,
             className: "w-full overflow-y-auto",
             style: {
               contain: "strict",
-              height: Math.min(288, T.getTotalSize() + (m ? 4 : 0))
+              height: Math.min(288, O.getTotalSize() + (n ? 4 : 0))
             },
             children: /* @__PURE__ */ r.jsx(
               "div",
               {
                 className: "relative w-full",
                 style: {
-                  height: T.getTotalSize()
+                  height: O.getTotalSize()
                 },
                 children: /* @__PURE__ */ r.jsx(
                   "div",
                   {
                     className: "absolute start-0 top-0 w-full",
                     style: {
-                      transform: `translateY(${((C = M == null ? void 0 : M[0]) == null ? void 0 : C.start) ?? 0}px)`
+                      transform: `translateY(${((V = Q == null ? void 0 : Q[0]) == null ? void 0 : V.start) ?? 0}px)`
                     },
-                    children: M.map((y) => {
-                      if (y.index === R - 1 && m)
+                    children: Q.map((w) => {
+                      if (w.index === R - 1 && n)
                         return /* @__PURE__ */ r.jsx(
                           "div",
                           {
-                            "data-index": y.index,
-                            ref: T.measureElement,
+                            "data-index": w.index,
+                            ref: O.measureElement,
                             children: /* @__PURE__ */ r.jsxs("div", { children: [
-                              /* @__PURE__ */ r.jsx(Ar, { className: "my-1" }),
+                              /* @__PURE__ */ r.jsx(Ur, { className: "my-1" }),
                               /* @__PURE__ */ r.jsx(
-                                tr,
+                                lr,
                                 {
-                                  isDisabled: x,
-                                  onFocusChange: V,
-                                  onHoverChange: V,
-                                  ref: A,
+                                  isDisabled: a,
+                                  onFocusChange: M,
+                                  onHoverChange: M,
+                                  ref: E,
                                   className: P({
                                     className: "w-full justify-start bg-transparent ps-6 text-base font-normal text-primary duration-0 active:text-inverted hover:bg-action-hover hover:text-inverted focus:bg-action-focus focus:text-inverted focus-visible:[box-shadow:none]"
                                   }),
                                   onPress: () => {
-                                    var S;
-                                    m(), (S = h.current) == null || S.focus();
+                                    var p;
+                                    n(), (p = N.current) == null || p.focus();
                                   },
-                                  onKeyDown: (S) => {
-                                    var W;
-                                    S.key === "ArrowUp" && (S.preventDefault(), (W = h.current) == null || W.focus());
+                                  onKeyDown: (p) => {
+                                    var B;
+                                    p.key === "ArrowUp" && (p.preventDefault(), (B = N.current) == null || B.focus());
                                   },
-                                  children: u
+                                  children: y
                                 }
                               )
                             ] })
                           },
-                          y.key
+                          w.key
                         );
                       {
-                        const S = d[y.index];
+                        const p = t[w.index];
                         return /* @__PURE__ */ r.jsx(
                           "div",
                           {
-                            "data-index": y.index,
-                            ref: T.measureElement,
-                            children: /* @__PURE__ */ r.jsx(
-                              tr,
+                            "data-index": w.index,
+                            ref: O.measureElement,
+                            children: x ? /* @__PURE__ */ r.jsx(
+                              br,
                               {
+                                value: o(p).toString(),
                                 className: "w-full text-start outline-none",
-                                onHoverChange: (W) => {
-                                  $(W, y.index);
+                                onHoverChange: (B) => {
+                                  Y(B, w.index);
                                 },
-                                onPress: () => Q(S),
-                                isDisabled: (s == null ? void 0 : s.includes(o(S))) ?? !1,
-                                excludeFromTabOrder: !0,
+                                isDisabled: (s == null ? void 0 : s.includes(o(p))) ?? !1,
+                                onKeyDown: D,
+                                onChange: () => J(p),
                                 children: /* @__PURE__ */ r.jsx(
-                                  kr,
+                                  mr,
                                   {
                                     hasSelection: !0,
-                                    item: S,
+                                    item: p,
                                     state: {
-                                      active: O === y.index && !U,
-                                      disabled: (s == null ? void 0 : s.includes(o(S))) ?? !1,
-                                      selected: H(S)
+                                      active: A === w.index && !z,
+                                      disabled: (s == null ? void 0 : s.includes(o(p))) ?? !1,
+                                      selected: G(p)
                                     },
-                                    selectRenderElements: i
+                                    selectRenderElements: v
                                   },
-                                  o(S)
+                                  o(p)
                                 )
                               },
-                              o(S)
+                              o(p)
+                            ) : /* @__PURE__ */ r.jsx(
+                              hr,
+                              {
+                                value: o(p).toString(),
+                                "data-index": w.index,
+                                className: "w-full text-start outline-none",
+                                onHoverChange: (B) => {
+                                  Y(B, w.index);
+                                },
+                                isDisabled: (s == null ? void 0 : s.includes(o(p))) ?? !1,
+                                onKeyDown: D,
+                                children: /* @__PURE__ */ r.jsx(
+                                  mr,
+                                  {
+                                    hasSelection: !0,
+                                    item: p,
+                                    state: {
+                                      active: A === w.index && !z,
+                                      disabled: (s == null ? void 0 : s.includes(o(p))) ?? !1,
+                                      selected: G(p)
+                                    },
+                                    selectRenderElements: v
+                                  },
+                                  o(p)
+                                )
+                              },
+                              o(p)
                             )
                           },
-                          y.key
+                          w.key
                         );
                       }
                     })
@@ -567,399 +607,456 @@ const Rr = ({
             )
           }
         ),
-        R ? null : /* @__PURE__ */ r.jsx(ur, { variant: "body-medium", color: "secondary", className: "px-2.5", children: l })
+        R ? null : /* @__PURE__ */ r.jsx(xr, { variant: "body-medium", color: "secondary", className: "px-2.5", children: c })
       ] }) : null
     }
   );
-}, lr = ({
-  getItemId: n,
+}, fr = ({
+  getItemId: e,
   name: s,
   value: o
-}) => s ? Array.isArray(o) ? o.map((p) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: n(p) }, n(p))) : o ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: n(o) }) : null : null, Bt = ({
-  defaultValue: n,
-  description: s,
-  disableClearLogic: o,
-  disabledItemIdKeys: p,
-  endSlot: x,
-  errorMessage: e,
-  fullWidth: a = !0,
-  getItemId: m,
-  getLabel: N,
-  hideHintLabel: f,
-  hideInputFooter: v,
-  hideInputHeader: j,
-  isDisabled: c,
-  isInvalid: h,
-  isLoading: i,
-  isRequired: w,
-  items: b,
-  label: t,
-  name: u,
-  onChange: l,
-  onLoadMore: d,
-  onQueryChange: D,
-  outerEndSlot: G,
-  outerStartSlot: P,
-  placeholder: U,
-  placement: A = "bottom start",
-  renderCustomElementInValueButton: V,
-  selectRenderElements: O,
-  startSlot: H,
-  value: $
-}) => {
-  const { isDisabled: L } = nr(cr), F = B(null), k = B(null), Q = B(null), [K, _] = z($ ?? n), [Z, Y] = z(!1), R = () => {
-    var rr;
-    Y(!0), (rr = k.current) == null || rr.click();
-  }, T = () => Y(!1), M = E(
-    (rr) => {
-      _(rr), l == null || l(rr), T();
-    },
-    [l]
-  ), { direction: g } = er(), J = sr(
-    () => jr({ hideHintLabel: f, hideInputHeader: j, label: t }),
-    [f, j, t]
-  ), C = sr(
-    () => hr({ description: s, errorMessage: e, hideInputFooter: v }),
-    [s, e, v]
-  ), { outerSlot: y, outerSlotsWrapper: I, wrapper: S } = q({
-    fullWidth: a,
-    isInvalid: h,
-    isDisabled: c || L,
-    hasInputHeader: J,
-    hasLabel: !!t
-  });
-  X(() => {
-    _($ ?? n);
-  }, [n, $]);
-  const W = $ ?? K;
-  return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(lr, { name: u, value: W, getItemId: m }),
-    /* @__PURE__ */ r.jsxs("div", { className: I(), children: [
-      P ? /* @__PURE__ */ r.jsx("div", { className: y(), children: P }) : null,
-      /* @__PURE__ */ r.jsxs("div", { className: S(), children: [
-        J ? /* @__PURE__ */ r.jsx(fr, { label: t, hideHintLabel: f, isRequired: w }) : null,
-        /* @__PURE__ */ r.jsx("div", { ref: Q, children: /* @__PURE__ */ r.jsx(
-          Rr,
-          {
-            disableClearLogic: o,
-            endSlot: x,
-            fullWidth: a,
-            getLabel: N,
-            getItemId: m,
-            isDisabled: c,
-            isInvalid: h || !!e,
-            open: Z,
-            openPopover: R,
-            onChange: M,
-            placeholder: U,
-            searchInputRef: F,
-            startSlot: H,
-            value: W,
-            renderCustomElementInValueButton: V,
-            selectRenderElements: O
-          }
-        ) }),
-        C ? /* @__PURE__ */ r.jsx(dr, { description: s, errorMessage: e }) : null
-      ] }),
-      G ? /* @__PURE__ */ r.jsx("div", { className: y(), children: G }) : null
-    ] }),
-    /* @__PURE__ */ r.jsx(
-      ir,
-      {
-        triggerRef: Q,
-        label: t,
-        getItemId: m,
-        getLabel: N,
-        items: b,
-        open: Z,
-        setOpenPopover: Y,
-        selectRenderElements: O,
-        disabledItemIdKeys: p,
-        direction: g,
-        onQueryChange: D,
-        isLoading: i,
-        searchInputRef: F,
-        onLoadMore: d,
-        placement: A,
-        value: W,
-        onSingleChange: M
-      }
-    )
-  ] });
-}, Dt = ({
-  defaultValue: n,
-  description: s,
-  disableClearLogic: o,
-  disabledItemIdKeys: p,
-  endSlot: x,
-  errorMessage: e,
-  fullWidth: a = !0,
-  getItemId: m,
-  getLabel: N,
-  hideHintLabel: f,
-  hideInputFooter: v,
-  hideInputHeader: j,
-  isDisabled: c,
-  isInvalid: h,
-  isLoading: i,
-  isRequired: w,
-  items: b,
-  label: t,
-  labelId: u,
-  name: l,
-  onChange: d,
-  onLoadMore: D,
-  onQueryChange: G,
+}) => s ? Array.isArray(o) ? o.map((j) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: e(j) }, e(j))) : o ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: e(o) }) : null : null, Go = ({
+  "aria-label": e,
+  defaultValue: s,
+  description: o,
+  disableClearLogic: j,
+  disabledItemIdKeys: a,
+  endSlot: h,
+  errorMessage: u,
+  fullWidth: n = !0,
+  getItemId: x,
+  getLabel: f,
+  hideHintLabel: d,
+  hideInputFooter: m,
+  hideInputHeader: i,
+  isDisabled: N,
+  isInvalid: v,
+  isLoading: l,
+  isRequired: b,
+  items: S,
+  label: y,
+  name: c,
+  onChange: t,
+  onLoadMore: $,
+  onQueryChange: T,
   outerEndSlot: P,
-  outerStartSlot: U,
-  placeholder: A,
-  placement: V = "bottom start",
-  selectRenderElements: O,
-  startSlot: H,
-  value: $
+  outerStartSlot: z,
+  placeholder: E,
+  placement: M = "bottom start",
+  renderCustomElementInValueButton: A,
+  selectRenderElements: G,
+  startSlot: Y,
+  value: D
 }) => {
-  const { isDisabled: L } = nr(cr), F = B(null), k = B(null), [Q, K] = z($ ?? n), [_, Z] = z(!1), Y = () => {
-    Z(!0);
-  }, R = E(
-    (S) => {
-      var W;
-      K(S), d == null || d(S), (W = F.current) == null || W.focus();
+  const { isDisabled: k } = nr(er), F = W(null), J = W(null), K = W(null), [I, X] = Z(D ?? s), [q, R] = Z(!1), O = () => {
+    var H;
+    R(!0), (H = J.current) == null || H.click();
+  }, Q = () => R(!1), _ = U(
+    (H) => {
+      X(H), t == null || t(H), Q();
     },
-    [d]
-  ), { direction: T } = er(), M = sr(
-    () => jr({ hideHintLabel: f, hideInputHeader: j, label: t }),
-    [f, j, t]
-  ), g = sr(
-    () => hr({ description: s, errorMessage: e, hideInputFooter: v }),
-    [s, e, v]
-  ), { outerSlot: J, outerSlotsWrapper: C, wrapper: y } = q({
-    fullWidth: a,
-    isInvalid: h,
-    isDisabled: c || L,
-    hasInputHeader: M,
-    hasLabel: !!t
+    [t]
+  ), { direction: rr } = ar(), V = or(
+    () => wr({ hideHintLabel: d, hideInputHeader: i, label: y }),
+    [d, i, y]
+  ), w = or(
+    () => kr({ description: o, errorMessage: u, hideInputFooter: m }),
+    [o, u, m]
+  ), { outerSlot: sr, outerSlotsWrapper: p, wrapper: B } = C({
+    fullWidth: n,
+    isInvalid: v,
+    isDisabled: N || k,
+    hasInputHeader: V,
+    hasLabel: !!y
   });
-  X(() => {
-    K($ ?? n);
-  }, [n, $]);
-  const I = $ ?? Q;
-  return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(lr, { name: l, value: I, getItemId: m }),
-    /* @__PURE__ */ r.jsxs("div", { className: C(), children: [
-      U ? /* @__PURE__ */ r.jsx("div", { className: J(), children: U }) : null,
-      /* @__PURE__ */ r.jsxs("div", { className: y(), children: [
-        M ? /* @__PURE__ */ r.jsx(
-          fr,
+  g(() => {
+    X(D ?? s);
+  }, [s, D]);
+  const L = D ?? I;
+  return /* @__PURE__ */ r.jsx(
+    jr,
+    {
+      name: c,
+      isRequired: b,
+      value: L ? x(L).toString() : void 0,
+      onChange: (H) => {
+        _(S.find((Fr) => x(Fr).toString() === H));
+      },
+      children: ({ isInvalid: H }) => /* @__PURE__ */ r.jsxs(cr, { values: [[ir, { slot: null }]], children: [
+        /* @__PURE__ */ r.jsx(
+          hr,
           {
-            label: t,
-            isRequired: w,
-            hideHintLabel: f,
-            labelId: u
+            className: "hidden",
+            value: L ? x(L).toString() : ""
           }
-        ) : null,
-        /* @__PURE__ */ r.jsx("div", { ref: k, children: /* @__PURE__ */ r.jsx(
-          Wr,
+        ),
+        /* @__PURE__ */ r.jsxs("div", { className: p(), children: [
+          z ? /* @__PURE__ */ r.jsx("div", { className: sr(), children: z }) : null,
+          /* @__PURE__ */ r.jsxs("div", { className: B(), children: [
+            V ? /* @__PURE__ */ r.jsx(Sr, { label: y, hideHintLabel: d, isRequired: b }) : null,
+            /* @__PURE__ */ r.jsx("div", { ref: K, children: /* @__PURE__ */ r.jsx(
+              Zr,
+              {
+                disableClearLogic: j,
+                endSlot: h,
+                fullWidth: n,
+                getLabel: f,
+                getItemId: x,
+                isDisabled: N,
+                isInvalid: v || H || !!u,
+                open: q,
+                openPopover: O,
+                onChange: _,
+                placeholder: E,
+                searchInputRef: F,
+                startSlot: Y,
+                value: L,
+                renderCustomElementInValueButton: A,
+                selectRenderElements: G,
+                "aria-label": e
+              }
+            ) }),
+            w ? /* @__PURE__ */ r.jsx($r, { description: o, errorMessage: u }) : null
+          ] }),
+          P ? /* @__PURE__ */ r.jsx("div", { className: sr(), children: P }) : null
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          pr,
           {
-            disableClearLogic: o,
-            endSlot: x,
-            fullWidth: a,
-            getLabel: N,
-            getItemId: m,
-            isDisabled: c,
-            isInvalid: h || !!e,
-            onChange: R,
-            open: _,
-            openPopover: Y,
-            placeholder: A,
+            triggerRef: K,
+            label: y,
+            getItemId: x,
+            getLabel: f,
+            items: S,
+            open: q,
+            setOpenPopover: R,
+            selectRenderElements: G,
+            disabledItemIdKeys: a,
+            direction: rr,
+            onQueryChange: T,
+            isLoading: l,
             searchInputRef: F,
-            startSlot: H,
-            value: I
+            onLoadMore: $,
+            placement: M,
+            value: L,
+            onSingleChange: _
           }
-        ) }),
-        g ? /* @__PURE__ */ r.jsx(dr, { description: s, errorMessage: e }) : null
-      ] }),
-      P ? /* @__PURE__ */ r.jsx("div", { className: J(), children: P }) : null
-    ] }),
-    /* @__PURE__ */ r.jsx(
-      ir,
-      {
-        label: t,
-        searchInputRef: F,
-        triggerRef: k,
-        getItemId: m,
-        getLabel: N,
-        items: b,
-        onMultiChange: R,
-        value: I,
-        placement: V,
-        open: _,
-        setOpenPopover: Z,
-        selectRenderElements: O,
-        disabledItemIdKeys: p,
-        direction: T,
-        onQueryChange: G,
-        isLoading: i,
-        onLoadMore: D
-      }
-    )
-  ] });
-}, Pt = ({
-  children: n,
+        )
+      ] })
+    }
+  );
+}, Ro = ({
+  "aria-label": e,
   defaultValue: s,
-  disabledItemIdKeys: o,
-  fullWidth: p = !1,
-  // TODO: ask about it
+  description: o,
+  disableClearLogic: j,
+  disabledItemIdKeys: a,
+  endSlot: h,
+  errorMessage: u,
+  fullWidth: n = !0,
   getItemId: x,
-  getLabel: e,
-  isDisabled: a,
-  isInvalid: m,
-  isLoading: N,
-  items: f,
-  label: v,
-  name: j,
-  onChange: c,
-  onLoadMore: h,
-  onQueryChange: i,
-  placement: w = "bottom start",
-  selectRenderElements: b,
-  value: t
+  getLabel: f,
+  hideHintLabel: d,
+  hideInputFooter: m,
+  hideInputHeader: i,
+  isDisabled: N,
+  isInvalid: v,
+  isLoading: l,
+  isRequired: b,
+  items: S,
+  label: y,
+  labelId: c,
+  name: t,
+  onChange: $,
+  onLoadMore: T,
+  onQueryChange: P,
+  outerEndSlot: z,
+  outerStartSlot: E,
+  placeholder: M,
+  placement: A = "bottom start",
+  selectRenderElements: G,
+  startSlot: Y,
+  value: D
 }) => {
-  const { isDisabled: u } = nr(cr), l = B(null), d = B(null), D = B(null), [G, P] = z(t ?? s), [U, A] = z(!1), V = () => {
-    var k;
-    A(!0), (k = d.current) == null || k.click();
-  }, O = () => A(!1), H = E(
-    (k) => {
-      P(k), c == null || c(k), O();
+  const { isDisabled: k } = nr(er), F = W(null), J = W(null), [K, I] = Z(D ?? s), [X, q] = Z(!1), R = () => {
+    q(!0);
+  }, O = U(
+    (B) => {
+      var L;
+      I(B), $ == null || $(B), (L = F.current) == null || L.focus();
     },
-    [c]
-  ), { direction: $ } = er(), { wrapper: L } = q({
-    fullWidth: p,
-    isInvalid: m,
-    isDisabled: a
+    [$]
+  ), { direction: Q } = ar(), _ = or(
+    () => wr({ hideHintLabel: d, hideInputHeader: i, label: y }),
+    [d, i, y]
+  ), rr = or(
+    () => kr({ description: o, errorMessage: u, hideInputFooter: m }),
+    [o, u, m]
+  ), { outerSlot: V, outerSlotsWrapper: w, wrapper: sr } = C({
+    fullWidth: n,
+    isInvalid: v,
+    isDisabled: N || k,
+    hasInputHeader: _,
+    hasLabel: !!y
   });
-  X(() => {
-    P(t ?? s);
-  }, [s, t]);
-  const F = t ?? G;
+  g(() => {
+    I(D ?? s);
+  }, [s, D]);
+  const p = D ?? K;
   return /* @__PURE__ */ r.jsx(
-    ar,
+    dr,
     {
-      values: [
-        [
-          mr,
-          {
-            onPress: () => V(),
-            isDisabled: a || u
-          }
-        ]
-      ],
-      children: /* @__PURE__ */ r.jsxs("div", { children: [
-        /* @__PURE__ */ r.jsx(lr, { name: j, value: F, getItemId: x }),
-        /* @__PURE__ */ r.jsx("div", { className: L(), children: /* @__PURE__ */ r.jsx("div", { ref: D, children: n }) }),
+      value: p == null ? void 0 : p.map((B) => x(B).toString()),
+      onChange: (B) => {
+        O(
+          B == null ? void 0 : B.map((L) => S.find((H) => x(H).toString() === L))
+        );
+      },
+      isRequired: b,
+      children: ({ isInvalid: B }) => /* @__PURE__ */ r.jsxs(cr, { values: [[ir, { slot: null }]], children: [
+        /* @__PURE__ */ r.jsx(fr, { name: t, value: p, getItemId: x }),
+        /* @__PURE__ */ r.jsx(br, { className: "hidden" }),
+        /* @__PURE__ */ r.jsxs("div", { className: w(), children: [
+          E ? /* @__PURE__ */ r.jsx("div", { className: V(), children: E }) : null,
+          /* @__PURE__ */ r.jsxs("div", { className: sr(), children: [
+            _ ? /* @__PURE__ */ r.jsx(
+              Sr,
+              {
+                label: y,
+                isRequired: b,
+                hideHintLabel: d,
+                labelId: c
+              }
+            ) : null,
+            /* @__PURE__ */ r.jsx("div", { ref: J, children: /* @__PURE__ */ r.jsx(
+              Mr,
+              {
+                disableClearLogic: j,
+                endSlot: h,
+                fullWidth: n,
+                getLabel: f,
+                getItemId: x,
+                isDisabled: N,
+                isInvalid: v || !!u || B,
+                onChange: O,
+                open: X,
+                openPopover: R,
+                placeholder: M,
+                searchInputRef: F,
+                startSlot: Y,
+                value: p,
+                "aria-label": e
+              }
+            ) }),
+            rr ? /* @__PURE__ */ r.jsx($r, { description: o, errorMessage: u }) : null
+          ] }),
+          z ? /* @__PURE__ */ r.jsx("div", { className: V(), children: z }) : null
+        ] }),
         /* @__PURE__ */ r.jsx(
-          ir,
+          pr,
           {
-            triggerRef: D,
-            label: v,
+            label: y,
+            searchInputRef: F,
+            triggerRef: J,
             getItemId: x,
-            getLabel: e,
-            items: f,
-            open: U,
-            setOpenPopover: A,
-            selectRenderElements: b,
-            disabledItemIdKeys: o,
-            direction: $,
-            onLoadMore: h,
-            onQueryChange: i,
-            isLoading: N,
-            searchInputRef: l,
-            placement: w,
-            value: F,
-            onSingleChange: H
+            getLabel: f,
+            items: S,
+            onMultiChange: O,
+            value: p,
+            placement: A,
+            open: X,
+            setOpenPopover: q,
+            selectRenderElements: G,
+            disabledItemIdKeys: a,
+            direction: Q,
+            onQueryChange: P,
+            isLoading: l,
+            onLoadMore: T
           }
         )
       ] })
     }
   );
-}, At = ({
-  children: n,
+}, Uo = ({
+  children: e,
   defaultValue: s,
   disabledItemIdKeys: o,
-  fullWidth: p = !0,
-  getItemId: x,
-  getLabel: e,
-  isDisabled: a,
-  isInvalid: m,
-  isLoading: N,
+  fullWidth: j = !1,
+  // TODO: ask about it
+  getItemId: a,
+  getLabel: h,
+  isDisabled: u,
+  isInvalid: n,
+  isLoading: x,
   items: f,
-  label: v,
-  name: j,
-  onChange: c,
-  onLoadMore: h,
-  onQueryChange: i,
-  placement: w = "bottom start",
+  label: d,
+  name: m,
+  onChange: i,
+  onLoadMore: N,
+  onQueryChange: v,
+  placement: l = "bottom start",
   selectRenderElements: b,
-  value: t
+  value: S
 }) => {
-  const { isDisabled: u } = nr(cr), l = B(null), d = B(null), D = B(null), [G, P] = z(t ?? s), [U, A] = z(!1), V = () => {
+  const { isDisabled: y } = nr(er), c = W(null), t = W(null), $ = W(null), [T, P] = Z(S ?? s), [z, E] = Z(!1), M = () => {
     var F;
-    A(!0), (F = d.current) == null || F.click();
-  }, O = E(
+    E(!0), (F = t.current) == null || F.click();
+  }, A = () => E(!1), G = U(
     (F) => {
-      var k;
-      P(F), c == null || c(F), (k = l.current) == null || k.focus();
+      P(F), i == null || i(F), A();
     },
-    [c]
-  ), { direction: H } = er(), { wrapper: $ } = q({
-    fullWidth: p,
-    isInvalid: m,
-    isDisabled: a
+    [i]
+  ), { direction: Y } = ar(), { wrapper: D } = C({
+    fullWidth: j,
+    isInvalid: n,
+    isDisabled: u
   });
-  X(() => {
-    P(t ?? s);
-  }, [s, t]);
-  const L = t ?? G;
+  g(() => {
+    P(S ?? s);
+  }, [s, S]);
+  const k = S ?? T;
   return /* @__PURE__ */ r.jsx(
-    ar,
+    jr,
     {
-      values: [
-        [
-          mr,
-          { onPress: () => V(), isDisabled: a || u }
-        ]
-      ],
-      children: /* @__PURE__ */ r.jsxs("div", { children: [
-        /* @__PURE__ */ r.jsx(lr, { name: j, value: L, getItemId: x }),
-        /* @__PURE__ */ r.jsx("div", { className: $(), children: /* @__PURE__ */ r.jsx("div", { ref: D, children: n }) }),
-        /* @__PURE__ */ r.jsx(
-          ir,
-          {
-            label: v,
-            searchInputRef: l,
-            triggerRef: D,
-            getItemId: x,
-            getLabel: e,
-            items: f,
-            onLoadMore: h,
-            open: U,
-            setOpenPopover: A,
-            selectRenderElements: b,
-            disabledItemIdKeys: o,
-            direction: H,
-            onQueryChange: i,
-            isLoading: N,
-            value: L,
-            onMultiChange: O,
-            placement: w
-          }
-        )
-      ] })
+      name: m,
+      value: k ? a(k).toString() : void 0,
+      onChange: (F) => {
+        G(f.find((J) => a(J).toString() === F));
+      },
+      children: /* @__PURE__ */ r.jsx(
+        cr,
+        {
+          values: [
+            [
+              Nr,
+              {
+                onPress: () => M(),
+                isDisabled: u || y
+              }
+            ],
+            [ir, { slot: null }]
+          ],
+          children: /* @__PURE__ */ r.jsxs("div", { children: [
+            /* @__PURE__ */ r.jsx(fr, { name: m, value: k, getItemId: a }),
+            /* @__PURE__ */ r.jsx("div", { className: D(), children: /* @__PURE__ */ r.jsx("div", { ref: $, children: e }) }),
+            /* @__PURE__ */ r.jsx(
+              pr,
+              {
+                triggerRef: $,
+                label: d,
+                getItemId: a,
+                getLabel: h,
+                items: f,
+                open: z,
+                setOpenPopover: E,
+                selectRenderElements: b,
+                disabledItemIdKeys: o,
+                direction: Y,
+                onLoadMore: N,
+                onQueryChange: v,
+                isLoading: x,
+                searchInputRef: c,
+                placement: l,
+                value: k,
+                onSingleChange: G
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}, Lo = ({
+  children: e,
+  defaultValue: s,
+  disabledItemIdKeys: o,
+  fullWidth: j = !0,
+  getItemId: a,
+  getLabel: h,
+  isDisabled: u,
+  isInvalid: n,
+  isLoading: x,
+  items: f,
+  label: d,
+  name: m,
+  onChange: i,
+  onLoadMore: N,
+  onQueryChange: v,
+  placement: l = "bottom start",
+  selectRenderElements: b,
+  value: S
+}) => {
+  const { isDisabled: y } = nr(er), c = W(null), t = W(null), $ = W(null), [T, P] = Z(S ?? s), [z, E] = Z(!1), M = () => {
+    var k;
+    E(!0), (k = t.current) == null || k.click();
+  }, A = U(
+    (k) => {
+      var F;
+      P(k), i == null || i(k), (F = c.current) == null || F.focus();
+    },
+    [i]
+  ), { direction: G } = ar(), { wrapper: Y } = C({
+    fullWidth: j,
+    isInvalid: n,
+    isDisabled: u
+  });
+  g(() => {
+    P(S ?? s);
+  }, [s, S]);
+  const D = S ?? T;
+  return /* @__PURE__ */ r.jsx(
+    dr,
+    {
+      value: D == null ? void 0 : D.map((k) => a(k).toString()),
+      onChange: (k) => {
+        A(
+          k == null ? void 0 : k.map((F) => f.find((J) => a(J).toString() === F))
+        );
+      },
+      children: /* @__PURE__ */ r.jsx(
+        cr,
+        {
+          values: [
+            [
+              Nr,
+              { onPress: () => M(), isDisabled: u || y }
+            ],
+            [ir, { slot: null }]
+          ],
+          children: /* @__PURE__ */ r.jsxs("div", { children: [
+            /* @__PURE__ */ r.jsx(fr, { name: m, value: D, getItemId: a }),
+            /* @__PURE__ */ r.jsx("div", { className: Y(), children: /* @__PURE__ */ r.jsx("div", { ref: $, children: e }) }),
+            /* @__PURE__ */ r.jsx(
+              pr,
+              {
+                label: d,
+                searchInputRef: c,
+                triggerRef: $,
+                getItemId: a,
+                getLabel: h,
+                items: f,
+                onLoadMore: N,
+                open: z,
+                setOpenPopover: E,
+                selectRenderElements: b,
+                disabledItemIdKeys: o,
+                direction: G,
+                onQueryChange: v,
+                isLoading: x,
+                value: D,
+                onMultiChange: A,
+                placement: l
+              }
+            )
+          ] })
+        }
+      )
     }
   );
 };
 export {
-  Dt as MultiSearchListField,
-  At as MultiSearchListFieldWithCustomTrigger,
-  Bt as SearchListField,
-  Pt as SearchListFieldWithCustomTrigger
+  Ro as MultiSearchListField,
+  Lo as MultiSearchListFieldWithCustomTrigger,
+  Go as SearchListField,
+  Uo as SearchListFieldWithCustomTrigger
 };