@saas-support/react 0.3.2 → 0.4.0

package/dist/react.js

@@ -1,33 +1,33 @@
-import { jsx as e, jsxs as i, Fragment as D } from "react/jsx-runtime";
-import { createContext as Y, useContext as K, useState as g, useEffect as L, useRef as R, useCallback as S, useMemo as A } from "react";
-import { SaaSSupport as X, isMfaRequired as Z, BillingClient as ss, Transport as F, ReportClient as W } from "./index.js";
-import { SaaSError as Xs } from "./index.js";
-import { createPortal as es } from "react-dom";
-const H = Y(null);
-function k() {
-  const s = K(H);
+import { jsx as e, jsxs as l, Fragment as W } from "react/jsx-runtime";
+import { createContext as ts, useContext as ns, useState as h, useEffect as B, useRef as R, useCallback as C, useMemo as q } from "react";
+import { SaaSSupport as os, isMfaRequired as ls, BillingClient as is, Transport as H, ReportClient as J } from "./index.js";
+import { SaaSError as oe } from "./index.js";
+import { createPortal as cs } from "react-dom";
+const Q = ts(null);
+function E() {
+  const s = ns(Q);
   if (!s)
     throw new Error("useSaaSContext must be used within a <SaaSProvider>");
   return s;
 }
-function Bs({ publishableKey: s, apiKey: a, baseUrl: r, appearance: c, children: t }) {
-  const [d] = g(() => new X({ publishableKey: s, apiKey: a, baseUrl: r })), [l, u] = g(null), [o, n] = g(!1), [m, p] = g(null);
-  return L(() => {
-    let h = !1;
-    d.load().then(async () => {
-      if (h) return;
-      const y = await d.auth.getUser(), b = await d.auth.getSettings();
-      u(y), p(b), n(!0);
+function Rs({ publishableKey: s, apiKey: a, baseUrl: r, appearance: c, children: t }) {
+  const [i] = h(() => new os({ publishableKey: s, apiKey: a, baseUrl: r })), [d, u] = h(null), [o, n] = h(!1), [m, p] = h(null);
+  return B(() => {
+    let b = !1;
+    i.load().then(async () => {
+      if (b) return;
+      const x = await i.auth.getUser(), y = await i.auth.getSettings();
+      u(x), p(y), n(!0);
     });
-    const v = d.auth.onAuthStateChange((y) => {
-      h || u(y);
+    const f = i.auth.onAuthStateChange((x) => {
+      b || u(x);
     });
     return () => {
-      h = !0, v(), d.destroy();
+      b = !0, f(), i.destroy();
     };
-  }, [d]), /* @__PURE__ */ e(H.Provider, { value: { client: d, user: l, isLoaded: o, appearance: c, settings: m }, children: t });
+  }, [i]), /* @__PURE__ */ e(Q.Provider, { value: { client: i, user: d, isLoaded: o, appearance: c, settings: m }, children: t });
 }
-const rs = {
+const ds = {
   colorPrimary: "#6366f1",
   colorPrimaryHover: "#4f46e5",
   colorBackground: "#ffffff",
@@ -40,7 +40,7 @@ const rs = {
   colorWarning: "#f59e0b",
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   borderRadius: "8px"
-}, as = {
+}, us = {
   colorPrimary: "#818cf8",
   colorPrimaryHover: "#6366f1",
   colorBackground: "#1e1e2e",
@@ -54,11 +54,11 @@ const rs = {
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   borderRadius: "8px"
 };
-function U(s) {
-  const a = (s == null ? void 0 : s.baseTheme) === "dark" ? as : rs, r = s == null ? void 0 : s.variables;
+function V(s) {
+  const a = (s == null ? void 0 : s.baseTheme) === "dark" ? us : ds, r = s == null ? void 0 : s.variables;
   return {
     colorPrimary: (r == null ? void 0 : r.colorPrimary) ?? a.colorPrimary,
-    colorPrimaryHover: r != null && r.colorPrimary ? ns(r.colorPrimary, 10) : a.colorPrimaryHover,
+    colorPrimaryHover: r != null && r.colorPrimary ? ps(r.colorPrimary, 10) : a.colorPrimaryHover,
     colorBackground: (r == null ? void 0 : r.colorBackground) ?? a.colorBackground,
     colorText: (r == null ? void 0 : r.colorText) ?? a.colorText,
     colorTextSecondary: a.colorTextSecondary,
@@ -71,11 +71,11 @@ function U(s) {
     borderRadius: (r == null ? void 0 : r.borderRadius) ?? a.borderRadius
   };
 }
-function ns(s, a) {
-  const r = parseInt(s.replace("#", ""), 16), c = Math.max(0, (r >> 16) - Math.round(2.55 * a)), t = Math.max(0, (r >> 8 & 255) - Math.round(2.55 * a)), d = Math.max(0, (r & 255) - Math.round(2.55 * a));
-  return `#${(c << 16 | t << 8 | d).toString(16).padStart(6, "0")}`;
+function ps(s, a) {
+  const r = parseInt(s.replace("#", ""), 16), c = Math.max(0, (r >> 16) - Math.round(2.55 * a)), t = Math.max(0, (r >> 8 & 255) - Math.round(2.55 * a)), i = Math.max(0, (r & 255) - Math.round(2.55 * a));
+  return `#${(c << 16 | t << 8 | i).toString(16).padStart(6, "0")}`;
 }
-function O(s) {
+function G(s) {
   return `
     :host {
       all: initial;
@@ -773,6 +773,111 @@ function O(s) {
       object-fit: cover;
     }
 
+    /* Avatar hover overlay */
+    .ss-avatar-hoverable {
+      position: relative;
+      cursor: pointer;
+      transition: filter 0.15s;
+    }
+
+    .ss-avatar-overlay {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.15s;
+      color: #fff;
+    }
+
+    .ss-avatar-hoverable:hover .ss-avatar-overlay {
+      opacity: 1;
+    }
+
+    /* Avatar cropper */
+    .ss-avatar-cropper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .ss-avatar-canvas {
+      border-radius: ${s.borderRadius};
+      background: #111;
+      touch-action: none;
+      max-width: 100%;
+    }
+
+    .ss-avatar-zoom {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .ss-avatar-zoom-label {
+      font-size: 13px;
+      color: ${s.colorTextSecondary};
+      flex-shrink: 0;
+    }
+
+    .ss-avatar-zoom-slider {
+      flex: 1;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: ${s.colorInputBorder};
+      border-radius: 2px;
+      outline: none;
+    }
+
+    .ss-avatar-zoom-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: ${s.colorPrimary};
+      cursor: pointer;
+    }
+
+    .ss-avatar-zoom-slider::-moz-range-thumb {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: ${s.colorPrimary};
+      cursor: pointer;
+      border: none;
+    }
+
+    /* Dropzone */
+    .ss-avatar-dropzone {
+      border: 2px dashed ${s.colorInputBorder};
+      border-radius: ${s.borderRadius};
+      padding: 40px 24px;
+      text-align: center;
+      cursor: pointer;
+      transition: border-color 0.15s, background 0.15s;
+      color: ${s.colorTextSecondary};
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .ss-avatar-dropzone:hover,
+    .ss-avatar-dropzone-active {
+      border-color: ${s.colorPrimary};
+      background: ${s.colorPrimary}08;
+    }
+
+    .ss-avatar-dropzone svg {
+      opacity: 0.5;
+    }
+
     .ss-input-readonly {
       opacity: 0.6;
       cursor: not-allowed;
@@ -805,45 +910,45 @@ function O(s) {
     }
   `;
 }
-function B({ children: s, appearance: a }) {
-  const r = R(null), [c, t] = g(null);
-  L(() => {
+function D({ children: s, appearance: a }) {
+  const r = R(null), [c, t] = h(null);
+  B(() => {
     var m;
     if (!r.current || r.current.shadowRoot) {
       t(((m = r.current) == null ? void 0 : m.shadowRoot) ?? null);
       return;
     }
-    const l = r.current.attachShadow({ mode: "open" }), u = U(a), o = document.createElement("style");
-    o.textContent = O(u), l.appendChild(o);
+    const d = r.current.attachShadow({ mode: "open" }), u = V(a), o = document.createElement("style");
+    o.textContent = G(u), d.appendChild(o);
     const n = document.createElement("div");
-    l.appendChild(n), t(l);
-  }, []), L(() => {
+    d.appendChild(n), t(d);
+  }, []), B(() => {
     if (!c) return;
-    const l = c.querySelector("style");
-    if (l) {
-      const u = U(a);
-      l.textContent = O(u);
+    const d = c.querySelector("style");
+    if (d) {
+      const u = V(a);
+      d.textContent = G(u);
     }
   }, [a, c]);
-  const d = (c == null ? void 0 : c.querySelector("div")) ?? null;
-  return /* @__PURE__ */ e("div", { ref: r, style: { display: "contents" }, children: d && es(s, d) });
+  const i = (c == null ? void 0 : c.querySelector("div")) ?? null;
+  return /* @__PURE__ */ e("div", { ref: r, style: { display: "contents" }, children: i && cs(s, i) });
 }
-function j() {
-  const { client: s, user: a, isLoaded: r } = k();
+function Y() {
+  const { client: s, user: a, isLoaded: r } = E();
   return {
     isLoaded: r,
     isSignedIn: !!a,
     user: a,
-    signOut: S(() => s.auth.signOut(), [s]),
-    getToken: S(() => s.auth.getToken(), [s])
+    signOut: C(() => s.auth.signOut(), [s]),
+    getToken: C(() => s.auth.getToken(), [s])
   };
 }
-function zs() {
-  const { user: s, isLoaded: a } = k();
+function Os() {
+  const { user: s, isLoaded: a } = E();
   return { user: s, isLoaded: a };
 }
-function _() {
-  const { client: s } = k(), [a, r] = g(!1), [c, t] = g(null), d = S(
+function Z() {
+  const { client: s } = E(), [a, r] = h(!1), [c, t] = h(null), i = C(
     async (o, n) => {
       r(!0), t(null);
       try {
@@ -855,7 +960,7 @@ function _() {
       }
     },
     [s]
-  ), l = S(
+  ), d = C(
     async (o) => {
       r(!0), t(null);
       try {
@@ -867,7 +972,7 @@ function _() {
       }
     },
     [s]
-  ), u = S(
+  ), u = C(
     async (o, n) => {
       r(!0), t(null);
       try {
@@ -880,15 +985,15 @@ function _() {
     },
     [s]
   );
-  return { signIn: d, signInWithOAuth: l, submitMfaCode: u, isLoading: a, error: c, setError: t };
+  return { signIn: i, signInWithOAuth: d, submitMfaCode: u, isLoading: a, error: c, setError: t };
 }
-function ts() {
-  const { client: s } = k(), [a, r] = g(!1), [c, t] = g(null);
-  return { signUp: S(
-    async (l, u) => {
+function ms() {
+  const { client: s } = E(), [a, r] = h(!1), [c, t] = h(null);
+  return { signUp: C(
+    async (d, u) => {
       r(!0), t(null);
       try {
-        return await s.auth.signUp(l, u);
+        return await s.auth.signUp(d, u);
       } catch (o) {
         return t(o instanceof Error ? o.message : "Sign up failed"), null;
       } finally {
@@ -898,121 +1003,134 @@ function ts() {
     [s]
   ), isLoading: a, error: c, setError: t };
 }
-function os() {
-  const { client: s } = k(), [a, r] = g([]), [c, t] = g(null), [d, l] = g([]), [u, o] = g(!1), [n, m] = g(null), p = S(async () => {
+function gs() {
+  const { client: s } = E(), [a, r] = h([]), [c, t] = h(null), [i, d] = h([]), [u, o] = h(!1), [n, m] = h(null), p = C(async () => {
     o(!0), m(null);
     try {
-      const y = await s.auth.listOrgs();
-      r(y);
-    } catch (y) {
-      m(y instanceof Error ? y.message : "Failed to load organizations");
+      const x = await s.auth.listOrgs();
+      r(x);
+    } catch (x) {
+      m(x instanceof Error ? x.message : "Failed to load organizations");
     } finally {
       o(!1);
     }
   }, [s]);
-  L(() => {
+  B(() => {
     p();
   }, [p]);
-  const h = S(async (y) => {
+  const b = C(async (x) => {
     try {
-      const b = await s.auth.getOrg(y);
-      t(b);
-      const x = await s.auth.listMembers(y);
-      l(x);
-    } catch (b) {
-      m(b instanceof Error ? b.message : "Failed to load organization");
-    }
-  }, [s]), v = S(async (y, b) => {
+      const y = await s.auth.getOrg(x);
+      t(y);
+      const w = await s.auth.listMembers(x);
+      d(w);
+    } catch (y) {
+      m(y instanceof Error ? y.message : "Failed to load organization");
+    }
+  }, [s]), f = C(async (x, y) => {
     try {
-      const x = await s.auth.createOrg(y, b);
-      return r((f) => [...f, x]), x;
-    } catch (x) {
-      return m(x instanceof Error ? x.message : "Failed to create organization"), null;
+      const w = await s.auth.createOrg(x, y);
+      return r((v) => [...v, w]), w;
+    } catch (w) {
+      return m(w instanceof Error ? w.message : "Failed to create organization"), null;
     }
   }, [s]);
-  return { orgs: a, selectedOrg: c, members: d, isLoading: u, error: n, refresh: p, selectOrg: h, createOrg: v };
+  return { orgs: a, selectedOrg: c, members: i, isLoading: u, error: n, refresh: p, selectOrg: b, createOrg: f };
 }
-function G() {
-  const { client: s, user: a } = k(), [r, c] = g(!1), [t, d] = g(null), [l, u] = g(null), o = S(
-    async (m) => {
-      c(!0), d(null), u(null);
+function X() {
+  const { client: s, user: a } = E(), [r, c] = h(!1), [t, i] = h(null), [d, u] = h(null), o = C(
+    async (p) => {
+      c(!0), i(null), u(null);
+      try {
+        const b = await s.auth.updateProfile(p);
+        return u("Profile updated"), b;
+      } catch (b) {
+        return i(b instanceof Error ? b.message : "Failed to update profile"), null;
+      } finally {
+        c(!1);
+      }
+    },
+    [s]
+  ), n = C(
+    async (p, b) => {
+      c(!0), i(null), u(null);
       try {
-        const p = await s.auth.updateProfile(m);
-        return u("Profile updated"), p;
-      } catch (p) {
-        return d(p instanceof Error ? p.message : "Failed to update profile"), null;
+        return await s.auth.changePassword(p, b), u("Password changed successfully"), !0;
+      } catch (f) {
+        return i(f instanceof Error ? f.message : "Failed to change password"), !1;
       } finally {
         c(!1);
       }
     },
     [s]
-  ), n = S(
-    async (m, p) => {
-      c(!0), d(null), u(null);
+  ), m = C(
+    async (p) => {
+      c(!0), i(null), u(null);
       try {
-        return await s.auth.changePassword(m, p), u("Password changed successfully"), !0;
-      } catch (h) {
-        return d(h instanceof Error ? h.message : "Failed to change password"), !1;
+        const b = await s.auth.uploadAvatar(p);
+        return u("Avatar updated"), b;
+      } catch (b) {
+        return i(b instanceof Error ? b.message : "Failed to upload avatar"), null;
       } finally {
         c(!1);
       }
     },
     [s]
   );
-  return { user: a, updateProfile: o, changePassword: n, isLoading: r, error: t, success: l, setError: d, setSuccess: u };
+  return { user: a, updateProfile: o, uploadAvatar: m, changePassword: n, isLoading: r, error: t, success: d, setError: i, setSuccess: u };
 }
-const J = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>', Q = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" fill="currentColor"/></svg>';
-function qs({ appearance: s, signUpUrl: a, onSignUp: r }) {
-  const { appearance: c, settings: t } = k(), { signIn: d, signInWithOAuth: l, submitMfaCode: u, isLoading: o, error: n, setError: m } = _(), p = s ?? c, [h, v] = g(""), [y, b] = g(""), [x, f] = g(!1), [N, w] = g(""), [$, E] = g(""), z = S(
-    async (q) => {
-      if (q.preventDefault(), x) {
-        await u(N, $);
+const K = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>', ss = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" fill="currentColor"/></svg>';
+function Ws({ appearance: s, signUpUrl: a, onSignUp: r }) {
+  const { appearance: c, settings: t } = E(), { signIn: i, signInWithOAuth: d, submitMfaCode: u, isLoading: o, error: n, setError: m } = Z(), p = s ?? c, [b, f] = h(""), [x, y] = h(""), [w, v] = h(!1), [g, N] = h(""), [S, k] = h(""), z = C(
+    async (T) => {
+      if (T.preventDefault(), w) {
+        await u(g, S);
         return;
       }
-      const P = await d(h, y);
-      P && Z(P) && (w(P.mfaToken), f(!0), m(null));
+      const $ = await i(b, x);
+      $ && ls($) && (N($.mfaToken), v(!0), m(null));
     },
-    [h, y, x, N, $, d, u, m]
-  ), T = S(
-    async (q) => {
-      await l(q);
+    [b, x, w, g, S, i, u, m]
+  ), P = C(
+    async (T) => {
+      await d(T);
     },
-    [l]
-  ), C = (t == null ? void 0 : t.googleEnabled) || (t == null ? void 0 : t.githubEnabled);
-  return /* @__PURE__ */ e(B, { appearance: p, children: /* @__PURE__ */ i("div", { className: "ss-card", children: [
+    [d]
+  ), A = (t == null ? void 0 : t.googleEnabled) || (t == null ? void 0 : t.githubEnabled);
+  return /* @__PURE__ */ e(D, { appearance: p, children: /* @__PURE__ */ l("div", { className: "ss-card", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Sign in" }),
-    !x && /* @__PURE__ */ i(D, { children: [
-      (t == null ? void 0 : t.googleEnabled) && /* @__PURE__ */ i(
+    !w && /* @__PURE__ */ l(W, { children: [
+      (t == null ? void 0 : t.googleEnabled) && /* @__PURE__ */ l(
         "button",
         {
           type: "button",
           className: "ss-btn-social",
-          onClick: () => T("google"),
+          onClick: () => P("google"),
           disabled: o,
           children: [
-            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: J } }),
+            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: K } }),
             "Continue with Google"
           ]
         }
       ),
-      (t == null ? void 0 : t.githubEnabled) && /* @__PURE__ */ i(
+      (t == null ? void 0 : t.githubEnabled) && /* @__PURE__ */ l(
         "button",
         {
           type: "button",
           className: "ss-btn-social",
-          onClick: () => T("github"),
+          onClick: () => P("github"),
           disabled: o,
           children: [
-            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: Q } }),
+            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: ss } }),
             "Continue with GitHub"
           ]
         }
       ),
-      C && /* @__PURE__ */ e("div", { className: "ss-divider", children: "or" })
+      A && /* @__PURE__ */ e("div", { className: "ss-divider", children: "or" })
     ] }),
     n && /* @__PURE__ */ e("div", { className: "ss-global-error", children: n }),
-    /* @__PURE__ */ i("form", { onSubmit: z, children: [
-      x ? /* @__PURE__ */ i("div", { className: "ss-field", children: [
+    /* @__PURE__ */ l("form", { onSubmit: z, children: [
+      w ? /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-mfa-code", children: "Authentication code" }),
         /* @__PURE__ */ e(
           "input",
@@ -1023,13 +1141,13 @@ function qs({ appearance: s, signUpUrl: a, onSignUp: r }) {
             inputMode: "numeric",
             autoComplete: "one-time-code",
             placeholder: "Enter 6-digit code",
-            value: $,
-            onChange: (q) => E(q.target.value),
+            value: S,
+            onChange: (T) => k(T.target.value),
             autoFocus: !0
           }
         )
-      ] }) : /* @__PURE__ */ i(D, { children: [
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      ] }) : /* @__PURE__ */ l(W, { children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-email", children: "Email" }),
           /* @__PURE__ */ e(
             "input",
@@ -1039,13 +1157,13 @@ function qs({ appearance: s, signUpUrl: a, onSignUp: r }) {
               type: "email",
               autoComplete: "email",
               placeholder: "you@example.com",
-              value: h,
-              onChange: (q) => v(q.target.value),
+              value: b,
+              onChange: (T) => f(T.target.value),
               required: !0
             }
           )
         ] }),
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-password", children: "Password" }),
           /* @__PURE__ */ e(
             "input",
@@ -1055,88 +1173,88 @@ function qs({ appearance: s, signUpUrl: a, onSignUp: r }) {
               type: "password",
               autoComplete: "current-password",
               placeholder: "Enter your password",
-              value: y,
-              onChange: (q) => b(q.target.value),
+              value: x,
+              onChange: (T) => y(T.target.value),
               required: !0
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: o, children: [
+      /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: o, children: [
         o && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
-        x ? "Verify" : "Continue"
+        w ? "Verify" : "Continue"
       ] })
     ] }),
-    x && /* @__PURE__ */ e("div", { className: "ss-footer", children: /* @__PURE__ */ e(
+    w && /* @__PURE__ */ e("div", { className: "ss-footer", children: /* @__PURE__ */ e(
       "span",
       {
         className: "ss-link",
         onClick: () => {
-          f(!1), E(""), m(null);
+          v(!1), k(""), m(null);
         },
         children: "Back to sign in"
       }
     ) }),
-    !x && /* @__PURE__ */ i("div", { className: "ss-footer", children: [
+    !w && /* @__PURE__ */ l("div", { className: "ss-footer", children: [
       "Don't have an account?",
       " ",
       r ? /* @__PURE__ */ e("span", { className: "ss-link", onClick: r, children: "Sign up" }) : a ? /* @__PURE__ */ e("a", { className: "ss-link", href: a, children: "Sign up" }) : /* @__PURE__ */ e("span", { className: "ss-link", children: "Sign up" })
     ] })
   ] }) });
 }
-function As({ appearance: s, signInUrl: a, onSignIn: r }) {
-  const { appearance: c, settings: t } = k(), { signUp: d, isLoading: l, error: u, setError: o } = ts(), { signInWithOAuth: n } = _(), m = s ?? c, [p, h] = g(""), [v, y] = g(""), [b, x] = g(""), [f, N] = g(null), w = S(
-    async (T) => {
-      if (T.preventDefault(), N(null), v !== b) {
-        N("Passwords do not match");
+function Hs({ appearance: s, signInUrl: a, onSignIn: r }) {
+  const { appearance: c, settings: t } = E(), { signUp: i, isLoading: d, error: u, setError: o } = ms(), { signInWithOAuth: n } = Z(), m = s ?? c, [p, b] = h(""), [f, x] = h(""), [y, w] = h(""), [v, g] = h(null), N = C(
+    async (P) => {
+      if (P.preventDefault(), g(null), f !== y) {
+        g("Passwords do not match");
         return;
       }
-      const C = (t == null ? void 0 : t.passwordMinLength) ?? 8;
-      if (v.length < C) {
-        N(`Password must be at least ${C} characters`);
+      const A = (t == null ? void 0 : t.passwordMinLength) ?? 8;
+      if (f.length < A) {
+        g(`Password must be at least ${A} characters`);
         return;
       }
-      await d(p, v);
+      await i(p, f);
     },
-    [p, v, b, t, d]
-  ), $ = S(
-    async (T) => {
-      await n(T);
+    [p, f, y, t, i]
+  ), S = C(
+    async (P) => {
+      await n(P);
     },
     [n]
-  ), E = (t == null ? void 0 : t.googleEnabled) || (t == null ? void 0 : t.githubEnabled), z = f || u;
-  return /* @__PURE__ */ e(B, { appearance: m, children: /* @__PURE__ */ i("div", { className: "ss-card", children: [
+  ), k = (t == null ? void 0 : t.googleEnabled) || (t == null ? void 0 : t.githubEnabled), z = v || u;
+  return /* @__PURE__ */ e(D, { appearance: m, children: /* @__PURE__ */ l("div", { className: "ss-card", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Create account" }),
-    (t == null ? void 0 : t.googleEnabled) && /* @__PURE__ */ i(
+    (t == null ? void 0 : t.googleEnabled) && /* @__PURE__ */ l(
       "button",
       {
         type: "button",
         className: "ss-btn-social",
-        onClick: () => $("google"),
-        disabled: l,
+        onClick: () => S("google"),
+        disabled: d,
         children: [
-          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: J } }),
+          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: K } }),
           "Continue with Google"
         ]
       }
     ),
-    (t == null ? void 0 : t.githubEnabled) && /* @__PURE__ */ i(
+    (t == null ? void 0 : t.githubEnabled) && /* @__PURE__ */ l(
       "button",
       {
         type: "button",
         className: "ss-btn-social",
-        onClick: () => $("github"),
-        disabled: l,
+        onClick: () => S("github"),
+        disabled: d,
         children: [
-          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: Q } }),
+          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: ss } }),
           "Continue with GitHub"
         ]
       }
     ),
-    E && /* @__PURE__ */ e("div", { className: "ss-divider", children: "or" }),
+    k && /* @__PURE__ */ e("div", { className: "ss-divider", children: "or" }),
     z && /* @__PURE__ */ e("div", { className: "ss-global-error", children: z }),
-    /* @__PURE__ */ i("form", { onSubmit: w, children: [
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+    /* @__PURE__ */ l("form", { onSubmit: N, children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-signup-email", children: "Email" }),
         /* @__PURE__ */ e(
           "input",
@@ -1147,12 +1265,12 @@ function As({ appearance: s, signInUrl: a, onSignIn: r }) {
             autoComplete: "email",
             placeholder: "you@example.com",
             value: p,
-            onChange: (T) => h(T.target.value),
+            onChange: (P) => b(P.target.value),
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-signup-password", children: "Password" }),
         /* @__PURE__ */ e(
           "input",
@@ -1162,15 +1280,15 @@ function As({ appearance: s, signInUrl: a, onSignIn: r }) {
             type: "password",
             autoComplete: "new-password",
             placeholder: "Create a password",
-            value: v,
-            onChange: (T) => {
-              y(T.target.value), N(null);
+            value: f,
+            onChange: (P) => {
+              x(P.target.value), g(null);
             },
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-signup-confirm", children: "Confirm password" }),
         /* @__PURE__ */ e(
           "input",
@@ -1180,54 +1298,200 @@ function As({ appearance: s, signInUrl: a, onSignIn: r }) {
             type: "password",
             autoComplete: "new-password",
             placeholder: "Confirm your password",
-            value: b,
-            onChange: (T) => {
-              x(T.target.value), N(null);
+            value: y,
+            onChange: (P) => {
+              w(P.target.value), g(null);
             },
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l, children: [
-        l && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+      /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: d, children: [
+        d && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Create account"
       ] })
     ] }),
-    /* @__PURE__ */ i("div", { className: "ss-footer", children: [
+    /* @__PURE__ */ l("div", { className: "ss-footer", children: [
       "Already have an account?",
       " ",
       r ? /* @__PURE__ */ e("span", { className: "ss-link", onClick: r, children: "Sign in" }) : a ? /* @__PURE__ */ e("a", { className: "ss-link", href: a, children: "Sign in" }) : /* @__PURE__ */ e("span", { className: "ss-link", children: "Sign in" })
     ] })
   ] }) });
 }
-function Ds({ appearance: s }) {
-  const { appearance: a } = k(), { user: r, signOut: c } = j(), t = s ?? a, [d, l] = g(!1), [u, o] = g(!1), n = R(null), m = S((h) => {
-    n.current && !h.composedPath().includes(n.current) && l(!1);
+const I = 256, F = 112;
+function hs({ file: s, onCrop: a, onCancel: r }) {
+  const c = R(null), t = R(null), [i, d] = h(1), [u, o] = h({ x: 0, y: 0 }), [n, m] = h(!1), p = R({ x: 0, y: 0, ox: 0, oy: 0 }), [b, f] = h(!1);
+  B(() => {
+    const g = new Image(), N = URL.createObjectURL(s);
+    return g.onload = () => {
+      t.current = g, f(!0), o({ x: 0, y: 0 }), d(1);
+    }, g.src = N, () => URL.revokeObjectURL(N);
+  }, [s]), B(() => {
+    if (!b || !t.current || !c.current) return;
+    const g = c.current.getContext("2d");
+    if (!g) return;
+    const N = t.current;
+    g.clearRect(0, 0, I, I), g.fillStyle = "#111", g.fillRect(0, 0, I, I);
+    const S = Math.max(I / N.width, I / N.height) * i, k = N.width * S, z = N.height * S, P = (I - k) / 2 + u.x, A = (I - z) / 2 + u.y;
+    g.save(), g.beginPath(), g.arc(I / 2, I / 2, F, 0, Math.PI * 2), g.clip(), g.drawImage(N, P, A, k, z), g.restore(), g.save(), g.fillStyle = "rgba(0, 0, 0, 0.6)", g.fillRect(0, 0, I, I), g.globalCompositeOperation = "destination-out", g.beginPath(), g.arc(I / 2, I / 2, F, 0, Math.PI * 2), g.fill(), g.restore(), g.save(), g.beginPath(), g.arc(I / 2, I / 2, F, 0, Math.PI * 2), g.clip(), g.drawImage(N, P, A, k, z), g.restore(), g.strokeStyle = "rgba(255, 255, 255, 0.6)", g.lineWidth = 2, g.beginPath(), g.arc(I / 2, I / 2, F, 0, Math.PI * 2), g.stroke();
+  }, [i, u, b]);
+  const x = C(
+    (g) => {
+      m(!0), p.current = { x: g.clientX, y: g.clientY, ox: u.x, oy: u.y }, g.target.setPointerCapture(g.pointerId);
+    },
+    [u]
+  ), y = C(
+    (g) => {
+      n && o({
+        x: p.current.ox + (g.clientX - p.current.x),
+        y: p.current.oy + (g.clientY - p.current.y)
+      });
+    },
+    [n]
+  ), w = C(() => m(!1), []), v = C(() => {
+    if (!t.current) return;
+    const g = document.createElement("canvas"), N = F * 2;
+    g.width = N, g.height = N;
+    const S = g.getContext("2d");
+    if (!S) return;
+    const k = t.current, z = Math.max(I / k.width, I / k.height) * i, P = k.width * z, A = k.height * z, T = (I - P) / 2 + u.x - (I / 2 - F), $ = (I - A) / 2 + u.y - (I / 2 - F);
+    S.beginPath(), S.arc(F, F, F, 0, Math.PI * 2), S.clip(), S.drawImage(k, T, $, P, A), g.toBlob((M) => {
+      M && a(M);
+    }, "image/png");
+  }, [i, u, a]);
+  return /* @__PURE__ */ l("div", { className: "ss-avatar-cropper", children: [
+    /* @__PURE__ */ e(
+      "canvas",
+      {
+        ref: c,
+        width: I,
+        height: I,
+        className: "ss-avatar-canvas",
+        onPointerDown: x,
+        onPointerMove: y,
+        onPointerUp: w,
+        style: { cursor: n ? "grabbing" : "grab" }
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "ss-avatar-zoom", children: [
+      /* @__PURE__ */ e("span", { className: "ss-avatar-zoom-label", children: "Zoom" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "range",
+          min: "1",
+          max: "3",
+          step: "0.01",
+          value: i,
+          onChange: (g) => d(parseFloat(g.target.value)),
+          className: "ss-avatar-zoom-slider"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ l("div", { className: "ss-btn-group", children: [
+      /* @__PURE__ */ e("button", { type: "button", className: "ss-btn ss-btn-danger ss-btn-sm", onClick: r, children: "Cancel" }),
+      /* @__PURE__ */ e("button", { type: "button", className: "ss-btn ss-btn-primary ss-btn-sm", onClick: v, children: "Save" })
+    ] })
+  ] });
+}
+function es({ onUpload: s, onClose: a, isLoading: r }) {
+  const [c, t] = h(null), [i, d] = h(!1), [u, o] = h(null), n = R(null), m = C((f) => {
+    if (!f.type.startsWith("image/")) {
+      o("Please select an image file");
+      return;
+    }
+    if (f.size > 5 * 1024 * 1024) {
+      o("Image must be smaller than 5 MB");
+      return;
+    }
+    o(null), t(f);
+  }, []), p = C(
+    (f) => {
+      f.preventDefault(), d(!1);
+      const x = f.dataTransfer.files[0];
+      x && m(x);
+    },
+    [m]
+  ), b = C(
+    async (f) => {
+      await s(f);
+    },
+    [s]
+  );
+  return /* @__PURE__ */ e("div", { className: "ss-modal-overlay", onClick: (f) => {
+    f.target === f.currentTarget && a();
+  }, children: /* @__PURE__ */ l("div", { className: "ss-modal", children: [
+    /* @__PURE__ */ l("div", { className: "ss-modal-header", children: [
+      /* @__PURE__ */ e("span", { className: "ss-modal-title", children: "Upload Avatar" }),
+      /* @__PURE__ */ e("button", { type: "button", className: "ss-modal-close", onClick: a, children: "✕" })
+    ] }),
+    u && /* @__PURE__ */ e("div", { className: "ss-global-error", children: u }),
+    c ? /* @__PURE__ */ e(hs, { file: c, onCrop: b, onCancel: () => t(null) }) : /* @__PURE__ */ l(
+      "div",
+      {
+        className: `ss-avatar-dropzone${i ? " ss-avatar-dropzone-active" : ""}`,
+        onDragOver: (f) => {
+          f.preventDefault(), d(!0);
+        },
+        onDragLeave: () => d(!1),
+        onDrop: p,
+        onClick: () => {
+          var f;
+          return (f = n.current) == null ? void 0 : f.click();
+        },
+        children: [
+          /* @__PURE__ */ l("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ e("path", { d: "M12 16a4 4 0 100-8 4 4 0 000 8z" }),
+            /* @__PURE__ */ e("path", { d: "M3 16.8V9.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 6 5.08 6 6.2 6h.382c.246 0 .37 0 .482-.022a1 1 0 00.513-.29c.08-.082.148-.186.284-.392l.079-.118C8.08 4.968 8.15 4.863 8.234 4.77a2 2 0 01.965-.61C9.346 4.1 9.508 4.1 9.834 4.1h4.332c.326 0 .488 0 .636.06a2 2 0 01.965.61c.083.094.153.198.293.408l.079.118c.136.206.204.31.284.392a1 1 0 00.513.29c.112.022.236.022.482.022h.382c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 7.52 21 8.08 21 9.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 20 18.92 20 17.8 20H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 18.48 3 17.92 3 16.8z" })
+          ] }),
+          /* @__PURE__ */ e("span", { children: "Drop image here or click to browse" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: n,
+              type: "file",
+              accept: "image/*",
+              style: { display: "none" },
+              onChange: (f) => {
+                var x;
+                (x = f.target.files) != null && x[0] && m(f.target.files[0]);
+              }
+            }
+          )
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ e("div", { className: "ss-loading", children: "Uploading..." })
+  ] }) });
+}
+function js({ appearance: s }) {
+  const { appearance: a } = E(), { user: r, signOut: c } = Y(), t = s ?? a, [i, d] = h(!1), [u, o] = h(!1), n = R(null), m = C((b) => {
+    n.current && !b.composedPath().includes(n.current) && d(!1);
   }, []);
-  if (L(() => {
-    if (d) {
-      const h = setTimeout(() => {
+  if (B(() => {
+    if (i) {
+      const b = setTimeout(() => {
         document.addEventListener("click", m);
       }, 0);
       return () => {
-        clearTimeout(h), document.removeEventListener("click", m);
+        clearTimeout(b), document.removeEventListener("click", m);
       };
     }
-  }, [d, m]), !r) return null;
+  }, [i, m]), !r) return null;
   const p = (r.name || r.email).charAt(0).toUpperCase();
-  return /* @__PURE__ */ e(B, { appearance: t, children: /* @__PURE__ */ i("div", { className: "ss-user-btn", ref: n, children: [
+  return /* @__PURE__ */ e(D, { appearance: t, children: /* @__PURE__ */ l("div", { className: "ss-user-btn", ref: n, children: [
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         className: "ss-avatar",
-        onClick: () => l(!d),
+        onClick: () => d(!i),
         "aria-label": "User menu",
         children: r.avatarUrl ? /* @__PURE__ */ e("img", { src: r.avatarUrl, alt: "", style: { width: "100%", height: "100%", borderRadius: "50%", objectFit: "cover" } }) : p
       }
     ),
-    d && /* @__PURE__ */ i("div", { className: "ss-dropdown", children: [
-      /* @__PURE__ */ i("div", { className: "ss-dropdown-header", children: [
+    i && /* @__PURE__ */ l("div", { className: "ss-dropdown", children: [
+      /* @__PURE__ */ l("div", { className: "ss-dropdown-header", children: [
         r.name && /* @__PURE__ */ e("div", { style: { fontWeight: 600, fontSize: "14px", color: "inherit" }, children: r.name }),
         /* @__PURE__ */ e("div", { className: "ss-dropdown-email", children: r.email })
       ] }),
@@ -1237,7 +1501,7 @@ function Ds({ appearance: s }) {
           type: "button",
           className: "ss-dropdown-item",
           onClick: () => {
-            l(!1), o(!0);
+            d(!1), o(!0);
           },
           children: "Profile"
         }
@@ -1248,47 +1512,67 @@ function Ds({ appearance: s }) {
           type: "button",
           className: "ss-dropdown-item ss-dropdown-item-danger",
           onClick: async () => {
-            l(!1), await c();
+            d(!1), await c();
           },
           children: "Sign out"
         }
       )
     ] }),
-    u && /* @__PURE__ */ e(ls, { onClose: () => o(!1) })
+    u && /* @__PURE__ */ e(bs, { onClose: () => o(!1) })
   ] }) });
 }
-function ls({ onClose: s }) {
-  const { user: a, updateProfile: r, changePassword: c, isLoading: t, error: d, success: l, setError: u, setSuccess: o } = G(), [n, m] = g((a == null ? void 0 : a.name) ?? ""), [p, h] = g((a == null ? void 0 : a.avatarUrl) ?? ""), [v, y] = g(""), [b, x] = g(""), [f, N] = g(""), [w, $] = g(null), E = S(
-    async (C) => {
-      C.preventDefault(), u(null), o(null), await r({ name: n, avatarUrl: p });
+function bs({ onClose: s }) {
+  const { user: a, updateProfile: r, uploadAvatar: c, changePassword: t, isLoading: i, error: d, success: u, setError: o, setSuccess: n } = X(), [m, p] = h((a == null ? void 0 : a.name) ?? ""), [b, f] = h((a == null ? void 0 : a.avatarUrl) ?? ""), [x, y] = h(!1), [w, v] = h(""), [g, N] = h(""), [S, k] = h(""), [z, P] = h(null), A = C(
+    async (L) => {
+      L.preventDefault(), o(null), n(null), await r({ name: m, avatarUrl: b || void 0 });
     },
-    [n, p, r, u, o]
-  ), z = S(
-    async (C) => {
-      if (C.preventDefault(), $(null), u(null), o(null), b !== f) {
-        $("Passwords do not match");
+    [m, b, r, o, n]
+  ), T = C(
+    async (L) => {
+      const O = await c(L);
+      O && (f(O.avatarUrl), y(!1));
+    },
+    [c]
+  ), $ = C(
+    async (L) => {
+      if (L.preventDefault(), P(null), o(null), n(null), g !== S) {
+        P("Passwords do not match");
         return;
       }
-      if (b.length < 8) {
-        $("Password must be at least 8 characters");
+      if (g.length < 8) {
+        P("Password must be at least 8 characters");
         return;
       }
-      await c(v, b) && (y(""), x(""), N(""));
+      await t(w, g) && (v(""), N(""), k(""));
     },
-    [v, b, f, c, u, o]
-  ), T = (a == null ? void 0 : a.provider) === "email";
-  return /* @__PURE__ */ e("div", { className: "ss-modal-overlay", onClick: (C) => {
-    C.target === C.currentTarget && s();
-  }, children: /* @__PURE__ */ i("div", { className: "ss-modal", children: [
-    /* @__PURE__ */ i("div", { className: "ss-modal-header", children: [
+    [w, g, S, t, o, n]
+  ), M = (a == null ? void 0 : a.provider) === "email";
+  return /* @__PURE__ */ e("div", { className: "ss-modal-overlay", onClick: (L) => {
+    L.target === L.currentTarget && s();
+  }, children: /* @__PURE__ */ l("div", { className: "ss-modal", children: [
+    /* @__PURE__ */ l("div", { className: "ss-modal-header", children: [
       /* @__PURE__ */ e("span", { className: "ss-modal-title", children: "Profile" }),
       /* @__PURE__ */ e("button", { type: "button", className: "ss-modal-close", onClick: s, children: "✕" })
     ] }),
     d && /* @__PURE__ */ e("div", { className: "ss-global-error", children: d }),
-    l && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: l }),
-    /* @__PURE__ */ e("div", { className: "ss-avatar-preview", children: p ? /* @__PURE__ */ e("img", { src: p, alt: "" }) : (n || (a == null ? void 0 : a.email) || "?").charAt(0).toUpperCase() }),
-    /* @__PURE__ */ i("form", { onSubmit: E, children: [
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+    u && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: u }),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: "ss-avatar-preview ss-avatar-hoverable",
+        onClick: () => y(!0),
+        title: "Click to change avatar",
+        children: [
+          b ? /* @__PURE__ */ e("img", { src: b, alt: "" }) : (m || (a == null ? void 0 : a.email) || "?").charAt(0).toUpperCase(),
+          /* @__PURE__ */ e("div", { className: "ss-avatar-overlay", children: /* @__PURE__ */ l("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ e("path", { d: "M12 16a4 4 0 100-8 4 4 0 000 8z" }),
+            /* @__PURE__ */ e("path", { d: "M3 16.8V9.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 6 5.08 6 6.2 6h.382c.246 0 .37 0 .482-.022a1 1 0 00.513-.29c.08-.082.148-.186.284-.392l.079-.118C8.08 4.968 8.15 4.863 8.234 4.77a2 2 0 01.965-.61C9.346 4.1 9.508 4.1 9.834 4.1h4.332c.326 0 .488 0 .636.06a2 2 0 01.965.61c.083.094.153.198.293.408l.079.118c.136.206.204.31.284.392a1 1 0 00.513.29c.112.022.236.022.482.022h.382c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 7.52 21 8.08 21 9.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 20 18.92 20 17.8 20H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 18.48 3 17.92 3 16.8z" })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ l("form", { onSubmit: A, children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Name" }),
         /* @__PURE__ */ e(
           "input",
@@ -1296,236 +1580,256 @@ function ls({ onClose: s }) {
             className: "ss-input",
             type: "text",
             placeholder: "Your name",
-            value: n,
-            onChange: (C) => m(C.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
-        /* @__PURE__ */ e("label", { className: "ss-label", children: "Avatar URL" }),
-        /* @__PURE__ */ e(
-          "input",
-          {
-            className: "ss-input",
-            type: "url",
-            placeholder: "https://example.com/avatar.jpg",
-            value: p,
-            onChange: (C) => h(C.target.value)
+            value: m,
+            onChange: (L) => p(L.target.value)
           }
         )
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Email" }),
         /* @__PURE__ */ e("input", { className: "ss-input ss-input-readonly", type: "email", value: (a == null ? void 0 : a.email) ?? "", disabled: !0, readOnly: !0 })
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Provider" }),
         /* @__PURE__ */ e("input", { className: "ss-input ss-input-readonly", type: "text", value: (a == null ? void 0 : a.provider) ?? "", disabled: !0, readOnly: !0 })
       ] }),
-      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: t, children: [
-        t && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+      /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: i, children: [
+        i && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Save changes"
       ] })
     ] }),
-    T && /* @__PURE__ */ i("div", { className: "ss-modal-section", children: [
+    M && /* @__PURE__ */ l("div", { className: "ss-modal-section", children: [
       /* @__PURE__ */ e("div", { className: "ss-modal-section-title", children: "Change password" }),
-      w && /* @__PURE__ */ e("div", { className: "ss-global-error", children: w }),
-      /* @__PURE__ */ i("form", { onSubmit: z, children: [
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      z && /* @__PURE__ */ e("div", { className: "ss-global-error", children: z }),
+      /* @__PURE__ */ l("form", { onSubmit: $, children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", children: "Current password" }),
           /* @__PURE__ */ e(
             "input",
             {
               className: "ss-input",
               type: "password",
-              value: v,
-              onChange: (C) => y(C.target.value),
+              value: w,
+              onChange: (L) => v(L.target.value),
               required: !0
             }
           )
         ] }),
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", children: "New password" }),
           /* @__PURE__ */ e(
             "input",
             {
               className: "ss-input",
               type: "password",
-              value: b,
-              onChange: (C) => x(C.target.value),
+              value: g,
+              onChange: (L) => N(L.target.value),
               required: !0
             }
           )
         ] }),
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", children: "Confirm new password" }),
           /* @__PURE__ */ e(
             "input",
             {
               className: "ss-input",
               type: "password",
-              value: f,
-              onChange: (C) => N(C.target.value),
+              value: S,
+              onChange: (L) => k(L.target.value),
               required: !0
             }
           )
         ] }),
-        /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: t, children: [
-          t && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+        /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: i, children: [
+          i && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
           "Update password"
         ] })
       ] })
-    ] })
+    ] }),
+    x && /* @__PURE__ */ e(
+      es,
+      {
+        onUpload: T,
+        onClose: () => y(!1),
+        isLoading: i
+      }
+    )
   ] }) });
 }
-function Fs({ appearance: s }) {
-  const { appearance: a } = k(), { user: r, signOut: c } = j(), { updateProfile: t, changePassword: d, isLoading: l, error: u, success: o, setError: n, setSuccess: m } = G(), p = s ?? a, [h, v] = g((r == null ? void 0 : r.name) ?? ""), [y, b] = g((r == null ? void 0 : r.avatarUrl) ?? ""), [x, f] = g(""), [N, w] = g(""), [$, E] = g(""), [z, T] = g(null), C = S(
-    async (I) => {
-      I.preventDefault(), n(null), m(null), await t({ name: h, avatarUrl: y });
+function _s({ appearance: s }) {
+  const { appearance: a } = E(), { user: r, signOut: c } = Y(), { updateProfile: t, uploadAvatar: i, changePassword: d, isLoading: u, error: o, success: n, setError: m, setSuccess: p } = X(), b = s ?? a, [f, x] = h((r == null ? void 0 : r.name) ?? ""), [y, w] = h((r == null ? void 0 : r.avatarUrl) ?? ""), [v, g] = h(!1), [N, S] = h(""), [k, z] = h(""), [P, A] = h(""), [T, $] = h(null), M = C(
+    async (U) => {
+      U.preventDefault(), m(null), p(null), await t({ name: f, avatarUrl: y || void 0 });
+    },
+    [f, y, t, m, p]
+  ), L = C(
+    async (U) => {
+      const _ = await i(U);
+      _ && (w(_.avatarUrl), g(!1));
     },
-    [h, y, t, n, m]
-  ), q = S(
-    async (I) => {
-      if (I.preventDefault(), T(null), n(null), m(null), N !== $) {
-        T("Passwords do not match");
+    [i]
+  ), O = C(
+    async (U) => {
+      if (U.preventDefault(), $(null), m(null), p(null), k !== P) {
+        $("Passwords do not match");
         return;
       }
-      if (N.length < 8) {
-        T("Password must be at least 8 characters");
+      if (k.length < 8) {
+        $("Password must be at least 8 characters");
         return;
       }
-      await d(x, N) && (f(""), w(""), E(""));
+      await d(N, k) && (S(""), z(""), A(""));
     },
-    [x, N, $, d, n, m]
+    [N, k, P, d, m, p]
   );
   if (!r) return null;
-  const P = r.provider === "email";
-  return /* @__PURE__ */ e(B, { appearance: p, children: /* @__PURE__ */ i("div", { className: "ss-card ss-card-wide", children: [
+  const as = r.provider === "email";
+  return /* @__PURE__ */ e(D, { appearance: b, children: /* @__PURE__ */ l("div", { className: "ss-card ss-card-wide", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Profile" }),
-    u && /* @__PURE__ */ e("div", { className: "ss-global-error", children: u }),
-    o && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: o }),
-    /* @__PURE__ */ e("div", { className: "ss-avatar-preview", style: { margin: "0 auto 16px" }, children: y ? /* @__PURE__ */ e("img", { src: y, alt: "" }) : (h || r.email).charAt(0).toUpperCase() }),
-    /* @__PURE__ */ i("form", { onSubmit: C, children: [
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+    o && /* @__PURE__ */ e("div", { className: "ss-global-error", children: o }),
+    n && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: n }),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: "ss-avatar-preview ss-avatar-hoverable",
+        style: { margin: "0 auto 16px" },
+        onClick: () => g(!0),
+        title: "Click to change avatar",
+        children: [
+          y ? /* @__PURE__ */ e("img", { src: y, alt: "" }) : (f || r.email).charAt(0).toUpperCase(),
+          /* @__PURE__ */ e("div", { className: "ss-avatar-overlay", children: /* @__PURE__ */ l("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ e("path", { d: "M12 16a4 4 0 100-8 4 4 0 000 8z" }),
+            /* @__PURE__ */ e("path", { d: "M3 16.8V9.2c0-1.12 0-1.68.218-2.108a2 2 0 01.874-.874C4.52 6 5.08 6 6.2 6h.382c.246 0 .37 0 .482-.022a1 1 0 00.513-.29c.08-.082.148-.186.284-.392l.079-.118C8.08 4.968 8.15 4.863 8.234 4.77a2 2 0 01.965-.61C9.346 4.1 9.508 4.1 9.834 4.1h4.332c.326 0 .488 0 .636.06a2 2 0 01.965.61c.083.094.153.198.293.408l.079.118c.136.206.204.31.284.392a1 1 0 00.513.29c.112.022.236.022.482.022h.382c1.12 0 1.68 0 2.108.218a2 2 0 01.874.874C21 7.52 21 8.08 21 9.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 01-.874.874C19.48 20 18.92 20 17.8 20H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874C3 18.48 3 17.92 3 16.8z" })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ l("form", { onSubmit: M, children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Name" }),
-        /* @__PURE__ */ e("input", { className: "ss-input", type: "text", placeholder: "Your name", value: h, onChange: (I) => v(I.target.value) })
+        /* @__PURE__ */ e("input", { className: "ss-input", type: "text", placeholder: "Your name", value: f, onChange: (U) => x(U.target.value) })
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
-        /* @__PURE__ */ e("label", { className: "ss-label", children: "Avatar URL" }),
-        /* @__PURE__ */ e("input", { className: "ss-input", type: "url", placeholder: "https://example.com/avatar.jpg", value: y, onChange: (I) => b(I.target.value) })
-      ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Email" }),
         /* @__PURE__ */ e("input", { className: "ss-input ss-input-readonly", type: "email", value: r.email, disabled: !0, readOnly: !0 })
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Provider" }),
         /* @__PURE__ */ e("input", { className: "ss-input ss-input-readonly", type: "text", value: r.provider, disabled: !0, readOnly: !0 })
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Email verified" }),
         /* @__PURE__ */ e("input", { className: "ss-input ss-input-readonly", type: "text", value: r.emailVerified ? "Yes" : "No", disabled: !0, readOnly: !0 })
       ] }),
-      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l, children: [
-        l && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+      /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: u, children: [
+        u && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Save changes"
       ] })
     ] }),
-    P && /* @__PURE__ */ i("div", { className: "ss-modal-section", children: [
+    as && /* @__PURE__ */ l("div", { className: "ss-modal-section", children: [
       /* @__PURE__ */ e("div", { className: "ss-modal-section-title", children: "Change password" }),
-      z && /* @__PURE__ */ e("div", { className: "ss-global-error", children: z }),
-      /* @__PURE__ */ i("form", { onSubmit: q, children: [
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      T && /* @__PURE__ */ e("div", { className: "ss-global-error", children: T }),
+      /* @__PURE__ */ l("form", { onSubmit: O, children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", children: "Current password" }),
-          /* @__PURE__ */ e("input", { className: "ss-input", type: "password", value: x, onChange: (I) => f(I.target.value), required: !0 })
+          /* @__PURE__ */ e("input", { className: "ss-input", type: "password", value: N, onChange: (U) => S(U.target.value), required: !0 })
         ] }),
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", children: "New password" }),
-          /* @__PURE__ */ e("input", { className: "ss-input", type: "password", value: N, onChange: (I) => w(I.target.value), required: !0 })
+          /* @__PURE__ */ e("input", { className: "ss-input", type: "password", value: k, onChange: (U) => z(U.target.value), required: !0 })
         ] }),
-        /* @__PURE__ */ i("div", { className: "ss-field", children: [
+        /* @__PURE__ */ l("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", children: "Confirm new password" }),
-          /* @__PURE__ */ e("input", { className: "ss-input", type: "password", value: $, onChange: (I) => E(I.target.value), required: !0 })
+          /* @__PURE__ */ e("input", { className: "ss-input", type: "password", value: P, onChange: (U) => A(U.target.value), required: !0 })
         ] }),
-        /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l, children: [
-          l && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+        /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: u, children: [
+          u && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
           "Update password"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ e("button", { type: "button", className: "ss-btn ss-btn-danger", onClick: () => c(), children: "Sign out" }) })
+    /* @__PURE__ */ e("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ e("button", { type: "button", className: "ss-btn ss-btn-danger", onClick: () => c(), children: "Sign out" }) }),
+    v && /* @__PURE__ */ e(
+      es,
+      {
+        onUpload: L,
+        onClose: () => g(!1),
+        isLoading: u
+      }
+    )
   ] }) });
 }
-function Ms({ appearance: s, onOrgChange: a }) {
-  const { appearance: r } = k(), { orgs: c, selectedOrg: t, selectOrg: d, createOrg: l, isLoading: u } = os(), o = s ?? r, [n, m] = g(!1), [p, h] = g(!1), [v, y] = g(""), [b, x] = g(""), [f, N] = g(null), [w, $] = g(!1), E = R(null), z = S((P) => {
-    E.current && !P.composedPath().includes(E.current) && (m(!1), h(!1));
+function Vs({ appearance: s, onOrgChange: a }) {
+  const { appearance: r } = E(), { orgs: c, selectedOrg: t, selectOrg: i, createOrg: d, isLoading: u } = gs(), o = s ?? r, [n, m] = h(!1), [p, b] = h(!1), [f, x] = h(""), [y, w] = h(""), [v, g] = h(null), [N, S] = h(!1), k = R(null), z = C(($) => {
+    k.current && !$.composedPath().includes(k.current) && (m(!1), b(!1));
   }, []);
-  L(() => {
+  B(() => {
     if (n) {
-      const P = setTimeout(() => {
+      const $ = setTimeout(() => {
         document.addEventListener("click", z);
       }, 0);
       return () => {
-        clearTimeout(P), document.removeEventListener("click", z);
+        clearTimeout($), document.removeEventListener("click", z);
       };
     }
   }, [n, z]);
-  const T = S((P) => {
-    y(P), x(P.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""));
-  }, []), C = S(
-    async (P) => {
-      P.preventDefault(), N(null), $(!0);
+  const P = C(($) => {
+    x($), w($.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""));
+  }, []), A = C(
+    async ($) => {
+      $.preventDefault(), g(null), S(!0);
       try {
-        const I = await l(v, b);
-        I && (await d(I.id), a == null || a(I), h(!1), y(""), x(""), m(!1));
-      } catch (I) {
-        N(I instanceof Error ? I.message : "Failed to create organization");
+        const M = await d(f, y);
+        M && (await i(M.id), a == null || a(M), b(!1), x(""), w(""), m(!1));
+      } catch (M) {
+        g(M instanceof Error ? M.message : "Failed to create organization");
       } finally {
-        $(!1);
+        S(!1);
       }
     },
-    [v, b, l, d, a]
+    [f, y, d, i, a]
   );
   if (u) return null;
-  const q = (t == null ? void 0 : t.name) ?? (c.length === 0 ? "No organization" : "Select organization");
-  return /* @__PURE__ */ e(B, { appearance: o, children: /* @__PURE__ */ i("div", { className: "ss-user-btn", ref: E, children: [
-    /* @__PURE__ */ i(
+  const T = (t == null ? void 0 : t.name) ?? (c.length === 0 ? "No organization" : "Select organization");
+  return /* @__PURE__ */ e(D, { appearance: o, children: /* @__PURE__ */ l("div", { className: "ss-user-btn", ref: k, children: [
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
         className: "ss-btn ss-btn-org-switcher",
         onClick: () => m(!n),
         children: [
-          q,
+          T,
           /* @__PURE__ */ e("span", { className: "ss-chevron", children: n ? "▲" : "▼" })
         ]
       }
     ),
-    n && /* @__PURE__ */ i("div", { className: "ss-dropdown ss-dropdown-org", children: [
-      c.map((P) => /* @__PURE__ */ e(
+    n && /* @__PURE__ */ l("div", { className: "ss-dropdown ss-dropdown-org", children: [
+      c.map(($) => /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          className: `ss-dropdown-item ${(t == null ? void 0 : t.id) === P.id ? "ss-dropdown-item-active" : ""}`,
+          className: `ss-dropdown-item ${(t == null ? void 0 : t.id) === $.id ? "ss-dropdown-item-active" : ""}`,
           onClick: async () => {
-            m(!1), h(!1), await d(P.id), a == null || a(P);
+            m(!1), b(!1), await i($.id), a == null || a($);
           },
-          children: P.name
+          children: $.name
         },
-        P.id
+        $.id
       )),
       /* @__PURE__ */ e("div", { className: "ss-dropdown-divider" }),
-      p ? /* @__PURE__ */ i("div", { className: "ss-inline-form", children: [
-        f && /* @__PURE__ */ e("div", { className: "ss-global-error", style: { marginBottom: "8px", fontSize: "12px" }, children: f }),
-        /* @__PURE__ */ i("form", { onSubmit: C, children: [
+      p ? /* @__PURE__ */ l("div", { className: "ss-inline-form", children: [
+        v && /* @__PURE__ */ e("div", { className: "ss-global-error", style: { marginBottom: "8px", fontSize: "12px" }, children: v }),
+        /* @__PURE__ */ l("form", { onSubmit: A, children: [
           /* @__PURE__ */ e("div", { className: "ss-field", children: /* @__PURE__ */ e(
             "input",
             {
               className: "ss-input",
               type: "text",
               placeholder: "Organization name",
-              value: v,
-              onChange: (P) => T(P.target.value),
+              value: f,
+              onChange: ($) => P($.target.value),
               required: !0,
               autoFocus: !0
             }
@@ -1536,31 +1840,31 @@ function Ms({ appearance: s, onOrgChange: a }) {
               className: "ss-input",
               type: "text",
               placeholder: "org-slug",
-              value: b,
-              onChange: (P) => x(P.target.value),
+              value: y,
+              onChange: ($) => w($.target.value),
               required: !0
             }
           ) }),
-          /* @__PURE__ */ i("div", { className: "ss-btn-group", style: { marginTop: "8px" }, children: [
+          /* @__PURE__ */ l("div", { className: "ss-btn-group", style: { marginTop: "8px" }, children: [
             /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 className: "ss-btn ss-btn-sm ss-btn-current",
                 onClick: () => {
-                  h(!1), N(null);
+                  b(!1), g(null);
                 },
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ l(
               "button",
               {
                 type: "submit",
                 className: "ss-btn ss-btn-sm ss-btn-primary",
-                disabled: w,
+                disabled: N,
                 children: [
-                  w && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+                  N && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
                   "Create"
                 ]
               }
@@ -1572,7 +1876,7 @@ function Ms({ appearance: s, onOrgChange: a }) {
         {
           type: "button",
           className: "ss-dropdown-item",
-          onClick: () => h(!0),
+          onClick: () => b(!0),
           style: { fontWeight: 500 },
           children: "+ Create organization"
         }
@@ -1580,35 +1884,35 @@ function Ms({ appearance: s, onOrgChange: a }) {
     ] })
   ] }) });
 }
-function is(s, a = "USD") {
+function fs(s, a = "USD") {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: a,
     minimumFractionDigits: s % 100 === 0 ? 0 : 2
   }).format(s / 100);
 }
-function Us({ plans: s, currentPlanId: a, onSelectPlan: r, interval: c, appearance: t }) {
-  const { appearance: d } = k(), l = t ?? d, u = c ? s.filter((o) => o.interval === c || o.isFree) : s;
-  return /* @__PURE__ */ e(B, { appearance: l, children: /* @__PURE__ */ e("div", { className: "ss-pricing-grid", children: u.map((o) => {
+function Gs({ plans: s, currentPlanId: a, onSelectPlan: r, interval: c, appearance: t }) {
+  const { appearance: i } = E(), d = t ?? i, u = c ? s.filter((o) => o.interval === c || o.isFree) : s;
+  return /* @__PURE__ */ e(D, { appearance: d, children: /* @__PURE__ */ e("div", { className: "ss-pricing-grid", children: u.map((o) => {
     const n = o.id === a;
-    return /* @__PURE__ */ i("div", { className: `ss-pricing-card ${n ? "ss-pricing-card-current" : ""}`, children: [
-      /* @__PURE__ */ i("div", { className: "ss-pricing-header", children: [
+    return /* @__PURE__ */ l("div", { className: `ss-pricing-card ${n ? "ss-pricing-card-current" : ""}`, children: [
+      /* @__PURE__ */ l("div", { className: "ss-pricing-header", children: [
         /* @__PURE__ */ e("h3", { className: "ss-pricing-name", children: o.name }),
-        o.trialDays > 0 && /* @__PURE__ */ i("span", { className: "ss-badge ss-badge-trialing", children: [
+        o.trialDays > 0 && /* @__PURE__ */ l("span", { className: "ss-badge ss-badge-trialing", children: [
           o.trialDays,
           "-day trial"
         ] }),
         o.isFree && /* @__PURE__ */ e("span", { className: "ss-badge ss-badge-active", children: "Free" })
       ] }),
-      /* @__PURE__ */ e("div", { className: "ss-pricing-price", children: o.isFree ? /* @__PURE__ */ e("span", { className: "ss-pricing-amount", children: "Free" }) : /* @__PURE__ */ i(D, { children: [
-        /* @__PURE__ */ e("span", { className: "ss-pricing-amount", children: is(o.amountCents, o.currency) }),
-        /* @__PURE__ */ i("span", { className: "ss-pricing-interval", children: [
+      /* @__PURE__ */ e("div", { className: "ss-pricing-price", children: o.isFree ? /* @__PURE__ */ e("span", { className: "ss-pricing-amount", children: "Free" }) : /* @__PURE__ */ l(W, { children: [
+        /* @__PURE__ */ e("span", { className: "ss-pricing-amount", children: fs(o.amountCents, o.currency) }),
+        /* @__PURE__ */ l("span", { className: "ss-pricing-interval", children: [
           "/",
           o.interval
         ] })
       ] }) }),
       o.description && /* @__PURE__ */ e("p", { className: "ss-pricing-desc", children: o.description }),
-      o.features.length > 0 && /* @__PURE__ */ e("ul", { className: "ss-pricing-features", children: o.features.map((m, p) => /* @__PURE__ */ i("li", { className: "ss-pricing-feature", children: [
+      o.features.length > 0 && /* @__PURE__ */ e("ul", { className: "ss-pricing-features", children: o.features.map((m, p) => /* @__PURE__ */ l("li", { className: "ss-pricing-feature", children: [
         /* @__PURE__ */ e("span", { className: "ss-check", children: "✓" }),
         " ",
         m
@@ -1626,157 +1930,157 @@ function Us({ plans: s, currentPlanId: a, onSelectPlan: r, interval: c, appearan
     ] }, o.id);
   }) }) });
 }
-function Os() {
-  const { client: s } = k();
+function Js() {
+  const { client: s } = E();
   return { billing: s.billing };
 }
-function M(s) {
-  const { client: a } = k();
-  return A(() => {
+function j(s) {
+  const { client: a } = E();
+  return q(() => {
     if (s) {
-      const r = new F("https://api.saas-support.com/v1", { type: "portalToken", token: s });
-      return new ss(r);
+      const r = new H("https://api.saas-support.com/v1", { type: "portalToken", token: s });
+      return new is(r);
     }
     return a.billing;
   }, [a, s]);
 }
-function cs(s, a) {
-  const r = M(a), [c, t] = g(null), [d, l] = g(!0), [u, o] = g(null), n = S(async () => {
-    l(!0), o(null);
+function ys(s, a) {
+  const r = j(a), [c, t] = h(null), [i, d] = h(!0), [u, o] = h(null), n = C(async () => {
+    d(!0), o(null);
     try {
       const m = await r.getCustomer(s);
       t(m);
     } catch (m) {
       o(m instanceof Error ? m.message : "Failed to load subscription");
     } finally {
-      l(!1);
+      d(!1);
     }
   }, [r, s]);
-  return L(() => {
+  return B(() => {
     n();
-  }, [n]), { customer: c, isLoading: d, error: u, refresh: n };
+  }, [n]), { customer: c, isLoading: i, error: u, refresh: n };
 }
-function ds(s, a) {
-  const r = M(a), [c, t] = g([]), [d, l] = g(!0), [u, o] = g(null), n = S(async () => {
-    l(!0), o(null);
+function xs(s, a) {
+  const r = j(a), [c, t] = h([]), [i, d] = h(!0), [u, o] = h(null), n = C(async () => {
+    d(!0), o(null);
     try {
       const m = await r.getInvoices(s);
       t(m);
     } catch (m) {
       o(m instanceof Error ? m.message : "Failed to load invoices");
     } finally {
-      l(!1);
+      d(!1);
     }
   }, [r, s]);
-  return L(() => {
+  return B(() => {
     n();
-  }, [n]), { invoices: c, isLoading: d, error: u, refresh: n };
+  }, [n]), { invoices: c, isLoading: i, error: u, refresh: n };
 }
-function us(s, a) {
-  const r = M(a), [c, t] = g([]), [d, l] = g(!0), [u, o] = g(null), n = S(async () => {
-    l(!0), o(null);
+function vs(s, a) {
+  const r = j(a), [c, t] = h([]), [i, d] = h(!0), [u, o] = h(null), n = C(async () => {
+    d(!0), o(null);
     try {
       const m = await r.getCurrentUsage(s);
       t(m);
     } catch (m) {
       o(m instanceof Error ? m.message : "Failed to load usage");
     } finally {
-      l(!1);
+      d(!1);
     }
   }, [r, s]);
-  return L(() => {
+  return B(() => {
     n();
-  }, [n]), { usage: c, isLoading: d, error: u, refresh: n };
+  }, [n]), { usage: c, isLoading: i, error: u, refresh: n };
 }
-const ps = {
+const ws = {
   active: "ss-badge-active"
 };
-function ms({
+function Ns({
   customerId: s,
   portalToken: a,
   onChangePlan: r,
   onCancel: c,
   appearance: t
 }) {
-  const { appearance: d } = k(), { customer: l, isLoading: u, error: o } = cs(s, a);
-  return /* @__PURE__ */ e(B, { appearance: t ?? d, children: /* @__PURE__ */ i("div", { className: "ss-card", children: [
+  const { appearance: i } = E(), { customer: d, isLoading: u, error: o } = ys(s, a);
+  return /* @__PURE__ */ e(D, { appearance: t ?? i, children: /* @__PURE__ */ l("div", { className: "ss-card", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Subscription" }),
-    u && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
+    u && /* @__PURE__ */ l("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
     o && /* @__PURE__ */ e("div", { className: "ss-global-error", children: o }),
-    l && !u && /* @__PURE__ */ i(D, { children: [
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+    d && !u && /* @__PURE__ */ l(W, { children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Customer" }),
-        /* @__PURE__ */ e("input", { className: "ss-input", value: l.name || l.email, disabled: !0, readOnly: !0 })
+        /* @__PURE__ */ e("input", { className: "ss-input", value: d.name || d.email, disabled: !0, readOnly: !0 })
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Status" }),
-        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("span", { className: `ss-badge ${ps.active}`, children: "Active" }) })
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("span", { className: `ss-badge ${ws.active}`, children: "Active" }) })
       ] }),
-      /* @__PURE__ */ i("div", { className: "ss-btn-group", children: [
+      /* @__PURE__ */ l("div", { className: "ss-btn-group", children: [
         r && /* @__PURE__ */ e("button", { type: "button", className: "ss-btn ss-btn-primary", onClick: r, children: "Change plan" }),
         c && /* @__PURE__ */ e("button", { type: "button", className: "ss-btn ss-btn-danger", onClick: c, children: "Cancel subscription" })
       ] })
     ] })
   ] }) });
 }
-const gs = {
+const Cs = {
   paid: "ss-badge-active",
   open: "ss-badge-trialing",
   draft: "ss-badge-paused",
   void: "ss-badge-canceled",
   uncollectible: "ss-badge-past-due"
 };
-function hs(s) {
+function ks(s) {
   return new Date(s).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
-function bs(s) {
+function Ss(s) {
   return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2 }).format(s / 100);
 }
-function fs({ customerId: s, portalToken: a, appearance: r }) {
-  const { appearance: c } = k(), { invoices: t, isLoading: d, error: l } = ds(s, a), u = r ?? c, o = [...t].sort((n, m) => new Date(m.createdAt).getTime() - new Date(n.createdAt).getTime());
-  return /* @__PURE__ */ e(B, { appearance: u, children: /* @__PURE__ */ i("div", { className: "ss-card ss-card-wide", children: [
+function $s({ customerId: s, portalToken: a, appearance: r }) {
+  const { appearance: c } = E(), { invoices: t, isLoading: i, error: d } = xs(s, a), u = r ?? c, o = [...t].sort((n, m) => new Date(m.createdAt).getTime() - new Date(n.createdAt).getTime());
+  return /* @__PURE__ */ e(D, { appearance: u, children: /* @__PURE__ */ l("div", { className: "ss-card ss-card-wide", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Invoices" }),
-    d && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
+    i && /* @__PURE__ */ l("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
-    l && /* @__PURE__ */ e("div", { className: "ss-global-error", children: l }),
-    !d && o.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No invoices yet." }),
-    !d && o.length > 0 && /* @__PURE__ */ i("table", { className: "ss-table", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ i("tr", { children: [
+    d && /* @__PURE__ */ e("div", { className: "ss-global-error", children: d }),
+    !i && o.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No invoices yet." }),
+    !i && o.length > 0 && /* @__PURE__ */ l("table", { className: "ss-table", children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ l("tr", { children: [
         /* @__PURE__ */ e("th", { className: "ss-th", children: "Date" }),
         /* @__PURE__ */ e("th", { className: "ss-th", children: "Amount" }),
         /* @__PURE__ */ e("th", { className: "ss-th", children: "Status" }),
         /* @__PURE__ */ e("th", { className: "ss-th", children: "PDF" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: o.map((n) => /* @__PURE__ */ i("tr", { className: "ss-tr", children: [
-        /* @__PURE__ */ e("td", { className: "ss-td", children: hs(n.createdAt) }),
-        /* @__PURE__ */ e("td", { className: "ss-td", children: bs(n.amountCents) }),
-        /* @__PURE__ */ e("td", { className: "ss-td", children: /* @__PURE__ */ e("span", { className: `ss-badge ${gs[n.status] || ""}`, children: n.status }) }),
+      /* @__PURE__ */ e("tbody", { children: o.map((n) => /* @__PURE__ */ l("tr", { className: "ss-tr", children: [
+        /* @__PURE__ */ e("td", { className: "ss-td", children: ks(n.createdAt) }),
+        /* @__PURE__ */ e("td", { className: "ss-td", children: Ss(n.amountCents) }),
+        /* @__PURE__ */ e("td", { className: "ss-td", children: /* @__PURE__ */ e("span", { className: `ss-badge ${Cs[n.status] || ""}`, children: n.status }) }),
         /* @__PURE__ */ e("td", { className: "ss-td", children: n.pdfUrl ? /* @__PURE__ */ e("a", { className: "ss-link", href: n.pdfUrl, target: "_blank", rel: "noopener noreferrer", children: "Download" }) : "—" })
       ] }, n.id)) })
     ] })
   ] }) });
 }
-function ys({ customerId: s, limits: a, portalToken: r, appearance: c }) {
-  const { appearance: t } = k(), { usage: d, isLoading: l, error: u } = us(s, r);
-  return /* @__PURE__ */ e(B, { appearance: c ?? t, children: /* @__PURE__ */ i("div", { className: "ss-card", children: [
+function Ps({ customerId: s, limits: a, portalToken: r, appearance: c }) {
+  const { appearance: t } = E(), { usage: i, isLoading: d, error: u } = vs(s, r);
+  return /* @__PURE__ */ e(D, { appearance: c ?? t, children: /* @__PURE__ */ l("div", { className: "ss-card", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Usage" }),
-    l && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
+    d && /* @__PURE__ */ l("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
     u && /* @__PURE__ */ e("div", { className: "ss-global-error", children: u }),
-    !l && d.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No usage data." }),
-    !l && d.map((n) => {
+    !d && i.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No usage data." }),
+    !d && i.map((n) => {
       const m = a == null ? void 0 : a[n.metric], p = m ? Math.min(100, n.total / m * 100) : null;
-      return /* @__PURE__ */ i("div", { className: "ss-usage-item", children: [
-        /* @__PURE__ */ i("div", { className: "ss-usage-header", children: [
+      return /* @__PURE__ */ l("div", { className: "ss-usage-item", children: [
+        /* @__PURE__ */ l("div", { className: "ss-usage-header", children: [
           /* @__PURE__ */ e("span", { className: "ss-usage-metric", children: n.metric }),
-          /* @__PURE__ */ i("span", { className: "ss-usage-value", children: [
+          /* @__PURE__ */ l("span", { className: "ss-usage-value", children: [
             n.total.toLocaleString(),
             m ? ` / ${m.toLocaleString()}` : ""
           ] })
@@ -1792,16 +2096,16 @@ function ys({ customerId: s, limits: a, portalToken: r, appearance: c }) {
     })
   ] }) });
 }
-function Rs({
+function Qs({
   customerId: s,
   portalToken: a,
   limits: r,
   onChangePlan: c,
   onCancel: t,
-  appearance: d
+  appearance: i
 }) {
-  const { appearance: l } = k(), u = d ?? l, [o, n] = g("subscription");
-  return /* @__PURE__ */ e(B, { appearance: u, children: /* @__PURE__ */ i("div", { className: "ss-card ss-card-wide", children: [
+  const { appearance: d } = E(), u = i ?? d, [o, n] = h("subscription");
+  return /* @__PURE__ */ e(D, { appearance: u, children: /* @__PURE__ */ l("div", { className: "ss-card ss-card-wide", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Billing" }),
     /* @__PURE__ */ e("div", { className: "ss-tab-group", children: [
       { id: "subscription", label: "Subscription" },
@@ -1817,9 +2121,9 @@ function Rs({
       },
       p.id
     )) }),
-    /* @__PURE__ */ i("div", { className: "ss-tab-content", children: [
+    /* @__PURE__ */ l("div", { className: "ss-tab-content", children: [
       o === "subscription" && /* @__PURE__ */ e(
-        ms,
+        Ns,
         {
           customerId: s,
           portalToken: a,
@@ -1827,31 +2131,31 @@ function Rs({
           onCancel: t
         }
       ),
-      o === "invoices" && /* @__PURE__ */ e(fs, { customerId: s, portalToken: a }),
-      o === "usage" && /* @__PURE__ */ e(ys, { customerId: s, portalToken: a, limits: r })
+      o === "invoices" && /* @__PURE__ */ e($s, { customerId: s, portalToken: a }),
+      o === "usage" && /* @__PURE__ */ e(Ps, { customerId: s, portalToken: a, limits: r })
     ] })
   ] }) });
 }
-function Ws({ customerId: s, portalToken: a, onApplied: r, appearance: c }) {
-  const { appearance: t } = k(), d = M(a), l = c ?? t, [u, o] = g(""), [n, m] = g(!1), [p, h] = g(null), [v, y] = g(null), b = S(async (x) => {
-    if (x.preventDefault(), !!u.trim()) {
-      m(!0), h(null), y(null);
+function Ys({ customerId: s, portalToken: a, onApplied: r, appearance: c }) {
+  const { appearance: t } = E(), i = j(a), d = c ?? t, [u, o] = h(""), [n, m] = h(!1), [p, b] = h(null), [f, x] = h(null), y = C(async (w) => {
+    if (w.preventDefault(), !!u.trim()) {
+      m(!0), b(null), x(null);
       try {
-        const f = await d.applyCoupon(s, u.trim());
-        y(`Coupon applied! ${f.discountType === "percent" ? `${f.amount}% off` : `$${(f.amount / 100).toFixed(2)} off`}`), o(""), r == null || r(f);
-      } catch (f) {
-        h(f instanceof Error ? f.message : "Invalid coupon code");
+        const v = await i.applyCoupon(s, u.trim());
+        x(`Coupon applied! ${v.discountType === "percent" ? `${v.amount}% off` : `$${(v.amount / 100).toFixed(2)} off`}`), o(""), r == null || r(v);
+      } catch (v) {
+        b(v instanceof Error ? v.message : "Invalid coupon code");
       } finally {
         m(!1);
       }
     }
-  }, [d, s, u, r]);
-  return /* @__PURE__ */ e(B, { appearance: l, children: /* @__PURE__ */ i("div", { className: "ss-card", children: [
+  }, [i, s, u, r]);
+  return /* @__PURE__ */ e(D, { appearance: d, children: /* @__PURE__ */ l("div", { className: "ss-card", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Apply coupon" }),
     p && /* @__PURE__ */ e("div", { className: "ss-global-error", children: p }),
-    v && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: v }),
-    /* @__PURE__ */ i("form", { onSubmit: b, children: [
-      /* @__PURE__ */ i("div", { className: "ss-field", children: [
+    f && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: f }),
+    /* @__PURE__ */ l("form", { onSubmit: y, children: [
+      /* @__PURE__ */ l("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-coupon-code", children: "Coupon code" }),
         /* @__PURE__ */ e(
           "input",
@@ -1861,101 +2165,101 @@ function Ws({ customerId: s, portalToken: a, onApplied: r, appearance: c }) {
             type: "text",
             placeholder: "Enter coupon code",
             value: u,
-            onChange: (x) => o(x.target.value),
+            onChange: (w) => o(w.target.value),
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: n || !u.trim(), children: [
+      /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: n || !u.trim(), children: [
         n && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Apply"
       ] })
     ] })
   ] }) });
 }
-function Hs() {
-  const { client: s } = k();
+function Zs() {
+  const { client: s } = E();
   return { report: s.report };
 }
-function V() {
-  const { client: s } = k(), [a, r] = g(null), [c, t] = g(!1), [d, l] = g(null), u = S(async (o) => {
-    t(!0), l(null);
+function rs() {
+  const { client: s } = E(), [a, r] = h(null), [c, t] = h(!1), [i, d] = h(null), u = C(async (o) => {
+    t(!0), d(null);
     try {
       const n = await s.report.executeQuery(o);
       return r(n), n;
     } catch (n) {
-      return l(n instanceof Error ? n.message : "Query failed"), null;
+      return d(n instanceof Error ? n.message : "Query failed"), null;
     } finally {
       t(!1);
     }
   }, [s]);
-  return { result: a, execute: u, isLoading: c, error: d };
+  return { result: a, execute: u, isLoading: c, error: i };
 }
-function xs(s) {
-  const { client: a } = k(), [r, c] = g(null), [t, d] = g(!0), [l, u] = g(null), o = S(async () => {
-    d(!0), u(null);
+function Es(s) {
+  const { client: a } = E(), [r, c] = h(null), [t, i] = h(!0), [d, u] = h(null), o = C(async () => {
+    i(!0), u(null);
     try {
       const n = await a.report.listQueries(s);
       c(n);
     } catch (n) {
       u(n instanceof Error ? n.message : "Failed to load queries");
     } finally {
-      d(!1);
+      i(!1);
     }
   }, [a, s]);
-  return L(() => {
+  return B(() => {
     o();
-  }, [o]), { queries: (r == null ? void 0 : r.data) ?? [], meta: r == null ? void 0 : r.meta, isLoading: t, error: l, refresh: o };
+  }, [o]), { queries: (r == null ? void 0 : r.data) ?? [], meta: r == null ? void 0 : r.meta, isLoading: t, error: d, refresh: o };
 }
-function js(s) {
-  const { client: a } = k(), [r, c] = g(null), [t, d] = g(!0), [l, u] = g(null), o = S(async () => {
-    d(!0), u(null);
+function Xs(s) {
+  const { client: a } = E(), [r, c] = h(null), [t, i] = h(!0), [d, u] = h(null), o = C(async () => {
+    i(!0), u(null);
     try {
       const n = await a.report.getDashboard(s);
       c(n);
     } catch (n) {
       u(n instanceof Error ? n.message : "Failed to load dashboard");
     } finally {
-      d(!1);
+      i(!1);
     }
   }, [a, s]);
-  return L(() => {
+  return B(() => {
     o();
-  }, [o]), { dashboard: r, isLoading: t, error: l, refresh: o };
+  }, [o]), { dashboard: r, isLoading: t, error: d, refresh: o };
 }
-function _s(s, a, r = "https://api.saas-support.com/v1") {
-  const c = A(() => {
-    const p = new F(r, { type: "embedToken", token: s });
-    return new W(p);
-  }, [s, r]), [t, d] = g(null), [l, u] = g(!0), [o, n] = g(null), m = S(async () => {
+function Ks(s, a, r = "https://api.saas-support.com/v1") {
+  const c = q(() => {
+    const p = new H(r, { type: "embedToken", token: s });
+    return new J(p);
+  }, [s, r]), [t, i] = h(null), [d, u] = h(!0), [o, n] = h(null), m = C(async () => {
     u(!0), n(null);
     try {
       const p = await c.getDashboard(a);
-      d(p);
+      i(p);
     } catch (p) {
       n(p instanceof Error ? p.message : "Failed to load dashboard");
     } finally {
       u(!1);
     }
   }, [c, a]);
-  return L(() => {
+  return B(() => {
     m();
-  }, [m]), { dashboard: t, reportClient: c, isLoading: l, error: o, refresh: m };
+  }, [m]), { dashboard: t, reportClient: c, isLoading: d, error: o, refresh: m };
 }
-function Gs({ onResult: s, mode: a = "both", placeholder: r, appearance: c }) {
-  const { appearance: t } = k(), { execute: d, isLoading: l, error: u } = V(), o = c ?? t, [n, m] = g(""), [p, h] = g(a === "sql" ? "sql" : "nl"), v = S(async (y) => {
-    if (y.preventDefault(), !n.trim()) return;
-    const x = await d(p === "sql" ? { sql: n } : { naturalLanguage: n });
-    x && (s == null || s(x));
-  }, [n, p, d, s]);
-  return /* @__PURE__ */ e(B, { appearance: o, children: /* @__PURE__ */ i("div", { className: "ss-card ss-card-wide", children: [
-    a === "both" && /* @__PURE__ */ i("div", { className: "ss-tab-group ss-tab-group-sm", children: [
+function se({ onResult: s, mode: a = "both", placeholder: r, appearance: c }) {
+  const { appearance: t } = E(), { execute: i, isLoading: d, error: u } = rs(), o = c ?? t, [n, m] = h(""), [p, b] = h(a === "sql" ? "sql" : "nl"), f = C(async (x) => {
+    if (x.preventDefault(), !n.trim()) return;
+    const w = await i(p === "sql" ? { sql: n } : { naturalLanguage: n });
+    w && (s == null || s(w));
+  }, [n, p, i, s]);
+  return /* @__PURE__ */ e(D, { appearance: o, children: /* @__PURE__ */ l("div", { className: "ss-card ss-card-wide", children: [
+    a === "both" && /* @__PURE__ */ l("div", { className: "ss-tab-group ss-tab-group-sm", children: [
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           className: `ss-tab ${p === "nl" ? "ss-tab-active" : ""}`,
-          onClick: () => h("nl"),
+          onClick: () => b("nl"),
           children: "Natural Language"
         }
       ),
@@ -1964,63 +2268,63 @@ function Gs({ onResult: s, mode: a = "both", placeholder: r, appearance: c }) {
         {
           type: "button",
           className: `ss-tab ${p === "sql" ? "ss-tab-active" : ""}`,
-          onClick: () => h("sql"),
+          onClick: () => b("sql"),
           children: "SQL"
         }
       )
     ] }),
     u && /* @__PURE__ */ e("div", { className: "ss-global-error", children: u }),
-    /* @__PURE__ */ i("form", { onSubmit: v, children: [
+    /* @__PURE__ */ l("form", { onSubmit: f, children: [
       /* @__PURE__ */ e("div", { className: "ss-field", children: /* @__PURE__ */ e(
         "textarea",
         {
           className: "ss-input ss-query-textarea",
           placeholder: r ?? (p === "sql" ? "SELECT ..." : "Ask a question about your data..."),
           value: n,
-          onChange: (y) => m(y.target.value),
+          onChange: (x) => m(x.target.value),
           rows: 3
         }
       ) }),
-      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l || !n.trim(), children: [
-        l && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+      /* @__PURE__ */ l("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: d || !n.trim(), children: [
+        d && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Run query"
       ] })
     ] })
   ] }) });
 }
-function vs({ columns: s, rows: a, sortable: r = !0, maxRows: c, appearance: t }) {
-  const { appearance: d } = k(), l = t ?? d, [u, o] = g(null), [n, m] = g("asc"), p = A(() => u ? [...a].sort((b, x) => {
-    const f = b[u], N = x[u];
-    if (f == null && N == null) return 0;
-    if (f == null) return 1;
-    if (N == null) return -1;
-    if (typeof f == "number" && typeof N == "number")
-      return n === "asc" ? f - N : N - f;
-    const w = String(f), $ = String(N);
-    return n === "asc" ? w.localeCompare($) : $.localeCompare(w);
-  }) : a, [a, u, n]), h = c ? p.slice(0, c) : p, v = (b) => {
-    r && (u === b ? m((x) => x === "asc" ? "desc" : "asc") : (o(b), m("asc")));
+function Is({ columns: s, rows: a, sortable: r = !0, maxRows: c, appearance: t }) {
+  const { appearance: i } = E(), d = t ?? i, [u, o] = h(null), [n, m] = h("asc"), p = q(() => u ? [...a].sort((y, w) => {
+    const v = y[u], g = w[u];
+    if (v == null && g == null) return 0;
+    if (v == null) return 1;
+    if (g == null) return -1;
+    if (typeof v == "number" && typeof g == "number")
+      return n === "asc" ? v - g : g - v;
+    const N = String(v), S = String(g);
+    return n === "asc" ? N.localeCompare(S) : S.localeCompare(N);
+  }) : a, [a, u, n]), b = c ? p.slice(0, c) : p, f = (y) => {
+    r && (u === y ? m((w) => w === "asc" ? "desc" : "asc") : (o(y), m("asc")));
   };
-  function y(b) {
-    return b == null ? "" : typeof b == "object" ? JSON.stringify(b) : String(b);
+  function x(y) {
+    return y == null ? "" : typeof y == "object" ? JSON.stringify(y) : String(y);
   }
-  return /* @__PURE__ */ e(B, { appearance: l, children: /* @__PURE__ */ i("div", { className: "ss-table-container", children: [
-    /* @__PURE__ */ i("table", { className: "ss-table", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: s.map((b) => /* @__PURE__ */ i(
+  return /* @__PURE__ */ e(D, { appearance: d, children: /* @__PURE__ */ l("div", { className: "ss-table-container", children: [
+    /* @__PURE__ */ l("table", { className: "ss-table", children: [
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: s.map((y) => /* @__PURE__ */ l(
         "th",
         {
-          className: `ss-th ${r ? "ss-th-sortable" : ""} ${u === b ? n === "asc" ? "ss-sorted-asc" : "ss-sorted-desc" : ""}`,
-          onClick: () => v(b),
+          className: `ss-th ${r ? "ss-th-sortable" : ""} ${u === y ? n === "asc" ? "ss-sorted-asc" : "ss-sorted-desc" : ""}`,
+          onClick: () => f(y),
           children: [
-            b,
-            u === b && /* @__PURE__ */ e("span", { className: "ss-sort-indicator", children: n === "asc" ? " ▲" : " ▼" })
+            y,
+            u === y && /* @__PURE__ */ e("span", { className: "ss-sort-indicator", children: n === "asc" ? " ▲" : " ▼" })
           ]
         },
-        b
+        y
       )) }) }),
-      /* @__PURE__ */ e("tbody", { children: h.map((b, x) => /* @__PURE__ */ e("tr", { className: "ss-tr", children: s.map((f) => /* @__PURE__ */ e("td", { className: "ss-td", children: y(b[f]) }, f)) }, x)) })
+      /* @__PURE__ */ e("tbody", { children: b.map((y, w) => /* @__PURE__ */ e("tr", { className: "ss-tr", children: s.map((v) => /* @__PURE__ */ e("td", { className: "ss-td", children: x(y[v]) }, v)) }, w)) })
     ] }),
-    c && a.length > c && /* @__PURE__ */ i("div", { className: "ss-table-footer", children: [
+    c && a.length > c && /* @__PURE__ */ l("div", { className: "ss-table-footer", children: [
       "Showing ",
       c,
       " of ",
@@ -2029,185 +2333,185 @@ function vs({ columns: s, rows: a, sortable: r = !0, maxRows: c, appearance: t }
     ] })
   ] }) });
 }
-function Ns(s, a = "#6366f1") {
+function zs(s, a = "#6366f1") {
   const r = parseInt(a.replace("#", "").slice(0, 2), 16), c = [];
   for (let t = 0; t < s; t++) {
-    const d = (r + t * Math.floor(360 / Math.max(s, 1))) % 360;
-    c.push(`hsl(${d}, 65%, 55%)`);
+    const i = (r + t * Math.floor(360 / Math.max(s, 1))) % 360;
+    c.push(`hsl(${i}, 65%, 55%)`);
   }
   return c;
 }
-function ws({ labels: s, values: a, w: r, h: c, colors: t }) {
-  const d = Math.max(...a, 1), l = 40, u = r - l * 2, o = c - l * 2, n = Math.max(1, u / s.length - 4);
-  return /* @__PURE__ */ i("g", { children: [
-    /* @__PURE__ */ e("line", { x1: l, y1: c - l, x2: r - l, y2: c - l, stroke: "#ccc", strokeWidth: 1 }),
+function Ts({ labels: s, values: a, w: r, h: c, colors: t }) {
+  const i = Math.max(...a, 1), d = 40, u = r - d * 2, o = c - d * 2, n = Math.max(1, u / s.length - 4);
+  return /* @__PURE__ */ l("g", { children: [
+    /* @__PURE__ */ e("line", { x1: d, y1: c - d, x2: r - d, y2: c - d, stroke: "#ccc", strokeWidth: 1 }),
     a.map((m, p) => {
-      const h = m / d * o, v = l + u / s.length * p + 2, y = c - l - h;
-      return /* @__PURE__ */ i("g", { children: [
-        /* @__PURE__ */ e("rect", { x: v, y, width: n, height: h, fill: t[p % t.length], rx: 2 }),
-        /* @__PURE__ */ e("text", { x: v + n / 2, y: c - l + 14, textAnchor: "middle", fontSize: 10, fill: "#666", children: s[p].length > 8 ? s[p].slice(0, 8) + "..." : s[p] })
+      const b = m / i * o, f = d + u / s.length * p + 2, x = c - d - b;
+      return /* @__PURE__ */ l("g", { children: [
+        /* @__PURE__ */ e("rect", { x: f, y: x, width: n, height: b, fill: t[p % t.length], rx: 2 }),
+        /* @__PURE__ */ e("text", { x: f + n / 2, y: c - d + 14, textAnchor: "middle", fontSize: 10, fill: "#666", children: s[p].length > 8 ? s[p].slice(0, 8) + "..." : s[p] })
       ] }, p);
     })
   ] });
 }
-function Ss({ labels: s, values: a, w: r, h: c, colors: t }) {
-  const d = Math.max(...a, 1), l = 40, u = r - l * 2, o = c - l * 2, n = s.length > 1 ? u / (s.length - 1) : 0, m = a.map((p, h) => {
-    const v = l + n * h, y = c - l - p / d * o;
-    return `${v},${y}`;
+function Ls({ labels: s, values: a, w: r, h: c, colors: t }) {
+  const i = Math.max(...a, 1), d = 40, u = r - d * 2, o = c - d * 2, n = s.length > 1 ? u / (s.length - 1) : 0, m = a.map((p, b) => {
+    const f = d + n * b, x = c - d - p / i * o;
+    return `${f},${x}`;
   });
-  return /* @__PURE__ */ i("g", { children: [
+  return /* @__PURE__ */ l("g", { children: [
     [0.25, 0.5, 0.75, 1].map((p) => {
-      const h = c - l - p * o;
-      return /* @__PURE__ */ e("line", { x1: l, y1: h, x2: r - l, y2: h, stroke: "#eee", strokeWidth: 1 }, p);
+      const b = c - d - p * o;
+      return /* @__PURE__ */ e("line", { x1: d, y1: b, x2: r - d, y2: b, stroke: "#eee", strokeWidth: 1 }, p);
     }),
     /* @__PURE__ */ e("polyline", { points: m.join(" "), fill: "none", stroke: t[0], strokeWidth: 2 }),
-    a.map((p, h) => {
-      const v = l + n * h, y = c - l - p / d * o;
-      return /* @__PURE__ */ e("circle", { cx: v, cy: y, r: 4, fill: t[0] }, h);
+    a.map((p, b) => {
+      const f = d + n * b, x = c - d - p / i * o;
+      return /* @__PURE__ */ e("circle", { cx: f, cy: x, r: 4, fill: t[0] }, b);
     })
   ] });
 }
-function $s({ labels: s, values: a, w: r, h: c, colors: t }) {
-  const d = a.reduce((h, v) => h + v, 0) || 1, l = r / 2, u = c / 2 - 20, o = Math.min(r, c) / 2 - 40, n = 2 * Math.PI * o;
+function Bs({ labels: s, values: a, w: r, h: c, colors: t }) {
+  const i = a.reduce((b, f) => b + f, 0) || 1, d = r / 2, u = c / 2 - 20, o = Math.min(r, c) / 2 - 40, n = 2 * Math.PI * o;
   let m = 0;
-  const p = a.map((h, v) => {
-    const y = h / d, b = y * n, x = { dash: b, offset: m, color: t[v % t.length], label: s[v], pct: y };
-    return m += b, x;
+  const p = a.map((b, f) => {
+    const x = b / i, y = x * n, w = { dash: y, offset: m, color: t[f % t.length], label: s[f], pct: x };
+    return m += y, w;
   });
-  return /* @__PURE__ */ i("g", { children: [
-    p.map((h, v) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ l("g", { children: [
+    p.map((b, f) => /* @__PURE__ */ e(
       "circle",
       {
-        cx: l,
+        cx: d,
         cy: u,
         r: o,
         fill: "none",
-        stroke: h.color,
+        stroke: b.color,
         strokeWidth: o * 0.6,
-        strokeDasharray: `${h.dash} ${n - h.dash}`,
-        strokeDashoffset: -h.offset,
-        transform: `rotate(-90 ${l} ${u})`
+        strokeDasharray: `${b.dash} ${n - b.dash}`,
+        strokeDashoffset: -b.offset,
+        transform: `rotate(-90 ${d} ${u})`
       },
-      v
+      f
     )),
-    /* @__PURE__ */ e("g", { transform: `translate(${l - s.length * 30}, ${c - 20})`, children: p.slice(0, 6).map((h, v) => /* @__PURE__ */ i("g", { transform: `translate(${v * 60}, 0)`, children: [
-      /* @__PURE__ */ e("rect", { width: 10, height: 10, fill: h.color, rx: 2 }),
-      /* @__PURE__ */ e("text", { x: 14, y: 9, fontSize: 9, fill: "#666", children: h.label.length > 6 ? h.label.slice(0, 6) + ".." : h.label })
-    ] }, v)) })
+    /* @__PURE__ */ e("g", { transform: `translate(${d - s.length * 30}, ${c - 20})`, children: p.slice(0, 6).map((b, f) => /* @__PURE__ */ l("g", { transform: `translate(${f * 60}, 0)`, children: [
+      /* @__PURE__ */ e("rect", { width: 10, height: 10, fill: b.color, rx: 2 }),
+      /* @__PURE__ */ e("text", { x: 14, y: 9, fontSize: 9, fill: "#666", children: b.label.length > 6 ? b.label.slice(0, 6) + ".." : b.label })
+    ] }, f)) })
   ] });
 }
-function ks({ type: s, data: a, title: r, width: c = 400, height: t = 300, appearance: d }) {
-  const { appearance: l } = k(), u = d ?? l, o = A(() => Ns(a.labels.length), [a.labels.length]);
-  return /* @__PURE__ */ e(B, { appearance: u, children: /* @__PURE__ */ i("div", { className: "ss-chart-container", children: [
+function As({ type: s, data: a, title: r, width: c = 400, height: t = 300, appearance: i }) {
+  const { appearance: d } = E(), u = i ?? d, o = q(() => zs(a.labels.length), [a.labels.length]);
+  return /* @__PURE__ */ e(D, { appearance: u, children: /* @__PURE__ */ l("div", { className: "ss-chart-container", children: [
     r && /* @__PURE__ */ e("h3", { className: "ss-chart-title", children: r }),
-    /* @__PURE__ */ i("svg", { viewBox: `0 0 ${c} ${t}`, width: "100%", style: { maxWidth: c }, children: [
-      s === "bar" && /* @__PURE__ */ e(ws, { labels: a.labels, values: a.values, w: c, h: t, colors: o }),
-      s === "line" && /* @__PURE__ */ e(Ss, { labels: a.labels, values: a.values, w: c, h: t, colors: o }),
-      s === "pie" && /* @__PURE__ */ e($s, { labels: a.labels, values: a.values, w: c, h: t, colors: o })
+    /* @__PURE__ */ l("svg", { viewBox: `0 0 ${c} ${t}`, width: "100%", style: { maxWidth: c }, children: [
+      s === "bar" && /* @__PURE__ */ e(Ts, { labels: a.labels, values: a.values, w: c, h: t, colors: o }),
+      s === "line" && /* @__PURE__ */ e(Ls, { labels: a.labels, values: a.values, w: c, h: t, colors: o }),
+      s === "pie" && /* @__PURE__ */ e(Bs, { labels: a.labels, values: a.values, w: c, h: t, colors: o })
     ] })
   ] }) });
 }
-function Js({ dashboardId: s, embedToken: a, baseUrl: r, refreshInterval: c, appearance: t }) {
-  const d = k(), l = t ?? (d == null ? void 0 : d.appearance), u = A(() => {
+function ee({ dashboardId: s, embedToken: a, baseUrl: r, refreshInterval: c, appearance: t }) {
+  const i = E(), d = t ?? (i == null ? void 0 : i.appearance), u = q(() => {
     if (a) {
-      const f = r ?? "https://api.saas-support.com/v1", N = new F(f, { type: "embedToken", token: a });
-      return new W(N);
+      const v = r ?? "https://api.saas-support.com/v1", g = new H(v, { type: "embedToken", token: a });
+      return new J(g);
     }
-    return d.client.report;
-  }, [a, r, d]), [o, n] = g([]), [m, p] = g({}), [h, v] = g(!0), [y, b] = g(null), x = S(async () => {
-    v(!0), b(null);
+    return i.client.report;
+  }, [a, r, i]), [o, n] = h([]), [m, p] = h({}), [b, f] = h(!0), [x, y] = h(null), w = C(async () => {
+    f(!0), y(null);
     try {
-      const f = await u.getDashboard(s), N = JSON.parse(f.layoutJson || "[]");
-      n(N);
-      const w = {};
-      for (const $ of N)
+      const v = await u.getDashboard(s), g = JSON.parse(v.layoutJson || "[]");
+      n(g);
+      const N = {};
+      for (const S of g)
         try {
-          const E = await u.listQueries({ search: $.queryId, perPage: 1 });
-          if (E.data.length > 0 && E.data[0].generatedSql) {
-            const z = await u.executeQuery({ sql: E.data[0].generatedSql });
-            w[$.queryId] = z;
+          const k = await u.listQueries({ search: S.queryId, perPage: 1 });
+          if (k.data.length > 0 && k.data[0].generatedSql) {
+            const z = await u.executeQuery({ sql: k.data[0].generatedSql });
+            N[S.queryId] = z;
           }
         } catch {
         }
-      p(w);
-    } catch (f) {
-      b(f instanceof Error ? f.message : "Failed to load dashboard");
+      p(N);
+    } catch (v) {
+      y(v instanceof Error ? v.message : "Failed to load dashboard");
     } finally {
-      v(!1);
+      f(!1);
     }
   }, [u, s]);
-  return L(() => {
-    x();
-  }, [x]), L(() => {
+  return B(() => {
+    w();
+  }, [w]), B(() => {
     if (!c || c <= 0) return;
-    const f = setInterval(x, c * 1e3);
-    return () => clearInterval(f);
-  }, [c, x]), /* @__PURE__ */ e(B, { appearance: l, children: /* @__PURE__ */ i("div", { className: "ss-dashboard-grid", children: [
-    h && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
+    const v = setInterval(w, c * 1e3);
+    return () => clearInterval(v);
+  }, [c, w]), /* @__PURE__ */ e(D, { appearance: d, children: /* @__PURE__ */ l("div", { className: "ss-dashboard-grid", children: [
+    b && /* @__PURE__ */ l("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading dashboard..."
     ] }),
-    y && /* @__PURE__ */ e("div", { className: "ss-global-error", children: y }),
-    !h && o.map((f, N) => {
-      const w = m[f.queryId];
-      if (!w) return null;
-      const $ = w.columns.length >= 2 ? {
-        labels: w.rows.map((E) => String(E[w.columns[0]] ?? "")),
-        values: w.rows.map((E) => Number(E[w.columns[1]] ?? 0))
+    x && /* @__PURE__ */ e("div", { className: "ss-global-error", children: x }),
+    !b && o.map((v, g) => {
+      const N = m[v.queryId];
+      if (!N) return null;
+      const S = N.columns.length >= 2 ? {
+        labels: N.rows.map((k) => String(k[N.columns[0]] ?? "")),
+        values: N.rows.map((k) => Number(k[N.columns[1]] ?? 0))
       } : { labels: [], values: [] };
-      return /* @__PURE__ */ i("div", { className: "ss-widget", children: [
-        f.title && /* @__PURE__ */ e("h4", { className: "ss-widget-header", children: f.title }),
-        f.chartType === "table" ? /* @__PURE__ */ e(vs, { columns: w.columns, rows: w.rows, maxRows: 50 }) : /* @__PURE__ */ e(
-          ks,
+      return /* @__PURE__ */ l("div", { className: "ss-widget", children: [
+        v.title && /* @__PURE__ */ e("h4", { className: "ss-widget-header", children: v.title }),
+        v.chartType === "table" ? /* @__PURE__ */ e(Is, { columns: N.columns, rows: N.rows, maxRows: 50 }) : /* @__PURE__ */ e(
+          As,
           {
-            type: f.chartType || "bar",
-            data: $,
-            width: f.w,
-            height: f.h
+            type: v.chartType || "bar",
+            data: S,
+            width: v.w,
+            height: v.h
           }
         )
-      ] }, N);
+      ] }, g);
     })
   ] }) });
 }
-function Cs(s) {
+function Ds(s) {
   return new Date(s).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
-function Qs({ onSelectQuery: s, onRunQuery: a, appearance: r }) {
-  const { appearance: c } = k(), { queries: t, isLoading: d, error: l } = xs(), { execute: u, isLoading: o } = V(), n = r ?? c, m = S(async (p) => {
+function re({ onSelectQuery: s, onRunQuery: a, appearance: r }) {
+  const { appearance: c } = E(), { queries: t, isLoading: i, error: d } = Es(), { execute: u, isLoading: o } = rs(), n = r ?? c, m = C(async (p) => {
     if (!p.generatedSql) return;
-    const h = await u({ sql: p.generatedSql });
-    h && (a == null || a(h));
+    const b = await u({ sql: p.generatedSql });
+    b && (a == null || a(b));
   }, [u, a]);
-  return /* @__PURE__ */ e(B, { appearance: n, children: /* @__PURE__ */ i("div", { className: "ss-card ss-card-wide", children: [
+  return /* @__PURE__ */ e(D, { appearance: n, children: /* @__PURE__ */ l("div", { className: "ss-card ss-card-wide", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Saved Queries" }),
-    d && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
+    i && /* @__PURE__ */ l("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
-    l && /* @__PURE__ */ e("div", { className: "ss-global-error", children: l }),
-    !d && t.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No saved queries." }),
-    !d && t.map((p) => /* @__PURE__ */ i(
+    d && /* @__PURE__ */ e("div", { className: "ss-global-error", children: d }),
+    !i && t.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No saved queries." }),
+    !i && t.map((p) => /* @__PURE__ */ l(
       "div",
       {
         className: "ss-saved-query-card",
         onClick: () => s == null ? void 0 : s(p),
         children: [
-          /* @__PURE__ */ i("div", { className: "ss-saved-query-header", children: [
+          /* @__PURE__ */ l("div", { className: "ss-saved-query-header", children: [
             /* @__PURE__ */ e("span", { className: "ss-saved-query-name", children: p.name }),
             p.chartType && /* @__PURE__ */ e("span", { className: "ss-badge", children: p.chartType })
           ] }),
           p.naturalLanguage && /* @__PURE__ */ e("p", { className: "ss-saved-query-desc", children: p.naturalLanguage }),
-          /* @__PURE__ */ i("div", { className: "ss-saved-query-footer", children: [
-            /* @__PURE__ */ e("span", { className: "ss-saved-query-date", children: Cs(p.createdAt) }),
+          /* @__PURE__ */ l("div", { className: "ss-saved-query-footer", children: [
+            /* @__PURE__ */ e("span", { className: "ss-saved-query-date", children: Ds(p.createdAt) }),
             /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 className: "ss-btn ss-btn-sm ss-btn-primary",
                 disabled: o || !p.generatedSql,
-                onClick: (h) => {
-                  h.stopPropagation(), m(p);
+                onClick: (b) => {
+                  b.stopPropagation(), m(p);
                 },
                 children: o ? /* @__PURE__ */ e("span", { className: "ss-spinner" }) : "Run"
               }
@@ -2219,105 +2523,105 @@ function Qs({ onSelectQuery: s, onRunQuery: a, appearance: r }) {
     ))
   ] }) });
 }
-function Vs({ embedToken: s, dashboardId: a, baseUrl: r = "https://api.saas-support.com/v1", refreshInterval: c, appearance: t }) {
-  const d = A(() => {
-    const b = new F(r, { type: "embedToken", token: s });
-    return new W(b);
-  }, [s, r]), [l, u] = g([]), [o, n] = g(!0), [m, p] = g(null), h = A(() => U(t), [t]), v = A(() => O(h), [h]), y = S(async () => {
+function ae({ embedToken: s, dashboardId: a, baseUrl: r = "https://api.saas-support.com/v1", refreshInterval: c, appearance: t }) {
+  const i = q(() => {
+    const y = new H(r, { type: "embedToken", token: s });
+    return new J(y);
+  }, [s, r]), [d, u] = h([]), [o, n] = h(!0), [m, p] = h(null), b = q(() => V(t), [t]), f = q(() => G(b), [b]), x = C(async () => {
     n(!0), p(null);
     try {
-      const b = await d.getDashboard(a), x = JSON.parse(b.layoutJson || "[]"), f = await Promise.all(
-        x.map(async (N) => {
+      const y = await i.getDashboard(a), w = JSON.parse(y.layoutJson || "[]"), v = await Promise.all(
+        w.map(async (g) => {
           try {
-            const w = await d.listQueries({ search: N.queryId, perPage: 1 });
-            if (w.data.length > 0 && w.data[0].generatedSql) {
-              const $ = await d.executeQuery({ sql: w.data[0].generatedSql });
-              return { ...N, result: $ };
+            const N = await i.listQueries({ search: g.queryId, perPage: 1 });
+            if (N.data.length > 0 && N.data[0].generatedSql) {
+              const S = await i.executeQuery({ sql: N.data[0].generatedSql });
+              return { ...g, result: S };
             }
           } catch {
           }
-          return N;
+          return g;
         })
       );
-      u(f);
-    } catch (b) {
-      p(b instanceof Error ? b.message : "Failed to load dashboard");
+      u(v);
+    } catch (y) {
+      p(y instanceof Error ? y.message : "Failed to load dashboard");
     } finally {
       n(!1);
     }
-  }, [d, a]);
-  return L(() => {
-    y();
-  }, [y]), L(() => {
+  }, [i, a]);
+  return B(() => {
+    x();
+  }, [x]), B(() => {
     if (!c || c <= 0) return;
-    const b = setInterval(y, c * 1e3);
-    return () => clearInterval(b);
-  }, [c, y]), /* @__PURE__ */ e(
+    const y = setInterval(x, c * 1e3);
+    return () => clearInterval(y);
+  }, [c, x]), /* @__PURE__ */ e(
     "div",
     {
-      ref: (b) => {
-        if (!b || b.shadowRoot) return;
-        const x = b.attachShadow({ mode: "open" }), f = document.createElement("style");
-        f.textContent = v, x.appendChild(f);
-        const N = document.createElement("div");
-        x.appendChild(N);
+      ref: (y) => {
+        if (!y || y.shadowRoot) return;
+        const w = y.attachShadow({ mode: "open" }), v = document.createElement("style");
+        v.textContent = f, w.appendChild(v);
+        const g = document.createElement("div");
+        w.appendChild(g);
       },
       style: { display: "contents" },
-      children: /* @__PURE__ */ i("div", { className: "ss-dashboard-grid", children: [
+      children: /* @__PURE__ */ l("div", { className: "ss-dashboard-grid", children: [
         o && /* @__PURE__ */ e("div", { className: "ss-loading", children: "Loading dashboard..." }),
         m && /* @__PURE__ */ e("div", { className: "ss-global-error", children: m }),
-        !o && l.map((b, x) => {
-          if (!b.result) return null;
-          const { columns: f, rows: N } = b.result;
-          return /* @__PURE__ */ i("div", { className: "ss-widget", children: [
-            b.title && /* @__PURE__ */ e("h4", { className: "ss-widget-header", children: b.title }),
-            /* @__PURE__ */ i("table", { className: "ss-table", children: [
-              /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: f.map((w) => /* @__PURE__ */ e("th", { className: "ss-th", children: w }, w)) }) }),
-              /* @__PURE__ */ e("tbody", { children: N.slice(0, 50).map((w, $) => /* @__PURE__ */ e("tr", { className: "ss-tr", children: f.map((E) => /* @__PURE__ */ e("td", { className: "ss-td", children: String(w[E] ?? "") }, E)) }, $)) })
+        !o && d.map((y, w) => {
+          if (!y.result) return null;
+          const { columns: v, rows: g } = y.result;
+          return /* @__PURE__ */ l("div", { className: "ss-widget", children: [
+            y.title && /* @__PURE__ */ e("h4", { className: "ss-widget-header", children: y.title }),
+            /* @__PURE__ */ l("table", { className: "ss-table", children: [
+              /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: v.map((N) => /* @__PURE__ */ e("th", { className: "ss-th", children: N }, N)) }) }),
+              /* @__PURE__ */ e("tbody", { children: g.slice(0, 50).map((N, S) => /* @__PURE__ */ e("tr", { className: "ss-tr", children: v.map((k) => /* @__PURE__ */ e("td", { className: "ss-td", children: String(N[k] ?? "") }, k)) }, S)) })
             ] })
-          ] }, x);
+          ] }, w);
         })
       ] })
     }
   );
 }
 export {
-  ks as Chart,
-  Ws as CouponInput,
-  Js as DashboardView,
-  vs as DataTable,
-  fs as InvoiceHistory,
-  Ms as OrgSwitcher,
-  Rs as PaymentPortal,
-  Us as PricingTable,
-  Gs as QueryInput,
-  Vs as ReportEmbed,
-  H as SaaSContext,
-  Xs as SaaSError,
-  Bs as SaaSProvider,
-  X as SaaSSupport,
-  Qs as SavedQueryList,
-  qs as SignIn,
-  As as SignUp,
-  ms as SubscriptionStatus,
-  ys as UsageDisplay,
-  Ds as UserButton,
-  Fs as UserProfile,
-  Z as isMfaRequired,
-  j as useAuth,
-  Os as useBilling,
-  js as useDashboard,
-  _s as useEmbedDashboard,
-  ds as useInvoices,
-  os as useOrg,
-  G as useProfile,
-  V as useQuery,
-  Hs as useReport,
-  k as useSaaSContext,
-  xs as useSavedQueries,
-  _ as useSignIn,
-  ts as useSignUp,
-  cs as useSubscription,
-  us as useUsage,
-  zs as useUser
+  As as Chart,
+  Ys as CouponInput,
+  ee as DashboardView,
+  Is as DataTable,
+  $s as InvoiceHistory,
+  Vs as OrgSwitcher,
+  Qs as PaymentPortal,
+  Gs as PricingTable,
+  se as QueryInput,
+  ae as ReportEmbed,
+  Q as SaaSContext,
+  oe as SaaSError,
+  Rs as SaaSProvider,
+  os as SaaSSupport,
+  re as SavedQueryList,
+  Ws as SignIn,
+  Hs as SignUp,
+  Ns as SubscriptionStatus,
+  Ps as UsageDisplay,
+  js as UserButton,
+  _s as UserProfile,
+  ls as isMfaRequired,
+  Y as useAuth,
+  Js as useBilling,
+  Xs as useDashboard,
+  Ks as useEmbedDashboard,
+  xs as useInvoices,
+  gs as useOrg,
+  X as useProfile,
+  rs as useQuery,
+  Zs as useReport,
+  E as useSaaSContext,
+  Es as useSavedQueries,
+  Z as useSignIn,
+  ms as useSignUp,
+  ys as useSubscription,
+  vs as useUsage,
+  Os as useUser
 };