@strapi/ui-primitives 1.7.0-alpha.5 → 1.7.1

package/dist/index.js

@@ -1,5 +1,6 @@
+import { jsx as d, jsxs as Ne, Fragment as Ae } from "react/jsx-runtime";
 import * as r from "react";
-import { composeEventHandlers as T } from "@radix-ui/primitive";
+import { composeEventHandlers as E } from "@radix-ui/primitive";
 import { useComposedRefs as _ } from "@radix-ui/react-compose-refs";
 import { createContextScope as Qe, createContext as et } from "@radix-ui/react-context";
 import { DismissableLayer as tt } from "@radix-ui/react-dismissable-layer";
@@ -10,9 +11,8 @@ import { Portal as nt } from "@radix-ui/react-portal";
 import { Primitive as N } from "@radix-ui/react-primitive";
 import { useControllableState as ie } from "@radix-ui/react-use-controllable-state";
 import { hideOthers as rt } from "aria-hidden";
-import * as Ne from "react-dom";
+import * as _e from "react-dom";
 import { RemoveScroll as lt } from "react-remove-scroll";
-import { jsx as d, jsxs as Ae, Fragment as _e } from "react/jsx-runtime";
 import { Slot as Ie } from "@radix-ui/react-slot";
 import { clamp as Ze } from "@radix-ui/number";
 import { createCollection as Pt } from "@radix-ui/react-collection";
@@ -63,87 +63,54 @@ const Dt = (n) => {
     s.current = n;
   }), s.current;
 };
-function Lt(n) {
+function kt(n) {
   const s = `${n}CollectionProvider`, [e, t] = Qe(s), [o, l] = e(s, {
-    collectionRef: {
-      current: null
-    },
+    collectionRef: { current: null },
     itemMap: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Set()
   }), i = (u) => {
-    const {
-      scope: p,
-      children: v
-    } = u, C = r.useRef(null), x = r.useRef(/* @__PURE__ */ new Map()).current, h = r.useRef(/* @__PURE__ */ new Set()).current;
-    return /* @__PURE__ */ d(o, {
-      scope: p,
-      itemMap: x,
-      collectionRef: C,
-      listeners: h,
-      children: v
-    });
+    const { scope: p, children: h } = u, C = r.useRef(null), v = r.useRef(/* @__PURE__ */ new Map()).current, g = r.useRef(/* @__PURE__ */ new Set()).current;
+    return /* @__PURE__ */ d(o, { scope: p, itemMap: v, collectionRef: C, listeners: g, children: h });
   };
   i.displayName = s;
   const c = `${n}CollectionSlot`, a = r.forwardRef((u, p) => {
-    const {
-      scope: v,
-      children: C
-    } = u, x = l(c, v), h = _(p, x.collectionRef);
-    return /* @__PURE__ */ d(Ie, {
-      ref: h,
-      children: C
-    });
+    const { scope: h, children: C } = u, v = l(c, h), g = _(p, v.collectionRef);
+    return /* @__PURE__ */ d(Ie, { ref: g, children: C });
   });
   a.displayName = c;
-  const g = `${n}CollectionItemSlot`, f = "data-radix-collection-item", b = r.forwardRef((u, p) => {
-    const {
-      scope: v,
-      children: C,
-      ...x
-    } = u, h = r.useRef(null), w = _(p, h), A = l(g, v);
+  const m = `${n}CollectionItemSlot`, f = "data-radix-collection-item", b = r.forwardRef((u, p) => {
+    const { scope: h, children: C, ...v } = u, g = r.useRef(null), w = _(p, g), A = l(m, h);
     return r.useEffect(() => {
-      const E = Array.from(A.itemMap.values());
-      return A.itemMap.set(h, {
-        ref: h,
-        ...x
-      }), A.listeners.forEach((M) => M(Array.from(A.itemMap.values()), E)), () => {
+      const T = Array.from(A.itemMap.values());
+      return A.itemMap.set(g, { ref: g, ...v }), A.listeners.forEach((M) => M(Array.from(A.itemMap.values()), T)), () => {
         const M = Array.from(A.itemMap.values());
-        A.itemMap.delete(h), A.listeners.forEach((P) => P(Array.from(A.itemMap.values()), M));
+        A.itemMap.delete(g), A.listeners.forEach((P) => P(Array.from(A.itemMap.values()), M));
       };
-    }), /* @__PURE__ */ d(Ie, {
-      [f]: "",
-      ref: w,
-      children: C
-    });
+    }), /* @__PURE__ */ d(Ie, { [f]: "", ref: w, children: C });
   });
-  b.displayName = g;
-  function m(u) {
-    const p = l(`${n}CollectionConsumer`, u), v = r.useCallback(() => {
-      const x = p.collectionRef.current;
-      if (!x)
+  b.displayName = m;
+  function x(u) {
+    const p = l(`${n}CollectionConsumer`, u), h = r.useCallback(() => {
+      const v = p.collectionRef.current;
+      if (!v)
         return [];
-      const h = Array.from(x.querySelectorAll(`[${f}]`));
-      return Array.from(p.itemMap.values()).sort((E, M) => h.indexOf(E.ref.current) - h.indexOf(M.ref.current));
-    }, [p.collectionRef, p.itemMap]), C = r.useCallback((x) => (p.listeners.add(x), () => p.listeners.delete(x)), [p.listeners]);
-    return {
-      getItems: v,
-      subscribe: C
-    };
+      const g = Array.from(v.querySelectorAll(`[${f}]`));
+      return Array.from(p.itemMap.values()).sort(
+        (T, M) => g.indexOf(T.ref.current) - g.indexOf(M.ref.current)
+      );
+    }, [p.collectionRef, p.itemMap]), C = r.useCallback(
+      (v) => (p.listeners.add(v), () => p.listeners.delete(v)),
+      [p.listeners]
+    );
+    return { getItems: h, subscribe: C };
   }
-  return [{
-    Provider: i,
-    Slot: a,
-    ItemSlot: b
-  }, m, t];
+  return [
+    { Provider: i, Slot: a, ItemSlot: b },
+    x,
+    t
+  ];
 }
-const kt = [" ", "Enter", "ArrowUp", "ArrowDown"], Ft = ["Enter"], Je = (n) => Boolean(n.length === 1 && n.match(/\S| /)), st = "Combobox", [pe, Ce] = Lt(st), [Bt, G] = et(st), Ht = ({
-  children: n
-}) => /* @__PURE__ */ d(re.Root, {
-  children: /* @__PURE__ */ d(pe.Provider, {
-    scope: void 0,
-    children: n
-  })
-}), $t = (n) => {
+const Lt = [" ", "Enter", "ArrowUp", "ArrowDown"], Ft = ["Enter"], Je = (n) => !!(n.length === 1 && n.match(/\S| /)), st = "Combobox", [pe, me] = kt(st), [Bt, G] = et(st), Ht = ({ children: n }) => /* @__PURE__ */ d(re.Root, { children: /* @__PURE__ */ d(pe.Provider, { scope: void 0, children: n }) }), $t = (n) => {
   const {
     allowCustomValue: s = !1,
     autocomplete: e = "none",
@@ -153,208 +120,187 @@ const kt = [" ", "Enter", "ArrowUp", "ArrowDown"], Ft = ["Enter"], Je = (n) => B
     onOpenChange: i,
     value: c,
     defaultValue: a,
-    onValueChange: g,
+    onValueChange: m,
     disabled: f,
     required: b = !1,
-    locale: m = "en-EN",
+    locale: x = "en-EN",
     onTextValueChange: u,
     textValue: p,
-    defaultTextValue: v,
+    defaultTextValue: h,
     filterValue: C,
-    defaultFilterValue: x,
-    onFilterValueChange: h
-  } = n, [w, A] = r.useState(null), [E, M] = r.useState(null), [P, L] = r.useState(null), [B, W] = r.useState(null), [H = !1, O] = ie({
+    defaultFilterValue: v,
+    onFilterValueChange: g
+  } = n, [w, A] = r.useState(null), [T, M] = r.useState(null), [P, k] = r.useState(null), [B, W] = r.useState(null), [H = !1, O] = ie({
     prop: o,
     defaultProp: l,
     onChange: i
-  }), [k, F] = ie({
+  }), [L, F] = ie({
     prop: c,
     defaultProp: a,
-    onChange: g
+    onChange: m
   }), [$, U] = ie({
     prop: p,
-    defaultProp: v,
+    defaultProp: h,
     onChange: u
   }), [Y, q] = ie({
     prop: C,
-    defaultProp: x,
-    onChange: h
-  }), K = oe(), ue = r.useCallback((le, se) => {
-    const de = se.map((y) => y.ref.current), [X, ...ce] = de, [Q] = ce.slice(-1), S = B;
-    for (const y of le) {
-      if (y === S)
-        return;
-      if (y?.scrollIntoView({
-        block: "nearest"
-      }), y === X && E && (E.scrollTop = 0), y === Q && E && (E.scrollTop = E.scrollHeight), W(y), e === "both") {
-        const D = se.find((I) => I.ref.current === y);
-        D && U(D.textValue);
+    defaultProp: v,
+    onChange: g
+  }), K = oe(), ue = r.useCallback(
+    (le, se) => {
+      const de = se.map((y) => y.ref.current), [X, ...ce] = de, [Q] = ce.slice(-1), S = B;
+      for (const y of le) {
+        if (y === S)
+          return;
+        if (y?.scrollIntoView({ block: "nearest" }), y === X && T && (T.scrollTop = 0), y === Q && T && (T.scrollTop = T.scrollHeight), W(y), e === "both") {
+          const D = se.find((I) => I.ref.current === y);
+          D && U(D.textValue);
+        }
+        if (y !== S)
+          return;
       }
-      if (y !== S)
-        return;
-    }
-  }, [e, U, E, B]);
+    },
+    [e, U, T, B]
+  );
   return r.useEffect(() => {
     e !== "both" && W(null);
   }, [$, e]), r.useEffect(() => {
     if (P && w)
       return rt([P, w]);
-  }, [P, w]), /* @__PURE__ */ d(Ht, {
-    children: /* @__PURE__ */ d(Bt, {
+  }, [P, w]), /* @__PURE__ */ d(Ht, { children: /* @__PURE__ */ d(
+    Bt,
+    {
       allowCustomValue: s,
       autocomplete: e,
       required: b,
       trigger: w,
       onTriggerChange: A,
       contentId: K,
-      value: k,
+      value: L,
       onValueChange: F,
       open: H,
       onOpenChange: O,
       disabled: f,
-      locale: m,
+      locale: x,
       focusFirst: ue,
       textValue: $,
       onTextValueChange: U,
       onViewportChange: M,
-      onContentChange: L,
+      onContentChange: k,
       visuallyFocussedItem: B,
       filterValue: Y,
       onFilterValueChange: q,
       onVisuallyFocussedItemChange: W,
       children: t
-    })
-  });
+    }
+  ) });
 }, Ut = "ComboboxTrigger", Kt = r.forwardRef((n, s) => {
-  const {
-    ...e
-  } = n, t = G(Ut);
-  return /* @__PURE__ */ d(re.Anchor, {
-    asChild: !0,
-    children: /* @__PURE__ */ d("div", {
-      ref: s,
-      "data-disabled": t.disabled ? "" : void 0,
-      ...e
-    })
-  });
+  const { ...e } = n, t = G(Ut);
+  return /* @__PURE__ */ d(re.Anchor, { asChild: !0, children: /* @__PURE__ */ d("div", { ref: s, "data-disabled": t.disabled ? "" : void 0, ...e }) });
 }), ct = "ComboboxInput", Wt = r.forwardRef((n, s) => {
-  const e = G(ct), t = r.useRef(null), {
-    getItems: o
-  } = Ce(void 0), {
-    startsWith: l
-  } = Me(e.locale, {
-    sensitivity: "base"
-  }), i = e.disabled, c = _(t, s, e.onTriggerChange), a = () => {
+  const e = G(ct), t = r.useRef(null), { getItems: o } = me(void 0), { startsWith: l } = Me(e.locale, { sensitivity: "base" }), i = e.disabled, c = _(t, s, e.onTriggerChange), a = () => {
     i || e.onOpenChange(!0);
-  }, g = Dt(e.filterValue);
+  }, m = Dt(e.filterValue);
   return r.useLayoutEffect(() => {
     setTimeout(() => {
       if (e.textValue === "" || e.textValue === void 0 || e.filterValue === "" || e.filterValue === void 0)
         return;
-      const f = o().find((m) => m.type === "option" && l(m.textValue, e.textValue)), b = vo(g ?? "", e.filterValue);
+      const f = o().find(
+        (x) => x.type === "option" && l(x.textValue, e.textValue)
+      ), b = vo(m ?? "", e.filterValue);
       f && !e.visuallyFocussedItem && b === e.filterValue.length && t.current.setSelectionRange(e.filterValue.length, e.textValue.length);
     });
-  }, [e.textValue, e.filterValue, l, e.visuallyFocussedItem, o, g]), /* @__PURE__ */ d("input", {
-    type: "text",
-    role: "combobox",
-    "aria-controls": e.contentId,
-    "aria-expanded": e.open,
-    "aria-required": e.required,
-    "aria-autocomplete": e.autocomplete,
-    "data-state": e.open ? "open" : "closed",
-    "aria-disabled": i,
-    "aria-activedescendant": e.visuallyFocussedItem?.id,
-    disabled: i,
-    "data-disabled": i ? "" : void 0,
-    "data-placeholder": e.textValue === void 0 ? "" : void 0,
-    value: e.textValue ?? "",
-    ...n,
-    ref: c,
-    onClick: T(n.onClick, (f) => {
-      f.currentTarget.focus();
-    }),
-    onPointerDown: T(n.onPointerDown, (f) => {
-      f.button === 0 && f.ctrlKey === !1 && (a(), f.currentTarget.focus());
-    }),
-    onKeyDown: T(n.onKeyDown, (f) => {
-      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(f.key))
-        setTimeout(() => {
-          let m = o().filter((u) => !u.disabled).map((u) => u.ref.current);
-          if (["ArrowUp", "End"].includes(f.key) && (m = m.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(f.key)) {
-            const u = e.visuallyFocussedItem ?? f.target;
-            let p = m.indexOf(u);
-            p === m.length - 1 && (p = -1), m = m.slice(p + 1);
-          }
-          if (["ArrowDown"].includes(f.key) && e.autocomplete === "both" && m.length > 1) {
-            const [u, ...p] = m, v = o().find((C) => C.ref.current === u).textValue;
-            e.textValue === v && (m = p);
+  }, [e.textValue, e.filterValue, l, e.visuallyFocussedItem, o, m]), /* @__PURE__ */ d(
+    "input",
+    {
+      type: "text",
+      role: "combobox",
+      "aria-controls": e.contentId,
+      "aria-expanded": e.open,
+      "aria-required": e.required,
+      "aria-autocomplete": e.autocomplete,
+      "data-state": e.open ? "open" : "closed",
+      "aria-disabled": i,
+      "aria-activedescendant": e.visuallyFocussedItem?.id,
+      disabled: i,
+      "data-disabled": i ? "" : void 0,
+      "data-placeholder": e.textValue === void 0 ? "" : void 0,
+      value: e.textValue ?? "",
+      ...n,
+      ref: c,
+      onClick: E(n.onClick, (f) => {
+        f.currentTarget.focus();
+      }),
+      onPointerDown: E(n.onPointerDown, (f) => {
+        f.button === 0 && f.ctrlKey === !1 && (a(), f.currentTarget.focus());
+      }),
+      onKeyDown: E(n.onKeyDown, (f) => {
+        if (["ArrowUp", "ArrowDown", "Home", "End"].includes(f.key))
+          setTimeout(() => {
+            let x = o().filter((u) => !u.disabled).map((u) => u.ref.current);
+            if (["ArrowUp", "End"].includes(f.key) && (x = x.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(f.key)) {
+              const u = e.visuallyFocussedItem ?? f.target;
+              let p = x.indexOf(u);
+              p === x.length - 1 && (p = -1), x = x.slice(p + 1);
+            }
+            if (["ArrowDown"].includes(f.key) && e.autocomplete === "both" && x.length > 1) {
+              const [u, ...p] = x, h = o().find((C) => C.ref.current === u).textValue;
+              e.textValue === h && (x = p);
+            }
+            e.focusFirst(x, o());
+          }), f.preventDefault();
+        else if (["Escape"].includes(f.key))
+          e.open ? e.onOpenChange(!1) : (e.onValueChange(void 0), e.onTextValueChange("")), f.preventDefault();
+        else if (Ft.includes(f.key)) {
+          if (e.visuallyFocussedItem) {
+            const b = o().find((x) => x.ref.current === e.visuallyFocussedItem);
+            b && (e.onValueChange(b.value), e.onTextValueChange(b.textValue), e.autocomplete === "both" && e.onFilterValueChange(b.textValue), b.ref.current?.click());
           }
-          e.focusFirst(m, o());
-        }), f.preventDefault();
-      else if (["Escape"].includes(f.key))
-        e.open ? e.onOpenChange(!1) : (e.onValueChange(void 0), e.onTextValueChange("")), f.preventDefault();
-      else if (Ft.includes(f.key)) {
-        if (e.visuallyFocussedItem) {
-          const b = o().find((m) => m.ref.current === e.visuallyFocussedItem);
-          b && (e.onValueChange(b.value), e.onTextValueChange(b.textValue), e.autocomplete === "both" && e.onFilterValueChange(b.textValue), b.ref.current?.click());
+          e.onOpenChange(!1), f.preventDefault();
+        } else
+          e.onVisuallyFocussedItemChange(null);
+      }),
+      onChange: E(n.onChange, (f) => {
+        e.onTextValueChange(f.currentTarget.value), e.autocomplete === "both" && e.onFilterValueChange(f.currentTarget.value);
+      }),
+      onKeyUp: E(n.onKeyUp, (f) => {
+        if (!e.open && (Je(f.key) || ["ArrowUp", "ArrowDown", "Home", "End", "Backspace"].includes(f.key)) && a(), e.autocomplete === "both" && Je(f.key) && e.filterValue !== void 0) {
+          const b = e.filterValue, x = o().find((u) => l(u.textValue, b));
+          x && e.onTextValueChange(x.textValue);
         }
-        e.onOpenChange(!1), f.preventDefault();
-      } else
-        e.onVisuallyFocussedItemChange(null);
-    }),
-    onChange: T(n.onChange, (f) => {
-      e.onTextValueChange(f.currentTarget.value), e.autocomplete === "both" && e.onFilterValueChange(f.currentTarget.value);
-    }),
-    onKeyUp: T(n.onKeyUp, (f) => {
-      if (!e.open && (Je(f.key) || ["ArrowUp", "ArrowDown", "Home", "End", "Backspace"].includes(f.key)) && a(), e.autocomplete === "both" && Je(f.key) && e.filterValue !== void 0) {
-        const b = e.filterValue, m = o().find((u) => l(u.textValue, b));
-        m && e.onTextValueChange(m.textValue);
-      }
-    }),
-    onBlur: T(n.onBlur, (f) => {
-      e.onVisuallyFocussedItemChange(null);
-      const [b] = o().filter((u) => u.textValue === e.textValue && u.type === "option");
-      if (e.allowCustomValue) {
-        b && (e.onValueChange(b.value), e.autocomplete === "both" && e.onFilterValueChange(b.textValue));
-        return;
-      }
-      const [m] = o().filter((u) => u.value === e.value && u.type === "option");
-      b ? e.onValueChange(b.value) : m && f.currentTarget.value !== "" ? (e.onTextValueChange(m.textValue), e.autocomplete === "both" && e.onFilterValueChange(m.textValue)) : (e.onValueChange(void 0), e.onTextValueChange(""));
-    })
-  });
+      })
+    }
+  );
 }), zt = r.forwardRef((n, s) => {
-  const {
-    children: e,
-    ...t
-  } = n, o = G(ct), l = o.disabled, i = () => {
+  const { children: e, ...t } = n, o = G(ct), l = o.disabled, i = () => {
     l || (o.onOpenChange(!0), o.trigger?.focus());
   };
-  return /* @__PURE__ */ d(N.button, {
-    "aria-hidden": !0,
-    type: "button",
-    "aria-disabled": l,
-    "aria-controls": o.contentId,
-    "aria-expanded": o.open,
-    disabled: l,
-    "data-disabled": l ? "" : void 0,
-    ...t,
-    tabIndex: -1,
-    ref: s,
-    onClick: T(t.onClick, () => {
-      o.trigger?.focus();
-    }),
-    onPointerDown: T(t.onPointerDown, (c) => {
-      c.button === 0 && c.ctrlKey === !1 && (i(), c.preventDefault());
-    }),
-    onKeyDown: T(t.onKeyDown, (c) => {
-      kt.includes(c.key) && (i(), c.preventDefault());
-    }),
-    children: e || "\u25BC"
-  });
-}), Gt = "ComboboxPortal", it = (n) => /* @__PURE__ */ d(nt, {
-  asChild: !0,
-  ...n
-});
+  return /* @__PURE__ */ d(
+    N.button,
+    {
+      "aria-hidden": !0,
+      type: "button",
+      "aria-disabled": l,
+      "aria-controls": o.contentId,
+      "aria-expanded": o.open,
+      disabled: l,
+      "data-disabled": l ? "" : void 0,
+      ...t,
+      tabIndex: -1,
+      ref: s,
+      onClick: E(t.onClick, () => {
+        o.trigger?.focus();
+      }),
+      onPointerDown: E(t.onPointerDown, (c) => {
+        c.button === 0 && c.ctrlKey === !1 && (i(), c.preventDefault());
+      }),
+      onKeyDown: E(t.onKeyDown, (c) => {
+        Lt.includes(c.key) && (i(), c.preventDefault());
+      }),
+      children: e || "▼"
+    }
+  );
+}), Gt = "ComboboxPortal", it = (n) => /* @__PURE__ */ d(nt, { asChild: !0, ...n });
 it.displayName = Gt;
 const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
   const e = G(at), [t, o] = r.useState();
@@ -362,239 +308,200 @@ const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
     o(new DocumentFragment());
   }, []), !e.open) {
     const l = t;
-    return l ? Ne.createPortal(/* @__PURE__ */ d(pe.Slot, {
-      scope: void 0,
-      children: /* @__PURE__ */ d("div", {
-        children: n.children
-      })
-    }), l) : null;
+    return l ? _e.createPortal(
+      /* @__PURE__ */ d(pe.Slot, { scope: void 0, children: /* @__PURE__ */ d("div", { children: n.children }) }),
+      l
+    ) : null;
   }
