@new-black/lyra 1.0.8 → 1.0.10

package/dist/lyra36.js

@@ -1,13 +1,13 @@
 import { j as r } from "./lyra88.js";
-import { useContext as U, useState as y, useRef as q, useCallback as H, useEffect as z } from "react";
-import { Group as Y } from "./lyra87.js";
-import { clsx as Z } from "./lyra448.js";
+import { useContext as Q, useState as F, useRef as W, useCallback as P, useEffect as z, useMemo as C } from "react";
+import { Button as q, Group as g } from "./lyra87.js";
+import { clsx as I } from "./lyra448.js";
 import "./lyra2.js";
 import "./lyra3.js";
 import "./lyra4.js";
 import "./lyra5.js";
 import "./lyra6.js";
-import { SvgIcon as D } from "./lyra63.js";
+import { SvgIcon as H } from "./lyra63.js";
 import "./lyra8.js";
 import "./lyra9.js";
 import "./lyra10.js";
@@ -26,33 +26,35 @@ import "./lyra22.js";
 import "./lyra23.js";
 import "./lyra24.js";
 import "./lyra25.js";
-import { FieldGroupContext as A } from "./lyra26.js";
+import { FieldGroupContext as X } from "./lyra26.js";
 import "./lyra27.js";
 import "./lyra28.js";
 import "./lyra29.js";
 import "./lyra93.js";
 import "./lyra78.js";
 import "./lyra456.js";
-import { InputHeader as J } from "./lyra38.js";
-import { InputFooter as Q } from "./lyra39.js";
-import { sharedInputStyles as E } from "./lyra40.js";
+import { InputHeader as Y } from "./lyra38.js";
+import { InputFooter as Z } from "./lyra39.js";
+import { sharedInputStyles as M } from "./lyra40.js";
 import "./lyra44.js";
 import "./lyra31.js";
 import "./lyra32.js";
 import "./lyra33.js";
 import "./lyra34.js";
 import "./lyra35.js";
-import { Text as V } from "./lyra71.js";
-import "./lyra72.js";
-import { sharedListStyles as _ } from "./lyra453.js";
-import { SharedListItem as g } from "./lyra454.js";
-import { Popover as K } from "./lyra52.js";
+import rr from "./lyra594.js";
+import { sharedListStyles as or } from "./lyra451.js";
+import { SharedListItem as tr } from "./lyra452.js";
+import { Popover as sr } from "./lyra52.js";
 import "./lyra53.js";
 import "./lyra54.js";
 import "./lyra55.js";
-import { InputTagGroup as I, InputTag as C } from "./lyra457.js";
+import { Text as _ } from "./lyra71.js";
+import "./lyra72.js";
+import { InputTagGroup as nr, InputTag as ir } from "./lyra457.js";
 import "./lyra458.js";
 import "react-dom";
+import { useMousePosition as cr } from "./lyra82.js";
 import "./lyra41.js";
 import "./lyra42.js";
 import "./lyra43.js";
@@ -79,350 +81,511 @@ import "./lyra76.js";
 import "./lyra77.js";
 import "./lyra79.js";
 import "./lyra96.js";
