@wrdagency/blockout 0.1.9 → 0.1.10

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

@@ -1,4 +1,4 @@
-import { jsx as w, jsxs as X, Fragment as we } from "react/jsx-runtime";
+import { jsx as I, jsxs as X, Fragment as we } from "react/jsx-runtime";
 import { normalizeOption as Bt } from "../../../types/options.js";
 import { cn as jt } from "../../../utils/css.js";
 import { noop as Wt } from "../../../utils/noop.js";
@@ -11,7 +11,7 @@ import { BaseControl as zt } from "../base-control/index.js";
 import { Affix as Fe } from "../base-control/affix.js";
 import { useBaseControlProps as Qt } from "../base-control/props.js";
 import { C as Xt, a as Gt } from "../../../P7GR5CS5-BoOYUfSQ.js";
-import { a as ne, _ as oe, i as me, m as H, o as A, v as Ge, f as re, q as le, $ as Je, Y as ie, X as D, U as $, Z as Me, j as R, e as Q, H as et, l as he, n as ye, ab as tt, r as nt, s as Ae, t as Jt, P as ot, Q as rt, R as en, h as tn, u as nn, ac as lt, c as on, a0 as rn, A as ln, ad as sn, ae as an, af as un, x as Be, ag as Ie, a6 as cn, B as dn, b as Ve, a9 as mn, W as fn, K as vn, k as pn } from "../../../LMDWO4NN--KEvZePp.js";
+import { a as ne, _ as oe, i as me, m as U, o as A, v as Ge, f as re, q as le, $ as Je, Y as ie, X as D, U as $, Z as Me, j as H, e as Q, H as et, l as he, n as ye, ab as tt, r as nt, s as Ae, t as Jt, P as ot, Q as rt, R as en, h as tn, u as nn, ac as lt, c as on, a0 as rn, A as ln, ad as sn, ae as an, af as un, x as Be, ag as Ie, a6 as cn, B as dn, b as Ve, a9 as mn, W as fn, K as vn, k as pn } from "../../../LMDWO4NN--KEvZePp.js";
 import { c as st, b as at, f as bn, e as hn, d as Sn, g as gn } from "../../../WMYDSCNQ-Dy1O-Kdl.js";
 import { c as it, d as ut, b as ct } from "../../../4CMBR7SL-BAGv8IL2.js";
 import { m as dt, o as Cn, t as mt, c as ft, s as G, b as J, g as vt, e as pt, f as be, u as bt, a as En, p as On } from "../../../YV4JVR4I-kvospPUa.js";
@@ -37,8 +37,8 @@ var Mn = "span", Nn = {
     e,
     process.env.NODE_ENV !== "production" && "PopoverDisclosureArrow must be wrapped in a PopoverDisclosure component."
   );