-  return /* @__PURE__ */ d(qt, {
-    ...n,
-    ref: s
-  });
-}), Yt = 10, qt = r.forwardRef((n, s) => {
-  const {
-    onEscapeKeyDown: e,
-    onPointerDownOutside: t,
-    ...o
-  } = n, l = G(at), i = _(s, (a) => l.onContentChange(a)), {
-    onOpenChange: c
-  } = l;
-  return r.useEffect(() => {
-    const a = () => c(!1);
-    return window.addEventListener("blur", a), window.addEventListener("resize", a), () => {
-      window.removeEventListener("blur", a), window.removeEventListener("resize", a);
-    };
-  }, [c]), /* @__PURE__ */ d(lt, {
-    allowPinchZoom: !0,
-    children: /* @__PURE__ */ d(tt, {
-      asChild: !0,
-      onEscapeKeyDown: e,
-      onPointerDownOutside: t,
-      onFocusOutside: (a) => a.preventDefault(),
-      onDismiss: () => {
-        l.onOpenChange(!1), l.trigger?.focus({
-          preventScroll: !0
-        });
-      },
-      children: /* @__PURE__ */ d(Xt, {
-        role: "listbox",
-        id: l.contentId,
-        "data-state": l.open ? "open" : "closed",
-        onContextMenu: (a) => a.preventDefault(),
+  return /* @__PURE__ */ d(qt, { ...n, ref: s });
+}), Yt = 10, qt = r.forwardRef(
+  (n, s) => {
+    const { onEscapeKeyDown: e, onPointerDownOutside: t, ...o } = n, l = G(at), i = _(s, (h) => l.onContentChange(h)), { onOpenChange: c, onValueChange: a, onFilterValueChange: m, onTextValueChange: f, textValue: b, value: x } = l, { getItems: u } = me(void 0), p = r.useCallback(() => {
+      l.onVisuallyFocussedItemChange(null);
+      const [h] = u().filter((v) => v.textValue === b && v.type === "option");
+      if (l.allowCustomValue) {
+        h && (a(h.value), l.autocomplete === "both" && m(h.textValue));
+        return;
+      }
+      const [C] = u().filter((v) => v.value === x && v.type === "option");
+      h ? a(h.value) : C && b !== "" ? (f(C.textValue), l.autocomplete === "both" && m(C.textValue)) : (a(void 0), f(""));
+    }, [l, u, m, f, a, b, x]);
+    return r.useEffect(() => {
+      const h = () => {
+        p(), c(!1);
+      };
+      return window.addEventListener("blur", h), window.addEventListener("resize", h), () => {
+        window.removeEventListener("blur", h), window.removeEventListener("resize", h);
+      };
+    }, [p, c]), /* @__PURE__ */ d(lt, { allowPinchZoom: !0, children: /* @__PURE__ */ d(
+      tt,
+      {
+        asChild: !0,
+        onEscapeKeyDown: e,
+        onPointerDownOutside: t,
+        onFocusOutside: (h) => h.preventDefault(),
+        onDismiss: () => {
+          l.onOpenChange(!1), l.trigger?.focus({ preventScroll: !0 }), p();
+        },
+        children: /* @__PURE__ */ d(
+          Xt,
+          {
+            role: "listbox",
+            id: l.contentId,
+            "data-state": l.open ? "open" : "closed",
+            onContextMenu: (h) => h.preventDefault(),
+            ...o,
+            ref: i,
+            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",
+              ...o.style
+            }
+          }
+        )
+      }
+    ) });
+  }
+), Xt = r.forwardRef(
+  (n, s) => {
+    const { align: e = "start", collisionPadding: t = Yt, ...o } = n;
+    return /* @__PURE__ */ d(
+      re.Content,
+      {
         ...o,
-        ref: i,
+        ref: s,
+        align: e,
+        collisionPadding: t,
         style: {
-          display: "flex",
-          flexDirection: "column",
-          outline: "none",
-          ...o.style
+          // Ensure border-box for floating-ui calculations
+          boxSizing: "border-box",
+          ...o.style,
+          "--radix-combobox-content-transform-origin": "var(--radix-popper-transform-origin)",
+          "--radix-combobox-content-available-width": "var(--radix-popper-available-width)",
+          "--radix-combobox-content-available-height": "var(--radix-popper-available-height)",
+          "--radix-combobox-trigger-width": "var(--radix-popper-anchor-width)",
+          "--radix-combobox-trigger-height": "var(--radix-popper-anchor-height)"
         }
-      })
-    })
-  });
-}), Xt = r.forwardRef((n, s) => {
-  const {
-    align: e = "start",
-    collisionPadding: t = Yt,
-    ...o
-  } = n;
-  return /* @__PURE__ */ d(re.Content, {
-    ...o,
-    ref: s,
-    align: e,
-    collisionPadding: t,
-    style: {
-      boxSizing: "border-box",
-      ...o.style,
-      "--radix-combobox-content-transform-origin": "var(--radix-popper-transform-origin)",
-      "--radix-combobox-content-available-width": "var(--radix-popper-available-width)",
-      "--radix-combobox-content-available-height": "var(--radix-popper-available-height)",
-      "--radix-combobox-trigger-width": "var(--radix-popper-anchor-width)",
-      "--radix-combobox-trigger-height": "var(--radix-popper-anchor-height)"
-    }
-  });
-}), Zt = "ComboboxViewport", Jt = r.forwardRef((n, s) => {
+      }
+    );
+  }
+), Zt = "ComboboxViewport", Jt = r.forwardRef((n, s) => {
   const e = G(Zt), t = _(s, e.onViewportChange);
-  return /* @__PURE__ */ Ae(_e, {
-    children: [/* @__PURE__ */ d("style", {
-      dangerouslySetInnerHTML: {
-        __html: "[data-radix-combobox-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-combobox-viewport]::-webkit-scrollbar{display:none}"
+  return /* @__PURE__ */ Ne(Ae, { children: [
+    /* @__PURE__ */ d(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: "[data-radix-combobox-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-combobox-viewport]::-webkit-scrollbar{display:none}"
+        }
       }
-    }), /* @__PURE__ */ d(pe.Slot, {
-      scope: void 0,
-      children: /* @__PURE__ */ d(N.div, {
+    ),
+    /* @__PURE__ */ d(pe.Slot, { scope: void 0, children: /* @__PURE__ */ d(
+      N.div,
+      {
         "data-radix-combobox-viewport": "",
         role: "presentation",
         ...n,
         ref: t,
         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,
           overflow: "auto",
           ...n.style
         }
-      })
-    })]
-  });
+      }
+    ) })
+  ] });
 }), ut = "ComboboxItem", [Qt, dt] = et(ut), ft = r.forwardRef((n, s) => {
-  const {
-    value: e,
-    disabled: t = !1,
-    textValue: o,
-    ...l
-  } = n, i = r.useRef(null), c = _(s, i), {
-    getItems: a
-  } = Ce(void 0), {
-    onTextValueChange: g,
+  const { value: e, disabled: t = !1, textValue: o, ...l } = n, i = r.useRef(null), c = _(s, i), { getItems: a } = me(void 0), {
+    onTextValueChange: m,
     textValue: f,
     visuallyFocussedItem: b,
-    ...m
-  } = G(ut), u = oe(), [p, v] = r.useState(o ?? ""), C = r.useMemo(() => b === a().find((M) => M.ref.current === i.current)?.ref.current, [a, b]), x = m.value === e, h = () => {
-    t || (m.onValueChange(e), g(p), m.onOpenChange(!1), m.autocomplete === "both" && m.onFilterValueChange(p), m.trigger?.focus({
-      preventScroll: !0
-    }));
-  }, {
-    startsWith: w
-  } = Me(m.locale, {
-    sensitivity: "base"
-  }), A = r.useCallback((M) => {
-    v((P) => P || (M?.textContent ?? "").trim());
+    ...x
+  } = G(ut), u = oe(), [p, h] = r.useState(o ?? ""), C = r.useMemo(() => b === a().find((M) => M.ref.current === i.current)?.ref.current, [a, b]), v = x.value === e, g = () => {
+    t || (x.onValueChange(e), m(p), x.onOpenChange(!1), x.autocomplete === "both" && x.onFilterValueChange(p), x.trigger?.focus({ preventScroll: !0 }));
+  }, { startsWith: w } = Me(x.locale, { sensitivity: "base" }), A = r.useCallback((M) => {
+    h((P) => P || (M?.textContent ?? "").trim());
   }, []);
   r.useEffect(() => {
-    x && f === void 0 && p !== "" && g(p);
-  }, [p, x, f, g]);
-  const E = oe();
-  return m.autocomplete === "list" && p && f && !w(p, f) || m.autocomplete === "both" && p && m.filterValue && !w(p, m.filterValue) ? null : /* @__PURE__ */ d(Qt, {
-    textId: u,
-    onTextValueChange: A,
-    isSelected: x,
-    children: /* @__PURE__ */ d(pe.ItemSlot, {
-      scope: void 0,
-      value: e,
-      textValue: p,
-      disabled: t,
-      type: "option",
-      children: /* @__PURE__ */ d(N.div, {
-        role: "option",
-        "aria-labelledby": u,
-        "data-highlighted": C ? "" : void 0,
-        "aria-selected": x && C,
-        "data-state": x ? "checked" : "unchecked",
-        "aria-disabled": t || void 0,
-        "data-disabled": t ? "" : void 0,
-        tabIndex: t ? void 0 : -1,
-        ...l,
-        id: E,
-        ref: c,
-        onPointerUp: T(l.onPointerUp, h)
-      })
-    })
-  });
+    v && f === void 0 && p !== "" && m(p);
+  }, [p, v, f, m]);
+  const T = oe();
+  return x.autocomplete === "list" && p && f && !w(p, f) || x.autocomplete === "both" && p && x.filterValue && !w(p, x.filterValue) ? null : /* @__PURE__ */ d(Qt, { textId: u, onTextValueChange: A, isSelected: v, children: /* @__PURE__ */ d(pe.ItemSlot, { scope: void 0, value: e, textValue: p, disabled: t, type: "option", children: /* @__PURE__ */ d(
+    N.div,
+    {
+      role: "option",
+      "aria-labelledby": u,
+      "data-highlighted": C ? "" : void 0,
+      "aria-selected": v && C,
+      "data-state": v ? "checked" : "unchecked",
+      "aria-disabled": t || void 0,
+      "data-disabled": t ? "" : void 0,
+      tabIndex: t ? void 0 : -1,
+      ...l,
+      id: T,
+      ref: c,
+      onPointerUp: E(l.onPointerUp, g)
+    }
+  ) }) });
 }), eo = "ComboboxItemText", to = r.forwardRef((n, s) => {
-  const {
-    className: e,
-    style: t,
-    ...o
-  } = n, l = dt(eo), i = _(s, l.onTextValueChange);
-  return /* @__PURE__ */ d(N.span, {
-    id: l.textId,
-    ...o,
-    ref: i
-  });
+  const { className: e, style: t, ...o } = n, l = dt(eo), i = _(s, l.onTextValueChange);
+  return /* @__PURE__ */ d(N.span, { id: l.textId, ...o, ref: i });
 }), oo = "ComboboxItemIndicator", no = r.forwardRef((n, s) => {
-  const {
-    isSelected: e
-  } = dt(oo);
-  return e ? /* @__PURE__ */ d(N.span, {
-    "aria-hidden": !0,
-    ...n,
-    ref: s
-  }) : null;
+  const { isSelected: e } = dt(oo);
+  return e ? /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...n, ref: s }) : null;
 }), pt = "ComboboxNoValueFound", ro = r.forwardRef((n, s) => {
-  const {
-    textValue: e = "",
-    locale: t
-  } = G(pt), [o, l] = r.useState([]), {
-    subscribe: i
-  } = Ce(void 0), {
-    startsWith: c
-  } = Me(t, {
-    sensitivity: "base"
-  });
+  const { textValue: e = "", locale: t } = G(pt), [o, l] = r.useState([]), { subscribe: i } = me(void 0), { startsWith: c } = Me(t, { sensitivity: "base" });
   return r.useEffect(() => {
-    const a = i((g) => {
-      l(g);
+    const a = i((m) => {
+      l(m);
     });
     return () => {
       a();
     };
-  }, [i]), o.some((a) => c(a.textValue, e)) ? null : /* @__PURE__ */ d(N.div, {
-    ...n,
-    ref: s
-  });
+  }, [i]), o.some((a) => c(a.textValue, e)) ? null : /* @__PURE__ */ d(N.div, { ...n, ref: s });
 }), lo = r.forwardRef((n, s) => {
-  const {
-    disabled: e = !1,
-    ...t
-  } = n, o = G(pt), {
-    textValue: l,
-    visuallyFocussedItem: i
-  } = o, {
-    getItems: c,
-    subscribe: a
-  } = Ce(void 0), g = r.useRef(null), [f, b] = r.useState(!1), m = _(s, g), u = r.useMemo(() => i === c().find((C) => C.ref.current === g.current)?.ref.current, [c, i]), p = oe(), v = () => {
-    !e && l && (o.onValueChange(l), o.onTextValueChange(l), o.onOpenChange(!1), o.autocomplete === "both" && o.onFilterValueChange(l), o.trigger?.focus({
-      preventScroll: !0
-    }));
+  const { disabled: e = !1, ...t } = n, o = G(pt), { textValue: l, visuallyFocussedItem: i } = o, { getItems: c, subscribe: a } = me(void 0), m = r.useRef(null), [f, b] = r.useState(!1), x = _(s, m), u = r.useMemo(() => i === c().find((C) => C.ref.current === m.current)?.ref.current, [c, i]), p = oe(), h = () => {
+    !e && l && (o.onValueChange(l), o.onTextValueChange(l), o.onOpenChange(!1), o.autocomplete === "both" && o.onFilterValueChange(l), o.trigger?.focus({ preventScroll: !0 }));
   };
   return r.useLayoutEffect(() => {
-    const C = a((x) => {
-      b(!x.some((h) => h.textValue === l && h.type !== "create"));
+    const C = a((v) => {
+      b(!v.some((g) => g.textValue === l && g.type !== "create"));
     });
     return () => {
       C();
     };
-  }, [l, a]), !l || !f ? null : /* @__PURE__ */ d(pe.ItemSlot, {
-    scope: void 0,
-    value: l ?? "",
-    textValue: l ?? "",
-    disabled: e,
-    type: "create",
-    children: /* @__PURE__ */ d(N.div, {
-      role: "option",
-      tabIndex: e ? void 0 : -1,
-      "aria-disabled": e || void 0,
-      "data-disabled": e ? "" : void 0,
-      "data-highlighted": u ? "" : void 0,
-      ...t,
-      id: p,
-      ref: m,
-      onPointerUp: T(t.onPointerUp, v)
-    })
-  });
-}), so = $t, co = Kt, io = Wt, ao = zt, uo = it, fo = jt, po = Jt, mo = ft, ho = to, go = no, Co = ro, xo = lo;
+  }, [l, a]), !l || !f ? null : /* @__PURE__ */ d(
+    pe.ItemSlot,
+    {
+      scope: void 0,
+      value: l ?? "",
+      textValue: l ?? "",
+      disabled: e,
+      type: "create",
+      children: /* @__PURE__ */ d(
+        N.div,
+        {
+          role: "option",
+          tabIndex: e ? void 0 : -1,
+          "aria-disabled": e || void 0,
+          "data-disabled": e ? "" : void 0,
+          "data-highlighted": u ? "" : void 0,
+          ...t,
+          id: p,
+          ref: x,
+          onPointerUp: E(t.onPointerUp, h)
+        }
+      )
+    }
+  );
+}), so = $t, co = Kt, io = Wt, ao = zt, uo = it, fo = jt, po = Jt, mo = ft, ho = to, go = no, xo = ro, Co = lo;
 function vo(n, s) {
   const e = Math.min(n.length, s.length);
   for (let t = 0; t < e; t++)
@@ -605,19 +512,22 @@ function vo(n, s) {
 const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ComboboxItem: ft,
-  Root: so,
-  Trigger: co,
-  TextInput: io,
-  Icon: ao,
-  Portal: uo,
   Content: fo,
-  Viewport: po,
+  CreateItem: Co,
+  Icon: ao,
   Item: mo,
-  ItemText: ho,
   ItemIndicator: go,
-  NoValueFound: Co,
-  CreateItem: xo
-}, Symbol.toStringTag, { value: "Module" })), So = [" ", "Enter", "ArrowUp", "ArrowDown"], bo = [" ", "Enter"], me = "Select", [xe, he, wo] = Pt(me), [ae, yo] = Qe(me, [wo, ot]), ve = ot(), [Io, j] = ae(me), [To, Eo] = ae(me), Oe = (n) => {
+  ItemText: ho,
+  NoValueFound: xo,
+  Portal: uo,
+  Root: so,
+  TextInput: io,
+  Trigger: co,
+  Viewport: po
+}, Symbol.toStringTag, { value: "Module" })), So = [" ", "Enter", "ArrowUp", "ArrowDown"], bo = [" ", "Enter"], he = "Select", [Ce, ge, wo] = Pt(he), [ae, yo] = Qe(he, [
+  wo,
+  ot
+]), ve = ot(), [Io, j] = ae(he), [To, Eo] = ae(he), Oe = (n) => {
   const {
     __scopeSelect: s,
     children: e,
@@ -627,762 +537,749 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     value: i,
     defaultValue: c,
     onValueChange: a,
-    dir: g,
+    dir: m,
+    // name,
+    // autoComplete,
     disabled: f,
     required: b,
-    multi: m = !1
-  } = n, u = ve(s), [p, v] = r.useState(null), [C, x] = r.useState(null), [h, w] = r.useState(!1), A = Vt(g), [E = !1, M] = ie({
+    multi: x = !1
+  } = n, u = ve(s), [p, h] = r.useState(null), [C, v] = r.useState(null), [g, w] = r.useState(!1), A = Vt(m), [T = !1, M] = ie({
     prop: t,
     defaultProp: o,
     onChange: l
-  }), [P, L] = ie({
+  }), [P, k] = ie({
     prop: i,
     defaultProp: c,
     onChange(O) {
       a && (Array.isArray(O), a(O));
     }
   }), B = r.useRef(null), [W, H] = r.useState(/* @__PURE__ */ new Set());
-  return /* @__PURE__ */ d(re.Root, {
-    ...u,
-    children: /* @__PURE__ */ d(Io, {
+  return /* @__PURE__ */ d(re.Root, { ...u, children: /* @__PURE__ */ d(
+    Io,
+    {
       required: b,
       scope: s,
       trigger: p,
-      onTriggerChange: v,
+      onTriggerChange: h,
       valueNode: C,
-      onValueNodeChange: x,
-      valueNodeHasChildren: h,
+      onValueNodeChange: v,
+      valueNodeHasChildren: g,
       onValueNodeHasChildrenChange: w,
       contentId: oe(),
       value: P,
-      onValueChange: L,
-      open: E,
+      onValueChange: k,
+      open: T,
       onOpenChange: M,
       dir: A,
       triggerPointerDownPosRef: B,
       disabled: f,
-      multi: m,
-      children: /* @__PURE__ */ d(xe.Provider, {
-        scope: s,
-        children: /* @__PURE__ */ d(To, {
+      multi: x,
+      children: /* @__PURE__ */ d(Ce.Provider, { scope: s, children: /* @__PURE__ */ d(
+        To,
+        {
           scope: n.__scopeSelect,
           onNativeOptionAdd: r.useCallback((O) => {
-            H((k) => new Set(k).add(O));
+            H((L) => new Set(L).add(O));
           }, []),
           onNativeOptionRemove: r.useCallback((O) => {
-            H((k) => {
-              const F = new Set(k);
+            H((L) => {
+              const F = new Set(L);
               return F.delete(O), F;
             });
           }, []),
           children: e
-        })
-      })
-    })
-  });
-};
-Oe.displayName = me;
-const mt = "SelectTrigger", De = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    ...t
-  } = n, o = ve(e), l = j(mt, e), i = l.disabled, c = _(s, l.onTriggerChange), a = he(e), [g, f, b] = It((u) => {
-    const p = a().filter((x) => !x.disabled), v = p.find((x) => x.value === l.value), C = Tt(p, u, v);
-    if (C !== void 0 && !Array.isArray(C.value)) {
-      const x = l.multi ? [C.value] : C.value;
-      l.onValueChange(x);
+        }
+      ) })
     }
-  }), m = () => {
-    i || (l.onOpenChange(!0), b());
-  };
-  return /* @__PURE__ */ d(re.Anchor, {
-    asChild: !0,
-    ...o,
-    children: /* @__PURE__ */ d(N.div, {
-      role: "combobox",
-      "aria-controls": l.contentId,
-      "aria-expanded": l.open,
-      "aria-required": l.required,
-      "aria-autocomplete": "none",
-      dir: l.dir,
-      "data-state": l.open ? "open" : "closed",
-      "data-disabled": i ? "" : void 0,
-      "data-placeholder": l.value === void 0 ? "" : void 0,
-      tabIndex: i ? void 0 : 0,
-      ...t,
-      ref: c,
-      onClick: T(t.onClick, (u) => {
-        u.currentTarget.focus();
-      }),
-      onPointerDown: T(t.onPointerDown, (u) => {
-        const p = u.target;
-        p.hasPointerCapture(u.pointerId) && p.releasePointerCapture(u.pointerId), (p.closest("button") ?? p.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (m(), l.triggerPointerDownPosRef.current = {
-          x: Math.round(u.pageX),
-          y: Math.round(u.pageY)
-        }, u.preventDefault());
-      }),
-      onKeyDown: T(t.onKeyDown, (u) => {
-        const p = g.current !== "", v = u.ctrlKey || u.altKey || u.metaKey, C = u.target;
-        (C.closest("button") ?? C.closest("div")) === u.currentTarget && (!v && u.key.length === 1 && f(u.key), !(p && u.key === " ") && So.includes(u.key) && (m(), u.preventDefault()));
-      })
-    })
-  });
-});
+  ) });
+};
+Oe.displayName = he;
+const mt = "SelectTrigger", De = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, ...t } = n, o = ve(e), l = j(mt, e), i = l.disabled, c = _(s, l.onTriggerChange), a = ge(e), [m, f, b] = It((u) => {
+      const p = a().filter((v) => !v.disabled), h = p.find((v) => v.value === l.value), C = Tt(p, u, h);
+      if (C !== void 0 && !Array.isArray(C.value)) {
+        const v = l.multi ? [C.value] : C.value;
+        l.onValueChange(v);
+      }
+    }), x = () => {
+      i || (l.onOpenChange(!0), b());
+    };
+    return /* @__PURE__ */ d(re.Anchor, { asChild: !0, ...o, children: /* @__PURE__ */ d(
+      N.div,
+      {
+        role: "combobox",
+        "aria-controls": l.contentId,
+        "aria-expanded": l.open,
+        "aria-required": l.required,
+        "aria-autocomplete": "none",
+        dir: l.dir,
+        "data-state": l.open ? "open" : "closed",
+        "data-disabled": i ? "" : void 0,
+        "data-placeholder": l.value === void 0 ? "" : void 0,
+        tabIndex: i ? void 0 : 0,
+        ...t,
+        ref: c,
+        onClick: E(t.onClick, (u) => {
+          u.currentTarget.focus();
+        }),
+        onPointerDown: E(t.onPointerDown, (u) => {
+          const p = u.target;
+          p.hasPointerCapture(u.pointerId) && p.releasePointerCapture(u.pointerId), (p.closest("button") ?? p.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (x(), l.triggerPointerDownPosRef.current = {
+            x: Math.round(u.pageX),
+            y: Math.round(u.pageY)
+          }, u.preventDefault());
+        }),
+        onKeyDown: E(t.onKeyDown, (u) => {
+          const p = m.current !== "", h = u.ctrlKey || u.altKey || u.metaKey, C = u.target;
+          (C.closest("button") ?? C.closest("div")) === u.currentTarget && (!h && u.key.length === 1 && f(u.key), !(p && u.key === " ") && So.includes(u.key) && (x(), u.preventDefault()));
+        })
+      }
+    ) });
+  }
+);
 De.displayName = mt;