-import { Listbox as S } from "./lyra616.js";
-import { useLocale as W } from "./lyra86.js";
-const X = ({
-  direction: l,
-  disabledItemIdKeys: t,
-  getItemId: a,
-  items: s,
-  label: c,
-  open: e,
-  selectRenderElements: n,
-  triggerRef: p
+import { useLocale as R } from "./lyra86.js";
+const er = ({
+  closePopover: e,
+  disabledItemIdKeys: s,
+  filteredItems: m,
+  getItemId: o,
+  onMultiChange: a,
+  onSingleChange: l,
+  value: n
+}) => {
+  const A = C(() => {
+    if (Array.isArray(n))
+      return n.length ? m.findIndex((t) => o(t) === o(n[0])) : 0;
+    if (n)
+      return m.findIndex((t) => o(t) === o(n));
+  }, [m, o, n]), [w, u] = F(A ?? 0), j = P(
+    (t) => {
+      if (Number.isInteger(t)) {
+        for (let p = t - 1; p >= 0; p--)
+          if (!(s != null && s.includes(o(m[p]))))
+            return Math.max(p, 0);
+      }
+      return -1;
+    },
+    [s, m, o]
+  ), k = P(
+    (t) => {
+      if (Number.isInteger(t)) {
+        for (let p = t + 1; p < m.length; p++)
+          if (!(s != null && s.includes(o(m[p]))))
+            return Math.min(m.length - 1, p);
+      }
+      return -1;
+    },
+    [s, m, o]
+  ), D = W([]), x = P((t, p) => {
+    p && (D.current[t] = p);
+  }, []), i = P(
+    (t) => {
+      if (a) {
+        const p = n ? [...n] : [], S = p.map(o), h = S != null && S.includes(o(t)) ? p.filter((G) => o(G) !== o(t)) : [...p, t];
+        a == null || a(h);
+      } else
+        l && (l == null || l(t));
+    },
+    [o, a, l, n]
+  ), c = P(
+    (t) => Array.isArray(n) ? n.includes(t) : n === t,
+    [n]
+  ), N = cr(), f = W(void 0), $ = P(
+    (t) => {
+      const p = w;
+      if (t.key === "ArrowDown") {
+        t.preventDefault();
+        const S = k(p);
+        if (S >= 0) {
+          u(S), f.current = N;
+          const h = D.current[S];
+          h == null || h.scrollIntoView({ block: "nearest" }), h == null || h.focus();
+        }
+      } else if (t.key === "ArrowUp") {
+        t.preventDefault();
+        const S = j(p);
+        if (S >= 0) {
+          u(S);
+          const h = D.current[S];
+          h == null || h.scrollIntoView({ block: "nearest" }), h == null || h.focus(), f.current = N;
+        }
+      } else
+        t.key === "Escape" && e();
+    },
+    [w, e, k, j, N]
+  ), d = P(
+    (t, p) => {
+      t && f.current !== N && (u(p), f.current = N);
+    },
+    [N]
+  );
+  return z(() => {
+    var t;
+    (t = D.current) != null && t[w] && D.current[w].focus();
+  }, [open]), {
+    activeItem: w,
+    assignRefOnIndex: x,
+    getItemIsSelected: c,
+    onKeyDown: $,
+    onHoverChange: d,
+    selectedItemIndex: A,
+    toggleSelection: i
+  };
+}, pr = ({
+  disabledItemIdKeys: e,
+  getItemId: s,
+  items: m,
+  onMultiChange: o,
+  onSingleChange: a,
+  selectRenderElements: l,
+  setOpenPopover: n,
+  value: A
 }) => {
-  var i;
+  const {
+    activeItem: w,
+    assignRefOnIndex: u,
+    getItemIsSelected: j,
+    onHoverChange: k,
+    onKeyDown: D,
+    toggleSelection: x
+  } = er({
+    closePopover: () => n(!1),
+    disabledItemIdKeys: e,
+    filteredItems: m,
+    getItemId: s,
+    onMultiChange: o,
+    onSingleChange: a,
+    value: A
+  }), i = (c) => (e == null ? void 0 : e.includes(s(c))) ?? !1;
   return /* @__PURE__ */ r.jsx(
-    K,
+    "div",
+    {
+      className: or({
+        className: "h-full max-h-72 overflow-auto"
+      }),
+      children: m.map((c, N) => /* @__PURE__ */ r.jsx(
+        q,
+        {
+          "data-index": N,
+          ref: (f) => u(N, f),
+          className: "w-full text-start outline-none",
+          onHoverChange: (f) => {
+            k(f, N);
+          },
+          onPress: () => x(c),
+          onKeyDown: (f) => D(f),
+          isDisabled: i(c),
+          children: /* @__PURE__ */ r.jsx(
+            tr,
+            {
+              item: c,
+              state: {
+                active: w === N,
+                disabled: (e == null ? void 0 : e.includes(s(c))) ?? !1,
+                selected: j(c)
+              },
+              selectRenderElements: l,
+              hasSelection: !0
+            }
+          )
+        },
+        s(c)
+      ))
+    }
+  );
+}, B = ({
+  direction: e,
+  disabledItemIdKeys: s,
+  getItemId: m,
+  items: o,
+  label: a,
+  onMultiChange: l,
+  onSingleChange: n,
+  open: A,
+  placement: w = "bottom start",
+  selectRenderElements: u,
+  setOpenPopover: j,
+  triggerRef: k,
+  value: D
+}) => {
+  var N, f;
+  const [x, i] = F(
+    (N = k.current) == null ? void 0 : N.offsetWidth
+  ), c = x ?? ((f = k.current) == null ? void 0 : f.offsetWidth);
+  return rr("resize", () => {
+    var $;
+    i(($ = k.current) == null ? void 0 : $.offsetWidth);
+  }), /* @__PURE__ */ r.jsx(
+    sr,
     {
       className: "p-1",
-      isOpen: e,
-      triggerRef: p,
+      isOpen: A,
+      triggerRef: k,
+      onOpenChange: j,
       shouldUpdatePosition: !0,
-      "aria-label": c,
+      "aria-label": a,
       disablePadding: !0,
+      placement: w,
       style: {
-        width: ((i = p.current) == null ? void 0 : i.offsetWidth) + "px",
-        direction: l
+        width: c && c > 280 ? c + "px" : "280px",
+        direction: e
       },
-      children: /* @__PURE__ */ r.jsx(
-        S.Options,
+      children: A ? /* @__PURE__ */ r.jsx(
+        pr,
         {
-          static: !0,
-          className: _({
-            className: "h-full max-h-72 overflow-auto"
-          }),
-          children: s.map((m) => /* @__PURE__ */ r.jsx(
-            S.Option,
-            {
-              value: m,
-              disabled: t == null ? void 0 : t.includes(a(m)),
-              children: (d) => /* @__PURE__ */ r.jsx(
-                g,
-                {
-                  item: m,
-                  state: d,
-                  selectRenderElements: n,
-                  hasSelection: !0
-                }
-              )
-            },
-            a(m)
-          ))
+          getItemId: m,
+          items: o,
+          onMultiChange: l,
+          onSingleChange: n,
+          selectRenderElements: u,
+          setOpenPopover: j,
+          value: D,
+          disabledItemIdKeys: s
         }
-      )
+      ) : null
     }
   );
-}, rr = ({
-  disableClearLogic: l,
-  fullWidth: t,
-  getLabel: a,
-  isDisabled: s,
-  isInvalid: c,
-  onChange: e,
+}, mr = ({
+  disableClearLogic: e,
+  fullWidth: s,
+  getLabel: m,
+  isDisabled: o,
+  isInvalid: a,
+  onChange: l,
   placeholder: n,
-  value: p
+  renderCustomElementInValueButton: A,
+  selectRenderElements: w,
+  setOpenPopover: u,
+  value: j
 }) => {
-  const [i, m] = y(!1), [d, o] = y(!1), { inputField: x } = E({}), v = (u) => {
-    (u.key === "Escape" || u.key === "Backspace") && !l && (u.stopPropagation(), e == null || e(void 0));
+  var x;
+  const { inputField: k } = M({}), D = (i) => {
+    (i.key === "Escape" || i.key === "Backspace") && !e ? l == null || l(void 0) : i.key === "ArrowDown" && (i.preventDefault(), u(!0));
   };
   return /* @__PURE__ */ r.jsxs(
-    S.Button,
+    q,
     {
-      className: x({
-        fullWidth: t,
-        isDisabled: s,
-        isHovered: d,
+      className: ({ isFocused: i, isHovered: c }) => k({
+        fullWidth: s,
+        isDisabled: o,
+        isHovered: c,
         isFocused: i,
-        isInvalid: c,
+        isInvalid: a,
         hasEndSlot: !0,
-        className: d && !c && !s && !i ? "border-hover" : ""
+        className: c && !a && !o && !i ? "border-hover" : ""
       }),
-      onPointerEnter: () => o(!0),
-      onPointerLeave: () => o(!1),
-      onMouseEnter: () => o(!0),
-      onMouseLeave: () => o(!1),
-      onFocus: () => {
-        m(!0);
-      },
-      onBlur: () => {
-        m(!1);
+      isDisabled: o,
+      onKeyDown: D,
+      onPress: () => {
+        u(!0);
       },
-      onKeyDown: v,
       children: [
-        /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: p ? /* @__PURE__ */ r.jsx(r.Fragment, { children: a(p) }) : /* @__PURE__ */ r.jsx(V, { color: "secondary", children: n }) }),
+        /* @__PURE__ */ r.jsxs("div", { className: "flex grow text-start", children: [
+          A && j ? (x = w(j)) == null ? void 0 : x.customElement : null,
+          j ? /* @__PURE__ */ r.jsx(r.Fragment, { children: m(j) }) : /* @__PURE__ */ r.jsx(_, { color: "secondary", children: n })
+        ] }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-          p && !l && !s ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
+          j && !e && !o ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
             "div",
             {
               className: "text-secondary",
-              onClick: (u) => {
-                u.stopPropagation(), e == null || e(void 0);
+              role: "button",
+              onClick: (i) => {
+                i.stopPropagation(), l == null || l(void 0);
               },
-              children: /* @__PURE__ */ r.jsx(D, { name: "clear" })
+              children: /* @__PURE__ */ r.jsx(H, { name: "clear" })
             }
           ) }) : null,
-          /* @__PURE__ */ r.jsx(D, { name: "chevron-up-down" })
+          /* @__PURE__ */ r.jsx(H, { name: "chevron-up-down" })
         ] })
       ]
     }
   );
-}, tr = ({
-  fullWidth: l,
-  getItemId: t,
-  getLabel: a,
-  isDisabled: s,
-  isInvalid: c,
-  label: e,
+}, lr = ({
+  fullWidth: e,
+  getItemId: s,
+  getLabel: m,
+  isDisabled: o,
+  isInvalid: a,
+  label: l,
   onChange: n,
-  placeholder: p,
-  value: i
+  placeholder: A,
+  setOpenPopover: w,
+  value: u
 }) => {
-  const { inputField: m } = E({}), d = H(
-    (o) => {
-      i && n(
-        i.filter((x) => {
-          const v = t(x);
-          return !o.has(v);
+  const { inputField: j } = M({}), k = P(
+    (x) => {
+      u && n(
+        u.filter((i) => {
+          const c = s(i);
+          return !x.has(c);
         })
       );
     },
-    [t, n, i]
-  );
-  return /* @__PURE__ */ r.jsx(
-    Y,
+    [s, n, u]
+  ), D = (x) => {
+    (x.key === "ArrowDown" || x.key === "Enter" || x.key === " ") && (x.preventDefault(), w(!0));
+  };
+  return /* @__PURE__ */ r.jsx(g, { children: ({ isFocusWithin: x }) => /* @__PURE__ */ r.jsx(
+    q,
     {
-      className: ({ isFocusWithin: o, isHovered: x }) => m({
-        fullWidth: l,
-        isDisabled: s,
-        isHovered: x,
-        isFocused: o,
-        isInvalid: c,
+      className: ({ isFocused: i, isHovered: c }) => j({
+        fullWidth: e,
+        isDisabled: o,
+        isHovered: c,
+        isFocused: i || x,
+        isInvalid: a,
         hasEndSlot: !0,
-        className: Z(
-          x && !c && !s && !o ? "border-hover" : "",
+        className: I(
+          c && !a && !o && !i ? "border-hover" : "",
           "items-start"
         )
       }),
-      children: /* @__PURE__ */ r.jsxs(S.Button, { className: "flex w-full outline-none", as: "div", role: "button", tabIndex: 0, children: [
-        /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: i && i.length ? /* @__PURE__ */ r.jsx(
-          I,
+      onKeyDown: (i) => D(i),
+      onPress: () => w(!0),
+      isDisabled: o,
+      children: /* @__PURE__ */ r.jsxs("div", { className: "flex w-full outline-none", children: [
+        /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: u && u.length ? /* @__PURE__ */ r.jsx(
+          nr,
           {
-            label: e ?? "Selected items",
+            label: l ?? "Selected items",
             className: "-m-1.5 -mt-[0.3125rem]",
-            onRemove: s ? void 0 : d,
-            children: i.map((o) => /* @__PURE__ */ r.jsx(C, { id: t(o), isDisabled: s, children: a(o) }, t(o)))
+            onRemove: o ? void 0 : k,
+            children: u.map((i) => /* @__PURE__ */ r.jsx(ir, { id: s(i), isDisabled: o, children: m(i) }, s(i)))
           }
-        ) : /* @__PURE__ */ r.jsx(V, { color: "secondary", children: p }) }),
-        /* @__PURE__ */ r.jsx(D, { name: "chevron-up-down", className: "h-4 w-4 min-w-[16px]" })
+        ) : /* @__PURE__ */ r.jsx(_, { color: "secondary", children: A }) }),
+        /* @__PURE__ */ r.jsx(H, { name: "chevron-up-down", className: "h-4 w-4 min-w-4" })
       ] })
     }
-  );
-}, Lt = ({
-  by: l,
-  defaultValue: t,
-  description: a,
-  disableClearLogic: s,
-  disabledItemIdKeys: c,
-  errorMessage: e,
-  fullWidth: n = !0,
-  getItemId: p,
-  getLabel: i,
-  hideHintLabel: m,
-  hideInputFooter: d,
-  hideInputHeader: o,
-  isDisabled: x,
-  isInvalid: v,
-  isRequired: u,
-  items: P,
-  label: N,
-  name: B,
+  ) });
+}, K = ({
+  getItemId: e,
+  name: s,
+  value: m
+}) => s ? Array.isArray(m) ? m.map((o) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: e(o) }, e(o))) : m ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: e(m) }) : null : null, Jo = ({
+  defaultValue: e,
+  description: s,
+  disableClearLogic: m,
+  disabledItemIdKeys: o,
+  errorMessage: a,
+  fullWidth: l = !0,
+  getItemId: n,
+  getLabel: A,
+  hideHintLabel: w,
+  hideInputFooter: u,
+  hideInputHeader: j,
+  isDisabled: k,
+  isInvalid: D,
+  isRequired: x,
+  items: i,
+  label: c,
+  name: N,
   onChange: f,
-  placeholder: k,
-  selectRenderElements: G,
-  value: j
+  placeholder: $,
+  placement: d,
+  renderCustomElementInValueButton: t,
+  selectRenderElements: p,
+  value: S
 }) => {
-  const { isDisabled: L } = U(A), [M, b] = y(j ?? t), { wrapper: w } = E({}), $ = q(null), { direction: R } = W(), F = H(
-    (h) => {
-      b(h), f == null || f(h);
+  const { isDisabled: h } = Q(X), [G, y] = F(!1), O = k || h, [b, V] = F(S ?? e), { wrapper: U } = M({}), L = W(null), { direction: T } = R(), v = P(
+    (J) => {
+      V(J), f == null || f(J), y(!1);
     },
     [f]
   );
-  return z(() => {
-    b(j ?? t);
-  }, [t, j]), /* @__PURE__ */ r.jsx(
-    S,
-    {
-      disabled: x || L,
-      name: B,
-      by: l,
-      onChange: F,
-      value: j ?? M ?? "",
-      children: ({ disabled: h, open: O, value: T }) => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        /* @__PURE__ */ r.jsxs("div", { className: w({ fullWidth: n }), children: [
-          /* @__PURE__ */ r.jsx(
-            J,
-            {
-              label: N,
-              hideHintLabel: m,
-              hideInputHeader: o,
-              isRequired: u
-            }
-          ),
-          /* @__PURE__ */ r.jsx("div", { ref: $, children: /* @__PURE__ */ r.jsx(
-            rr,
-            {
-              fullWidth: n,
-              isDisabled: h,
-              disableClearLogic: s,
-              isInvalid: v,
-              placeholder: k,
-              value: T,
-              getLabel: i,
-              getItemId: p,
-              label: N,
-              onChange: F
-            }
-          ) }),
-          /* @__PURE__ */ r.jsx(
-            Q,
-            {
-              description: a,
-              errorMessage: e,
-              hideInputFooter: d
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r.jsx(
-          X,
-          {
-            triggerRef: $,
-            label: `${N} options`,
-            getItemId: p,
-            selectRenderElements: G,
-            items: P,
-            open: O,
-            disabledItemIdKeys: c,
-            direction: R
-          }
-        )
-      ] })
-    }
-  );
-}, Mt = ({
-  by: l,
-  defaultValue: t,
-  description: a,
-  disableClearLogic: s,
-  disabledItemIdKeys: c,
-  errorMessage: e,
-  fullWidth: n = !0,
-  getItemId: p,
-  getLabel: i,
-  hideHintLabel: m,
-  hideInputFooter: d,
-  hideInputHeader: o,
-  isDisabled: x,
-  isInvalid: v,
-  isRequired: u,
-  items: P,
-  label: N,
-  name: B,
+  z(() => {
+    V(S ?? e);
+  }, [e, S]);
+  const E = S ?? b;
+  return /* @__PURE__ */ r.jsxs("div", { children: [
+    /* @__PURE__ */ r.jsx(K, { name: N, value: E, getItemId: n }),
+    /* @__PURE__ */ r.jsxs("div", { className: U({ fullWidth: l }), children: [
+      /* @__PURE__ */ r.jsx(
+        Y,
+        {
+          label: c,
+          hideHintLabel: w,
+          hideInputHeader: j,
+          isRequired: x
+        }
+      ),
+      /* @__PURE__ */ r.jsx("div", { ref: L, children: /* @__PURE__ */ r.jsx(
+        mr,
+        {
+          fullWidth: l,
+          isDisabled: O,
+          disableClearLogic: m,
+          isInvalid: D,
+          placeholder: $,
+          value: E,
+          getLabel: A,
+          getItemId: n,
+          label: c,
+          onChange: v,
+          setOpenPopover: y,
+          renderCustomElementInValueButton: t,
+          selectRenderElements: p
+        }
+      ) }),
+      /* @__PURE__ */ r.jsx(
+        Z,
+        {
+          description: s,
+          errorMessage: a,
+          hideInputFooter: u
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsx(
+      B,
+      {
+        triggerRef: L,
+        label: `${c} options`,
+        getItemId: n,
+        selectRenderElements: p,
+        items: i,
+        open: G,
+        disabledItemIdKeys: o,
+        direction: T,
+        setOpenPopover: y,
+        onSingleChange: v,
+        value: E,
+        placement: d
+      }
+    )
+  ] });
+}, Qo = ({
+  defaultValue: e,
+  description: s,
+  disableClearLogic: m,
+  disabledItemIdKeys: o,
+  errorMessage: a,
+  fullWidth: l = !0,
+  getItemId: n,
+  getLabel: A,
+  hideHintLabel: w,
+  hideInputFooter: u,
+  hideInputHeader: j,
+  isDisabled: k,
+  isInvalid: D,
+  isRequired: x,
+  items: i,
+  label: c,
+  name: N,
   onChange: f,
-  placeholder: k,
-  selectRenderElements: G,
-  value: j
+  placeholder: $,
+  placement: d,
+  selectRenderElements: t,
+  value: p
 }) => {
-  const { isDisabled: L } = U(A), [M, b] = y(j ?? t), w = q(null), { direction: $ } = W(), { wrapper: R } = E({}), F = H(
-    (h) => {
-      b(h), f == null || f(h);
+  const { isDisabled: S } = Q(X), h = k || S, [G, y] = F(!1), [O, b] = F(p ?? e), V = W(null), { direction: U } = R(), { wrapper: L } = M({}), T = P(
+    (E) => {
+      b(E), f == null || f(E);
     },
     [f]
   );
-  return z(() => {
-    b(j ?? t);
-  }, [t, j]), /* @__PURE__ */ r.jsx(
-    S,
-    {
-      disabled: x || L,
-      name: B,
-      by: l,
-      onChange: F,
-      multiple: !0,
-      value: j ?? M ?? [],
-      children: ({ disabled: h, open: O, value: T }) => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        /* @__PURE__ */ r.jsxs("div", { className: R({ fullWidth: n }), children: [
-          /* @__PURE__ */ r.jsx(
-            J,
-            {
-              label: N,
-              hideHintLabel: m,
-              hideInputHeader: o,
-              isRequired: u
-            }
-          ),
-          /* @__PURE__ */ r.jsx("div", { ref: w, children: /* @__PURE__ */ r.jsx(
-            tr,
-            {
-              fullWidth: n,
-              isDisabled: h,
-              isInvalid: v,
-              placeholder: k,
-              value: T,
-              onChange: F,
-              getItemId: p,
-              getLabel: i,
-              label: N,
-              disableClearLogic: s
-            }
-          ) }),
-          /* @__PURE__ */ r.jsx(
-            Q,
-            {
-              description: a,
-              errorMessage: e,
-              hideInputFooter: d
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r.jsx(
-          X,
-          {
-            label: `${N} options`,
-            triggerRef: w,
-            items: P,
-            open: O,
-            getItemId: p,
-            selectRenderElements: G,
-            disabledItemIdKeys: c,
-            direction: $
-          }
-        )
-      ] })
-    }
-  );
+  z(() => {
+    b(p ?? e);
+  }, [e, p]);
+  const v = p ?? O;
+  return /* @__PURE__ */ r.jsxs("div", { children: [
+    /* @__PURE__ */ r.jsx(K, { name: N, value: v, getItemId: n }),
+    /* @__PURE__ */ r.jsxs("div", { className: L({ fullWidth: l }), children: [
+      /* @__PURE__ */ r.jsx(
+        Y,
+        {
+          label: c,
+          hideHintLabel: w,
+          hideInputHeader: j,
+          isRequired: x
+        }
+      ),
+      /* @__PURE__ */ r.jsx("div", { ref: V, children: /* @__PURE__ */ r.jsx(
+        lr,
+        {
+          fullWidth: l,
+          isDisabled: h,
+          isInvalid: D,
+          placeholder: $,
+          value: v,
+          onChange: T,
+          getItemId: n,
+          getLabel: A,
+          label: c,
+          disableClearLogic: m,
+          setOpenPopover: y,
+          selectRenderElements: t
+        }
+      ) }),
+      /* @__PURE__ */ r.jsx(
+        Z,
+        {
+          description: s,
+          errorMessage: a,
+          hideInputFooter: u
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsx(
+      B,
+      {
+        label: `${c} options`,
+        triggerRef: V,
+        items: i,
+        open: G,
+        getItemId: n,
+        selectRenderElements: t,
+        disabledItemIdKeys: o,
+        direction: U,
+        setOpenPopover: y,
+        onMultiChange: T,
+        placement: d,
+        value: v
+      }
+    )
+  ] });
 };
 export {
-  Mt as MultiSelect,
-  Lt as Select
+  Qo as MultiSelect,
+  Jo as Select
 };