@new-black/lyra 0.1.16 → 0.1.19

package/dist/lyra20.js

@@ -1,302 +1,310 @@
 import { j as s } from "./lyra54.js";
-import { useState as N, useCallback as z, useRef as J, useMemo as ss, useEffect as L } from "react";
-import { Button as W, Label as ts } from "./lyra53.js";
+import { useState as b, useRef as M, useCallback as L, useMemo as rs, useEffect as X, useId as es } from "react";
+import { Button as q, Label as ls } from "./lyra53.js";
+import { twMerge as A } from "./lyra55.js";
 import "./lyra2.js";
-import { cx as $ } from "./lyra100.js";
-import "./lyra104.js";
-import { Text as g } from "./lyra43.js";
-import "./lyra105.js";
-import "./lyra106.js";
-import "./lyra108.js";
+import { cx as I } from "./lyra99.js";
+import "./lyra100.js";
+import { Text as H } from "./lyra43.js";
+import "./lyra101.js";
+import "./lyra102.js";
+import "./lyra103.js";
 import "./lyra8.js";
-import { buttonStyles as X } from "./lyra9.js";
+import { buttonStyles as Y } from "./lyra9.js";
 import "./lyra10.js";
 import "./lyra11.js";
-import "./lyra116.js";
+import "./lyra105.js";
 import "./lyra13.js";
 import "./lyra26.js";
-import { SvgIcon as F } from "./lyra39.js";
+import { SvgIcon as v } from "./lyra39.js";
 import "./lyra16.js";
 import "./lyra18.js";
 import "./lyra19.js";
 import "./lyra28.js";
-import { listBoxStyles as rs } from "./lyra29.js";
-import { listBoxItemStyles as es } from "./lyra155.js";
-import { Popover as os } from "./lyra30.js";
+import { listBoxStyles as is } from "./lyra29.js";
+import { listBoxItemStyles as as } from "./lyra150.js";
+import { Popover as ns } from "./lyra30.js";
 import "./lyra32.js";
-import "./lyra117.js";
-import { sharedInputFieldWrapperStyles as q, sharedInputFieldStyles as G, sharedInputlabelStyles as ls, sharedInputHintStyles as is, sharedInputStyles as as } from "./lyra22.js";
-import { TagGroup as ns, TagItem as cs } from "./lyra156.js";
+import "./lyra107.js";
+import { sharedInputFieldWrapperStyles as G, sharedInputFieldStyles as J, sharedInputlabelStyles as os, sharedInputHintStyles as cs, sharedInputStyles as ms } from "./lyra22.js";
+import { TagGroup as ds, TagItem as us } from "./lyra151.js";
+import { flushSync as _ } from "react-dom";
 import "./lyra23.js";
-import "./lyra118.js";
+import "./lyra110.js";
 import "./lyra25.js";
 import "./lyra27.js";
-import "./lyra112.js";
-import { Spinner as ms } from "./lyra37.js";
+import "./lyra111.js";
+import { Spinner as xs } from "./lyra37.js";
 import "./lyra40.js";
-import "./lyra114.js";
+import "./lyra109.js";
 import "./lyra42.js";
-import "./lyra151.js";
-import { useSpinDelay as ds } from "./lyra48.js";
+import "./lyra144.js";
+import { useSpinDelay as fs } from "./lyra48.js";
 import "./lyra49.js";
 import "./lyra58.js";
 import "./lyra51.js";