-const ht = "SelectValue", Le = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    children: t,
-    placeholder: o,
-    ...l
-  } = n, i = j(ht, e), {
-    onValueNodeHasChildrenChange: c
-  } = i, a = t !== void 0, g = _(s, i.onValueNodeChange), [f, b] = r.useState([]), m = he(e);
-  Z(() => {
-    c(a);
-  }, [c, a]), r.useLayoutEffect(() => {
-    if (Array.isArray(i.value) && f.length !== i.value.length) {
-      const p = setTimeout(() => {
-        const v = m().filter((C) => Array.isArray(C.value) ? !1 : i.value?.includes(C.value));
-        b(v);
-      });
-      return () => {
-        clearTimeout(p);
-      };
-    }
-  }, [i.value, m, f]);
-  let u = t;
-  if ((i.value === void 0 || i.value.length === 0) && o !== void 0)
-    u = o;
-  else if (typeof t == "function")
-    if (Array.isArray(i.value)) {
-      const p = i.value.map((v) => {
-        const C = f.find((x) => x.value === v);
-        return C ? t({
-          value: v,
-          textValue: C?.textValue
-        }) : null;
-      });
-      u = p.every((v) => v === null) ? o : p;
-    } else
-      u = t(i.value);
-  return /* @__PURE__ */ d(N.span, {
-    ...l,
-    ref: g,
-    children: u
-  });
-});
-Le.displayName = ht;
-const Po = "SelectIcon", ke = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    children: t,
-    ...o
-  } = n;
-  return /* @__PURE__ */ d(N.span, {
-    "aria-hidden": !0,
-    ...o,
-    ref: s,
-    children: t || "\u25BC"
-  });
-});
-ke.displayName = Po;
-const Vo = "SelectPortal", Fe = (n) => /* @__PURE__ */ d(nt, {
-  asChild: !0,
-  ...n
-});
+const ht = "SelectValue", ke = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, children: t, placeholder: o, ...l } = n, i = j(ht, e), { onValueNodeHasChildrenChange: c } = i, a = t !== void 0, m = _(s, i.onValueNodeChange), [f, b] = r.useState([]), x = ge(e);
+    Z(() => {
+      c(a);
+    }, [c, a]), r.useLayoutEffect(() => {
+      if (Array.isArray(i.value) && f.length !== i.value.length) {
+        const p = setTimeout(() => {
+          const h = x().filter(
+            (C) => Array.isArray(C.value) ? !1 : i.value?.includes(C.value)
+          );
+          b(h);
+        });
+        return () => {
+          clearTimeout(p);
+        };
+      }
+    }, [i.value, x, f]);
+    let u;
+    if ((i.value === void 0 || i.value.length === 0) && o !== void 0)
+      u = /* @__PURE__ */ d("span", { children: o });
+    else if (typeof t == "function")
+      if (Array.isArray(i.value)) {
+        const p = i.value.map((h) => {
+          const C = f.find((v) => v.value === h);
+          return C ? t({ value: h, textValue: C?.textValue }) : null;
+        });
+        u = p.every((h) => h === null) ? o : p;
+      } else
+        u = t(i.value);
+    else
+      u = t;
+    return /* @__PURE__ */ d(N.span, { ...l, ref: m, children: u || null });
+  }
+);
+ke.displayName = ht;
+const Po = "SelectIcon", Le = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, children: t, ...o } = n;
+    return /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...o, ref: s, children: t || "▼" });
+  }
+);
+Le.displayName = Po;
+const Vo = "SelectPortal", Fe = (n) => /* @__PURE__ */ d(nt, { asChild: !0, ...n });
 Fe.displayName = Vo;
