@new-black/lyra 1.0.18 → 1.0.19

package/dist/lyra37.js

@@ -1,15 +1,15 @@
 import { j as r } from "./lyra90.js";
-import { useContext as I, useRef as F, useState as M, useCallback as A, useEffect as J, useId as xr, useMemo as fr } from "react";
-import { Provider as lr, ButtonContext as pr, Button as g, Group as dr, Input as jr } from "./lyra89.js";
-import { flushSync as er } from "react-dom";
-import { useVirtualizer as hr } from "./lyra611.js";
+import { useContext as rr, useRef as O, useState as z, useCallback as P, useEffect as Y, useId as xr, useMemo as fr } from "react";
+import { Provider as lr, ButtonContext as pr, Button as K, Group as dr, Input as jr } from "./lyra89.js";
+import { flushSync as nr } from "react-dom";
+import { useVirtualizer as hr } from "./lyra610.js";
 import { clsx as br } from "./lyra450.js";
 import "./lyra2.js";
 import "./lyra3.js";
 import "./lyra4.js";
 import "./lyra5.js";
 import "./lyra6.js";
-import { SvgIcon as C } from "./lyra65.js";
+import { SvgIcon as I } from "./lyra65.js";
 import "./lyra8.js";
 import "./lyra9.js";
 import "./lyra10.js";
@@ -28,16 +28,16 @@ import "./lyra22.js";
 import "./lyra23.js";
 import "./lyra24.js";
 import "./lyra25.js";
-import { FieldGroupContext as rr } from "./lyra26.js";
+import { FieldGroupContext as tr } from "./lyra26.js";
 import "./lyra27.js";
 import "./lyra28.js";
 import "./lyra29.js";
 import { useDictionary as ur } from "./lyra95.js";
 import "./lyra80.js";
-import "./lyra452.js";
+import "./lyra458.js";
 import { InputHeader as ar } from "./lyra38.js";
 import { InputFooter as mr } from "./lyra39.js";
-import { sharedInputStyles as q } from "./lyra40.js";
+import { sharedInputStyles as Q } from "./lyra40.js";
 import "./lyra44.js";
 import "./lyra31.js";
 import "./lyra32.js";
@@ -45,16 +45,16 @@ import "./lyra33.js";
 import "./lyra34.js";
 import "./lyra35.js";
 import Nr from "./lyra596.js";
-import { sharedListItemStyles as vr } from "./lyra453.js";
-import { SharedListItem as wr } from "./lyra454.js";
+import { sharedListItemStyles as wr } from "./lyra453.js";
+import { SharedListItem as vr } from "./lyra454.js";
 import { Popover as Sr } from "./lyra53.js";
 import "./lyra54.js";
 import "./lyra55.js";
 import "./lyra56.js";
-import { Text as nr } from "./lyra73.js";
+import { Text as ir } from "./lyra73.js";
 import "./lyra74.js";
-import { InputTagGroup as yr, InputTag as kr } from "./lyra455.js";
-import "./lyra456.js";
+import { InputTagGroup as yr, InputTag as kr } from "./lyra459.js";
+import "./lyra460.js";
 import { useFilterItemsByQuery as Fr } from "./lyra85.js";
 import { useMousePosition as Or } from "./lyra84.js";
 import "./lyra41.js";
@@ -88,65 +88,71 @@ import "./lyra79.js";
 import "./lyra81.js";
 import "./lyra98.js";
 import { useSpinDelay as Dr } from "./lyra87.js";