-import { Combobox as y } from "./lyra157.js";
-import { twMerge as B } from "./lyra55.js";
-import { useLocale as Y, useFilter as ps } from "./lyra52.js";
-const us = ({
-  itemLabelKey: t,
-  items: o,
-  onQueryChange: l
+import { Combobox as D } from "./lyra152.js";
+import { useLocale as P, useFilter as ps } from "./lyra52.js";
+const hs = ({
+  itemLabelKey: r,
+  items: i,
+  onQueryChange: n
 }) => {
-  const [i, d] = N(""), { contains: n, startsWith: f } = ps({ sensitivity: "base" }), p = ss(() => {
-    if (l)
-      return o;
+  const [a, d] = b(""), { contains: c, startsWith: p } = ps({ sensitivity: "base" }), m = rs(() => {
+    if (n)
+      return i;
     {
-      let m = [];
-      m = o.filter((r) => f(r[t], i ?? ""));
-      const c = o.filter((r) => n(r[t], i ?? "")).sort((r, u) => {
-        const e = r[t].indexOf(i ?? ""), x = u[t].indexOf(i ?? "");
-        return e - x;
+      let u = [];
+      u = i.filter((l) => p(l[r], a ?? ""));
+      const h = i.filter((l) => c(l[r], a ?? "")).sort((l, o) => {
+        const f = l[r].indexOf(a ?? ""), t = o[r].indexOf(a ?? "");
+        return f - t;
       });
-      return m = m.concat(c), m = m.filter(
-        (r, u, e) => u === e.findIndex((x) => x[t] === r[t])
-      ), m;
+      return u = u.concat(h), u = u.filter(
+        (l, o, f) => o === f.findIndex((t) => t[r] === l[r])
+      ), u;
     }
-  }, [n, f, t, o, l, i]);
-  return L(() => {
-    l && (l == null || l(i));
-  }, [i]), {
-    filteredItems: p,
-    query: i,
+  }, [c, p, r, i, n, a]);
+  return X(() => {
+    n && (n == null || n(a));
+  }, [a]), {
+    filteredItems: m,
+    query: a,
     setQuery: d
   };
-}, Z = (t) => $(
-  t === "small" && "min-h-[42px]",
-  t === "medium" && "min-h-[50px]",
-  t === "large" && "min-h-[58px]"
-), xs = ({
-  endSlot: t,
-  fullWidth: o,
-  isDisabled: l,
-  isInvalid: i,
-  open: d,
-  openPopover: n,
-  itemLabelKey: f,
-  placeholder: p,
-  size: m = "medium",
-  startSlot: j,
-  value: c,
-  onChange: r
+}, Q = (r) => I(
+  r === "small" && "min-h-[42px]",
+  r === "medium" && "min-h-[50px]",
+  r === "large" && "min-h-[58px]"
+), js = ({
+  endSlot: r,
+  fullWidth: i,
+  isDisabled: n,
+  isInvalid: a,
+  itemLabelKey: d,
+  onChange: c,
+  open: p,
+  openPopover: m,
+  placeholder: u,
+  size: x = "medium",
+  startSlot: h,
+  value: l,
+  searchInputRef: o
 }) => {
-  const u = (e) => {
-    e.key === "Escape" || e.key === "Backspace" ? r == null || r(void 0) : (e.key === "ArrowDown" || e.key === "ArrowUp") && (n == null || n());
+  const f = (t) => {
+    t.key === "Escape" || t.key === "Backspace" ? c == null || c(void 0) : t.key === "ArrowDown" || t.key === "ArrowUp" ? m == null || m() : t.key && t.key.match(/^[a-zA-Z0-9]$/) && (_(() => {
+      m == null || m();
+    }), o.current && o.current.setSelectionRange(0, o.current.value.length));
   };
   return /* @__PURE__ */ s.jsxs(
-    W,
+    q,
     {
       "aria-haspopup": "listbox",
-      "aria-expanded": d,
-      className: ({ isFocused: e, isHovered: x }) => G({
-        fullWidth: o,
-        isDisabled: l,
-        isHovered: x,
-        isFocused: e,
-        isInvalid: i,
-        size: m,
-        className: $(Z(m), "gap-2")
+      "aria-expanded": p,
+      className: ({ isFocused: t, isHovered: N }) => J({
+        fullWidth: i,
+        isDisabled: n,
+        isHovered: N,
+        isFocused: t,
+        isInvalid: a,
+        size: x,
+        className: I(Q(x), "gap-2")
       }),
-      onKeyDown: u,
-      onPress: n,
+      onKeyDown: f,
+      onPress: m,
       children: [
-        j,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: c != null && c[f] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: c == null ? void 0 : c[f] }) : /* @__PURE__ */ s.jsx(g, { color: "secondary", children: p }) }),
-        t,
+        h,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: l != null && l[d] ? /* @__PURE__ */ s.jsx(s.Fragment, { children: l == null ? void 0 : l[d] }) : /* @__PURE__ */ s.jsx(H, { color: "secondary", children: u }) }),
+        r,
         /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-          c ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
+          l ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsx(
             "div",
             {
-              className: B(
-                X({
+              className: A(
+                Y({
                   size: "small",
                   color: "monochrome",
                   variant: "ghost",
                   className: "p-1",
-                  isDisabled: l
+                  isDisabled: n
                 })
               ),
               role: "button",
-              onPointerDown: (e) => {
-                e.stopPropagation(), r == null || r(void 0);
+              onPointerDown: (t) => {
+                t.stopPropagation(), c == null || c(void 0);
               },
-              onClick: (e) => {
-                e.stopPropagation(), r == null || r(void 0);
+              onClick: (t) => {
+                t.stopPropagation(), c == null || c(void 0);
               },
-              children: /* @__PURE__ */ s.jsx(F, { name: "cross", className: "h-4 w-4" })
+              children: /* @__PURE__ */ s.jsx(v, { name: "cross", className: "h-4 w-4" })
             }
           ) }) : null,
           /* @__PURE__ */ s.jsx(
-            F,
+            v,
             {
               name: "chevron-down",
-              className: $("h-4 w-4 transition duration-150", d && "rotate-180")
+              className: I("h-4 w-4 transition duration-150", p && "rotate-180")
             }
           )
         ] })
       ]
     }
   );
-}, fs = ({
-  endSlot: t,
-  fullWidth: o,
-  isDisabled: l,
-  isInvalid: i,
-  open: d,
-  openPopover: n,
-  itemLabelKey: f,
-  itemIdKey: p,
-  placeholder: m,
-  size: j = "medium",
-  label: c,
-  startSlot: r,
-  onChange: u,
-  value: e
+}, Ns = ({
+  endSlot: r,
+  fullWidth: i,
+  isDisabled: n,
+  isInvalid: a,
+  itemIdKey: d,
+  itemLabelKey: c,
+  label: p,
+  onChange: m,
+  open: u,
+  openPopover: x,
+  placeholder: h,
+  size: l = "medium",
+  startSlot: o,
+  value: f,
+  searchInputRef: t
 }) => {
-  const x = (a) => {
-    (a.key === "ArrowDown" || a.key === "ArrowUp") && (n == null || n());
+  const N = (e) => {
+    e.key === "ArrowDown" || e.key === "ArrowUp" ? x == null || x() : e.key && e.key.match(/^[a-zA-Z0-9]$/) && (_(() => {
+      x == null || x();
+    }), t.current && t.current.setSelectionRange(0, t.current.value.length));
   };
   return /* @__PURE__ */ s.jsxs(
-    W,
+    q,
     {
-      className: ({ isHovered: a, isFocused: h }) => G({
-        fullWidth: o,
-        isDisabled: l,
-        isHovered: a,
-        isFocused: h,
-        isInvalid: i,
-        size: j,
-        className: Z(j)
+      className: ({ isFocused: e, isHovered: j }) => J({
+        fullWidth: i,
+        isDisabled: n,
+        isHovered: j,
+        isFocused: e,
+        isInvalid: a,
+        size: l,
+        className: Q(l)
       }),
-      onPress: n,
-      onKeyDown: x,
+      onPress: x,
+      onKeyDown: N,
       "aria-haspopup": "listbox",
-      "aria-expanded": d,
+      "aria-expanded": u,
       children: [
-        r,
-        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: e && e.length ? /* @__PURE__ */ s.jsx(
-          ns,
+        o,
+        /* @__PURE__ */ s.jsx("div", { className: "grow text-left", children: f && f.length ? /* @__PURE__ */ s.jsx(
+          ds,
           {
-            "aria-label": c ?? "Selected items",
-            onRemove: (a) => {
-              e && u(e.filter((h) => !a.has(h[p])));
+            "aria-label": p ?? "Selected items",
+            onRemove: (e) => {
+              f && m(f.filter((j) => !e.has(j[d])));
             },
-            children: e.map((a) => /* @__PURE__ */ s.jsx(cs, { ...a, children: a == null ? void 0 : a[f] }, a[p]))
+            children: f.map((e) => /* @__PURE__ */ s.jsx(us, { ...e, children: e == null ? void 0 : e[c] }, e[d]))
           }
-        ) : /* @__PURE__ */ s.jsx(g, { color: "secondary", children: m }) }),
-        t,
+        ) : /* @__PURE__ */ s.jsx(H, { color: "secondary", children: h }) }),
+        r,
         /* @__PURE__ */ s.jsx(
-          F,
+          v,
           {
             name: "chevron-down",
-            className: $("h-4 w-4 min-w-[16px] transition duration-150", d && "rotate-180")
+            className: I("h-4 w-4 min-w-[16px] transition duration-150", u && "rotate-180")
           }
         )
       ]
     }
   );
-}, _ = ({
-  label: t,
-  optionalLabel: o,
-  isRequired: l
-}) => /* @__PURE__ */ s.jsxs("div", { className: $("flex items-center gap-3", t ? "justify-between" : "justify-end"), children: [
-  t ? /* @__PURE__ */ s.jsx(
-    ts,
+}, K = ({
+  isRequired: r,
+  label: i,
+  optionalLabel: n
+}) => /* @__PURE__ */ s.jsxs("div", { className: I("flex items-center gap-3", i ? "justify-between" : "justify-end"), children: [
+  i ? /* @__PURE__ */ s.jsx(
+    ls,
     {
-      className: ls(),
+      className: os(),
       style: { fontFamily: "var(--input-label-font-family)" },
-      children: t
+      children: i
     }
   ) : null,
-  l === !1 ? /* @__PURE__ */ s.jsx(
+  r === !1 ? /* @__PURE__ */ s.jsx(
     "span",
     {
-      className: is(),
+      className: cs(),
       style: { fontFamily: "var(--input-hint-font-family)" },
-      children: o
+      children: n
     }
   ) : null
-] }), Q = ({ description: t, errorMessage: o }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-  t && /* @__PURE__ */ s.jsx(g, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: t }),
-  o && /* @__PURE__ */ s.jsx(g, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: o })
-] }), js = ({
-  item: t,
-  state: o,
-  renderItem: l,
-  itemLabelKey: i
+] }), C = ({ description: r, errorMessage: i }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+  r && /* @__PURE__ */ s.jsx(H, { className: "ml-1 mt-1.5", variant: "body-small", color: "secondary", slot: "description", children: r }),
+  i && /* @__PURE__ */ s.jsx(H, { className: "ml-1 mt-1.5", variant: "body-small", color: "accent-danger", slot: "errorMessage", children: i })
+] }), bs = ({
+  item: r,
+  itemLabelKey: i,
+  renderItem: n,
+  state: a
 }) => {
-  const d = t == null ? void 0 : t[i];
-  return l ? l(t, o) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
-    o.selected ? /* @__PURE__ */ s.jsx(F, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
+  const d = r == null ? void 0 : r[i];
+  return n ? n(r, a) : /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
+    a.selected ? /* @__PURE__ */ s.jsx(v, { name: "checkmark", className: "h-4 w-4" }) : /* @__PURE__ */ s.jsx("div", { className: "h-4 w-4" }),
     d
   ] });
-}, hs = ({
-  onQueryChange: t,
-  isLoading: o,
-  startSlot: l,
+}, Ss = ({
+  clearLabel: r = "Clear",
   endSlot: i,
-  clearLabel: d = "Clear",
-  query: n,
-  setQuery: f
+  isLoading: n,
+  onQueryChange: a,
+  query: d,
+  setQuery: c,
+  startSlot: p,
+  searchInputRef: m
 }) => {
-  const [p, m] = N(!1), [j, c] = N(!1), [r, u] = N(!1), e = ds(o ?? !1, { delay: 500, minDuration: 200 });
-  return L(() => {
-    setTimeout(() => {
-      u(!0);
-    }, 10);
+  const u = es(), [x, h] = b(!1), [l, o] = b(!1), f = fs(n ?? !1, { delay: 500, minDuration: 200 });
+  return X(() => {
+    var t;
+    (t = m.current) == null || t.focus();
   }, []), /* @__PURE__ */ s.jsx(
     "div",
     {
-      className: q({
+      className: G({
         fullWidth: !0,
         className: "box-border  py-3 pe-[--list-box-item-padding-end] ps-[--list-box-item-padding-start] backdrop-blur-xl"
       }),
       children: /* @__PURE__ */ s.jsxs(
         "div",
         {
-          className: B(
-            G({
+          className: A(
+            J({
               fullWidth: !0,
-              isFocused: p,
-              isHovered: j,
+              isFocused: x,
+              isHovered: l,
               className: "bg-neutral-0 px-2"
             })
           ),
-          onPointerEnter: () => c(!0),
-          onPointerLeave: () => c(!1),
-          onMouseEnter: () => c(!0),
-          onMouseLeave: () => c(!1),
+          onPointerEnter: () => o(!0),
+          onPointerLeave: () => o(!1),
+          onMouseEnter: () => o(!0),
+          onMouseLeave: () => o(!1),
           children: [
-            /* @__PURE__ */ s.jsx(F, { name: "search", className: "-me-2 h-4 w-4" }),
-            l,
-            r ? /* @__PURE__ */ s.jsx(
-              y.Input,
+            /* @__PURE__ */ s.jsx(v, { name: "search", className: "-me-2 h-4 w-4" }),
+            p,
+            /* @__PURE__ */ s.jsx(
+              D.Input,
               {
-                autoFocus: !0,
-                className: as({ size: "small" }),
-                onChange: (x) => {
-                  f(x.target.value ?? ""), t == null || t(x.target.value);
+                ref: m,
+                id: u,
+                className: ms({ size: "small" }),
+                onChange: (t) => {
+                  c(t.target.value ?? ""), a == null || a(t.target.value);
                 },
-                value: n ?? "",
-                onFocus: () => m(!0),
-                onBlur: () => m(!1)
+                value: d ?? "",
+                onFocus: () => h(!0),
+                onBlur: () => h(!1)
               }
-            ) : null,
-            n && n.length ? /* @__PURE__ */ s.jsx(
-              W,
+            ),
+            d && d.length ? /* @__PURE__ */ s.jsx(
+              q,
               {
-                "aria-label": d ?? "Clear",
-                className: B(
-                  X({
+                "aria-label": r ?? "Clear",
+                className: A(
+                  Y({
                     size: "small",
                     color: "monochrome",
                     variant: "ghost"
@@ -304,270 +312,278 @@ const us = ({
                 ),
                 excludeFromTabOrder: !0,
                 onPress: () => {
-                  f("");
+                  var t;
+                  c(""), (t = m.current) == null || t.focus();
                 },
-                children: /* @__PURE__ */ s.jsx(F, { name: "cross", className: "h-4 w-4" })
+                children: /* @__PURE__ */ s.jsx(v, { name: "cross", className: "h-4 w-4" })
               }
             ) : null,
             i,
-            e ? /* @__PURE__ */ s.jsx(ms, { className: "mx-2", size: "small" }) : null
+            f ? /* @__PURE__ */ s.jsx(xs, { className: "mx-2", size: "small" }) : null
           ]
         }
       )
     }
   );
-}, K = ({
-  direction: t,
-  disabledItemIdKeys: o,
-  itemIdKey: l,
-  itemLabelKey: i,
-  items: d,
-  open: n,
-  renderItem: f,
-  triggerRef: p,
-  isLoading: m,
-  onQueryChange: j,
-  setOpenPopover: c
+}, ss = ({
+  direction: r,
+  disabledItemIdKeys: i,
+  isLoading: n,
+  itemIdKey: a,
+  itemLabelKey: d,
+  items: c,
+  onQueryChange: p,
+  open: m,
+  renderItem: u,
+  setOpenPopover: x,
+  triggerRef: h,
+  searchInputRef: l
 }) => {
-  var x;
-  const { filteredItems: r, query: u, setQuery: e } = us({
-    itemLabelKey: i,
-    items: d,
-    onQueryChange: j
+  var N;
+  const { filteredItems: o, query: f, setQuery: t } = hs({
+    itemLabelKey: d,
+    items: c,
+    onQueryChange: p
   });
-  return /* @__PURE__ */ s.jsxs(
-    os,
+  return /* @__PURE__ */ s.jsx(
+    ns,
     {
       className: "lyra-list-box pb-2",
-      isOpen: n,
-      triggerRef: p,
-      showPopoverInBottomDrawerOnSmallScreens: !0,
-      onOpenChange: c,
+      isOpen: m,
+      triggerRef: h,
+      showPopoverInDrawerOnSmallScreens: !0,
+      drawerPosition: "top",
+      onOpenChange: x,
       shouldUpdatePosition: !0,
       style: {
-        "--trigger-width": ((x = p.current) == null ? void 0 : x.offsetWidth) + "px",
-        direction: t
+        "--trigger-width": ((N = h.current) == null ? void 0 : N.offsetWidth) + "px",
+        direction: r
       },
-      children: [
+      children: m ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
         /* @__PURE__ */ s.jsx(
-          hs,
+          Ss,
           {
-            onQueryChange: j,
-            isLoading: m,
-            query: u,
-            setQuery: e
+            onQueryChange: p,
+            isLoading: n,
+            query: f,
+            setQuery: t,
+            searchInputRef: l
           }
         ),
-        r && r.length ? /* @__PURE__ */ s.jsx(
-          y.Options,
+        o && o.length ? /* @__PURE__ */ s.jsx(
+          D.Options,
           {
             static: !0,
-            className: rs({
-              className: "max-h-80 overflow-y-auto"
+            className: is({
+              className: "h-full max-h-[78dvh] overflow-y-auto sm:max-h-80"
             }),
-            children: r.map((a) => /* @__PURE__ */ s.jsx(
-              y.Option,
+            children: o.map((e) => /* @__PURE__ */ s.jsx(
+              D.Option,
               {
-                className: ({ active: h, selected: S, disabled: O }) => B(
-                  es({
-                    active: h,
+                className: ({ active: j, disabled: O, selected: k }) => A(
+                  as({
+                    active: j,
                     disabled: O,
-                    selected: S
+                    selected: k
                   })
                 ),
-                value: a,
-                disabled: o == null ? void 0 : o.includes(a == null ? void 0 : a[l]),
-                children: (h) => /* @__PURE__ */ s.jsx(
-                  js,
+                value: e,
+                disabled: i == null ? void 0 : i.includes(e == null ? void 0 : e[a]),
+                children: (j) => /* @__PURE__ */ s.jsx(
+                  bs,
                   {
-                    item: a,
-                    state: h,
-                    renderItem: f,
-                    itemLabelKey: i
+                    item: e,
+                    state: j,
+                    renderItem: u,
+                    itemLabelKey: d
                   }
                 )
               },
-              a[l]
+              e[a]
             ))
           }
         ) : null
-      ]
+      ] }) : null
     }
   );
-}, mt = ({
-  isDisabled: t,
-  isRequired: o,
-  label: l,
-  optionalLabel: i = "Optional",
-  description: d,
-  errorMessage: n,
-  isInvalid: f,
+}, ft = ({
+  by: r,
+  defaultValue: i,
+  description: n,
+  disabledItemIdKeys: a,
+  endSlot: d,
+  errorMessage: c,
   fullWidth: p = !0,
-  by: m,
-  defaultValue: j,
-  name: c,
-  onChange: r,
-  itemLabelKey: u,
-  itemIdKey: e,
-  value: x,
-  size: a = "medium",
-  startSlot: h,
-  items: S,
-  endSlot: O,
-  disabledItemIdKeys: M,
-  placeholder: R,
-  renderItem: H,
-  onQueryChange: P,
-  isLoading: E
+  isDisabled: m,
+  isInvalid: u,
+  isLoading: x,
+  isRequired: h,
+  itemIdKey: l,
+  itemLabelKey: o,
+  items: f,
+  label: t,
+  name: N,
+  onChange: e,
+  onQueryChange: j,
+  optionalLabel: O = "Optional",
+  placeholder: k,
+  renderItem: E,
+  size: V = "medium",
+  startSlot: R,
+  value: U
 }) => {
-  const [A, V] = N(x ?? j), [I, b] = N(!1), U = () => b(!0), T = () => b(!1), k = z(
-    (w) => {
-      V(w), r == null || r(w), T();
+  const [W, z] = b(U ?? i), [y, S] = b(!1), Z = () => S(!0), T = () => S(!1), $ = M(null), g = L(
+    (F) => {
+      z(F), e == null || e(F), T();
     },
-    [r]
-  ), D = J(null), { direction: v } = Y();
+    [e]
+  ), B = M(null), { direction: w } = P();
   return /* @__PURE__ */ s.jsx(
-    y,
+    D,
     {
-      disabled: t,
-      name: c,
-      value: A ?? "",
-      onChange: k,
-      by: m,
-      children: ({ disabled: w, value: C }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: q({ fullWidth: p }), children: [
+      disabled: m,
+      name: N,
+      value: W ?? "",
+      onChange: g,
+      by: r,
+      children: ({ disabled: F, value: ts }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: p }), children: [
           /* @__PURE__ */ s.jsx(
-            _,
+            K,
             {
-              label: l,
-              optionalLabel: i,
-              isRequired: o
+              label: t,
+              optionalLabel: O,
+              isRequired: h
             }
           ),
-          /* @__PURE__ */ s.jsx("div", { ref: D, children: /* @__PURE__ */ s.jsx(
-            xs,
+          /* @__PURE__ */ s.jsx("div", { ref: B, children: /* @__PURE__ */ s.jsx(
+            js,
             {
-              endSlot: O,
+              endSlot: d,
               fullWidth: p,
-              isDisabled: w,
-              isInvalid: f,
-              open: I,
-              openPopover: U,
-              placeholder: R,
-              size: a,
-              startSlot: h,
-              value: C,
-              itemLabelKey: u,
-              itemIdKey: e,
-              onChange: k
+              isDisabled: F,
+              isInvalid: u,
+              open: y,
+              openPopover: Z,
+              placeholder: k,
+              size: V,
+              startSlot: R,
+              value: ts,
+              itemLabelKey: o,
+              itemIdKey: l,
+              onChange: g,
+              searchInputRef: $
             }
           ) }),
-          /* @__PURE__ */ s.jsx(Q, { description: d, errorMessage: n })
+          /* @__PURE__ */ s.jsx(C, { description: n, errorMessage: c })
         ] }),
         /* @__PURE__ */ s.jsx(
-          K,
+          ss,
           {
-            triggerRef: D,
-            itemIdKey: e,
-            itemLabelKey: u,
-            items: S,
-            open: I,
-            setOpenPopover: b,
-            renderItem: H,
-            disabledItemIdKeys: M,
-            direction: v,
-            onQueryChange: P,
-            isLoading: E
+            triggerRef: B,
+            itemIdKey: l,
+            itemLabelKey: o,
+            items: f,
+            open: y,
+            setOpenPopover: S,
+            renderItem: E,
+            disabledItemIdKeys: a,
+            direction: w,
+            onQueryChange: j,
+            isLoading: x,
+            searchInputRef: $
           }
         )
       ] })
     }
   );
-}, dt = ({
-  isDisabled: t,
-  isRequired: o,
-  label: l,
-  optionalLabel: i = "Optional",
-  description: d,
-  errorMessage: n,
-  isInvalid: f,
+}, pt = ({
+  by: r,
+  defaultValue: i,
+  description: n,
+  disabledItemIdKeys: a,
+  endSlot: d,
+  errorMessage: c,
   fullWidth: p = !0,
-  by: m,
-  defaultValue: j,
-  name: c,
-  onChange: r,
-  itemLabelKey: u,
-  itemIdKey: e,
-  value: x,
-  size: a = "medium",
-  startSlot: h,
-  items: S,
-  endSlot: O,
-  disabledItemIdKeys: M,
-  placeholder: R,
-  renderItem: H,
-  onQueryChange: P,
-  isLoading: E
+  isDisabled: m,
+  isInvalid: u,
+  isLoading: x,
+  isRequired: h,
+  itemIdKey: l,
+  itemLabelKey: o,
+  items: f,
+  label: t,
+  name: N,
+  onChange: e,
+  onQueryChange: j,
+  optionalLabel: O = "Optional",
+  placeholder: k,
+  renderItem: E,
+  size: V = "medium",
+  startSlot: R,
+  value: U
 }) => {
-  const [A, V] = N(x ?? j), [I, b] = N(!1), U = () => b(!0), T = z(
-    (v) => {
-      V(v), r == null || r(v);
+  const [W, z] = b(U ?? i), [y, S] = b(!1), Z = () => S(!0), T = L(
+    (w) => {
+      z(w), e == null || e(w);
     },
-    [r]
-  ), k = J(null), { direction: D } = Y();
+    [e]
+  ), $ = M(null), g = M(null), { direction: B } = P();
   return /* @__PURE__ */ s.jsx(
-    y,
+    D,
     {
-      disabled: t,
-      name: c,
-      value: A ?? [],
+      disabled: m,
+      name: N,
+      value: W ?? [],
       onChange: T,
-      by: m,
+      by: r,
       multiple: !0,
-      children: ({ disabled: v, value: w }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-        /* @__PURE__ */ s.jsxs("div", { className: q({ fullWidth: p }), children: [
+      children: ({ disabled: w, value: F }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsxs("div", { className: G({ fullWidth: p }), children: [
           /* @__PURE__ */ s.jsx(
-            _,
+            K,
             {
-              label: l,
-              optionalLabel: i,
-              isRequired: o
+              label: t,
+              optionalLabel: O,
+              isRequired: h
             }
           ),
-          /* @__PURE__ */ s.jsx("div", { ref: k, children: /* @__PURE__ */ s.jsx(
-            fs,
+          /* @__PURE__ */ s.jsx("div", { ref: g, children: /* @__PURE__ */ s.jsx(
+            Ns,
             {
-              endSlot: O,
+              searchInputRef: $,
+              endSlot: d,
               fullWidth: p,
-              isDisabled: v,
-              isInvalid: f,
-              open: I,
-              openPopover: U,
-              placeholder: R,
-              size: a,
-              startSlot: h,
-              value: w,
-              itemLabelKey: u,
-              itemIdKey: e,
+              isDisabled: w,
+              isInvalid: u,
+              open: y,
+              openPopover: Z,
+              placeholder: k,
+              size: V,
+              startSlot: R,
+              value: F,
+              itemLabelKey: o,
+              itemIdKey: l,
               onChange: T
             }
           ) }),
-          /* @__PURE__ */ s.jsx(Q, { description: d, errorMessage: n })
+          /* @__PURE__ */ s.jsx(C, { description: n, errorMessage: c })
         ] }),
         /* @__PURE__ */ s.jsx(
-          K,
+          ss,
           {
-            triggerRef: k,
-            itemIdKey: e,
-            itemLabelKey: u,
-            items: S,
-            open: I,
-            setOpenPopover: b,
-            renderItem: H,
-            disabledItemIdKeys: M,
-            direction: D,
-            onQueryChange: P,
-            isLoading: E
+            searchInputRef: $,
+            triggerRef: g,
+            itemIdKey: l,
+            itemLabelKey: o,
+            items: f,
+            open: y,
+            setOpenPopover: S,
+            renderItem: E,
+            disabledItemIdKeys: a,
+            direction: B,
+            onQueryChange: j,
+            isLoading: x
           }
         )
       ] })
@@ -575,6 +591,6 @@ const us = ({
   );
 };
 export {
-  dt as MultiSearchListField,
-  mt as SearchListField
+  pt as MultiSearchListField,
+  ft as SearchListField
 };