-const ne = "SelectContent", Be = r.forwardRef((n, s) => {
-  const e = j(ne, n.__scopeSelect), [t, o] = r.useState();
-  if (Z(() => {
-    o(new DocumentFragment());
-  }, []), !e.open) {
-    const l = t;
-    return l ? Ne.createPortal(/* @__PURE__ */ d(gt, {
-      scope: n.__scopeSelect,
-      children: /* @__PURE__ */ d(xe.Slot, {
-        scope: n.__scopeSelect,
-        children: /* @__PURE__ */ d("div", {
-          children: n.children
-        })
-      })
-    }), l) : null;
+const ne = "SelectContent", Be = r.forwardRef(
+  (n, s) => {
+    const e = j(ne, n.__scopeSelect), [t, o] = r.useState();
+    if (Z(() => {
+      o(new DocumentFragment());
+    }, []), !e.open) {
+      const l = t;
+      return l ? _e.createPortal(
+        /* @__PURE__ */ d(gt, { scope: n.__scopeSelect, children: /* @__PURE__ */ d(Ce.Slot, { scope: n.__scopeSelect, children: /* @__PURE__ */ d("div", { children: n.children }) }) }),
+        l
+      ) : null;
+    }
+    return /* @__PURE__ */ d(xt, { ...n, ref: s });
   }
-  return /* @__PURE__ */ d(Ct, {
-    ...n,
-    ref: s
-  });
-});
+);
 Be.displayName = ne;
-const z = 10, [gt, J] = ae(ne), Ro = "SelectContentImpl", Ct = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    position: t = "item-aligned",
-    onCloseAutoFocus: o,
-    onEscapeKeyDown: l,
-    onPointerDownOutside: i,
-    side: c,
-    sideOffset: a,
-    align: g,
-    alignOffset: f,
-    arrowPadding: b,
-    collisionBoundary: m,
-    collisionPadding: u,
-    sticky: p,
-    hideWhenDetached: v,
-    avoidCollisions: C,
-    ...x
-  } = n, h = j(ne, e), [w, A] = r.useState(null), [E, M] = r.useState(null), P = _(s, (S) => A(S)), [L, B] = r.useState(null), [W, H] = r.useState(null), O = he(e), [k, F] = r.useState(!1), $ = r.useRef(!1);
-  r.useEffect(() => {
-    if (w)
-      return rt(w);
-  }, [w]), Rt();
-  const U = r.useCallback((S) => {
-    const [y, ...D] = O().map((R) => R.ref.current), [I] = D.slice(-1), V = document.activeElement;
-    for (const R of S)
-      if (R === V || (R?.scrollIntoView({
-        block: "nearest"
-      }), R === y && E && (E.scrollTop = 0), R === I && E && (E.scrollTop = E.scrollHeight), R?.focus(), document.activeElement !== V))
-        return;
-  }, [O, E]), Y = r.useCallback(() => U([L, w]), [U, L, w]);
-  r.useEffect(() => {
-    k && Y();
-  }, [k, Y]);
-  const {
-    onOpenChange: q,
-    triggerPointerDownPosRef: K
-  } = h;
-  r.useEffect(() => {
-    if (w) {
-      let S = {
-        x: 0,
-        y: 0
-      };
-      const y = (I) => {
-        S = {
-          x: Math.abs(Math.round(I.pageX) - (K.current?.x ?? 0)),
-          y: Math.abs(Math.round(I.pageY) - (K.current?.y ?? 0))
+const z = 10, [gt, J] = ae(ne), Ro = "SelectContentImpl", xt = r.forwardRef(
+  (n, s) => {
+    const {
+      __scopeSelect: e,
+      position: t = "item-aligned",
+      onCloseAutoFocus: o,
+      onEscapeKeyDown: l,
+      onPointerDownOutside: i,
+      //
+      // PopperContent props
+      side: c,
+      sideOffset: a,
+      align: m,
+      alignOffset: f,
+      arrowPadding: b,
+      collisionBoundary: x,
+      collisionPadding: u,
+      sticky: p,
+      hideWhenDetached: h,
+      avoidCollisions: C,
+      //
+      ...v
+    } = n, g = j(ne, e), [w, A] = r.useState(null), [T, M] = r.useState(null), P = _(s, (S) => A(S)), [k, B] = r.useState(null), [W, H] = r.useState(null), O = ge(e), [L, F] = r.useState(!1), $ = r.useRef(!1);
+    r.useEffect(() => {
+      if (w)
+        return rt(w);
+    }, [w]), Rt();
+    const U = r.useCallback(
+      (S) => {
+        const [y, ...D] = O().map((R) => R.ref.current), [I] = D.slice(-1), V = document.activeElement;
+        for (const R of S)
+          if (R === V || (R?.scrollIntoView({ block: "nearest" }), R === y && T && (T.scrollTop = 0), R === I && T && (T.scrollTop = T.scrollHeight), R?.focus(), document.activeElement !== V))
+            return;
+      },
+      [O, T]
+    ), Y = r.useCallback(
+      () => U([k, w]),
+      [U, k, w]
+    );
+    r.useEffect(() => {
+      L && Y();
+    }, [L, Y]);
+    const { onOpenChange: q, triggerPointerDownPosRef: K } = g;
+    r.useEffect(() => {
+      if (w) {
+        let S = { x: 0, y: 0 };
+        const y = (I) => {
+          S = {
+            x: Math.abs(Math.round(I.pageX) - (K.current?.x ?? 0)),
+            y: Math.abs(Math.round(I.pageY) - (K.current?.y ?? 0))
+          };
+        }, D = (I) => {
+          S.x <= 10 && S.y <= 10 ? I.preventDefault() : w.contains(I.target) || q(!1), document.removeEventListener("pointermove", y), K.current = null;
         };
-      }, D = (I) => {
-        S.x <= 10 && S.y <= 10 ? I.preventDefault() : w.contains(I.target) || q(!1), document.removeEventListener("pointermove", y), K.current = null;
-      };
-      return K.current !== null && (document.addEventListener("pointermove", y), document.addEventListener("pointerup", D, {
-        capture: !0,
-        once: !0
-      })), () => {
-        document.removeEventListener("pointermove", y), document.removeEventListener("pointerup", D, {
-          capture: !0
-        });
+        return K.current !== null && (document.addEventListener("pointermove", y), document.addEventListener("pointerup", D, { capture: !0, once: !0 })), () => {
+          document.removeEventListener("pointermove", y), document.removeEventListener("pointerup", D, { capture: !0 });
+        };
+      }
+    }, [w, q, K]), r.useEffect(() => {
+      const S = () => q(!1);
+      return window.addEventListener("blur", S), window.addEventListener("resize", S), () => {
+        window.removeEventListener("blur", S), window.removeEventListener("resize", S);
       };
-    }
-  }, [w, q, K]), r.useEffect(() => {
-    const S = () => q(!1);
-    return window.addEventListener("blur", S), window.addEventListener("resize", S), () => {
-      window.removeEventListener("blur", S), window.removeEventListener("resize", S);
-    };
-  }, [q]);
-  const [ue, le] = It((S) => {
-    const y = O().filter((V) => !V.disabled), D = y.find((V) => V.ref.current === document.activeElement), I = Tt(y, S, D);
-    I && setTimeout(() => I.ref.current.focus());
-  }), se = r.useCallback((S, y, D) => {
-    const I = !$.current && !D;
-    (h.value !== void 0 && h.value === y || I) && (B(S), I && ($.current = !0));
-  }, [h.value]), de = r.useCallback(() => w?.focus(), [w]), X = r.useCallback((S, y, D) => {
-    const I = !$.current && !D;
-    (h.value !== void 0 && (Array.isArray(y) ? y.every((R) => h.value?.includes(R)) : h.value === y) || I) && H(S);
-  }, [h.value]), ce = t === "popper" ? Te : xt, Q = ce === Te ? {
-    side: c,
-    sideOffset: a,
-    align: g,
-    alignOffset: f,
-    arrowPadding: b,
-    collisionBoundary: m,
-    collisionPadding: u,
-    sticky: p,
-    hideWhenDetached: v,
-    avoidCollisions: C
-  } : {};
-  return /* @__PURE__ */ d(gt, {
-    scope: e,
-    content: w,
-    viewport: E,
-    onViewportChange: M,
-    itemRefCallback: se,
-    selectedItem: L,
-    onItemLeave: de,
-    itemTextRefCallback: X,
-    focusSelectedItem: Y,
-    selectedItemText: W,
-    position: t,
-    isPositioned: k,
-    searchRef: ue,
-    children: /* @__PURE__ */ d(lt, {
-      as: Ie,
-      allowPinchZoom: !0,
-      children: /* @__PURE__ */ d(Nt, {
-        asChild: !0,
-        trapped: h.open,
-        onMountAutoFocus: (S) => {
-          S.preventDefault();
-        },
-        onUnmountAutoFocus: T(o, (S) => {
-          h.trigger?.focus({
-            preventScroll: !0
-          }), S.preventDefault();
-        }),
-        children: /* @__PURE__ */ d(tt, {
-          asChild: !0,
-          disableOutsidePointerEvents: !0,
-          onEscapeKeyDown: l,
-          onPointerDownOutside: i,
-          onFocusOutside: (S) => S.preventDefault(),
-          onDismiss: () => h.onOpenChange(!1),
-          children: /* @__PURE__ */ d(ce, {
-            role: "listbox",
-            id: h.contentId,
-            "data-state": h.open ? "open" : "closed",
-            "aria-multiselectable": h.multi ? "true" : void 0,
-            dir: h.dir,
-            onContextMenu: (S) => S.preventDefault(),
-            ...x,
-            ...Q,
-            onPlaced: () => F(!0),
-            ref: P,
+    }, [q]);
+    const [ue, le] = It((S) => {
+      const y = O().filter((V) => !V.disabled), D = y.find((V) => V.ref.current === document.activeElement), I = Tt(y, S, D);
+      I && setTimeout(() => I.ref.current.focus());
+    }), se = r.useCallback(
+      (S, y, D) => {
+        const I = !$.current && !D;
+        (g.value !== void 0 && g.value === y || I) && (B(S), I && ($.current = !0));
+      },
+      [g.value]
+    ), de = r.useCallback(() => w?.focus(), [w]), X = r.useCallback(
+      (S, y, D) => {
+        const I = !$.current && !D;
+        (g.value !== void 0 && (Array.isArray(y) ? y.every((R) => g.value?.includes(R)) : g.value === y) || I) && H(S);
+      },
+      [g.value]
+    ), ce = t === "popper" ? Te : Ct, Q = ce === Te ? {
+      side: c,
+      sideOffset: a,
+      align: m,
+      alignOffset: f,
+      arrowPadding: b,
+      collisionBoundary: x,
+      collisionPadding: u,
+      sticky: p,
+      hideWhenDetached: h,
+      avoidCollisions: C
+    } : {};
+    return /* @__PURE__ */ d(
+      gt,
+      {
+        scope: e,
+        content: w,
+        viewport: T,
+        onViewportChange: M,
+        itemRefCallback: se,
+        selectedItem: k,
+        onItemLeave: de,
+        itemTextRefCallback: X,
+        focusSelectedItem: Y,
+        selectedItemText: W,
+        position: t,
+        isPositioned: L,
+        searchRef: ue,
+        children: /* @__PURE__ */ d(lt, { as: Ie, allowPinchZoom: !0, children: /* @__PURE__ */ d(
+          Nt,
+          {
+            asChild: !0,
+            trapped: g.open,
+            onMountAutoFocus: (S) => {
+              S.preventDefault();
+            },
+            onUnmountAutoFocus: E(o, (S) => {
+              g.trigger?.focus({ preventScroll: !0 }), document.getSelection()?.empty(), S.preventDefault();
+            }),
+            children: /* @__PURE__ */ d(
+              tt,
+              {
+                asChild: !0,
+                disableOutsidePointerEvents: !0,
+                onEscapeKeyDown: l,
+                onPointerDownOutside: i,
+                onFocusOutside: (S) => S.preventDefault(),
+                onDismiss: () => g.onOpenChange(!1),
+                children: /* @__PURE__ */ d(
+                  ce,
+                  {
+                    role: "listbox",
+                    id: g.contentId,
+                    "data-state": g.open ? "open" : "closed",
+                    "aria-multiselectable": g.multi ? "true" : void 0,
+                    dir: g.dir,
+                    onContextMenu: (S) => S.preventDefault(),
+                    ...v,
+                    ...Q,
+                    onPlaced: () => F(!0),
+                    ref: P,
+                    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: E(v.onKeyDown, (S) => {
+                      const y = S.ctrlKey || S.altKey || S.metaKey;
+                      if (S.key === "Tab" && S.preventDefault(), !y && S.key.length === 1 && le(S.key), ["ArrowUp", "ArrowDown", "Home", "End"].includes(S.key)) {
+                        let I = O().filter((V) => !V.disabled).map((V) => V.ref.current);
+                        if (["ArrowUp", "End"].includes(S.key) && (I = I.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(S.key)) {
+                          const V = S.target, R = I.indexOf(V);
+                          I = I.slice(R + 1);
+                        }
+                        setTimeout(() => U(I)), S.preventDefault();
+                      }
+                    })
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
+);
+xt.displayName = Ro;
+const No = "SelectItemAlignedPosition", Ct = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, onPlaced: t, ...o } = n, l = j(ne, e), i = J(ne, e), [c, a] = r.useState(null), [m, f] = r.useState(null), b = _(s, (P) => f(P)), x = ge(e), u = r.useRef(!1), p = r.useRef(!0), { viewport: h, selectedItem: C, selectedItemText: v, focusSelectedItem: g } = i, w = r.useCallback(() => {
+      if (l.trigger && l.valueNode && c && m && h && C && v) {
+        const P = l.trigger.getBoundingClientRect(), k = m.getBoundingClientRect(), B = l.valueNode.getBoundingClientRect(), W = v.getBoundingClientRect();
+        if (l.dir !== "rtl") {
+          const V = W.left - k.left, R = B.left - V, ee = P.left - R, te = P.width + ee, Se = Math.max(te, k.width), be = window.innerWidth - z, we = Ze(R, [z, be - Se]);
+          c.style.minWidth = `${te}px`, c.style.left = `${we}px`;
+        } else {
+          const V = k.right - W.right, R = window.innerWidth - B.right - V, ee = window.innerWidth - P.right - R, te = P.width + ee, Se = Math.max(te, k.width), be = window.innerWidth - z, we = Ze(R, [z, be - Se]);
+          c.style.minWidth = `${te}px`, c.style.right = `${we}px`;
+        }
+        const H = x(), O = window.innerHeight - z * 2, L = h.scrollHeight, F = window.getComputedStyle(m), $ = parseInt(F.borderTopWidth, 10), U = parseInt(F.paddingTop, 10), Y = parseInt(F.borderBottomWidth, 10), q = parseInt(F.paddingBottom, 10), K = $ + U + L + q + Y, ue = Math.min(C.offsetHeight * 5, K), le = window.getComputedStyle(h), se = parseInt(le.paddingTop, 10), de = parseInt(le.paddingBottom, 10), X = P.top + P.height / 2 - z, ce = O - X, Q = C.offsetHeight / 2, S = C.offsetTop + Q, y = $ + U + S, D = K - y;
+        if (y <= X) {
+          const V = C === H[H.length - 1].ref.current;
+          c.style.bottom = "0px";
+          const R = m.clientHeight - h.offsetTop - h.offsetHeight, ee = Math.max(
+            ce,
+            Q + // viewport might have padding bottom, include it to avoid a scrollable viewport
+            (V ? de : 0) + R + Y
+          ), te = y + ee;
+          c.style.height = `${te}px`;
+        } else {
+          const V = C === H[0].ref.current;
+          c.style.top = "0px";
+          const ee = Math.max(
+            X,
+            $ + h.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
+            (V ? se : 0) + Q
+          ) + D;
+          c.style.height = `${ee}px`, h.scrollTop = y - X + h.offsetTop;
+        }
+        c.style.margin = `${z}px 0`, c.style.minHeight = `${ue}px`, c.style.maxHeight = `${O}px`, t?.(), requestAnimationFrame(() => u.current = !0);
+      }
+    }, [
+      x,
+      l.trigger,
+      l.valueNode,
+      c,
+      m,
+      h,
+      C,
+      v,
+      l.dir,
+      t
+    ]);
+    Z(() => w(), [w]);
+    const [A, T] = r.useState();
+    Z(() => {
+      m && T(window.getComputedStyle(m).zIndex);
+    }, [m]);
+    const M = r.useCallback(
+      (P) => {
+        P && p.current === !0 && (w(), g?.(), p.current = !1);
+      },
+      [w, g]
+    );
+    return /* @__PURE__ */ d(
+      _o,
+      {
+        scope: e,
+        contentWrapper: c,
+        shouldExpandOnScrollRef: u,
+        onScrollButtonChange: M,
+        children: /* @__PURE__ */ d(
+          "div",
+          {
+            ref: a,
             style: {
               display: "flex",
               flexDirection: "column",
-              outline: "none",
-              ...x.style
+              position: "fixed",
+              zIndex: A
             },
-            onKeyDown: T(x.onKeyDown, (S) => {
-              const y = S.ctrlKey || S.altKey || S.metaKey;
-              if (S.key === "Tab" && S.preventDefault(), !y && S.key.length === 1 && le(S.key), ["ArrowUp", "ArrowDown", "Home", "End"].includes(S.key)) {
-                let I = O().filter((V) => !V.disabled).map((V) => V.ref.current);
-                if (["ArrowUp", "End"].includes(S.key) && (I = I.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(S.key)) {
-                  const V = S.target, R = I.indexOf(V);
-                  I = I.slice(R + 1);
+            children: /* @__PURE__ */ d(
+              N.div,
+              {
+                ...o,
+                ref: b,
+                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%",
+                  ...o.style
                 }
-                setTimeout(() => U(I)), S.preventDefault();
               }
-            })
-          })
-        })
-      })
-    })
-  });
-});
-Ct.displayName = Ro;
-const No = "SelectItemAlignedPosition", xt = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    onPlaced: t,
-    ...o
-  } = n, l = j(ne, e), i = J(ne, e), [c, a] = r.useState(null), [g, f] = r.useState(null), b = _(s, (P) => f(P)), m = he(e), u = r.useRef(!1), p = r.useRef(!0), {
-    viewport: v,
-    selectedItem: C,
-    selectedItemText: x,
-    focusSelectedItem: h
-  } = i, w = r.useCallback(() => {
-    if (l.trigger && l.valueNode && c && g && v && C && x) {
-      const P = l.trigger.getBoundingClientRect(), L = g.getBoundingClientRect(), B = l.valueNode.getBoundingClientRect(), W = x.getBoundingClientRect();
-      if (l.dir !== "rtl") {
-        const V = W.left - L.left, R = B.left - V, ee = P.left - R, te = P.width + ee, Se = Math.max(te, L.width), be = window.innerWidth - z, we = Ze(R, [z, be - Se]);
-        c.style.minWidth = `${te}px`, c.style.left = `${we}px`;
-      } else {
-        const V = L.right - W.right, R = window.innerWidth - B.right - V, ee = window.innerWidth - P.right - R, te = P.width + ee, Se = Math.max(te, L.width), be = window.innerWidth - z, we = Ze(R, [z, be - Se]);
-        c.style.minWidth = `${te}px`, c.style.right = `${we}px`;
-      }
-      const H = m(), O = window.innerHeight - z * 2, k = v.scrollHeight, F = window.getComputedStyle(g), $ = parseInt(F.borderTopWidth, 10), U = parseInt(F.paddingTop, 10), Y = parseInt(F.borderBottomWidth, 10), q = parseInt(F.paddingBottom, 10), K = $ + U + k + q + Y, ue = Math.min(C.offsetHeight * 5, K), le = window.getComputedStyle(v), se = parseInt(le.paddingTop, 10), de = parseInt(le.paddingBottom, 10), X = P.top + P.height / 2 - z, ce = O - X, Q = C.offsetHeight / 2, S = C.offsetTop + Q, y = $ + U + S, D = K - y;
-      if (y <= X) {
-        const V = C === H[H.length - 1].ref.current;
-        c.style.bottom = `${0}px`;
-        const R = g.clientHeight - v.offsetTop - v.offsetHeight, ee = Math.max(ce, Q + (V ? de : 0) + R + Y), te = y + ee;
-        c.style.height = `${te}px`;
-      } else {
-        const V = C === H[0].ref.current;
-        c.style.top = `${0}px`;
-        const ee = Math.max(X, $ + v.offsetTop + (V ? se : 0) + Q) + D;
-        c.style.height = `${ee}px`, v.scrollTop = y - X + v.offsetTop;
+            )
+          }
+        )
       }
-      c.style.margin = `${z}px 0`, c.style.minHeight = `${ue}px`, c.style.maxHeight = `${O}px`, t?.(), requestAnimationFrame(() => u.current = !0);
-    }
-  }, [m, l.trigger, l.valueNode, c, g, v, C, x, l.dir, t]);
-  Z(() => w(), [w]);
-  const [A, E] = r.useState();
-  Z(() => {
-    g && E(window.getComputedStyle(g).zIndex);
-  }, [g]);
-  const M = r.useCallback((P) => {
-    P && p.current === !0 && (w(), h?.(), p.current = !1);
-  }, [w, h]);
-  return /* @__PURE__ */ d(_o, {
-    scope: e,
-    contentWrapper: c,
-    shouldExpandOnScrollRef: u,
-    onScrollButtonChange: M,
-    children: /* @__PURE__ */ d("div", {
-      ref: a,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        position: "fixed",
-        zIndex: A
-      },
-      children: /* @__PURE__ */ d(N.div, {
-        ...o,
-        ref: b,
+    );
+  }
+);
+Ct.displayName = No;
+const Ao = "SelectPopperPosition", Te = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, align: t = "start", collisionPadding: o = z, ...l } = n, i = ve(e);
+    return /* @__PURE__ */ d(
+      re.Content,
+      {
+        ...i,
+        ...l,
+        ref: s,
+        align: t,
+        collisionPadding: o,
         style: {
+          // Ensure border-box for floating-ui calculations
           boxSizing: "border-box",
-          maxHeight: "100%",
-          ...o.style
+          ...l.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)"
         }
-      })
-    })
-  });
-});
-xt.displayName = No;
-const Ao = "SelectPopperPosition", Te = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    align: t = "start",
-    collisionPadding: o = z,
-    ...l
-  } = n, i = ve(e);
-  return /* @__PURE__ */ d(re.Content, {
-    ...i,
-    ...l,
-    ref: s,
-    align: t,
-    collisionPadding: o,
-    style: {
-      boxSizing: "border-box",
-      ...l.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)"
-    }
-  });
-});
-Te.displayName = Ao;
-const [_o, He] = ae(ne, {}), Ee = "SelectViewport", $e = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    ...t
-  } = n, o = J(Ee, e), l = He(Ee, e), i = _(s, o.onViewportChange), c = r.useRef(0);
-  return /* @__PURE__ */ Ae(_e, {
-    children: [/* @__PURE__ */ d("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}"
       }
-    }), /* @__PURE__ */ d(xe.Slot, {
-      scope: e,
-      children: /* @__PURE__ */ d(N.div, {
-        "data-radix-select-viewport": "",
-        role: "presentation",
-        ...t,
-        ref: i,
-        style: {
-          position: "relative",
-          flex: 1,
-          overflow: "auto",
-          ...t.style
-        },
-        onScroll: T(t.onScroll, (a) => {
-          const g = a.currentTarget, {
-            contentWrapper: f,
-            shouldExpandOnScrollRef: b
-          } = l;
-          if (b?.current && f) {
-            const m = Math.abs(c.current - g.scrollTop);
-            if (m > 0) {
-              const u = window.innerHeight - z * 2, p = parseFloat(f.style.minHeight), v = parseFloat(f.style.height), C = Math.max(p, v);
-              if (C < u) {
-                const x = C + m, h = Math.min(u, x), w = x - h;
-                f.style.height = `${h}px`, f.style.bottom === "0px" && (g.scrollTop = w > 0 ? w : 0, f.style.justifyContent = "flex-end");
+    );
+  }
+);
+Te.displayName = Ao;
+const [_o, He] = ae(
+  ne,
+  {}
+), Ee = "SelectViewport", $e = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, ...t } = n, o = J(Ee, e), l = He(Ee, e), i = _(s, o.onViewportChange), c = r.useRef(0);
+    return /* @__PURE__ */ Ne(Ae, { children: [
+      /* @__PURE__ */ d(
+        "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}"
+          }
+        }
+      ),
+      /* @__PURE__ */ d(Ce.Slot, { scope: e, children: /* @__PURE__ */ d(
+        N.div,
+        {
+          "data-radix-select-viewport": "",
+          role: "presentation",
+          ...t,
+          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,
+            overflow: "auto",
+            ...t.style
+          },
+          onScroll: E(t.onScroll, (a) => {
+            const m = a.currentTarget, { contentWrapper: f, shouldExpandOnScrollRef: b } = l;
+            if (b?.current && f) {
+              const x = Math.abs(c.current - m.scrollTop);
+              if (x > 0) {
+                const u = window.innerHeight - z * 2, p = parseFloat(f.style.minHeight), h = parseFloat(f.style.height), C = Math.max(p, h);
+                if (C < u) {
+                  const v = C + x, g = Math.min(u, v), w = v - g;
+                  f.style.height = `${g}px`, f.style.bottom === "0px" && (m.scrollTop = w > 0 ? w : 0, f.style.justifyContent = "flex-end");
+                }
               }
             }
-          }
-          c.current = g.scrollTop;
-        })
-      })
-    })]
-  });
-});
+            c.current = m.scrollTop;
+          })
+        }
+      ) })
+    ] });
+  }
+);
 $e.displayName = Ee;
