@new-black/lyra 1.0.2 → 1.0.3

package/dist/lyra37.js

@@ -1,14 +1,15 @@
 import { j as t } from "./lyra87.js";
-import { useContext as K, useRef as B, useState as A, useCallback as G, useEffect as z, useId as lt } from "react";
-import { Provider as st, ButtonContext as et, Button as X, Group as mt } from "./lyra86.js";
+import { useContext as H, useRef as B, useState as z, useCallback as W, useEffect as K, useId as lt } from "react";
+import { Provider as et, ButtonContext as st, Button as J, Group as at } from "./lyra86.js";
 import { flushSync as ot } from "react-dom";
-import { clsx as at } from "./lyra447.js";
+import { useVirtualizer as mt } from "./lyra610.js";
+import { clsx as pt } from "./lyra447.js";
 import "./lyra2.js";
 import "./lyra3.js";
 import "./lyra4.js";
 import "./lyra5.js";
 import "./lyra6.js";
-import { SvgIcon as J } from "./lyra63.js";
+import { SvgIcon as q } from "./lyra63.js";
 import "./lyra8.js";
 import "./lyra9.js";
 import "./lyra10.js";
@@ -27,16 +28,16 @@ import "./lyra22.js";
 import "./lyra23.js";
 import "./lyra24.js";
 import "./lyra25.js";
-import { FieldGroupContext as Y } from "./lyra26.js";
+import { FieldGroupContext as V } from "./lyra26.js";
 import "./lyra27.js";
 import "./lyra28.js";
 import "./lyra29.js";
 import { useDictionary as it } from "./lyra92.js";
 import "./lyra78.js";
-import "./lyra449.js";
+import "./lyra451.js";
 import { InputHeader as nt } from "./lyra38.js";
 import { InputFooter as ct } from "./lyra39.js";
-import { sharedInputStyles as E } from "./lyra40.js";
+import { sharedInputStyles as G } from "./lyra40.js";
 import "./lyra44.js";
 import "./lyra31.js";
 import "./lyra32.js";
@@ -45,15 +46,15 @@ import "./lyra34.js";
 import "./lyra35.js";
 import { Text as rt } from "./lyra71.js";
 import "./lyra72.js";
-import { sharedListItemStyles as pt, sharedListStyles as dt } from "./lyra450.js";
-import { SharedListItem as ut } from "./lyra451.js";
-import { Popover as xt } from "./lyra52.js";
+import { sharedListItemStyles as dt, sharedListStyles as ut } from "./lyra452.js";
+import { SharedListItem as xt } from "./lyra453.js";
+import { Popover as ft } from "./lyra52.js";
 import "./lyra53.js";
 import "./lyra54.js";
 import "./lyra55.js";
-import { InputTagGroup as ft, InputTag as jt } from "./lyra452.js";
-import "./lyra453.js";
-import { useFilterItemsByQuery as ht } from "./lyra82.js";
+import { InputTagGroup as jt, InputTag as ht } from "./lyra454.js";
+import "./lyra455.js";
+import { useFilterItemsByQuery as bt } from "./lyra82.js";
 import "./lyra41.js";
 import "./lyra42.js";
 import "./lyra43.js";
@@ -64,7 +65,7 @@ import "./lyra48.js";
 import "./lyra49.js";
 import "./lyra50.js";
 import "./lyra51.js";
-import { Separator as bt } from "./lyra56.js";
+import { Separator as vt } from "./lyra56.js";
 import "./lyra57.js";
 import "./lyra58.js";
 import "./lyra59.js";
@@ -82,161 +83,161 @@ import "./lyra76.js";
 import "./lyra77.js";
 import "./lyra79.js";
 import "./lyra95.js";