-  const v = e.useState((s) => r || s.placement).split("-")[0], c = Nn[v], i = Ce(
-    () => /* @__PURE__ */ w(
+  const f = e.useState((s) => r || s.placement).split("-")[0], c = Nn[f], i = Ce(
+    () => /* @__PURE__ */ I(
       "svg",
       {
         display: "block",
@@ -50,12 +50,12 @@ var Mn = "span", Nn = {
         viewBox: "0 0 16 16",
         height: "1em",
         width: "1em",
-        children: /* @__PURE__ */ w("polyline", { points: c })
+        children: /* @__PURE__ */ I("polyline", { points: c })
       }
     ),
     [c]
   );
-  return l = H(A({
+  return l = U(A({
     children: i,
     "aria-hidden": !0
   }, l), {
@@ -123,12 +123,12 @@ function Dn(t = {}) {
       l.placement,
       "bottom-start"
     )
-  })), v = new String(""), c = ie($($({}, a.getState()), m.getState()), {
+  })), f = new String(""), c = ie($($({}, a.getState()), m.getState()), {
     value: D(
       e.value,
       l.value,
       e.defaultValue,
-      v
+      f
     ),
     setValueOnMove: D(
       e.setValueOnMove,
@@ -142,11 +142,11 @@ function Dn(t = {}) {
   return G(
     i,
     () => J(i, ["value", "items"], (s) => {
-      if (s.value !== v || !s.items.length) return;
-      const f = s.items.find(
+      if (s.value !== f || !s.items.length) return;
+      const v = s.items.find(
         (C) => !C.disabled && C.value != null
       );
-      (f == null ? void 0 : f.value) != null && i.setState("value", f.value);
+      (v == null ? void 0 : v.value) != null && i.setState("value", v.value);
     })
   ), G(
     i,
@@ -157,7 +157,7 @@ function Dn(t = {}) {
     i,
     () => J(i, ["mounted", "items", "value"], (s) => {
       if (o || s.mounted) return;
-      const f = Ct(s.value), C = f[f.length - 1];
+      const v = Ct(s.value), C = v[v.length - 1];
       if (C == null) return;
       const d = s.items.find(
         (p) => !p.disabled && p.value === C
@@ -167,8 +167,8 @@ function Dn(t = {}) {
   ), G(
     i,
     () => vt(i, ["setValueOnMove", "moves"], (s) => {
-      const { mounted: f, value: C, activeId: d } = i.getState();
-      if (!s.setValueOnMove && f || Array.isArray(C) || !s.moves || !d) return;
+      const { mounted: v, value: C, activeId: d } = i.getState();
+      if (!s.setValueOnMove && v || Array.isArray(C) || !s.moves || !d) return;
       const p = a.item(d);
       !p || p.disabled || p.value == null || i.setState("value", p.value);
     })
@@ -182,7 +182,7 @@ function Dn(t = {}) {
 }
 function Ln(t) {
   const n = ht();
-  return t = H(A({}, t), {
+  return t = U(A({}, t), {
     combobox: t.combobox !== void 0 ? t.combobox : n
   }), ut(t);
 }
@@ -235,7 +235,7 @@ var jn = ne(function(n) {
     form: l,
     required: a,
     showOnKeyDown: m = !0,
-    moveOnKeyDown: v = !0,
+    moveOnKeyDown: f = !0,
     toggleOnPress: c = !0,
     toggleOnClick: i = c
   } = o, s = oe(o, [
@@ -248,12 +248,12 @@ var jn = ne(function(n) {
     "toggleOnPress",
     "toggleOnClick"
   ]);
-  const f = De();
-  e = e || f, me(
+  const v = De();
+  e = e || v, me(
     e,
     process.env.NODE_ENV !== "production" && "Select must receive a `store` prop or be wrapped in a SelectProvider component."
   );
-  const C = s.onKeyDown, d = R(m), p = R(v), O = e.useState("placement").split("-")[0], g = e.useState("value"), K = Array.isArray(g), x = Q((S) => {
+  const C = s.onKeyDown, d = H(m), p = H(f), O = e.useState("placement").split("-")[0], g = e.useState("value"), R = Array.isArray(g), K = Q((S) => {
     var E;
     if (C == null || C(S), S.defaultPrevented || !e) return;
     const { orientation: q, items: Y, activeId: ee } = e.getState(), fe = q !== "horizontal", ue = q !== "vertical", M = !!((E = Y.find((Ee) => !Ee.disabled && Ee.value != null)) != null && E.rowId), pe = {
@@ -273,21 +273,21 @@ var jn = ne(function(n) {
   });
   s = he(
     s,
-    (S) => /* @__PURE__ */ w(Et, { value: e, children: S }),
+    (S) => /* @__PURE__ */ I(Et, { value: e, children: S }),
     [e]
   );
-  const [Z, k] = de(!1), P = se(!1);
+  const [P, _] = de(!1), w = se(!1);
   ae(() => {
-    const S = P.current;
-    P.current = !1, !S && k(!1);
+    const S = w.current;
+    w.current = !1, !S && _(!1);
   }, [g]);
-  const F = e.useState((S) => {
+  const B = e.useState((S) => {
     var E;
     return (E = S.labelElement) == null ? void 0 : E.id;
-  }), b = s["aria-label"], y = s["aria-labelledby"] || F, B = e.useState((S) => {
+  }), b = s["aria-label"], y = s["aria-labelledby"] || B, j = e.useState((S) => {
     if (r)
       return S.items;
-  }), j = Ce(() => [...new Set(B == null ? void 0 : B.map((S) => S.value).filter((S) => S != null))], [B]);
+  }), W = Ce(() => [...new Set(j == null ? void 0 : j.map((S) => S.value).filter((S) => S != null))], [j]);
   s = he(
     s,
     (S) => r ? /* @__PURE__ */ X(we, { children: [
@@ -314,19 +314,19 @@ var jn = ne(function(n) {
           required: a,
           disabled: s.disabled,
           value: g,
-          multiple: K,
+          multiple: R,
           onFocus: () => {
             var E;
             return (E = e == null ? void 0 : e.getState().selectElement) == null ? void 0 : E.focus();
           },
           onChange: (E) => {
-            P.current = !0, k(!0), e == null || e.setValue(
-              K ? Bn(E.target) : E.target.value
+            w.current = !0, _(!0), e == null || e.setValue(
+              R ? Bn(E.target) : E.target.value
             );
           },
           children: [
-            Ct(g).map((E) => E == null || j.includes(E) ? null : /* @__PURE__ */ w("option", { value: E, children: E }, E)),
-            j.map((E) => /* @__PURE__ */ w("option", { value: E, children: E }, E))
+            Ct(g).map((E) => E == null || W.includes(E) ? null : /* @__PURE__ */ I("option", { value: E, children: E }, E)),
+            W.map((E) => /* @__PURE__ */ I("option", { value: E, children: E }, E))
           ]
         }
       ),
@@ -340,26 +340,26 @@ var jn = ne(function(n) {
       l,
       a,
       g,
-      K,
-      j,
+      R,
+      W,
       s.disabled
     ]
   );
   const h = /* @__PURE__ */ X(we, { children: [
     g,
-    /* @__PURE__ */ w(Un, {})
-  ] }), _ = e.useState("contentElement");
-  return s = H(A({
+    /* @__PURE__ */ I(Un, {})
+  ] }), k = e.useState("contentElement");
+  return s = U(A({
     role: "combobox",
     "aria-autocomplete": "none",
-    "aria-labelledby": F,
-    "aria-haspopup": tt(_, "listbox"),
-    "data-autofill": Z || void 0,
+    "aria-labelledby": B,
+    "aria-haspopup": tt(k, "listbox"),
+    "data-autofill": P || void 0,
     "data-name": r,
     children: h
   }, s), {
     ref: ye(e.setSelectElement, s.ref),
-    onKeyDown: x
+    onKeyDown: K
   }), s = bn(A({ store: e, toggleOnClick: i }, s)), s = Ot(A({ store: e }, s)), s;
 }), Wn = re(function(n) {
   const o = jn(n);
@@ -367,7 +367,7 @@ var jn = ne(function(n) {
 });
 function Zn(t = {}) {
   const n = Rn(t);
-  return /* @__PURE__ */ w(Pn, { value: n, children: t.children });
+  return /* @__PURE__ */ I(Pn, { value: n, children: t.children });
 }
 var $n = "div";
 function qn(t, n) {
@@ -382,7 +382,7 @@ var Yn = ne(
       getItem: l,
       hideOnClick: a,
       setValueOnClick: m = r != null,
-      preventScrollOnKeyDown: v = !0,
+      preventScrollOnKeyDown: f = !0,
       focusOnHover: c = !0
     } = o, i = oe(o, [
       "store",
@@ -393,8 +393,8 @@ var Yn = ne(
       "preventScrollOnKeyDown",
       "focusOnHover"
     ]), s;
-    const f = Vn();
-    e = e || f, me(
+    const v = Vn();
+    e = e || v, me(
       e,
       process.env.NODE_ENV !== "production" && "SelectItem must be wrapped in a SelectList or SelectPopover component."
     );
@@ -409,9 +409,9 @@ var Yn = ne(
       autoFocus(b) {
         return r == null || b.value == null || b.activeId !== C && (e != null && e.item(b.activeId)) ? !1 : Array.isArray(b.value) ? b.value[b.value.length - 1] === r : b.value === r;
       }
-    }), K = Xe(
+    }), R = Xe(
       (b) => {
-        const y = H(A({}, b), {
+        const y = U(A({}, b), {
           value: d ? void 0 : r,
           children: r
         });
@@ -420,35 +420,35 @@ var Yn = ne(
       [d, r, l]
     );
     a = a ?? (r != null && !V);
-    const x = i.onClick, Z = R(m), k = R(a), P = Q((b) => {
-      x == null || x(b), !b.defaultPrevented && (ot(b) || rt(b) || (Z(b) && r != null && (e == null || e.setValue((y) => Array.isArray(y) ? y.includes(r) ? y.filter((B) => B !== r) : [...y, r] : r)), k(b) && (e == null || e.hide())));
+    const K = i.onClick, P = H(m), _ = H(a), w = Q((b) => {
+      K == null || K(b), !b.defaultPrevented && (ot(b) || rt(b) || (P(b) && r != null && (e == null || e.setValue((y) => Array.isArray(y) ? y.includes(r) ? y.filter((j) => j !== r) : [...y, r] : r)), _(b) && (e == null || e.hide())));
     });
     i = he(
       i,
-      (b) => /* @__PURE__ */ w(_n.Provider, { value: O ?? !1, children: b }),
+      (b) => /* @__PURE__ */ I(_n.Provider, { value: O ?? !1, children: b }),
       [O]
-    ), i = H(A({
+    ), i = U(A({
       id: C,
       role: en(p),
       "aria-selected": O,
       children: r
     }, i), {
       autoFocus: (s = i.autoFocus) != null ? s : g,
-      onClick: P
+      onClick: w
     }), i = It(A({
       store: e,
-      getItem: K,
-      preventScrollOnKeyDown: v
+      getItem: R,
+      preventScrollOnKeyDown: f
     }, i));
-    const F = R(c);
-    return i = xt(H(A({
+    const B = H(c);
+    return i = xt(U(A({
       store: e
     }, i), {
       // 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(b) {
-        if (!F(b)) return !1;
+        if (!B(b)) return !1;
         const y = e == null ? void 0 : e.getState();
         return !!(y != null && y.open);
       }
@@ -467,7 +467,7 @@ var Yn = ne(
       hideOnEnter: l = !0,
       focusOnMove: a = !0,
       composite: m,
-      alwaysVisible: v
+      alwaysVisible: f
     } = o, c = oe(o, [
       "store",
       "resetOnEscape",
@@ -481,29 +481,29 @@ var Yn = ne(
       e,
       process.env.NODE_ENV !== "production" && "SelectList must receive a `store` prop or be wrapped in a SelectProvider component."
     );
-    const s = Ae(c.id), f = e.useState("value"), C = Array.isArray(f), [d, p] = de(f), V = e.useState("mounted");
+    const s = Ae(c.id), v = e.useState("value"), C = Array.isArray(v), [d, p] = de(v), V = e.useState("mounted");
     ae(() => {
-      V || p(f);
-    }, [V, f]), r = r && !C;
-    const O = c.onKeyDown, g = R(r), K = R(l), x = Q((M) => {
-      O == null || O(M), !M.defaultPrevented && (M.key === "Escape" && g(M) && (e == null || e.setValue(d)), (M.key === " " || M.key === "Enter") && tn(M) && K(M) && (M.preventDefault(), e == null || e.hide()));
-    }), Z = Pe(je), k = de(), [P, F] = Z || k, b = Ce(
-      () => [P, F],
-      [P]
-    ), [y, B] = de(null), j = Pe(We);
+      V || p(v);
+    }, [V, v]), r = r && !C;
+    const O = c.onKeyDown, g = H(r), R = H(l), K = Q((M) => {
+      O == null || O(M), !M.defaultPrevented && (M.key === "Escape" && g(M) && (e == null || e.setValue(d)), (M.key === " " || M.key === "Enter") && tn(M) && R(M) && (M.preventDefault(), e == null || e.hide()));
+    }), P = Pe(je), _ = de(), [w, B] = P || _, b = Ce(
+      () => [w, B],
+      [w]
+    ), [y, j] = de(null), W = Pe(We);
     ae(() => {
-      if (j)
-        return j(e), () => j(null);
-    }, [j, e]), c = he(
+      if (W)
+        return W(e), () => W(null);
+    }, [W, e]), c = he(
       c,
-      (M) => /* @__PURE__ */ w(Et, { value: e, children: /* @__PURE__ */ w(We.Provider, { value: B, children: /* @__PURE__ */ w(je.Provider, { value: b, children: M }) }) }),
+      (M) => /* @__PURE__ */ I(Et, { value: e, children: /* @__PURE__ */ I(We.Provider, { value: j, children: /* @__PURE__ */ I(je.Provider, { value: b, children: M }) }) }),
       [e, b]
     );
     const h = !!e.combobox;
     m = m ?? (!h && y !== e);
-    const [_, S] = nn(
+    const [k, S] = nn(
       m ? e.setListElement : null
-    ), E = lt(_, "role", c.role), Y = (m || (E === "listbox" || E === "menu" || E === "tree" || E === "grid")) && C || void 0, ee = yt(V, c.hidden, v), fe = ee ? H(A({}, c.style), { display: "none" }) : c.style;
+    ), E = lt(k, "role", c.role), Y = (m || (E === "listbox" || E === "menu" || E === "tree" || E === "grid")) && C || void 0, ee = yt(V, c.hidden, f), fe = ee ? U(A({}, c.style), { display: "none" }) : c.style;
     m && (c = A({
       role: "listbox",
       "aria-multiselectable": Y
@@ -511,18 +511,18 @@ var Yn = ne(
     const ue = e.useState(
       (M) => {
         var ve;
-        return P || ((ve = M.labelElement) == null ? void 0 : ve.id);
+        return w || ((ve = M.labelElement) == null ? void 0 : ve.id);
       }
     );
-    return c = H(A({
+    return c = U(A({
       id: s,
       "aria-labelledby": ue,
       hidden: ee
     }, c), {
       ref: ye(S, c.ref),
       style: fe,
-      onKeyDown: x
-    }), c = At(H(A({ store: e }, c), { composite: m })), c = Ot(A({ store: e, typeahead: !h }, c)), c;
+      onKeyDown: K
+    }), c = At(U(A({ store: e }, c), { composite: m })), c = Ot(A({ store: e, typeahead: !h }, c)), c;
   }
 ), Xn = re(function(n) {
   const o = Pt(n);
@@ -571,7 +571,7 @@ function lo(t = {}) {
     a == null ? void 0 : a.activeId,
     e.defaultActiveId,
     null
-  ), v = it(ie($({}, e), {
+  ), f = it(ie($({}, e), {
     activeId: m,
     includesBaseElement: D(
       e.includesBaseElement,
@@ -607,21 +607,21 @@ function lo(t = {}) {
     l == null ? void 0 : l.values,
     e.defaultSelectedValue,
     ""
-  ), f = Array.isArray(s), C = ie($($({}, v.getState()), c.getState()), {
+  ), v = Array.isArray(s), C = ie($($({}, f.getState()), c.getState()), {
     value: i,
     selectedValue: s,
     resetValueOnSelect: D(
       e.resetValueOnSelect,
       a == null ? void 0 : a.resetValueOnSelect,
-      f
+      v
     ),
     resetValueOnHide: D(
       e.resetValueOnHide,
       a == null ? void 0 : a.resetValueOnHide,
-      f && !o
+      v && !o
     ),
     activeValue: a == null ? void 0 : a.activeValue
-  }), d = ft(C, v, c, r);
+  }), d = ft(C, f, c, r);
   return ro && G(
     d,
     () => J(d, ["virtualFocus"], () => {
@@ -656,10 +656,10 @@ function lo(t = {}) {
     d,
     () => vt(d, ["moves", "renderedItems"], (p, V) => {
       if (p.moves === V.moves) return;
-      const { activeId: O } = d.getState(), g = v.item(O);
+      const { activeId: O } = d.getState(), g = f.item(O);
       d.setState("activeValue", g == null ? void 0 : g.value);
     })
-  ), ie($($($({}, c), v), d), {
+  ), ie($($($({}, c), f), d), {
     tag: o,
     setValue: (p) => d.setState("value", p),
     resetValue: () => d.setState("value", C.value),
@@ -668,7 +668,7 @@ function lo(t = {}) {
 }
 function so(t) {
   const n = oo();
-  return t = H(A({}, t), {
+  return t = U(A({}, t), {
     tag: t.tag !== void 0 ? t.tag : n
   }), ut(t);
 }
@@ -717,12 +717,12 @@ var vo = ne(
       autoSelect: l = !1,
       getAutoSelectId: a,
       setValueOnChange: m,
-      showMinLength: v = 0,
+      showMinLength: f = 0,
       showOnChange: c,
       showOnMouseDown: i,
       showOnClick: s = i,
-      showOnKeyDown: f,
-      showOnKeyPress: C = f,
+      showOnKeyDown: v,
+      showOnKeyPress: C = v,
       blurActiveItemOnClick: d,
       setValueOnClick: p = !0,
       moveOnKeyPress: V = !0,
@@ -744,68 +744,68 @@ var vo = ne(
       "moveOnKeyPress",
       "autoComplete"
     ]);
-    const K = ht();
-    e = e || K, me(
+    const R = ht();
+    e = e || R, me(
       e,
       process.env.NODE_ENV !== "production" && "Combobox must receive a `store` prop or be wrapped in a ComboboxProvider component."
     );
-    const x = se(null), [Z, k] = an(), P = se(!1), F = se(!1), b = e.useState(
+    const K = se(null), [P, _] = an(), w = se(!1), B = se(!1), b = e.useState(
       (u) => u.virtualFocus && l
-    ), y = O === "inline" || O === "both", [B, j] = de(y);
+    ), y = O === "inline" || O === "both", [j, W] = de(y);
     un(() => {
-      y && j(!0);
+      y && W(!0);
     }, [y]);
-    const h = e.useState("value"), _ = se();
-    ae(() => J(e, ["selectedValue", "activeId"], (u, I) => {
-      _.current = I.selectedValue;
+    const h = e.useState("value"), k = se();
+    ae(() => J(e, ["selectedValue", "activeId"], (u, x) => {
+      k.current = x.selectedValue;
     }), []);
     const S = e.useState((u) => {
-      var I;
-      if (y && B && !(u.activeValue && Array.isArray(u.selectedValue) && (u.selectedValue.includes(u.activeValue) || (I = _.current) != null && I.includes(u.activeValue))))
+      var x;
+      if (y && j && !(u.activeValue && Array.isArray(u.selectedValue) && (u.selectedValue.includes(u.activeValue) || (x = k.current) != null && x.includes(u.activeValue))))
         return u.activeValue;
     }), E = e.useState("renderedItems"), q = e.useState("open"), Y = e.useState("contentElement"), ee = Ce(() => {
-      if (!y || !B) return h;
+      if (!y || !j) return h;
       if (Ze(
         E,
         S,
         b
       )) {
         if ($e(h, S)) {
-          const I = (S == null ? void 0 : S.slice(h.length)) || "";
-          return h + I;
+          const x = (S == null ? void 0 : S.slice(h.length)) || "";
+          return h + x;
         }
         return h;
       }
       return S || h;
-    }, [y, B, E, S, b, h]);
+    }, [y, j, E, S, b, h]);
     ae(() => {
-      const u = x.current;
+      const u = K.current;
       if (!u) return;
-      const I = () => j(!0);
-      return u.addEventListener("combobox-item-move", I), () => {
-        u.removeEventListener("combobox-item-move", I);
+      const x = () => W(!0);
+      return u.addEventListener("combobox-item-move", x), () => {
+        u.removeEventListener("combobox-item-move", x);
       };
     }, []), ae(() => {
-      if (!y || !B || !S || !Ze(
+      if (!y || !j || !S || !Ze(
         E,
         S,
         b
       ) || !$e(h, S)) return;
-      let I = cn;
+      let x = cn;
       return queueMicrotask(() => {
-        const L = x.current;
+        const L = K.current;
         if (!L) return;
-        const { start: T, end: z } = Be(L), te = h.length, U = S.length;
-        Ie(L, te, U), I = () => {
+        const { start: T, end: z } = Be(L), te = h.length, F = S.length;
+        Ie(L, te, F), x = () => {
           if (!_e(L)) return;
           const { start: ce, end: Ft } = Be(L);
-          ce === te && Ft === U && Ie(L, T, z);
+          ce === te && Ft === F && Ie(L, T, z);
         };
-      }), () => I();
+      }), () => x();
     }, [
-      Z,
+      P,
       y,
-      B,
+      j,
       S,
       E,
       b,
@@ -817,44 +817,44 @@ var vo = ne(
       const u = dn(Y);
       if (!u) return;
       fe.current = u;
-      const I = () => {
-        P.current = !1;
+      const x = () => {
+        w.current = !1;
       }, L = () => {
-        if (!e || !P.current) return;
+        if (!e || !w.current) return;
         const { activeId: z } = e.getState();
-        z !== null && z !== M.current && (P.current = !1);
+        z !== null && z !== M.current && (w.current = !1);
       }, T = { passive: !0, capture: !0 };
-      return u.addEventListener("wheel", I, T), u.addEventListener("touchmove", I, T), u.addEventListener("scroll", L, T), () => {
-        u.removeEventListener("wheel", I, !0), u.removeEventListener("touchmove", I, !0), u.removeEventListener("scroll", L, !0);
+      return u.addEventListener("wheel", x, T), u.addEventListener("touchmove", x, T), u.addEventListener("scroll", L, T), () => {
+        u.removeEventListener("wheel", x, !0), u.removeEventListener("touchmove", x, !0), u.removeEventListener("scroll", L, !0);
       };
     }, [q, Y, e]), Ve(() => {
-      h && (F.current || (P.current = !0));
+      h && (B.current || (w.current = !0));
     }, [h]), Ve(() => {
-      b !== "always" && q || (P.current = q);
+      b !== "always" && q || (w.current = q);
     }, [b, q]);
     const ve = e.useState("resetValueOnSelect");
     Me(() => {
-      var u, I;
-      const L = P.current;
+      var u, x;
+      const L = w.current;
       if (!e || !q || !L && !ve) return;
       const { baseElement: T, contentElement: z, activeId: te } = e.getState();
       if (!(T && !_e(T))) {
         if (z != null && z.hasAttribute("data-placing")) {
-          const U = new MutationObserver(k);
-          return U.observe(z, { attributeFilter: ["data-placing"] }), () => U.disconnect();
+          const F = new MutationObserver(_);
+          return F.observe(z, { attributeFilter: ["data-placing"] }), () => F.disconnect();
         }
         if (b && L) {
-          const U = ue(E), ce = U !== void 0 ? U : (u = fo(E)) != null ? u : e.first();
+          const F = ue(E), ce = F !== void 0 ? F : (u = fo(E)) != null ? u : e.first();
           M.current = ce, e.move(ce ?? null);
         } else {
-          const U = (I = e.item(te || e.first())) == null ? void 0 : I.element;
-          U && "scrollIntoView" in U && U.scrollIntoView({ block: "nearest", inline: "nearest" });
+          const F = (x = e.item(te || e.first())) == null ? void 0 : x.element;
+          F && "scrollIntoView" in F && F.scrollIntoView({ block: "nearest", inline: "nearest" });
         }
       }
     }, [
       e,
       q,
-      Z,
+      P,
       h,
       b,
       ve,
@@ -862,52 +862,52 @@ var vo = ne(
       E
     ]), ae(() => {
       if (!y) return;
-      const u = x.current;
+      const u = K.current;
       if (!u) return;
-      const I = [u, Y].filter(
+      const x = [u, Y].filter(
         (T) => !!T
       ), L = (T) => {
-        I.every((z) => fn(T, z)) && (e == null || e.setValue(ee));
+        x.every((z) => fn(T, z)) && (e == null || e.setValue(ee));
       };
-      for (const T of I)
+      for (const T of x)
         T.addEventListener("focusout", L);
       return () => {
-        for (const T of I)
+        for (const T of x)
           T.removeEventListener("focusout", L);
       };
     }, [y, Y, e, ee]);
-    const pe = (u) => u.currentTarget.value.length >= v, Se = g.onChange, Le = R(c ?? pe), Te = R(
+    const pe = (u) => u.currentTarget.value.length >= f, Se = g.onChange, Le = H(c ?? pe), Te = H(
       // If the combobox is combined with tags, the value will be set by the tag
       // input component.
       m ?? !e.tag
     ), Re = Q((u) => {
       if (Se == null || Se(u), u.defaultPrevented || !e) return;
-      const I = u.currentTarget, { value: L, selectionStart: T, selectionEnd: z } = I, te = u.nativeEvent;
-      if (P.current = !0, co(te) && (te.isComposing && (P.current = !1, F.current = !0), y)) {
-        const U = te.inputType === "insertText" || te.inputType === "insertCompositionText", ce = T === L.length;
-        j(U && ce);
+      const x = u.currentTarget, { value: L, selectionStart: T, selectionEnd: z } = x, te = u.nativeEvent;
+      if (w.current = !0, co(te) && (te.isComposing && (w.current = !1, B.current = !0), y)) {
+        const F = te.inputType === "insertText" || te.inputType === "insertCompositionText", ce = T === L.length;
+        W(F && ce);
       }
       if (Te(u)) {
-        const U = L === e.getState().value;
+        const F = L === e.getState().value;
         e.setValue(L), queueMicrotask(() => {
-          Ie(I, T, z);
-        }), y && b && U && k();
+          Ie(x, T, z);
+        }), y && b && F && _();
       }
-      Le(u) && e.show(), (!b || !P.current) && e.setActiveId(null);
+      Le(u) && e.show(), (!b || !w.current) && e.setActiveId(null);
     }), xe = g.onCompositionEnd, Ee = Q((u) => {
-      P.current = !0, F.current = !1, xe == null || xe(u), !u.defaultPrevented && b && k();
-    }), Ke = g.onMouseDown, kt = R(
+      w.current = !0, B.current = !1, xe == null || xe(u), !u.defaultPrevented && b && _();
+    }), Ke = g.onMouseDown, kt = H(
       d ?? (() => !!(e != null && e.getState().includesBaseElement))
-    ), Mt = R(p), Nt = R(s ?? pe), Dt = Q((u) => {
+    ), Mt = H(p), Nt = H(s ?? pe), Dt = Q((u) => {
       Ke == null || Ke(u), !u.defaultPrevented && (u.button || u.ctrlKey || e && (kt(u) && e.setActiveId(null), Mt(u) && e.setValue(ee), Nt(u) && et(u.currentTarget, "mouseup", e.show)));
-    }), He = g.onKeyDown, Lt = R(C ?? pe), Tt = Q((u) => {
-      if (He == null || He(u), u.repeat || (P.current = !1), u.defaultPrevented || u.ctrlKey || u.altKey || u.shiftKey || u.metaKey || !e) return;
-      const { open: I } = e.getState();
-      I || (u.key === "ArrowUp" || u.key === "ArrowDown") && Lt(u) && (u.preventDefault(), e.show());
+    }), He = g.onKeyDown, Lt = H(C ?? pe), Tt = Q((u) => {
+      if (He == null || He(u), u.repeat || (w.current = !1), u.defaultPrevented || u.ctrlKey || u.altKey || u.shiftKey || u.metaKey || !e) return;
+      const { open: x } = e.getState();
+      x || (u.key === "ArrowUp" || u.key === "ArrowDown") && Lt(u) && (u.preventDefault(), e.show());
     }), Ue = g.onBlur, Rt = Q((u) => {
-      P.current = !1, Ue == null || Ue(u), u.defaultPrevented;
+      w.current = !1, Ue == null || Ue(u), u.defaultPrevented;
     }), Kt = Ae(g.id), Ht = mo(O) ? O : void 0, Ut = e.useState((u) => u.activeId === null);
-    return g = H(A({
+    return g = U(A({
       id: Kt,
       role: "combobox",
       "aria-autocomplete": Ht,
@@ -917,19 +917,19 @@ var vo = ne(
       "data-active-item": Ut || void 0,
       value: ee
     }, g), {
-      ref: ye(x, g.ref),
+      ref: ye(K, g.ref),
       onChange: Re,
       onCompositionEnd: Ee,
       onMouseDown: Dt,
       onKeyDown: Tt,
       onBlur: Rt
-    }), g = At(H(A({
+    }), g = At(U(A({
       store: e,
       focusable: r
     }, g), {
       // Enable inline autocomplete when the user moves from the combobox input
       // to an item.
-      moveOnKeyPress: (u) => mn(V, u) ? !1 : (y && j(!0), !0)
+      moveOnKeyPress: (u) => mn(V, u) ? !1 : (y && W(!0), !0)
     })), g = gn(A({ store: e }, g)), A({ autoComplete: "off" }, g);
   }
 ), po = re(function(n) {
@@ -938,7 +938,7 @@ var vo = ne(
 });
 function bo(t = {}) {
   const n = io(t);
-  return /* @__PURE__ */ w(yn, { value: n, children: t.children });
+  return /* @__PURE__ */ I(yn, { value: n, children: t.children });
 }
 var ho = "div";
 function So(t, n) {
@@ -961,11 +961,11 @@ var Co = ne(
       hideOnClick: l,
       setValueOnClick: a,
       selectValueOnClick: m = !0,
-      resetValueOnSelect: v,
+      resetValueOnSelect: f,
       focusOnHover: c = !1,
       moveOnKeyPress: i = !0,
       getItem: s
-    } = o, f = oe(o, [
+    } = o, v = oe(o, [
       "store",
       "value",
       "hideOnClick",
@@ -991,51 +991,51 @@ var Co = ne(
       }
     }), g = Xe(
       (h) => {
-        const _ = H(A({}, h), { value: r });
-        return s ? s(_) : _;
+        const k = U(A({}, h), { value: r });
+        return s ? s(k) : k;
       },
       [r, s]
     );
     a = a ?? !V, l = l ?? (r != null && !V);
-    const K = f.onClick, x = R(a), Z = R(m), k = R(
-      (C = v ?? p) != null ? C : V
-    ), P = R(l), F = Q((h) => {
-      K == null || K(h), !h.defaultPrevented && (ot(h) || rt(h) || (r != null && (Z(h) && (k(h) && (e == null || e.resetValue()), e == null || e.setSelectedValue((_) => Array.isArray(_) ? _.includes(r) ? _.filter((S) => S !== r) : [..._, r] : r)), x(h) && (e == null || e.setValue(r))), P(h) && (e == null || e.hide())));
-    }), b = f.onKeyDown, y = Q((h) => {
+    const R = v.onClick, K = H(a), P = H(m), _ = H(
+      (C = f ?? p) != null ? C : V
+    ), w = H(l), B = Q((h) => {
+      R == null || R(h), !h.defaultPrevented && (ot(h) || rt(h) || (r != null && (P(h) && (_(h) && (e == null || e.resetValue()), e == null || e.setSelectedValue((k) => Array.isArray(k) ? k.includes(r) ? k.filter((S) => S !== r) : [...k, r] : r)), K(h) && (e == null || e.setValue(r))), w(h) && (e == null || e.hide())));
+    }), b = v.onKeyDown, y = Q((h) => {
       if (b == null || b(h), h.defaultPrevented) return;
-      const _ = e == null ? void 0 : e.getState().baseElement;
-      if (!_ || _e(_)) return;
-      (h.key.length === 1 || h.key === "Backspace" || h.key === "Delete") && (queueMicrotask(() => _.focus()), pn(_) && (e == null || e.setValue(_.value)));
+      const k = e == null ? void 0 : e.getState().baseElement;
+      if (!k || _e(k)) return;
+      (h.key.length === 1 || h.key === "Backspace" || h.key === "Delete") && (queueMicrotask(() => k.focus()), pn(k) && (e == null || e.setValue(k.value)));
     });
-    V && O != null && (f = A({
+    V && O != null && (v = A({
       "aria-selected": O
-    }, f)), f = he(
-      f,
-      (h) => /* @__PURE__ */ w(An.Provider, { value: r, children: /* @__PURE__ */ w(xn.Provider, { value: O ?? !1, children: h }) }),
+    }, v)), v = he(
+      v,
+      (h) => /* @__PURE__ */ I(An.Provider, { value: r, children: /* @__PURE__ */ I(xn.Provider, { value: O ?? !1, children: h }) }),
       [r, O]
     );
-    const B = Pe(gt);
-    f = H(A({
-      role: go(B),
+    const j = Pe(gt);
+    v = U(A({
+      role: go(j),
       children: r
-    }, f), {
-      onClick: F,
+    }, v), {
+      onClick: B,
       onKeyDown: y
     });
-    const j = R(i);
-    return f = It(H(A({
+    const W = H(i);
+    return v = It(U(A({
       store: e
-    }, f), {
+    }, v), {
       getItem: g,
       // 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: (h) => {
-        if (!j(h)) return !1;
-        const _ = new Event("combobox-item-move"), S = e == null ? void 0 : e.getState().baseElement;
-        return S == null || S.dispatchEvent(_), !0;
+        if (!W(h)) return !1;
+        const k = new Event("combobox-item-move"), S = e == null ? void 0 : e.getState().baseElement;
+        return S == null || S.dispatchEvent(k), !0;
       }
-    })), f = xt(A({ store: e, focusOnHover: c }, f)), f;
+    })), v = xt(A({ store: e, focusOnHover: c }, v)), v;
   }
 ), Eo = nt(
   re(function(n) {
@@ -1047,40 +1047,40 @@ var Co = ne(
     var o = n, { store: e, alwaysVisible: r } = o, l = oe(o, ["store", "alwaysVisible"]);
     const a = St(!0), m = In();
     e = e || m;
-    const v = !!e && e === a;
+    const f = !!e && e === a;
     me(
       e,
       process.env.NODE_ENV !== "production" && "ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component."
     );
-    const c = se(null), i = Ae(l.id), s = e.useState("mounted"), f = yt(s, l.hidden, r), C = f ? H(A({}, l.style), { display: "none" }) : l.style, d = e.useState(
-      (k) => Array.isArray(k.selectedValue)
-    ), p = lt(c, "role", l.role), O = (p === "listbox" || p === "tree" || p === "grid") && d || void 0, [g, K] = de(!1), x = e.useState("contentElement");
+    const c = se(null), i = Ae(l.id), s = e.useState("mounted"), v = yt(s, l.hidden, r), C = v ? U(A({}, l.style), { display: "none" }) : l.style, d = e.useState(
+      (_) => Array.isArray(_.selectedValue)
+    ), p = lt(c, "role", l.role), O = (p === "listbox" || p === "tree" || p === "grid") && d || void 0, [g, R] = de(!1), K = e.useState("contentElement");
     Ve(() => {
       if (!s) return;
-      const k = c.current;
-      if (!k || x !== k) return;
-      const P = () => {
-        K(!!k.querySelector("[role='listbox']"));
-      }, F = new MutationObserver(P);
-      return F.observe(k, {
+      const _ = c.current;
+      if (!_ || K !== _) return;
+      const w = () => {
+        R(!!_.querySelector("[role='listbox']"));
+      }, B = new MutationObserver(w);
+      return B.observe(_, {
         subtree: !0,
         childList: !0,
         attributeFilter: ["role"]
-      }), P(), () => F.disconnect();
-    }, [s, x]), g || (l = A({
+      }), w(), () => B.disconnect();
+    }, [s, K]), g || (l = A({
       role: "listbox",
       "aria-multiselectable": O
     }, l)), l = he(
       l,
-      (k) => /* @__PURE__ */ w(wn, { value: e, children: /* @__PURE__ */ w(gt.Provider, { value: p, children: k }) }),
+      (_) => /* @__PURE__ */ I(wn, { value: e, children: /* @__PURE__ */ I(gt.Provider, { value: p, children: _ }) }),
       [e, p]
     );
-    const Z = i && (!a || !v) ? e.setContentElement : null;
-    return l = H(A({
+    const P = i && (!a || !f) ? e.setContentElement : null;
+    return l = U(A({
       id: i,
-      hidden: f
+      hidden: v
     }, l), {
-      ref: ye(Z, c, l.ref),
+      ref: ye(P, c, l.ref),
       style: C
     }), Ge(l);
   }
@@ -1598,7 +1598,7 @@ const Po = /* @__PURE__ */ Yt(wo);
  * @copyright (c) 2020 Kent C. Dodds
  * @author Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)
  */
-const W = {
+const Z = {
   CASE_SENSITIVE_EQUAL: 7,
   EQUAL: 6,
   STARTS_WITH: 5,
@@ -1612,29 +1612,29 @@ function _t(t, n, o) {
   o === void 0 && (o = {});
   const {
     keys: e,
-    threshold: r = W.MATCHES,
+    threshold: r = Z.MATCHES,
     baseSort: l = Vo,
     sorter: a = (c) => c.sort((i, s) => No(i, s, l))
-  } = o, m = t.reduce(v, []);
+  } = o, m = t.reduce(f, []);
   return a(m).map((c) => {
     let {
       item: i
     } = c;
     return i;
   });
-  function v(c, i, s) {
-    const f = _o(i, e, n, o), {
+  function f(c, i, s) {
+    const v = _o(i, e, n, o), {
       rank: C,
       keyThreshold: d = r
-    } = f;
+    } = v;
     return C >= d && c.push({
-      ...f,
+      ...v,
       item: i,
       index: s
     }), c;
   }
 }
-_t.rankings = W;
+_t.rankings = Z;
 function _o(t, n, o, e) {
   if (!n) {
     const l = t;
@@ -1648,34 +1648,34 @@ function _o(t, n, o, e) {
   }
   return To(t, n).reduce((l, a, m) => {
     let {
-      rank: v,
+      rank: f,
       rankedValue: c,
       keyIndex: i,
       keyThreshold: s
     } = l, {
-      itemValue: f,
+      itemValue: v,
       attributes: C
-    } = a, d = Ye(f, o, e), p = c;
+    } = a, d = Ye(v, o, e), p = c;
     const {
       minRanking: V,
       maxRanking: O,
       threshold: g
     } = C;
-    return d < V && d >= W.MATCHES ? d = V : d > O && (d = O), d > v && (v = d, i = m, s = g, p = f), {
+    return d < V && d >= Z.MATCHES ? d = V : d > O && (d = O), d > f && (f = d, i = m, s = g, p = v), {
       rankedValue: p,
-      rank: v,
+      rank: f,
       keyIndex: i,
       keyThreshold: s
     };
   }, {
     rankedValue: t,
-    rank: W.NO_MATCH,
+    rank: Z.NO_MATCH,
     keyIndex: -1,
     keyThreshold: e.threshold
   });
 }
 function Ye(t, n, o) {
-  return t = ze(t, o), n = ze(n, o), n.length > t.length ? W.NO_MATCH : t === n ? W.CASE_SENSITIVE_EQUAL : (t = t.toLowerCase(), n = n.toLowerCase(), t === n ? W.EQUAL : t.startsWith(n) ? W.STARTS_WITH : t.includes(` ${n}`) ? W.WORD_STARTS_WITH : t.includes(n) ? W.CONTAINS : n.length === 1 ? W.NO_MATCH : ko(t).includes(n) ? W.ACRONYM : Mo(t, n));
+  return t = ze(t, o), n = ze(n, o), n.length > t.length ? Z.NO_MATCH : t === n ? Z.CASE_SENSITIVE_EQUAL : (t = t.toLowerCase(), n = n.toLowerCase(), t === n ? Z.EQUAL : t.startsWith(n) ? Z.STARTS_WITH : t.includes(` ${n}`) ? Z.WORD_STARTS_WITH : t.includes(n) ? Z.CONTAINS : n.length === 1 ? Z.NO_MATCH : ko(t).includes(n) ? Z.ACRONYM : Mo(t, n));
 }
 function ko(t) {
   let n = "";
@@ -1687,24 +1687,24 @@ function ko(t) {
 }
 function Mo(t, n) {
   let o = 0, e = 0;
-  function r(v, c, i) {
-    for (let s = i, f = c.length; s < f; s++)
-      if (c[s] === v)
+  function r(f, c, i) {
+    for (let s = i, v = c.length; s < v; s++)
+      if (c[s] === f)
         return o += 1, s + 1;
     return -1;
   }
-  function l(v) {
-    const c = 1 / v, i = o / n.length;
-    return W.MATCHES + i * c;
+  function l(f) {
+    const c = 1 / f, i = o / n.length;
+    return Z.MATCHES + i * c;
   }
   const a = r(n[0], t, 0);
   if (a < 0)
-    return W.NO_MATCH;
+    return Z.NO_MATCH;
   e = a;
-  for (let v = 1, c = n.length; v < c; v++) {
-    const i = n[v];
+  for (let f = 1, c = n.length; f < c; f++) {
+    const i = n[f];
     if (e = r(i, t, e), !(e > -1))
-      return W.NO_MATCH;
+      return Z.NO_MATCH;
   }
   const m = e - a;
   return l(m);
@@ -1715,9 +1715,9 @@ function No(t, n, o) {
     keyIndex: a
   } = t, {
     rank: m,
-    keyIndex: v
+    keyIndex: f
   } = n;
-  return l === m ? a === v ? o(t, n) : a < v ? -1 : 1 : l > m ? -1 : 1;
+  return l === m ? a === f ? o(t, n) : a < f ? -1 : 1 : l > m ? -1 : 1;
 }
 function ze(t, n) {
   let {
@@ -1747,8 +1747,8 @@ function Lo(t, n) {
   for (let r = 0, l = o.length; r < l; r++) {
     const a = o[r];
     let m = [];
-    for (let v = 0, c = e.length; v < c; v++) {
-      const i = e[v];
+    for (let f = 0, c = e.length; f < c; f++) {
+      const i = e[f];
       if (i != null)
         if (Object.hasOwnProperty.call(i, a)) {
           const s = i[a];
@@ -1763,9 +1763,9 @@ function To(t, n) {
   const o = [];
   for (let e = 0, r = n.length; e < r; e++) {
     const l = n[e], a = Ro(l), m = Do(t, l);
-    for (let v = 0, c = m.length; v < c; v++)
+    for (let f = 0, c = m.length; f < c; f++)
       o.push({
-        itemValue: m[v],
+        itemValue: m[f],
         attributes: a
       });
   }
@@ -1782,108 +1782,114 @@ function Ro(t) {
   };
 }
 function cr(t) {
-  var K;
   const { baseProps: n, controlProps: o } = Qt(t, {
     className: "component-select-control"
   }), { prefix: e, suffix: r, ...l } = n, [a, m] = de(""), {
-    value: v,
+    value: f,
     onChangeValue: c = Wt,
     options: i,
     placeholder: s = "Choose an option...",
-    searchable: f = !1,
+    searchable: v = !1,
     ...C
   } = o, d = (i || []).map(Bt), p = Ce(() => _t(d, a, {
-    baseSort: (x, Z) => x.index < Z.index ? -1 : 1,
+    baseSort: (P, _) => P.index < _.index ? -1 : 1,
     keys: ["label", "description"]
-  }), [a]), V = f ? Ao : Xn, O = ((K = d.find((x) => x.value === v)) == null ? void 0 : K.label) || s;
-  return /* @__PURE__ */ w(
+  }), [a]), V = v ? Ao : Xn, O = d.find((P) => P.value === f), g = !!O, R = !g, K = g ? O.label : s;
+  return console.log({ value: f, isPlaceholder: R }), /* @__PURE__ */ I(
     bo,
     {
       resetValueOnHide: !0,
-      setValue: (x) => {
+      setValue: (P) => {
         $t(() => {
-          m(x);
+          m(P);
         });
       },
-      children: /* @__PURE__ */ w(Zn, { value: v, setValue: c, children: /* @__PURE__ */ X(zt, { ...l, children: [
-        /* @__PURE__ */ X(
-          Wn,
-          {
-            className: "component-select-control__input",
-            ...C,
-            children: [
-              /* @__PURE__ */ w(
-                "div",
-                {
-                  className: jt(
-                    "component-select-control__value",
-                    O === s && "component-select-control__value--placeholder"
+      children: /* @__PURE__ */ I(
+        Zn,
+        {
+          value: R ? "" : f,
+          setValue: c,
+          children: /* @__PURE__ */ X(zt, { ...l, children: [
+            /* @__PURE__ */ X(
+              Wn,
+              {
+                className: "component-select-control__input",
+                ...C,
+                children: [
+                  /* @__PURE__ */ I(
+                    "div",
+                    {
+                      className: jt(
+                        "component-select-control__value",
+                        R && "component-select-control__value--placeholder"
+                      ),
+                      children: /* @__PURE__ */ I(to, { fallback: s, children: () => /* @__PURE__ */ X(we, { children: [
+                        /* @__PURE__ */ I(Fe, { children: e }),
+                        /* @__PURE__ */ I("span", { className: "component-select-control__value__label", children: K }),
+                        /* @__PURE__ */ I(Fe, { suffix: !0, children: r })
+                      ] }) })
+                    }
                   ),
-                  children: /* @__PURE__ */ w(to, { fallback: s, children: () => /* @__PURE__ */ X(we, { children: [
-                    /* @__PURE__ */ w(Fe, { children: e }),
-                    /* @__PURE__ */ w("span", { className: "component-select-control__value__label", children: O }),
-                    /* @__PURE__ */ w(Fe, { suffix: !0, children: r })
-                  ] }) })
-                }
-              ),
-              /* @__PURE__ */ w("div", { className: "component-select-control__caret", children: /* @__PURE__ */ w(Zt, {}) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ X(
-          eo,
-          {
-            className: "component-select-control__popover",
-            "data-colour-scheme": "invert",
-            wrapperProps: {
-              className: "component-select-control__popover__wrapper"
-            },
-            fitViewport: !0,
-            gutter: 8,
-            overflowPadding: 4,
-            shift: -1,
-            portal: !0,
-            children: [
-              /* @__PURE__ */ X(
-                "div",
-                {
-                  className: "component-select-control__popover__search-wrapper",
-                  inert: !f,
-                  hidden: !f,
-                  children: [
-                    /* @__PURE__ */ w(Vt, { className: "component-select-control__popover__search-icon" }),
-                    /* @__PURE__ */ w(
-                      po,
-                      {
-                        autoSelect: !0,
-                        placeholder: "Search...",
-                        className: "component-select-control__popover__search"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ w(V, { className: "component-select-control__list", children: p.map((x) => /* @__PURE__ */ X(
-                zn,
-                {
-                  disabled: x.disabled,
-                  value: x.value,
-                  className: "component-select-control__option",
-                  render: /* @__PURE__ */ w(Eo, {}),
-                  children: [
-                    /* @__PURE__ */ X("div", { className: "component-select-control__option__label", children: [
-                      x.icon,
-                      x.label
-                    ] }),
-                    x.description && /* @__PURE__ */ w("div", { className: "component-select-control__option__description", children: x.description })
-                  ]
+                  /* @__PURE__ */ I("div", { className: "component-select-control__caret", children: /* @__PURE__ */ I(Zt, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ X(
+              eo,
+              {
+                className: "component-select-control__popover",
+                "data-colour-scheme": "invert",
+                wrapperProps: {
+                  className: "component-select-control__popover__wrapper"
                 },
-                x.value
-              )) })
-            ]
-          }
-        )
-      ] }) })
+                fitViewport: !0,
+                gutter: 8,
+                overflowPadding: 4,
+                shift: -1,
+                portal: !0,
+                children: [
+                  /* @__PURE__ */ X(
+                    "div",
+                    {
+                      className: "component-select-control__popover__search-wrapper",
+                      inert: !v,
+                      hidden: !v,
+                      children: [
+                        /* @__PURE__ */ I(Vt, { className: "component-select-control__popover__search-icon" }),
+                        /* @__PURE__ */ I(
+                          po,
+                          {
+                            autoSelect: !0,
+                            placeholder: "Search...",
+                            className: "component-select-control__popover__search"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ I(V, { className: "component-select-control__list", children: p.map((P) => /* @__PURE__ */ X(
+                    zn,
+                    {
+                      disabled: P.disabled,
+                      value: P.value,
+                      className: "component-select-control__option",
+                      render: /* @__PURE__ */ I(Eo, {}),
+                      children: [
+                        /* @__PURE__ */ X("div", { className: "component-select-control__option__label", children: [
+                          P.icon,
+                          P.label
+                        ] }),
+                        P.description && /* @__PURE__ */ I("div", { className: "component-select-control__option__description", children: P.description })
+                      ]
+                    },
+                    P.value
+                  )) })
+                ]
+              }
+            )
+          ] })
+        }
+      )
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wrdagency/blockout",
-	"version": "0.1.9",
+	"version": "0.1.10",
 	"description": "A React component library created by WRD.agency",
 	"type": "module",
 	"main": "dist/index.js",