-const vt = "SelectGroup", [Mo, Oo] = ae(vt), Ue = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    ...t
-  } = n, o = oe();
-  return /* @__PURE__ */ d(Mo, {
-    scope: e,
-    id: o,
-    children: /* @__PURE__ */ d(N.div, {
-      role: "group",
-      "aria-labelledby": o,
-      ...t,
-      ref: s
-    })
-  });
-});
+const vt = "SelectGroup", [Mo, Oo] = ae(vt), Ue = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, ...t } = n, o = oe();
+    return /* @__PURE__ */ d(Mo, { scope: e, id: o, children: /* @__PURE__ */ d(N.div, { role: "group", "aria-labelledby": o, ...t, ref: s }) });
+  }
+);
 Ue.displayName = vt;
-const St = "SelectLabel", Ke = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    ...t
-  } = n, o = Oo(St, e);
-  return /* @__PURE__ */ d(N.div, {
-    id: o.id,
-    ...t,
-    ref: s
-  });
-});
+const St = "SelectLabel", Ke = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, ...t } = n, o = Oo(St, e);
+    return /* @__PURE__ */ d(N.div, { id: o.id, ...t, ref: s });
+  }
+);
 Ke.displayName = St;
-const ge = "SelectItem", [Do, bt] = ae(ge), We = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    value: t,
-    disabled: o = !1,
-    textValue: l,
-    ...i
-  } = n, c = j(ge, e), a = J(ge, e), g = typeof t == "string" ? Array.isArray(c.value) ? c.value.includes(t) : c.value === t : t.every((h) => c.value?.includes(h)), f = Array.isArray(c.value) && Array.isArray(t) && t.some((h) => c.value?.includes(h)), [b, m] = r.useState(l ?? ""), [u, p] = r.useState(!1), v = _(s, (h) => a.itemRefCallback?.(h, t, o)), C = oe(), x = () => {
-    if (!o) {
-      let h = c.multi && typeof t == "string" ? [t] : t;
-      f && !g ? c.onValueChange(h) : Array.isArray(c.value) && (h = Et(t, c.value)), c.onValueChange(h), c.multi || c.onOpenChange(!1);
-    }
-  };
-  if (!c.multi && Array.isArray(t))
-    throw new Error("You can only pass an array of values in multi selects");
-  return /* @__PURE__ */ d(Do, {
-    scope: e,
-    value: t,
-    disabled: o,
-    textId: C,
-    isSelected: g,
-    isIntermediate: f,
-    onItemTextChange: r.useCallback((h) => {
-      m((w) => w || (h?.textContent ?? "").trim());
-    }, []),
-    children: /* @__PURE__ */ d(xe.ItemSlot, {
-      scope: e,
-      value: t,
-      disabled: o,
-      textValue: b,
-      children: /* @__PURE__ */ d(N.div, {
-        role: "option",
-        "aria-labelledby": C,
-        "data-highlighted": u ? "" : void 0,
-        "aria-selected": c.multi ? void 0 : g && u,
-        "aria-checked": c.multi ? g : void 0,
-        "data-state": g ? "checked" : "unchecked",
-        "aria-disabled": o || void 0,
-        "data-disabled": o ? "" : void 0,
-        tabIndex: o ? void 0 : -1,
-        ...i,
-        ref: v,
-        onFocus: T(i.onFocus, () => p(!0)),
-        onBlur: T(i.onBlur, () => p(!1)),
-        onPointerUp: T(i.onPointerUp, x),
-        onPointerMove: T(i.onPointerMove, (h) => {
-          o ? a.onItemLeave?.() : h.currentTarget.focus({
-            preventScroll: !0
-          });
-        }),
-        onPointerLeave: T(i.onPointerLeave, (h) => {
-          h.currentTarget === document.activeElement && a.onItemLeave?.();
-        }),
-        onKeyDown: T(i.onKeyDown, (h) => {
-          a.searchRef?.current !== "" && h.key === " " || (bo.includes(h.key) && x(), h.key === " " && h.preventDefault());
-        })
-      })
-    })
-  });
-});
-We.displayName = ge;
-const fe = "SelectItemText", ze = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    className: t,
-    style: o,
-    ...l
-  } = n, i = j(fe, e), c = J(fe, e), a = bt(fe, e), g = Eo(fe, e), [f, b] = r.useState(null), m = _(s, (x) => b(x), a.onItemTextChange, (x) => c.itemTextRefCallback?.(x, a.value, a.disabled)), u = f?.textContent, p = r.useMemo(() => /* @__PURE__ */ d("option", {
-    value: a.value,
-    disabled: a.disabled,
-    children: u
-  }, Array.isArray(a.value) ? a.value.join(";") : a.value), [a.disabled, a.value, u]), {
-    onNativeOptionAdd: v,
-    onNativeOptionRemove: C
-  } = g;
-  return Z(() => (v(p), () => C(p)), [v, C, p]), /* @__PURE__ */ Ae(_e, {
-    children: [/* @__PURE__ */ d(N.span, {
-      id: a.textId,
-      ...l,
-      ref: m
-    }), a.isSelected && i.valueNode && !i.valueNodeHasChildren ? Ne.createPortal(l.children, i.valueNode) : null]
-  });
-});
+const xe = "SelectItem", [Do, bt] = ae(xe), We = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, value: t, disabled: o = !1, textValue: l, ...i } = n, c = j(xe, e), a = J(xe, e), m = typeof t == "string" ? Array.isArray(c.value) ? c.value.includes(t) : c.value === t : t.every((g) => c.value?.includes(g)), f = Array.isArray(c.value) && Array.isArray(t) && t.some((g) => c.value?.includes(g)), [b, x] = r.useState(l ?? ""), [u, p] = r.useState(!1), h = _(
+      s,
+      (g) => a.itemRefCallback?.(g, t, o)
+    ), C = oe(), v = () => {
+      if (!o) {
+        let g = c.multi && typeof t == "string" ? [t] : t;
+        f && !m ? c.onValueChange(g) : Array.isArray(c.value) && (g = Et(t, c.value)), c.onValueChange(g), c.multi || c.onOpenChange(!1);
+      }
+    };
+    if (!c.multi && Array.isArray(t))
+      throw new Error("You can only pass an array of values in multi selects");
+    return /* @__PURE__ */ d(
+      Do,
+      {
+        scope: e,
+        value: t,
+        disabled: o,
+        textId: C,
+        isSelected: m,
+        isIntermediate: f,
+        onItemTextChange: r.useCallback((g) => {
+          x((w) => w || (g?.textContent ?? "").trim());
+        }, []),
+        children: /* @__PURE__ */ d(Ce.ItemSlot, { scope: e, value: t, disabled: o, textValue: b, children: /* @__PURE__ */ d(
+          N.div,
+          {
+            role: "option",
+            "aria-labelledby": C,
+            "data-highlighted": u ? "" : void 0,
+            "aria-selected": c.multi ? void 0 : m && u,
+            "aria-checked": c.multi ? m : void 0,
+            "data-state": m ? "checked" : "unchecked",
+            "aria-disabled": o || void 0,
+            "data-disabled": o ? "" : void 0,
+            tabIndex: o ? void 0 : -1,
+            ...i,
+            ref: h,
+            onFocus: E(i.onFocus, () => p(!0)),
+            onBlur: E(i.onBlur, () => p(!1)),
+            onPointerUp: E(i.onPointerUp, v),
+            onPointerMove: E(i.onPointerMove, (g) => {
+              o ? a.onItemLeave?.() : g.currentTarget.focus({ preventScroll: !0 });
+            }),
+            onPointerLeave: E(i.onPointerLeave, (g) => {
+              g.currentTarget === document.activeElement && a.onItemLeave?.();
+            }),
+            onKeyDown: E(i.onKeyDown, (g) => {
+              a.searchRef?.current !== "" && g.key === " " || (bo.includes(g.key) && v(), g.key === " " && g.preventDefault());
+            })
+          }
+        ) })
+      }
+    );
+  }
+);
+We.displayName = xe;
+const fe = "SelectItemText", ze = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, className: t, style: o, ...l } = n, i = j(fe, e), c = J(fe, e), a = bt(fe, e), m = Eo(fe, e), [f, b] = r.useState(null), x = _(
+      s,
+      (v) => b(v),
+      a.onItemTextChange,
+      (v) => c.itemTextRefCallback?.(v, a.value, a.disabled)
+    ), u = f?.textContent, p = r.useMemo(
+      () => /* @__PURE__ */ d(
+        "option",
+        {
+          value: a.value,
+          disabled: a.disabled,
+          children: u
+        },
+        Array.isArray(a.value) ? a.value.join(";") : a.value
+      ),
+      [a.disabled, a.value, u]
+    ), { onNativeOptionAdd: h, onNativeOptionRemove: C } = m;
+    return Z(() => (h(p), () => C(p)), [h, C, p]), /* @__PURE__ */ Ne(Ae, { children: [
+      /* @__PURE__ */ d(N.span, { id: a.textId, ...l, ref: x }),
+      a.isSelected && i.valueNode && !i.valueNodeHasChildren ? _e.createPortal(l.children, i.valueNode) : null
+    ] });
+  }
+);
 ze.displayName = fe;
