@wrdagency/blockout 0.1.9 → 1.0.0

package/dist/components/controls/select-control/select.js

@@ -0,0 +1,1186 @@
+import { jsx as V, jsxs as re, Fragment as Te } from "react/jsx-runtime";
+import { cn as Dt } from "../../../utils/css.js";
+import '../../../assets/styles.css';import '../../../assets/style6.css';import '../../../assets/style5.css';import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/style.css';import '../../../assets/style9.css';/* empty css                      */
+import { useMemo as Se, useState as ie, useRef as ne, useEffect as le, useCallback as $e, useContext as Oe, createContext as Ve, startTransition as Lt } from "react";
+/* empty css                      */
+/* empty css                      */
+import "../../../primitives/popover/index.js";
+/* empty css                      */
+import { ScrollArea as Kt } from "../../../primitives/scroll-area/index.js";
+import "../../../primitives/symbol/index.js";
+/* empty css                      */
+/* empty css                      */
+/* empty css                      */
+/* empty css                       */
+import { normalizeOption as Nt } from "../../../types/options.js";
+import { s as Tt } from "../../../MagnifyingGlass.es-CLstwG_v.js";
+import { m as Mt } from "../../../style-Bp4uISf6.js";
+import { e as Rt, C as Ft } from "../../../P7GR5CS5-Btbh4-Mw.js";
+import { c as Z, _ as ee, i as ce, k as R, m as C, r as Ue, o as te, p as oe, P as je, Q as se, S as D, R as j, T as Ie, e as T, b as G, G as qe, j as pe, l as Ce, a0 as We, B as ze, q as xe, s as Bt, U as Ge, V as Qe, W as Ht, d as $t, u as Ut, ab as Je, I as jt, a1 as qt, w as Wt, ac as zt, ad as Gt, ae as Qt, x as Me, af as we, aa as Jt, A as Xt, a as Pe, a4 as Yt, $ as Zt, K as eo, h as to } from "../../../LMDWO4NN-DyBcLLfK.js";
+import { c as Xe, a as Ye } from "../../../O2PQ2652-CRn371N3.js";
+import { c as Ze, d as et, b as tt } from "../../../4CMBR7SL-BkCeHgv2.js";
+import { m as ot, o as oo, t as nt, c as rt, s as Q, e as J, g as lt, b as st, d as ve, u as it, p as no } from "../../../YV4JVR4I-DOlaib2E.js";
+import { a as at, C as ro, b as ut, c as lo, d as so, e as ct, u as io, f as ao } from "../../../S43UC3DV-C5JWPIhF.js";
+import { t as dt } from "../../../7PRQYBBV-91wrWGjk.js";
+import { u as mt, a as _e, S as ft, b as uo, c as co, d as mo, e as Re } from "../../../DG5U6ZEL-u5QgMA8f.js";
+import { u as fo } from "../../../MTZPJQMC-DMklE0XE.js";
+import { u as vt } from "../../../T7VMP3TM-DRNGQJpZ.js";
+import { u as vo, a as po } from "../../../WMYDSCNQ-YGSwAHQE.js";
+import { i as pt } from "../../../KFH4SEIX-BuapSU1b.js";
+import { u as bt } from "../../../5JTVDSTH-BiHTUReD.js";
+import { c as bo, u as So } from "../../../G7GW6PWC-FbNigUHQ.js";
+import { h as Ee } from "../../../PFRGBC2K-DobANx7W.js";
+import { u as St } from "../../../UQQRIHDV-eF2M9Cz2.js";
+import { u as ht } from "../../../6VRAQV3D-DIdyGLyW.js";
+var ho = "span", go = {
+  top: "4,10 8,6 12,10",
+  right: "6,4 10,8 6,12",
+  bottom: "4,6 8,10 12,6",
+  left: "10,4 6,8 10,12"
+}, gt = Z(function(o) {
+  var n = o, { store: e, placement: r } = n, i = ee(n, ["store", "placement"]);
+  const a = fo();
+  e = e || a, ce(
+    e,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosureArrow must be wrapped in a PopoverDisclosure component."
+  );
+  const I = e.useState((s) => r || s.placement).split("-")[0], v = go[I], u = Se(
+    () => /* @__PURE__ */ V(
+      "svg",
+      {
+        display: "block",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        viewBox: "0 0 16 16",
+        height: "1em",
+        width: "1em",
+        children: /* @__PURE__ */ V("polyline", { points: v })
+      }
+    ),
+    [v]
+  );
+  return i = R(C({
+    children: u,
+    "aria-hidden": !0
+  }, i), {
+    style: C({
+      width: "1em",
+      height: "1em",
+      pointerEvents: "none"
+    }, i.style)
+  }), Ue(i);
+});
+te(
+  function(o) {
+    const n = gt(o);
+    return oe(ho, n);
+  }
+);
+function Co(t = {}) {
+  var o = t, {
+    combobox: n
+  } = o, e = je(o, [
+    "combobox"
+  ]);
+  const r = ot(
+    e.store,
+    oo(n, [
+      "value",
+      "items",
+      "renderedItems",
+      "baseElement",
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    ])
+  );
+  nt(e, r);
+  const i = r.getState(), a = Ze(se(j({}, e), {
+    store: r,
+    virtualFocus: D(
+      e.virtualFocus,
+      i.virtualFocus,
+      !0
+    ),
+    includesBaseElement: D(
+      e.includesBaseElement,
+      i.includesBaseElement,
+      !1
+    ),
+    activeId: D(
+      e.activeId,
+      i.activeId,
+      e.defaultActiveId,
+      null
+    ),
+    orientation: D(
+      e.orientation,
+      i.orientation,
+      "vertical"
+    )
+  })), O = Xe(se(j({}, e), {
+    store: r,
+    placement: D(
+      e.placement,
+      i.placement,
+      "bottom-start"
+    )
+  })), I = new String(""), v = se(j(j({}, a.getState()), O.getState()), {
+    value: D(
+      e.value,
+      i.value,
+      e.defaultValue,
+      I
+    ),
+    setValueOnMove: D(
+      e.setValueOnMove,
+      i.setValueOnMove,
+      !1
+    ),
+    labelElement: D(i.labelElement, null),
+    selectElement: D(i.selectElement, null),
+    listElement: D(i.listElement, null)
+  }), u = rt(v, a, O, r);
+  return Q(
+    u,
+    () => J(u, ["value", "items"], (s) => {
+      if (s.value !== I || !s.items.length) return;
+      const b = s.items.find(
+        (w) => !w.disabled && w.value != null
+      );
+      (b == null ? void 0 : b.value) != null && u.setState("value", b.value);
+    })
+  ), Q(
+    u,
+    () => J(u, ["mounted"], (s) => {
+      s.mounted || u.setState("activeId", v.activeId);
+    })
+  ), Q(
+    u,
+    () => J(u, ["mounted", "items", "value"], (s) => {
+      if (n || s.mounted) return;
+      const b = dt(s.value), w = b[b.length - 1];
+      if (w == null) return;
+      const c = s.items.find(
+        (p) => !p.disabled && p.value === w
+      );
+      c && u.setState("activeId", c.id);
+    })
+  ), Q(
+    u,
+    () => lt(u, ["setValueOnMove", "moves"], (s) => {
+      const { mounted: b, value: w, activeId: c } = u.getState();
+      if (!s.setValueOnMove && b || Array.isArray(w) || !s.moves || !c) return;
+      const p = a.item(c);
+      !p || p.disabled || p.value == null || u.setState("value", p.value);
+    })
+  ), se(j(j(j({}, a), O), u), {
+    combobox: n,
+    setValue: (s) => u.setState("value", s),
+    setLabelElement: (s) => u.setState("labelElement", s),
+    setSelectElement: (s) => u.setState("selectElement", s),
+    setListElement: (s) => u.setState("listElement", s)
+  });
+}
+function xo(t) {
+  const o = at();
+  return t = R(C({}, t), {
+    combobox: t.combobox !== void 0 ? t.combobox : o
+  }), et(t);
+}
+function yo(t, o, n) {
+  return Ie(o, [n.combobox]), ve(t, n, "value", "setValue"), ve(t, n, "setValueOnMove"), Object.assign(
+    Ye(
+      tt(t, o, n),
+      o,
+      n
+    ),
+    { combobox: n.combobox }
+  );
+}
+function wo(t = {}) {
+  t = xo(t);
+  const [o, n] = st(Co, t);
+  return yo(o, n, t);
+}
+var Oo = "span", Po = Z(
+  function(o) {
+    var n = o, { store: e } = n, r = ee(n, ["store"]);
+    const i = mt();
+    return e = e || i, r = gt(C({ store: e }, r)), r;
+  }
+), Eo = te(function(o) {
+  const n = Po(o);
+  return oe(Oo, n);
+}), Vo = "button";
+function Io(t) {
+  return Array.from(t.selectedOptions).map((o) => o.value);
+}
+function ge(t, o) {
+  return () => {
+    const n = o();
+    if (!n) return;
+    let e = 0, r = t.item(n);
+    const i = r;
+    for (; r && r.value == null; ) {
+      const a = o(++e);
+      if (!a) return;
+      if (r = t.item(a), r === i) break;
+    }
+    return r == null ? void 0 : r.id;
+  };
+}
+var _o = Z(function(o) {
+  var n = o, {
+    store: e,
+    name: r,
+    form: i,
+    required: a,
+    showOnKeyDown: O = !0,
+    moveOnKeyDown: I = !0,
+    toggleOnPress: v = !0,
+    toggleOnClick: u = v
+  } = n, s = ee(n, [
+    "store",
+    "name",
+    "form",
+    "required",
+    "showOnKeyDown",
+    "moveOnKeyDown",
+    "toggleOnPress",
+    "toggleOnClick"
+  ]);
+  const b = _e();
+  e = e || b, ce(
+    e,
+    process.env.NODE_ENV !== "production" && "Select must receive a `store` prop or be wrapped in a SelectProvider component."
+  );
+  const w = s.onKeyDown, c = T(O), p = T(I), P = e.useState("placement").split("-")[0], h = e.useState("value"), M = Array.isArray(h), x = G((f) => {
+    var S;
+    if (w == null || w(f), f.defaultPrevented || !e) return;
+    const { orientation: q, items: W, activeId: X } = e.getState(), de = q !== "horizontal", ae = q !== "vertical", k = !!((S = W.find((he) => !he.disabled && he.value != null)) != null && S.rowId), fe = {
+      ArrowUp: (k || de) && ge(e, e.up),
+      ArrowRight: (k || ae) && ge(e, e.next),
+      ArrowDown: (k || de) && ge(e, e.down),
+      ArrowLeft: (k || ae) && ge(e, e.previous)
+    }[f.key];
+    fe && p(f) && (f.preventDefault(), e.move(fe()));
+    const be = P === "top" || P === "bottom";
+    ({
+      ArrowDown: be,
+      ArrowUp: be,
+      ArrowLeft: P === "left",
+      ArrowRight: P === "right"
+    })[f.key] && c(f) && (f.preventDefault(), e.move(X), qe(f.currentTarget, "keyup", e.show));
+  });
+  s = pe(
+    s,
+    (f) => /* @__PURE__ */ V(ft, { value: e, children: f }),
+    [e]
+  );
+  const [U, A] = ie(!1), E = ne(!1);
+  le(() => {
+    const f = E.current;
+    E.current = !1, !f && A(!1);
+  }, [h]);
+  const B = e.useState((f) => {
+    var S;
+    return (S = f.labelElement) == null ? void 0 : S.id;
+  }), d = s["aria-label"], g = s["aria-labelledby"] || B, H = e.useState((f) => {
+    if (r)
+      return f.items;
+  }), $ = Se(() => [...new Set(H == null ? void 0 : H.map((f) => f.value).filter((f) => f != null))], [H]);
+  s = pe(
+    s,
+    (f) => r ? /* @__PURE__ */ re(Te, { children: [
+      /* @__PURE__ */ re(
+        "select",
+        {
+          style: {
+            border: 0,
+            clip: "rect(0 0 0 0)",
+            height: "1px",
+            margin: "-1px",
+            overflow: "hidden",
+            padding: 0,
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px"
+          },
+          tabIndex: -1,
+          "aria-hidden": !0,
+          "aria-label": d,
+          "aria-labelledby": g,
+          name: r,
+          form: i,
+          required: a,
+          disabled: s.disabled,
+          value: h,
+          multiple: M,
+          onFocus: () => {
+            var S;
+            return (S = e == null ? void 0 : e.getState().selectElement) == null ? void 0 : S.focus();
+          },
+          onChange: (S) => {
+            E.current = !0, A(!0), e == null || e.setValue(
+              M ? Io(S.target) : S.target.value
+            );
+          },
+          children: [
+            dt(h).map((S) => S == null || $.includes(S) ? null : /* @__PURE__ */ V("option", { value: S, children: S }, S)),
+            $.map((S) => /* @__PURE__ */ V("option", { value: S, children: S }, S))
+          ]
+        }
+      ),
+      f
+    ] }) : f,
+    [
+      e,
+      d,
+      g,
+      r,
+      i,
+      a,
+      h,
+      M,
+      $,
+      s.disabled
+    ]
+  );
+  const m = /* @__PURE__ */ re(Te, { children: [
+    h,
+    /* @__PURE__ */ V(Eo, {})
+  ] }), _ = e.useState("contentElement");
+  return s = R(C({
+    role: "combobox",
+    "aria-autocomplete": "none",
+    "aria-labelledby": B,
+    "aria-haspopup": We(_, "listbox"),
+    "data-autofill": U || void 0,
+    "data-name": r,
+    children: m
+  }, s), {
+    ref: Ce(e.setSelectElement, s.ref),
+    onKeyDown: x
+  }), s = vo(C({ store: e, toggleOnClick: u }, s)), s = vt(C({ store: e }, s)), s;
+}), Ao = te(function(o) {
+  const n = _o(o);
+  return oe(Vo, n);
+});
+function ko(t = {}) {
+  const o = wo(t);
+  return /* @__PURE__ */ V(uo, { value: o, children: t.children });
+}
+var Do = "div";
+function Lo(t, o) {
+  if (o != null)
+    return t == null ? !1 : Array.isArray(t) ? t.includes(o) : t === o;
+}
+var Ko = Z(
+  function(o) {
+    var n = o, {
+      store: e,
+      value: r,
+      getItem: i,
+      hideOnClick: a,
+      setValueOnClick: O = r != null,
+      preventScrollOnKeyDown: I = !0,
+      focusOnHover: v = !0
+    } = n, u = ee(n, [
+      "store",
+      "value",
+      "getItem",
+      "hideOnClick",
+      "setValueOnClick",
+      "preventScrollOnKeyDown",
+      "focusOnHover"
+    ]), s;
+    const b = co();
+    e = e || b, ce(
+      e,
+      process.env.NODE_ENV !== "production" && "SelectItem must be wrapped in a SelectList or SelectPopover component."
+    );
+    const w = xe(u.id), c = Bt(u), { listElement: p, multiSelectable: L, selected: P, autoFocus: h } = it(e, {
+      listElement: "listElement",
+      multiSelectable(d) {
+        return Array.isArray(d.value);
+      },
+      selected(d) {
+        return Lo(d.value, r);
+      },
+      autoFocus(d) {
+        return r == null || d.value == null || d.activeId !== w && (e != null && e.item(d.activeId)) ? !1 : Array.isArray(d.value) ? d.value[d.value.length - 1] === r : d.value === r;
+      }
+    }), M = $e(
+      (d) => {
+        const g = R(C({}, d), {
+          value: c ? void 0 : r,
+          children: r
+        });
+        return i ? i(g) : g;
+      },
+      [c, r, i]
+    );
+    a = a ?? (r != null && !L);
+    const x = u.onClick, U = T(O), A = T(a), E = G((d) => {
+      x == null || x(d), !d.defaultPrevented && (Ge(d) || Qe(d) || (U(d) && r != null && (e == null || e.setValue((g) => Array.isArray(g) ? g.includes(r) ? g.filter((H) => H !== r) : [...g, r] : r)), A(d) && (e == null || e.hide())));
+    });
+    u = pe(
+      u,
+      (d) => /* @__PURE__ */ V(mo.Provider, { value: P ?? !1, children: d }),
+      [P]
+    ), u = R(C({
+      id: w,
+      role: Ht(p),
+      "aria-selected": P,
+      children: r
+    }, u), {
+      autoFocus: (s = u.autoFocus) != null ? s : h,
+      onClick: E
+    }), u = ht(C({
+      store: e,
+      getItem: M,
+      preventScrollOnKeyDown: I
+    }, u));
+    const B = T(v);
+    return u = St(R(C({
+      store: e
+    }, u), {
+      // We have to disable focusOnHover when the popup is closed, otherwise
+      // the active item will change to null (the container) when the popup is
+      // closed by clicking on an item.
+      focusOnHover(d) {
+        if (!B(d)) return !1;
+        const g = e == null ? void 0 : e.getState();
+        return !!(g != null && g.open);
+      }
+    })), u;
+  }
+), No = ze(
+  te(function(o) {
+    const n = Ko(o);
+    return oe(Do, n);
+  })
+), To = "div", Fe = Ve(null), Ct = Z(
+  function(o) {
+    var n = o, {
+      store: e,
+      resetOnEscape: r = !0,
+      hideOnEnter: i = !0,
+      focusOnMove: a = !0,
+      composite: O,
+      alwaysVisible: I
+    } = n, v = ee(n, [
+      "store",
+      "resetOnEscape",
+      "hideOnEnter",
+      "focusOnMove",
+      "composite",
+      "alwaysVisible"
+    ]);
+    const u = mt();
+    e = e || u, ce(
+      e,
+      process.env.NODE_ENV !== "production" && "SelectList must receive a `store` prop or be wrapped in a SelectProvider component."
+    );
+    const s = xe(v.id), b = e.useState("value"), w = Array.isArray(b), [c, p] = ie(b), L = e.useState("mounted");
+    le(() => {
+      L || p(b);
+    }, [L, b]), r = r && !w;
+    const P = v.onKeyDown, h = T(r), M = T(i), x = G((k) => {
+      P == null || P(k), !k.defaultPrevented && (k.key === "Escape" && h(k) && (e == null || e.setValue(c)), (k.key === " " || k.key === "Enter") && $t(k) && M(k) && (k.preventDefault(), e == null || e.hide()));
+    }), U = Oe(Re), A = ie(), [E, B] = U || A, d = Se(
+      () => [E, B],
+      [E]
+    ), [g, H] = ie(null), $ = Oe(Fe);
+    le(() => {
+      if ($)
+        return $(e), () => $(null);
+    }, [$, e]), v = pe(
+      v,
+      (k) => /* @__PURE__ */ V(ft, { value: e, children: /* @__PURE__ */ V(Fe.Provider, { value: H, children: /* @__PURE__ */ V(Re.Provider, { value: d, children: k }) }) }),
+      [e, d]
+    );
+    const m = !!e.combobox;
+    O = O ?? (!m && g !== e);
+    const [_, f] = Ut(
+      O ? e.setListElement : null
+    ), S = Je(_, "role", v.role), W = (O || (S === "listbox" || S === "menu" || S === "tree" || S === "grid")) && w || void 0, X = pt(L, v.hidden, I), de = X ? R(C({}, v.style), { display: "none" }) : v.style;
+    O && (v = C({
+      role: "listbox",
+      "aria-multiselectable": W
+    }, v));
+    const ae = e.useState(
+      (k) => {
+        var me;
+        return E || ((me = k.labelElement) == null ? void 0 : me.id);
+      }
+    );
+    return v = R(C({
+      id: s,
+      "aria-labelledby": ae,
+      hidden: X
+    }, v), {
+      ref: Ce(f, v.ref),
+      style: de,
+      onKeyDown: x
+    }), v = bt(R(C({ store: e }, v), { composite: O })), v = vt(C({ store: e, typeahead: !m }, v)), v;
+  }
+), Mo = te(function(o) {
+  const n = Ct(o);
+  return oe(To, n);
+}), Ro = "div", Fo = Z(
+  function(o) {
+    var n = o, { store: e, alwaysVisible: r } = n, i = ee(n, ["store", "alwaysVisible"]);
+    const a = _e();
+    return e = e || a, i = Ct(C({ store: e, alwaysVisible: r }, i)), i = So(C({ store: e, alwaysVisible: r }, i)), i;
+  }
+), Bo = bo(
+  te(function(o) {
+    const n = Fo(o);
+    return oe(Ro, n);
+  }),
+  _e
+);
+Ve(null);
+Ve(
+  null
+);
+var Ho = jt(
+  [Ft],
+  [Rt]
+), $o = Ho.useContext, Uo = Wt() && zt();
+function jo(t = {}) {
+  var o = t, {
+    tag: n
+  } = o, e = je(o, [
+    "tag"
+  ]);
+  const r = ot(e.store, no(n, ["value", "rtl"]));
+  nt(e, r);
+  const i = n == null ? void 0 : n.getState(), a = r == null ? void 0 : r.getState(), O = D(
+    e.activeId,
+    a == null ? void 0 : a.activeId,
+    e.defaultActiveId,
+    null
+  ), I = Ze(se(j({}, e), {
+    activeId: O,
+    includesBaseElement: D(
+      e.includesBaseElement,
+      a == null ? void 0 : a.includesBaseElement,
+      !0
+    ),
+    orientation: D(
+      e.orientation,
+      a == null ? void 0 : a.orientation,
+      "vertical"
+    ),
+    focusLoop: D(e.focusLoop, a == null ? void 0 : a.focusLoop, !0),
+    focusWrap: D(e.focusWrap, a == null ? void 0 : a.focusWrap, !0),
+    virtualFocus: D(
+      e.virtualFocus,
+      a == null ? void 0 : a.virtualFocus,
+      !0
+    )
+  })), v = Xe(se(j({}, e), {
+    placement: D(
+      e.placement,
+      a == null ? void 0 : a.placement,
+      "bottom-start"
+    )
+  })), u = D(
+    e.value,
+    a == null ? void 0 : a.value,
+    e.defaultValue,
+    ""
+  ), s = D(
+    e.selectedValue,
+    a == null ? void 0 : a.selectedValue,
+    i == null ? void 0 : i.values,
+    e.defaultSelectedValue,
+    ""
+  ), b = Array.isArray(s), w = se(j(j({}, I.getState()), v.getState()), {
+    value: u,
+    selectedValue: s,
+    resetValueOnSelect: D(
+      e.resetValueOnSelect,
+      a == null ? void 0 : a.resetValueOnSelect,
+      b
+    ),
+    resetValueOnHide: D(
+      e.resetValueOnHide,
+      a == null ? void 0 : a.resetValueOnHide,
+      b && !n
+    ),
+    activeValue: a == null ? void 0 : a.activeValue
+  }), c = rt(w, I, v, r);
+  return Uo && Q(
+    c,
+    () => J(c, ["virtualFocus"], () => {
+      c.setState("virtualFocus", !1);
+    })
+  ), Q(c, () => {
+    if (n)
+      return qt(
+        J(c, ["selectedValue"], (p) => {
+          Array.isArray(p.selectedValue) && n.setValues(p.selectedValue);
+        }),
+        J(n, ["values"], (p) => {
+          c.setState("selectedValue", p.values);
+        })
+      );
+  }), Q(
+    c,
+    () => J(c, ["resetValueOnHide", "mounted"], (p) => {
+      p.resetValueOnHide && (p.mounted || c.setState("value", u));
+    })
+  ), Q(
+    c,
+    () => J(c, ["open"], (p) => {
+      p.open || (c.setState("activeId", O), c.setState("moves", 0));
+    })
+  ), Q(
+    c,
+    () => J(c, ["moves", "activeId"], (p, L) => {
+      p.moves === L.moves && c.setState("activeValue", void 0);
+    })
+  ), Q(
+    c,
+    () => lt(c, ["moves", "renderedItems"], (p, L) => {
+      if (p.moves === L.moves) return;
+      const { activeId: P } = c.getState(), h = I.item(P);
+      c.setState("activeValue", h == null ? void 0 : h.value);
+    })
+  ), se(j(j(j({}, v), I), c), {
+    tag: n,
+    setValue: (p) => c.setState("value", p),
+    resetValue: () => c.setState("value", w.value),
+    setSelectedValue: (p) => c.setState("selectedValue", p)
+  });
+}
+function qo(t) {
+  const o = $o();
+  return t = R(C({}, t), {
+    tag: t.tag !== void 0 ? t.tag : o
+  }), et(t);
+}
+function Wo(t, o, n) {
+  return Ie(o, [n.tag]), ve(t, n, "value", "setValue"), ve(t, n, "selectedValue", "setSelectedValue"), ve(t, n, "resetValueOnHide"), ve(t, n, "resetValueOnSelect"), Object.assign(
+    tt(
+      Ye(t, o, n),
+      o,
+      n
+    ),
+    { tag: n.tag }
+  );
+}
+function zo(t = {}) {
+  t = qo(t);
+  const [o, n] = st(jo, t);
+  return Wo(o, n, t);
+}
+var Go = "input";
+function Be(t, o, n) {
+  if (!n) return !1;
+  const e = t.find((r) => !r.disabled && r.value);
+  return (e == null ? void 0 : e.value) === o;
+}
+function He(t, o) {
+  return !o || t == null ? !1 : (t = eo(t), o.length > t.length && o.toLowerCase().indexOf(t.toLowerCase()) === 0);
+}
+function Qo(t) {
+  return t.type === "input";
+}
+function Jo(t) {
+  return t === "inline" || t === "list" || t === "both" || t === "none";
+}
+function Xo(t) {
+  const o = t.find((n) => {
+    var e;
+    return n.disabled ? !1 : ((e = n.element) == null ? void 0 : e.getAttribute("role")) !== "tab";
+  });
+  return o == null ? void 0 : o.id;
+}
+var Yo = Z(
+  function(o) {
+    var n = o, {
+      store: e,
+      focusable: r = !0,
+      autoSelect: i = !1,
+      getAutoSelectId: a,
+      setValueOnChange: O,
+      showMinLength: I = 0,
+      showOnChange: v,
+      showOnMouseDown: u,
+      showOnClick: s = u,
+      showOnKeyDown: b,
+      showOnKeyPress: w = b,
+      blurActiveItemOnClick: c,
+      setValueOnClick: p = !0,
+      moveOnKeyPress: L = !0,
+      autoComplete: P = "list"
+    } = n, h = ee(n, [
+      "store",
+      "focusable",
+      "autoSelect",
+      "getAutoSelectId",
+      "setValueOnChange",
+      "showMinLength",
+      "showOnChange",
+      "showOnMouseDown",
+      "showOnClick",
+      "showOnKeyDown",
+      "showOnKeyPress",
+      "blurActiveItemOnClick",
+      "setValueOnClick",
+      "moveOnKeyPress",
+      "autoComplete"
+    ]);
+    const M = at();
+    e = e || M, ce(
+      e,
+      process.env.NODE_ENV !== "production" && "Combobox must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
+    const x = ne(null), [U, A] = Gt(), E = ne(!1), B = ne(!1), d = e.useState(
+      (l) => l.virtualFocus && i
+    ), g = P === "inline" || P === "both", [H, $] = ie(g);
+    Qt(() => {
+      g && $(!0);
+    }, [g]);
+    const m = e.useState("value"), _ = ne();
+    le(() => J(e, ["selectedValue", "activeId"], (l, y) => {
+      _.current = y.selectedValue;
+    }), []);
+    const f = e.useState((l) => {
+      var y;
+      if (g && H && !(l.activeValue && Array.isArray(l.selectedValue) && (l.selectedValue.includes(l.activeValue) || (y = _.current) != null && y.includes(l.activeValue))))
+        return l.activeValue;
+    }), S = e.useState("renderedItems"), q = e.useState("open"), W = e.useState("contentElement"), X = Se(() => {
+      if (!g || !H) return m;
+      if (Be(
+        S,
+        f,
+        d
+      )) {
+        if (He(m, f)) {
+          const y = (f == null ? void 0 : f.slice(m.length)) || "";
+          return m + y;
+        }
+        return m;
+      }
+      return f || m;
+    }, [g, H, S, f, d, m]);
+    le(() => {
+      const l = x.current;
+      if (!l) return;
+      const y = () => $(!0);
+      return l.addEventListener("combobox-item-move", y), () => {
+        l.removeEventListener("combobox-item-move", y);
+      };
+    }, []), le(() => {
+      if (!g || !H || !f || !Be(
+        S,
+        f,
+        d
+      ) || !He(m, f)) return;
+      let y = Jt;
+      return queueMicrotask(() => {
+        const K = x.current;
+        if (!K) return;
+        const { start: N, end: z } = Me(K), Y = m.length, F = f.length;
+        we(K, Y, F), y = () => {
+          if (!Ee(K)) return;
+          const { start: ue, end: kt } = Me(K);
+          ue === Y && kt === F && we(K, N, z);
+        };
+      }), () => y();
+    }, [
+      U,
+      g,
+      H,
+      f,
+      S,
+      d,
+      m
+    ]);
+    const de = ne(null), ae = G(a), k = ne(null);
+    le(() => {
+      if (!q || !W) return;
+      const l = Xt(W);
+      if (!l) return;
+      de.current = l;
+      const y = () => {
+        E.current = !1;
+      }, K = () => {
+        if (!e || !E.current) return;
+        const { activeId: z } = e.getState();
+        z !== null && z !== k.current && (E.current = !1);
+      }, N = { passive: !0, capture: !0 };
+      return l.addEventListener("wheel", y, N), l.addEventListener("touchmove", y, N), l.addEventListener("scroll", K, N), () => {
+        l.removeEventListener("wheel", y, !0), l.removeEventListener("touchmove", y, !0), l.removeEventListener("scroll", K, !0);
+      };
+    }, [q, W, e]), Pe(() => {
+      m && (B.current || (E.current = !0));
+    }, [m]), Pe(() => {
+      d !== "always" && q || (E.current = q);
+    }, [d, q]);
+    const me = e.useState("resetValueOnSelect");
+    Ie(() => {
+      var l, y;
+      const K = E.current;
+      if (!e || !q || !K && !me) return;
+      const { baseElement: N, contentElement: z, activeId: Y } = e.getState();
+      if (!(N && !Ee(N))) {
+        if (z != null && z.hasAttribute("data-placing")) {
+          const F = new MutationObserver(A);
+          return F.observe(z, { attributeFilter: ["data-placing"] }), () => F.disconnect();
+        }
+        if (d && K) {
+          const F = ae(S), ue = F !== void 0 ? F : (l = Xo(S)) != null ? l : e.first();
+          k.current = ue, e.move(ue ?? null);
+        } else {
+          const F = (y = e.item(Y || e.first())) == null ? void 0 : y.element;
+          F && "scrollIntoView" in F && F.scrollIntoView({ block: "nearest", inline: "nearest" });
+        }
+      }
+    }, [
+      e,
+      q,
+      U,
+      m,
+      d,
+      me,
+      ae,
+      S
+    ]), le(() => {
+      if (!g) return;
+      const l = x.current;
+      if (!l) return;
+      const y = [l, W].filter(
+        (N) => !!N
+      ), K = (N) => {
+        y.every((z) => Zt(N, z)) && (e == null || e.setValue(X));
+      };
+      for (const N of y)
+        N.addEventListener("focusout", K);
+      return () => {
+        for (const N of y)
+          N.removeEventListener("focusout", K);
+      };
+    }, [g, W, e, X]);
+    const fe = (l) => l.currentTarget.value.length >= I, be = h.onChange, Ae = T(v ?? fe), ke = T(
+      // If the combobox is combined with tags, the value will be set by the tag
+      // input component.
+      O ?? !e.tag
+    ), De = G((l) => {
+      if (be == null || be(l), l.defaultPrevented || !e) return;
+      const y = l.currentTarget, { value: K, selectionStart: N, selectionEnd: z } = y, Y = l.nativeEvent;
+      if (E.current = !0, Qo(Y) && (Y.isComposing && (E.current = !1, B.current = !0), g)) {
+        const F = Y.inputType === "insertText" || Y.inputType === "insertCompositionText", ue = N === K.length;
+        $(F && ue);
+      }
+      if (ke(l)) {
+        const F = K === e.getState().value;
+        e.setValue(K), queueMicrotask(() => {
+          we(y, N, z);
+        }), g && d && F && A();
+      }
+      Ae(l) && e.show(), (!d || !E.current) && e.setActiveId(null);
+    }), ye = h.onCompositionEnd, he = G((l) => {
+      E.current = !0, B.current = !1, ye == null || ye(l), !l.defaultPrevented && d && A();
+    }), Le = h.onMouseDown, xt = T(
+      c ?? (() => !!(e != null && e.getState().includesBaseElement))
+    ), yt = T(p), wt = T(s ?? fe), Ot = G((l) => {
+      Le == null || Le(l), !l.defaultPrevented && (l.button || l.ctrlKey || e && (xt(l) && e.setActiveId(null), yt(l) && e.setValue(X), wt(l) && qe(l.currentTarget, "mouseup", e.show)));
+    }), Ke = h.onKeyDown, Pt = T(w ?? fe), Et = G((l) => {
+      if (Ke == null || Ke(l), l.repeat || (E.current = !1), l.defaultPrevented || l.ctrlKey || l.altKey || l.shiftKey || l.metaKey || !e) return;
+      const { open: y } = e.getState();
+      y || (l.key === "ArrowUp" || l.key === "ArrowDown") && Pt(l) && (l.preventDefault(), e.show());
+    }), Ne = h.onBlur, Vt = G((l) => {
+      E.current = !1, Ne == null || Ne(l), l.defaultPrevented;
+    }), It = xe(h.id), _t = Jo(P) ? P : void 0, At = e.useState((l) => l.activeId === null);
+    return h = R(C({
+      id: It,
+      role: "combobox",
+      "aria-autocomplete": _t,
+      "aria-haspopup": We(W, "listbox"),
+      "aria-expanded": q,
+      "aria-controls": W == null ? void 0 : W.id,
+      "data-active-item": At || void 0,
+      value: X
+    }, h), {
+      ref: Ce(x, h.ref),
+      onChange: De,
+      onCompositionEnd: he,
+      onMouseDown: Ot,
+      onKeyDown: Et,
+      onBlur: Vt
+    }), h = bt(R(C({
+      store: e,
+      focusable: r
+    }, h), {
+      // Enable inline autocomplete when the user moves from the combobox input
+      // to an item.
+      moveOnKeyPress: (l) => Yt(L, l) ? !1 : (g && $(!0), !0)
+    })), h = po(C({ store: e }, h)), C({ autoComplete: "off" }, h);
+  }
+), Zo = te(function(o) {
+  const n = Yo(o);
+  return oe(Go, n);
+});
+function en(t = {}) {
+  const o = zo(t);
+  return /* @__PURE__ */ V(ro, { value: o, children: t.children });
+}
+var tn = "div";
+function on(t, o) {
+  if (o != null)
+    return t == null ? !1 : Array.isArray(t) ? t.includes(o) : t === o;
+}
+function nn(t) {
+  var o;
+  return (o = {
+    menu: "menuitem",
+    listbox: "option",
+    tree: "treeitem"
+  }[t]) != null ? o : "option";
+}
+var rn = Z(
+  function(o) {
+    var n = o, {
+      store: e,
+      value: r,
+      hideOnClick: i,
+      setValueOnClick: a,
+      selectValueOnClick: O = !0,
+      resetValueOnSelect: I,
+      focusOnHover: v = !1,
+      moveOnKeyPress: u = !0,
+      getItem: s
+    } = n, b = ee(n, [
+      "store",
+      "value",
+      "hideOnClick",
+      "setValueOnClick",
+      "selectValueOnClick",
+      "resetValueOnSelect",
+      "focusOnHover",
+      "moveOnKeyPress",
+      "getItem"
+    ]), w;
+    const c = ut();
+    e = e || c, ce(
+      e,
+      process.env.NODE_ENV !== "production" && "ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component."
+    );
+    const { resetValueOnSelectState: p, multiSelectable: L, selected: P } = it(e, {
+      resetValueOnSelectState: "resetValueOnSelect",
+      multiSelectable(m) {
+        return Array.isArray(m.selectedValue);
+      },
+      selected(m) {
+        return on(m.selectedValue, r);
+      }
+    }), h = $e(
+      (m) => {
+        const _ = R(C({}, m), { value: r });
+        return s ? s(_) : _;
+      },
+      [r, s]
+    );
+    a = a ?? !L, i = i ?? (r != null && !L);
+    const M = b.onClick, x = T(a), U = T(O), A = T(
+      (w = I ?? p) != null ? w : L
+    ), E = T(i), B = G((m) => {
+      M == null || M(m), !m.defaultPrevented && (Ge(m) || Qe(m) || (r != null && (U(m) && (A(m) && (e == null || e.resetValue()), e == null || e.setSelectedValue((_) => Array.isArray(_) ? _.includes(r) ? _.filter((f) => f !== r) : [..._, r] : r)), x(m) && (e == null || e.setValue(r))), E(m) && (e == null || e.hide())));
+    }), d = b.onKeyDown, g = G((m) => {
+      if (d == null || d(m), m.defaultPrevented) return;
+      const _ = e == null ? void 0 : e.getState().baseElement;
+      if (!_ || Ee(_)) return;
+      (m.key.length === 1 || m.key === "Backspace" || m.key === "Delete") && (queueMicrotask(() => _.focus()), to(_) && (e == null || e.setValue(_.value)));
+    });
+    L && P != null && (b = C({
+      "aria-selected": P
+    }, b)), b = pe(
+      b,
+      (m) => /* @__PURE__ */ V(lo.Provider, { value: r, children: /* @__PURE__ */ V(so.Provider, { value: P ?? !1, children: m }) }),
+      [r, P]
+    );
+    const H = Oe(ct);
+    b = R(C({
+      role: nn(H),
+      children: r
+    }, b), {
+      onClick: B,
+      onKeyDown: g
+    });
+    const $ = T(u);
+    return b = ht(R(C({
+      store: e
+    }, b), {
+      getItem: h,
+      // Dispatch a custom event on the combobox input when moving to an item
+      // with the keyboard so the Combobox component can enable inline
+      // autocompletion.
+      moveOnKeyPress: (m) => {
+        if (!$(m)) return !1;
+        const _ = new Event("combobox-item-move"), f = e == null ? void 0 : e.getState().baseElement;
+        return f == null || f.dispatchEvent(_), !0;
+      }
+    })), b = St(C({ store: e, focusOnHover: v }, b)), b;
+  }
+), ln = ze(
+  te(function(o) {
+    const n = rn(o);
+    return oe(tn, n);
+  })
+), sn = "div", an = Z(
+  function(o) {
+    var n = o, { store: e, alwaysVisible: r } = n, i = ee(n, ["store", "alwaysVisible"]);
+    const a = ut(!0), O = io();
+    e = e || O;
+    const I = !!e && e === a;
+    ce(
+      e,
+      process.env.NODE_ENV !== "production" && "ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
+    const v = ne(null), u = xe(i.id), s = e.useState("mounted"), b = pt(s, i.hidden, r), w = b ? R(C({}, i.style), { display: "none" }) : i.style, c = e.useState(
+      (A) => Array.isArray(A.selectedValue)
+    ), p = Je(v, "role", i.role), P = (p === "listbox" || p === "tree" || p === "grid") && c || void 0, [h, M] = ie(!1), x = e.useState("contentElement");
+    Pe(() => {
+      if (!s) return;
+      const A = v.current;
+      if (!A || x !== A) return;
+      const E = () => {
+        M(!!A.querySelector("[role='listbox']"));
+      }, B = new MutationObserver(E);
+      return B.observe(A, {
+        subtree: !0,
+        childList: !0,
+        attributeFilter: ["role"]
+      }), E(), () => B.disconnect();
+    }, [s, x]), h || (i = C({
+      role: "listbox",
+      "aria-multiselectable": P
+    }, i)), i = pe(
+      i,
+      (A) => /* @__PURE__ */ V(ao, { value: e, children: /* @__PURE__ */ V(ct.Provider, { value: p, children: A }) }),
+      [e, p]
+    );
+    const U = u && (!a || !I) ? e.setContentElement : null;
+    return i = R(C({
+      id: u,
+      hidden: b
+    }, i), {
+      ref: Ce(U, v, i.ref),
+      style: w
+    }), Ue(i);
+  }
+), un = te(function(o) {
+  const n = an(o);
+  return oe(sn, n);
+});
+const jn = ({
+  value: t,
+  onChangeValue: o,
+  options: n,
+  searchable: e = !1,
+  placeholder: r = "Choose an option...",
+  prefix: i,
+  suffix: a,
+  children: O,
+  withIcon: I,
+  ...v
+}) => {
+  const [u, s] = ie(!1), [b, w] = ie(""), c = (n || []).map(Nt), p = Se(() => Mt(c, b, {
+    baseSort: (x, U) => x.index < U.index ? -1 : 1,
+    keys: ["label", "description"]
+  }), [b]), L = e ? un : Mo, M = !!!c.find((x) => x.value === t);
+  return /* @__PURE__ */ V(
+    en,
+    {
+      resetValueOnHide: !0,
+      open: u,
+      setOpen: s,
+      setValue: (x) => {
+        Lt(() => {
+          w(x);
+        });
+      },
+      children: /* @__PURE__ */ re(
+        ko,
+        {
+          value: M ? "" : t,
+          setValue: o,
+          open: u,
+          setOpen: s,
+          children: [
+            /* @__PURE__ */ V(
+              Ao,
+              {
+                className: Dt(
+                  "component-select__input",
+                  M && "component-select__input--placeholder"
+                ),
+                ...v,
+                children: O
+              }
+            ),
+            u && /* @__PURE__ */ V(
+              Bo,
+              {
+                className: "component-select__popover",
+                "data-colour-scheme": "invert",
+                wrapperProps: {
+                  className: "component-select__popover__wrapper"
+                },
+                fitViewport: !0,
+                gutter: 8,
+                overflowPadding: 4,
+                shift: -1,
+                children: /* @__PURE__ */ re(Kt, { className: "component-select__popover__scroll", axis: "y", children: [
+                  e && /* @__PURE__ */ re("div", { className: "component-select__popover__search-wrapper", children: [
+                    /* @__PURE__ */ V(Tt, { className: "component-select__popover__search-icon" }),
+                    /* @__PURE__ */ V(
+                      Zo,
+                      {
+                        autoSelect: !0,
+                        placeholder: "Search...",
+                        className: "component-select__popover__search"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ V(L, { className: "component-select__list", children: p.map((x) => /* @__PURE__ */ re(
+                    No,
+                    {
+                      disabled: x.disabled,
+                      value: x.value,
+                      className: "component-select__option",
+                      render: /* @__PURE__ */ V(ln, {}),
+                      children: [
+                        /* @__PURE__ */ re("div", { className: "component-select__option__label", children: [
+                          x.icon,
+                          x.label
+                        ] }),
+                        x.description && /* @__PURE__ */ V("div", { className: "component-select__option__description", children: x.description })
+                      ]
+                    },
+                    x.value
+                  )) })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  jn as Select
+};