@spear-ai/spectral 1.3.49 → 1.3.50

package/dist/Select.js

@@ -1,136 +1,1044 @@
 "use client";
 import "./styles/main.css";
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
-import { SelectBase as E } from "./Select/SelectBase.js";
-import { c as i } from "./twUtils-CRiPKpXj.js";
-import { forwardRef as o, useId as $ } from "react";
-import { a as k } from "./chevron-down-UbkgS76q.js";
-import { L as O } from "./loader-circle-CvdzOiQ_.js";
-const q = ({ children: e, ...t }) => /* @__PURE__ */ s("div", { ...t, children: e }), p = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("text-text-secondary px-2 py-1.5 text-sm font-semibold", e), ...t }));
-p.displayName = "SelectGroup";
-const z = ({ placeholder: e, children: t }) => /* @__PURE__ */ s("span", { children: t || e }), b = o(
-  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s("button", { ref: l, className: e, ...a, children: t })
-);
-b.displayName = "SelectTrigger";
-const u = o(
-  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s("div", { ref: l, className: e, ...a, children: t })
-);
-u.displayName = "SelectContent";
-const g = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("text-input-text-secondary px-2 py-1.5 text-sm font-semibold", e), ...t }));
-g.displayName = "SelectLabel";
-const y = o(
-  ({ className: e, children: t, disabled: a, ...l }, r) => /* @__PURE__ */ m(
-    "div",
+import { jsx as s, jsxs as F, Fragment as ce } from "react/jsx-runtime";
+import "./Icons/AnnotationsIcon.js";
+import "./Icons/CalendarIcon.js";
+import "./Icons/CheckCircleIcon.js";
+import "./Icons/CheckSquareIcon.js";
+import { CheckmarkIcon as dt } from "./Icons/CheckmarkIcon.js";
+import { ChevronDownIcon as xe } from "./Icons/ChevronDownIcon.js";
+import "./Icons/ChevronUpIcon.js";
+import "./Icons/ClockIcon.js";
+import "./Icons/CloseCircleIcon.js";
+import "./Icons/CloseIcon.js";
+import "./Icons/DashboardIcon.js";
+import "./Icons/DeleteIcon.js";
+import "./Icons/DurationIcon.js";
+import "./Icons/EraserIcon.js";
+import "./Icons/ErrorIcon.js";
+import "./Icons/EyeClosedIcon.js";
+import "./Icons/EyeClosedIcon2.js";
+import "./Icons/EyeOpenIcon.js";
+import "./Icons/GoToFirstIcon.js";
+import "./Icons/GoToLastIcon.js";
+import "./Icons/HarmonicCursorsIcon.js";
+import "./Icons/InfoIcon.js";
+import "./Icons/LabelIcon.js";
+import "./Icons/LassoIcon.js";
+import "./Icons/LineToolIcon.js";
+import "./Icons/LiveViewIcon.js";
+import { LoaderIcon as ut } from "./Icons/LoaderIcon.js";
+import "./Icons/LocationIcon.js";
+import "./Icons/LogoutIcon.js";
+import "./Icons/MetadataIcon.js";
+import "./Icons/OntologyIcon.js";
+import "./Icons/PanelIcon.js";
+import "./Icons/PlayIcon.js";
+import "./Icons/PlusIcon.js";
+import "./Icons/ResetIcon.js";
+import "./Icons/ScissorsIcon.js";
+import "./Icons/SettingsIcon.js";
+import "./Icons/TrashIcon.js";
+import "./Icons/UndoIcon.js";
+import "./Icons/UserIcon.js";
+import "./Icons/WarningIcon.js";
+import "./Icons/ZoomAllIcon.js";
+import "./Icons/ZoomXIcon.js";
+import "./Icons/ZoomYIcon.js";
+import { Label as pt } from "./Label.js";
+import * as o from "react";
+import ee, { forwardRef as mt } from "react";
+import * as Ae from "react-dom";
+import { c as De, b as U, f as ye, a as _e, u as Pe, P as k, d as O, g as $, i as ft, D as ht } from "./index-DfFzqLW6.js";
+import { h as gt, u as vt, R as St, F as Ct } from "./index-BDYruyoU.js";
+import { c as Le, R as wt, a as xt, C as yt, A as It } from "./index-C18a1qz_.js";
+import { V as bt } from "./index-CFeaEsew.js";
+import { useFormFieldId as Tt, useFormFieldState as Rt, getAriaProps as Nt, getErrorMessageId as Pt, groupOptions as Et, getFormFieldCSSProperties as _t, getStateClasses as Mt, getTriggerClasses as Ot, ErrorMessage as At, LoadingState as Dt, EmptyState as Lt, getOptionClasses as kt } from "./utils/formFieldUtils.js";
+import { c as ue } from "./twUtils-CRiPKpXj.js";
+function Me(t, [n, e]) {
+  return Math.min(e, Math.max(n, t));
+}
+function Vt(t) {
+  const n = t + "CollectionProvider", [e, d] = De(n), [c, p] = e(
+    n,
+    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
+  ), r = (a) => {
+    const { scope: f, children: v } = a, u = ee.useRef(null), g = ee.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ s(c, { scope: f, itemMap: g, collectionRef: u, children: v });
+  };
+  r.displayName = n;
+  const i = t + "CollectionSlot", l = ye(i), m = ee.forwardRef(
+    (a, f) => {
+      const { scope: v, children: u } = a, g = p(i, v), P = U(f, g.collectionRef);
+      return /* @__PURE__ */ s(l, { ref: P, children: u });
+    }
+  );
+  m.displayName = i;
+  const S = t + "CollectionItemSlot", C = "data-radix-collection-item", b = ye(S), x = ee.forwardRef(
+    (a, f) => {
+      const { scope: v, children: u, ...g } = a, P = ee.useRef(null), E = U(f, P), V = p(S, v);
+      return ee.useEffect(() => (V.itemMap.set(P, { ref: P, ...g }), () => void V.itemMap.delete(P))), /* @__PURE__ */ s(b, { [C]: "", ref: E, children: u });
+    }
+  );
+  x.displayName = S;
+  function w(a) {
+    const f = p(t + "CollectionConsumer", a);
+    return ee.useCallback(() => {
+      const u = f.collectionRef.current;
+      if (!u) return [];
+      const g = Array.from(u.querySelectorAll(`[${C}]`));
+      return Array.from(f.itemMap.values()).sort(
+        (V, T) => g.indexOf(V.ref.current) - g.indexOf(T.ref.current)
+      );
+    }, [f.collectionRef, f.itemMap]);
+  }
+  return [
+    { Provider: r, Slot: m, ItemSlot: x },
+    w,
+    d
+  ];
+}
+var Bt = o.createContext(void 0);
+function Ht(t) {
+  const n = o.useContext(Bt);
+  return t || n || "ltr";
+}
+function Ft(t) {
+  const n = o.useRef({ value: t, previous: t });
+  return o.useMemo(() => (n.current.value !== t && (n.current.previous = n.current.value, n.current.value = t), n.current.previous), [t]);
+}
+var Ut = [" ", "Enter", "ArrowUp", "ArrowDown"], Wt = [" ", "Enter"], te = "Select", [me, fe, Kt] = Vt(te), [re] = De(te, [
+  Kt,
+  Le
+]), he = Le(), [zt, X] = re(te), [Gt, jt] = re(te), ke = (t) => {
+  const {
+    __scopeSelect: n,
+    children: e,
+    open: d,
+    defaultOpen: c,
+    onOpenChange: p,
+    value: r,
+    defaultValue: i,
+    onValueChange: l,
+    dir: m,
+    name: S,
+    autoComplete: C,
+    disabled: b,
+    required: x,
+    form: w
+  } = t, a = he(n), [f, v] = o.useState(null), [u, g] = o.useState(null), [P, E] = o.useState(!1), V = Ht(m), [T, A] = _e({
+    prop: d,
+    defaultProp: c ?? !1,
+    onChange: p,
+    caller: te
+  }), [W, q] = _e({
+    prop: r,
+    defaultProp: i,
+    onChange: l,
+    caller: te
+  }), B = o.useRef(null), K = f ? w || !!f.closest("form") : !0, [z, H] = o.useState(/* @__PURE__ */ new Set()), G = Array.from(z).map((M) => M.props.value).join(";");
+  return /* @__PURE__ */ s(wt, { ...a, children: /* @__PURE__ */ F(
+    zt,
     {
-      ref: r,
-      className: i(
-        "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
-        "hover:bg-input-bg--hover focus:bg-input-bg--hover hover:cursor-pointer",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        e
-      ),
-      "data-disabled": a,
-      ...l,
+      required: x,
+      scope: n,
+      trigger: f,
+      onTriggerChange: v,
+      valueNode: u,
+      onValueNodeChange: g,
+      valueNodeHasChildren: P,
+      onValueNodeHasChildrenChange: E,
+      contentId: Pe(),
+      value: W,
+      onValueChange: q,
+      open: T,
+      onOpenChange: A,
+      dir: V,
+      triggerPointerDownPosRef: B,
+      disabled: b,
       children: [
-        /* @__PURE__ */ s("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ s(k, { className: "text-input-text h-4 w-4" }) }),
-        /* @__PURE__ */ s("span", { children: t })
+        /* @__PURE__ */ s(me.Provider, { scope: n, children: /* @__PURE__ */ s(
+          Gt,
+          {
+            scope: t.__scopeSelect,
+            onNativeOptionAdd: o.useCallback((M) => {
+              H((R) => new Set(R).add(M));
+            }, []),
+            onNativeOptionRemove: o.useCallback((M) => {
+              H((R) => {
+                const D = new Set(R);
+                return D.delete(M), D;
+              });
+            }, []),
+            children: e
+          }
+        ) }),
+        K ? /* @__PURE__ */ F(
+          it,
+          {
+            "aria-hidden": !0,
+            required: x,
+            tabIndex: -1,
+            name: S,
+            autoComplete: C,
+            value: W,
+            onChange: (M) => q(M.target.value),
+            disabled: b,
+            form: w,
+            children: [
+              W === void 0 ? /* @__PURE__ */ s("option", { value: "" }) : null,
+              Array.from(z)
+            ]
+          },
+          G
+        ) : null
       ]
     }
-  )
+  ) });
+};
+ke.displayName = te;
+var Ve = "SelectTrigger", Be = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, disabled: d = !1, ...c } = t, p = he(e), r = X(Ve, e), i = r.disabled || d, l = U(n, r.onTriggerChange), m = fe(e), S = o.useRef("touch"), [C, b, x] = ct((a) => {
+      const f = m().filter((g) => !g.disabled), v = f.find((g) => g.value === r.value), u = at(f, a, v);
+      u !== void 0 && r.onValueChange(u.value);
+    }), w = (a) => {
+      i || (r.onOpenChange(!0), x()), a && (r.triggerPointerDownPosRef.current = {
+        x: Math.round(a.pageX),
+        y: Math.round(a.pageY)
+      });
+    };
+    return /* @__PURE__ */ s(xt, { asChild: !0, ...p, children: /* @__PURE__ */ s(
+      k.button,
+      {
+        type: "button",
+        role: "combobox",
+        "aria-controls": r.contentId,
+        "aria-expanded": r.open,
+        "aria-required": r.required,
+        "aria-autocomplete": "none",
+        dir: r.dir,
+        "data-state": r.open ? "open" : "closed",
+        disabled: i,
+        "data-disabled": i ? "" : void 0,
+        "data-placeholder": lt(r.value) ? "" : void 0,
+        ...c,
+        ref: l,
+        onClick: O(c.onClick, (a) => {
+          a.currentTarget.focus(), S.current !== "mouse" && w(a);
+        }),
+        onPointerDown: O(c.onPointerDown, (a) => {
+          S.current = a.pointerType;
+          const f = a.target;
+          f.hasPointerCapture(a.pointerId) && f.releasePointerCapture(a.pointerId), a.button === 0 && a.ctrlKey === !1 && a.pointerType === "mouse" && (w(a), a.preventDefault());
+        }),
+        onKeyDown: O(c.onKeyDown, (a) => {
+          const f = C.current !== "";
+          !(a.ctrlKey || a.altKey || a.metaKey) && a.key.length === 1 && b(a.key), !(f && a.key === " ") && Ut.includes(a.key) && (w(), a.preventDefault());
+        })
+      }
+    ) });
+  }
 );