-import { useSpinDelay as vt } from "./lyra84.js";
-import { Combobox as R } from "./lyra604.js";
-import { useLocale as _ } from "./lyra85.js";
+import { useSpinDelay as yt } from "./lyra84.js";
+import { Combobox as E } from "./lyra611.js";
+import { useLocale as X } from "./lyra85.js";
 const wt = ({
-  disableClearLogic: b,
+  disableClearLogic: v,
   endSlot: o,
-  fullWidth: a,
+  fullWidth: n,
   getLabel: p,
-  isDisabled: u,
+  isDisabled: d,
   isInvalid: N,
-  onChange: e,
-  open: n,
+  onChange: s,
+  open: c,
   openPopover: i,
-  placeholder: c,
-  searchInputRef: l,
+  placeholder: l,
+  searchInputRef: a,
   startSlot: m,
-  value: x
+  value: f
 }) => {
-  const { buttonExcludedFromTabOrder: j, inputField: r } = E({
+  const { buttonExcludedFromTabOrder: b, inputField: r } = G({
     isInvalid: N,
     hasEndSlot: !0,
-    fullWidth: a,
-    isDisabled: u
-  }), f = (s) => {
-    (s.key === "Escape" || s.key === "Backspace") && !b ? (s.stopPropagation(), e == null || e(void 0)) : s.key === "ArrowDown" || s.key === "ArrowUp" ? i == null || i() : s.key && s.key.match(/^[a-zA-Z0-9]$/) && (ot(() => {
+    fullWidth: n,
+    isDisabled: d
+  }), j = (e) => {
+    (e.key === "Escape" || e.key === "Backspace") && !v ? (e.stopPropagation(), s == null || s(void 0)) : e.key === "ArrowDown" || e.key === "ArrowUp" ? i == null || i() : e.key && e.key.match(/^[a-zA-Z0-9]$/) && (ot(() => {
       i == null || i();
-    }), l.current && (l.current.focus(), l.current.setSelectionRange(0, l.current.value.length)));
+    }), a.current && (a.current.focus(), a.current.setSelectionRange(0, a.current.value.length)));
   };
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
     m,
     /* @__PURE__ */ t.jsxs(
-      X,
+      J,
       {
         "aria-haspopup": "listbox",
-        "aria-expanded": n,
-        className: ({ isFocused: s, isHovered: w }) => r({
-          isHovered: w,
-          isFocused: s,
+        "aria-expanded": c,
+        className: ({ isFocused: e, isHovered: h }) => r({
+          isHovered: h,
+          isFocused: e,
           className: "grow"
         }),
-        isDisabled: u,
-        onKeyDown: f,
+        isDisabled: d,
+        onKeyDown: j,
         onPress: i,
         children: [
-          /* @__PURE__ */ t.jsx("div", { className: "grow text-left", children: x && p(x) ? /* @__PURE__ */ t.jsx(t.Fragment, { children: p(x) }) : /* @__PURE__ */ t.jsx(rt, { variant: "body-medium", color: "secondary", children: c }) }),
+          /* @__PURE__ */ t.jsx("div", { className: "grow truncate text-start", children: f && p(f) ? /* @__PURE__ */ t.jsx(t.Fragment, { children: p(f) }) : /* @__PURE__ */ t.jsx(rt, { variant: "body-medium", color: "secondary", children: l }) }),
           /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-            x && !u && !b ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+            f && !d && !v ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
               "div",
               {
-                className: j(),
+                className: b(),
                 role: "button",
-                onPointerDown: (s) => {
-                  s.stopPropagation(), e == null || e(void 0);
+                onPointerDown: (e) => {
+                  e.stopPropagation(), s == null || s(void 0);
                 },
-                onClick: (s) => {
-                  s.stopPropagation(), e == null || e(void 0);
+                onClick: (e) => {
+                  e.stopPropagation(), s == null || s(void 0);
                 },
-                children: /* @__PURE__ */ t.jsx(J, { name: "clear" })
+                children: /* @__PURE__ */ t.jsx(q, { name: "clear" })
               }
             ) }) : null,
-            /* @__PURE__ */ t.jsx(J, { name: "chevron-up-down", className: "h-4 w-4" })
+            /* @__PURE__ */ t.jsx(q, { name: "chevron-up-down", className: "h-4 w-4" })
           ] })
         ]
       }
     ),
     o
   ] });
