@powerhousedao/connect 4.1.0-dev.106 → 4.1.0-dev.108

package/dist/assets/SettingsModal-W6c3EI1V.js

@@ -1,1723 +0,0 @@
-import { r as reactExports, j as jsxRuntimeExports, a4 as Slot, a5 as cn$1, a6 as Provider, I as Icon, a7 as useId, a8 as Primitive, a9 as Root, aa as Portal, ab as Overlay, ac as Content$1, ad as composeRefs, R as React, ae as useMediaQuery, af as useDebounceCallback, ag as Popover, ah as PopoverAnchor, ai as PopoverContent, t as twMerge, aj as clsx, ak as PopoverTrigger, al as Root3, am as Trigger, an as Portal$1, ao as Content2, ap as objectType, aq as recordType, ar as stringType, as as capitalCase, at as getDriveSharingType, P as PowerhouseButton, M as Modal, E as connectConfig, G as useDrives, m as showPHModal, N as deleteDrive, s as setSelectedDrive, au as useVetraPackages, av as makeVetraPackageManifest, aw as addExternalPackage, ax as removeExternalPackage, a as usePHModal, i as t, e as closePHModal } from "./index-DK-Td17X.js";
-import { D as Disclosure } from "./disclosure-Cdsd0yEm.js";
-import { C as ConnectDropdownMenu } from "./dropdown-menu-BJNDsW2h.js";
-import { a as useFormContext, b as useFormState, C as Controller } from "./index.esm-BTzn889G.js";
-import { c as cva } from "./index-7h14d2-k.js";
-import "./index-DXMjnAPx.js";
-const PH_PACKAGES = [
-  {
-    packageName: "@sky-ph/atlas",
-    version: "latest",
-    provider: "npm",
-    url: "https://www.npmjs.com/package/@sky-ph/atlas"
-  }
-];
-const buttonVariants = cva(cn$1("inline-flex items-center justify-center gap-2", "whitespace-nowrap rounded-md text-sm font-medium", "transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:pointer-events-none", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"), {
-  variants: {
-    variant: {
-      default: "",
-      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-      ghost: "hover:bg-accent hover:text-accent-foreground"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-const Button = reactExports.forwardRef(({ variant, className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-  return jsxRuntimeExports.jsx(Comp, { className: cn$1(buttonVariants({ variant, className })), ref, ...props });
-});
-const FormLabel = ({ children, required, disabled, description: description2, hasError, inline, className, ...htmlLabelProps }) => {
-  const classes = cn$1("inline-flex items-center text-sm font-medium", inline ? "leading-[22px]" : "leading-4", `text-gray-900 ${inline ? "dark:text-gray-400" : "dark:text-gray-50"}`, hasError && "group-hover:!text-red-900 dark:group-hover:!text-red-900", hasError && inline && "text-red-800 dark:text-red-800", hasError && !inline && "text-red-900 dark:text-red-900", disabled && `cursor-not-allowed text-gray-700 ${inline ? "dark:text-gray-600" : "dark:text-gray-300"}`, inline ? !disabled && "group-hover:text-gray-900 dark:group-hover:text-slate-50" : "mb-[3px]", className);
-  if (!children) {
-    return null;
-  }
-  const extraProps = {
-    ...htmlLabelProps
-  };
-  return jsxRuntimeExports.jsxs("label", { className: classes, ...extraProps, children: [children, required && jsxRuntimeExports.jsx("span", { className: cn$1("ml-1 text-gray-800 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-slate-50", hasError && `${inline ? "!text-red-800" : "!text-red-900"} group-hover:!text-red-900`), children: "*" }), description2 && jsxRuntimeExports.jsx(Provider, { children: jsxRuntimeExports.jsx(Tooltip, { content: description2, children: jsxRuntimeExports.jsx(Icon, { name: "CircleInfo", size: 16, className: cn$1("ml-1 cursor-pointer text-gray-600 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-500", disabled && "text-gray-500") }) }) })] });
-};
-const defaultElement = "p";
-const FormMessage = ({ children, type: type2 = "info", as, className, ...props }) => {
-  const Component = as || defaultElement;
-  const typeClasses = {
-    error: "text-red-900 dark:text-red-900",
-    info: "text-blue-900 dark:text-blue-900",
-    warning: "text-yellow-900 dark:text-yellow-900"
-  };
-  const classes = cn$1("mb-0 inline-flex items-center text-xs font-medium", typeClasses[type2], className);
-  return jsxRuntimeExports.jsx(Component, { "data-type": type2, className: classes, ...props, children });
-};
-const FormMessageList = ({ messages, type: type2 = "info", className, ...props }) => {
-  if (messages.length === 0) {
-    return null;
-  }
-  if (messages.length === 1) {
-    return jsxRuntimeExports.jsx(FormMessage, { type: type2, ...props, children: messages[0] });
-  }
-  const typeClasses = {
-    error: "before:bg-red-900 dark:before:bg-red-900",
-    info: "before:bg-blue-900 dark:before:bg-blue-900",
-    warning: "before:bg-orange-900 dark:before:bg-orange-900"
-  };
-  return jsxRuntimeExports.jsx("ul", { className: cn$1("flex flex-col gap-1", className), ...props, children: messages.map((message) => jsxRuntimeExports.jsx(FormMessage, { as: "li", type: type2, className: cn$1(
-    // Layout
-    "relative pl-4",
-    // Visual styles
-    "before:absolute before:left-0 before:top-[0.4em] before:size-2 before:rounded-full",
-    typeClasses[type2]
-  ), children: message }, message)) });
-};
-var U = 1, Y$1 = 0.9, H = 0.8, J = 0.17, p = 0.1, u = 0.999, $ = 0.9999;
-var k$1 = 0.99, m = /[\\\/_+.#"@\[\(\{&]/, B$1 = /[\\\/_+.#"@\[\(\{&]/g, K$1 = /[\s-]/, X = /[\s-]/g;
-function G(_, C, h, P2, A, f, O) {
-  if (f === C.length) return A === _.length ? U : k$1;
-  var T2 = `${A},${f}`;
-  if (O[T2] !== void 0) return O[T2];
-  for (var L2 = P2.charAt(f), c = h.indexOf(L2, A), S = 0, E, N2, R, M; c >= 0; ) E = G(_, C, h, P2, c + 1, f + 1, O), E > S && (c === A ? E *= U : m.test(_.charAt(c - 1)) ? (E *= H, R = _.slice(A, c - 1).match(B$1), R && A > 0 && (E *= Math.pow(u, R.length))) : K$1.test(_.charAt(c - 1)) ? (E *= Y$1, M = _.slice(A, c - 1).match(X), M && A > 0 && (E *= Math.pow(u, M.length))) : (E *= J, A > 0 && (E *= Math.pow(u, c - A))), _.charAt(c) !== C.charAt(f) && (E *= $)), (E < p && h.charAt(c - 1) === P2.charAt(f + 1) || P2.charAt(f + 1) === P2.charAt(f) && h.charAt(c - 1) !== P2.charAt(f)) && (N2 = G(_, C, h, P2, c + 1, f + 2, O), N2 * p > E && (E = N2 * p)), E > S && (S = E), c = h.indexOf(L2, c + 1);
-  return O[T2] = S, S;
-}
-function D(_) {
-  return _.toLowerCase().replace(X, " ");
-}
-function W(_, C, h) {
-  return _ = h && h.length > 0 ? `${_ + " " + h.join(" ")}` : _, G(_, C, D(_), D(C), 0, 0, {});
-}
-var N = '[cmdk-group=""]', Y = '[cmdk-group-items=""]', be = '[cmdk-group-heading=""]', le = '[cmdk-item=""]', ce = `${le}:not([aria-disabled="true"])`, Z = "cmdk-item-select", T = "data-value", Re = (r, o, n) => W(r, o, n), ue = reactExports.createContext(void 0), K = () => reactExports.useContext(ue), de = reactExports.createContext(void 0), ee = () => reactExports.useContext(de), fe = reactExports.createContext(void 0), me = reactExports.forwardRef((r, o) => {
-  let n = L(() => {
-    var e, a;
-    return { search: "", value: (a = (e = r.value) != null ? e : r.defaultValue) != null ? a : "", selectedItemId: void 0, filtered: { count: 0, items: /* @__PURE__ */ new Map(), groups: /* @__PURE__ */ new Set() } };
-  }), u2 = L(() => /* @__PURE__ */ new Set()), c = L(() => /* @__PURE__ */ new Map()), d = L(() => /* @__PURE__ */ new Map()), f = L(() => /* @__PURE__ */ new Set()), p2 = pe(r), { label: b, children: m2, value: R, onValueChange: x, filter: C, shouldFilter: S, loop: A, disablePointerSelection: ge = false, vimBindings: j = true, ...O } = r, $2 = useId(), q = useId(), _ = useId(), I = reactExports.useRef(null), v = ke();
-  k(() => {
-    if (R !== void 0) {
-      let e = R.trim();
-      n.current.value = e, E.emit();
-    }
-  }, [R]), k(() => {
-    v(6, ne);
-  }, []);
-  let E = reactExports.useMemo(() => ({ subscribe: (e) => (f.current.add(e), () => f.current.delete(e)), snapshot: () => n.current, setState: (e, a, s) => {
-    var i, l, g, y;
-    if (!Object.is(n.current[e], a)) {
-      if (n.current[e] = a, e === "search") J2(), z(), v(1, W2);
-      else if (e === "value") {
-        if (document.activeElement.hasAttribute("cmdk-input") || document.activeElement.hasAttribute("cmdk-root")) {
-          let h = document.getElementById(_);
-          h ? h.focus() : (i = document.getElementById($2)) == null || i.focus();
-        }
-        if (v(7, () => {
-          var h;
-          n.current.selectedItemId = (h = M()) == null ? void 0 : h.id, E.emit();
-        }), s || v(5, ne), ((l = p2.current) == null ? void 0 : l.value) !== void 0) {
-          let h = a != null ? a : "";
-          (y = (g = p2.current).onValueChange) == null || y.call(g, h);
-          return;
-        }
-      }
-      E.emit();
-    }
-  }, emit: () => {
-    f.current.forEach((e) => e());
-  } }), []), U2 = reactExports.useMemo(() => ({ value: (e, a, s) => {
-    var i;
-    a !== ((i = d.current.get(e)) == null ? void 0 : i.value) && (d.current.set(e, { value: a, keywords: s }), n.current.filtered.items.set(e, te(a, s)), v(2, () => {
-      z(), E.emit();
-    }));
-  }, item: (e, a) => (u2.current.add(e), a && (c.current.has(a) ? c.current.get(a).add(e) : c.current.set(a, /* @__PURE__ */ new Set([e]))), v(3, () => {
-    J2(), z(), n.current.value || W2(), E.emit();
-  }), () => {
-    d.current.delete(e), u2.current.delete(e), n.current.filtered.items.delete(e);
-    let s = M();
-    v(4, () => {
-      J2(), (s == null ? void 0 : s.getAttribute("id")) === e && W2(), E.emit();
-    });
-  }), group: (e) => (c.current.has(e) || c.current.set(e, /* @__PURE__ */ new Set()), () => {
-    d.current.delete(e), c.current.delete(e);
-  }), filter: () => p2.current.shouldFilter, label: b || r["aria-label"], getDisablePointerSelection: () => p2.current.disablePointerSelection, listId: $2, inputId: _, labelId: q, listInnerRef: I }), []);
-  function te(e, a) {
-    var i, l;
-    let s = (l = (i = p2.current) == null ? void 0 : i.filter) != null ? l : Re;
-    return e ? s(e, n.current.search, a) : 0;
-  }
-  function z() {
-    if (!n.current.search || p2.current.shouldFilter === false) return;
-    let e = n.current.filtered.items, a = [];
-    n.current.filtered.groups.forEach((i) => {
-      let l = c.current.get(i), g = 0;
-      l.forEach((y) => {
-        let h = e.get(y);
-        g = Math.max(h, g);
-      }), a.push([i, g]);
-    });
-    let s = I.current;
-    V().sort((i, l) => {
-      var h, F;
-      let g = i.getAttribute("id"), y = l.getAttribute("id");
-      return ((h = e.get(y)) != null ? h : 0) - ((F = e.get(g)) != null ? F : 0);
-    }).forEach((i) => {
-      let l = i.closest(Y);
-      l ? l.appendChild(i.parentElement === l ? i : i.closest(`${Y} > *`)) : s.appendChild(i.parentElement === s ? i : i.closest(`${Y} > *`));
-    }), a.sort((i, l) => l[1] - i[1]).forEach((i) => {
-      var g;
-      let l = (g = I.current) == null ? void 0 : g.querySelector(`${N}[${T}="${encodeURIComponent(i[0])}"]`);
-      l == null || l.parentElement.appendChild(l);
-    });
-  }
-  function W2() {
-    let e = V().find((s) => s.getAttribute("aria-disabled") !== "true"), a = e == null ? void 0 : e.getAttribute(T);
-    E.setState("value", a || void 0);
-  }
-  function J2() {
-    var a, s, i, l;
-    if (!n.current.search || p2.current.shouldFilter === false) {
-      n.current.filtered.count = u2.current.size;
-      return;
-    }
-    n.current.filtered.groups = /* @__PURE__ */ new Set();
-    let e = 0;
-    for (let g of u2.current) {
-      let y = (s = (a = d.current.get(g)) == null ? void 0 : a.value) != null ? s : "", h = (l = (i = d.current.get(g)) == null ? void 0 : i.keywords) != null ? l : [], F = te(y, h);
-      n.current.filtered.items.set(g, F), F > 0 && e++;
-    }
-    for (let [g, y] of c.current) for (let h of y) if (n.current.filtered.items.get(h) > 0) {
-      n.current.filtered.groups.add(g);
-      break;
-    }
-    n.current.filtered.count = e;
-  }
-  function ne() {
-    var a, s, i;
-    let e = M();
-    e && (((a = e.parentElement) == null ? void 0 : a.firstChild) === e && ((i = (s = e.closest(N)) == null ? void 0 : s.querySelector(be)) == null || i.scrollIntoView({ block: "nearest" })), e.scrollIntoView({ block: "nearest" }));
-  }
-  function M() {
-    var e;
-    return (e = I.current) == null ? void 0 : e.querySelector(`${le}[aria-selected="true"]`);
-  }
-  function V() {
-    var e;
-    return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
-  }
-  function X2(e) {
-    let s = V()[e];
-    s && E.setState("value", s.getAttribute(T));
-  }
-  function Q(e) {
-    var g;
-    let a = M(), s = V(), i = s.findIndex((y) => y === a), l = s[i + e];
-    (g = p2.current) != null && g.loop && (l = i + e < 0 ? s[s.length - 1] : i + e === s.length ? s[0] : s[i + e]), l && E.setState("value", l.getAttribute(T));
-  }
-  function re(e) {
-    let a = M(), s = a == null ? void 0 : a.closest(N), i;
-    for (; s && !i; ) s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
-    i ? E.setState("value", i.getAttribute(T)) : Q(e);
-  }
-  let oe = () => X2(V().length - 1), ie = (e) => {
-    e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
-  }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X2(0) : e.altKey ? re(-1) : Q(-1);
-  };
-  return reactExports.createElement(Primitive.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
-    var s;
-    (s = O.onKeyDown) == null || s.call(O, e);
-    let a = e.nativeEvent.isComposing || e.keyCode === 229;
-    if (!(e.defaultPrevented || a)) switch (e.key) {
-      case "n":
-      case "j": {
-        j && e.ctrlKey && ie(e);
-        break;
-      }
-      case "ArrowDown": {
-        ie(e);
-        break;
-      }
-      case "p":
-      case "k": {
-        j && e.ctrlKey && se(e);
-        break;
-      }
-      case "ArrowUp": {
-        se(e);
-        break;
-      }
-      case "Home": {
-        e.preventDefault(), X2(0);
-        break;
-      }
-      case "End": {
-        e.preventDefault(), oe();
-        break;
-      }
-      case "Enter": {
-        e.preventDefault();
-        let i = M();
-        if (i) {
-          let l = new Event(Z);
-          i.dispatchEvent(l);
-        }
-      }
-    }
-  } }, reactExports.createElement("label", { "cmdk-label": "", htmlFor: U2.inputId, id: U2.labelId, style: Te }, b), B(r, (e) => reactExports.createElement(de.Provider, { value: E }, reactExports.createElement(ue.Provider, { value: U2 }, e))));
-}), he = reactExports.forwardRef((r, o) => {
-  var _, I;
-  let n = useId(), u2 = reactExports.useRef(null), c = reactExports.useContext(fe), d = K(), f = pe(r), p2 = (I = (_ = f.current) == null ? void 0 : _.forceMount) != null ? I : c == null ? void 0 : c.forceMount;
-  k(() => {
-    if (!p2) return d.item(n, c == null ? void 0 : c.id);
-  }, [p2]);
-  let b = ve(n, u2, [r.value, r.children, u2], r.keywords), m2 = ee(), R = P((v) => v.value && v.value === b.current), x = P((v) => p2 || d.filter() === false ? true : v.search ? v.filtered.items.get(n) > 0 : true);
-  reactExports.useEffect(() => {
-    let v = u2.current;
-    if (!(!v || r.disabled)) return v.addEventListener(Z, C), () => v.removeEventListener(Z, C);
-  }, [x, r.onSelect, r.disabled]);
-  function C() {
-    var v, E;
-    S(), (E = (v = f.current).onSelect) == null || E.call(v, b.current);
-  }
-  function S() {
-    m2.setState("value", b.current, true);
-  }
-  if (!x) return null;
-  let { disabled: A, value: ge, onSelect: j, forceMount: O, keywords: $2, ...q } = r;
-  return reactExports.createElement(Primitive.div, { ref: composeRefs(u2, o), ...q, id: n, "cmdk-item": "", role: "option", "aria-disabled": !!A, "aria-selected": !!R, "data-disabled": !!A, "data-selected": !!R, onPointerMove: A || d.getDisablePointerSelection() ? void 0 : S, onClick: A ? void 0 : C }, r.children);
-}), Ee = reactExports.forwardRef((r, o) => {
-  let { heading: n, children: u2, forceMount: c, ...d } = r, f = useId(), p2 = reactExports.useRef(null), b = reactExports.useRef(null), m2 = useId(), R = K(), x = P((S) => c || R.filter() === false ? true : S.search ? S.filtered.groups.has(f) : true);
-  k(() => R.group(f), []), ve(f, p2, [r.value, r.heading, b]);
-  let C = reactExports.useMemo(() => ({ id: f, forceMount: c }), [c]);
-  return reactExports.createElement(Primitive.div, { ref: composeRefs(p2, o), ...d, "cmdk-group": "", role: "presentation", hidden: x ? void 0 : true }, n && reactExports.createElement("div", { ref: b, "cmdk-group-heading": "", "aria-hidden": true, id: m2 }, n), B(r, (S) => reactExports.createElement("div", { "cmdk-group-items": "", role: "group", "aria-labelledby": n ? m2 : void 0 }, reactExports.createElement(fe.Provider, { value: C }, S))));
-}), ye = reactExports.forwardRef((r, o) => {
-  let { alwaysRender: n, ...u2 } = r, c = reactExports.useRef(null), d = P((f) => !f.search);
-  return !n && !d ? null : reactExports.createElement(Primitive.div, { ref: composeRefs(c, o), ...u2, "cmdk-separator": "", role: "separator" });
-}), Se = reactExports.forwardRef((r, o) => {
-  let { onValueChange: n, ...u2 } = r, c = r.value != null, d = ee(), f = P((m2) => m2.search), p2 = P((m2) => m2.selectedItemId), b = K();
-  return reactExports.useEffect(() => {
-    r.value != null && d.setState("search", r.value);
-  }, [r.value]), reactExports.createElement(Primitive.input, { ref: o, ...u2, "cmdk-input": "", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-expanded": true, "aria-controls": b.listId, "aria-labelledby": b.labelId, "aria-activedescendant": p2, id: b.inputId, type: "text", value: c ? r.value : f, onChange: (m2) => {
-    c || d.setState("search", m2.target.value), n == null || n(m2.target.value);
-  } });
-}), Ce = reactExports.forwardRef((r, o) => {
-  let { children: n, label: u2 = "Suggestions", ...c } = r, d = reactExports.useRef(null), f = reactExports.useRef(null), p2 = P((m2) => m2.selectedItemId), b = K();
-  return reactExports.useEffect(() => {
-    if (f.current && d.current) {
-      let m2 = f.current, R = d.current, x, C = new ResizeObserver(() => {
-        x = requestAnimationFrame(() => {
-          let S = m2.offsetHeight;
-          R.style.setProperty("--cmdk-list-height", S.toFixed(1) + "px");
-        });
-      });
-      return C.observe(m2), () => {
-        cancelAnimationFrame(x), C.unobserve(m2);
-      };
-    }
-  }, []), reactExports.createElement(Primitive.div, { ref: composeRefs(d, o), ...c, "cmdk-list": "", role: "listbox", tabIndex: -1, "aria-activedescendant": p2, "aria-label": u2, id: b.listId }, B(r, (m2) => reactExports.createElement("div", { ref: composeRefs(f, b.listInnerRef), "cmdk-list-sizer": "" }, m2)));
-}), xe = reactExports.forwardRef((r, o) => {
-  let { open: n, onOpenChange: u2, overlayClassName: c, contentClassName: d, container: f, ...p2 } = r;
-  return reactExports.createElement(Root, { open: n, onOpenChange: u2 }, reactExports.createElement(Portal, { container: f }, reactExports.createElement(Overlay, { "cmdk-overlay": "", className: c }), reactExports.createElement(Content$1, { "aria-label": r.label, "cmdk-dialog": "", className: d }, reactExports.createElement(me, { ref: o, ...p2 }))));
-}), Ie = reactExports.forwardRef((r, o) => P((u2) => u2.filtered.count === 0) ? reactExports.createElement(Primitive.div, { ref: o, ...r, "cmdk-empty": "", role: "presentation" }) : null), Pe = reactExports.forwardRef((r, o) => {
-  let { progress: n, children: u2, label: c = "Loading...", ...d } = r;
-  return reactExports.createElement(Primitive.div, { ref: o, ...d, "cmdk-loading": "", role: "progressbar", "aria-valuenow": n, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": c }, B(r, (f) => reactExports.createElement("div", { "aria-hidden": true }, f)));
-}), _e = Object.assign(me, { List: Ce, Item: he, Input: Se, Group: Ee, Separator: ye, Dialog: xe, Empty: Ie, Loading: Pe });
-function we(r, o) {
-  let n = r.nextElementSibling;
-  for (; n; ) {
-    if (n.matches(o)) return n;
-    n = n.nextElementSibling;
-  }
-}
-function De(r, o) {
-  let n = r.previousElementSibling;
-  for (; n; ) {
-    if (n.matches(o)) return n;
-    n = n.previousElementSibling;
-  }
-}
-function pe(r) {
-  let o = reactExports.useRef(r);
-  return k(() => {
-    o.current = r;
-  }), o;
-}
-var k = typeof window == "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
-function L(r) {
-  let o = reactExports.useRef();
-  return o.current === void 0 && (o.current = r()), o;
-}
-function P(r) {
-  let o = ee(), n = () => r(o.snapshot());
-  return reactExports.useSyncExternalStore(o.subscribe, n, n);
-}
-function ve(r, o, n, u2 = []) {
-  let c = reactExports.useRef(), d = K();
-  return k(() => {
-    var b;
-    let f = (() => {
-      var m2;
-      for (let R of n) {
-        if (typeof R == "string") return R.trim();
-        if (typeof R == "object" && "current" in R) return R.current ? (m2 = R.current.textContent) == null ? void 0 : m2.trim() : c.current;
-      }
-    })(), p2 = u2.map((m2) => m2.trim());
-    d.value(r, f, p2), (b = o.current) == null || b.setAttribute(T, f), c.current = f;
-  }), c;
-}
-var ke = () => {
-  let [r, o] = reactExports.useState(), n = L(() => /* @__PURE__ */ new Map());
-  return k(() => {
-    n.current.forEach((u2) => u2()), n.current = /* @__PURE__ */ new Map();
-  }, [r]), (u2, c) => {
-    n.current.set(u2, c), o({});
-  };
-};
-function Me(r) {
-  let o = r.type;
-  return typeof o == "function" ? o(r.props) : "render" in o ? o.render(r.props) : r;
-}
-function B({ asChild: r, children: o }, n) {
-  return r && reactExports.isValidElement(o) ? reactExports.cloneElement(Me(o), { ref: o.ref }, n(o.props.children)) : n(o);
-}
-var Te = { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" };
-const Command = React.forwardRef(({ className, ...props }, ref) => jsxRuntimeExports.jsx(_e, { ref, className: cn$1("flex size-full flex-col rounded-md [&_[cmdk-label]]:hidden", className), ...props }));
-Command.displayName = _e.displayName;
-const CommandInput = React.forwardRef(({ wrapperClassName, className, ...props }, ref) => jsxRuntimeExports.jsxs("div", { className: cn$1("group relative flex items-center border-b", "border-b-gray-300 dark:border-b-gray-900", "hover:border-b-gray-300 dark:hover:border-b-gray-800", "hover:bg-gray-100 dark:hover:bg-gray-900", "focus-within:border-b-gray-300 dark:focus-within:border-b-gray-800", "focus-within:bg-gray-100 dark:focus-within:bg-gray-900", wrapperClassName), "cmdk-input-wrapper": "", children: [jsxRuntimeExports.jsx(Icon, { name: "Search", size: 16, className: cn$1("pointer-events-none absolute left-2 top-3.5 text-gray-500 dark:text-gray-700", "group-hover:text-gray-700 dark:group-hover:text-gray-500", "group-focus-within:!text-gray-900 dark:group-focus-within:!text-gray-50") }), jsxRuntimeExports.jsx(_e.Input, { ref, className: cn$1("flex w-full bg-transparent pb-2 pl-8 pr-3 pt-3 text-[14px] font-normal leading-5 outline-none", "placeholder:text-gray-500 dark:placeholder:text-gray-700", "group-hover:placeholder:text-gray-700 dark:group-hover:placeholder:text-gray-500", "group-focus-within:placeholder:!text-gray-700 dark:group-focus-within:placeholder:!text-gray-300", "disabled:cursor-not-allowed", className), ...props })] }));
-CommandInput.displayName = _e.Input.displayName;
-const CommandList = React.forwardRef(({ className, ...props }, ref) => jsxRuntimeExports.jsx(_e.List, { ref, className: cn$1("max-h-[300px] overflow-y-auto overflow-x-hidden", "focus:outline-none", "scrollbar-thin scrollbar-gutter-stable", "scrollbar-track-transparent", "scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-300", "dark:scrollbar-thumb-charcoal-700 dark:hover:scrollbar-thumb-charcoal-700", "scrollbar-thumb-rounded-md", className), ...props }));
-CommandList.displayName = _e.List.displayName;
-const CommandLoading = React.forwardRef((props, ref) => jsxRuntimeExports.jsx(_e.Loading, { ref, ...props }));
-CommandLoading.displayName = _e.Loading.displayName;
-const CommandEmpty = React.forwardRef((props, ref) => jsxRuntimeExports.jsx(_e.Empty, { ref, ...props }));
-CommandEmpty.displayName = _e.Empty.displayName;
-const CommandGroup = React.forwardRef(({ className, ...props }, ref) => jsxRuntimeExports.jsx(_e.Group, { ref, className: cn$1("overflow-hidden px-0.5 py-1", "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className), ...props }));
-CommandGroup.displayName = _e.Group.displayName;
-const CommandItem = React.forwardRef(({ className, ...props }, ref) => jsxRuntimeExports.jsx(_e.Item, { ref, className: cn$1("relative flex select-none items-center justify-between", "h-8 gap-2 rounded-md py-1.5 pl-1.5 pr-2.5", "text-[14px] leading-4 outline-none", "border-y-2 border-white dark:border-slate-600", "data-[disabled=true]:pointer-events-none", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className), ...props }));
-CommandItem.displayName = _e.Item.displayName;
-const FormDescription = ({ children, as, className }) => {
-  const Component = as ?? "p";
-  return jsxRuntimeExports.jsx(Component, { className: cn$1("font-sans text-sm font-normal leading-5 text-gray-600 dark:text-gray-500", className), children });
-};
-const FormGroup = ({ children }) => {
-  return jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-2", children });
-};
-const IdAutocompleteInputContainer = React.forwardRef(({ id, name: name2, value, className, isLoading, haveFetchError, disabled, onChange, onBlur, onClick, selectedOption, optionsLength, handleOpenChange, onKeyDown, onMouseDown, placeholder, hasError, label, required, isPopoverOpen, maxLength, handlePaste, onPaste, ...props }, ref) => {
-  const [hasCopied, setHasCopied] = reactExports.useState(false);
-  const hasHover = useMediaQuery("(hover: hover) and (pointer: fine)");
-  const transformers = reactExports.useMemo(() => [
-    sharedValueTransformers.trimOnBlur(),
-    sharedValueTransformers.trimOnEnter()
-  ], []);
-  return jsxRuntimeExports.jsxs("div", { className: cn$1("group relative"), children: [jsxRuntimeExports.jsx(ValueTransformer, { transformers, children: jsxRuntimeExports.jsx(_e.Input, { asChild: true, children: jsxRuntimeExports.jsx(Input, { id, name: name2, value, className: cn$1("pr-9", className), disabled, onChange, onBlur, onClick: (e) => {
-    const input = e.target;
-    if (!(isLoading || haveFetchError) && !selectedOption && input.value !== "") {
-      handleOpenChange?.(true);
-    }
-    onClick?.(e);
-  }, onKeyDown: (e) => {
-    onKeyDown?.(e);
-    const isOptionsRelatedKey = [
-      "ArrowUp",
-      "ArrowDown",
-      "Enter"
-    ].includes(e.key);
-    if (e.key === "Enter" && isPopoverOpen && optionsLength === 0) {
-      handleOpenChange?.(false);
-      e.preventDefault();
-      return;
-    }
-    if (!(isOptionsRelatedKey && isPopoverOpen && optionsLength > 0)) {
-      e.stopPropagation();
-    }
-  }, onMouseDown: (e) => {
-    const input = e.target;
-    if (!input.contains(document.activeElement)) {
-      requestAnimationFrame(() => {
-        input.select();
-      });
-    }
-    onMouseDown?.(e);
-  }, onPaste: (e) => {
-    handlePaste?.(e);
-    onPaste?.(e);
-  }, placeholder, "aria-invalid": hasError, "aria-label": !label ? "Id Autocomplete" : void 0, "aria-required": required, "aria-expanded": isPopoverOpen, maxLength, ...props, ref }) }) }), jsxRuntimeExports.jsxs("div", { className: cn$1("absolute right-3 top-1/2 flex size-4 -translate-y-1/2 items-center", !isLoading && !haveFetchError && !selectedOption && "pointer-events-none"), children: [isLoading && jsxRuntimeExports.jsx(Icon, { name: "Reload", size: 16, className: cn$1("animate-spin text-gray-500 dark:text-gray-600") }), haveFetchError && jsxRuntimeExports.jsx(Provider, { children: jsxRuntimeExports.jsx(Tooltip, { content: "Network error!", children: jsxRuntimeExports.jsx(Icon, { name: "Error", size: 16, className: cn$1("text-red-900") }) }) }), selectedOption && !isLoading && !haveFetchError && jsxRuntimeExports.jsx(Provider, { children: jsxRuntimeExports.jsx(Tooltip, { content: "Copied!", open: hasCopied, triggerAsChild: true, children: jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
-    navigator.clipboard.writeText(selectedOption.value).then(() => {
-      setHasCopied(true);
-      setTimeout(() => setHasCopied(false), 2e3);
-    }).catch((error) => {
-      console.error("Failed to copy value: ", error);
-    });
-  }, className: cn$1("focus-visible:outline-none [&_svg]:pointer-events-none", hasHover && "opacity-0 transition-opacity duration-500 group-hover:opacity-100"), children: jsxRuntimeExports.jsx(Icon, { name: "Copy", size: 16, className: cn$1("text-gray-500 dark:text-gray-600") }) }) }) })] })] });
-});
-const IconRenderer = ({ customIcon, asPlaceholder }) => {
-  if (typeof customIcon === "string") {
-    return jsxRuntimeExports.jsx(Icon, { name: customIcon, size: 24, className: cn$1("shrink-0", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-900 dark:text-gray-300") });
-  }
-  if (React.isValidElement(customIcon)) {
-    return jsxRuntimeExports.jsx("div", { className: "size-6 shrink-0 overflow-hidden", children: customIcon });
-  }
-  return null;
-};
-const ReloadButton = ({ isLoadingSelectedOption, handleFetchSelectedOption, isFetchSelectedOptionSync, value }) => jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("button", { type: "button", disabled: isLoadingSelectedOption || isFetchSelectedOptionSync, onClick: () => {
-  if (!isLoadingSelectedOption && !isFetchSelectedOptionSync) {
-    handleFetchSelectedOption(value);
-  }
-}, className: cn$1("mt-0.5 focus-visible:outline-none", "disabled:pointer-events-none [&_svg]:pointer-events-none"), "aria-label": isLoadingSelectedOption ? "Loading" : isFetchSelectedOptionSync ? "Success" : "Reload", children: jsxRuntimeExports.jsx(Icon, { name: isFetchSelectedOptionSync ? "Checkmark" : "Reload", size: 16, className: cn$1("text-gray-500 dark:text-gray-600", isLoadingSelectedOption && "animate-spin", isFetchSelectedOptionSync && "animate-in fade-in duration-500") }) }) });
-const IdAutocompleteListOption = ({ variant = "withValue", icon, title = "Title not available", path = "Path not available", value, description: description2 = "Description not available", asPlaceholder, showValue = true, isLoadingSelectedOption, handleFetchSelectedOption, isFetchSelectedOptionSync, className, placeholderIcon = "PowerhouseLogoSmall", ...extraProps }) => {
-  const renderWithValue = () => jsxRuntimeExports.jsx("div", { className: cn$1("flex w-full items-center"), children: jsxRuntimeExports.jsx("span", { className: cn$1("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"), children: value }) });
-  const renderWithValueTitleAndDescription = (showDescription = true) => jsxRuntimeExports.jsxs("div", { className: cn$1("flex w-full flex-col gap-1"), children: [jsxRuntimeExports.jsxs("div", { className: cn$1("flex gap-2"), children: [jsxRuntimeExports.jsx(IconRenderer, { customIcon: asPlaceholder ? placeholderIcon : icon, asPlaceholder }), jsxRuntimeExports.jsxs("div", { className: cn$1("flex min-w-0 grow flex-col gap-[-2px]"), children: [jsxRuntimeExports.jsx("span", { className: cn$1("truncate text-sm font-bold leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-900 dark:text-gray-300"), children: title }), !showValue && typeof path === "object" ? jsxRuntimeExports.jsx("a", { href: path.url, target: "_blank", rel: "noopener noreferrer", className: cn$1("truncate text-xs leading-5 text-blue-900 hover:underline focus-visible:outline-none"), children: path.text }) : jsxRuntimeExports.jsx("span", { className: cn$1("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"), children: typeof path === "object" ? path.text : path })] }), asPlaceholder === false && handleFetchSelectedOption && jsxRuntimeExports.jsx(ReloadButton, { isLoadingSelectedOption, handleFetchSelectedOption, isFetchSelectedOptionSync, value })] }), showValue && jsxRuntimeExports.jsx("div", { className: cn$1("flex max-w-full items-center"), children: jsxRuntimeExports.jsx("span", { className: cn$1("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"), children: value }) }), showDescription && jsxRuntimeExports.jsx("div", { className: cn$1("flex flex-col"), children: jsxRuntimeExports.jsx("p", { className: cn$1("line-clamp-2 text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-900 dark:text-gray-300"), children: description2 }) }), showDescription && "agentType" in extraProps && typeof extraProps.agentType === "string" && jsxRuntimeExports.jsx("div", { className: cn$1("flex max-w-full items-center justify-end"), children: jsxRuntimeExports.jsx("span", { className: cn$1("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"), children: extraProps.agentType }) })] });
-  return jsxRuntimeExports.jsxs("div", { className: cn$1("w-full max-w-full rounded-md bg-transparent px-3 pb-2", variant === "withValue" ? "pt-2" : "pt-3", className), children: [variant === "withValue" && renderWithValue(), variant === "withValueAndTitle" && renderWithValueTitleAndDescription(false), variant === "withValueTitleAndDescription" && renderWithValueTitleAndDescription()] });
-};
-const IdAutocompleteList = ({ variant, commandListRef, selectedValue, options = [], toggleOption, renderOption, previewPlaceholder }) => {
-  const cmdkSearch = P((state) => state.search);
-  const defaultOption = previewPlaceholder || {
-    value: "value not available",
-    title: "Title not available",
-    path: "Path not available",
-    description: "Description not available"
-  };
-  reactExports.useEffect(() => {
-    commandListRef?.current?.scrollTo({ top: 0, behavior: "instant" });
-  }, [commandListRef, cmdkSearch]);
-  return jsxRuntimeExports.jsxs(CommandList, { ref: commandListRef, children: [jsxRuntimeExports.jsx(CommandEmpty, { className: cn$1("h-full p-1"), children: renderOption ? renderOption(defaultOption, {
-    asPlaceholder: true,
-    showValue: true,
-    className: cn$1("pb-0")
-  }) : jsxRuntimeExports.jsx(IdAutocompleteListOption, { variant, icon: defaultOption.icon, title: defaultOption.title, path: defaultOption.path, value: defaultOption.value, description: defaultOption.description, asPlaceholder: true, className: cn$1("pb-0") }) }), jsxRuntimeExports.jsx(CommandGroup, { className: cn$1("px-1"), children: options.map((opt) => {
-    const isSelected = selectedValue === opt.value;
-    return jsxRuntimeExports.jsx(CommandItem, { value: opt.value, onSelect: () => toggleOption?.(opt.value), className: cn$1("h-full cursor-pointer border-y-0 p-0", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900"), role: "option", "aria-selected": isSelected, children: renderOption ? renderOption(opt, {
-      asPlaceholder: false,
-      showValue: true
-    }) : jsxRuntimeExports.jsx(IdAutocompleteListOption, { variant, ...opt }) }, opt.value);
-  }) })] });
-};
-const IdAutocompleteContext = reactExports.createContext({});
-const useIdAutocompleteContext = () => reactExports.useContext(IdAutocompleteContext);
-function useIdAutocomplete({ autoComplete, defaultValue, value, isOpenByDefault, initialOptions, onChange, onBlur, fetchOptions, fetchSelectedOption }) {
-  const context = useIdAutocompleteContext();
-  const shouldFetchOptions = reactExports.useRef(false);
-  const isInternalChange = reactExports.useRef(false);
-  const commandListRef = reactExports.useRef(null);
-  const [isPopoverOpen, setIsPopoverOpen] = reactExports.useState(isOpenByDefault ?? false);
-  const [options, setOptions] = reactExports.useState(initialOptions ?? []);
-  const [isLoading, setIsLoading] = reactExports.useState(false);
-  const [isLoadingSelectedOption, setIsLoadingSelectedOption] = reactExports.useState(false);
-  const [haveFetchError, setHaveFetchError] = reactExports.useState(false);
-  const [selectedValue, setSelectedValue] = reactExports.useState(value ?? defaultValue ?? "");
-  const [selectedOption, setSelectedOption] = reactExports.useState(void 0);
-  const [commandValue, setCommandValue] = reactExports.useState("");
-  const [isFetchSelectedOptionSync, setIsFetchSelectedOptionSync] = reactExports.useState(false);
-  const clear = reactExports.useCallback(() => {
-    setHaveFetchError(false);
-    setIsLoading(false);
-    setIsLoadingSelectedOption(false);
-    setIsPopoverOpen(false);
-  }, []);
-  const debouncedFetchOptions = useDebounceCallback(reactExports.useCallback((newValue) => {
-    if (!autoComplete || !fetchOptions)
-      return;
-    if (newValue === "") {
-      clear();
-      setOptions([]);
-      setSelectedValue("");
-      setSelectedOption(void 0);
-      return;
-    }
-    setHaveFetchError(false);
-    setIsLoading(true);
-    try {
-      const result = fetchOptions(newValue, context);
-      Promise.resolve(result).then((newOptions) => {
-        setOptions(newOptions);
-        const matchingOption = newOptions.find((opt) => opt.value === newValue);
-        if (matchingOption) {
-          setSelectedOption(matchingOption);
-          setIsPopoverOpen(false);
-        } else {
-          setSelectedOption(void 0);
-          setIsPopoverOpen(true);
-        }
-        setIsLoading(false);
-      }).catch(() => {
-        setHaveFetchError(true);
-        setIsLoading(false);
-      });
-    } catch {
-      setHaveFetchError(true);
-      setIsLoading(false);
-    }
-  }, [clear, autoComplete, fetchOptions, context]));
-  const handleFetchSelectedOption = reactExports.useCallback((value2) => {
-    if (!autoComplete || !fetchSelectedOption)
-      return;
-    setIsLoadingSelectedOption(true);
-    try {
-      const result = fetchSelectedOption(value2);
-      const isPromise = result instanceof Promise;
-      Promise.resolve(result).then((option) => {
-        if (option) {
-          setSelectedOption(option);
-          setOptions((prevOptions) => {
-            const optionIndex = prevOptions.findIndex((opt) => opt.value === value2);
-            if (optionIndex !== -1) {
-              const newOptions = [...prevOptions];
-              newOptions[optionIndex] = option;
-              return newOptions;
-            }
-            return prevOptions;
-          });
-        } else {
-          clear();
-          setOptions([]);
-          setSelectedValue("");
-          setSelectedOption(void 0);
-        }
-        setIsLoadingSelectedOption(false);
-        if (!isPromise) {
-          setIsFetchSelectedOptionSync(true);
-          setTimeout(() => {
-            setIsFetchSelectedOptionSync(false);
-          }, 1500);
-        }
-      }).catch(() => {
-        setIsLoadingSelectedOption(false);
-      });
-    } catch {
-      setIsLoadingSelectedOption(false);
-    }
-  }, [clear, autoComplete, fetchSelectedOption]);
-  const handleOpenChange = reactExports.useCallback((open) => {
-    if (!open) {
-      setCommandValue(options[0]?.value ?? "");
-    }
-    setIsPopoverOpen(open);
-  }, [options]);
-  const toggleOption = reactExports.useCallback((optionValue) => {
-    shouldFetchOptions.current = false;
-    isInternalChange.current = true;
-    setSelectedValue(optionValue);
-    setSelectedOption(options.find((opt) => opt.value === optionValue));
-    clear();
-    onChange?.(optionValue);
-  }, [onChange, clear, options]);
-  const handleChange = reactExports.useCallback((e) => {
-    const newValue = e.target.value;
-    shouldFetchOptions.current = true;
-    setSelectedValue(newValue);
-    setSelectedOption(void 0);
-    onChange?.(newValue);
-  }, [onChange]);
-  const handleCommandValue = reactExports.useCallback((value2) => {
-    setCommandValue(value2);
-  }, []);
-  const onTriggerBlur = reactExports.useCallback((e) => {
-    if (!isPopoverOpen) {
-      onBlur?.(e);
-    }
-  }, [onBlur, isPopoverOpen]);
-  const handlePaste = reactExports.useCallback((e) => {
-    const clipboardData = e.clipboardData.getData("text");
-    const trimmedValue = clipboardData.trim();
-    if (clipboardData !== trimmedValue) {
-      e.preventDefault();
-      const input = e.currentTarget;
-      const start = input.selectionStart || 0;
-      const end = input.selectionEnd || 0;
-      const currentValue = input.value;
-      const newValue = currentValue.substring(0, start) + trimmedValue + currentValue.substring(end);
-      onChange?.(newValue);
-      requestAnimationFrame(() => {
-        const newPosition = start + trimmedValue.length;
-        input.setSelectionRange(newPosition, newPosition);
-        debouncedFetchOptions(newValue);
-      });
-    } else if (clipboardData === selectedValue) {
-      debouncedFetchOptions(selectedValue);
-    }
-  }, [selectedValue, debouncedFetchOptions, onChange]);
-  reactExports.useEffect(() => {
-    if (autoComplete) {
-      if (shouldFetchOptions.current) {
-        debouncedFetchOptions(selectedValue);
-      }
-    } else {
-      clear();
-      setOptions([]);
-      setSelectedValue("");
-      setSelectedOption(void 0);
-    }
-  }, [autoComplete, selectedValue, debouncedFetchOptions, clear]);
-  reactExports.useEffect(() => {
-    if (!isInternalChange.current) {
-      shouldFetchOptions.current = false;
-      setSelectedValue(value ?? defaultValue ?? "");
-      setSelectedOption(void 0);
-    }
-    isInternalChange.current = false;
-  }, [value]);
-  reactExports.useEffect(() => {
-    if (initialOptions?.length && selectedValue) {
-      const matchingOption = initialOptions.find((opt) => opt.value === selectedValue);
-      if (matchingOption) {
-        setSelectedOption(matchingOption);
-      }
-    }
-  }, []);
-  return {
-    selectedValue,
-    selectedOption,
-    isPopoverOpen,
-    commandListRef,
-    options,
-    isLoading,
-    isLoadingSelectedOption,
-    haveFetchError,
-    commandValue,
-    isFetchSelectedOptionSync,
-    toggleOption,
-    handleOpenChange,
-    onTriggerBlur,
-    handleChange,
-    handleCommandValue,
-    handleFetchSelectedOption,
-    handlePaste
-  };
-}
-const IdAutocomplete = React.forwardRef(({
-  id: idProp,
-  name: name2,
-  className,
-  label,
-  description: description2,
-  value,
-  defaultValue,
-  disabled,
-  placeholder,
-  required,
-  errors,
-  warnings,
-  onChange,
-  onBlur,
-  onClick,
-  onKeyDown,
-  onMouseDown,
-  autoComplete = true,
-  variant = "withValue",
-  maxLength,
-  fetchOptionsCallback,
-  fetchSelectedOptionCallback,
-  isOpenByDefault,
-  // to be used only in stories
-  initialOptions,
-  renderOption,
-  previewPlaceholder,
-  ...props
-}, ref) => {
-  const prefix = reactExports.useId();
-  const id = idProp ?? `${prefix}-id-autocomplete`;
-  const inputRef = reactExports.useRef(null);
-  const mergedRef = (node) => {
-    inputRef.current = node;
-    if (typeof ref === "function") {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-  };
-  const hasWarning = Array.isArray(warnings) && warnings.length > 0;
-  const hasError = Array.isArray(errors) && errors.length > 0;
-  const { selectedValue, selectedOption, isPopoverOpen, commandListRef, options, isLoading, isLoadingSelectedOption, haveFetchError, commandValue, isFetchSelectedOptionSync, toggleOption, handleOpenChange, onTriggerBlur, handleChange, handleCommandValue, handleFetchSelectedOption, handlePaste } = useIdAutocomplete({
-    autoComplete,
-    defaultValue,
-    value,
-    isOpenByDefault,
-    initialOptions,
-    onChange,
-    onBlur,
-    fetchOptions: fetchOptionsCallback,
-    fetchSelectedOption: fetchSelectedOptionCallback
-  });
-  const handleOptionSelection = (optionValue) => {
-    toggleOption(optionValue);
-    inputRef.current?.focus();
-  };
-  const asCard = variant === "withValueAndTitle" || variant === "withValueTitleAndDescription";
-  const transformers = reactExports.useMemo(() => [
-    sharedValueTransformers.trimOnBlur(),
-    sharedValueTransformers.trimOnEnter()
-  ], []);
-  return jsxRuntimeExports.jsxs(FormGroup, { children: [!!label && jsxRuntimeExports.jsx(FormLabel, { htmlFor: id, disabled, hasError, required, onClick: (e) => {
-    e.preventDefault();
-    e.target.control?.focus();
-  }, children: label }), autoComplete && fetchOptionsCallback ? jsxRuntimeExports.jsx(Popover, { open: isPopoverOpen, onOpenChange: handleOpenChange, children: jsxRuntimeExports.jsxs(Command, { shouldFilter: false, value: commandValue, onValueChange: handleCommandValue, className: cn$1("dark:bg-charcoal-900 bg-gray-100"), children: [jsxRuntimeExports.jsx(PopoverAnchor, { asChild: true, children: jsxRuntimeExports.jsx(IdAutocompleteInputContainer, { id, name: name2, value: selectedValue, className, isLoading, haveFetchError, disabled, onChange: handleChange, onBlur: onTriggerBlur, onClick, selectedOption, optionsLength: options.length, handleOpenChange, onKeyDown, onMouseDown, placeholder, hasError, label, required, isPopoverOpen, maxLength, handlePaste, ...props, ref: mergedRef }) }), asCard && (renderOption ? renderOption(selectedOption === void 0 && previewPlaceholder ? {
-    ...previewPlaceholder
-  } : {
-    ...selectedOption,
-    value: selectedOption?.value ?? ""
-  }, {
-    asPlaceholder: selectedOption === void 0,
-    showValue: false,
-    isLoadingSelectedOption,
-    handleFetchSelectedOption: fetchSelectedOptionCallback ? handleFetchSelectedOption : void 0,
-    isFetchSelectedOptionSync,
-    className: cn$1("rounded-t-none pt-2")
-  }) : jsxRuntimeExports.jsx(IdAutocompleteListOption, { variant, icon: selectedOption?.icon ?? previewPlaceholder?.icon, title: selectedOption?.title ?? previewPlaceholder?.title, path: selectedOption?.path ?? previewPlaceholder?.path, value: selectedOption?.value ?? previewPlaceholder?.value ?? "", description: selectedOption?.description ?? previewPlaceholder?.description, asPlaceholder: selectedOption === void 0, showValue: false, isLoadingSelectedOption, handleFetchSelectedOption: fetchSelectedOptionCallback ? handleFetchSelectedOption : void 0, isFetchSelectedOptionSync, className: cn$1("rounded-t-none pt-2") })), jsxRuntimeExports.jsx(PopoverContent, { align: "start", onOpenAutoFocus: (e) => e.preventDefault(), onInteractOutside: (e) => {
-    if (e.target instanceof Element && e.target.id === id) {
-      e.preventDefault();
-    }
-  }, children: jsxRuntimeExports.jsx(IdAutocompleteList, { variant, commandListRef, selectedValue, options, toggleOption: handleOptionSelection, renderOption, previewPlaceholder }) })] }) }) : jsxRuntimeExports.jsx(ValueTransformer, { transformers, children: jsxRuntimeExports.jsx(Input, { id, name: name2, value: selectedValue, className, disabled, onChange: handleChange, onBlur, onClick, onMouseDown, placeholder, "aria-invalid": hasError, "aria-label": !label ? "Id Autocomplete" : void 0, "aria-required": required, maxLength, ...props, ref: mergedRef }) }), !!description2 && jsxRuntimeExports.jsx(FormDescription, { children: description2 }), hasWarning && jsxRuntimeExports.jsx(FormMessageList, { messages: warnings, type: "warning" }), hasError && jsxRuntimeExports.jsx(FormMessageList, { messages: errors, type: "error" })] });
-});
-IdAutocomplete.displayName = "IdAutocomplete";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-const inputBaseStyles = cn(
-  // Base styles
-  "flex h-9 w-full rounded-md text-sm font-normal leading-5 text-gray-900 dark:text-gray-50",
-  // Border & Background
-  "dark:border-charcoal-700 dark:bg-charcoal-900 border border-gray-300 bg-white",
-  // Padding
-  "px-3 py-2",
-  // Placeholder
-  "font-sans placeholder:text-gray-500 dark:placeholder:text-gray-600",
-  // Focus styles
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white",
-  "dark:focus-visible:ring-charcoal-300 dark:focus-visible:ring-offset-charcoal-900 dark:focus:bg-charcoal-900 focus:bg-gray-50",
-  // Disabled state
-  "disabled:cursor-not-allowed",
-  "disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700",
-  "disabled:dark:border-charcoal-800 disabled:dark:bg-charcoal-900 disabled:dark:text-gray-300"
-);
-const Input = reactExports.forwardRef(({ className, type: type2, ...props }, ref) => {
-  return jsxRuntimeExports.jsx("input", { type: type2, className: cn(inputBaseStyles, className), ref, ...props });
-});
-Input.displayName = "Input";
-const withFieldValidation = (Component, options) => {
-  return reactExports.forwardRef(({ value, name: name2, showErrorOnBlur, showErrorOnChange, validators: customValidators, ...props }, ref) => {
-    const { onChange: onChangeProp, onBlur: onBlurProp } = props;
-    const { control, formState: { errors: formErrors, defaultValues }, trigger, setValue, getValues } = useFormContext();
-    const { submitCount } = useFormState();
-    if (!name2) {
-      throw new Error(`[Field: ${Component.displayName}] The name prop is required.`);
-    }
-    const errors = [
-      ...formErrors[name2]?.types ? Object.values(formErrors[name2].types ?? []) : []
-    ];
-    if (errors.length === 0 && !!formErrors[name2]) {
-      errors.push("Invalid value");
-    }
-    reactExports.useEffect(() => {
-      if (submitCount > 0) {
-        void trigger(name2);
-      }
-    }, [props.required]);
-    reactExports.useEffect(() => {
-      if (props.errors && props.errors.length > 0) {
-        void trigger(name2);
-      }
-    }, [name2, props.errors, trigger]);
-    const [initialized, setInitialized] = reactExports.useState(false);
-    reactExports.useEffect(() => {
-      if (initialized) {
-        setValue(name2, value);
-      }
-      setInitialized(true);
-    }, [name2, value]);
-    if (value !== void 0 && !onChangeProp) {
-      console.warn(`[Field: ${name2}] Value prop provided without onChange so it will be ignored. Use disabled/readOnly if you want to prevent changes.`);
-    }
-    return jsxRuntimeExports.jsx(Controller, { control, name: name2, defaultValue: value ?? props.defaultValue, disabled: props.disabled, render: ({ field: {
-      // just preventing that onChange is included in the rest of the props
-      onChange: _,
-      onBlur: onBlurController,
-      value: internalValue,
-      ...rest
-    } }) => {
-      const onBlurCallback = reactExports.useCallback((event) => {
-        if (showErrorOnBlur) {
-          void trigger(name2);
-        } else {
-          onBlurController();
-        }
-        if (onBlurProp) {
-          onBlurProp(event);
-        }
-      }, [onBlurController, showErrorOnBlur]);
-      const onChangeCallback = reactExports.useCallback(
-        (event) => {
-          if (onChangeProp) {
-            if (Object.hasOwn(event, "target")) {
-              setValue(name2, event.target.value);
-            } else {
-              setValue(name2, event);
-            }
-            onChangeProp(event);
-          } else {
-            let value2 = event;
-            if (event instanceof Event || event.target instanceof HTMLElement) {
-              value2 = event.target.value;
-            }
-            setValue(name2, value2);
-          }
-          if (showErrorOnChange === void 0 && showErrorOnBlur === void 0) {
-            if (submitCount > 0) {
-              void trigger(name2);
-            }
-          } else {
-            if (showErrorOnChange) {
-              void trigger(name2);
-            }
-          }
-        },
-        // `internalValue` is the value of the field that is controlled by the form
-        // it is used to trigger the validation on change, so we need to add it to the dependencies
-        // otherwise the validation will not be triggered on change
-        [internalValue, showErrorOnChange, showErrorOnBlur, submitCount]
-      );
-      const { ref: formFieldRef } = rest;
-      const combinedRef = (element) => {
-        if (typeof ref === "function") {
-          ref(element);
-        } else if (ref) {
-          ref.current = element;
-        }
-        formFieldRef(element);
-      };
-      return jsxRuntimeExports.jsx(Component, { ...props, ...rest, value: internalValue, onBlur: onBlurCallback, onChange: onChangeCallback, errors, ref: combinedRef });
-    }, rules: {
-      ...props.required ? {
-        required: {
-          value: props.required,
-          message: "This field is required"
-        }
-      } : {
-        required: void 0
-      },
-      ...props.pattern && {
-        pattern: {
-          value: new RegExp(props.pattern),
-          message: "This field does not match the required pattern"
-        }
-      },
-      ...props.maxLength !== void 0 && props.maxLength >= 0 ? {
-        maxLength: {
-          value: props.maxLength,
-          message: `This field must be at most ${props.maxLength} characters`
-        }
-      } : {
-        maxLength: void 0
-      },
-      ...props.minLength !== void 0 && props.minLength >= 0 ? {
-        minLength: {
-          value: props.minLength,
-          message: `This field must be at least ${props.minLength} characters`
-        }
-      } : {
-        minLength: void 0
-      },
-      ...props.minValue && {
-        min: {
-          value: props.minValue,
-          message: `This field must be greater than or equal to ${props.minValue}`
-        }
-      },
-      ...props.maxValue && {
-        max: {
-          value: props.maxValue,
-          message: `This field must be less than or equal to ${props.maxValue}`
-        }
-      },
-      validate: {
-        // custom errors provided as props
-        ...props.errors ? Object.fromEntries(Array.isArray(props.errors) ? props.errors.map((error, index) => [
-          `_propError${index}`,
-          () => error
-        ]) : []) : {},
-        // built in validations by the field in the library
-        ...{},
-        // custom validations by the user/developer
-        ...customValidators !== void 0 ? Object.fromEntries((Array.isArray(customValidators) ? customValidators : [customValidators]).map((validator, index) => [
-          `customValidation${index}`,
-          validator
-        ])) : {}
-      }
-    } });
-  });
-};
-const renderIcon = (IconComponent) => {
-  if (typeof IconComponent === "string") {
-    return jsxRuntimeExports.jsx(Icon, { name: IconComponent, size: 16, className: cn$1("text-gray-700 dark:text-gray-400") });
-  }
-  return IconComponent && jsxRuntimeExports.jsx(IconComponent, { className: cn$1("size-4", "text-gray-700 dark:text-gray-400") });
-};
-const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex }) => {
-  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: options.map((opt) => {
-    const isSelected = selectedValues.includes(opt.value);
-    return jsxRuntimeExports.jsxs(CommandItem, { tabIndex, value: opt.label, onSelect: () => !opt.disabled && toggleOption(opt.value), disabled: opt.disabled, className: cn$1("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900", opt.disabled && "!pointer-events-auto cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent"), role: "option", "aria-selected": isSelected, children: [selectionIcon === "auto" && (multiple ? jsxRuntimeExports.jsx("div", { className: cn$1("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", isSelected && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"), children: isSelected && jsxRuntimeExports.jsx(Icon, { name: "Checkmark", size: 16 }) }) : jsxRuntimeExports.jsx("div", { className: cn$1("relative size-4 rounded-full border", isSelected ? "border-gray-900 dark:border-gray-400" : "border-gray-800 dark:border-gray-400", "bg-transparent dark:bg-transparent"), children: isSelected && jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400" }) })), selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && jsxRuntimeExports.jsx("div", { className: "size-4", children: selectionIconPosition === "left" && isSelected && jsxRuntimeExports.jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" }) }), renderIcon(opt.icon), jsxRuntimeExports.jsx("span", { className: cn$1("flex-1 truncate text-[14px] font-normal leading-4", "text-gray-700 dark:text-gray-500", opt.disabled && "text-gray-600 dark:text-gray-600"), children: opt.label }), selectionIcon === "checkmark" && selectionIconPosition === "right" && jsxRuntimeExports.jsx("div", { className: "size-4", children: isSelected && jsxRuntimeExports.jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" }) })] }, `favorite-${opt.value}`);
-  }) });
-};
-const Content = ({ searchable, commandListRef, multiple, selectedValues, selectionIcon, selectionIconPosition, options = [], toggleAll, toggleOption, favoriteOptions = [] }) => {
-  const enabledOptions = options.filter((opt) => !opt.disabled);
-  const hasAnyIcon = options.some((opt) => opt.icon);
-  const cmdkSearch = P((state) => state.search);
-  reactExports.useEffect(() => {
-    commandListRef.current?.scrollTo({ top: 0, behavior: "instant" });
-  }, [commandListRef, cmdkSearch]);
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [searchable && jsxRuntimeExports.jsx(CommandInput, { placeholder: "Search...", onKeyDown: (e) => {
-    const isOptionsRelatedKey = [
-      "ArrowUp",
-      "ArrowDown",
-      "Enter"
-    ].includes(e.key);
-    if (!(isOptionsRelatedKey && enabledOptions.length > 0)) {
-      e.stopPropagation();
-    }
-  }, wrapperClassName: "rounded-t", className: "text-gray-900 dark:text-gray-50" }), jsxRuntimeExports.jsxs(CommandList, { ref: commandListRef, tabIndex: !searchable ? 0 : void 0, children: [jsxRuntimeExports.jsx(CommandEmpty, { className: "p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400", children: "No results found." }), multiple && cmdkSearch === "" && jsxRuntimeExports.jsx(CommandGroup, { className: "pb-0", children: jsxRuntimeExports.jsx(CommandItem, { value: "select-all", onSelect: toggleAll, disabled: false, className: cn$1("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900"), role: "option", "aria-selected": selectedValues.length === enabledOptions.length, children: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center gap-2", children: [selectionIcon === "auto" && jsxRuntimeExports.jsx("div", { className: cn$1("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", selectedValues.length === enabledOptions.length && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"), children: selectedValues.length === enabledOptions.length && jsxRuntimeExports.jsx(Icon, { name: "Checkmark", size: 16 }) }), selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && jsxRuntimeExports.jsx("div", { className: "size-4", children: selectionIconPosition === "left" && selectedValues.length === enabledOptions.length && jsxRuntimeExports.jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" }) }), jsxRuntimeExports.jsx("span", { className: "text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50", children: selectedValues.length === enabledOptions.length ? "Deselect All" : "Select All" }), selectionIcon === "checkmark" && selectionIconPosition === "right" && jsxRuntimeExports.jsx("div", { className: "ml-auto size-4", children: selectedValues.length === enabledOptions.length && jsxRuntimeExports.jsx(Icon, { name: "Checkmark", size: 16, className: "text-gray-900 dark:text-gray-50" }) })] }) }) }), jsxRuntimeExports.jsxs(CommandGroup, { className: multiple && cmdkSearch === "" ? "pt-0" : void 0, children: [jsxRuntimeExports.jsx(CommandItemList, { options: favoriteOptions, selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex: !searchable ? 0 : void 0 }), favoriteOptions.length > 0 && jsxRuntimeExports.jsx("div", { className: "my-1 border-b border-gray-300 dark:border-gray-600" }), jsxRuntimeExports.jsx(CommandItemList, { options, selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex: !searchable ? 0 : void 0 })] })] })] });
-};
-const SelectedContent = ({ selectedValues, options = [], multiple, searchable, placeholder, handleClear }) => {
-  const renderIcon2 = (IconComponent) => {
-    if (typeof IconComponent === "string") {
-      return jsxRuntimeExports.jsx(Icon, { name: IconComponent, size: 16 });
-    }
-    return IconComponent && jsxRuntimeExports.jsx(IconComponent, { className: "size-4" });
-  };
-  if (selectedValues.length === 0) {
-    return jsxRuntimeExports.jsxs("div", { className: cn$1("mx-auto flex w-full items-center", placeholder ? "justify-between" : "justify-end"), children: [placeholder && jsxRuntimeExports.jsx("span", { className: "text-[14px] font-normal leading-5 text-gray-600 dark:text-gray-500", children: placeholder }), searchable ? jsxRuntimeExports.jsx(Icon, { name: "CaretSort", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" }) : jsxRuntimeExports.jsx(Icon, { name: "ChevronDown", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" })] });
-  }
-  return jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [jsxRuntimeExports.jsx("div", { className: cn$1("max-w-full truncate text-gray-900 dark:text-gray-50", !multiple && "flex items-center gap-2"), children: selectedValues.map((value, index) => {
-    const option = options.find((o) => o.value === value);
-    return !multiple ? jsxRuntimeExports.jsxs(React.Fragment, { children: [renderIcon2(option?.icon), jsxRuntimeExports.jsx("span", { className: "truncate text-[14px] font-normal leading-5", children: option?.label })] }, value) : jsxRuntimeExports.jsx("span", { className: cn$1("text-[14px] font-normal leading-5", index !== selectedValues.length - 1 && "mr-1"), children: index !== selectedValues.length - 1 ? `${option?.label},` : option?.label }, value);
-  }) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [multiple && selectedValues.length > 0 && jsxRuntimeExports.jsx("div", { onClick: (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    handleClear();
-  }, className: "size-4 p-0", children: jsxRuntimeExports.jsx(Icon, { name: "XmarkLight", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" }) }), searchable ? jsxRuntimeExports.jsx(Icon, { name: "CaretSort", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" }) : jsxRuntimeExports.jsx(Icon, { name: "ChevronDown", size: 16, className: "cursor-pointer text-gray-700 dark:text-gray-400" })] })] });
-};
-function useSelectField({ options = [], multiple = false, defaultValue, value, onChange }) {
-  const isInternalChange = reactExports.useRef(false);
-  const commandListRef = reactExports.useRef(null);
-  const [isPopoverOpen, setIsPopoverOpen] = reactExports.useState(false);
-  const [selectedValues, setSelectedValues] = reactExports.useState(() => {
-    const initialValue = value ?? defaultValue ?? [];
-    if (initialValue === "") {
-      return [];
-    }
-    return Array.isArray(initialValue) ? initialValue : [initialValue];
-  });
-  reactExports.useEffect(() => {
-    if (isInternalChange.current) {
-      isInternalChange.current = false;
-      return;
-    }
-    const newValue = value ?? defaultValue ?? [];
-    if (newValue === "") {
-      setSelectedValues([]);
-    } else {
-      setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);
-    }
-  }, [value]);
-  const handleOpenChange = reactExports.useCallback((open) => {
-    setIsPopoverOpen(open);
-  }, []);
-  const toggleOption = reactExports.useCallback((optionValue) => {
-    isInternalChange.current = true;
-    let newValues;
-    if (multiple) {
-      newValues = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
-    } else {
-      newValues = selectedValues[0] === optionValue ? [] : [optionValue];
-      setIsPopoverOpen(false);
-    }
-    setSelectedValues(newValues);
-    onChange?.(multiple ? newValues : newValues[0] ?? "");
-  }, [multiple, selectedValues, options, onChange]);
-  const handleClear = reactExports.useCallback(() => {
-    isInternalChange.current = true;
-    setSelectedValues([]);
-    onChange?.(multiple ? [] : "");
-  }, [multiple, onChange]);
-  const toggleAll = reactExports.useCallback(() => {
-    isInternalChange.current = true;
-    const enabledOptions = options.filter((opt) => !opt.disabled).map((opt) => opt.value);
-    const newValues = selectedValues.length === enabledOptions.length ? [] : enabledOptions;
-    setSelectedValues(newValues);
-    onChange?.(multiple ? newValues : newValues[0]);
-  }, [options, selectedValues, multiple, onChange]);
-  const prevMultiple = reactExports.useRef(multiple);
-  reactExports.useEffect(() => {
-    if (prevMultiple.current === multiple) {
-      return;
-    }
-    prevMultiple.current = multiple;
-    if (!multiple && selectedValues.length > 1) {
-      isInternalChange.current = true;
-      setSelectedValues([selectedValues[0]]);
-      onChange?.(selectedValues[0]);
-      return;
-    }
-    if (selectedValues.length > 0) {
-      isInternalChange.current = true;
-      onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);
-    }
-  }, [multiple]);
-  return {
-    selectedValues,
-    isPopoverOpen,
-    commandListRef,
-    toggleOption,
-    handleClear,
-    toggleAll,
-    handleOpenChange
-  };
-}
-const SelectFieldRaw = React.forwardRef(({
-  // core functionality props
-  options = [],
-  favoriteOptions = [],
-  defaultValue,
-  value,
-  onChange,
-  onBlur,
-  // form-related props
-  id: propId,
-  name: name2,
-  label,
-  required,
-  disabled,
-  // validation props
-  errors = [],
-  warnings = [],
-  // behavior props
-  multiple,
-  selectionIcon = "auto",
-  selectionIconPosition = "left",
-  searchable,
-  // display props
-  description: description2,
-  placeholder,
-  className,
-  contentClassName,
-  contentAlign = "start",
-  ...props
-}, ref) => {
-  const prefix = reactExports.useId();
-  const id = propId ?? `${prefix}-select`;
-  const { selectedValues, isPopoverOpen, commandListRef, toggleOption, handleClear, toggleAll, handleOpenChange } = useSelectField({
-    options,
-    multiple,
-    defaultValue,
-    value,
-    onChange
-  });
-  const onTriggerBlur = reactExports.useCallback((e) => {
-    if (!isPopoverOpen) {
-      onBlur?.(e);
-    }
-  }, [onBlur, isPopoverOpen]);
-  return jsxRuntimeExports.jsxs(FormGroup, { children: [label && jsxRuntimeExports.jsx(FormLabel, { htmlFor: id, required, disabled, hasError: errors.length > 0, inline: false, onClick: (e) => {
-    e.preventDefault();
-    e.target.control?.focus();
-  }, children: label }), jsxRuntimeExports.jsxs(Popover, { open: isPopoverOpen, onOpenChange: (open) => {
-    handleOpenChange(open);
-    if (!open && document.activeElement?.id !== id) {
-      onBlur?.({ target: {} });
-    }
-  }, children: [jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { id, name: name2, type: "button", role: "combobox", onBlur: onTriggerBlur, disabled, "aria-invalid": errors.length > 0, "aria-label": label ? void 0 : multiple ? "Multi select" : "Select", "aria-required": required, "aria-expanded": isPopoverOpen, className: cn$1("flex h-9 w-full items-center justify-between px-3 py-2", "dark:border-charcoal-700 dark:bg-charcoal-900 rounded-md border border-gray-300 bg-white", "hover:border-gray-300 hover:bg-gray-100", "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-800", "dark:focus:ring-charcoal-300 focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-0", "dark:focus-visible:ring-charcoal-300 focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0", disabled && [
-    "!pointer-events-auto cursor-not-allowed bg-gray-50",
-    "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-900 hover:border-gray-300 hover:bg-gray-50"
-  ], className), ...props, ref, children: jsxRuntimeExports.jsx(SelectedContent, { selectedValues, options: [...favoriteOptions, ...options], multiple, searchable, placeholder, handleClear }) }) }), jsxRuntimeExports.jsx(PopoverContent, { align: contentAlign, onEscapeKeyDown: (e) => {
-    e.preventDefault();
-    handleOpenChange(false);
-  }, className: contentClassName, children: jsxRuntimeExports.jsx(Command, { defaultValue: !multiple && selectedValues[0] ? options.find((opt) => opt.value === selectedValues[0])?.label : void 0, children: jsxRuntimeExports.jsx(Content, { favoriteOptions, searchable, commandListRef, multiple, selectedValues, selectionIcon, selectionIconPosition, options, toggleAll, toggleOption }) }) })] }), description2 && jsxRuntimeExports.jsx(FormDescription, { children: description2 }), warnings.length > 0 && jsxRuntimeExports.jsx(FormMessageList, { messages: warnings, type: "warning" }), errors.length > 0 && jsxRuntimeExports.jsx(FormMessageList, { messages: errors, type: "error" })] });
-});
-const SelectField = withFieldValidation(SelectFieldRaw);
-SelectField.displayName = "SelectField";
-const TooltipContent = reactExports.forwardRef(({ children, className, ...props }, ref) => {
-  return jsxRuntimeExports.jsx(Content2, { ref, ...props, className: cn$1(
-    // Base styles
-    "z-50 overflow-hidden rounded-md text-sm",
-    // Colors & Border
-    "border border-gray-200 bg-white text-gray-900 dark:border-gray-900 dark:bg-slate-900 dark:text-gray-200",
-    // Padding & Shadow
-    "px-3 py-1.5 shadow-md",
-    // Animations
-    "data-[state=open]:animate-fade-in data-[state=open]:animate-zoom-in",
-    "data-[state=closed]:animate-fade-out data-[state=closed]:animate-zoom-out",
-    // Slide animations based on position
-    "data-[side=bottom]:animate-slide-in-from-top",
-    "data-[side=left]:animate-slide-in-from-right",
-    "data-[side=right]:animate-slide-in-from-left",
-    "data-[side=top]:animate-slide-in-from-bottom",
-    className
-  ), children });
-});
-const Tooltip = ({ content, children, triggerAsChild = false, delayDuration = 0, ...props }) => {
-  const { open, defaultOpen, onOpenChange, ...rest } = props;
-  return jsxRuntimeExports.jsxs(Root3, { defaultOpen, delayDuration, onOpenChange, open, children: [jsxRuntimeExports.jsx(Trigger, { asChild: triggerAsChild, type: triggerAsChild ? void 0 : "button", children }), jsxRuntimeExports.jsx(Portal$1, { children: jsxRuntimeExports.jsx(TooltipContent, { sideOffset: 3, ...rest, children: content }) })] });
-};
-function setNativeValue(element, value) {
-  const valueSetter = Object.getOwnPropertyDescriptor(element, "value")?.set;
-  const prototype = Object.getPrototypeOf(element);
-  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
-  if (valueSetter && valueSetter !== prototypeValueSetter) {
-    prototypeValueSetter?.call(element, value);
-  } else {
-    valueSetter?.call(element, value);
-  }
-}
-function _applyTransformers(transformers, value, filter = "blur") {
-  return transformers.reduce((value2, transformer) => {
-    if (typeof transformer === "function") {
-      if (filter === "blur" || filter === "all") {
-        return transformer(value2);
-      }
-      return value2;
-    }
-    if ((transformer.options?.trigger ?? "blur") !== filter && filter !== "all") {
-      return value2;
-    }
-    if (transformer.options?.if === void 0 || transformer.options.if) {
-      return transformer.transformer(value2);
-    }
-    return value2;
-  }, value);
-}
-function ValueTransformer({ transformers, children }) {
-  const formContext = useFormContext();
-  const setValue = formContext?.setValue;
-  reactExports.useEffect(() => {
-    const value = children.props.value;
-    const transformedValue = _applyTransformers(transformers, value, "all");
-    if (!deepEqual(transformedValue, value)) {
-      if (typeof setValue === "function") {
-        setValue(children.props.name, transformedValue);
-      } else {
-        children.props.onChange?.({
-          target: { value: transformedValue }
-        });
-      }
-    }
-  }, [transformers, setValue]);
-  return React.cloneElement(children, {
-    // @ts-expect-error - React.HTMLAttributes is not typed
-    ...children.props,
-    onChange: (event) => {
-      const transformedValue = _applyTransformers(transformers, event.target.value, "change");
-      if (transformedValue !== event.target.value && setValue) {
-        setValue(children.props.name, transformedValue);
-        setNativeValue(event.target, transformedValue);
-      }
-      children.props.onChange?.(event);
-    },
-    // apply transformers on blur
-    onBlur: (event) => {
-      children.props.onBlur?.(event);
-      const target = event.target;
-      const transformedValue = _applyTransformers(transformers, target.value, "blur");
-      if (!deepEqual(transformedValue, target.value)) {
-        setNativeValue(target, transformedValue);
-        const changeEvent = new Event("change", { bubbles: true });
-        target.dispatchEvent(changeEvent);
-      }
-    },
-    onKeyDown: (event) => {
-      children.props.onKeyDown?.(event);
-      if (event.key === "Enter") {
-        const target = event.target;
-        const transformedValue = _applyTransformers(transformers, target.value, "keyDown");
-        if (!deepEqual(transformedValue, target.value)) {
-          setNativeValue(target, transformedValue);
-          const changeEvent = new Event("change", { bubbles: true });
-          target.dispatchEvent(changeEvent);
-        }
-      }
-    }
-  });
-}
-function deepEqual(a, b, visited = /* @__PURE__ */ new Map()) {
-  if (a === b) {
-    return true;
-  }
-  if (a === null || b === null || a === void 0 || b === void 0) {
-    return false;
-  }
-  if (typeof a !== typeof b) {
-    return false;
-  }
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (visited.get(a) === b) {
-      return true;
-    }
-    visited.set(a, b);
-    return a.length === b.length && a.every((value, index) => deepEqual(value, b[index], visited));
-  }
-  if (typeof a === "object" && typeof b === "object" && !Array.isArray(a) && !Array.isArray(b)) {
-    if (visited.get(a) === b) {
-      return true;
-    }
-    visited.set(a, b);
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    return aKeys.length === bKeys.length && aKeys.every((key) => {
-      return key in b && deepEqual(a[key], b[key], visited);
-    });
-  }
-  return false;
-}
-const sharedValueTransformers = {
-  trimOnBlur: (ifParam = true) => ({
-    transformer: (value) => value?.trim(),
-    options: {
-      trigger: "blur",
-      if: ifParam
-    }
-  }),
-  lowercaseOnChange: (ifParam = true) => ({
-    transformer: (value) => value?.toLowerCase(),
-    options: {
-      trigger: "change",
-      if: ifParam
-    }
-  }),
-  uppercaseOnChange: (ifParam = true) => ({
-    transformer: (value) => value?.toUpperCase(),
-    options: {
-      trigger: "change",
-      if: ifParam
-    }
-  }),
-  trimOnEnter: (ifParam = true) => ({
-    transformer: (value) => value?.trim(),
-    options: {
-      trigger: "keyDown",
-      if: ifParam
-    }
-  })
-};
-const PH_DEPENDENCIES = [
-  /^@powerhousedao\/.+$/,
-  "document-drive",
-  "document-model"
-];
-const PackageJsonSchema = objectType({
-  version: stringType({ message: "Missing version field in package.json" }),
-  dependencies: recordType(stringType(), stringType()).nullable(),
-  devDependencies: recordType(stringType(), stringType()).nullable()
-}).refine((data) => data.dependencies != null || data.devDependencies != null, "package.json must have either dependencies or devDependencies").transform((data) => {
-  const allDependencies = {
-    ...data.dependencies,
-    ...data.devDependencies
-  };
-  return {
-    version: data.version,
-    dependencies: Object.fromEntries(Object.entries(allDependencies).filter(([key]) => PH_DEPENDENCIES.some((regexOrName) => typeof regexOrName === "string" ? regexOrName === key : regexOrName.test(key))))
-  };
-});
-function verifyPackageJsonFields(packageJson2) {
-  const parsed = PackageJsonSchema.safeParse(packageJson2);
-  if (!parsed.success) {
-    console.error("Package.json validation failed:", parsed.error.format());
-    return false;
-  }
-  return parsed.data;
-}
-function DependencyVersions(props) {
-  const [isOpen, setIsOpen] = reactExports.useState(false);
-  const { packageJson: packageJson2, phCliVersion } = props;
-  const validatedData = verifyPackageJsonFields(packageJson2);
-  if (!validatedData) {
-    console.error("Failed to validate package.json data");
-    return null;
-  }
-  return jsxRuntimeExports.jsx(Disclosure, { isOpen, onOpenChange: () => setIsOpen(!isOpen), title: `App version: ${validatedData.version}`, toggleClassName: "text-gray-900 text-sm", children: jsxRuntimeExports.jsxs("ul", { className: "text-sm text-gray-600", children: [Object.entries(validatedData.dependencies).map(([dep, version2]) => jsxRuntimeExports.jsxs("li", { className: "my-1 flex justify-between pr-1", children: [jsxRuntimeExports.jsxs("span", { children: [dep.replace("@powerhousedao/", ""), ":"] }), jsxRuntimeExports.jsx("span", { className: "font-normal", children: version2 })] }, dep)), phCliVersion && jsxRuntimeExports.jsxs("li", { className: "my-1 flex justify-between pr-1", children: [jsxRuntimeExports.jsx("span", { children: "@powerhousedao/ph-cli:" }), jsxRuntimeExports.jsx("span", { className: "font-normal", children: phCliVersion })] }, "ph-cli")] }) });
-}
-function About$1(props) {
-  const { packageJson: packageJson2, phCliVersion } = props;
-  return jsxRuntimeExports.jsxs("div", { className: "bg-white p-3", children: [jsxRuntimeExports.jsx("h2", { className: "font-semibold", children: "About" }), jsxRuntimeExports.jsx("p", { className: "text-sm font-normal text-gray-600", children: "Connect is the hub for your most important documents and processes translated into software. Easily capture data in a structured way with Connect." }), jsxRuntimeExports.jsx("div", { className: "my-4", children: jsxRuntimeExports.jsx(DependencyVersions, { packageJson: packageJson2, phCliVersion }) })] });
-}
-function DangerZone$1(props) {
-  const { className, ...rest } = props;
-  return jsxRuntimeExports.jsxs("div", { className: cn$1("h-full rounded-lg bg-white p-3", className), children: [jsxRuntimeExports.jsx("h2", { className: "mb-4 font-semibold", children: "Modify Drives" }), jsxRuntimeExports.jsx(ModifyDrives, { ...rest }), jsxRuntimeExports.jsx("h2", { className: "my-4 font-semibold", children: "Local Storage" }), jsxRuntimeExports.jsx(LocalStorage, { ...rest })] });
-}
-function ModifyDrives(props) {
-  const { className, ...rest } = props;
-  return jsxRuntimeExports.jsx("div", { className, children: jsxRuntimeExports.jsx(DriveList, { ...rest }) });
-}
-function DriveList(props) {
-  const { className, ...rest } = props;
-  return jsxRuntimeExports.jsx("div", { className, children: props.drives.map((drive) => jsxRuntimeExports.jsx(Drive, { drive, ...rest }, drive.header.id)) });
-}
-function Drive(props) {
-  const { drive, className, onDeleteDrive } = props;
-  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = reactExports.useState(false);
-  const localDriveIcon = jsxRuntimeExports.jsx(Icon, { name: "Hdd", size: 16, className: "flex-none" });
-  const cloudDriveIcon = jsxRuntimeExports.jsx(Icon, { name: "Server", size: 16, className: "flex-none" });
-  const publicDriveIcon = drive.state.global.icon ? jsxRuntimeExports.jsx("img", { alt: "drive icon", className: "size-4 flex-none object-contain", src: drive.state.global.icon }) : jsxRuntimeExports.jsx(Icon, { name: "M", size: 16, className: "flex-none" });
-  function getNodeIcon() {
-    const sharingType = getDriveSharingType(drive);
-    if (sharingType === "PUBLIC") {
-      return publicDriveIcon;
-    }
-    if (sharingType === "CLOUD") {
-      return cloudDriveIcon;
-    }
-    return localDriveIcon;
-  }
-  const icon = getNodeIcon();
-  return jsxRuntimeExports.jsxs("div", { className: cn$1("mb-4 flex w-96 items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 shadow-sm last-of-type:mb-0", className), children: [icon, jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("span", { className: "block text-sm font-medium leading-[18px]", children: capitalCase(drive.header.name) }), jsxRuntimeExports.jsxs("div", { className: "flex items-baseline gap-x-2 leading-[18px]", children: [jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [capitalCase(getDriveSharingType(drive)), " App"] }), jsxRuntimeExports.jsxs("a", { className: "group flex items-center gap-x-2 text-sm text-slate-500 transition-colors hover:text-[#9896FF]", children: ["By Powerhouse", jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", className: "size-4 text-gray-400 transition-colors group-hover:text-inherit", children: jsxRuntimeExports.jsx("path", { d: "M7.99365 11.9939C9.46632 11.9939 10.6603 10.7999 10.6603 9.32722V7.32722C10.6603 6.95922 10.3617 6.66056 9.99365 6.66056C9.62565 6.66056 9.32699 6.95922 9.32699 7.32722V9.32722C9.32699 10.0639 8.73032 10.6606 7.99365 10.6606H2.66032C1.92365 10.6606 1.32699 10.0639 1.32699 9.32722V3.99389C1.32699 3.25723 1.92365 2.66056 2.66032 2.66056H4.66032C5.02832 2.66056 5.32699 2.36189 5.32699 1.99389C5.32699 1.6259 5.02832 1.32723 4.66032 1.32723H2.66032C1.18765 1.32723 -0.00634766 2.52123 -0.00634766 3.99389V9.32722C-0.00634766 10.7999 1.18765 11.9939 2.66032 11.9939H7.99365ZM5.32699 7.32722C5.49765 7.32722 5.67565 7.26989 5.80632 7.13989L10.1396 2.80656L11.9937 4.66056V-0.00610352H7.32699L9.18099 1.8479L4.84766 6.18123C4.58766 6.4419 4.58766 6.87922 4.84766 7.13989C4.97832 7.26989 5.15632 7.32722 5.32699 7.32722Z", fill: "currentColor" }) })] })] })] }), jsxRuntimeExports.jsx(ConnectDropdownMenu, { items: [
-    {
-      id: "delete-drive",
-      label: "Delete",
-      icon: jsxRuntimeExports.jsx(Icon, { name: "Trash" }),
-      className: "text-red-900"
-    }
-  ], onItemClick: (id) => {
-    if (id === "delete-drive") {
-      onDeleteDrive(drive);
-    }
-  }, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsxRuntimeExports.jsx("button", { className: "group ml-auto flex-none", onClick: (e) => {
-    e.stopPropagation();
-    setIsDropdownMenuOpen(true);
-  }, children: jsxRuntimeExports.jsx(Icon, { className: "text-gray-600 group-hover:text-gray-900", name: "VerticalDots", size: 16 }) }) })] });
-}
-function LocalStorage(props) {
-  const { onClearStorage } = props;
-  return jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("button", { className: "flex items-center gap-x-2 rounded-md border border-gray-300 bg-transparent px-3 py-1 text-sm font-medium text-red-900 transition-colors hover:bg-gray-100", onClick: onClearStorage, children: ["Clear Storage ", jsxRuntimeExports.jsx(Icon, { name: "Trash", size: 16 })] }) });
-}
-function DefaultEditor$1(props) {
-  const { className, ...rest } = props;
-  return jsxRuntimeExports.jsx("div", { className: twMerge("rounded-lg p-3", className), children: jsxRuntimeExports.jsx(DefaultEditorSelect, { ...rest }) });
-}
-function DefaultEditorSelect(props) {
-  const { documentModelEditor, setDocumentModelEditor, documentModelEditorOptions: documentModelEditorOptions2, className } = props;
-  return jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h3", { className: "mb-4 font-semibold text-gray-900", children: "Default Editor Selection" }), jsxRuntimeExports.jsx(SelectFieldRaw, { className: twMerge("min-w-36 max-w-fit", className), name: "default-editor", required: true, value: documentModelEditor, options: documentModelEditorOptions2, multiple: false, onChange: (value) => setDocumentModelEditor(value) })] });
-}
-const ProviderIconMap = {
-  npm: { icon: "Npm" },
-  github: { icon: "Github", size: 28 },
-  local: { icon: "Hdd" }
-};
-const PackageItem = ({ packageName, provider }) => {
-  const icon = provider && ProviderIconMap[provider];
-  return jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between px-2 py-1", children: [jsxRuntimeExports.jsx("p", { className: "font-medium", children: packageName }), icon && jsxRuntimeExports.jsx(Icon, { name: icon.icon, size: icon.size })] });
-};
-const PackageManagerInput = (props) => {
-  const { onInstall, packageOptions, className } = props;
-  const [value, setValue] = reactExports.useState("");
-  const [loading, setLoading] = reactExports.useState(false);
-  const [error, setError] = reactExports.useState();
-  const handleSubmit = reactExports.useCallback(() => {
-    const result = onInstall(value);
-    if (result) {
-      setLoading(true);
-      result.then(() => setValue("")).catch(setError).finally(() => setLoading(false));
-    } else {
-      setValue("");
-      setError(void 0);
-    }
-  }, [onInstall, value]);
-  const handleChange = reactExports.useCallback((e) => {
-    setValue(e.target.value);
-  }, []);
-  const errorMessage = !error ? " " : typeof error === "string" ? error : error instanceof Error ? error.message : error;
-  const autoCompleteOptions = reactExports.useMemo(() => {
-    const initialOptions = packageOptions?.map((option) => ({
-      ...option,
-      value: option.packageName
-    }));
-    return !packageOptions?.length ? {
-      autoComplete: false
-    } : {
-      autoComplete: true,
-      initialOptions,
-      fetchOptionsCallback: (userInput) => initialOptions?.filter((o) => o.packageName.toLowerCase().includes(userInput.toLowerCase())) ?? [],
-      renderOption: (option) => jsxRuntimeExports.jsx(PackageItem, { ...option })
-    };
-  }, [packageOptions]);
-  return jsxRuntimeExports.jsxs("div", { className, children: [jsxRuntimeExports.jsx("h3", { className: "mb-4 font-semibold text-gray-900", children: "Install Package" }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [!packageOptions?.length ? jsxRuntimeExports.jsx(Input, { name: "package", className: "max-w-xs text-gray-700", value, onChange: handleChange, onSubmit: handleSubmit, disabled: loading }) : jsxRuntimeExports.jsx(IdAutocomplete, { ...autoCompleteOptions, onChange: setValue }), jsxRuntimeExports.jsx(PowerhouseButton, { className: "h-9 rounded-md text-sm", onClick: handleSubmit, disabled: loading, children: "Install" })] }), jsxRuntimeExports.jsx("p", { className: "mb-3 ml-2 h-3 text-sm text-red-800", children: errorMessage })] });
-};
-const PackageDetail = ({ label, value }) => {
-  return jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 text-sm", children: [jsxRuntimeExports.jsxs("p", { className: "text-gray-600", children: [label, ":"] }), jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: value })] });
-};
-const PackageManagerListItem = (props) => {
-  const { package: { name: name2, description: description2, category, publisher, publisherUrl, modules, id, removable }, mutable, onUninstall, className } = props;
-  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = reactExports.useState(false);
-  return jsxRuntimeExports.jsxs("li", { className: twMerge("relative flex flex-col items-start rounded-md border border-gray-200 p-3 text-sm leading-5 shadow-sm", className), children: [jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-900", children: name2 }), jsxRuntimeExports.jsx(PackageDetail, { label: "Description", value: description2 }), jsxRuntimeExports.jsx(PackageDetail, { label: "Category", value: category }), jsxRuntimeExports.jsx(PackageDetail, { label: "Publisher", value: publisher }), jsxRuntimeExports.jsx(PackageDetail, { label: "Publisher URL", value: jsxRuntimeExports.jsx("a", { className: "underline", href: publisherUrl, children: publisherUrl }) }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: "Modules included:" }), jsxRuntimeExports.jsx("ul", { className: "list-disc pl-5", children: modules.map((module) => jsxRuntimeExports.jsx("li", { children: jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: module }) }, module)) }), mutable && removable && jsxRuntimeExports.jsx(ConnectDropdownMenu, { items: [
-    {
-      id: "uninstall",
-      label: "Uninstall",
-      icon: jsxRuntimeExports.jsx(Icon, { name: "Trash" }),
-      className: "text-red-900"
-    }
-  ], onItemClick: (optionId) => {
-    if (optionId === "uninstall") {
-      onUninstall(id);
-    }
-  }, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: jsxRuntimeExports.jsx("button", { className: "group absolute right-3 top-3", onClick: (e) => {
-    e.stopPropagation();
-    setIsDropdownMenuOpen(true);
-  }, children: jsxRuntimeExports.jsx(Icon, { className: "text-gray-600 group-hover:text-gray-900", name: "VerticalDots" }) }) })] });
-};
-const PackageManagerList = (props) => {
-  const { className, packages, onUninstall, mutable, ...rest } = props;
-  const handleUninstall = reactExports.useCallback((id) => {
-    onUninstall(id);
-  }, [onUninstall]);
-  return jsxRuntimeExports.jsxs("div", { ...rest, className: twMerge("flex max-h-[370px] flex-col items-stretch overflow-hidden", className), children: [jsxRuntimeExports.jsx("h3", { className: "mb-4 font-semibold text-gray-900", children: "Installed Packages" }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto pr-2", children: jsxRuntimeExports.jsx("ul", { className: "flex flex-col items-stretch gap-4 pr-2", children: packages.map((pkg) => jsxRuntimeExports.jsx(PackageManagerListItem, { package: pkg, onUninstall: handleUninstall, mutable }, pkg.id)) }) })] });
-};
-const PackageManagerReactorSelect = (props) => {
-  const { reactorOptions, reactor, onReactorChange, ...rest } = props;
-  const handleChange = reactExports.useCallback((value) => {
-    onReactorChange(Array.isArray(value) ? value.at(-1) : value);
-  }, [onReactorChange]);
-  return jsxRuntimeExports.jsxs("div", { ...rest, children: [jsxRuntimeExports.jsx("h3", { className: "mb-4 font-semibold text-gray-900", children: "Select Reactor" }), jsxRuntimeExports.jsx(SelectFieldRaw, { className: "min-w-36 max-w-fit", name: "reactor", required: true, value: reactor, options: reactorOptions, multiple: false, onChange: handleChange })] });
-};
-const PackageManager$1 = (props) => {
-  const { className, reactorOptions, reactor, onReactorChange, onInstall, packages, onUninstall, mutable, packageOptions, ...rest } = props;
-  const packageOptionsSet = reactExports.useMemo(() => packageOptions?.filter((o) => !packages.find((p2) => p2.name === o.packageName)), [packages, packageOptions]);
-  return jsxRuntimeExports.jsxs("div", { ...rest, className: twMerge("flex h-full flex-1 flex-col rounded-lg p-3", className), children: [jsxRuntimeExports.jsx(PackageManagerReactorSelect, { reactor, reactorOptions, onReactorChange, className: "mb-4" }), mutable && jsxRuntimeExports.jsx(PackageManagerInput, { onInstall, packageOptions: packageOptionsSet }), jsxRuntimeExports.jsx(PackageManagerList, { packages, onUninstall, mutable })] });
-};
-function SettingsModal$1(props) {
-  const { title, overlayProps, contentProps, onOpenChange, tabs, defaultTab, ...restProps } = props;
-  const [selectedTab, setSelectedTab] = reactExports.useState(defaultTab ?? tabs.at(0)?.id);
-  const tabsContent = tabs.map((tab) => jsxRuntimeExports.jsx("button", { type: "button", onClick: () => setSelectedTab(tab.id), children: jsxRuntimeExports.jsxs("div", { className: twMerge("flex h-9 w-48 cursor-pointer items-center gap-x-2 rounded-md pl-3 hover:bg-slate-50", selectedTab === tab.id ? "bg-slate-50" : "bg-transparent"), children: [tab.icon, jsxRuntimeExports.jsx("span", { children: tab.label })] }) }, tab.id));
-  const selectedTabContent = tabs.find((tab) => tab.id === selectedTab)?.content;
-  const SelectedTabComponent = selectedTabContent;
-  return jsxRuntimeExports.jsxs(Modal, { contentProps: {
-    ...contentProps,
-    className: twMerge("min-h-full w-full max-w-4xl rounded-xl", contentProps?.className),
-    style: {
-      ...contentProps?.style,
-      boxShadow: "0px 0px 16px 4px rgba(0, 0, 0, 0.04), 0px 33px 32px -16px rgba(0, 0, 0, 0.10)"
-    }
-  }, onOpenChange, overlayProps: {
-    ...overlayProps,
-    className: twMerge("py-28", overlayProps?.className)
-  }, ...restProps, children: [jsxRuntimeExports.jsxs("div", { className: "flex justify-between border-b border-slate-50 p-4", children: [jsxRuntimeExports.jsx("h1", { className: "text-center text-xl font-semibold", children: title }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex size-6 items-center justify-center rounded-md outline-none", onClick: () => onOpenChange?.(false), children: jsxRuntimeExports.jsx(Icon, { name: "XmarkLight", size: 24 }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-1", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-y-1 p-3 pt-6", children: tabsContent }), jsxRuntimeExports.jsx("div", { className: "m-6 flex h-full flex-1 flex-col overflow-hidden rounded-lg border border-slate-50", children: typeof SelectedTabComponent === "function" ? jsxRuntimeExports.jsx(SelectedTabComponent, {}) : SelectedTabComponent })] })] });
-}
-const name = "@powerhousedao/connect";
-const productName = "Powerhouse-Connect";
-const version = "4.1.0-dev.105";
-const description = "Powerhouse Connect";
-const main = "dist/index.html";
-const type = "module";
-const engines = { "node": ">=22.0.0" };
-const files = ["dist", "lib", "nginx.conf", "nginx.sh", "scripts", "assets", "public", "heroku", ".env", "./src/index.css", "./package.copy.json"];
-const exports = { "./package.json": "./package.copy.json", ".": { "source": "./src/index.ts", "import": "./lib/src/index.js", "types": "./lib/src/index.d.ts" }, "./main.js": { "source": "./src/main.tsx", "import": "./lib/src/main.js", "types": "./lib/src/main.d.ts" }, "./config": { "source": "./src/connect.config.ts", "import": "./lib/src/connect.config.js", "types": "./lib/src/connect.config.d.ts" }, "./components": { "source": "./src/components/index.ts", "import": "./lib/src/components/index.js", "types": "./lib/src/components/index.d.ts" }, "./components/*": { "source": "./src/components/*", "import": "./lib/src/components/*.js", "types": "./lib/src/components/*.d.ts" }, "./hooks": { "source": "./src/hooks/index.ts", "import": "./lib/src/hooks/index.js", "types": "./lib/src/hooks/index.d.ts" }, "./hooks/*": { "source": "./src/hooks/*", "import": "./lib/src/hooks/*.js", "types": "./lib/src/hooks/*.d.ts" }, "./services": { "source": "./src/services/index.ts", "import": "./lib/src/services/index.js", "types": "./lib/src/services/index.d.ts" }, "./services/*": { "source": "./src/services/*", "import": "./lib/src/services/*.js", "types": "./lib/src/services/*.d.ts" }, "./store": { "source": "./src/store/index.ts", "import": "./lib/src/store/index.js", "types": "./lib/src/store/index.d.ts" }, "./store/*": { "source": "./src/store/*", "import": "./lib/src/store/*.js", "types": "./lib/src/store/*.d.ts" }, "./context": { "source": "./src/context/index.ts", "import": "./lib/src/context/index.js", "types": "./lib/src/context/index.d.ts" }, "./context/*": { "source": "./src/context/*", "import": "./lib/src/context/*.js", "types": "./lib/src/context/*.d.ts" }, "./utils": { "source": "./src/utils/index.ts", "import": "./lib/src/utils/index.js", "types": "./lib/src/utils/index.d.ts" }, "./utils/*": { "source": "./src/utils/*", "import": "./lib/src/utils/*.js", "types": "./lib/src/utils/*.d.ts" }, "./pages": { "source": "./src/pages/index.ts", "import": "./lib/src/pages/index.js", "types": "./lib/src/pages/index.d.ts" }, "./pages/*": { "source": "./src/pages/*", "import": "./lib/src/pages/*.js", "types": "./lib/src/pages/*.d.ts" }, "./i18n": { "source": "./src/i18n/index.ts", "import": "./lib/src/i18n/index.js", "types": "./lib/src/i18n/index.d.ts" }, "./custom.d.ts": "./lib/custom.d.ts", "./style.css": "./src/index.css", "./assets/*.mp4": "./assets/*.mp4", "./assets/*.png": "./assets/*.png", "./assets/*.svg": "./assets/*.svg", "./assets/*.jpg": "./assets/*.jpg", "./assets/*.jpeg": "./assets/*.jpeg", "./assets/*.gif": "./assets/*.gif", "./assets/*.webp": "./assets/*.webp", "./assets/*.avif": "./assets/*.avif", "./public/icon.ico": "./public/icon.ico" };
-const sideEffects = false;
-const license = "AGPL-3.0-only";
-const author = "powerhouse.inc";
-const repository = { "type": "git", "url": "https://github.com/powerhouse-inc/powerhouse" };
-const bugs = { "url": "https://github.com/powerhouse-inc/powerhouse/issues" };
-const homepage = "https://github.com/powerhouse-inc/powerhouse#readme";
-const scripts = { "tsc": "tsc", "lint": "eslint", "postinstall": "cp ./package.json ./package.copy.json", "dev": "vite dev", "build:vite": "vite build", "build:debug": "PH_DEBUG_BUILD=true vite build", "preview": "vite preview", "cy:open": "cypress open", "docker:build": "docker build -f ./Dockerfile --tag connect-test-dev --build-arg TAG=dev .", "docker:run": "docker run -it -p 4000:4000 -v $(realpath ../../../monorepo):/monorepo -v $(pwd)/nginx.conf:/etc/nginx/nginx.conf.template -e PH_USE_LOCAL=true -e PH_CONNECT_BASE_PATH=/develop/powerhouse/connect -e PORT=4000 connect-test-dev" };
-const dependencies = { "@electric-sql/pglite": "0.2.17", "@openfeature/core": "^1.9.1", "@openfeature/web-sdk": "^1.6.2", "@powerhousedao/analytics-engine-core": "^0.5.0", "@powerhousedao/builder-tools": "workspace:*", "@powerhousedao/common": "workspace:*", "@powerhousedao/config": "workspace:*", "@powerhousedao/design-system": "workspace:*", "@powerhousedao/reactor-browser": "workspace:*", "@renown/sdk": "workspace:*", "@sentry/browser": "^10.17.0", "@sentry/react": "^10.17.0", "@sentry/vite-plugin": "^4.3.0", "@tailwindcss/vite": "^4.1.14", "@types/node": "^24.7.0", "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0", "@types/wicg-file-system-access": "^2023.10.7", "@vitejs/plugin-react": "^5.0.4", "document-drive": "workspace:*", "document-model": "workspace:*", "fast-deep-equal": "^3.1.3", "graphql": "^16.11.0", "graphql-request": "^7.2.0", "i18next": "^25.5.3", "react": "^19.2.0", "react-dom": "^19.2.0", "react-error-boundary": "^4.0.11", "react-hotkeys-hook": "^4.5.0", "react-i18next": "^16.0.0", "react-router-dom": "^6.11.2", "tailwind-merge": "^3.0.2", "tailwindcss": "^4.1.14", "vite": "^7.1.9", "vite-plugin-html": "^3.2.2", "vite-plugin-node-polyfills": "^0.24.0", "vite-plugin-svgr": "^4.5.0" };
-const devDependencies = { "@types/cypress": "^1.1.6", "cypress": "^14.5.4", "vite-bundle-analyzer": "^1.2.3" };
-const packageJson = {
-  name,
-  productName,
-  version,
-  description,
-  main,
-  type,
-  engines,
-  files,
-  exports,
-  sideEffects,
-  license,
-  author,
-  repository,
-  bugs,
-  homepage,
-  scripts,
-  dependencies,
-  devDependencies
-};
-const About = () => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    About$1,
-    {
-      packageJson,
-      phCliVersion: typeof connectConfig.phCliVersion === "string" ? connectConfig.phCliVersion : void 0
-    }
-  );
-};
-const DangerZone = () => {
-  const drives = useDrives();
-  const handleDeleteDrive = async (drive) => {
-    await deleteDrive(drive.header.id);
-    setSelectedDrive(void 0);
-  };
-  const handleClearStorage = () => {
-    showPHModal({ type: "clearStorage" });
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DangerZone$1,
-    {
-      drives: drives ?? [],
-      onDeleteDrive: handleDeleteDrive,
-      onClearStorage: handleClearStorage
-    }
-  );
-};
-const documentModelEditorOptions = [
-  { label: "V1", value: "document-model-editor" },
-  { label: "V2", value: "document-model-editor-v2" }
-];
-const DefaultEditor = () => {
-  const [documentModelEditor, setDocumentModelEditor] = reactExports.useState(documentModelEditorOptions[1]);
-  const handleSetDocumentEditor = reactExports.useCallback((value) => {
-    const option = documentModelEditorOptions.find((dm) => dm.value == value);
-    if (option) {
-      setDocumentModelEditor(option);
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DefaultEditor$1,
-    {
-      documentModelEditor: documentModelEditor.value,
-      setDocumentModelEditor: handleSetDocumentEditor,
-      documentModelEditorOptions
-    }
-  );
-};
-const LOCAL_REACTOR_VALUE = "local-reactor";
-const LOCAL_REACTOR_LABEL = "Local Reactor";
-const PackageManager = () => {
-  const vetraPackages = useVetraPackages();
-  const drives = useDrives();
-  const [reactor, setReactor] = reactExports.useState("");
-  const options = reactExports.useMemo(() => {
-    return drives?.reduce(
-      (acc, drive) => {
-        const trigger = drive.state.local.triggers.find(
-          (trigger2) => trigger2.data?.url
-        );
-        if (!trigger?.data?.url) {
-          return acc;
-        }
-        const value = trigger.data.url;
-        const label = drive.state.global.name;
-        acc.push({
-          value,
-          label,
-          disabled: true
-        });
-        return acc;
-      },
-      [
-        {
-          value: LOCAL_REACTOR_VALUE,
-          label: LOCAL_REACTOR_LABEL,
-          disabled: false
-        }
-      ]
-    );
-  }, [drives]);
-  reactExports.useEffect(() => {
-    setReactor((reactor2) => {
-      const defaultOption = options?.find((option) => !option.disabled);
-      if (reactor2 && options?.find((option) => option.value === reactor2)) {
-        return reactor2;
-      } else {
-        return defaultOption?.value ?? "";
-      }
-    });
-  }, [reactor, options]);
-  const packagesInfo = vetraPackages?.map(
-    (pkg) => makeVetraPackageManifest(pkg)
-  );
-  const handleReactorChange = reactExports.useCallback(
-    (reactor2) => setReactor(reactor2 ?? ""),
-    []
-  );
-  const handleInstall = reactExports.useCallback(
-    (packageName) => {
-      if (reactor !== LOCAL_REACTOR_VALUE) {
-        throw new Error("Cannot install external package on a remote reactor");
-      }
-      return addExternalPackage(packageName);
-    },
-    [reactor]
-  );
-  const handleUninstall = reactExports.useCallback(
-    (packageName) => {
-      if (reactor !== LOCAL_REACTOR_VALUE) {
-        throw new Error("Cannot delete external package on a remote reactor");
-      }
-      return removeExternalPackage(packageName);
-    },
-    [reactor]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    PackageManager$1,
-    {
-      mutable: true,
-      reactorOptions: options ?? [],
-      reactor,
-      packages: packagesInfo?.map((pkg) => ({
-        id: pkg.id,
-        name: pkg.name,
-        description: pkg.description,
-        category: pkg.category,
-        publisher: pkg.author.name,
-        publisherUrl: pkg.author.website ?? "",
-        modules: Object.values(pkg.modules).flatMap(
-          (modules) => modules.map((module) => module.name)
-        ),
-        removable: true
-      })) ?? [],
-      onReactorChange: handleReactorChange,
-      onInstall: handleInstall,
-      onUninstall: handleUninstall,
-      packageOptions: PH_PACKAGES
-    }
-  );
-};
-const SettingsModal = () => {
-  const phModal = usePHModal();
-  const open = phModal?.type === "settings";
-  function onRefresh() {
-    window.location.reload();
-  }
-  const tabs = reactExports.useMemo(
-    () => [
-      {
-        id: "package-manager",
-        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "PackageManager", size: 12 }),
-        label: "Package Manager",
-        content: PackageManager
-      },
-      {
-        id: "default-editors",
-        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "Edit", size: 12 }),
-        label: "Default Editors",
-        content: DefaultEditor
-      },
-      {
-        id: "danger-zone",
-        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "Danger", size: 12, className: "text-red-900" }),
-        label: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-900", children: "Danger Zone" }),
-        content: () => /* @__PURE__ */ jsxRuntimeExports.jsx(DangerZone, {})
-      },
-      {
-        id: "about",
-        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "QuestionSquare", size: 12 }),
-        label: "About",
-        content: About
-      }
-    ],
-    [onRefresh]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SettingsModal$1,
-    {
-      open,
-      title: t("modals.connectSettings.title"),
-      onOpenChange: (status) => {
-        if (!status) return closePHModal();
-      },
-      tabs
-    }
-  );
-};
-export {
-  SettingsModal
-};
-//# sourceMappingURL=SettingsModal-W6c3EI1V.js.map