-y.displayName = "SelectItem";
-const x = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("bg-input-border -mx-1 my-1 h-px", e), ...t }));
-x.displayName = "SelectSeparator";
-const S = o(
-  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: l,
-      className: i("text-input-text-secondary py-6 text-center text-sm", e),
-      role: "status",
-      ...a,
-      children: t
+Be.displayName = Ve;
+var He = "SelectValue", Fe = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, className: d, style: c, children: p, placeholder: r = "", ...i } = t, l = X(He, e), { onValueNodeHasChildrenChange: m } = l, S = p !== void 0, C = U(n, l.onValueNodeChange);
+    return $(() => {
+      m(S);
+    }, [m, S]), /* @__PURE__ */ s(
+      k.span,
+      {
+        ...i,
+        ref: C,
+        style: { pointerEvents: "none" },
+        children: lt(l.value) ? /* @__PURE__ */ s(ce, { children: r }) : p
+      }
+    );
+  }
+);
+Fe.displayName = He;
+var qt = "SelectIcon", Ue = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, children: d, ...c } = t;
+    return /* @__PURE__ */ s(k.span, { "aria-hidden": !0, ...c, ref: n, children: d || "▼" });
+  }
+);
+Ue.displayName = qt;
+var oe = "SelectContent", We = o.forwardRef(
+  (t, n) => {
+    const e = X(oe, t.__scopeSelect), [d, c] = o.useState();
+    if ($(() => {
+      c(new DocumentFragment());
+    }, []), !e.open) {
+      const p = d;
+      return p ? Ae.createPortal(
+        /* @__PURE__ */ s(Ke, { scope: t.__scopeSelect, children: /* @__PURE__ */ s(me.Slot, { scope: t.__scopeSelect, children: /* @__PURE__ */ s("div", { children: t.children }) }) }),
+        p
+      ) : null;
     }
-  )
+    return /* @__PURE__ */ s(ze, { ...t, ref: n });
+  }
+);
+We.displayName = oe;
+var j = 10, [Ke, Z] = re(oe), Yt = "SelectContentImpl", $t = ye("SelectContent.RemoveScroll"), ze = o.forwardRef(
+  (t, n) => {
+    const {
+      __scopeSelect: e,
+      position: d = "item-aligned",
+      onCloseAutoFocus: c,
+      onEscapeKeyDown: p,
+      onPointerDownOutside: r,
+      //
+      // PopperContent props
+      side: i,
+      sideOffset: l,
+      align: m,
+      alignOffset: S,
+      arrowPadding: C,
+      collisionBoundary: b,
+      collisionPadding: x,
+      sticky: w,
+      hideWhenDetached: a,
+      avoidCollisions: f,
+      //
+      ...v
+    } = t, u = X(oe, e), [g, P] = o.useState(null), [E, V] = o.useState(null), T = U(n, (h) => P(h)), [A, W] = o.useState(null), [q, B] = o.useState(
+      null
+    ), K = fe(e), [z, H] = o.useState(!1), G = o.useRef(!1);
+    o.useEffect(() => {
+      if (g) return gt(g);
+    }, [g]), vt();
+    const M = o.useCallback(
+      (h) => {
+        const [N, ...L] = K().map((_) => _.ref.current), [y] = L.slice(-1), I = document.activeElement;
+        for (const _ of h)
+          if (_ === I || (_?.scrollIntoView({ block: "nearest" }), _ === N && E && (E.scrollTop = 0), _ === y && E && (E.scrollTop = E.scrollHeight), _?.focus(), document.activeElement !== I)) return;
+      },
+      [K, E]
+    ), R = o.useCallback(
+      () => M([A, g]),
+      [M, A, g]
+    );
+    o.useEffect(() => {
+      z && R();
+    }, [z, R]);
+    const { onOpenChange: D, triggerPointerDownPosRef: Y } = u;
+    o.useEffect(() => {
+      if (g) {
+        let h = { x: 0, y: 0 };
+        const N = (y) => {
+          h = {
+            x: Math.abs(Math.round(y.pageX) - (Y.current?.x ?? 0)),
+            y: Math.abs(Math.round(y.pageY) - (Y.current?.y ?? 0))
+          };
+        }, L = (y) => {
+          h.x <= 10 && h.y <= 10 ? y.preventDefault() : g.contains(y.target) || D(!1), document.removeEventListener("pointermove", N), Y.current = null;
+        };
+        return Y.current !== null && (document.addEventListener("pointermove", N), document.addEventListener("pointerup", L, { capture: !0, once: !0 })), () => {
+          document.removeEventListener("pointermove", N), document.removeEventListener("pointerup", L, { capture: !0 });
+        };
+      }
+    }, [g, D, Y]), o.useEffect(() => {
+      const h = () => D(!1);
+      return window.addEventListener("blur", h), window.addEventListener("resize", h), () => {
+        window.removeEventListener("blur", h), window.removeEventListener("resize", h);
+      };
+    }, [D]);
+    const [se, ae] = ct((h) => {
+      const N = K().filter((I) => !I.disabled), L = N.find((I) => I.ref.current === document.activeElement), y = at(N, h, L);
+      y && setTimeout(() => y.ref.current.focus());
+    }), ge = o.useCallback(
+      (h, N, L) => {
+        const y = !G.current && !L;
+        (u.value !== void 0 && u.value === N || y) && (W(h), y && (G.current = !0));
+      },
+      [u.value]
+    ), ve = o.useCallback(() => g?.focus(), [g]), ne = o.useCallback(
+      (h, N, L) => {
+        const y = !G.current && !L;
+        (u.value !== void 0 && u.value === N || y) && B(h);
+      },
+      [u.value]
+    ), de = d === "popper" ? Ie : Ge, ie = de === Ie ? {
+      side: i,
+      sideOffset: l,
+      align: m,
+      alignOffset: S,
+      arrowPadding: C,
+      collisionBoundary: b,
+      collisionPadding: x,
+      sticky: w,
+      hideWhenDetached: a,
+      avoidCollisions: f
+    } : {};
+    return /* @__PURE__ */ s(
+      Ke,
+      {
+        scope: e,
+        content: g,
+        viewport: E,
+        onViewportChange: V,
+        itemRefCallback: ge,
+        selectedItem: A,
+        onItemLeave: ve,
+        itemTextRefCallback: ne,
+        focusSelectedItem: R,
+        selectedItemText: q,
+        position: d,
+        isPositioned: z,
+        searchRef: se,
+        children: /* @__PURE__ */ s(St, { as: $t, allowPinchZoom: !0, children: /* @__PURE__ */ s(
+          Ct,
+          {
+            asChild: !0,
+            trapped: u.open,
+            onMountAutoFocus: (h) => {
+              h.preventDefault();
+            },
+            onUnmountAutoFocus: O(c, (h) => {
+              u.trigger?.focus({ preventScroll: !0 }), h.preventDefault();
+            }),
+            children: /* @__PURE__ */ s(
+              ht,
+              {
+                asChild: !0,
+                disableOutsidePointerEvents: !0,
+                onEscapeKeyDown: p,
+                onPointerDownOutside: r,
+                onFocusOutside: (h) => h.preventDefault(),
+                onDismiss: () => u.onOpenChange(!1),
+                children: /* @__PURE__ */ s(
+                  de,
+                  {
+                    role: "listbox",
+                    id: u.contentId,
+                    "data-state": u.open ? "open" : "closed",
+                    dir: u.dir,
+                    onContextMenu: (h) => h.preventDefault(),
+                    ...v,
+                    ...ie,
+                    onPlaced: () => H(!0),
+                    ref: T,
+                    style: {
+                      // flex layout so we can place the scroll buttons properly
+                      display: "flex",
+                      flexDirection: "column",
+                      // reset the outline by default as the content MAY get focused
+                      outline: "none",
+                      ...v.style
+                    },
+                    onKeyDown: O(v.onKeyDown, (h) => {
+                      const N = h.ctrlKey || h.altKey || h.metaKey;
+                      if (h.key === "Tab" && h.preventDefault(), !N && h.key.length === 1 && ae(h.key), ["ArrowUp", "ArrowDown", "Home", "End"].includes(h.key)) {
+                        let y = K().filter((I) => !I.disabled).map((I) => I.ref.current);
+                        if (["ArrowUp", "End"].includes(h.key) && (y = y.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(h.key)) {
+                          const I = h.target, _ = y.indexOf(I);
+                          y = y.slice(_ + 1);
+                        }
+                        setTimeout(() => M(y)), h.preventDefault();
+                      }
+                    })
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
 );
-S.displayName = "SelectEmptyMessage";
-const f = o(
-  ({ className: e, message: t = "Loading...", children: a, ...l }, r) => /* @__PURE__ */ m(
-    "div",
+ze.displayName = Yt;
+var Xt = "SelectItemAlignedPosition", Ge = o.forwardRef((t, n) => {
+  const { __scopeSelect: e, onPlaced: d, ...c } = t, p = X(oe, e), r = Z(oe, e), [i, l] = o.useState(null), [m, S] = o.useState(null), C = U(n, (T) => S(T)), b = fe(e), x = o.useRef(!1), w = o.useRef(!0), { viewport: a, selectedItem: f, selectedItemText: v, focusSelectedItem: u } = r, g = o.useCallback(() => {
+    if (p.trigger && p.valueNode && i && m && a && f && v) {
+      const T = p.trigger.getBoundingClientRect(), A = m.getBoundingClientRect(), W = p.valueNode.getBoundingClientRect(), q = v.getBoundingClientRect();
+      if (p.dir !== "rtl") {
+        const I = q.left - A.left, _ = W.left - I, J = T.left - _, Q = T.width + J, Se = Math.max(Q, A.width), Ce = window.innerWidth - j, we = Me(_, [
+          j,
+          // Prevents the content from going off the starting edge of the
+          // viewport. It may still go off the ending edge, but this can be
+          // controlled by the user since they may want to manage overflow in a
+          // specific way.
+          // https://github.com/radix-ui/primitives/issues/2049
+          Math.max(j, Ce - Se)
+        ]);
+        i.style.minWidth = Q + "px", i.style.left = we + "px";
+      } else {
+        const I = A.right - q.right, _ = window.innerWidth - W.right - I, J = window.innerWidth - T.right - _, Q = T.width + J, Se = Math.max(Q, A.width), Ce = window.innerWidth - j, we = Me(_, [
+          j,
+          Math.max(j, Ce - Se)
+        ]);
+        i.style.minWidth = Q + "px", i.style.right = we + "px";
+      }
+      const B = b(), K = window.innerHeight - j * 2, z = a.scrollHeight, H = window.getComputedStyle(m), G = parseInt(H.borderTopWidth, 10), M = parseInt(H.paddingTop, 10), R = parseInt(H.borderBottomWidth, 10), D = parseInt(H.paddingBottom, 10), Y = G + M + z + D + R, se = Math.min(f.offsetHeight * 5, Y), ae = window.getComputedStyle(a), ge = parseInt(ae.paddingTop, 10), ve = parseInt(ae.paddingBottom, 10), ne = T.top + T.height / 2 - j, de = K - ne, ie = f.offsetHeight / 2, h = f.offsetTop + ie, N = G + M + h, L = Y - N;
+      if (N <= ne) {
+        const I = B.length > 0 && f === B[B.length - 1].ref.current;
+        i.style.bottom = "0px";
+        const _ = m.clientHeight - a.offsetTop - a.offsetHeight, J = Math.max(
+          de,
+          ie + // viewport might have padding bottom, include it to avoid a scrollable viewport
+          (I ? ve : 0) + _ + R
+        ), Q = N + J;
+        i.style.height = Q + "px";
+      } else {
+        const I = B.length > 0 && f === B[0].ref.current;
+        i.style.top = "0px";
+        const J = Math.max(
+          ne,
+          G + a.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
+          (I ? ge : 0) + ie
+        ) + L;
+        i.style.height = J + "px", a.scrollTop = N - ne + a.offsetTop;
+      }
+      i.style.margin = `${j}px 0`, i.style.minHeight = se + "px", i.style.maxHeight = K + "px", d?.(), requestAnimationFrame(() => x.current = !0);
+    }
+  }, [
+    b,
+    p.trigger,
+    p.valueNode,
+    i,
+    m,
+    a,
+    f,
+    v,
+    p.dir,
+    d
+  ]);
+  $(() => g(), [g]);
+  const [P, E] = o.useState();
+  $(() => {
+    m && E(window.getComputedStyle(m).zIndex);
+  }, [m]);
+  const V = o.useCallback(
+    (T) => {
+      T && w.current === !0 && (g(), u?.(), w.current = !1);
+    },
+    [g, u]
+  );
+  return /* @__PURE__ */ s(
+    Jt,
     {
-      ref: r,
-      className: i("text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", e),
-      role: "status",
-      "aria-live": "polite",
-      ...l,
-      children: [
-        /* @__PURE__ */ s(O, { className: "h-4 w-4 animate-spin" }),
-        a || t
-      ]
+      scope: e,
+      contentWrapper: i,
+      shouldExpandOnScrollRef: x,
+      onScrollButtonChange: V,
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          ref: l,
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            position: "fixed",
+            zIndex: P
+          },
+          children: /* @__PURE__ */ s(
+            k.div,
+            {
+              ...c,
+              ref: C,
+              style: {
+                // When we get the height of the content, it includes borders. If we were to set
+                // the height without having `boxSizing: 'border-box'` it would be too big.
+                boxSizing: "border-box",
+                // We need to ensure the content doesn't get taller than the wrapper
+                maxHeight: "100%",
+                ...c.style
+              }
+            }
+          )
+        }
+      )
     }
-  )
-);
-f.displayName = "SelectLoadingMessage";
-const N = o((e, t) => {
+  );
+});
+Ge.displayName = Xt;
+var Zt = "SelectPopperPosition", Ie = o.forwardRef((t, n) => {
   const {
-    defaultValue: a,
-    items: l = [],
-    onValueChange: r,
-    placeholder: v,
-    triggerClassName: h,
-    value: C,
-    disabled: L,
-    name: c,
-    id: I,
-    state: d = "default",
-    emptyMessage: M = "No items found",
-    errorMessage: j,
-    label: w,
-    "aria-label": V,
-    "aria-describedby": D,
-    ...G
-  } = e, R = $(), T = I || `${c}-${R}`, B = l.map((n) => ({
-    label: n.label,
-    value: n.value,
-    disabled: n.disabled
-  }));
+    __scopeSelect: e,
+    align: d = "start",
+    collisionPadding: c = j,
+    ...p
+  } = t, r = he(e);
   return /* @__PURE__ */ s(
-    E,
+    yt,
     {
-      ref: t,
-      id: T,
-      name: c,
-      value: C,
-      defaultValue: a,
-      onChange: r,
-      options: B,
-      placeholder: v,
-      state: d,
-      errorMessage: j,
-      emptyMessage: M,
-      label: w,
-      disabled: L || d === "disabled",
-      "aria-label": V,
-      "aria-describedby": D,
-      className: h,
-      ...G
+      ...r,
+      ...p,
+      ref: n,
+      align: d,
+      collisionPadding: c,
+      style: {
+        // Ensure border-box for floating-ui calculations
+        boxSizing: "border-box",
+        ...p.style,
+        "--radix-select-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--radix-select-content-available-width": "var(--radix-popper-available-width)",
+        "--radix-select-content-available-height": "var(--radix-popper-available-height)",
+        "--radix-select-trigger-width": "var(--radix-popper-anchor-width)",
+        "--radix-select-trigger-height": "var(--radix-popper-anchor-height)"
+      }
     }
   );
 });
-N.displayName = "Select";
-const U = Object.assign(N, {
-  Root: q,
-  Group: p,
-  Value: z,
-  Trigger: b,
-  Content: u,
-  Label: g,
-  Item: y,
-  Separator: x,
-  EmptyMessage: S,
-  LoadingMessage: f
+Ie.displayName = Zt;
+var [Jt, Ee] = re(oe, {}), be = "SelectViewport", je = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, nonce: d, ...c } = t, p = Z(be, e), r = Ee(be, e), i = U(n, p.onViewportChange), l = o.useRef(0);
+    return /* @__PURE__ */ F(ce, { children: [
+      /* @__PURE__ */ s(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: "[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}"
+          },
+          nonce: d
+        }
+      ),
+      /* @__PURE__ */ s(me.Slot, { scope: e, children: /* @__PURE__ */ s(
+        k.div,
+        {
+          "data-radix-select-viewport": "",
+          role: "presentation",
+          ...c,
+          ref: i,
+          style: {
+            // we use position: 'relative' here on the `viewport` so that when we call
+            // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
+            // (independent of the scrollUpButton).
+            position: "relative",
+            flex: 1,
+            // Viewport should only be scrollable in the vertical direction.
+            // This won't work in vertical writing modes, so we'll need to
+            // revisit this if/when that is supported
+            // https://developer.chrome.com/blog/vertical-form-controls
+            overflow: "hidden auto",
+            ...c.style
+          },
+          onScroll: O(c.onScroll, (m) => {
+            const S = m.currentTarget, { contentWrapper: C, shouldExpandOnScrollRef: b } = r;
+            if (b?.current && C) {
+              const x = Math.abs(l.current - S.scrollTop);
+              if (x > 0) {
+                const w = window.innerHeight - j * 2, a = parseFloat(C.style.minHeight), f = parseFloat(C.style.height), v = Math.max(a, f);
+                if (v < w) {
+                  const u = v + x, g = Math.min(w, u), P = u - g;
+                  C.style.height = g + "px", C.style.bottom === "0px" && (S.scrollTop = P > 0 ? P : 0, C.style.justifyContent = "flex-end");
+                }
+              }
+            }
+            l.current = S.scrollTop;
+          })
+        }
+      ) })
+    ] });
+  }
+);
+je.displayName = be;
+var qe = "SelectGroup", [Qt, eo] = re(qe), Ye = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, ...d } = t, c = Pe();
+    return /* @__PURE__ */ s(Qt, { scope: e, id: c, children: /* @__PURE__ */ s(k.div, { role: "group", "aria-labelledby": c, ...d, ref: n }) });
+  }
+);
+Ye.displayName = qe;
+var $e = "SelectLabel", Xe = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, ...d } = t, c = eo($e, e);
+    return /* @__PURE__ */ s(k.div, { id: c.id, ...d, ref: n });
+  }
+);
+Xe.displayName = $e;
+var pe = "SelectItem", [to, Ze] = re(pe), Je = o.forwardRef(
+  (t, n) => {
+    const {
+      __scopeSelect: e,
+      value: d,
+      disabled: c = !1,
+      textValue: p,
+      ...r
+    } = t, i = X(pe, e), l = Z(pe, e), m = i.value === d, [S, C] = o.useState(p ?? ""), [b, x] = o.useState(!1), w = U(
+      n,
+      (u) => l.itemRefCallback?.(u, d, c)
+    ), a = Pe(), f = o.useRef("touch"), v = () => {
+      c || (i.onValueChange(d), i.onOpenChange(!1));
+    };
+    if (d === "")
+      throw new Error(
+        "A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
+      );
+    return /* @__PURE__ */ s(
+      to,
+      {
+        scope: e,
+        value: d,
+        disabled: c,
+        textId: a,
+        isSelected: m,
+        onItemTextChange: o.useCallback((u) => {
+          C((g) => g || (u?.textContent ?? "").trim());
+        }, []),
+        children: /* @__PURE__ */ s(
+          me.ItemSlot,
+          {
+            scope: e,
+            value: d,
+            disabled: c,
+            textValue: S,
+            children: /* @__PURE__ */ s(
+              k.div,
+              {
+                role: "option",
+                "aria-labelledby": a,
+                "data-highlighted": b ? "" : void 0,
+                "aria-selected": m && b,
+                "data-state": m ? "checked" : "unchecked",
+                "aria-disabled": c || void 0,
+                "data-disabled": c ? "" : void 0,
+                tabIndex: c ? void 0 : -1,
+                ...r,
+                ref: w,
+                onFocus: O(r.onFocus, () => x(!0)),
+                onBlur: O(r.onBlur, () => x(!1)),
+                onClick: O(r.onClick, () => {
+                  f.current !== "mouse" && v();
+                }),
+                onPointerUp: O(r.onPointerUp, () => {
+                  f.current === "mouse" && v();
+                }),
+                onPointerDown: O(r.onPointerDown, (u) => {
+                  f.current = u.pointerType;
+                }),
+                onPointerMove: O(r.onPointerMove, (u) => {
+                  f.current = u.pointerType, c ? l.onItemLeave?.() : f.current === "mouse" && u.currentTarget.focus({ preventScroll: !0 });
+                }),
+                onPointerLeave: O(r.onPointerLeave, (u) => {
+                  u.currentTarget === document.activeElement && l.onItemLeave?.();
+                }),
+                onKeyDown: O(r.onKeyDown, (u) => {
+                  l.searchRef?.current !== "" && u.key === " " || (Wt.includes(u.key) && v(), u.key === " " && u.preventDefault());
+                })
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+Je.displayName = pe;
+var le = "SelectItemText", Qe = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, className: d, style: c, ...p } = t, r = X(le, e), i = Z(le, e), l = Ze(le, e), m = jt(le, e), [S, C] = o.useState(null), b = U(
+      n,
+      (v) => C(v),
+      l.onItemTextChange,
+      (v) => i.itemTextRefCallback?.(v, l.value, l.disabled)
+    ), x = S?.textContent, w = o.useMemo(
+      () => /* @__PURE__ */ s("option", { value: l.value, disabled: l.disabled, children: x }, l.value),
+      [l.disabled, l.value, x]
+    ), { onNativeOptionAdd: a, onNativeOptionRemove: f } = m;
+    return $(() => (a(w), () => f(w)), [a, f, w]), /* @__PURE__ */ F(ce, { children: [
+      /* @__PURE__ */ s(k.span, { id: l.textId, ...p, ref: b }),
+      l.isSelected && r.valueNode && !r.valueNodeHasChildren ? Ae.createPortal(p.children, r.valueNode) : null
+    ] });
+  }
+);
+Qe.displayName = le;
+var et = "SelectItemIndicator", tt = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, ...d } = t;
+    return Ze(et, e).isSelected ? /* @__PURE__ */ s(k.span, { "aria-hidden": !0, ...d, ref: n }) : null;
+  }
+);
+tt.displayName = et;
+var Te = "SelectScrollUpButton", ot = o.forwardRef((t, n) => {
+  const e = Z(Te, t.__scopeSelect), d = Ee(Te, t.__scopeSelect), [c, p] = o.useState(!1), r = U(n, d.onScrollButtonChange);
+  return $(() => {
+    if (e.viewport && e.isPositioned) {
+      let i = function() {
+        const m = l.scrollTop > 0;
+        p(m);
+      };
+      const l = e.viewport;
+      return i(), l.addEventListener("scroll", i), () => l.removeEventListener("scroll", i);
+    }
+  }, [e.viewport, e.isPositioned]), c ? /* @__PURE__ */ s(
+    rt,
+    {
+      ...t,
+      ref: r,
+      onAutoScroll: () => {
+        const { viewport: i, selectedItem: l } = e;
+        i && l && (i.scrollTop = i.scrollTop - l.offsetHeight);
+      }
+    }
+  ) : null;
+});
+ot.displayName = Te;
+var Re = "SelectScrollDownButton", nt = o.forwardRef((t, n) => {
+  const e = Z(Re, t.__scopeSelect), d = Ee(Re, t.__scopeSelect), [c, p] = o.useState(!1), r = U(n, d.onScrollButtonChange);
+  return $(() => {
+    if (e.viewport && e.isPositioned) {
+      let i = function() {
+        const m = l.scrollHeight - l.clientHeight, S = Math.ceil(l.scrollTop) < m;
+        p(S);
+      };
+      const l = e.viewport;
+      return i(), l.addEventListener("scroll", i), () => l.removeEventListener("scroll", i);
+    }
+  }, [e.viewport, e.isPositioned]), c ? /* @__PURE__ */ s(
+    rt,
+    {
+      ...t,
+      ref: r,
+      onAutoScroll: () => {
+        const { viewport: i, selectedItem: l } = e;
+        i && l && (i.scrollTop = i.scrollTop + l.offsetHeight);
+      }
+    }
+  ) : null;
 });
+nt.displayName = Re;
+var rt = o.forwardRef((t, n) => {
+  const { __scopeSelect: e, onAutoScroll: d, ...c } = t, p = Z("SelectScrollButton", e), r = o.useRef(null), i = fe(e), l = o.useCallback(() => {
+    r.current !== null && (window.clearInterval(r.current), r.current = null);
+  }, []);
+  return o.useEffect(() => () => l(), [l]), $(() => {
+    i().find((S) => S.ref.current === document.activeElement)?.ref.current?.scrollIntoView({ block: "nearest" });
+  }, [i]), /* @__PURE__ */ s(
+    k.div,
+    {
+      "aria-hidden": !0,
+      ...c,
+      ref: n,
+      style: { flexShrink: 0, ...c.style },
+      onPointerDown: O(c.onPointerDown, () => {
+        r.current === null && (r.current = window.setInterval(d, 50));
+      }),
+      onPointerMove: O(c.onPointerMove, () => {
+        p.onItemLeave?.(), r.current === null && (r.current = window.setInterval(d, 50));
+      }),
+      onPointerLeave: O(c.onPointerLeave, () => {
+        l();
+      })
+    }
+  );
+}), oo = "SelectSeparator", st = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, ...d } = t;
+    return /* @__PURE__ */ s(k.div, { "aria-hidden": !0, ...d, ref: n });
+  }
+);
+st.displayName = oo;
+var Ne = "SelectArrow", no = o.forwardRef(
+  (t, n) => {
+    const { __scopeSelect: e, ...d } = t, c = he(e), p = X(Ne, e), r = Z(Ne, e);
+    return p.open && r.position === "popper" ? /* @__PURE__ */ s(It, { ...c, ...d, ref: n }) : null;
+  }
+);
+no.displayName = Ne;
+var ro = "SelectBubbleInput", it = o.forwardRef(
+  ({ __scopeSelect: t, value: n, ...e }, d) => {
+    const c = o.useRef(null), p = U(d, c), r = Ft(n);
+    return o.useEffect(() => {
+      const i = c.current;
+      if (!i) return;
+      const l = window.HTMLSelectElement.prototype, S = Object.getOwnPropertyDescriptor(
+        l,
+        "value"
+      ).set;
+      if (r !== n && S) {
+        const C = new Event("change", { bubbles: !0 });
+        S.call(i, n), i.dispatchEvent(C);
+      }
+    }, [r, n]), /* @__PURE__ */ s(
+      k.select,
+      {
+        ...e,
+        style: { ...bt, ...e.style },
+        ref: p,
+        defaultValue: n
+      }
+    );
+  }
+);
+it.displayName = ro;
+function lt(t) {
+  return t === "" || t === void 0;
+}
+function ct(t) {
+  const n = ft(t), e = o.useRef(""), d = o.useRef(0), c = o.useCallback(
+    (r) => {
+      const i = e.current + r;
+      n(i), (function l(m) {
+        e.current = m, window.clearTimeout(d.current), m !== "" && (d.current = window.setTimeout(() => l(""), 1e3));
+      })(i);
+    },
+    [n]
+  ), p = o.useCallback(() => {
+    e.current = "", window.clearTimeout(d.current);
+  }, []);
+  return o.useEffect(() => () => window.clearTimeout(d.current), []), [e, c, p];
+}
+function at(t, n, e) {
+  const c = n.length > 1 && Array.from(n).every((m) => m === n[0]) ? n[0] : n, p = e ? t.indexOf(e) : -1;
+  let r = so(t, Math.max(p, 0));
+  c.length === 1 && (r = r.filter((m) => m !== e));
+  const l = r.find(
+    (m) => m.textValue.toLowerCase().startsWith(c.toLowerCase())
+  );
+  return l !== e ? l : void 0;
+}
+function so(t, n) {
+  return t.map((e, d) => t[(n + d) % t.length]);
+}
+var io = ke, lo = Be, co = Fe, ao = Ue, uo = We, po = je, mo = Ye, fo = Xe, ho = Je, go = Qe, vo = tt, So = ot, Co = nt, Oe = st;
+const wo = mt(
+  ({
+    align: t = "start",
+    alignOffset: n = 0,
+    className: e,
+    collisionPadding: d = 10,
+    defaultValue: c,
+    emptyMessage: p = "No options found",
+    errorMessage: r,
+    id: i,
+    label: l,
+    loadingMessage: m = "Loading…",
+    name: S,
+    onChange: C,
+    options: b = [],
+    placeholder: x = "Select an option",
+    position: w = "popper",
+    side: a = "bottom",
+    sideOffset: f = 4,
+    state: v = "default",
+    value: u,
+    "aria-label": g,
+    "aria-describedby": P,
+    ...E
+  }, V) => {
+    const T = Tt(i, S), A = Pt(T), { isDisabled: W, isLoading: q, isInvalid: B } = Rt(E.disabled, v), K = Nt(v, B, A, P), { groups: z, ungrouped: H } = Et(b), G = () => {
+      if (q)
+        return /* @__PURE__ */ s(Dt, { message: m });
+      if (b.length === 0)
+        return /* @__PURE__ */ s(Lt, { message: p });
+      const M = (R) => {
+        const D = u === R.value;
+        return /* @__PURE__ */ F(
+          ho,
+          {
+            value: R.value,
+            disabled: R.disabled,
+            className: ue(
+              kt(D, !1, R.disabled),
+              "relative flex w-full cursor-pointer items-center"
+            ),
+            children: [
+              /* @__PURE__ */ s(go, { className: "block truncate", children: R.label }),
+              /* @__PURE__ */ s(vo, { asChild: !0, children: /* @__PURE__ */ s("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ s(dt, { size: 16 }) }) })
+            ]
+          },
+          R.value
+        );
+      };
+      return /* @__PURE__ */ F(ce, { children: [
+        H.length > 0 && /* @__PURE__ */ F(ce, { children: [
+          H.map(M),
+          Object.keys(z).length > 0 && /* @__PURE__ */ s(Oe, { className: "bg-border-secondary -mx-1 my-1 h-px" })
+        ] }),
+        Object.entries(z).map(([R, D], Y) => /* @__PURE__ */ F(mo, { children: [
+          Y > 0 && /* @__PURE__ */ s(Oe, { className: "bg-border-secondary -mx-1 my-1 h-px" }),
+          /* @__PURE__ */ s(fo, { className: "text-text-primary px-2 py-1.5 text-base font-semibold", children: R }),
+          D.map((se) => M(se))
+        ] }, R))
+      ] });
+    };
+    return /* @__PURE__ */ F("div", { className: "w-full", "data-testid": "select-root", children: [
+      l && /* @__PURE__ */ s(pt, { htmlFor: T, className: ue("text-text-primary mb-4 block", W && "text-text-secondary"), children: l }),
+      /* @__PURE__ */ F(
+        io,
+        {
+          value: u,
+          defaultValue: c,
+          onValueChange: C,
+          disabled: W,
+          name: S,
+          required: E.required,
+          children: [
+            /* @__PURE__ */ s(
+              lo,
+              {
+                ref: V,
+                id: T,
+                className: ue(Ot(v, !1), Mt(v), e),
+                "aria-label": g || l,
+                "data-state": v,
+                style: _t(),
+                ...K,
+                ...E,
+                asChild: !0,
+                children: /* @__PURE__ */ F("button", { type: "button", children: [
+                  /* @__PURE__ */ s(co, { placeholder: x, className: "block truncate" }),
+                  /* @__PURE__ */ s(ao, { asChild: !0, children: /* @__PURE__ */ s("div", { className: "flex items-center", children: q ? /* @__PURE__ */ s(ut, { size: 20 }) : /* @__PURE__ */ s(
+                    xe,
+                    {
+                      className: "transition-transform duration-200 data-[state=open]:rotate-180",
+                      size: 20
+                    }
+                  ) }) })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ s(
+              uo,
+              {
+                position: w,
+                side: a,
+                align: t,
+                sideOffset: f,
+                alignOffset: n,
+                collisionPadding: d,
+                asChild: !0,
+                children: /* @__PURE__ */ F(
+                  "div",
+                  {
+                    className: ue(
+                      "border-input-border bg-input-bg z-50 rounded-lg border shadow-md",
+                      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+                      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+                      "data-[side=bottom]:slide-in-from-top-2",
+                      "data-[side=left]:slide-in-from-right-2",
+                      "data-[side=right]:slide-in-from-left-2",
+                      "data-[side=top]:slide-in-from-bottom-2"
+                    ),
+                    style: {
+                      position: "fixed",
+                      boxSizing: "border-box",
+                      width: "var(--radix-select-trigger-width)",
+                      maxHeight: "var(--radix-select-content-available-height)"
+                    },
+                    children: [
+                      /* @__PURE__ */ s(So, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ s(xe, { className: "rotate-180", size: 18 }) }),
+                      /* @__PURE__ */ s(po, { asChild: !0, children: /* @__PURE__ */ s("div", { className: "max-h-96 p-1", style: { position: "relative", overflow: "hidden auto" }, children: G() }) }),
+                      /* @__PURE__ */ s(Co, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ s(xe, { size: 18 }) })
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      B && r && /* @__PURE__ */ s(At, { id: A, message: r })
+    ] });
+  }
+);
+wo.displayName = "Select";
 export {
-  U as Select,
-  E as SelectBase
+  wo as Select
 };