-import { useLocale as tr } from "./lyra88.js";
+import { useLocale as sr } from "./lyra88.js";
 const Pr = ({
   disableClearLogic: o,
   endSlot: t,
   fullWidth: s,
-  getLabel: i,
-  isDisabled: x,
-  isInvalid: c,
-  onChange: u,
+  getLabel: l,
+  isDisabled: f,
+  isInvalid: u,
+  onChange: a,
   open: m,
-  openPopover: j,
-  placeholder: N,
-  searchInputRef: h,
-  startSlot: b,
-  value: e
+  openPopover: h,
+  placeholder: b,
+  renderCustomElementInValueButton: N,
+  searchInputRef: d,
+  selectRenderElements: c,
+  startSlot: j,
+  value: n
 }) => {
-  const { buttonExcludedFromTabOrder: f, inputField: l } = q({
-    isInvalid: c,
+  var p;
+  const { buttonExcludedFromTabOrder: w, inputField: v } = Q({
+    isInvalid: u,
     hasEndSlot: !0,
     fullWidth: s,
-    isDisabled: x
-  }), w = (p) => {
-    (p.key === "Escape" || p.key === "Backspace") && !o ? (p.stopPropagation(), u == null || u(void 0)) : p.key === "ArrowDown" || p.key === "ArrowUp" ? j == null || j() : p.key && p.key.match(/^[a-zA-Z0-9]$/) && (er(() => {
-      j == null || j();
-    }), h.current && (h.current.focus(), h.current.setSelectionRange(0, h.current.value.length)));
+    isDisabled: f
+  }), e = (i) => {
+    (i.key === "Escape" || i.key === "Backspace") && !o ? (i.stopPropagation(), a == null || a(void 0)) : i.key === "ArrowDown" || i.key === "ArrowUp" ? h == null || h() : i.key && i.key.match(/^[a-zA-Z0-9]$/) && (nr(() => {
+      h == null || h();
+    }), d.current && (d.current.focus(), d.current.setSelectionRange(0, d.current.value.length)));
   };
   return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-    b,
+    j,
     /* @__PURE__ */ r.jsxs(
-      g,
+      K,
       {
         "aria-haspopup": "listbox",
         "aria-expanded": m,
-        className: ({ isFocused: p, isHovered: n }) => l({
-          isHovered: n,
-          isFocused: p,
+        className: ({ isFocused: i, isHovered: x }) => v({
+          isHovered: x,
+          isFocused: i,
           className: "min-h-8 grow"
         }),
-        isDisabled: x,
-        onKeyDown: w,
-        onPress: j,
+        isDisabled: f,
+        onKeyDown: e,
+        onPress: h,
         children: [
-          /* @__PURE__ */ r.jsx("div", { className: "grow truncate text-start", children: e && i(e) ? /* @__PURE__ */ r.jsx(r.Fragment, { children: i(e) }) : /* @__PURE__ */ r.jsx(nr, { variant: "body-medium", color: "secondary", children: N }) }),
+          /* @__PURE__ */ r.jsxs("div", { className: "flex grow truncate text-start", children: [
+            N && n ? (p = c(n)) == null ? void 0 : p.customElement : null,
+            n && l(n) ? /* @__PURE__ */ r.jsx(r.Fragment, { children: l(n) }) : /* @__PURE__ */ r.jsx(ir, { variant: "body-medium", color: "secondary", children: b })
+          ] }),
           /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-            e && !x && !o ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
+            n && !f && !o ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
               "div",
               {
-                className: f(),
+                className: w(),
                 role: "button",
-                onPointerDown: (p) => {
-                  p.stopPropagation(), u == null || u(void 0);
+                onPointerDown: (i) => {
+                  i.stopPropagation(), a == null || a(void 0);
                 },
-                onClick: (p) => {
-                  p.stopPropagation(), u == null || u(void 0);
+                onClick: (i) => {
+                  i.stopPropagation(), a == null || a(void 0);
                 },
-                children: /* @__PURE__ */ r.jsx(C, { name: "clear" })
+                children: /* @__PURE__ */ r.jsx(I, { name: "clear" })
               }
             ) }) : null,
-            /* @__PURE__ */ r.jsx(C, { name: "chevron-up-down", className: "h-4 w-4" })
+            /* @__PURE__ */ r.jsx(I, { name: "chevron-up-down", className: "h-4 w-4" })
           ] })
         ]
       }
@@ -157,68 +163,68 @@ const Pr = ({
   fullWidth: o,
   getItemId: t,
   getLabel: s,
-  isDisabled: i,
-  isInvalid: x,
-  label: c,
-  onChange: u,
+  isDisabled: l,
+  isInvalid: f,
+  label: u,
+  onChange: a,
   openPopover: m,
-  placeholder: j,
-  searchInputRef: N,
-  value: h
+  placeholder: h,
+  searchInputRef: b,
+  value: N
 }) => {
-  const { inputField: b } = q({
-    isInvalid: x,
+  const { inputField: d } = Q({
+    isInvalid: f,
     hasEndSlot: !0,
     fullWidth: o,
-    isDisabled: i
-  }), e = A(
-    (l) => {
-      l.key === "ArrowDown" || l.key === "ArrowUp" ? m() : l.key && l.key.match(/^[a-zA-Z0-9]$/) && (er(() => {
+    isDisabled: l
+  }), c = P(
+    (n) => {
+      n.key === "ArrowDown" || n.key === "ArrowUp" ? m() : n.key && n.key.match(/^[a-zA-Z0-9]$/) && (nr(() => {
         m();
-      }), N.current && (N.current.focus(), N.current.setSelectionRange(0, N.current.value.length)));
+      }), b.current && (b.current.focus(), b.current.setSelectionRange(0, b.current.value.length)));
     },
-    [m, N]
-  ), f = A(
-    (l) => {
-      h && u(
-        h.filter((w) => {
-          const p = t(w);
-          return !l.has(p);
+    [m, b]
+  ), j = P(
+    (n) => {
+      N && a(
+        N.filter((w) => {
+          const v = t(w);
+          return !n.has(v);
         })
       );
     },
-    [t, u, h]
+    [t, a, N]
   );
   return /* @__PURE__ */ r.jsx(
     dr,
     {
-      className: ({ isFocusWithin: l, isHovered: w }) => b({
+      className: ({ isFocusWithin: n, isHovered: w }) => d({
         isHovered: w,
-        isFocused: l,
+        isFocused: n,
         className: br(
-          w && !x && !i && !l ? "border-hover" : "",
+          w && !f && !l && !n ? "border-hover" : "",
           "has:[data-focused]:border has:[data-focused]:border-focus",
           "py-[0.4375rem]"
         )
       }),
       children: /* @__PURE__ */ r.jsxs(
-        g,
+        K,
         {
           onPress: m,
-          onKeyDown: e,
-          isDisabled: i,
+          onKeyDown: c,
+          isDisabled: l,
           className: "flex w-full outline-none",
           children: [
-            /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: h && h.length ? /* @__PURE__ */ r.jsx(
+            /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: N && N.length ? /* @__PURE__ */ r.jsx(
               yr,
               {
-                label: c ?? "Selected items",
+                label: u ?? "Selected items",
                 className: "-m-1.5 -mt-[0.3125rem] items-center",
-                onRemove: i ? void 0 : f,
-                children: h.map((l) => /* @__PURE__ */ r.jsx(kr, { id: t(l), isDisabled: i, children: s(l) }, t(l)))
+                onRemove: l ? void 0 : j,
+                children: N.map((n) => /* @__PURE__ */ r.jsx(kr, { id: t(n), isDisabled: l, children: s(n) }, t(n)))
               }
-            ) : /* @__PURE__ */ r.jsx(nr, { color: "secondary", children: j }) }),
-            /* @__PURE__ */ r.jsx(C, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
+            ) : /* @__PURE__ */ r.jsx(ir, { color: "secondary", children: h }) }),
+            /* @__PURE__ */ r.jsx(I, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
           ]
         }
       )
@@ -228,236 +234,236 @@ const Pr = ({
   endSlot: o,
   isLoading: t,
   onKeyDown: s,
-  onQueryChange: i,
-  query: x,
-  searchInputRef: c,
-  setQuery: u
+  onQueryChange: l,
+  query: f,
+  searchInputRef: u,
+  setQuery: a
 }) => {
-  const m = xr(), { clear: j, search: N } = ur(), h = Dr(t ?? !1, { delay: 500, minDuration: 200 }), { buttonExcludedFromTabOrder: b } = q({ fullWidth: !0 });
-  return J(() => {
-    var e;
-    (e = c.current) == null || e.focus();
+  const m = xr(), { clear: h, search: b } = ur(), N = Dr(t ?? !1, { delay: 500, minDuration: 200 }), { buttonExcludedFromTabOrder: d } = Q({ fullWidth: !0 });
+  return Y(() => {
+    var c;
+    (c = u.current) == null || c.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(
       jr,
       {
-        ref: c,
+        ref: u,
         id: m,
         className: "w-full bg-transparent text-base outline-none placeholder:text-tertiary",
-        onChange: (e) => {
-          var f, l;
-          u(((f = e.target) == null ? void 0 : f.value) ?? ""), i == null || i((l = e.target) == null ? void 0 : l.value);
+        onChange: (c) => {
+          var j, n;
+          a(((j = c.target) == null ? void 0 : j.value) ?? ""), l == null || l((n = c.target) == null ? void 0 : n.value);
         },
-        placeholder: N,
-        value: x ?? "",
-        onKeyDown: (e) => {
-          e.code === "Tab" && e.preventDefault(), s == null || s(e);
+        placeholder: b,
+        value: f ?? "",
+        onKeyDown: (c) => {
+          c.code === "Tab" && c.preventDefault(), s == null || s(c);
         }
       }
     ),
-    x && x.length ? /* @__PURE__ */ r.jsx(
-      g,
+    f && f.length ? /* @__PURE__ */ r.jsx(
+      K,
       {
-        "aria-label": j,
-        className: b(),
+        "aria-label": h,
+        className: d(),
         excludeFromTabOrder: !0,
         onPress: () => {
-          var e;
-          u(""), (e = c.current) == null || e.focus();
+          var c;
+          a(""), (c = u.current) == null || c.focus();
         },
-        children: /* @__PURE__ */ r.jsx(C, { name: "clear" })
+        children: /* @__PURE__ */ r.jsx(I, { name: "clear" })
       }
     ) : null,
     o,
-    h ? /* @__PURE__ */ r.jsx(Br, { className: "mx-2", size: "small" }) : null
+    N ? /* @__PURE__ */ r.jsx(Br, { className: "mx-2", size: "small" }) : null
   ] }) });
 }, Er = (o) => {
-  const t = F(null), [s, i] = M(!1);
-  return J(() => i(!1), [o]), { loadMoreButtonRef: t, isLoadMoreButtonFocused: s, setIsLoadMoreButtonFocused: i };
+  const t = O(null), [s, l] = z(!1);
+  return Y(() => l(!1), [o]), { loadMoreButtonRef: t, isLoadMoreButtonFocused: s, setIsLoadMoreButtonFocused: l };
 }, zr = ({
   disabledItemIdKeys: o,
   filteredItems: t,
   getItemId: s,
-  onMultiChange: i,
-  onSingleChange: x,
-  value: c
+  onMultiChange: l,
+  onSingleChange: f,
+  value: u
 }) => {
-  const u = fr(() => {
-    if (Array.isArray(c))
-      return c.length ? t == null ? void 0 : t.findIndex((n) => s(n) === s(c[0])) : 0;
-    if (c)
-      return (t == null ? void 0 : t.findIndex((n) => s(n) === s(c))) ?? 0;
-  }, [t, s, c]), m = A(
-    (n) => {
-      if (Number.isInteger(n)) {
-        for (let a = n - 1; a >= 0; a--)
-          if (!(o != null && o.includes(s(t[a]))))
-            return Math.max(a, 0);
+  const a = fr(() => {
+    if (Array.isArray(u))
+      return u.length ? t == null ? void 0 : t.findIndex((e) => s(e) === s(u[0])) : 0;
+    if (u)
+      return (t == null ? void 0 : t.findIndex((e) => s(e) === s(u))) ?? 0;
+  }, [t, s, u]), m = P(
+    (e) => {
+      if (Number.isInteger(e)) {
+        for (let p = e - 1; p >= 0; p--)
+          if (!(o != null && o.includes(s(t[p]))))
+            return Math.max(p, 0);
       }
       return -1;
     },
     [o, t, s]
-  ), j = A(
-    (n) => {
-      if (Number.isInteger(n)) {
-        for (let a = n + 1; a < t.length; a++)
-          if (!(o != null && o.includes(s(t[a]))))
-            return Math.min(t.length - 1, a);
+  ), h = P(
+    (e) => {
+      if (Number.isInteger(e)) {
+        for (let p = e + 1; p < t.length; p++)
+          if (!(o != null && o.includes(s(t[p]))))
+            return Math.min(t.length - 1, p);
       }
       return -1;
     },
     [o, t, s]
-  ), N = A(
-    (n) => {
-      if (i) {
-        const a = c ? [...c] : [], v = a.map(s), d = v != null && v.includes(s(n)) ? a.filter((P) => s(P) !== s(n)) : [...a, n];
-        i == null || i(d);
+  ), b = P(
+    (e) => {
+      if (l) {
+        const p = u ? [...u] : [], i = p.map(s), x = i != null && i.includes(s(e)) ? p.filter((D) => s(D) !== s(e)) : [...p, e];
+        l == null || l(x);
       } else
-        x && (x == null || x(n));
+        f && (f == null || f(e));
     },
-    [s, i, x, c]
-  ), h = A(
-    (n) => Array.isArray(c) ? c.some((a) => s(a) === s(n)) : c ? s(c) === s(n) : !1,
-    [s, c]
-  ), [b, e] = M(u ?? 0), f = Or(), l = F(void 0), w = A(
-    (n) => {
-      const a = b;
-      if (n.key === "ArrowDown") {
-        n.preventDefault();
-        const v = j(a);
-        v >= 0 && (e(v), l.current = f);
-      } else if (n.key === "ArrowUp") {
-        n.preventDefault();
-        const v = m(a);
-        v >= 0 && (e(v), l.current = f);
+    [s, l, f, u]
+  ), N = P(
+    (e) => Array.isArray(u) ? u.some((p) => s(p) === s(e)) : u ? s(u) === s(e) : !1,
+    [s, u]
+  ), [d, c] = z(a ?? 0), j = Or(), n = O(void 0), w = P(
+    (e) => {
+      const p = d;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const i = h(p);
+        i >= 0 && (c(i), n.current = j);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const i = m(p);
+        i >= 0 && (c(i), n.current = j);
       } else
-        n.key === "Enter" && N(t[b]);
+        e.key === "Enter" && b(t[d]);
     },
     [
-      b,
+      d,
       t,
-      j,
+      h,
       m,
-      f,
-      N
+      j,
+      b
     ]
-  ), p = A(
-    (n, a) => {
-      n && l.current !== f && (e(a), l.current = f);
+  ), v = P(
+    (e, p) => {
+      e && n.current !== j && (c(p), n.current = j);
     },
-    [f]
+    [j]
   );
   return {
-    activeItem: b,
-    setActiveItem: e,
-    getItemIsSelected: h,
+    activeItem: d,
+    setActiveItem: c,
+    getItemIsSelected: N,
     onKeyDown: w,
-    onHoverChange: p,
-    selectedItemIndex: u,
-    toggleSelection: N
+    onHoverChange: v,
+    selectedItemIndex: a,
+    toggleSelection: b
   };
 }, Mr = ({
   selectedItemIndex: o,
   setActiveItem: t
-}) => (J(() => {
+}) => (Y(() => {
   if (o !== void 0 && o >= 0)
     return t(o), () => {
       t(0);
     };
-}, [o, t]), null), sr = ({
+}, [o, t]), null), or = ({
   direction: o,
   disabledItemIdKeys: t,
   getItemId: s,
-  getLabel: i,
-  isLoading: x,
-  items: c,
-  label: u,
+  getLabel: l,
+  isLoading: f,
+  items: u,
+  label: a,
   onLoadMore: m,
-  onMultiChange: j,
-  onQueryChange: N,
-  onSingleChange: h,
-  open: b,
-  placement: e,
-  searchInputRef: f,
-  selectRenderElements: l,
+  onMultiChange: h,
+  onQueryChange: b,
+  onSingleChange: N,
+  open: d,
+  placement: c,
+  searchInputRef: j,
+  selectRenderElements: n,
   setOpenPopover: w,
-  triggerRef: p,
-  value: n
+  triggerRef: v,
+  value: e
 }) => {
-  var z, ir, cr;
-  const { loadMore: a, noResultsFound: v } = ur(), { filteredItems: d, query: P, setQuery: R } = Fr({
-    getLabel: i,
-    items: c,
-    onQueryChange: N
-  }), { item: T } = vr(), { isLoadMoreButtonFocused: W, loadMoreButtonRef: G, setIsLoadMoreButtonFocused: O } = Er(b), {
-    activeItem: y,
-    getItemIsSelected: L,
-    onHoverChange: $,
-    onKeyDown: S,
-    selectedItemIndex: H,
-    setActiveItem: V,
+  var H, Z, cr;
+  const { loadMore: p, noResultsFound: i } = ur(), { filteredItems: x, query: D, setQuery: M } = Fr({
+    getLabel: l,
+    items: u,
+    onQueryChange: b
+  }), { item: A } = wr(), { isLoadMoreButtonFocused: W, loadMoreButtonRef: T, setIsLoadMoreButtonFocused: R } = Er(d), {
+    activeItem: S,
+    getItemIsSelected: G,
+    onHoverChange: F,
+    onKeyDown: y,
+    selectedItemIndex: L,
+    setActiveItem: J,
     toggleSelection: X
   } = zr({
     disabledItemIdKeys: t,
-    filteredItems: d,
+    filteredItems: x,
     getItemId: s,
-    loadMoreButtonRef: G,
-    onMultiChange: j,
-    onSingleChange: h,
-    value: n
-  }), [Z, Q] = M(
-    (z = p.current) == null ? void 0 : z.offsetWidth
+    loadMoreButtonRef: T,
+    onMultiChange: h,
+    onSingleChange: N,
+    value: e
+  }), [_, q] = z(
+    (H = v.current) == null ? void 0 : H.offsetWidth
   );
   Nr("resize", () => {
-    var B;
-    Q((B = p.current) == null ? void 0 : B.offsetWidth);
+    var $;
+    q(($ = v.current) == null ? void 0 : $.offsetWidth);
   });
-  const Y = Z ?? ((ir = p.current) == null ? void 0 : ir.offsetWidth), _ = F(null), U = m ? ((d == null ? void 0 : d.length) ?? 0) + 1 : (d == null ? void 0 : d.length) ?? 0, k = hr({
-    count: U,
+  const V = _ ?? ((Z = v.current) == null ? void 0 : Z.offsetWidth), g = O(null), E = m ? ((x == null ? void 0 : x.length) ?? 0) + 1 : (x == null ? void 0 : x.length) ?? 0, k = hr({
+    count: E,
     estimateSize: () => 40,
-    getScrollElement: () => _.current,
+    getScrollElement: () => g.current,
     overscan: 6
   });
-  J(() => {
-    y !== void 0 && y >= 0 && (d != null && d.length) && (y === d.length - 1 && m ? k.scrollToIndex(U) : k.scrollToIndex(Math.min(y, U - 1)));
-  }, [y, U, d.length, m, k]);
-  const E = k.getVirtualItems();
+  Y(() => {
+    S !== void 0 && S >= 0 && (x != null && x.length) && (S === x.length - 1 && m ? k.scrollToIndex(E) : k.scrollToIndex(Math.min(S, E - 1)));
+  }, [S, E, x.length, m, k]);
+  const U = k.getVirtualItems();
   return /* @__PURE__ */ r.jsx(
     Sr,
     {
       className: "p-1",
-      isOpen: b,
+      isOpen: d,
       disablePadding: !0,
-      triggerRef: p,
+      triggerRef: v,
       onOpenChange: w,
-      "aria-label": u,
+      "aria-label": a,
       shouldUpdatePosition: !0,
-      placement: e,
+      placement: c,
       style: {
-        width: Y && Y > 280 ? Y + "px" : "280px",
+        width: V && V > 280 ? V + "px" : "280px",
         direction: o
       },
-      children: b ? /* @__PURE__ */ r.jsxs("div", { className: "gap-1", children: [
+      children: d ? /* @__PURE__ */ r.jsxs("div", { className: "gap-1", children: [
         /* @__PURE__ */ r.jsx(
           Tr,
           {
-            onQueryChange: N,
-            isLoading: x,
-            query: P,
-            setQuery: (B) => {
-              er(() => {
-                R(B), V(0);
+            onQueryChange: b,
+            isLoading: f,
+            query: D,
+            setQuery: ($) => {
+              nr(() => {
+                M($), J(0);
               }), k.scrollToOffset(0);
             },
-            searchInputRef: f,
-            onKeyDown: S
+            searchInputRef: j,
+            onKeyDown: y
           }
         ),
-        /* @__PURE__ */ r.jsx(Mr, { selectedItemIndex: H, setActiveItem: V }),
+        /* @__PURE__ */ r.jsx(Mr, { selectedItemIndex: L, setActiveItem: J }),
         /* @__PURE__ */ r.jsx(
           "div",
           {
-            ref: _,
+            ref: g,
             className: "w-full overflow-y-auto",
             style: {
               contain: "strict",
@@ -475,78 +481,78 @@ const Pr = ({
                   {
                     className: "absolute start-0 top-0 w-full",
                     style: {
-                      transform: `translateY(${((cr = E == null ? void 0 : E[0]) == null ? void 0 : cr.start) ?? 0}px)`
+                      transform: `translateY(${((cr = U == null ? void 0 : U[0]) == null ? void 0 : cr.start) ?? 0}px)`
                     },
-                    children: E.map((B) => {
-                      if (B.index === U - 1 && m)
+                    children: U.map(($) => {
+                      if ($.index === E - 1 && m)
                         return /* @__PURE__ */ r.jsx(
                           "div",
                           {
-                            "data-index": B.index,
+                            "data-index": $.index,
                             ref: k.measureElement,
                             children: /* @__PURE__ */ r.jsxs("div", { children: [
                               /* @__PURE__ */ r.jsx($r, { className: "my-1" }),
                               /* @__PURE__ */ r.jsx(
-                                g,
+                                K,
                                 {
-                                  isDisabled: x,
-                                  onFocusChange: O,
-                                  onHoverChange: O,
-                                  ref: G,
-                                  className: T({
+                                  isDisabled: f,
+                                  onFocusChange: R,
+                                  onHoverChange: R,
+                                  ref: T,
+                                  className: A({
                                     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 D;
-                                    m(), (D = f.current) == null || D.focus();
+                                    var B;
+                                    m(), (B = j.current) == null || B.focus();
                                   },
-                                  onKeyDown: (D) => {
-                                    var K;
-                                    D.key === "ArrowUp" && (D.preventDefault(), (K = f.current) == null || K.focus());
+                                  onKeyDown: (B) => {
+                                    var C;
+                                    B.key === "ArrowUp" && (B.preventDefault(), (C = j.current) == null || C.focus());
                                   },
-                                  children: a
+                                  children: p
                                 }
                               )
                             ] })
                           },
-                          B.key
+                          $.key
                         );
                       {
-                        const D = d[B.index];
+                        const B = x[$.index];
                         return /* @__PURE__ */ r.jsx(
                           "div",
                           {
-                            "data-index": B.index,
+                            "data-index": $.index,
                             ref: k.measureElement,
                             children: /* @__PURE__ */ r.jsx(
-                              g,
+                              K,
                               {
                                 className: "w-full text-start outline-none",
-                                onHoverChange: (K) => {
-                                  $(K, B.index);
+                                onHoverChange: (C) => {
+                                  F(C, $.index);
                                 },
-                                onPress: () => X(D),
-                                isDisabled: (t == null ? void 0 : t.includes(s(D))) ?? !1,
+                                onPress: () => X(B),
+                                isDisabled: (t == null ? void 0 : t.includes(s(B))) ?? !1,
                                 excludeFromTabOrder: !0,
                                 children: /* @__PURE__ */ r.jsx(
-                                  wr,
+                                  vr,
                                   {
                                     hasSelection: !0,
-                                    item: D,
+                                    item: B,
                                     state: {
-                                      active: y === B.index && !W,
-                                      disabled: (t == null ? void 0 : t.includes(s(D))) ?? !1,
-                                      selected: L(D)
+                                      active: S === $.index && !W,
+                                      disabled: (t == null ? void 0 : t.includes(s(B))) ?? !1,
+                                      selected: G(B)
                                     },
-                                    selectRenderElements: l
+                                    selectRenderElements: n
                                   },
-                                  s(D)
+                                  s(B)
                                 )
                               },
-                              s(D)
+                              s(B)
                             )
                           },
-                          B.key
+                          $.key
                         );
                       }
                     })
@@ -556,199 +562,202 @@ const Pr = ({
             )
           }
         ),
-        U ? null : /* @__PURE__ */ r.jsx(nr, { variant: "body-medium", color: "secondary", className: "px-2.5", children: v })
+        E ? null : /* @__PURE__ */ r.jsx(ir, { variant: "body-medium", color: "secondary", className: "px-2.5", children: i })
       ] }) : null
     }
   );
-}, or = ({
+}, er = ({
   getItemId: o,
   name: t,
   value: s
-}) => t ? Array.isArray(s) ? s.map((i) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: t, value: o(i) }, o(i))) : s ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: t, value: o(s) }) : null : null, vs = ({
+}) => t ? Array.isArray(s) ? s.map((l) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: t, value: o(l) }, o(l))) : s ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: t, value: o(s) }) : null : null, ws = ({
   defaultValue: o,
   description: t,
   disableClearLogic: s,
-  disabledItemIdKeys: i,
-  endSlot: x,
-  errorMessage: c,
-  fullWidth: u = !0,
+  disabledItemIdKeys: l,
+  endSlot: f,
+  errorMessage: u,
+  fullWidth: a = !0,
   getItemId: m,
-  getLabel: j,
-  hideHintLabel: N,
-  hideInputFooter: h,
-  hideInputHeader: b,
-  isDisabled: e,
-  isInvalid: f,
-  isLoading: l,
+  getLabel: h,
+  hideHintLabel: b,
+  hideInputFooter: N,
+  hideInputHeader: d,
+  isDisabled: c,
+  isInvalid: j,
+  isLoading: n,
   isRequired: w,
-  items: p,
-  label: n,
-  name: a,
-  onChange: v,
-  onLoadMore: d,
-  onQueryChange: P,
-  placeholder: R,
-  placement: T = "bottom start",
-  selectRenderElements: W,
-  startSlot: G,
-  value: O
+  items: v,
+  label: e,
+  name: p,
+  onChange: i,
+  onLoadMore: x,
+  onQueryChange: D,
+  placeholder: M,
+  placement: A = "bottom start",
+  renderCustomElementInValueButton: W,
+  selectRenderElements: T,
+  startSlot: R,
+  value: S
 }) => {
-  const { isDisabled: y } = I(rr), L = F(null), $ = F(null), S = F(null), [H, V] = M(O ?? o), [X, Z] = M(!1), Q = () => {
-    var z;
-    Z(!0), (z = $.current) == null || z.click();
-  }, Y = () => Z(!1), _ = A(
-    (z) => {
-      V(z), v == null || v(z), Y();
+  const { isDisabled: G } = rr(tr), F = O(null), y = O(null), L = O(null), [J, X] = z(S ?? o), [_, q] = z(!1), V = () => {
+    var Z;
+    q(!0), (Z = y.current) == null || Z.click();
+  }, g = () => q(!1), E = P(
+    (Z) => {
+      X(Z), i == null || i(Z), g();
     },
-    [v]
-  ), { direction: U } = tr(), { wrapper: k } = q({
-    fullWidth: u,
-    isInvalid: f,
-    isDisabled: e || y
+    [i]
+  ), { direction: k } = sr(), { wrapper: U } = Q({
+    fullWidth: a,
+    isInvalid: j,
+    isDisabled: c || G
   });
-  J(() => {
-    V(O ?? o);
-  }, [o, O]);
-  const E = O ?? H;
+  Y(() => {
+    X(S ?? o);
+  }, [o, S]);
+  const H = S ?? J;
   return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(or, { name: a, value: E, getItemId: m }),
-    /* @__PURE__ */ r.jsxs("div", { className: k(), children: [
+    /* @__PURE__ */ r.jsx(er, { name: p, value: H, getItemId: m }),
+    /* @__PURE__ */ r.jsxs("div", { className: U(), children: [
       /* @__PURE__ */ r.jsx(
         ar,
         {
-          label: n,
-          hideHintLabel: N,
-          hideInputHeader: b,
+          label: e,
+          hideHintLabel: b,
+          hideInputHeader: d,
           isRequired: w
         }
       ),
-      /* @__PURE__ */ r.jsx("div", { ref: S, children: /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ r.jsx("div", { ref: L, children: /* @__PURE__ */ r.jsx(
         Pr,
         {
           disableClearLogic: s,
-          endSlot: x,
-          fullWidth: u,
-          getLabel: j,
+          endSlot: f,
+          fullWidth: a,
+          getLabel: h,
           getItemId: m,
-          isDisabled: e,
-          isInvalid: f,
-          open: X,
-          openPopover: Q,
-          onChange: _,
-          placeholder: R,
-          searchInputRef: L,
-          startSlot: G,
-          value: E
+          isDisabled: c,
+          isInvalid: j,
+          open: _,
+          openPopover: V,
+          onChange: E,
+          placeholder: M,
+          searchInputRef: F,
+          startSlot: R,
+          value: H,
+          renderCustomElementInValueButton: W,
+          selectRenderElements: T
         }
       ) }),
       /* @__PURE__ */ r.jsx(
         mr,
         {
           description: t,
-          errorMessage: c,
-          hideInputFooter: h
+          errorMessage: u,
+          hideInputFooter: N
         }
       )
     ] }),
     /* @__PURE__ */ r.jsx(
-      sr,
+      or,
       {
-        triggerRef: S,
-        label: n,
+        triggerRef: L,
+        label: e,
         getItemId: m,
-        getLabel: j,
-        items: p,
-        open: X,
-        setOpenPopover: Z,
-        selectRenderElements: W,
-        disabledItemIdKeys: i,
-        direction: U,
-        onQueryChange: P,
-        isLoading: l,
-        searchInputRef: L,
-        onLoadMore: d,
-        placement: T,
-        value: E,
-        onSingleChange: _
+        getLabel: h,
+        items: v,
+        open: _,
+        setOpenPopover: q,
+        selectRenderElements: T,
+        disabledItemIdKeys: l,
+        direction: k,
+        onQueryChange: D,
+        isLoading: n,
+        searchInputRef: F,
+        onLoadMore: x,
+        placement: A,
+        value: H,
+        onSingleChange: E
       }
     )
   ] });
-}, ws = ({
+}, vs = ({
   defaultValue: o,
   description: t,
   disableClearLogic: s,
-  disabledItemIdKeys: i,
-  endSlot: x,
-  errorMessage: c,
-  fullWidth: u = !0,
+  disabledItemIdKeys: l,
+  endSlot: f,
+  errorMessage: u,
+  fullWidth: a = !0,
   getItemId: m,
-  getLabel: j,
-  hideHintLabel: N,
-  hideInputFooter: h,
-  hideInputHeader: b,
-  isDisabled: e,
-  isInvalid: f,
-  isLoading: l,
+  getLabel: h,
+  hideHintLabel: b,
+  hideInputFooter: N,
+  hideInputHeader: d,
+  isDisabled: c,
+  isInvalid: j,
+  isLoading: n,
   isRequired: w,
-  items: p,
-  label: n,
-  labelId: a,
-  name: v,
-  onChange: d,
-  onLoadMore: P,
-  onQueryChange: R,
-  placeholder: T,
+  items: v,
+  label: e,
+  labelId: p,
+  name: i,
+  onChange: x,
+  onLoadMore: D,
+  onQueryChange: M,
+  placeholder: A,
   placement: W = "bottom start",
-  selectRenderElements: G,
-  startSlot: O,
-  value: y
+  selectRenderElements: T,
+  startSlot: R,
+  value: S
 }) => {
-  const { isDisabled: L } = I(rr), $ = F(null), S = F(null), [H, V] = M(y ?? o), [X, Z] = M(!1), Q = () => {
-    Z(!0);
-  }, Y = A(
-    (E) => {
-      var z;
-      V(E), d == null || d(E), (z = $.current) == null || z.focus();
+  const { isDisabled: G } = rr(tr), F = O(null), y = O(null), [L, J] = z(S ?? o), [X, _] = z(!1), q = () => {
+    _(!0);
+  }, V = P(
+    (U) => {
+      var H;
+      J(U), x == null || x(U), (H = F.current) == null || H.focus();
     },
-    [d]
-  ), { direction: _ } = tr(), { wrapper: U } = q({
-    fullWidth: u,
-    isInvalid: f,
-    isDisabled: e || L
+    [x]
+  ), { direction: g } = sr(), { wrapper: E } = Q({
+    fullWidth: a,
+    isInvalid: j,
+    isDisabled: c || G
   });
-  J(() => {
-    V(y ?? o);
-  }, [o, y]);
-  const k = y ?? H;
+  Y(() => {
+    J(S ?? o);
+  }, [o, S]);
+  const k = S ?? L;
   return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(or, { name: v, value: k, getItemId: m }),
-    /* @__PURE__ */ r.jsxs("div", { className: U(), children: [
+    /* @__PURE__ */ r.jsx(er, { name: i, value: k, getItemId: m }),
+    /* @__PURE__ */ r.jsxs("div", { className: E(), children: [
       /* @__PURE__ */ r.jsx(
         ar,
         {
-          label: n,
+          label: e,
           isRequired: w,
-          hideHintLabel: N,
-          hideInputHeader: b,
-          labelId: a
+          hideHintLabel: b,
+          hideInputHeader: d,
+          labelId: p
         }
       ),
-      /* @__PURE__ */ r.jsx("div", { ref: S, children: /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ r.jsx("div", { ref: y, children: /* @__PURE__ */ r.jsx(
         Ar,
         {
           disableClearLogic: s,
-          endSlot: x,
-          fullWidth: u,
-          getLabel: j,
+          endSlot: f,
+          fullWidth: a,
+          getLabel: h,
           getItemId: m,
-          isDisabled: e,
-          isInvalid: f,
-          onChange: Y,
+          isDisabled: c,
+          isInvalid: j,
+          onChange: V,
           open: X,
-          openPopover: Q,
-          placeholder: T,
-          searchInputRef: $,
-          startSlot: O,
+          openPopover: q,
+          placeholder: A,
+          searchInputRef: F,
+          startSlot: R,
           value: k
         }
       ) }),
@@ -756,31 +765,31 @@ const Pr = ({
         mr,
         {
           description: t,
-          errorMessage: c,
-          hideInputFooter: h
+          errorMessage: u,
+          hideInputFooter: N
         }
       )
     ] }),
     /* @__PURE__ */ r.jsx(
-      sr,
+      or,
       {
-        label: n,
-        searchInputRef: $,
-        triggerRef: S,
+        label: e,
+        searchInputRef: F,
+        triggerRef: y,
         getItemId: m,
-        getLabel: j,
-        items: p,
-        onMultiChange: Y,
+        getLabel: h,
+        items: v,
+        onMultiChange: V,
         value: k,
         placement: W,
         open: X,
-        setOpenPopover: Z,
-        selectRenderElements: G,
-        disabledItemIdKeys: i,
-        direction: _,
-        onQueryChange: R,
-        isLoading: l,
-        onLoadMore: P
+        setOpenPopover: _,
+        selectRenderElements: T,
+        disabledItemIdKeys: l,
+        direction: g,
+        onQueryChange: M,
+        isLoading: n,
+        onLoadMore: D
       }
     )
   ] });
@@ -788,37 +797,37 @@ const Pr = ({
   children: o,
   defaultValue: t,
   disabledItemIdKeys: s,
-  getItemId: i,
-  getLabel: x,
-  isDisabled: c,
-  isInvalid: u,
+  getItemId: l,
+  getLabel: f,
+  isDisabled: u,
+  isInvalid: a,
   isLoading: m,
-  items: j,
-  label: N,
-  name: h,
-  onChange: b,
-  onQueryChange: e,
-  placement: f = "bottom start",
-  selectRenderElements: l,
+  items: h,
+  label: b,
+  name: N,
+  onChange: d,
+  onQueryChange: c,
+  placement: j = "bottom start",
+  selectRenderElements: n,
   value: w
 }) => {
-  const { isDisabled: p } = I(rr), n = F(null), a = F(null), v = F(null), [d, P] = M(w ?? t), [R, T] = M(!1), W = () => {
-    var S;
-    T(!0), (S = a.current) == null || S.click();
-  }, G = () => T(!1), O = A(
-    (S) => {
-      P(S), b == null || b(S), G();
+  const { isDisabled: v } = rr(tr), e = O(null), p = O(null), i = O(null), [x, D] = z(w ?? t), [M, A] = z(!1), W = () => {
+    var y;
+    A(!0), (y = p.current) == null || y.click();
+  }, T = () => A(!1), R = P(
+    (y) => {
+      D(y), d == null || d(y), T();
     },
-    [b]
-  ), { direction: y } = tr(), { wrapper: L } = q({
+    [d]
+  ), { direction: S } = sr(), { wrapper: G } = Q({
     fullWidth: !1,
-    isInvalid: u,
-    isDisabled: c
+    isInvalid: a,
+    isDisabled: u
   });
-  J(() => {
-    P(w ?? t);
+  Y(() => {
+    D(w ?? t);
   }, [t, w]);
-  const $ = w ?? d;
+  const F = w ?? x;
   return /* @__PURE__ */ r.jsx(
     lr,
     {
@@ -827,32 +836,32 @@ const Pr = ({
           pr,
           {
             onPress: () => W(),
-            isDisabled: c || p
+            isDisabled: u || v
           }
         ]
       ],
       children: /* @__PURE__ */ r.jsxs("div", { children: [
-        /* @__PURE__ */ r.jsx(or, { name: h, value: $, getItemId: i }),
-        /* @__PURE__ */ r.jsx("div", { className: L(), children: /* @__PURE__ */ r.jsx("div", { ref: v, children: o }) }),
+        /* @__PURE__ */ r.jsx(er, { name: N, value: F, getItemId: l }),
+        /* @__PURE__ */ r.jsx("div", { className: G(), children: /* @__PURE__ */ r.jsx("div", { ref: i, children: o }) }),
         /* @__PURE__ */ r.jsx(
-          sr,
+          or,
           {
-            triggerRef: v,
-            label: N,
-            getItemId: i,
-            getLabel: x,
-            items: j,
-            open: R,
-            setOpenPopover: T,
-            selectRenderElements: l,
+            triggerRef: i,
+            label: b,
+            getItemId: l,
+            getLabel: f,
+            items: h,
+            open: M,
+            setOpenPopover: A,
+            selectRenderElements: n,
             disabledItemIdKeys: s,
-            direction: y,
-            onQueryChange: e,
+            direction: S,
+            onQueryChange: c,
             isLoading: m,
-            searchInputRef: n,
-            placement: f,
-            value: $,
-            onSingleChange: O
+            searchInputRef: e,
+            placement: j,
+            value: F,
+            onSingleChange: R
           }
         )
       ] })
@@ -862,70 +871,70 @@ const Pr = ({
   children: o,
   defaultValue: t,
   disabledItemIdKeys: s,
-  fullWidth: i = !0,
-  getItemId: x,
-  getLabel: c,
-  isDisabled: u,
+  fullWidth: l = !0,
+  getItemId: f,
+  getLabel: u,
+  isDisabled: a,
   isInvalid: m,
-  isLoading: j,
-  items: N,
-  label: h,
-  name: b,
-  onChange: e,
-  onQueryChange: f,
-  placement: l = "bottom start",
+  isLoading: h,
+  items: b,
+  label: N,
+  name: d,
+  onChange: c,
+  onQueryChange: j,
+  placement: n = "bottom start",
   selectRenderElements: w,
-  value: p
+  value: v
 }) => {
-  const { isDisabled: n } = I(rr), a = F(null), v = F(null), d = F(null), [P, R] = M(p ?? t), [T, W] = M(!1), G = () => {
-    var S;
-    W(!0), (S = v.current) == null || S.click();
-  }, O = A(
-    (S) => {
-      var H;
-      R(S), e == null || e(S), (H = a.current) == null || H.focus();
+  const { isDisabled: e } = rr(tr), p = O(null), i = O(null), x = O(null), [D, M] = z(v ?? t), [A, W] = z(!1), T = () => {
+    var y;
+    W(!0), (y = i.current) == null || y.click();
+  }, R = P(
+    (y) => {
+      var L;
+      M(y), c == null || c(y), (L = p.current) == null || L.focus();
     },
-    [e]
-  ), { direction: y } = tr(), { wrapper: L } = q({
-    fullWidth: i,
+    [c]
+  ), { direction: S } = sr(), { wrapper: G } = Q({
+    fullWidth: l,
     isInvalid: m,
-    isDisabled: u
+    isDisabled: a
   });
-  J(() => {
-    R(p ?? t);
-  }, [t, p]);
-  const $ = p ?? P;
+  Y(() => {
+    M(v ?? t);
+  }, [t, v]);
+  const F = v ?? D;
   return /* @__PURE__ */ r.jsx(
     lr,
     {
       values: [
         [
           pr,
-          { onPress: () => G(), isDisabled: u || n }
+          { onPress: () => T(), isDisabled: a || e }
         ]
       ],
       children: /* @__PURE__ */ r.jsxs("div", { children: [
-        /* @__PURE__ */ r.jsx(or, { name: b, value: $, getItemId: x }),
-        /* @__PURE__ */ r.jsx("div", { className: L(), children: /* @__PURE__ */ r.jsx("div", { ref: d, children: o }) }),
+        /* @__PURE__ */ r.jsx(er, { name: d, value: F, getItemId: f }),
+        /* @__PURE__ */ r.jsx("div", { className: G(), children: /* @__PURE__ */ r.jsx("div", { ref: x, children: o }) }),
         /* @__PURE__ */ r.jsx(
-          sr,
+          or,
           {
-            label: h,
-            searchInputRef: a,
-            triggerRef: d,
-            getItemId: x,
-            getLabel: c,
-            items: N,
-            open: T,
+            label: N,
+            searchInputRef: p,
+            triggerRef: x,
+            getItemId: f,
+            getLabel: u,
+            items: b,
+            open: A,
             setOpenPopover: W,
             selectRenderElements: w,
             disabledItemIdKeys: s,
-            direction: y,
-            onQueryChange: f,
-            isLoading: j,
-            value: $,
-            onMultiChange: O,
-            placement: l
+            direction: S,
+            onQueryChange: j,
+            isLoading: h,
+            value: F,
+            onMultiChange: R,
+            placement: n
           }
         )
       ] })
@@ -933,8 +942,8 @@ const Pr = ({
   );
 };
 export {
-  ws as MultiSearchListField,
+  vs as MultiSearchListField,
   ys as MultiSearchListFieldWithCustomTrigger,
-  vs as SearchListField,
+  ws as SearchListField,
   Ss as SearchListFieldWithCustomTrigger
 };