@new-black/lyra 1.0.3 → 1.0.5

package/dist/lyra37.js

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