-}, yt = ({
-  fullWidth: b,
+}, St = ({
+  fullWidth: v,
   getItemId: o,
-  getLabel: a,
+  getLabel: n,
   isDisabled: p,
-  isInvalid: u,
+  isInvalid: d,
   label: N,
-  onChange: e,
-  openPopover: n,
+  onChange: s,
+  openPopover: c,
   placeholder: i,
-  searchInputRef: c,
-  value: l
+  searchInputRef: l,
+  value: a
 }) => {
-  const { inputField: m } = E({
-    isInvalid: u,
+  const { inputField: m } = G({
+    isInvalid: d,
     hasEndSlot: !0,
-    fullWidth: b,
+    fullWidth: v,
     isDisabled: p
-  }), x = G(
+  }), f = W(
     (r) => {
-      r.key === "ArrowDown" || r.key === "ArrowUp" ? n() : r.key && r.key.match(/^[a-zA-Z0-9]$/) && (ot(() => {
-        n();
-      }), c.current && (c.current.focus(), c.current.setSelectionRange(0, c.current.value.length)));
+      r.key === "ArrowDown" || r.key === "ArrowUp" ? c() : r.key && r.key.match(/^[a-zA-Z0-9]$/) && (ot(() => {
+        c();
+      }), l.current && (l.current.focus(), l.current.setSelectionRange(0, l.current.value.length)));
     },
-    [n, c]
-  ), j = G(
+    [c, l]
+  ), b = W(
     (r) => {
-      l && e(
-        l.filter((f) => {
-          const s = o(f);
-          return !r.has(s);
+      a && s(
+        a.filter((j) => {
+          const e = o(j);
+          return !r.has(e);
         })
       );
     },
-    [o, e, l]
+    [o, s, a]
   );
   return /* @__PURE__ */ t.jsx(
-    mt,
+    at,
     {
-      className: ({ isFocusWithin: r, isHovered: f }) => m({
-        isHovered: f,
+      className: ({ isFocusWithin: r, isHovered: j }) => m({
+        isHovered: j,
         isFocused: r,
-        className: at(
-          f && !u && !p && !r ? "border-hover" : "",
+        className: pt(
+          j && !d && !p && !r ? "border-hover" : "",
           "has:[data-focused]:border has:[data-focused]:border-focus"
         )
       }),
       children: /* @__PURE__ */ t.jsxs(
-        X,
+        J,
         {
-          onPress: n,
-          onKeyDown: x,
+          onPress: c,
+          onKeyDown: f,
           isDisabled: p,
           className: "flex w-full outline-none",
           children: [
-            /* @__PURE__ */ t.jsx("div", { className: "grow text-left", children: l && l.length ? /* @__PURE__ */ t.jsx(
-              ft,
+            /* @__PURE__ */ t.jsx("div", { className: "grow text-left", children: a && a.length ? /* @__PURE__ */ t.jsx(
+              jt,
               {
                 label: N ?? "Selected items",
                 className: "-m-1.5 -mt-[0.3125rem] items-center",
-                onRemove: p ? void 0 : j,
-                children: l.map((r) => /* @__PURE__ */ t.jsx(jt, { id: o(r), isDisabled: p, children: a(r) }, o(r)))
+                onRemove: p ? void 0 : b,
+                children: a.map((r) => /* @__PURE__ */ t.jsx(ht, { id: o(r), isDisabled: p, children: n(r) }, o(r)))
               }
             ) : /* @__PURE__ */ t.jsx(rt, { color: "secondary", children: i }) }),
-            /* @__PURE__ */ t.jsx(J, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
+            /* @__PURE__ */ t.jsx(q, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
           ]
         }
       )
     }
   );
-}, St = ({
-  endSlot: b,
+}, Ft = ({
+  endSlot: v,
   isLoading: o,
-  onQueryChange: a,
+  onQueryChange: n,
   query: p,
-  searchInputRef: u,
+  searchInputRef: d,
   setQuery: N
 }) => {
-  const e = lt(), { clear: n, search: i } = it(), c = vt(o ?? !1, { delay: 500, minDuration: 200 }), { buttonExcludedFromTabOrder: l } = E({ fullWidth: !0 });
+  const s = lt(), { clear: c, search: i } = it(), l = yt(o ?? !1, { delay: 500, minDuration: 200 }), { buttonExcludedFromTabOrder: a } = G({ fullWidth: !0 });
   return /* @__PURE__ */ t.jsx("div", { className: "pb-1", children: /* @__PURE__ */ t.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__ */ t.jsx(
-      R.Input,
+      E.Input,
       {
-        ref: u,
-        id: e,
+        ref: d,
+        id: s,
         className: "w-full bg-transparent text-base outline-none placeholder:text-tertiary",
         onChange: (m) => {
-          N(m.target.value ?? ""), a == null || a(m.target.value);
+          N(m.target.value ?? ""), n == null || n(m.target.value);
         },
         placeholder: i,
         value: p ?? "",
@@ -246,118 +247,149 @@ const wt = ({
       }
     ),
     p && p.length ? /* @__PURE__ */ t.jsx(
-      X,
+      J,
       {
-        "aria-label": n,
-        className: l(),
+        "aria-label": c,
+        className: a(),
         excludeFromTabOrder: !0,
         onPress: () => {
           var m;
-          N(""), (m = u.current) == null || m.focus();
+          N(""), (m = d.current) == null || m.focus();
         },
-        children: /* @__PURE__ */ t.jsx(J, { name: "clear" })
+        children: /* @__PURE__ */ t.jsx(q, { name: "clear" })
       }
     ) : null,
-    b,
-    c ? /* @__PURE__ */ t.jsx(Nt, { className: "mx-2", size: "small" }) : null
+    v,
+    l ? /* @__PURE__ */ t.jsx(Nt, { className: "mx-2", size: "small" }) : null
   ] }) });
-}, V = ({
-  direction: b,
+}, _ = ({
+  direction: v,
   disabledItemIdKeys: o,
-  getItemId: a,
+  getItemId: n,
   getLabel: p,
-  isLoading: u,
+  isLoading: d,
   items: N,
-  label: e,
-  onLoadMore: n,
+  label: s,
+  onLoadMore: c,
   onQueryChange: i,
-  open: c,
-  placement: l,
+  open: l,
+  placement: a,
   searchInputRef: m,
-  selectRenderElements: x,
-  setOpenPopover: j,
+  selectRenderElements: f,
+  setOpenPopover: b,
   triggerRef: r
 }) => {
-  var P, T;
-  const { loadMore: f, noResultsFound: s } = it(), { filteredItems: w, query: O, setQuery: k } = ht({
+  var $, u, M;
+  const { loadMore: j, noResultsFound: e } = it(), { filteredItems: h, query: k, setQuery: D } = bt({
     getLabel: p,
     items: N,
     onQueryChange: i
-  }), y = B(null), [F, $] = A(!1), { item: D } = pt();
-  return z(() => $(!1), [c]), /* @__PURE__ */ t.jsx(
-    xt,
+  }), S = B(null), [O, g] = z(!1), { item: P } = dt(), T = B(null), R = h.length, y = mt({
+    count: R,
+    getScrollElement: () => T.current,
+    estimateSize: () => 24,
+    getItemKey: (x) => n(h[x]),
+    overscan: 6
+  }), F = y.getVirtualItems();
+  return K(() => g(!1), [l]), /* @__PURE__ */ t.jsx(
+    ft,
     {
       className: "p-1",
-      isOpen: c,
+      isOpen: l,
       disablePadding: !0,
       triggerRef: r,
-      onOpenChange: j,
-      "aria-label": e,
+      onOpenChange: b,
+      "aria-label": s,
       shouldUpdatePosition: !0,
-      placement: l,
+      placement: a,
       style: {
-        width: ((P = r.current) == null ? void 0 : P.offsetWidth) > 280 ? ((T = r.current) == null ? void 0 : T.offsetWidth) + "px" : "280px",
-        direction: b
+        width: (($ = r.current) == null ? void 0 : $.offsetWidth) > 280 ? ((u = r.current) == null ? void 0 : u.offsetWidth) + "px" : "280px",
+        direction: v
       },
-      children: c ? /* @__PURE__ */ t.jsxs("div", { className: "gap-1", children: [
+      children: l ? /* @__PURE__ */ t.jsxs("div", { className: "gap-1", children: [
         /* @__PURE__ */ t.jsx(
-          St,
+          Ft,
           {
             onQueryChange: i,
-            isLoading: u,
-            query: O,
-            setQuery: k,
+            isLoading: d,
+            query: k,
+            setQuery: D,
             searchInputRef: m
           }
         ),
         /* @__PURE__ */ t.jsxs(
-          R.Options,
+          E.Options,
           {
             static: !0,
-            className: dt({
-              className: "h-full max-h-72 overflow-y-auto"
-            }),
-            onKeyDown: (d) => {
-              document.activeElement === y.current && (d.code === "ArrowUp" || d.code === "ArrowDown") && d.preventDefault();
+            className: ut({}),
+            as: "div",
+            onKeyDown: (x) => {
+              document.activeElement === S.current && (x.code === "ArrowUp" || x.code === "ArrowDown") && x.preventDefault();
             },
             children: [
-              w.map((d) => /* @__PURE__ */ t.jsx(
-                R.Option,
+              /* @__PURE__ */ t.jsx(
+                "div",
                 {
-                  value: d,
-                  disabled: o == null ? void 0 : o.includes(a(d)),
-                  children: (S) => /* @__PURE__ */ t.jsx(
-                    ut,
+                  ref: T,
+                  className: "w-full overflow-y-auto",
+                  style: { contain: "strict", height: Math.min(288, y.getTotalSize()) },
+                  children: /* @__PURE__ */ t.jsx("div", { className: "relative w-full", style: { height: y.getTotalSize() }, children: /* @__PURE__ */ t.jsx(
+                    "div",
                     {
-                      hasSelection: !0,
-                      item: d,
-                      state: {
-                        ...S,
-                        active: S.active && !F
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${((M = F[0]) == null ? void 0 : M.start) ?? 0}px)`
                       },
-                      selectRenderElements: x
+                      children: F.map((x) => /* @__PURE__ */ t.jsx(
+                        E.Option,
+                        {
+                          "data-index": x.index,
+                          id: n(h[x.index]),
+                          as: "div",
+                          value: h[x.index],
+                          disabled: o == null ? void 0 : o.includes(
+                            n(h[x.index])
+                          ),
+                          ref: y.measureElement,
+                          children: (A) => /* @__PURE__ */ t.jsx(
+                            xt,
+                            {
+                              hasSelection: !0,
+                              item: h[x.index],
+                              state: {
+                                ...A,
+                                active: A.active && !O
+                              },
+                              selectRenderElements: f
+                            }
+                          )
+                        },
+                        x.key
+                      ))
                     }
-                  )
-                },
-                a(d)
-              )),
-              w != null && w.length ? null : /* @__PURE__ */ t.jsx(rt, { variant: "body-medium", color: "secondary", className: "px-2.5 py-2", children: s }),
-              n ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                /* @__PURE__ */ t.jsx(bt, { className: "my-1" }),
+                  ) })
+                }
+              ),
+              h != null && h.length ? null : /* @__PURE__ */ t.jsx(rt, { variant: "body-medium", color: "secondary", className: "px-2.5 py-2", children: e }),
+              c ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                /* @__PURE__ */ t.jsx(vt, { className: "my-1" }),
                 /* @__PURE__ */ t.jsx(
-                  X,
+                  J,
                   {
-                    isDisabled: u,
-                    onFocusChange: $,
-                    ref: y,
-                    className: D({
+                    isDisabled: d,
+                    onFocusChange: g,
+                    ref: S,
+                    className: P({
                       className: "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 d;
-                      n(), (d = m.current) == null || d.focus();
+                      var x;
+                      c(), (x = m.current) == null || x.focus();
                     },
-                    children: f
+                    children: j
                   }
                 )
               ] }) : null
@@ -367,87 +399,87 @@ const wt = ({
       ] }) : null
     }
   );
-}, es = ({
-  by: b,
+}, ie = ({
+  by: v,
   defaultValue: o,
-  description: a,
+  description: n,
   disableClearLogic: p,
-  disabledItemIdKeys: u,
+  disabledItemIdKeys: d,
   endSlot: N,
-  errorMessage: e,
-  fullWidth: n = !0,
+  errorMessage: s,
+  fullWidth: c = !0,
   getItemId: i,
-  getLabel: c,
-  hideHintLabel: l,
+  getLabel: l,
+  hideHintLabel: a,
   hideInputFooter: m,
-  hideInputHeader: x,
-  isDisabled: j,
+  hideInputHeader: f,
+  isDisabled: b,
   isInvalid: r,
-  isLoading: f,
-  isRequired: s,
-  items: w,
-  label: O,
-  name: k,
-  onChange: y,
-  onLoadMore: F,
-  onQueryChange: $,
-  placeholder: D,
-  selectRenderElements: P,
-  startSlot: T,
-  value: d
+  isLoading: j,
+  isRequired: e,
+  items: h,
+  label: k,
+  name: D,
+  onChange: S,
+  onLoadMore: O,
+  onQueryChange: g,
+  placeholder: P,
+  selectRenderElements: T,
+  startSlot: R,
+  value: y
 }) => {
-  const { isDisabled: S } = K(Y), g = B(null), h = B(null), L = B(null), [Z, q] = A(d ?? o), [W, M] = A(!1), H = () => {
-    var v;
-    M(!0), (v = h.current) == null || v.click();
-  }, I = () => M(!1), U = G(
-    (v) => {
-      q(v), y == null || y(v), I();
+  const { isDisabled: F } = H(V), $ = B(null), u = B(null), M = B(null), [x, A] = z(y ?? o), [U, L] = z(!1), Y = () => {
+    var w;
+    L(!0), (w = u.current) == null || w.click();
+  }, I = () => L(!1), Z = W(
+    (w) => {
+      A(w), S == null || S(w), I();
     },
-    [y]
-  ), { direction: Q } = _(), { wrapper: C } = E({
-    fullWidth: n,
+    [S]
+  ), { direction: Q } = X(), { wrapper: C } = G({
+    fullWidth: c,
     isInvalid: r,
-    isDisabled: j || S
+    isDisabled: b || F
   });
-  return z(() => {
-    q(d ?? o);
-  }, [o, d]), /* @__PURE__ */ t.jsx(
-    R,
+  return K(() => {
+    A(y ?? o);
+  }, [o, y]), /* @__PURE__ */ t.jsx(
+    E,
     {
-      disabled: j || S,
-      name: k,
-      value: d ?? Z ?? "",
-      onChange: U,
-      by: b,
-      children: ({ disabled: v, value: tt }) => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      disabled: b || F,
+      name: D,
+      value: y ?? x ?? "",
+      onChange: Z,
+      by: v,
+      children: ({ disabled: w, value: tt }) => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
         /* @__PURE__ */ t.jsxs("div", { className: C(), children: [
           /* @__PURE__ */ t.jsx(
             nt,
             {
-              label: O,
-              hideHintLabel: l,
-              hideInputHeader: x,
-              isRequired: s
+              label: k,
+              hideHintLabel: a,
+              hideInputHeader: f,
+              isRequired: e
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { ref: L, children: [
-            /* @__PURE__ */ t.jsx(R.Button, { ref: h, className: "hidden" }),
+          /* @__PURE__ */ t.jsxs("div", { ref: M, children: [
+            /* @__PURE__ */ t.jsx(E.Button, { ref: u, className: "hidden" }),
             /* @__PURE__ */ t.jsx(
               wt,
               {
                 disableClearLogic: p,
                 endSlot: N,
-                fullWidth: n,
-                getLabel: c,
+                fullWidth: c,
+                getLabel: l,
                 getItemId: i,
-                isDisabled: v,
+                isDisabled: w,
                 isInvalid: r,
-                open: W,
-                openPopover: H,
-                onChange: U,
-                placeholder: D,
-                searchInputRef: g,
-                startSlot: T,
+                open: U,
+                openPopover: Y,
+                onChange: Z,
+                placeholder: P,
+                searchInputRef: $,
+                startSlot: R,
                 value: tt
               }
             )
@@ -455,118 +487,118 @@ const wt = ({
           /* @__PURE__ */ t.jsx(
             ct,
             {
-              description: a,
-              errorMessage: e,
+              description: n,
+              errorMessage: s,
               hideInputFooter: m
             }
           )
         ] }),
         /* @__PURE__ */ t.jsx(
-          V,
+          _,
           {
-            triggerRef: L,
-            label: O,
+            triggerRef: M,
+            label: k,
             getItemId: i,
-            getLabel: c,
-            items: w,
-            open: W,
-            setOpenPopover: M,
-            selectRenderElements: P,
-            disabledItemIdKeys: u,
+            getLabel: l,
+            items: h,
+            open: U,
+            setOpenPopover: L,
+            selectRenderElements: T,
+            disabledItemIdKeys: d,
             direction: Q,
-            onQueryChange: $,
-            isLoading: f,
-            searchInputRef: g,
-            onLoadMore: F
+            onQueryChange: g,
+            isLoading: j,
+            searchInputRef: $,
+            onLoadMore: O
           }
         )
       ] })
     }
   );
-}, os = ({
-  by: b,
+}, ne = ({
+  by: v,
   defaultValue: o,
-  description: a,
+  description: n,
   disableClearLogic: p,
-  disabledItemIdKeys: u,
+  disabledItemIdKeys: d,
   endSlot: N,
-  errorMessage: e,
-  fullWidth: n = !0,
+  errorMessage: s,
+  fullWidth: c = !0,
   getItemId: i,
-  getLabel: c,
-  hideHintLabel: l,
+  getLabel: l,
+  hideHintLabel: a,
   hideInputFooter: m,
-  hideInputHeader: x,
-  isDisabled: j,
+  hideInputHeader: f,
+  isDisabled: b,
   isInvalid: r,
-  isLoading: f,
-  isRequired: s,
-  items: w,
-  label: O,
-  labelId: k,
-  name: y,
-  onChange: F,
-  onLoadMore: $,
-  onQueryChange: D,
-  placeholder: P,
-  selectRenderElements: T,
-  startSlot: d,
-  value: S
+  isLoading: j,
+  isRequired: e,
+  items: h,
+  label: k,
+  labelId: D,
+  name: S,
+  onChange: O,
+  onLoadMore: g,
+  onQueryChange: P,
+  placeholder: T,
+  selectRenderElements: R,
+  startSlot: y,
+  value: F
 }) => {
-  const { isDisabled: g } = K(Y), h = B(null), L = B(null), Z = B(null), [q, W] = A(S ?? o), [M, H] = A(!1), I = () => {
-    var v;
-    H(!0), (v = L.current) == null || v.click();
-  }, U = G(
-    (v) => {
-      W(v), F == null || F(v);
+  const { isDisabled: $ } = H(V), u = B(null), M = B(null), x = B(null), [A, U] = z(F ?? o), [L, Y] = z(!1), I = () => {
+    var w;
+    Y(!0), (w = M.current) == null || w.click();
+  }, Z = W(
+    (w) => {
+      U(w), O == null || O(w);
     },
-    [F]
-  ), { direction: Q } = _(), { wrapper: C } = E({
-    fullWidth: n,
+    [O]
+  ), { direction: Q } = X(), { wrapper: C } = G({
+    fullWidth: c,
     isInvalid: r,
-    isDisabled: j || g
+    isDisabled: b || $
   });
-  return z(() => {
-    W(S ?? o);
-  }, [o, S]), /* @__PURE__ */ t.jsx(
-    R,
+  return K(() => {
+    U(F ?? o);
+  }, [o, F]), /* @__PURE__ */ t.jsx(
+    E,
     {
-      disabled: j || g,
-      name: y,
-      value: S ?? q ?? [],
-      onChange: U,
-      by: b,
+      disabled: b || $,
+      name: S,
+      value: F ?? A ?? [],
+      onChange: Z,
+      by: v,
       multiple: !0,
-      children: ({ disabled: v, value: tt }) => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      children: ({ disabled: w, value: tt }) => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
         /* @__PURE__ */ t.jsxs("div", { className: C(), children: [
           /* @__PURE__ */ t.jsx(
             nt,
             {
-              label: O,
-              isRequired: s,
-              hideHintLabel: l,
-              hideInputHeader: x,
-              labelId: k
+              label: k,
+              isRequired: e,
+              hideHintLabel: a,
+              hideInputHeader: f,
+              labelId: D
             }
           ),
-          /* @__PURE__ */ t.jsxs("div", { ref: Z, children: [
-            /* @__PURE__ */ t.jsx(R.Button, { ref: L, className: "hidden" }),
+          /* @__PURE__ */ t.jsxs("div", { ref: x, children: [
+            /* @__PURE__ */ t.jsx(E.Button, { ref: M, className: "hidden" }),
             /* @__PURE__ */ t.jsx(
-              yt,
+              St,
               {
                 disableClearLogic: p,
                 endSlot: N,
-                fullWidth: n,
-                getLabel: c,
+                fullWidth: c,
+                getLabel: l,
                 getItemId: i,
-                isDisabled: v,
+                isDisabled: w,
                 isInvalid: r,
-                onChange: U,
-                open: M,
+                onChange: Z,
+                open: L,
                 openPopover: I,
-                placeholder: P,
-                searchInputRef: h,
-                startSlot: d,
+                placeholder: T,
+                searchInputRef: u,
+                startSlot: y,
                 value: tt
               }
             )
@@ -574,108 +606,108 @@ const wt = ({
           /* @__PURE__ */ t.jsx(
             ct,
             {
-              description: a,
-              errorMessage: e,
+              description: n,
+              errorMessage: s,
               hideInputFooter: m
             }
           )
         ] }),
         /* @__PURE__ */ t.jsx(
-          V,
+          _,
           {
-            label: O,
-            searchInputRef: h,
-            triggerRef: Z,
+            label: k,
+            searchInputRef: u,
+            triggerRef: x,
             getItemId: i,
-            getLabel: c,
-            items: w,
-            open: M,
-            setOpenPopover: H,
-            selectRenderElements: T,
-            disabledItemIdKeys: u,
+            getLabel: l,
+            items: h,
+            open: L,
+            setOpenPopover: Y,
+            selectRenderElements: R,
+            disabledItemIdKeys: d,
             direction: Q,
-            onQueryChange: D,
-            isLoading: f,
-            onLoadMore: $
+            onQueryChange: P,
+            isLoading: j,
+            onLoadMore: g
           }
         )
       ] })
     }
   );
-}, is = ({
-  by: b,
+}, ce = ({
+  by: v,
   children: o,
-  defaultValue: a,
+  defaultValue: n,
   disabledItemIdKeys: p,
-  getItemId: u,
+  getItemId: d,
   getLabel: N,
-  isDisabled: e,
-  isInvalid: n,
+  isDisabled: s,
+  isInvalid: c,
   isLoading: i,
-  items: c,
-  label: l,
+  items: l,
+  label: a,
   name: m,
-  onChange: x,
-  onQueryChange: j,
+  onChange: f,
+  onQueryChange: b,
   selectRenderElements: r,
-  value: f
+  value: j
 }) => {
-  const { isDisabled: s } = K(Y), w = B(null), O = B(null), k = B(null), [y, F] = A(f ?? a), [$, D] = A(!1), P = () => {
-    var h;
-    D(!0), (h = O.current) == null || h.click();
-  }, T = () => D(!1), d = G(
-    (h) => {
-      F(h), x == null || x(h), T();
+  const { isDisabled: e } = H(V), h = B(null), k = B(null), D = B(null), [S, O] = z(j ?? n), [g, P] = z(!1), T = () => {
+    var u;
+    P(!0), (u = k.current) == null || u.click();
+  }, R = () => P(!1), y = W(
+    (u) => {
+      O(u), f == null || f(u), R();
     },
-    [x]
-  ), { direction: S } = _(), { wrapper: g } = E({
+    [f]
+  ), { direction: F } = X(), { wrapper: $ } = G({
     fullWidth: !1,
-    isInvalid: n,
-    isDisabled: e
+    isInvalid: c,
+    isDisabled: s
   });
-  return z(() => {
-    F(f ?? a);
-  }, [a, f]), /* @__PURE__ */ t.jsx(
-    st,
+  return K(() => {
+    O(j ?? n);
+  }, [n, j]), /* @__PURE__ */ t.jsx(
+    et,
     {
       values: [
         [
-          et,
+          st,
           {
-            onPress: () => P(),
-            isDisabled: e || s
+            onPress: () => T(),
+            isDisabled: s || e
           }
         ]
       ],
       children: /* @__PURE__ */ t.jsx(
-        R,
+        E,
         {
-          disabled: e,
+          disabled: s,
           name: m,
-          value: f ?? y ?? "",
-          onChange: d,
-          by: b,
+          value: j ?? S ?? "",
+          onChange: y,
+          by: v,
           children: () => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            /* @__PURE__ */ t.jsx("div", { className: g(), children: /* @__PURE__ */ t.jsxs("div", { ref: k, children: [
-              /* @__PURE__ */ t.jsx(R.Button, { ref: O, className: "hidden" }),
+            /* @__PURE__ */ t.jsx("div", { className: $(), children: /* @__PURE__ */ t.jsxs("div", { ref: D, children: [
+              /* @__PURE__ */ t.jsx(E.Button, { ref: k, className: "hidden" }),
               o
             ] }) }),
             /* @__PURE__ */ t.jsx(
-              V,
+              _,
               {
-                triggerRef: k,
-                label: l,
-                getItemId: u,
+                triggerRef: D,
+                label: a,
+                getItemId: d,
                 getLabel: N,
-                items: c,
-                open: $,
-                setOpenPopover: D,
+                items: l,
+                open: g,
+                setOpenPopover: P,
                 selectRenderElements: r,
                 disabledItemIdKeys: p,
-                direction: S,
-                onQueryChange: j,
+                direction: F,
+                onQueryChange: b,
                 isLoading: i,
-                searchInputRef: w,
+                searchInputRef: h,
                 placement: "bottom start"
               }
             )
@@ -684,79 +716,79 @@ const wt = ({
       )
     }
   );
-}, ns = ({
-  by: b,
+}, le = ({
+  by: v,
   children: o,
-  defaultValue: a,
+  defaultValue: n,
   disabledItemIdKeys: p,
-  fullWidth: u = !0,
+  fullWidth: d = !0,
   getItemId: N,
-  getLabel: e,
-  isDisabled: n,
+  getLabel: s,
+  isDisabled: c,
   isInvalid: i,
-  isLoading: c,
-  items: l,
+  isLoading: l,
+  items: a,
   label: m,
-  name: x,
-  onChange: j,
+  name: f,
+  onChange: b,
   onQueryChange: r,
-  selectRenderElements: f,
-  value: s
+  selectRenderElements: j,
+  value: e
 }) => {
-  const { isDisabled: w } = K(Y), O = B(null), k = B(null), y = B(null), [F, $] = A(s ?? a), [D, P] = A(!1), T = () => {
-    var h;
-    P(!0), (h = k.current) == null || h.click();
-  }, d = G(
-    (h) => {
-      $(h), j == null || j(h);
+  const { isDisabled: h } = H(V), k = B(null), D = B(null), S = B(null), [O, g] = z(e ?? n), [P, T] = z(!1), R = () => {
+    var u;
+    T(!0), (u = D.current) == null || u.click();
+  }, y = W(
+    (u) => {
+      g(u), b == null || b(u);
     },
-    [j]
-  ), { direction: S } = _(), { wrapper: g } = E({
-    fullWidth: u,
+    [b]
+  ), { direction: F } = X(), { wrapper: $ } = G({
+    fullWidth: d,
     isInvalid: i,
-    isDisabled: n
+    isDisabled: c
   });
-  return z(() => {
-    $(s ?? a);
-  }, [a, s]), /* @__PURE__ */ t.jsx(
-    st,
+  return K(() => {
+    g(e ?? n);
+  }, [n, e]), /* @__PURE__ */ t.jsx(
+    et,
     {
       values: [
         [
-          et,
-          { onPress: () => T(), isDisabled: n || w }
+          st,
+          { onPress: () => R(), isDisabled: c || h }
         ]
       ],
       children: /* @__PURE__ */ t.jsx(
-        R,
+        E,
         {
-          disabled: n,
-          name: x,
-          value: s ?? F ?? [],
-          onChange: d,
-          by: b,
+          disabled: c,
+          name: f,
+          value: e ?? O ?? [],
+          onChange: y,
+          by: v,
           multiple: !0,
           children: () => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            /* @__PURE__ */ t.jsx("div", { className: g(), children: /* @__PURE__ */ t.jsxs("div", { ref: y, children: [
-              /* @__PURE__ */ t.jsx(R.Button, { ref: k, className: "hidden" }),
+            /* @__PURE__ */ t.jsx("div", { className: $(), children: /* @__PURE__ */ t.jsxs("div", { ref: S, children: [
+              /* @__PURE__ */ t.jsx(E.Button, { ref: D, className: "hidden" }),
               o
             ] }) }),
             /* @__PURE__ */ t.jsx(
-              V,
+              _,
               {
                 label: m,
-                searchInputRef: O,
-                triggerRef: y,
+                searchInputRef: k,
+                triggerRef: S,
                 getItemId: N,
-                getLabel: e,
-                items: l,
-                open: D,
-                setOpenPopover: P,
-                selectRenderElements: f,
+                getLabel: s,
+                items: a,
+                open: P,
+                setOpenPopover: T,
+                selectRenderElements: j,
                 disabledItemIdKeys: p,
-                direction: S,
+                direction: F,
                 onQueryChange: r,
-                isLoading: c
+                isLoading: l
               }
             )
           ] })
@@ -766,8 +798,8 @@ const wt = ({
   );
 };
 export {
-  os as MultiSearchListField,
-  ns as MultiSearchListFieldWithCustomTrigger,
-  es as SearchListField,
-  is as SearchListFieldWithCustomTrigger
+  ne as MultiSearchListField,
+  le as MultiSearchListFieldWithCustomTrigger,
+  ie as SearchListField,
+  ce as SearchListFieldWithCustomTrigger
 };