@saas-support/react 0.2.0 → 0.3.1

package/dist/react.js

@@ -1,33 +1,33 @@
-import { jsx as e, jsxs as u, Fragment as D } from "react/jsx-runtime";
-import { createContext as Q, useContext as V, useState as m, useEffect as C, useRef as U, useCallback as S, useMemo as B } from "react";
-import { SaaSSupport as Y, isMfaRequired as K, BillingClient as X, Transport as q, ReportClient as R } from "./index.js";
-import { SaaSError as Qs } from "./index.js";
-import { createPortal as Z } from "react-dom";
-const H = Q(null);
-function $() {
-  const s = V(H);
+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);
   if (!s)
     throw new Error("useSaaSContext must be used within a <SaaSProvider>");
   return s;
 }
-function Ts({ publishableKey: s, apiKey: n, baseUrl: r, appearance: c, children: a }) {
-  const [i] = m(() => new Y({ publishableKey: s, apiKey: n, baseUrl: r })), [l, d] = m(null), [o, t] = m(!1), [g, p] = m(null);
-  return C(() => {
+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;
-    i.load().then(async () => {
+    d.load().then(async () => {
       if (h) return;
-      const x = await i.auth.getUser(), b = await i.auth.getSettings();
-      d(x), p(b), t(!0);
+      const y = await d.auth.getUser(), b = await d.auth.getSettings();
+      u(y), p(b), n(!0);
     });
-    const f = i.auth.onAuthStateChange((x) => {
-      h || d(x);
+    const v = d.auth.onAuthStateChange((y) => {
+      h || u(y);
     });
     return () => {
-      h = !0, f(), i.destroy();
+      h = !0, v(), d.destroy();
     };
-  }, [i]), /* @__PURE__ */ e(H.Provider, { value: { client: i, user: l, isLoaded: o, appearance: c, settings: g }, children: a });
+  }, [d]), /* @__PURE__ */ e(H.Provider, { value: { client: d, user: l, isLoaded: o, appearance: c, settings: m }, children: t });
 }
-const ss = {
+const rs = {
   colorPrimary: "#6366f1",
   colorPrimaryHover: "#4f46e5",
   colorBackground: "#ffffff",
@@ -40,7 +40,7 @@ const ss = {
   colorWarning: "#f59e0b",
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   borderRadius: "8px"
-}, es = {
+}, as = {
   colorPrimary: "#818cf8",
   colorPrimaryHover: "#6366f1",
   colorBackground: "#1e1e2e",
@@ -54,26 +54,26 @@ const ss = {
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   borderRadius: "8px"
 };
-function M(s) {
-  const n = (s == null ? void 0 : s.baseTheme) === "dark" ? es : ss, r = s == null ? void 0 : s.variables;
+function U(s) {
+  const a = (s == null ? void 0 : s.baseTheme) === "dark" ? as : rs, r = s == null ? void 0 : s.variables;
   return {
-    colorPrimary: (r == null ? void 0 : r.colorPrimary) ?? n.colorPrimary,
-    colorPrimaryHover: r != null && r.colorPrimary ? rs(r.colorPrimary, 10) : n.colorPrimaryHover,
-    colorBackground: (r == null ? void 0 : r.colorBackground) ?? n.colorBackground,
-    colorText: (r == null ? void 0 : r.colorText) ?? n.colorText,
-    colorTextSecondary: n.colorTextSecondary,
-    colorInputBackground: (r == null ? void 0 : r.colorInputBackground) ?? n.colorInputBackground,
-    colorInputBorder: (r == null ? void 0 : r.colorInputBorder) ?? n.colorInputBorder,
-    colorError: (r == null ? void 0 : r.colorError) ?? n.colorError,
-    colorSuccess: (r == null ? void 0 : r.colorSuccess) ?? n.colorSuccess,
-    colorWarning: (r == null ? void 0 : r.colorWarning) ?? n.colorWarning,
-    fontFamily: (r == null ? void 0 : r.fontFamily) ?? n.fontFamily,
-    borderRadius: (r == null ? void 0 : r.borderRadius) ?? n.borderRadius
+    colorPrimary: (r == null ? void 0 : r.colorPrimary) ?? a.colorPrimary,
+    colorPrimaryHover: r != null && r.colorPrimary ? ns(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,
+    colorInputBackground: (r == null ? void 0 : r.colorInputBackground) ?? a.colorInputBackground,
+    colorInputBorder: (r == null ? void 0 : r.colorInputBorder) ?? a.colorInputBorder,
+    colorError: (r == null ? void 0 : r.colorError) ?? a.colorError,
+    colorSuccess: (r == null ? void 0 : r.colorSuccess) ?? a.colorSuccess,
+    colorWarning: (r == null ? void 0 : r.colorWarning) ?? a.colorWarning,
+    fontFamily: (r == null ? void 0 : r.fontFamily) ?? a.fontFamily,
+    borderRadius: (r == null ? void 0 : r.borderRadius) ?? a.borderRadius
   };
 }
-function rs(s, n) {
-  const r = parseInt(s.replace("#", ""), 16), c = Math.max(0, (r >> 16) - Math.round(2.55 * n)), a = Math.max(0, (r >> 8 & 255) - Math.round(2.55 * n)), i = Math.max(0, (r & 255) - Math.round(2.55 * n));
-  return `#${(c << 16 | a << 8 | i).toString(16).padStart(6, "0")}`;
+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 O(s) {
   return `
@@ -668,53 +668,188 @@ function O(s) {
       font-size: 12px;
       color: ${s.colorTextSecondary};
     }
+
+    /* Modal Overlay */
+
+    .ss-modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 99999;
+      animation: ss-fade-in 0.15s ease-out;
+    }
+
+    @keyframes ss-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    .ss-modal {
+      background: ${s.colorBackground};
+      border-radius: ${s.borderRadius};
+      padding: 32px;
+      width: 90%;
+      max-width: 480px;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
+      border: 1px solid ${s.colorInputBorder};
+      animation: ss-scale-in 0.15s ease-out;
+    }
+
+    @keyframes ss-scale-in {
+      from { transform: scale(0.95); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+
+    .ss-modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+    }
+
+    .ss-modal-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: ${s.colorText};
+    }
+
+    .ss-modal-close {
+      background: none;
+      border: none;
+      font-size: 20px;
+      color: ${s.colorTextSecondary};
+      cursor: pointer;
+      padding: 4px;
+      line-height: 1;
+      border-radius: 4px;
+      transition: background 0.15s;
+      font-family: inherit;
+    }
+
+    .ss-modal-close:hover {
+      background: ${s.colorInputBackground};
+      color: ${s.colorText};
+    }
+
+    .ss-modal-section {
+      padding-top: 20px;
+      margin-top: 20px;
+      border-top: 1px solid ${s.colorInputBorder};
+    }
+
+    .ss-modal-section-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: ${s.colorText};
+      margin-bottom: 16px;
+    }
+
+    .ss-avatar-preview {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: ${s.colorPrimary};
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      overflow: hidden;
+    }
+
+    .ss-avatar-preview img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .ss-input-readonly {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    /* Inline form (for org creation in dropdown) */
+
+    .ss-dropdown-divider {
+      height: 1px;
+      background: ${s.colorInputBorder};
+      margin: 4px 0;
+    }
+
+    .ss-inline-form {
+      padding: 12px 16px;
+    }
+
+    .ss-inline-form .ss-field {
+      margin-bottom: 8px;
+    }
+
+    .ss-inline-form .ss-input {
+      font-size: 13px;
+      padding: 6px 10px;
+    }
+
+    .ss-inline-form .ss-btn {
+      font-size: 13px;
+      padding: 6px 12px;
+    }
   `;
 }
-function E({ children: s, appearance: n }) {
-  const r = U(null), [c, a] = m(null);
-  C(() => {
-    var g;
+function B({ children: s, appearance: a }) {
+  const r = R(null), [c, t] = g(null);
+  L(() => {
+    var m;
     if (!r.current || r.current.shadowRoot) {
-      a(((g = r.current) == null ? void 0 : g.shadowRoot) ?? null);
+      t(((m = r.current) == null ? void 0 : m.shadowRoot) ?? null);
       return;
     }
-    const l = r.current.attachShadow({ mode: "open" }), d = M(n), o = document.createElement("style");
-    o.textContent = O(d), l.appendChild(o);
-    const t = document.createElement("div");
-    l.appendChild(t), a(l);
-  }, []), C(() => {
+    const l = r.current.attachShadow({ mode: "open" }), u = U(a), o = document.createElement("style");
+    o.textContent = O(u), l.appendChild(o);
+    const n = document.createElement("div");
+    l.appendChild(n), t(l);
+  }, []), L(() => {
     if (!c) return;
     const l = c.querySelector("style");
     if (l) {
-      const d = M(n);
-      l.textContent = O(d);
+      const u = U(a);
+      l.textContent = O(u);
     }
-  }, [n, c]);
-  const i = (c == null ? void 0 : c.querySelector("div")) ?? null;
-  return /* @__PURE__ */ e("div", { ref: r, style: { display: "contents" }, children: i && Z(s, i) });
+  }, [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) });
 }
-function W() {
-  const { client: s, user: n, isLoaded: r } = $();
+function j() {
+  const { client: s, user: a, isLoaded: r } = k();
   return {
     isLoaded: r,
-    isSignedIn: !!n,
-    user: n,
+    isSignedIn: !!a,
+    user: a,
     signOut: S(() => s.auth.signOut(), [s]),
     getToken: S(() => s.auth.getToken(), [s])
   };
 }
-function Is() {
-  const { user: s, isLoaded: n } = $();
-  return { user: s, isLoaded: n };
+function zs() {
+  const { user: s, isLoaded: a } = k();
+  return { user: s, isLoaded: a };
 }
 function _() {
-  const { client: s } = $(), [n, r] = m(!1), [c, a] = m(null), i = S(
-    async (o, t) => {
-      r(!0), a(null);
+  const { client: s } = k(), [a, r] = g(!1), [c, t] = g(null), d = S(
+    async (o, n) => {
+      r(!0), t(null);
       try {
-        return await s.auth.signIn(o, t);
-      } catch (g) {
-        return a(g instanceof Error ? g.message : "Sign in failed"), null;
+        return await s.auth.signIn(o, n);
+      } catch (m) {
+        return t(m instanceof Error ? m.message : "Sign in failed"), null;
       } finally {
         r(!1);
       }
@@ -722,133 +857,162 @@ function _() {
     [s]
   ), l = S(
     async (o) => {
-      r(!0), a(null);
+      r(!0), t(null);
       try {
         return await s.auth.signInWithOAuth(o);
-      } catch (t) {
-        return a(t instanceof Error ? t.message : "OAuth sign in failed"), null;
+      } catch (n) {
+        return t(n instanceof Error ? n.message : "OAuth sign in failed"), null;
       } finally {
         r(!1);
       }
     },
     [s]
-  ), d = S(
-    async (o, t) => {
-      r(!0), a(null);
+  ), u = S(
+    async (o, n) => {
+      r(!0), t(null);
       try {
-        return await s.auth.submitMfaCode(o, t);
-      } catch (g) {
-        return a(g instanceof Error ? g.message : "MFA verification failed"), null;
+        return await s.auth.submitMfaCode(o, n);
+      } catch (m) {
+        return t(m instanceof Error ? m.message : "MFA verification failed"), null;
       } finally {
         r(!1);
       }
     },
     [s]
   );
-  return { signIn: i, signInWithOAuth: l, submitMfaCode: d, isLoading: n, error: c, setError: a };
+  return { signIn: d, signInWithOAuth: l, submitMfaCode: u, isLoading: a, error: c, setError: t };
 }
-function ns() {
-  const { client: s } = $(), [n, r] = m(!1), [c, a] = m(null);
+function ts() {
+  const { client: s } = k(), [a, r] = g(!1), [c, t] = g(null);
   return { signUp: S(
-    async (l, d) => {
-      r(!0), a(null);
+    async (l, u) => {
+      r(!0), t(null);
       try {
-        return await s.auth.signUp(l, d);
+        return await s.auth.signUp(l, u);
       } catch (o) {
-        return a(o instanceof Error ? o.message : "Sign up failed"), null;
+        return t(o instanceof Error ? o.message : "Sign up failed"), null;
       } finally {
         r(!1);
       }
     },
     [s]
-  ), isLoading: n, error: c, setError: a };
+  ), isLoading: a, error: c, setError: t };
 }
-function as() {
-  const { client: s } = $(), [n, r] = m([]), [c, a] = m(null), [i, l] = m([]), [d, o] = m(!1), [t, g] = m(null), p = S(async () => {
-    o(!0), g(null);
+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 () => {
+    o(!0), m(null);
     try {
-      const x = await s.auth.listOrgs();
-      r(x);
-    } catch (x) {
-      g(x instanceof Error ? x.message : "Failed to load organizations");
+      const y = await s.auth.listOrgs();
+      r(y);
+    } catch (y) {
+      m(y instanceof Error ? y.message : "Failed to load organizations");
     } finally {
       o(!1);
     }
   }, [s]);
-  C(() => {
+  L(() => {
     p();
   }, [p]);
-  const h = S(async (x) => {
+  const h = S(async (y) => {
     try {
-      const b = await s.auth.getOrg(x);
-      a(b);
-      const N = await s.auth.listMembers(x);
-      l(N);
+      const b = await s.auth.getOrg(y);
+      t(b);
+      const x = await s.auth.listMembers(y);
+      l(x);
     } catch (b) {
-      g(b instanceof Error ? b.message : "Failed to load organization");
+      m(b instanceof Error ? b.message : "Failed to load organization");
     }
-  }, [s]), f = S(async (x, b) => {
+  }, [s]), v = S(async (y, b) => {
     try {
-      const N = await s.auth.createOrg(x, b);
-      return r((y) => [...y, N]), N;
-    } catch (N) {
-      return g(N instanceof Error ? N.message : "Failed to create organization"), null;
+      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;
     }
   }, [s]);
-  return { orgs: n, selectedOrg: c, members: i, isLoading: d, error: t, refresh: p, selectOrg: h, createOrg: f };
+  return { orgs: a, selectedOrg: c, members: d, isLoading: u, error: n, refresh: p, selectOrg: h, createOrg: v };
 }
-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>', G = '<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 Ls({ appearance: s, signUpUrl: n, onSignUp: r }) {
-  const { appearance: c, settings: a } = $(), { signIn: i, signInWithOAuth: l, submitMfaCode: d, isLoading: o, error: t, setError: g } = _(), p = s ?? c, [h, f] = m(""), [x, b] = m(""), [N, y] = m(!1), [v, w] = m(""), [k, T] = m(""), P = S(
-    async (L) => {
-      if (L.preventDefault(), N) {
-        await d(v, k);
+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);
+      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;
+      } finally {
+        c(!1);
+      }
+    },
+    [s]
+  ), n = S(
+    async (m, p) => {
+      c(!0), d(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;
+      } finally {
+        c(!1);
+      }
+    },
+    [s]
+  );
+  return { user: a, updateProfile: o, changePassword: n, isLoading: r, error: t, success: l, setError: d, 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, $);
         return;
       }
-      const F = await i(h, x);
-      F && K(F) && (w(F.mfaToken), y(!0), g(null));
+      const P = await d(h, y);
+      P && Z(P) && (w(P.mfaToken), f(!0), m(null));
     },
-    [h, x, N, v, k, i, d, g]
-  ), I = S(
-    async (L) => {
-      await l(L);
+    [h, y, x, N, $, d, u, m]
+  ), T = S(
+    async (q) => {
+      await l(q);
     },
     [l]
-  ), z = (a == null ? void 0 : a.googleEnabled) || (a == null ? void 0 : a.githubEnabled);
-  return /* @__PURE__ */ e(E, { appearance: p, children: /* @__PURE__ */ u("div", { className: "ss-card", children: [
+  ), 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: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Sign in" }),
-    !N && /* @__PURE__ */ u(D, { children: [
-      (a == null ? void 0 : a.googleEnabled) && /* @__PURE__ */ u(
+    !x && /* @__PURE__ */ i(D, { children: [
+      (t == null ? void 0 : t.googleEnabled) && /* @__PURE__ */ i(
         "button",
         {
           type: "button",
           className: "ss-btn-social",
-          onClick: () => I("google"),
+          onClick: () => T("google"),
           disabled: o,
           children: [
-            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: j } }),
+            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: J } }),
             "Continue with Google"
           ]
         }
       ),
-      (a == null ? void 0 : a.githubEnabled) && /* @__PURE__ */ u(
+      (t == null ? void 0 : t.githubEnabled) && /* @__PURE__ */ i(
         "button",
         {
           type: "button",
           className: "ss-btn-social",
-          onClick: () => I("github"),
+          onClick: () => T("github"),
           disabled: o,
           children: [
-            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: G } }),
+            /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: Q } }),
             "Continue with GitHub"
           ]
         }
       ),
-      z && /* @__PURE__ */ e("div", { className: "ss-divider", children: "or" })
+      C && /* @__PURE__ */ e("div", { className: "ss-divider", children: "or" })
     ] }),
-    t && /* @__PURE__ */ e("div", { className: "ss-global-error", children: t }),
-    /* @__PURE__ */ u("form", { onSubmit: P, children: [
-      N ? /* @__PURE__ */ u("div", { className: "ss-field", children: [
+    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__ */ e("label", { className: "ss-label", htmlFor: "ss-mfa-code", children: "Authentication code" }),
         /* @__PURE__ */ e(
           "input",
@@ -859,13 +1023,13 @@ function Ls({ appearance: s, signUpUrl: n, onSignUp: r }) {
             inputMode: "numeric",
             autoComplete: "one-time-code",
             placeholder: "Enter 6-digit code",
-            value: k,
-            onChange: (L) => T(L.target.value),
+            value: $,
+            onChange: (q) => E(q.target.value),
             autoFocus: !0
           }
         )
-      ] }) : /* @__PURE__ */ u(D, { children: [
-        /* @__PURE__ */ u("div", { className: "ss-field", children: [
+      ] }) : /* @__PURE__ */ i(D, { children: [
+        /* @__PURE__ */ i("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-email", children: "Email" }),
           /* @__PURE__ */ e(
             "input",
@@ -876,12 +1040,12 @@ function Ls({ appearance: s, signUpUrl: n, onSignUp: r }) {
               autoComplete: "email",
               placeholder: "you@example.com",
               value: h,
-              onChange: (L) => f(L.target.value),
+              onChange: (q) => v(q.target.value),
               required: !0
             }
           )
         ] }),
-        /* @__PURE__ */ u("div", { className: "ss-field", children: [
+        /* @__PURE__ */ i("div", { className: "ss-field", children: [
           /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-password", children: "Password" }),
           /* @__PURE__ */ e(
             "input",
@@ -891,88 +1055,88 @@ function Ls({ appearance: s, signUpUrl: n, onSignUp: r }) {
               type: "password",
               autoComplete: "current-password",
               placeholder: "Enter your password",
-              value: x,
-              onChange: (L) => b(L.target.value),
+              value: y,
+              onChange: (q) => b(q.target.value),
               required: !0
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ u("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: o, children: [
+      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: o, children: [
         o && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
-        N ? "Verify" : "Continue"
+        x ? "Verify" : "Continue"
       ] })
     ] }),
-    N && /* @__PURE__ */ e("div", { className: "ss-footer", children: /* @__PURE__ */ e(
+    x && /* @__PURE__ */ e("div", { className: "ss-footer", children: /* @__PURE__ */ e(
       "span",
       {
         className: "ss-link",
         onClick: () => {
-          y(!1), T(""), g(null);
+          f(!1), E(""), m(null);
         },
         children: "Back to sign in"
       }
     ) }),
-    !N && /* @__PURE__ */ u("div", { className: "ss-footer", children: [
+    !x && /* @__PURE__ */ i("div", { className: "ss-footer", children: [
       "Don't have an account?",
       " ",
-      r ? /* @__PURE__ */ e("span", { className: "ss-link", onClick: r, children: "Sign up" }) : n ? /* @__PURE__ */ e("a", { className: "ss-link", href: n, children: "Sign up" }) : /* @__PURE__ */ e("span", { className: "ss-link", children: "Sign up" })
+      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 Bs({ appearance: s, signInUrl: n, onSignIn: r }) {
-  const { appearance: c, settings: a } = $(), { signUp: i, isLoading: l, error: d, setError: o } = ns(), { signInWithOAuth: t } = _(), g = s ?? c, [p, h] = m(""), [f, x] = m(""), [b, N] = m(""), [y, v] = m(null), w = S(
-    async (I) => {
-      if (I.preventDefault(), v(null), f !== b) {
-        v("Passwords do not match");
+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");
         return;
       }
-      const z = (a == null ? void 0 : a.passwordMinLength) ?? 8;
-      if (f.length < z) {
-        v(`Password must be at least ${z} characters`);
+      const C = (t == null ? void 0 : t.passwordMinLength) ?? 8;
+      if (v.length < C) {
+        N(`Password must be at least ${C} characters`);
         return;
       }
-      await i(p, f);
+      await d(p, v);
     },
-    [p, f, b, a, i]
-  ), k = S(
-    async (I) => {
-      await t(I);
+    [p, v, b, t, d]
+  ), $ = S(
+    async (T) => {
+      await n(T);
     },
-    [t]
-  ), T = (a == null ? void 0 : a.googleEnabled) || (a == null ? void 0 : a.githubEnabled), P = y || d;
-  return /* @__PURE__ */ e(E, { appearance: g, children: /* @__PURE__ */ u("div", { className: "ss-card", children: [
+    [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: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Create account" }),
-    (a == null ? void 0 : a.googleEnabled) && /* @__PURE__ */ u(
+    (t == null ? void 0 : t.googleEnabled) && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
         className: "ss-btn-social",
-        onClick: () => k("google"),
+        onClick: () => $("google"),
         disabled: l,
         children: [
-          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: j } }),
+          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: J } }),
           "Continue with Google"
         ]
       }
     ),
-    (a == null ? void 0 : a.githubEnabled) && /* @__PURE__ */ u(
+    (t == null ? void 0 : t.githubEnabled) && /* @__PURE__ */ i(
       "button",
       {
         type: "button",
         className: "ss-btn-social",
-        onClick: () => k("github"),
+        onClick: () => $("github"),
         disabled: l,
         children: [
-          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: G } }),
+          /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: Q } }),
           "Continue with GitHub"
         ]
       }
     ),
-    T && /* @__PURE__ */ e("div", { className: "ss-divider", children: "or" }),
-    P && /* @__PURE__ */ e("div", { className: "ss-global-error", children: P }),
-    /* @__PURE__ */ u("form", { onSubmit: w, children: [
-      /* @__PURE__ */ u("div", { className: "ss-field", children: [
+    E && /* @__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__ */ e("label", { className: "ss-label", htmlFor: "ss-signup-email", children: "Email" }),
         /* @__PURE__ */ e(
           "input",
@@ -983,12 +1147,12 @@ function Bs({ appearance: s, signInUrl: n, onSignIn: r }) {
             autoComplete: "email",
             placeholder: "you@example.com",
             value: p,
-            onChange: (I) => h(I.target.value),
+            onChange: (T) => h(T.target.value),
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ u("div", { className: "ss-field", children: [
+      /* @__PURE__ */ i("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-signup-password", children: "Password" }),
         /* @__PURE__ */ e(
           "input",
@@ -998,15 +1162,15 @@ function Bs({ appearance: s, signInUrl: n, onSignIn: r }) {
             type: "password",
             autoComplete: "new-password",
             placeholder: "Create a password",
-            value: f,
-            onChange: (I) => {
-              x(I.target.value), v(null);
+            value: v,
+            onChange: (T) => {
+              y(T.target.value), N(null);
             },
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ u("div", { className: "ss-field", children: [
+      /* @__PURE__ */ i("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-signup-confirm", children: "Confirm password" }),
         /* @__PURE__ */ e(
           "input",
@@ -1017,53 +1181,67 @@ function Bs({ appearance: s, signInUrl: n, onSignIn: r }) {
             autoComplete: "new-password",
             placeholder: "Confirm your password",
             value: b,
-            onChange: (I) => {
-              N(I.target.value), v(null);
+            onChange: (T) => {
+              x(T.target.value), N(null);
             },
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ u("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l, children: [
+      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l, children: [
         l && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Create account"
       ] })
     ] }),
-    /* @__PURE__ */ u("div", { className: "ss-footer", children: [
+    /* @__PURE__ */ i("div", { className: "ss-footer", children: [
       "Already have an account?",
       " ",
-      r ? /* @__PURE__ */ e("span", { className: "ss-link", onClick: r, children: "Sign in" }) : n ? /* @__PURE__ */ e("a", { className: "ss-link", href: n, children: "Sign in" }) : /* @__PURE__ */ e("span", { className: "ss-link", children: "Sign in" })
+      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 Ps({ appearance: s }) {
-  const { appearance: n } = $(), { user: r, signOut: c } = W(), a = s ?? n, [i, l] = m(!1), d = U(null), o = S((g) => {
-    d.current && !d.current.contains(g.target) && l(!1);
+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);
   }, []);
-  if (C(() => {
-    if (i) {
-      const g = setTimeout(() => {
-        document.addEventListener("click", o);
+  if (L(() => {
+    if (d) {
+      const h = setTimeout(() => {
+        document.addEventListener("click", m);
       }, 0);
       return () => {
-        clearTimeout(g), document.removeEventListener("click", o);
+        clearTimeout(h), document.removeEventListener("click", m);
       };
     }
-  }, [i, o]), !r) return null;
-  const t = r.email.charAt(0).toUpperCase();
-  return /* @__PURE__ */ e(E, { appearance: a, children: /* @__PURE__ */ u("div", { className: "ss-user-btn", ref: d, children: [
+  }, [d, 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: [
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         className: "ss-avatar",
-        onClick: () => l(!i),
+        onClick: () => l(!d),
         "aria-label": "User menu",
-        children: t
+        children: r.avatarUrl ? /* @__PURE__ */ e("img", { src: r.avatarUrl, alt: "", style: { width: "100%", height: "100%", borderRadius: "50%", objectFit: "cover" } }) : p
       }
     ),
-    i && /* @__PURE__ */ u("div", { className: "ss-dropdown", children: [
-      /* @__PURE__ */ e("div", { className: "ss-dropdown-header", children: /* @__PURE__ */ e("div", { className: "ss-dropdown-email", children: r.email }) }),
+    d && /* @__PURE__ */ i("div", { className: "ss-dropdown", children: [
+      /* @__PURE__ */ i("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 })
+      ] }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "ss-dropdown-item",
+          onClick: () => {
+            l(!1), o(!0);
+          },
+          children: "Profile"
+        }
+      ),
       /* @__PURE__ */ e(
         "button",
         {
@@ -1075,296 +1253,532 @@ function Ps({ appearance: s }) {
           children: "Sign out"
         }
       )
+    ] }),
+    u && /* @__PURE__ */ e(ls, { 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 });
+    },
+    [n, p, r, u, o]
+  ), z = S(
+    async (C) => {
+      if (C.preventDefault(), $(null), u(null), o(null), b !== f) {
+        $("Passwords do not match");
+        return;
+      }
+      if (b.length < 8) {
+        $("Password must be at least 8 characters");
+        return;
+      }
+      await c(v, b) && (y(""), x(""), N(""));
+    },
+    [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: [
+      /* @__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: [
+        /* @__PURE__ */ e("label", { className: "ss-label", children: "Name" }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            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)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i("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__ */ 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" }),
+        "Save changes"
+      ] })
+    ] }),
+    T && /* @__PURE__ */ i("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: [
+          /* @__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),
+              required: !0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("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),
+              required: !0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("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),
+              required: !0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: t, children: [
+          t && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+          "Update password"
+        ] })
+      ] })
     ] })
   ] }) });
 }
-function zs({ appearance: s }) {
-  const { appearance: n } = $(), { user: r, signOut: c } = W(), a = s ?? n;
-  return r ? /* @__PURE__ */ e(E, { appearance: a, children: /* @__PURE__ */ u("div", { className: "ss-card", children: [
+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 });
+    },
+    [h, y, t, n, m]
+  ), q = S(
+    async (I) => {
+      if (I.preventDefault(), T(null), n(null), m(null), N !== $) {
+        T("Passwords do not match");
+        return;
+      }
+      if (N.length < 8) {
+        T("Password must be at least 8 characters");
+        return;
+      }
+      await d(x, N) && (f(""), w(""), E(""));
+    },
+    [x, N, $, d, n, m]
+  );
+  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: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Profile" }),
-    /* @__PURE__ */ u("div", { className: "ss-field", children: [
-      /* @__PURE__ */ e("label", { className: "ss-label", children: "Email" }),
-      /* @__PURE__ */ e("input", { className: "ss-input", type: "email", value: r.email, disabled: !0, readOnly: !0 })
-    ] }),
-    /* @__PURE__ */ u("div", { className: "ss-field", children: [
-      /* @__PURE__ */ e("label", { className: "ss-label", children: "Provider" }),
-      /* @__PURE__ */ e(
-        "input",
-        {
-          className: "ss-input",
-          type: "text",
-          value: r.provider,
-          disabled: !0,
-          readOnly: !0
-        }
-      )
+    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: [
+        /* @__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__ */ 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__ */ 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__ */ 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__ */ 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" }),
+        "Save changes"
+      ] })
     ] }),
-    /* @__PURE__ */ u("div", { className: "ss-field", children: [
-      /* @__PURE__ */ e("label", { className: "ss-label", children: "Email verified" }),
-      /* @__PURE__ */ e(
-        "input",
-        {
-          className: "ss-input",
-          type: "text",
-          value: r.emailVerified ? "Yes" : "No",
-          disabled: !0,
-          readOnly: !0
-        }
-      )
+    P && /* @__PURE__ */ i("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: [
+          /* @__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__ */ i("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__ */ i("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__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l, children: [
+          l && /* @__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-primary",
-        onClick: () => c(),
-        style: { background: "#ef4444" },
-        children: "Sign out"
-      }
-    ) })
-  ] }) }) : null;
+    /* @__PURE__ */ e("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ e("button", { type: "button", className: "ss-btn ss-btn-danger", onClick: () => c(), children: "Sign out" }) })
+  ] }) });
 }
-function Ds({ appearance: s, onOrgChange: n }) {
-  const { appearance: r } = $(), { orgs: c, selectedOrg: a, selectOrg: i, isLoading: l } = as(), d = s ?? r, [o, t] = m(!1), g = U(null), p = S((f) => {
-    g.current && !g.current.contains(f.target) && t(!1);
+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));
   }, []);
-  if (C(() => {
-    if (o) {
-      const f = setTimeout(() => {
-        document.addEventListener("click", p);
+  L(() => {
+    if (n) {
+      const P = setTimeout(() => {
+        document.addEventListener("click", z);
       }, 0);
       return () => {
-        clearTimeout(f), document.removeEventListener("click", p);
+        clearTimeout(P), document.removeEventListener("click", z);
       };
     }
-  }, [o, p]), l || c.length === 0) return null;
-  const h = (a == null ? void 0 : a.name) ?? "Select organization";
-  return /* @__PURE__ */ e(E, { appearance: d, children: /* @__PURE__ */ u("div", { className: "ss-user-btn", ref: g, children: [
-    /* @__PURE__ */ u(
+  }, [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);
+      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");
+      } finally {
+        $(!1);
+      }
+    },
+    [v, b, l, d, 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(
       "button",
       {
         type: "button",
         className: "ss-btn ss-btn-org-switcher",
-        onClick: () => t(!o),
+        onClick: () => m(!n),
         children: [
-          h,
-          /* @__PURE__ */ e("span", { className: "ss-chevron", children: o ? "▲" : "▼" })
+          q,
+          /* @__PURE__ */ e("span", { className: "ss-chevron", children: n ? "▲" : "▼" })
         ]
       }
     ),
-    o && /* @__PURE__ */ e("div", { className: "ss-dropdown ss-dropdown-org", children: c.map((f) => /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: `ss-dropdown-item ${(a == null ? void 0 : a.id) === f.id ? "ss-dropdown-item-active" : ""}`,
-        onClick: async () => {
-          t(!1), await i(f.id), n == null || n(f);
+    n && /* @__PURE__ */ i("div", { className: "ss-dropdown ss-dropdown-org", children: [
+      c.map((P) => /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: `ss-dropdown-item ${(t == null ? void 0 : t.id) === P.id ? "ss-dropdown-item-active" : ""}`,
+          onClick: async () => {
+            m(!1), h(!1), await d(P.id), a == null || a(P);
+          },
+          children: P.name
         },
-        children: f.name
-      },
-      f.id
-    )) })
+        P.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: [
+          /* @__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),
+              required: !0,
+              autoFocus: !0
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "ss-field", children: /* @__PURE__ */ e(
+            "input",
+            {
+              className: "ss-input",
+              type: "text",
+              placeholder: "org-slug",
+              value: b,
+              onChange: (P) => x(P.target.value),
+              required: !0
+            }
+          ) }),
+          /* @__PURE__ */ i("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);
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ i(
+              "button",
+              {
+                type: "submit",
+                className: "ss-btn ss-btn-sm ss-btn-primary",
+                disabled: w,
+                children: [
+                  w && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+                  "Create"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "ss-dropdown-item",
+          onClick: () => h(!0),
+          style: { fontWeight: 500 },
+          children: "+ Create organization"
+        }
+      )
+    ] })
   ] }) });
 }
-function os(s, n = "USD") {
+function is(s, a = "USD") {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
-    currency: n,
+    currency: a,
     minimumFractionDigits: s % 100 === 0 ? 0 : 2
   }).format(s / 100);
 }
-function qs({ plans: s, currentPlanId: n, onSelectPlan: r, interval: c, appearance: a }) {
-  const { appearance: i } = $(), l = a ?? i, d = c ? s.filter((o) => o.interval === c || o.isFree) : s;
-  return /* @__PURE__ */ e(E, { appearance: l, children: /* @__PURE__ */ e("div", { className: "ss-pricing-grid", children: d.map((o) => {
-    const t = o.id === n;
-    return /* @__PURE__ */ u("div", { className: `ss-pricing-card ${t ? "ss-pricing-card-current" : ""}`, children: [
-      /* @__PURE__ */ u("div", { className: "ss-pricing-header", children: [
+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) => {
+    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: [
         /* @__PURE__ */ e("h3", { className: "ss-pricing-name", children: o.name }),
-        o.trialDays > 0 && /* @__PURE__ */ u("span", { className: "ss-badge ss-badge-trialing", children: [
+        o.trialDays > 0 && /* @__PURE__ */ i("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__ */ u(D, { children: [
-        /* @__PURE__ */ e("span", { className: "ss-pricing-amount", children: os(o.amountCents, o.currency) }),
-        /* @__PURE__ */ u("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__ */ i(D, { children: [
+        /* @__PURE__ */ e("span", { className: "ss-pricing-amount", children: is(o.amountCents, o.currency) }),
+        /* @__PURE__ */ i("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((g, p) => /* @__PURE__ */ u("li", { className: "ss-pricing-feature", children: [
+      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: [
         /* @__PURE__ */ e("span", { className: "ss-check", children: "✓" }),
         " ",
-        g
+        m
       ] }, p)) }),
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          className: `ss-btn ${t ? "ss-btn-current" : "ss-btn-primary"}`,
-          disabled: t,
+          className: `ss-btn ${n ? "ss-btn-current" : "ss-btn-primary"}`,
+          disabled: n,
           onClick: () => r(o.id),
-          children: t ? "Current plan" : "Select plan"
+          children: n ? "Current plan" : "Select plan"
         }
       )
     ] }, o.id);
   }) }) });
 }
-function As() {
-  const { client: s } = $();
+function Os() {
+  const { client: s } = k();
   return { billing: s.billing };
 }
-function A(s) {
-  const { client: n } = $();
-  return B(() => {
+function M(s) {
+  const { client: a } = k();
+  return A(() => {
     if (s) {
-      const r = new q("https://api.saas-support.com/v1", { type: "portalToken", token: s });
-      return new X(r);
+      const r = new F("https://api.saas-support.com/v1", { type: "portalToken", token: s });
+      return new ss(r);
     }
-    return n.billing;
-  }, [n, s]);
+    return a.billing;
+  }, [a, s]);
 }
-function ts(s, n) {
-  const r = A(n), [c, a] = m(null), [i, l] = m(!0), [d, o] = m(null), t = S(async () => {
+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);
     try {
-      const g = await r.getCustomer(s);
-      a(g);
-    } catch (g) {
-      o(g instanceof Error ? g.message : "Failed to load subscription");
+      const m = await r.getCustomer(s);
+      t(m);
+    } catch (m) {
+      o(m instanceof Error ? m.message : "Failed to load subscription");
     } finally {
       l(!1);
     }
   }, [r, s]);
-  return C(() => {
-    t();
-  }, [t]), { customer: c, isLoading: i, error: d, refresh: t };
+  return L(() => {
+    n();
+  }, [n]), { customer: c, isLoading: d, error: u, refresh: n };
 }
-function cs(s, n) {
-  const r = A(n), [c, a] = m([]), [i, l] = m(!0), [d, o] = m(null), t = S(async () => {
+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);
     try {
-      const g = await r.getInvoices(s);
-      a(g);
-    } catch (g) {
-      o(g instanceof Error ? g.message : "Failed to load invoices");
+      const m = await r.getInvoices(s);
+      t(m);
+    } catch (m) {
+      o(m instanceof Error ? m.message : "Failed to load invoices");
     } finally {
       l(!1);
     }
   }, [r, s]);
-  return C(() => {
-    t();
-  }, [t]), { invoices: c, isLoading: i, error: d, refresh: t };
+  return L(() => {
+    n();
+  }, [n]), { invoices: c, isLoading: d, error: u, refresh: n };
 }
-function ls(s, n) {
-  const r = A(n), [c, a] = m([]), [i, l] = m(!0), [d, o] = m(null), t = S(async () => {
+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);
     try {
-      const g = await r.getCurrentUsage(s);
-      a(g);
-    } catch (g) {
-      o(g instanceof Error ? g.message : "Failed to load usage");
+      const m = await r.getCurrentUsage(s);
+      t(m);
+    } catch (m) {
+      o(m instanceof Error ? m.message : "Failed to load usage");
     } finally {
       l(!1);
     }
   }, [r, s]);
-  return C(() => {
-    t();
-  }, [t]), { usage: c, isLoading: i, error: d, refresh: t };
+  return L(() => {
+    n();
+  }, [n]), { usage: c, isLoading: d, error: u, refresh: n };
 }
-const is = {
+const ps = {
   active: "ss-badge-active"
 };
-function ds({
+function ms({
   customerId: s,
-  portalToken: n,
+  portalToken: a,
   onChangePlan: r,
   onCancel: c,
-  appearance: a
+  appearance: t
 }) {
-  const { appearance: i } = $(), { customer: l, isLoading: d, error: o } = ts(s, n);
-  return /* @__PURE__ */ e(E, { appearance: a ?? i, children: /* @__PURE__ */ u("div", { className: "ss-card", children: [
+  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: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Subscription" }),
-    d && /* @__PURE__ */ u("div", { className: "ss-loading", children: [
+    u && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
     o && /* @__PURE__ */ e("div", { className: "ss-global-error", children: o }),
-    l && !d && /* @__PURE__ */ u(D, { children: [
-      /* @__PURE__ */ u("div", { className: "ss-field", children: [
+    l && !u && /* @__PURE__ */ i(D, { children: [
+      /* @__PURE__ */ i("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__ */ u("div", { className: "ss-field", children: [
+      /* @__PURE__ */ i("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", children: "Status" }),
-        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("span", { className: `ss-badge ${is.active}`, children: "Active" }) })
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("span", { className: `ss-badge ${ps.active}`, children: "Active" }) })
       ] }),
-      /* @__PURE__ */ u("div", { className: "ss-btn-group", children: [
+      /* @__PURE__ */ i("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 us = {
+const gs = {
   paid: "ss-badge-active",
   open: "ss-badge-trialing",
   draft: "ss-badge-paused",
   void: "ss-badge-canceled",
   uncollectible: "ss-badge-past-due"
 };
-function ps(s) {
+function hs(s) {
   return new Date(s).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
-function gs(s) {
+function bs(s) {
   return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2 }).format(s / 100);
 }
-function ms({ customerId: s, portalToken: n, appearance: r }) {
-  const { appearance: c } = $(), { invoices: a, isLoading: i, error: l } = cs(s, n), d = r ?? c, o = [...a].sort((t, g) => new Date(g.createdAt).getTime() - new Date(t.createdAt).getTime());
-  return /* @__PURE__ */ e(E, { appearance: d, children: /* @__PURE__ */ u("div", { className: "ss-card ss-card-wide", children: [
+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: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Invoices" }),
-    i && /* @__PURE__ */ u("div", { className: "ss-loading", children: [
+    d && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
     l && /* @__PURE__ */ e("div", { className: "ss-global-error", children: l }),
-    !i && o.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No invoices yet." }),
-    !i && o.length > 0 && /* @__PURE__ */ u("table", { className: "ss-table", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ u("tr", { children: [
+    !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: [
         /* @__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((t) => /* @__PURE__ */ u("tr", { className: "ss-tr", children: [
-        /* @__PURE__ */ e("td", { className: "ss-td", children: ps(t.createdAt) }),
-        /* @__PURE__ */ e("td", { className: "ss-td", children: gs(t.amountCents) }),
-        /* @__PURE__ */ e("td", { className: "ss-td", children: /* @__PURE__ */ e("span", { className: `ss-badge ${us[t.status] || ""}`, children: t.status }) }),
-        /* @__PURE__ */ e("td", { className: "ss-td", children: t.pdfUrl ? /* @__PURE__ */ e("a", { className: "ss-link", href: t.pdfUrl, target: "_blank", rel: "noopener noreferrer", children: "Download" }) : "—" })
-      ] }, t.id)) })
+      /* @__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("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 bs({ customerId: s, limits: n, portalToken: r, appearance: c }) {
-  const { appearance: a } = $(), { usage: i, isLoading: l, error: d } = ls(s, r);
-  return /* @__PURE__ */ e(E, { appearance: c ?? a, children: /* @__PURE__ */ u("div", { className: "ss-card", children: [
+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: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Usage" }),
-    l && /* @__PURE__ */ u("div", { className: "ss-loading", children: [
+    l && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
-    d && /* @__PURE__ */ e("div", { className: "ss-global-error", children: d }),
-    !l && i.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No usage data." }),
-    !l && i.map((t) => {
-      const g = n == null ? void 0 : n[t.metric], p = g ? Math.min(100, t.total / g * 100) : null;
-      return /* @__PURE__ */ u("div", { className: "ss-usage-item", children: [
-        /* @__PURE__ */ u("div", { className: "ss-usage-header", children: [
-          /* @__PURE__ */ e("span", { className: "ss-usage-metric", children: t.metric }),
-          /* @__PURE__ */ u("span", { className: "ss-usage-value", children: [
-            t.total.toLocaleString(),
-            g ? ` / ${g.toLocaleString()}` : ""
+    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) => {
+      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: [
+          /* @__PURE__ */ e("span", { className: "ss-usage-metric", children: n.metric }),
+          /* @__PURE__ */ i("span", { className: "ss-usage-value", children: [
+            n.total.toLocaleString(),
+            m ? ` / ${m.toLocaleString()}` : ""
           ] })
         ] }),
         p !== null && /* @__PURE__ */ e("div", { className: "ss-progress-bar", children: /* @__PURE__ */ e(
@@ -1374,20 +1788,20 @@ function bs({ customerId: s, limits: n, portalToken: r, appearance: c }) {
             style: { width: `${p}%` }
           }
         ) })
-      ] }, t.metric);
+      ] }, n.metric);
     })
   ] }) });
 }
-function Fs({
+function Rs({
   customerId: s,
-  portalToken: n,
+  portalToken: a,
   limits: r,
   onChangePlan: c,
-  onCancel: a,
-  appearance: i
+  onCancel: t,
+  appearance: d
 }) {
-  const { appearance: l } = $(), d = i ?? l, [o, t] = m("subscription");
-  return /* @__PURE__ */ e(E, { appearance: d, children: /* @__PURE__ */ u("div", { className: "ss-card ss-card-wide", children: [
+  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: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Billing" }),
     /* @__PURE__ */ e("div", { className: "ss-tab-group", children: [
       { id: "subscription", label: "Subscription" },
@@ -1398,46 +1812,46 @@ function Fs({
       {
         type: "button",
         className: `ss-tab ${o === p.id ? "ss-tab-active" : ""}`,
-        onClick: () => t(p.id),
+        onClick: () => n(p.id),
         children: p.label
       },
       p.id
     )) }),
-    /* @__PURE__ */ u("div", { className: "ss-tab-content", children: [
+    /* @__PURE__ */ i("div", { className: "ss-tab-content", children: [
       o === "subscription" && /* @__PURE__ */ e(
-        ds,
+        ms,
         {
           customerId: s,
-          portalToken: n,
+          portalToken: a,
           onChangePlan: c,
-          onCancel: a
+          onCancel: t
         }
       ),
-      o === "invoices" && /* @__PURE__ */ e(ms, { customerId: s, portalToken: n }),
-      o === "usage" && /* @__PURE__ */ e(bs, { customerId: s, portalToken: n, limits: r })
+      o === "invoices" && /* @__PURE__ */ e(fs, { customerId: s, portalToken: a }),
+      o === "usage" && /* @__PURE__ */ e(ys, { customerId: s, portalToken: a, limits: r })
     ] })
   ] }) });
 }
-function Ms({ customerId: s, portalToken: n, onApplied: r, appearance: c }) {
-  const { appearance: a } = $(), i = A(n), l = c ?? a, [d, o] = m(""), [t, g] = m(!1), [p, h] = m(null), [f, x] = m(null), b = S(async (N) => {
-    if (N.preventDefault(), !!d.trim()) {
-      g(!0), h(null), x(null);
+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);
       try {
-        const y = await i.applyCoupon(s, d.trim());
-        x(`Coupon applied! ${y.discountType === "percent" ? `${y.amount}% off` : `$${(y.amount / 100).toFixed(2)} off`}`), o(""), r == null || r(y);
-      } catch (y) {
-        h(y instanceof Error ? y.message : "Invalid coupon code");
+        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");
       } finally {
-        g(!1);
+        m(!1);
       }
     }
-  }, [i, s, d, r]);
-  return /* @__PURE__ */ e(E, { appearance: l, children: /* @__PURE__ */ u("div", { className: "ss-card", children: [
+  }, [d, s, u, r]);
+  return /* @__PURE__ */ e(B, { appearance: l, children: /* @__PURE__ */ i("div", { className: "ss-card", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Apply coupon" }),
     p && /* @__PURE__ */ e("div", { className: "ss-global-error", children: p }),
-    f && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: f }),
-    /* @__PURE__ */ u("form", { onSubmit: b, children: [
-      /* @__PURE__ */ u("div", { className: "ss-field", children: [
+    v && /* @__PURE__ */ e("div", { className: "ss-success-msg", children: v }),
+    /* @__PURE__ */ i("form", { onSubmit: b, children: [
+      /* @__PURE__ */ i("div", { className: "ss-field", children: [
         /* @__PURE__ */ e("label", { className: "ss-label", htmlFor: "ss-coupon-code", children: "Coupon code" }),
         /* @__PURE__ */ e(
           "input",
@@ -1446,96 +1860,96 @@ function Ms({ customerId: s, portalToken: n, onApplied: r, appearance: c }) {
             className: "ss-input",
             type: "text",
             placeholder: "Enter coupon code",
-            value: d,
-            onChange: (N) => o(N.target.value),
+            value: u,
+            onChange: (x) => o(x.target.value),
             required: !0
           }
         )
       ] }),
-      /* @__PURE__ */ u("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: t || !d.trim(), children: [
-        t && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
+      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: n || !u.trim(), children: [
+        n && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Apply"
       ] })
     ] })
   ] }) });
 }
-function Os() {
-  const { client: s } = $();
+function Hs() {
+  const { client: s } = k();
   return { report: s.report };
 }
-function J() {
-  const { client: s } = $(), [n, r] = m(null), [c, a] = m(!1), [i, l] = m(null), d = S(async (o) => {
-    a(!0), l(null);
+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);
     try {
-      const t = await s.report.executeQuery(o);
-      return r(t), t;
-    } catch (t) {
-      return l(t instanceof Error ? t.message : "Query failed"), null;
+      const n = await s.report.executeQuery(o);
+      return r(n), n;
+    } catch (n) {
+      return l(n instanceof Error ? n.message : "Query failed"), null;
     } finally {
-      a(!1);
+      t(!1);
     }
   }, [s]);
-  return { result: n, execute: d, isLoading: c, error: i };
+  return { result: a, execute: u, isLoading: c, error: d };
 }
-function hs(s) {
-  const { client: n } = $(), [r, c] = m(null), [a, i] = m(!0), [l, d] = m(null), o = S(async () => {
-    i(!0), d(null);
+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);
     try {
-      const t = await n.report.listQueries(s);
-      c(t);
-    } catch (t) {
-      d(t instanceof Error ? t.message : "Failed to load queries");
+      const n = await a.report.listQueries(s);
+      c(n);
+    } catch (n) {
+      u(n instanceof Error ? n.message : "Failed to load queries");
     } finally {
-      i(!1);
+      d(!1);
     }
-  }, [n, s]);
-  return C(() => {
+  }, [a, s]);
+  return L(() => {
     o();
-  }, [o]), { queries: (r == null ? void 0 : r.data) ?? [], meta: r == null ? void 0 : r.meta, isLoading: a, error: l, refresh: o };
+  }, [o]), { queries: (r == null ? void 0 : r.data) ?? [], meta: r == null ? void 0 : r.meta, isLoading: t, error: l, refresh: o };
 }
-function Us(s) {
-  const { client: n } = $(), [r, c] = m(null), [a, i] = m(!0), [l, d] = m(null), o = S(async () => {
-    i(!0), d(null);
+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);
     try {
-      const t = await n.report.getDashboard(s);
-      c(t);
-    } catch (t) {
-      d(t instanceof Error ? t.message : "Failed to load dashboard");
+      const n = await a.report.getDashboard(s);
+      c(n);
+    } catch (n) {
+      u(n instanceof Error ? n.message : "Failed to load dashboard");
     } finally {
-      i(!1);
+      d(!1);
     }
-  }, [n, s]);
-  return C(() => {
+  }, [a, s]);
+  return L(() => {
     o();
-  }, [o]), { dashboard: r, isLoading: a, error: l, refresh: o };
+  }, [o]), { dashboard: r, isLoading: t, error: l, refresh: o };
 }
-function Rs(s, n, r = "https://api.saas-support.com/v1") {
-  const c = B(() => {
-    const p = new q(r, { type: "embedToken", token: s });
-    return new R(p);
-  }, [s, r]), [a, i] = m(null), [l, d] = m(!0), [o, t] = m(null), g = S(async () => {
-    d(!0), t(null);
+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 () => {
+    u(!0), n(null);
     try {
-      const p = await c.getDashboard(n);
-      i(p);
+      const p = await c.getDashboard(a);
+      d(p);
     } catch (p) {
-      t(p instanceof Error ? p.message : "Failed to load dashboard");
+      n(p instanceof Error ? p.message : "Failed to load dashboard");
     } finally {
-      d(!1);
+      u(!1);
     }
-  }, [c, n]);
-  return C(() => {
-    g();
-  }, [g]), { dashboard: a, reportClient: c, isLoading: l, error: o, refresh: g };
+  }, [c, a]);
+  return L(() => {
+    m();
+  }, [m]), { dashboard: t, reportClient: c, isLoading: l, error: o, refresh: m };
 }
-function Hs({ onResult: s, mode: n = "both", placeholder: r, appearance: c }) {
-  const { appearance: a } = $(), { execute: i, isLoading: l, error: d } = J(), o = c ?? a, [t, g] = m(""), [p, h] = m(n === "sql" ? "sql" : "nl"), f = S(async (x) => {
-    if (x.preventDefault(), !t.trim()) return;
-    const N = await i(p === "sql" ? { sql: t } : { naturalLanguage: t });
-    N && (s == null || s(N));
-  }, [t, p, i, s]);
-  return /* @__PURE__ */ e(E, { appearance: o, children: /* @__PURE__ */ u("div", { className: "ss-card ss-card-wide", children: [
-    n === "both" && /* @__PURE__ */ u("div", { className: "ss-tab-group ss-tab-group-sm", children: [
+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: [
       /* @__PURE__ */ e(
         "button",
         {
@@ -1555,237 +1969,237 @@ function Hs({ onResult: s, mode: n = "both", placeholder: r, appearance: c }) {
         }
       )
     ] }),
-    d && /* @__PURE__ */ e("div", { className: "ss-global-error", children: d }),
-    /* @__PURE__ */ u("form", { onSubmit: f, children: [
+    u && /* @__PURE__ */ e("div", { className: "ss-global-error", children: u }),
+    /* @__PURE__ */ i("form", { onSubmit: v, 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: t,
-          onChange: (x) => g(x.target.value),
+          value: n,
+          onChange: (y) => m(y.target.value),
           rows: 3
         }
       ) }),
-      /* @__PURE__ */ u("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l || !t.trim(), children: [
+      /* @__PURE__ */ i("button", { type: "submit", className: "ss-btn ss-btn-primary", disabled: l || !n.trim(), children: [
         l && /* @__PURE__ */ e("span", { className: "ss-spinner" }),
         "Run query"
       ] })
     ] })
   ] }) });
 }
-function fs({ columns: s, rows: n, sortable: r = !0, maxRows: c, appearance: a }) {
-  const { appearance: i } = $(), l = a ?? i, [d, o] = m(null), [t, g] = m("asc"), p = B(() => d ? [...n].sort((b, N) => {
-    const y = b[d], v = N[d];
-    if (y == null && v == null) return 0;
-    if (y == null) return 1;
-    if (v == null) return -1;
-    if (typeof y == "number" && typeof v == "number")
-      return t === "asc" ? y - v : v - y;
-    const w = String(y), k = String(v);
-    return t === "asc" ? w.localeCompare(k) : k.localeCompare(w);
-  }) : n, [n, d, t]), h = c ? p.slice(0, c) : p, f = (b) => {
-    r && (d === b ? g((N) => N === "asc" ? "desc" : "asc") : (o(b), g("asc")));
+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 x(b) {
+  function y(b) {
     return b == null ? "" : typeof b == "object" ? JSON.stringify(b) : String(b);
   }
-  return /* @__PURE__ */ e(E, { appearance: l, children: /* @__PURE__ */ u("div", { className: "ss-table-container", children: [
-    /* @__PURE__ */ u("table", { className: "ss-table", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: s.map((b) => /* @__PURE__ */ u(
+  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(
         "th",
         {
-          className: `ss-th ${r ? "ss-th-sortable" : ""} ${d === b ? t === "asc" ? "ss-sorted-asc" : "ss-sorted-desc" : ""}`,
-          onClick: () => f(b),
+          className: `ss-th ${r ? "ss-th-sortable" : ""} ${u === b ? n === "asc" ? "ss-sorted-asc" : "ss-sorted-desc" : ""}`,
+          onClick: () => v(b),
           children: [
             b,
-            d === b && /* @__PURE__ */ e("span", { className: "ss-sort-indicator", children: t === "asc" ? " ▲" : " ▼" })
+            u === b && /* @__PURE__ */ e("span", { className: "ss-sort-indicator", children: n === "asc" ? " ▲" : " ▼" })
           ]
         },
         b
       )) }) }),
-      /* @__PURE__ */ e("tbody", { children: h.map((b, N) => /* @__PURE__ */ e("tr", { className: "ss-tr", children: s.map((y) => /* @__PURE__ */ e("td", { className: "ss-td", children: x(b[y]) }, y)) }, N)) })
+      /* @__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)) })
     ] }),
-    c && n.length > c && /* @__PURE__ */ u("div", { className: "ss-table-footer", children: [
+    c && a.length > c && /* @__PURE__ */ i("div", { className: "ss-table-footer", children: [
       "Showing ",
       c,
       " of ",
-      n.length,
+      a.length,
       " rows"
     ] })
   ] }) });
 }
-function ys(s, n = "#6366f1") {
-  const r = parseInt(n.replace("#", "").slice(0, 2), 16), c = [];
-  for (let a = 0; a < s; a++) {
-    const i = (r + a * Math.floor(360 / Math.max(s, 1))) % 360;
-    c.push(`hsl(${i}, 65%, 55%)`);
+function Ns(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%)`);
   }
   return c;
 }
-function xs({ labels: s, values: n, w: r, h: c, colors: a }) {
-  const i = Math.max(...n, 1), l = 40, d = r - l * 2, o = c - l * 2, t = Math.max(1, d / s.length - 4);
-  return /* @__PURE__ */ u("g", { children: [
+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 }),
-    n.map((g, p) => {
-      const h = g / i * o, f = l + d / s.length * p + 2, x = c - l - h;
-      return /* @__PURE__ */ u("g", { children: [
-        /* @__PURE__ */ e("rect", { x: f, y: x, width: t, height: h, fill: a[p % a.length], rx: 2 }),
-        /* @__PURE__ */ e("text", { x: f + t / 2, y: c - l + 14, textAnchor: "middle", fontSize: 10, fill: "#666", children: s[p].length > 8 ? s[p].slice(0, 8) + "..." : s[p] })
+    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] })
       ] }, p);
     })
   ] });
 }
-function Ns({ labels: s, values: n, w: r, h: c, colors: a }) {
-  const i = Math.max(...n, 1), l = 40, d = r - l * 2, o = c - l * 2, t = s.length > 1 ? d / (s.length - 1) : 0, g = n.map((p, h) => {
-    const f = l + t * h, x = c - l - p / i * o;
-    return `${f},${x}`;
+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}`;
   });
-  return /* @__PURE__ */ u("g", { children: [
+  return /* @__PURE__ */ i("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);
     }),
-    /* @__PURE__ */ e("polyline", { points: g.join(" "), fill: "none", stroke: a[0], strokeWidth: 2 }),
-    n.map((p, h) => {
-      const f = l + t * h, x = c - l - p / i * o;
-      return /* @__PURE__ */ e("circle", { cx: f, cy: x, r: 4, fill: a[0] }, h);
+    /* @__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);
     })
   ] });
 }
-function vs({ labels: s, values: n, w: r, h: c, colors: a }) {
-  const i = n.reduce((h, f) => h + f, 0) || 1, l = r / 2, d = c / 2 - 20, o = Math.min(r, c) / 2 - 40, t = 2 * Math.PI * o;
-  let g = 0;
-  const p = n.map((h, f) => {
-    const x = h / i, b = x * t, N = { dash: b, offset: g, color: a[f % a.length], label: s[f], pct: x };
-    return g += b, N;
+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;
+  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;
   });
-  return /* @__PURE__ */ u("g", { children: [
-    p.map((h, f) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ i("g", { children: [
+    p.map((h, v) => /* @__PURE__ */ e(
       "circle",
       {
         cx: l,
-        cy: d,
+        cy: u,
         r: o,
         fill: "none",
         stroke: h.color,
         strokeWidth: o * 0.6,
-        strokeDasharray: `${h.dash} ${t - h.dash}`,
+        strokeDasharray: `${h.dash} ${n - h.dash}`,
         strokeDashoffset: -h.offset,
-        transform: `rotate(-90 ${l} ${d})`
+        transform: `rotate(-90 ${l} ${u})`
       },
-      f
+      v
     )),
-    /* @__PURE__ */ e("g", { transform: `translate(${l - s.length * 30}, ${c - 20})`, children: p.slice(0, 6).map((h, f) => /* @__PURE__ */ u("g", { transform: `translate(${f * 60}, 0)`, children: [
+    /* @__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 })
-    ] }, f)) })
+    ] }, v)) })
   ] });
 }
-function ws({ type: s, data: n, title: r, width: c = 400, height: a = 300, appearance: i }) {
-  const { appearance: l } = $(), d = i ?? l, o = B(() => ys(n.labels.length), [n.labels.length]);
-  return /* @__PURE__ */ e(E, { appearance: d, children: /* @__PURE__ */ u("div", { className: "ss-chart-container", children: [
+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: [
     r && /* @__PURE__ */ e("h3", { className: "ss-chart-title", children: r }),
-    /* @__PURE__ */ u("svg", { viewBox: `0 0 ${c} ${a}`, width: "100%", style: { maxWidth: c }, children: [
-      s === "bar" && /* @__PURE__ */ e(xs, { labels: n.labels, values: n.values, w: c, h: a, colors: o }),
-      s === "line" && /* @__PURE__ */ e(Ns, { labels: n.labels, values: n.values, w: c, h: a, colors: o }),
-      s === "pie" && /* @__PURE__ */ e(vs, { labels: n.labels, values: n.values, w: c, h: a, colors: o })
+    /* @__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 })
     ] })
   ] }) });
 }
-function Ws({ dashboardId: s, embedToken: n, baseUrl: r, refreshInterval: c, appearance: a }) {
-  const i = $(), l = a ?? (i == null ? void 0 : i.appearance), d = B(() => {
-    if (n) {
-      const y = r ?? "https://api.saas-support.com/v1", v = new q(y, { type: "embedToken", token: n });
-      return new R(v);
-    }
-    return i.client.report;
-  }, [n, r, i]), [o, t] = m([]), [g, p] = m({}), [h, f] = m(!0), [x, b] = m(null), N = S(async () => {
-    f(!0), b(null);
+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(() => {
+    if (a) {
+      const f = r ?? "https://api.saas-support.com/v1", N = new F(f, { type: "embedToken", token: a });
+      return new W(N);
+    }
+    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);
     try {
-      const y = await d.getDashboard(s), v = JSON.parse(y.layoutJson || "[]");
-      t(v);
+      const f = await u.getDashboard(s), N = JSON.parse(f.layoutJson || "[]");
+      n(N);
       const w = {};
-      for (const k of v)
+      for (const $ of N)
         try {
-          const T = await d.listQueries({ search: k.queryId, perPage: 1 });
-          if (T.data.length > 0 && T.data[0].generatedSql) {
-            const P = await d.executeQuery({ sql: T.data[0].generatedSql });
-            w[k.queryId] = P;
+          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;
           }
         } catch {
         }
       p(w);
-    } catch (y) {
-      b(y instanceof Error ? y.message : "Failed to load dashboard");
+    } catch (f) {
+      b(f instanceof Error ? f.message : "Failed to load dashboard");
     } finally {
-      f(!1);
+      v(!1);
     }
-  }, [d, s]);
-  return C(() => {
-    N();
-  }, [N]), C(() => {
+  }, [u, s]);
+  return L(() => {
+    x();
+  }, [x]), L(() => {
     if (!c || c <= 0) return;
-    const y = setInterval(N, c * 1e3);
-    return () => clearInterval(y);
-  }, [c, N]), /* @__PURE__ */ e(E, { appearance: l, children: /* @__PURE__ */ u("div", { className: "ss-dashboard-grid", children: [
-    h && /* @__PURE__ */ u("div", { className: "ss-loading", children: [
+    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: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading dashboard..."
     ] }),
-    x && /* @__PURE__ */ e("div", { className: "ss-global-error", children: x }),
-    !h && o.map((y, v) => {
-      const w = g[y.queryId];
+    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 k = w.columns.length >= 2 ? {
-        labels: w.rows.map((T) => String(T[w.columns[0]] ?? "")),
-        values: w.rows.map((T) => Number(T[w.columns[1]] ?? 0))
+      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))
       } : { labels: [], values: [] };
-      return /* @__PURE__ */ u("div", { className: "ss-widget", children: [
-        y.title && /* @__PURE__ */ e("h4", { className: "ss-widget-header", children: y.title }),
-        y.chartType === "table" ? /* @__PURE__ */ e(fs, { columns: w.columns, rows: w.rows, maxRows: 50 }) : /* @__PURE__ */ e(
-          ws,
+      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,
           {
-            type: y.chartType || "bar",
-            data: k,
-            width: y.w,
-            height: y.h
+            type: f.chartType || "bar",
+            data: $,
+            width: f.w,
+            height: f.h
           }
         )
-      ] }, v);
+      ] }, N);
     })
   ] }) });
 }
-function Ss(s) {
+function Cs(s) {
   return new Date(s).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
-function _s({ onSelectQuery: s, onRunQuery: n, appearance: r }) {
-  const { appearance: c } = $(), { queries: a, isLoading: i, error: l } = hs(), { execute: d, isLoading: o } = J(), t = r ?? c, g = S(async (p) => {
+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) => {
     if (!p.generatedSql) return;
-    const h = await d({ sql: p.generatedSql });
-    h && (n == null || n(h));
-  }, [d, n]);
-  return /* @__PURE__ */ e(E, { appearance: t, children: /* @__PURE__ */ u("div", { className: "ss-card ss-card-wide", children: [
+    const h = await u({ sql: p.generatedSql });
+    h && (a == null || a(h));
+  }, [u, a]);
+  return /* @__PURE__ */ e(B, { appearance: n, children: /* @__PURE__ */ i("div", { className: "ss-card ss-card-wide", children: [
     /* @__PURE__ */ e("h2", { className: "ss-title", children: "Saved Queries" }),
-    i && /* @__PURE__ */ u("div", { className: "ss-loading", children: [
+    d && /* @__PURE__ */ i("div", { className: "ss-loading", children: [
       /* @__PURE__ */ e("span", { className: "ss-spinner" }),
       " Loading..."
     ] }),
     l && /* @__PURE__ */ e("div", { className: "ss-global-error", children: l }),
-    !i && a.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No saved queries." }),
-    !i && a.map((p) => /* @__PURE__ */ u(
+    !d && t.length === 0 && /* @__PURE__ */ e("p", { className: "ss-empty", children: "No saved queries." }),
+    !d && t.map((p) => /* @__PURE__ */ i(
       "div",
       {
         className: "ss-saved-query-card",
         onClick: () => s == null ? void 0 : s(p),
         children: [
-          /* @__PURE__ */ u("div", { className: "ss-saved-query-header", children: [
+          /* @__PURE__ */ i("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__ */ u("div", { className: "ss-saved-query-footer", children: [
-            /* @__PURE__ */ e("span", { className: "ss-saved-query-date", children: Ss(p.createdAt) }),
+          /* @__PURE__ */ i("div", { className: "ss-saved-query-footer", children: [
+            /* @__PURE__ */ e("span", { className: "ss-saved-query-date", children: Cs(p.createdAt) }),
             /* @__PURE__ */ e(
               "button",
               {
@@ -1793,7 +2207,7 @@ function _s({ onSelectQuery: s, onRunQuery: n, appearance: r }) {
                 className: "ss-btn ss-btn-sm ss-btn-primary",
                 disabled: o || !p.generatedSql,
                 onClick: (h) => {
-                  h.stopPropagation(), g(p);
+                  h.stopPropagation(), m(p);
                 },
                 children: o ? /* @__PURE__ */ e("span", { className: "ss-spinner" }) : "Run"
               }
@@ -1805,104 +2219,105 @@ function _s({ onSelectQuery: s, onRunQuery: n, appearance: r }) {
     ))
   ] }) });
 }
-function js({ embedToken: s, dashboardId: n, baseUrl: r = "https://api.saas-support.com/v1", refreshInterval: c, appearance: a }) {
-  const i = B(() => {
-    const b = new q(r, { type: "embedToken", token: s });
-    return new R(b);
-  }, [s, r]), [l, d] = m([]), [o, t] = m(!0), [g, p] = m(null), h = B(() => M(a), [a]), f = B(() => O(h), [h]), x = S(async () => {
-    t(!0), p(null);
+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 () => {
+    n(!0), p(null);
     try {
-      const b = await i.getDashboard(n), N = JSON.parse(b.layoutJson || "[]"), y = await Promise.all(
-        N.map(async (v) => {
+      const b = await d.getDashboard(a), x = JSON.parse(b.layoutJson || "[]"), f = await Promise.all(
+        x.map(async (N) => {
           try {
-            const w = await i.listQueries({ search: v.queryId, perPage: 1 });
+            const w = await d.listQueries({ search: N.queryId, perPage: 1 });
             if (w.data.length > 0 && w.data[0].generatedSql) {
-              const k = await i.executeQuery({ sql: w.data[0].generatedSql });
-              return { ...v, result: k };
+              const $ = await d.executeQuery({ sql: w.data[0].generatedSql });
+              return { ...N, result: $ };
             }
           } catch {
           }
-          return v;
+          return N;
         })
       );
-      d(y);
+      u(f);
     } catch (b) {
       p(b instanceof Error ? b.message : "Failed to load dashboard");
     } finally {
-      t(!1);
+      n(!1);
     }
-  }, [i, n]);
-  return C(() => {
-    x();
-  }, [x]), C(() => {
+  }, [d, a]);
+  return L(() => {
+    y();
+  }, [y]), L(() => {
     if (!c || c <= 0) return;
-    const b = setInterval(x, c * 1e3);
+    const b = setInterval(y, c * 1e3);
     return () => clearInterval(b);
-  }, [c, x]), /* @__PURE__ */ e(
+  }, [c, y]), /* @__PURE__ */ e(
     "div",
     {
       ref: (b) => {
         if (!b || b.shadowRoot) return;
-        const N = b.attachShadow({ mode: "open" }), y = document.createElement("style");
-        y.textContent = f, N.appendChild(y);
-        const v = document.createElement("div");
-        N.appendChild(v);
+        const x = b.attachShadow({ mode: "open" }), f = document.createElement("style");
+        f.textContent = v, x.appendChild(f);
+        const N = document.createElement("div");
+        x.appendChild(N);
       },
       style: { display: "contents" },
-      children: /* @__PURE__ */ u("div", { className: "ss-dashboard-grid", children: [
+      children: /* @__PURE__ */ i("div", { className: "ss-dashboard-grid", children: [
         o && /* @__PURE__ */ e("div", { className: "ss-loading", children: "Loading dashboard..." }),
-        g && /* @__PURE__ */ e("div", { className: "ss-global-error", children: g }),
-        !o && l.map((b, N) => {
+        m && /* @__PURE__ */ e("div", { className: "ss-global-error", children: m }),
+        !o && l.map((b, x) => {
           if (!b.result) return null;
-          const { columns: y, rows: v } = b.result;
-          return /* @__PURE__ */ u("div", { className: "ss-widget", children: [
+          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__ */ u("table", { className: "ss-table", children: [
-              /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: y.map((w) => /* @__PURE__ */ e("th", { className: "ss-th", children: w }, w)) }) }),
-              /* @__PURE__ */ e("tbody", { children: v.slice(0, 50).map((w, k) => /* @__PURE__ */ e("tr", { className: "ss-tr", children: y.map((T) => /* @__PURE__ */ e("td", { className: "ss-td", children: String(w[T] ?? "") }, T)) }, k)) })
+            /* @__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)) }, $)) })
             ] })
-          ] }, N);
+          ] }, x);
         })
       ] })
     }
   );
 }
 export {
-  ws as Chart,
-  Ms as CouponInput,
-  Ws as DashboardView,
-  fs as DataTable,
-  ms as InvoiceHistory,
-  Ds as OrgSwitcher,
-  Fs as PaymentPortal,
-  qs as PricingTable,
-  Hs as QueryInput,
-  js as ReportEmbed,
+  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,
-  Qs as SaaSError,
-  Ts as SaaSProvider,
-  Y as SaaSSupport,
-  _s as SavedQueryList,
-  Ls as SignIn,
-  Bs as SignUp,
-  ds as SubscriptionStatus,
-  bs as UsageDisplay,
-  Ps as UserButton,
-  zs as UserProfile,
-  K as isMfaRequired,
-  W as useAuth,
-  As as useBilling,
-  Us as useDashboard,
-  Rs as useEmbedDashboard,
-  cs as useInvoices,
-  as as useOrg,
-  J as useQuery,
-  Os as useReport,
-  $ as useSaaSContext,
-  hs as useSavedQueries,
+  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,
-  ns as useSignUp,
-  ts as useSubscription,
-  ls as useUsage,
-  Is as useUser
+  ts as useSignUp,
+  cs as useSubscription,
+  us as useUsage,
+  zs as useUser
 };