-const wt = "SelectItemIndicator", Ge = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    ...t
-  } = n, o = bt(wt, e);
-  return typeof n.children == "function" ? /* @__PURE__ */ d(N.span, {
-    "aria-hidden": !0,
-    ...t,
-    ref: s,
-    children: n.children({
-      isSelected: o.isSelected,
-      isIntermediate: o.isIntermediate
-    })
-  }) : o.isSelected ? /* @__PURE__ */ d(N.span, {
-    "aria-hidden": !0,
-    ...t,
-    ref: s
-  }) : null;
-});
+const wt = "SelectItemIndicator", Ge = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, children: t, ...o } = n, l = bt(wt, e);
+    return typeof t == "function" ? /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...o, ref: s, children: t({
+      isSelected: l.isSelected,
+      isIntermediate: l.isIntermediate
+    }) }) : l.isSelected ? /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...o, ref: s, children: t }) : null;
+  }
+);
 Ge.displayName = wt;
-const Pe = "SelectScrollUpButton", je = r.forwardRef((n, s) => {
-  const e = J(Pe, n.__scopeSelect), t = He(Pe, n.__scopeSelect), [o, l] = r.useState(!1), i = _(s, t.onScrollButtonChange);
-  return Z(() => {
-    if (e.viewport && e.isPositioned) {
-      const c = e.viewport, a = () => {
-        const g = c.scrollTop > 0;
-        l(g);
-      };
-      return a(), c.addEventListener("scroll", a), () => c.removeEventListener("scroll", a);
-    }
-  }, [e.viewport, e.isPositioned]), o ? /* @__PURE__ */ d(yt, {
-    ...n,
-    ref: i,
-    onAutoScroll: () => {
-      const {
-        viewport: c,
-        selectedItem: a
-      } = e;
-      c && a && (c.scrollTop -= a.offsetHeight);
-    }
-  }) : null;
-});
+const Pe = "SelectScrollUpButton", je = r.forwardRef(
+  (n, s) => {
+    const e = J(Pe, n.__scopeSelect), t = He(Pe, n.__scopeSelect), [o, l] = r.useState(!1), i = _(s, t.onScrollButtonChange);
+    return Z(() => {
+      if (e.viewport && e.isPositioned) {
+        const c = e.viewport, a = () => {
+          const m = c.scrollTop > 0;
+          l(m);
+        };
+        return a(), c.addEventListener("scroll", a), () => c.removeEventListener("scroll", a);
+      }
+    }, [e.viewport, e.isPositioned]), o ? /* @__PURE__ */ d(
+      yt,
+      {
+        ...n,
+        ref: i,
+        onAutoScroll: () => {
+          const { viewport: c, selectedItem: a } = e;
+          c && a && (c.scrollTop -= a.offsetHeight);
+        }
+      }
+    ) : null;
+  }
+);
 je.displayName = Pe;
-const Ve = "SelectScrollDownButton", Ye = r.forwardRef((n, s) => {
-  const e = J(Ve, n.__scopeSelect), t = He(Ve, n.__scopeSelect), [o, l] = r.useState(!1), i = _(s, t.onScrollButtonChange);
-  return Z(() => {
-    if (e.viewport && e.isPositioned) {
-      const c = e.viewport, a = () => {
-        const g = c.scrollHeight - c.clientHeight, f = Math.ceil(c.scrollTop) < g;
-        l(f);
-      };
-      return a(), c.addEventListener("scroll", a), () => c.removeEventListener("scroll", a);
-    }
-  }, [e.viewport, e.isPositioned]), o ? /* @__PURE__ */ d(yt, {
-    ...n,
-    ref: i,
-    onAutoScroll: () => {
-      const {
-        viewport: c,
-        selectedItem: a
-      } = e;
-      c && a && (c.scrollTop += a.offsetHeight);
-    }
-  }) : null;
-});
+const Ve = "SelectScrollDownButton", Ye = r.forwardRef(
+  (n, s) => {
+    const e = J(Ve, n.__scopeSelect), t = He(Ve, n.__scopeSelect), [o, l] = r.useState(!1), i = _(s, t.onScrollButtonChange);
+    return Z(() => {
+      if (e.viewport && e.isPositioned) {
+        const c = e.viewport, a = () => {
+          const m = c.scrollHeight - c.clientHeight, f = Math.ceil(c.scrollTop) < m;
+          l(f);
+        };
+        return a(), c.addEventListener("scroll", a), () => c.removeEventListener("scroll", a);
+      }
+    }, [e.viewport, e.isPositioned]), o ? /* @__PURE__ */ d(
+      yt,
+      {
+        ...n,
+        ref: i,
+        onAutoScroll: () => {
+          const { viewport: c, selectedItem: a } = e;
+          c && a && (c.scrollTop += a.offsetHeight);
+        }
+      }
+    ) : null;
+  }
+);
 Ye.displayName = Ve;
-const yt = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    onAutoScroll: t,
-    ...o
-  } = n, l = J("SelectScrollButton", e), i = r.useRef(null), c = he(e), a = r.useCallback(() => {
-    i.current !== null && (window.clearInterval(i.current), i.current = null);
-  }, []);
-  return r.useEffect(() => () => a(), [a]), Z(() => {
-    c().find((f) => f.ref.current === document.activeElement)?.ref.current?.scrollIntoView({
-      block: "nearest"
-    });
-  }, [c]), /* @__PURE__ */ d(N.div, {
-    "aria-hidden": !0,
-    ...o,
-    ref: s,
-    style: {
-      flexShrink: 0,
-      ...o.style
-    },
-    onPointerMove: T(o.onPointerMove, () => {
-      l.onItemLeave?.(), i.current === null && (i.current = window.setInterval(t, 50));
-    }),
-    onPointerLeave: T(o.onPointerLeave, () => {
-      a();
-    })
-  });
-}), Lo = "SelectSeparator", qe = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    ...t
-  } = n;
-  return /* @__PURE__ */ d(N.div, {
-    "aria-hidden": !0,
-    ...t,
-    ref: s
-  });
-});
-qe.displayName = Lo;
-const Re = "SelectArrow", Xe = r.forwardRef((n, s) => {
-  const {
-    __scopeSelect: e,
-    ...t
-  } = n, o = ve(e), l = j(Re, e), i = J(Re, e);
-  return l.open && i.position === "popper" ? /* @__PURE__ */ d(re.Arrow, {
-    ...o,
-    ...t,
-    ref: s
-  }) : null;
-});
+const yt = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, onAutoScroll: t, ...o } = n, l = J("SelectScrollButton", e), i = r.useRef(null), c = ge(e), a = r.useCallback(() => {
+      i.current !== null && (window.clearInterval(i.current), i.current = null);
+    }, []);
+    return r.useEffect(() => () => a(), [a]), Z(() => {
+      c().find((f) => f.ref.current === document.activeElement)?.ref.current?.scrollIntoView({ block: "nearest" });
+    }, [c]), /* @__PURE__ */ d(
+      N.div,
+      {
+        "aria-hidden": !0,
+        ...o,
+        ref: s,
+        style: { flexShrink: 0, ...o.style },
+        onPointerMove: E(o.onPointerMove, () => {
+          l.onItemLeave?.(), i.current === null && (i.current = window.setInterval(t, 50));
+        }),
+        onPointerLeave: E(o.onPointerLeave, () => {
+          a();
+        })
+      }
+    );
+  }
+), ko = "SelectSeparator", qe = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, ...t } = n;
+    return /* @__PURE__ */ d(N.div, { "aria-hidden": !0, ...t, ref: s });
+  }
+);
+qe.displayName = ko;
+const Re = "SelectArrow", Xe = r.forwardRef(
+  (n, s) => {
+    const { __scopeSelect: e, ...t } = n, o = ve(e), l = j(Re, e), i = J(Re, e);
+    return l.open && i.position === "popper" ? /* @__PURE__ */ d(re.Arrow, { ...o, ...t, ref: s }) : null;
+  }
+);
 Xe.displayName = Re;
-const ko = "BubbleSelect", Fo = r.forwardRef((n, s) => {
-  const {
-    value: e,
-    ...t
-  } = n, o = r.useRef(null), l = _(s, o), i = _t(e), c = j(ko, void 0);
-  r.useEffect(() => {
-    const g = o.current, f = window.HTMLSelectElement.prototype, m = Object.getOwnPropertyDescriptor(f, "value").set;
-    if (i !== e && m) {
-      const u = new Event("change", {
-        bubbles: !0
-      });
-      m.call(g, e), g.dispatchEvent(u);
-    }
-  }, [i, e]);
-  let a = e;
-  return c.multi && !Array.isArray(e) && (a = []), /* @__PURE__ */ d(Mt, {
-    asChild: !0,
-    children: /* @__PURE__ */ d("select", {
-      ...t,
-      multiple: c.multi ? !0 : void 0,
-      ref: l,
-      defaultValue: a
-    })
-  });
-});
+const Lo = "BubbleSelect", Fo = r.forwardRef(
+  (n, s) => {
+    const { value: e, ...t } = n, o = r.useRef(null), l = _(s, o), i = _t(e), c = j(Lo, void 0);
+    r.useEffect(() => {
+      const m = o.current, f = window.HTMLSelectElement.prototype, x = Object.getOwnPropertyDescriptor(f, "value").set;
+      if (i !== e && x) {
+        const u = new Event("change", { bubbles: !0 });
+        x.call(m, e), m.dispatchEvent(u);
+      }
+    }, [i, e]);
+    let a = e;
+    return c.multi && !Array.isArray(e) && (a = []), /* @__PURE__ */ d(Mt, { asChild: !0, children: /* @__PURE__ */ d(
+      "select",
+      {
+        ...t,
+        multiple: c.multi ? !0 : void 0,
+        ref: l,
+        defaultValue: a
+      }
+    ) });
+  }
+);
 Fo.displayName = "BubbleSelect";
 function It(n) {
-  const s = At(n), e = r.useRef(""), t = r.useRef(0), o = r.useCallback((i) => {
-    const c = e.current + i;
-    s(c), function a(g) {
-      e.current = g, window.clearTimeout(t.current), g !== "" && (t.current = window.setTimeout(() => a(""), 1e3));
-    }(c);
-  }, [s]), l = r.useCallback(() => {
+  const s = At(n), e = r.useRef(""), t = r.useRef(0), o = r.useCallback(
+    (i) => {
+      const c = e.current + i;
+      s(c), function a(m) {
+        e.current = m, window.clearTimeout(t.current), m !== "" && (t.current = window.setTimeout(() => a(""), 1e3));
+      }(c);
+    },
+    [s]
+  ), l = r.useCallback(() => {
     e.current = "", window.clearTimeout(t.current);
   }, []);
   return r.useEffect(() => () => window.clearTimeout(t.current), []), [e, o, l];
 }
 function Tt(n, s, e) {
-  const o = s.length > 1 && Array.from(s).every((g) => g === s[0]) ? s[0] : s, l = e ? n.indexOf(e) : -1;
+  const o = s.length > 1 && Array.from(s).every((m) => m === s[0]) ? s[0] : s, l = e ? n.indexOf(e) : -1;
   let i = Bo(n, Math.max(l, 0));
-  o.length === 1 && (i = i.filter((g) => g !== e));
-  const a = i.find((g) => g.textValue.toLowerCase().startsWith(o.toLowerCase()));
+  o.length === 1 && (i = i.filter((m) => m !== e));
+  const a = i.find((m) => m.textValue.toLowerCase().startsWith(o.toLowerCase()));
   return a !== e ? a : void 0;
 }
 function Bo(n, s) {
@@ -1393,41 +1290,41 @@ const Et = (n, s = []) => {
     return n.reduce((t, o) => Et(o, t), s);
   const e = s.indexOf(n);
   return e === -1 ? [...s, n] : [...s.slice(0, e), ...s.slice(e + 1)];
-}, Ho = Oe, $o = De, Uo = Le, Ko = ke, Wo = Fe, zo = Be, Go = $e, jo = Ue, Yo = Ke, qo = We, Xo = ze, Zo = Ge, Jo = je, Qo = Ye, en = qe, tn = Xe, En = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Ho = Oe, $o = De, Uo = ke, Ko = Le, Wo = Fe, zo = Be, Go = $e, jo = Ue, Yo = Ke, qo = We, Xo = ze, Zo = Ge, Jo = je, Qo = Ye, en = qe, tn = Xe, En = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  createSelectScope: yo,
+  Arrow: tn,
+  Content: zo,
+  Group: jo,
+  Icon: Ko,
+  Item: qo,
+  ItemIndicator: Zo,
+  ItemText: Xo,
+  Label: Yo,
+  Portal: Wo,
+  Root: Ho,
+  ScrollDownButton: Qo,
+  ScrollUpButton: Jo,
   Select: Oe,
-  SelectTrigger: De,
-  SelectValue: Le,
-  SelectIcon: ke,
-  SelectPortal: Fe,
+  SelectArrow: Xe,
   SelectContent: Be,
-  SelectViewport: $e,
   SelectGroup: Ue,
-  SelectLabel: Ke,
+  SelectIcon: Le,
   SelectItem: We,
-  SelectItemText: ze,
   SelectItemIndicator: Ge,
-  SelectScrollUpButton: je,
+  SelectItemText: ze,
+  SelectLabel: Ke,
+  SelectPortal: Fe,
   SelectScrollDownButton: Ye,
+  SelectScrollUpButton: je,
   SelectSeparator: qe,
-  SelectArrow: Xe,
-  Root: Ho,
+  SelectTrigger: De,
+  SelectValue: ke,
+  SelectViewport: $e,
+  Separator: en,
   Trigger: $o,
   Value: Uo,
-  Icon: Ko,
-  Portal: Wo,
-  Content: zo,
   Viewport: Go,
-  Group: jo,
-  Label: Yo,
-  Item: qo,
-  ItemText: Xo,
-  ItemIndicator: Zo,
-  ScrollUpButton: Jo,
-  ScrollDownButton: Qo,
-  Separator: en,
-  Arrow: tn
+  createSelectScope: yo
 }, Symbol.toStringTag, { value: "Module" }));
 export {
   Tn as Combobox,