@streamoid/settings 0.7.9 → 0.7.11

package/dist/index.js

@@ -29,11 +29,13 @@ __export(index_exports, {
   DEFAULT_USER_LANGUAGE: () => DEFAULT_USER_LANGUAGE,
   ExportDateModal: () => ExportDateModal,
   InviteUpdateModal: () => InviteUpdateModal,
+  MemberCreditLimitModal: () => MemberCreditLimitModal,
   MemberListFrame: () => MemberListFrame,
   MemberListToolbar: () => MemberListToolbar,
   OrganizationContent: () => OrganizationContent,
   OrganizationMemberModal: () => OrganizationMemberModal,
   OrganizationModal: () => OrganizationModal,
+  PerUserLimitsView: () => PerUserLimitsView,
   ProfileAvatar: () => ProfileAvatar,
   ProfileTab: () => ProfileTab,
   ReferralTab: () => ReferralTab,
@@ -57,13 +59,28 @@ __export(index_exports, {
   WorkspaceModal: () => WorkspaceModal,
   WorkspacePicker: () => WorkspacePicker,
   WorkspaceTab: () => WorkspaceTab,
+  belowUsageReason: () => belowUsageReason,
+  cleanCreditLimitInput: () => cleanCreditLimitInput,
   countLabel: () => countLabel,
+  creditCycleUnit: () => creditCycleUnit,
+  describeDefaultLimit: () => describeDefaultLimit,
+  describeMemberLimit: () => describeMemberLimit,
+  formatCreditLimit: () => formatCreditLimit,
+  formatCredits: () => formatCredits,
   groupWorkspaceList: () => groupWorkspaceList,
+  isLimitBelowUsage: () => isLimitBelowUsage,
+  joinMembersWithLimits: () => joinMembersWithLimits,
+  limitBelowUsageUsed: () => limitBelowUsageUsed,
+  limitSourceLabel: () => limitSourceLabel,
   loadWorkspaceOrganization: () => loadWorkspaceOrganization,
+  minimumCreditLimit: () => minimumCreditLimit,
   resolveSettingsTabFromPath: () => resolveSettingsTabFromPath,
+  roundCredits: () => roundCredits,
   useSettingsAdapters: () => useSettingsAdapters,
   useWorkspaceOrganization: () => useWorkspaceOrganization,
-  userLanguageLabel: () => userLanguageLabel
+  userLanguageLabel: () => userLanguageLabel,
+  validateCreditLimitInput: () => validateCreditLimitInput,
+  validateDefaultCreditLimitInput: () => validateDefaultCreditLimitInput
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -386,12 +403,12 @@ function useWorkspaceOrganization({
 }
 
 // src/settings-content.tsx
-var import_react17 = require("react");
-var import_ui11 = require("@streamoid/ui");
-var import_ui12 = require("@streamoid/ui");
+var import_react19 = require("react");
 var import_ui13 = require("@streamoid/ui");
 var import_ui14 = require("@streamoid/ui");
-var import_icons13 = require("@streamoid/icons");
+var import_ui15 = require("@streamoid/ui");
+var import_ui16 = require("@streamoid/ui");
+var import_icons14 = require("@streamoid/icons");
 
 // src/icons/SiconKey.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -6861,11 +6878,34 @@ function isBillingWorkspaceMissing(failure) {
   };
   return visit(failure, 0);
 }
+var LIMIT_BELOW_USAGE = "LIMIT_BELOW_USAGE";
+function isLimitBelowUsage(failure) {
+  return findLimitBelowUsage(failure) !== null;
+}
+function limitBelowUsageUsed(failure) {
+  const used = findLimitBelowUsage(failure)?.used;
+  return typeof used === "number" && Number.isFinite(used) ? used : null;
+}
+function findLimitBelowUsage(failure) {
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (value, depth) => {
+    if (depth > 4 || value == null || typeof value !== "object" || seen.has(value)) return null;
+    seen.add(value);
+    const error = value;
+    if (error.code === LIMIT_BELOW_USAGE) return error;
+    for (const child of [error.error, error.data, error.body, error.cause, error.publicError]) {
+      const found = visit(child, depth + 1);
+      if (found) return found;
+    }
+    return null;
+  };
+  return visit(failure, 0);
+}
 
 // src/billing-content.tsx
-var import_react15 = require("react");
-var import_ui9 = require("@streamoid/ui");
-var import_icons11 = require("@streamoid/icons");
+var import_react17 = require("react");
+var import_ui11 = require("@streamoid/ui");
+var import_icons12 = require("@streamoid/icons");
 
 // src/plan-comparison-data.ts
 var PLAN_COMPARISON_COLUMNS = ["Free", "Pro", "Enterprise"];
@@ -7767,158 +7807,871 @@ function BuyCreditsModal({
   );
 }
 
-// src/billing-content.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var DEFAULT_TOPUP_SERVICE = "catalogix";
-var PRIMARY_COLOR2 = "var(--alias-text---icons-primary)";
-var MUTED_COLOR = "var(--alias-text---icons-muted)";
-function formatDate2(iso) {
-  try {
-    return new Date(iso).toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric"
-    });
-  } catch {
-    return iso;
-  }
+// src/per-user-limits-view.tsx
+var import_react16 = require("react");
+var import_ui10 = require("@streamoid/ui");
+
+// src/member-credit-limit-modal.tsx
+var import_react15 = require("react");
+var import_ui9 = require("@streamoid/ui");
+var import_icons11 = require("@streamoid/icons");
+
+// src/credit-limits.ts
+var DAY_MS = 24 * 60 * 60 * 1e3;
+function creditCycleUnit(cycle) {
+  if (!cycle) return "month";
+  const days = (Date.parse(cycle.end) - Date.parse(cycle.start)) / DAY_MS;
+  return Number.isFinite(days) && days > 200 ? "year" : "month";
 }
-function formatCurrency(cents, currency) {
-  if (currency === "inr") {
-    return `\u20B9${(cents / 100).toFixed(2)}`;
-  }
-  return `$${(cents / 100).toFixed(2)}`;
+function formatCreditLimit(limit, unit) {
+  if (limit === null) return "Unlimited";
+  return `${limit.toLocaleString("en-US")} ${limit === 1 ? "credit" : "credits"} / ${unit}`;
 }
-function getCurrencySymbolByCountry(country) {
-  return country?.trim().toUpperCase() === "IN" ? "\u20B9" : "$";
+function roundCredits(value) {
+  return Number(value.toFixed(2));
 }
-function formatCredits(n) {
-  return n.toLocaleString("en-US");
+function minimumCreditLimit(used) {
+  return Math.ceil(roundCredits(used));
 }
-function formatNextBillingDateLabel(iso) {
-  if (iso) {
-    const parsed = new Date(iso);
-    if (!Number.isNaN(parsed.getTime())) {
-      return parsed.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric"
-      });
-    }
+function formatCredits(value) {
+  return roundCredits(value).toLocaleString("en-US", { maximumFractionDigits: 2 });
+}
+function validateDefaultCreditLimitInput(raw) {
+  return validateCreditLimitInput(raw, 0);
+}
+function cleanCreditLimitInput(value) {
+  return value.replace(/[^\d.]/g, "");
+}
+function validateCreditLimitInput(raw, used) {
+  const trimmed = raw.trim();
+  if (!trimmed) return { ok: false, reason: "Enter a credit limit" };
+  if (!/^\d+$/.test(trimmed)) {
+    return { ok: false, reason: "Enter a whole number of credits" };
   }
-  const fallback = /* @__PURE__ */ new Date();
-  fallback.setMonth(fallback.getMonth() + 1);
-  return fallback.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
+  const value = Number(trimmed);
+  if (!Number.isSafeInteger(value)) {
+    return { ok: false, reason: "Enter a smaller number" };
+  }
+  if (value < roundCredits(used)) {
+    return { ok: false, reason: belowUsageReason(used) };
+  }
+  return { ok: true, value };
 }
-function formatEffectiveDateLabel(value) {
-  if (value == null) return "";
-  const parsed = typeof value === "number" ? new Date(value < 1e10 ? value * 1e3 : value) : new Date(value);
-  if (Number.isNaN(parsed.getTime())) return "";
-  return parsed.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
+function belowUsageReason(used) {
+  return `Must be at least ${minimumCreditLimit(used).toLocaleString("en-US")} \u2014 ${formatCredits(used)} already used this cycle`;
 }
-function useIsLightTheme() {
-  const read = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "Light";
-  const [isLight, setIsLight] = (0, import_react15.useState)(read);
-  (0, import_react15.useEffect)(() => {
-    if (typeof document === "undefined") return;
-    const target = document.documentElement;
-    const observer = new MutationObserver(() => setIsLight(read()));
-    observer.observe(target, {
-      attributes: true,
-      attributeFilter: ["data-theme"]
-    });
-    setIsLight(read());
-    return () => observer.disconnect();
-  }, []);
-  return isLight;
+function describeDefaultLimit(response, unit) {
+  return formatCreditLimit(response?.default?.limit ?? null, unit);
 }
-function UpdateSubscriptionModal({
+function describeMemberLimit(row, unit) {
+  return formatCreditLimit(row.limit, unit);
+}
+function limitSourceLabel(row) {
+  if (row.source === "override") return "Custom";
+  if (row.source === "default") return "Default";
+  return null;
+}
+function joinMembersWithLimits(members, response) {
+  const byUser = /* @__PURE__ */ new Map();
+  for (const entry of response?.users ?? []) byUser.set(entry.userId, entry);
+  const def = response?.default ?? null;
+  return members.map((member) => {
+    const userId = member.user._id;
+    const entry = byUser.get(userId);
+    if (!entry) {
+      return {
+        member,
+        userId,
+        limit: def ? def.limit ?? null : null,
+        source: def ? "default" : "none",
+        hasLimit: false,
+        used: 0,
+        lastCycleUsed: 0
+      };
+    }
+    const hasLimit = Boolean(entry.hasLimit);
+    return {
+      member,
+      userId,
+      limit: entry.limit ?? null,
+      source: entry.source ?? (hasLimit ? "override" : def ? "default" : "none"),
+      hasLimit,
+      used: entry.used ?? 0,
+      lastCycleUsed: entry.lastCycleUsed ?? 0
+    };
+  });
+}
+
+// src/member-credit-limit-modal.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var T12 = {
+  primary: "var(--alias-text---icons-primary)",
+  tertiary: "var(--alias-text---icons-tertiary)",
+  muted: "var(--alias-text---icons-muted)",
+  error: "var(--alias-text---icons-error, var(--alias-text-and-icons-error, #ff6b6b))",
+  surface: "var(--primitives-neutral-825)",
+  fillPlus: "var(--alias-fill-neutral-neutralplus)",
+  borderSubtle: "var(--alias-border-subtle)",
+  borderDivider: "var(--alias-border-divider)",
+  font: "var(--font-family-font-family-body)",
+  fsSm: "var(--font-size-font-size-sm)",
+  fsLg: "var(--font-size-font-size-lg)",
+  lhSm: "var(--line-height-line-height-sm)",
+  lhLg: "var(--line-height-line-height-lg)",
+  spXs: "var(--spacing-xs)",
+  spXl: "var(--spacing-xl)",
+  sp3xl: "var(--spacing-3xl)",
+  sp6xl: "var(--spacing-6xl)",
+  r3xl: "var(--radius-3xl)",
+  r4xl: "var(--radius-4xl)"
+};
+function MemberCreditLimitModal({
   open,
-  currentPlanName,
-  currentPlanAmount,
-  nextPlanName,
-  nextPlanAmount,
-  nextBillingDateLabel,
-  loading,
+  title = "Set custom usage limit",
+  description,
+  subject,
+  resetKey,
+  used,
+  initialLimit,
+  isSet,
+  unit,
+  onSave,
+  onRemove,
+  removeLabel = "Remove",
+  removeHint,
+  saveSuccessMessage = "Usage limit updated",
+  removeSuccessMessage = "Usage limit removed",
   onClose,
-  onProceed
+  onSaved,
+  onStale
 }) {
-  const isLight = useIsLightTheme();
-  const modalSurface = isLight ? "#ffffff" : "var(--alias-surface-base)";
-  const cardBorder = isLight ? "1px solid var(--alias-border-subtle)" : "1px solid var(--alias-border-divider)";
+  const { toast } = useSettingsAdapters();
+  const initialUnlimited = initialLimit === null;
+  const [unlimited, setUnlimited] = (0, import_react15.useState)(initialUnlimited);
+  const [raw, setRaw] = (0, import_react15.useState)("");
+  const [touched, setTouched] = (0, import_react15.useState)(false);
+  const [saving, setSaving] = (0, import_react15.useState)(false);
+  const [serverHint, setServerHint] = (0, import_react15.useState)(null);
+  const [serverUsed, setServerUsed] = (0, import_react15.useState)(null);
+  const close = () => {
+    if (!saving) onClose();
+  };
+  useOverlayOpen(open, close);
+  (0, import_react15.useEffect)(() => {
+    if (!open) return;
+    setUnlimited(initialUnlimited);
+    setRaw(initialLimit !== null ? String(initialLimit) : "");
+    setTouched(false);
+    setSaving(false);
+    setServerHint(null);
+    setServerUsed(null);
+  }, [open, resetKey, initialLimit, isSet, initialUnlimited]);
   if (!open) return null;
+  const usedNow = Math.max(used, serverUsed ?? 0);
+  const validation = validateCreditLimitInput(raw, usedNow);
+  const changed = !isSet || (unlimited ? !initialUnlimited : initialUnlimited || validation.ok && validation.value !== initialLimit);
+  const canSave = !saving && changed && (unlimited || validation.ok);
+  const hint = serverHint ?? (!unlimited && touched && !validation.ok ? validation.reason : null);
+  const handleSave = async () => {
+    if (!canSave) return;
+    const next = unlimited ? null : validation.ok ? validation.value : null;
+    setSaving(true);
+    try {
+      await onSave(next);
+      toast.success(saveSuccessMessage);
+      onSaved();
+      onClose();
+    } catch (err) {
+      if (isLimitBelowUsage(err)) {
+        const fresh = limitBelowUsageUsed(err) ?? usedNow;
+        setServerUsed(fresh);
+        setUnlimited(false);
+        setServerHint(belowUsageReason(fresh));
+        if (fresh !== used) onStale?.();
+      } else {
+        toast.error(errorMessage(err, { method: "PUT" }));
+      }
+      setSaving(false);
+    }
+  };
+  const handleRemove = async () => {
+    if (saving || !onRemove) return;
+    setSaving(true);
+    try {
+      await onRemove();
+      toast.success(removeSuccessMessage);
+      onSaved();
+      onClose();
+    } catch (err) {
+      toast.error(errorMessage(err, { method: "DELETE" }));
+      setSaving(false);
+    }
+  };
+  const bodyText = {
+    fontFamily: T12.font,
+    fontSize: T12.fsSm,
+    lineHeight: T12.lhSm
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center",
       style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
-      onClick: (event) => {
-        if (event.target === event.currentTarget) onClose();
+      onClick: (e) => {
+        if (e.target === e.currentTarget) close();
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
-          className: "flex flex-col w-full max-w-xl",
+          className: "flex flex-col items-start",
           style: {
-            backgroundColor: modalSurface,
-            borderRadius: "var(--radius-3xl)",
-            border: "1px solid var(--alias-border-subtle)",
-            padding: "var(--spacing-6xl)",
-            gap: "var(--spacing-6xl)",
-            maxHeight: "90vh",
-            overflowY: "auto"
+            backgroundColor: T12.surface,
+            borderRadius: T12.r4xl,
+            border: `1px solid ${T12.borderSubtle}`,
+            width: 480,
+            maxWidth: "calc(100vw - 32px)",
+            maxHeight: "85vh"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "shrink-0 w-full relative", children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "p",
+                "div",
                 {
-                  className: "flex-1 min-w-0",
-                  style: {
-                    fontFamily: "var(--font-family-font-family-display)",
-                    fontSize: "var(--font-size-font-size-xxl)",
-                    fontWeight: 600,
-                    lineHeight: "var(--line-height-line-height-xxl)",
-                    color: "var(--alias-text---icons-primary)"
-                  },
-                  children: "Update Subscription"
+                  "aria-hidden": true,
+                  className: "absolute inset-0 pointer-events-none",
+                  style: { borderBottom: `1px solid ${T12.borderDivider}` }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "button",
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                "div",
                 {
-                  type: "button",
-                  onClick: onClose,
-                  style: { background: "transparent", border: "none" },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons11.SiconClose, { className: "w-6 h-6", color: MUTED_COLOR })
+                  className: "flex items-center w-full",
+                  style: { gap: T12.sp3xl, padding: `${T12.sp3xl} ${T12.sp6xl}` },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      "p",
+                      {
+                        className: "flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+                        style: {
+                          color: T12.primary,
+                          fontFamily: T12.font,
+                          fontSize: T12.fsLg,
+                          fontWeight: 600,
+                          lineHeight: T12.lhLg
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "shrink-0 cursor-pointer", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons11.SiconClose, { className: "w-6 h-6", color: T12.primary }) })
+                  ]
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              "div",
-              {
-                className: "w-full",
-                style: {
-                  height: "1px",
-                  backgroundColor: "var(--alias-border-divider)"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-h-0 w-full overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
               "div",
               {
-                className: "flex flex-col w-full",
-                style: { gap: "var(--spacing-3xl)" },
+                className: "flex flex-col items-start w-full",
+                style: { padding: `${T12.sp3xl} ${T12.sp6xl}`, gap: T12.sp3xl },
                 children: [
+                  (subject || description) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col w-full min-w-0", children: [
+                    subject?.name?.trim() && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      "span",
+                      {
+                        className: "truncate",
+                        style: { ...bodyText, fontWeight: 500, color: T12.primary },
+                        children: subject.name
+                      }
+                    ),
+                    subject && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      "span",
+                      {
+                        className: "truncate",
+                        style: {
+                          ...bodyText,
+                          color: subject.name?.trim() ? T12.muted : T12.primary
+                        },
+                        children: subject.email
+                      }
+                    ),
+                    subject && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { ...bodyText, color: T12.tertiary, marginTop: T12.spXs }, children: [
+                      "Used this cycle: ",
+                      formatCredits(usedNow),
+                      " credits"
+                    ] }),
+                    description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { ...bodyText, color: T12.tertiary }, children: description })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col w-full", style: { gap: T12.spXs }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center w-full", style: { gap: T12.sp3xl }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        import_ui9.ScPairtext,
+                        {
+                          type: "radio",
+                          content: "",
+                          checked: !unlimited,
+                          onChange: () => {
+                            if (!saving) setUnlimited(false);
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                        "div",
+                        {
+                          className: "flex-1 min-w-0 flex items-center",
+                          style: {
+                            background: T12.fillPlus,
+                            height: 48,
+                            borderRadius: T12.r3xl,
+                            padding: `${T12.spXl} ${T12.sp3xl}`,
+                            gap: T12.spXl,
+                            border: hint ? `1px solid ${T12.error}` : "1px solid transparent",
+                            opacity: unlimited ? 0.6 : 1
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                              "input",
+                              {
+                                inputMode: "numeric",
+                                "aria-label": "Credit limit",
+                                "aria-invalid": hint ? true : void 0,
+                                placeholder: "Enter credits",
+                                value: raw,
+                                disabled: saving,
+                                onFocus: () => setUnlimited(false),
+                                onChange: (e) => {
+                                  setRaw(cleanCreditLimitInput(e.target.value));
+                                  setTouched(true);
+                                  setServerHint(null);
+                                },
+                                className: "flex-1 min-w-0",
+                                style: {
+                                  ...bodyText,
+                                  background: "transparent",
+                                  border: "none",
+                                  outline: "none",
+                                  color: T12.primary,
+                                  padding: 0
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "shrink-0", style: { ...bodyText, color: T12.muted }, children: [
+                              "credits / ",
+                              unit
+                            ] })
+                          ]
+                        }
+                      )
+                    ] }),
+                    hint && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { role: "alert", style: { ...bodyText, color: T12.error }, children: hint })
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_ui9.ScPairtext,
+                    {
+                      type: "radio",
+                      content: "Unlimited usage",
+                      checked: unlimited,
+                      onChange: () => {
+                        if (saving) return;
+                        setUnlimited(true);
+                        setServerHint(null);
+                      }
+                    }
+                  ),
+                  onRemove && removeHint && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { style: { ...bodyText, color: T12.muted }, children: removeHint })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "shrink-0 w-full relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-0 pointer-events-none",
+                  style: { borderTop: `1px solid ${T12.borderDivider}` }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                "div",
+                {
+                  className: "flex items-center w-full",
+                  style: {
+                    padding: `${T12.sp3xl} ${T12.sp6xl}`,
+                    justifyContent: onRemove ? "space-between" : "flex-end"
+                  },
+                  children: [
+                    onRemove && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_ui9.ScButton,
+                      {
+                        text: removeLabel,
+                        variant: "error",
+                        size: "md",
+                        state: saving ? "disabled" : "default",
+                        onClick: saving ? void 0 : () => void handleRemove()
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_ui9.ScButton,
+                      {
+                        text: "Save",
+                        variant: "primary",
+                        size: "md",
+                        state: canSave ? "default" : "disabled",
+                        onClick: canSave ? () => void handleSave() : void 0
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/per-user-limits-view.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var T13 = {
+  primary: "var(--alias-text---icons-primary)",
+  muted: "var(--alias-text---icons-muted)",
+  fillPlus: "var(--alias-fill-neutral-neutralplus)",
+  surfaceBase: "var(--alias-surface-base)",
+  borderSubtle: "var(--alias-border-subtle)",
+  font: "var(--font-family-font-family-body)",
+  fsSm: "var(--font-size-font-size-sm)",
+  fsXl: "var(--font-size-font-size-xl)",
+  lhSm: "var(--line-height-line-height-sm)",
+  lhXl: "var(--line-height-line-height-xl)",
+  spMd: "var(--spacing-md)",
+  sp3xl: "var(--spacing-3xl)",
+  sp6xl: "var(--spacing-6xl)",
+  r3xl: "var(--radius-3xl)"
+};
+var COLUMNS = "minmax(200px, 1fr) 140px 150px 190px 80px";
+var cellText = {
+  fontFamily: T13.font,
+  fontSize: T13.fsSm,
+  lineHeight: T13.lhSm,
+  color: T13.primary
+};
+function LimitRow({
+  row,
+  unit,
+  onEdit
+}) {
+  const name = row.member.user.name?.trim() ?? "";
+  const email = row.member.user.email || "";
+  const displayIdent = name || email.split("@")[0] || "user";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      style: {
+        borderBottom: `1px solid ${T13.borderSubtle}`,
+        display: "grid",
+        gridTemplateColumns: COLUMNS,
+        alignItems: "center",
+        padding: `8px ${T13.sp3xl}`,
+        gap: 24
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = T13.fillPlus;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center min-w-0", style: { gap: T13.spMd }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ProfileAvatar, { name: displayIdent, size: 32 }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col min-w-0", children: [
+            name && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate", style: { ...cellText, fontWeight: 500 }, children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "span",
+              {
+                className: "truncate",
+                style: { ...cellText, color: name ? T13.muted : T13.primary },
+                children: email || "\u2014"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: cellText, children: formatCredits(row.used) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: cellText, children: formatCredits(row.lastCycleUsed) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: cellText, children: describeMemberLimit(row, unit) }),
+          limitSourceLabel(row) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { ...cellText, color: T13.muted }, children: limitSourceLabel(row) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center", children: onEdit && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui10.ScButton, { text: "Edit", variant: "secondary", size: "sm", onClick: onEdit }) })
+      ]
+    }
+  );
+}
+function PerUserLimitsView() {
+  const { api, workspace, toast } = useSettingsAdapters();
+  const workspaceId = workspace.current?.id ?? null;
+  const [members, setMembers] = (0, import_react16.useState)([]);
+  const [limits, setLimits] = (0, import_react16.useState)(null);
+  const [loading, setLoading] = (0, import_react16.useState)(true);
+  const [failed, setFailed] = (0, import_react16.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react16.useState)("");
+  const [editing, setEditing] = (0, import_react16.useState)(null);
+  const [editingDefault, setEditingDefault] = (0, import_react16.useState)(false);
+  const latestLoad = (0, import_react16.useRef)(0);
+  const load = (0, import_react16.useCallback)(async ({ refresh = false } = {}) => {
+    const loadId = ++latestLoad.current;
+    if (!api.fetchMemberCreditLimits) {
+      setLoading(false);
+      setFailed(true);
+      return;
+    }
+    const [nextMembers, nextLimits] = await Promise.all([
+      api.fetchMembers().catch(() => null),
+      api.fetchMemberCreditLimits().catch(() => null)
+    ]);
+    if (loadId !== latestLoad.current) return;
+    if (refresh && (!nextMembers || !nextLimits)) {
+      toast.error("Couldn't refresh usage limits. Reopen this page to see the latest.");
+      return;
+    }
+    setFailed(!nextMembers || !nextLimits);
+    setMembers(nextMembers ?? []);
+    setLimits(nextLimits);
+    setLoading(false);
+  }, [api, toast]);
+  (0, import_react16.useEffect)(() => {
+    setLoading(true);
+    setFailed(false);
+    setMembers([]);
+    setLimits(null);
+    setEditing(null);
+    setEditingDefault(false);
+    setSearchQuery("");
+    void load();
+  }, [workspaceId]);
+  (0, import_react16.useEffect)(
+    () => () => {
+      latestLoad.current += 1;
+    },
+    []
+  );
+  const unit = creditCycleUnit(limits?.cycle);
+  const rows = (0, import_react16.useMemo)(
+    () => joinMembersWithLimits(members, limits),
+    [members, limits]
+  );
+  const filtered = (0, import_react16.useMemo)(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return rows;
+    return rows.filter(
+      ({ member }) => (member.user.name ?? "").toLowerCase().includes(q) || (member.user.email ?? "").toLowerCase().includes(q)
+    );
+  }, [rows, searchQuery]);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        className: "flex items-center justify-center w-full",
+        style: {
+          backgroundColor: T13.surfaceBase,
+          borderRadius: T13.r3xl,
+          padding: T13.sp6xl
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
+          {
+            className: "animate-spin",
+            style: {
+              width: 24,
+              height: 24,
+              borderRadius: "var(--radius-full)",
+              border: "2px solid var(--alias-border-subtle)",
+              borderTopColor: "var(--alias-text---icons-primary)"
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 w-full", style: { gap: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col shrink-0", style: { gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "span",
+        {
+          style: {
+            fontFamily: T13.font,
+            fontSize: T13.fsXl,
+            fontWeight: 500,
+            lineHeight: T13.lhXl,
+            color: T13.primary
+          },
+          children: "Per-user usage limits"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { ...cellText, color: T13.muted }, children: "Set a default for every member, and override it for individuals." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "div",
+      {
+        className: "flex items-center justify-between shrink-0 w-full",
+        style: {
+          gap: 12,
+          padding: 16,
+          backgroundColor: T13.surfaceBase,
+          border: `1px solid ${T13.borderSubtle}`,
+          borderRadius: T13.r3xl
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col min-w-0", style: { gap: 4 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { ...cellText, fontWeight: 500 }, children: "Default limit per member" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { style: { ...cellText, color: T13.muted }, children: failed ? "\u2014" : describeDefaultLimit(limits, unit) })
+          ] }),
+          api.setDefaultCreditLimit && !failed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_ui10.ScButton,
+            {
+              text: "Edit",
+              variant: "secondary",
+              size: "sm",
+              onClick: () => setEditingDefault(true)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      MemberListToolbar,
+      {
+        activeTab: "active",
+        onTabChange: () => {
+        },
+        activeLabel: "Members",
+        activeCount: failed ? null : filtered.length,
+        searchQuery,
+        onSearchChange: setSearchQuery
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      MemberListFrame,
+      {
+        contentMinWidth: 860,
+        header: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: COLUMNS,
+              gap: 24,
+              padding: "8px 16px",
+              fontSize: 11,
+              color: T13.muted,
+              textTransform: "uppercase"
+            },
+            children: ["Name", "Used this cycle", "Last cycle's usage", "Limit", "Actions"].map(
+              (label) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label }, label)
+            )
+          }
+        ),
+        isEmpty: failed || filtered.length === 0,
+        emptyText: failed ? "Couldn't load usage limits. Try again later." : searchQuery.trim() ? "No members match your search" : "No members yet",
+        children: filtered.map((row) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          LimitRow,
+          {
+            row,
+            unit,
+            onEdit: api.setMemberCreditLimit ? () => setEditing(row) : void 0
+          },
+          row.userId
+        ))
+      }
+    ),
+    editing && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      MemberCreditLimitModal,
+      {
+        open: true,
+        resetKey: editing.userId,
+        subject: { name: editing.member.user.name, email: editing.member.user.email },
+        used: editing.used,
+        initialLimit: editing.limit,
+        isSet: editing.hasLimit,
+        unit,
+        onSave: (limit) => api.setMemberCreditLimit({ userId: editing.userId, limit }),
+        onRemove: editing.hasLimit && api.removeMemberCreditLimit ? () => api.removeMemberCreditLimit(editing.userId) : void 0,
+        removeLabel: limits?.default ? "Use default" : "Remove",
+        removeHint: limits?.default ? `Falls back to the default: ${describeDefaultLimit(limits, unit)}` : "No default is set, so the member becomes unlimited.",
+        onClose: () => setEditing(null),
+        onSaved: () => void load({ refresh: true }),
+        onStale: () => void load({ refresh: true })
+      }
+    ),
+    editingDefault && api.setDefaultCreditLimit && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      MemberCreditLimitModal,
+      {
+        open: true,
+        title: "Default usage limit",
+        description: "Applies to every member without their own limit, including new members.",
+        used: 0,
+        initialLimit: limits?.default?.limit ?? null,
+        isSet: Boolean(limits?.default),
+        unit,
+        onSave: (limit) => api.setDefaultCreditLimit(limit),
+        saveSuccessMessage: "Default usage limit updated",
+        onClose: () => setEditingDefault(false),
+        onSaved: () => void load({ refresh: true })
+      }
+    )
+  ] });
+}
+
+// src/billing-content.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DEFAULT_TOPUP_SERVICE = "catalogix";
+var PRIMARY_COLOR2 = "var(--alias-text---icons-primary)";
+var MUTED_COLOR = "var(--alias-text---icons-muted)";
+function formatDate2(iso) {
+  try {
+    return new Date(iso).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  } catch {
+    return iso;
+  }
+}
+function formatCurrency(cents, currency) {
+  if (currency === "inr") {
+    return `\u20B9${(cents / 100).toFixed(2)}`;
+  }
+  return `$${(cents / 100).toFixed(2)}`;
+}
+function getCurrencySymbolByCountry(country) {
+  return country?.trim().toUpperCase() === "IN" ? "\u20B9" : "$";
+}
+function formatCredits2(n) {
+  return n.toLocaleString("en-US");
+}
+function formatNextBillingDateLabel(iso) {
+  if (iso) {
+    const parsed = new Date(iso);
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+      });
+    }
+  }
+  const fallback = /* @__PURE__ */ new Date();
+  fallback.setMonth(fallback.getMonth() + 1);
+  return fallback.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function formatEffectiveDateLabel(value) {
+  if (value == null) return "";
+  const parsed = typeof value === "number" ? new Date(value < 1e10 ? value * 1e3 : value) : new Date(value);
+  if (Number.isNaN(parsed.getTime())) return "";
+  return parsed.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function useIsLightTheme() {
+  const read = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "Light";
+  const [isLight, setIsLight] = (0, import_react17.useState)(read);
+  (0, import_react17.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const target = document.documentElement;
+    const observer = new MutationObserver(() => setIsLight(read()));
+    observer.observe(target, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    setIsLight(read());
+    return () => observer.disconnect();
+  }, []);
+  return isLight;
+}
+function UpdateSubscriptionModal({
+  open,
+  currentPlanName,
+  currentPlanAmount,
+  nextPlanName,
+  nextPlanAmount,
+  nextBillingDateLabel,
+  loading,
+  onClose,
+  onProceed
+}) {
+  const isLight = useIsLightTheme();
+  const modalSurface = isLight ? "#ffffff" : "var(--alias-surface-base)";
+  const cardBorder = isLight ? "1px solid var(--alias-border-subtle)" : "1px solid var(--alias-border-divider)";
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center",
+      style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "div",
+        {
+          className: "flex flex-col w-full max-w-xl",
+          style: {
+            backgroundColor: modalSurface,
+            borderRadius: "var(--radius-3xl)",
+            border: "1px solid var(--alias-border-subtle)",
+            padding: "var(--spacing-6xl)",
+            gap: "var(--spacing-6xl)",
+            maxHeight: "90vh",
+            overflowY: "auto"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "p",
+                {
+                  className: "flex-1 min-w-0",
+                  style: {
+                    fontFamily: "var(--font-family-font-family-display)",
+                    fontSize: "var(--font-size-font-size-xxl)",
+                    fontWeight: 600,
+                    lineHeight: "var(--line-height-line-height-xxl)",
+                    color: "var(--alias-text---icons-primary)"
+                  },
+                  children: "Update Subscription"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  style: { background: "transparent", border: "none" },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons12.SiconClose, { className: "w-6 h-6", color: MUTED_COLOR })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "div",
+              {
+                className: "w-full",
+                style: {
+                  height: "1px",
+                  backgroundColor: "var(--alias-border-divider)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "div",
+              {
+                className: "flex flex-col w-full",
+                style: { gap: "var(--spacing-3xl)" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "p",
                     {
                       style: {
@@ -7931,7 +8684,7 @@ function UpdateSubscriptionModal({
                       children: "Current billing plan"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     "div",
                     {
                       className: "flex items-center w-full",
@@ -7942,7 +8695,7 @@ function UpdateSubscriptionModal({
                         padding: "var(--spacing-3xl)"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                           "p",
                           {
                             className: "flex-1 min-w-0",
@@ -7956,8 +8709,8 @@ function UpdateSubscriptionModal({
                             children: currentPlanName || "Free"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-end", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-end", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             "p",
                             {
                               style: {
@@ -7970,7 +8723,7 @@ function UpdateSubscriptionModal({
                               children: currentPlanAmount
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             "p",
                             {
                               style: {
@@ -7987,7 +8740,7 @@ function UpdateSubscriptionModal({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "div",
                     {
                       className: "flex items-center justify-center",
@@ -7998,10 +8751,10 @@ function UpdateSubscriptionModal({
                         backgroundColor: "var(--alias-fill-neutral-neutral)",
                         border: cardBorder
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons11.SiconDoubleArrow, { className: "w-4 h-4", color: MUTED_COLOR })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons12.SiconDoubleArrow, { className: "w-4 h-4", color: MUTED_COLOR })
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     "p",
                     {
                       style: {
@@ -8017,7 +8770,7 @@ function UpdateSubscriptionModal({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     "div",
                     {
                       className: "flex items-center w-full",
@@ -8028,7 +8781,7 @@ function UpdateSubscriptionModal({
                         padding: "var(--spacing-3xl)"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                           "p",
                           {
                             className: "flex-1 min-w-0",
@@ -8042,8 +8795,8 @@ function UpdateSubscriptionModal({
                             children: nextPlanName || "Pro"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-end", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-end", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             "p",
                             {
                               style: {
@@ -8056,7 +8809,7 @@ function UpdateSubscriptionModal({
                               children: nextPlanAmount
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             "p",
                             {
                               style: {
@@ -8073,7 +8826,7 @@ function UpdateSubscriptionModal({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "div",
                     {
                       className: "w-full",
@@ -8083,8 +8836,8 @@ function UpdateSubscriptionModal({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center w-full", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center w-full", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "p",
                       {
                         className: "flex-1 min-w-0",
@@ -8098,7 +8851,7 @@ function UpdateSubscriptionModal({
                         children: "Amount Due Today"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "p",
                       {
                         style: {
@@ -8115,7 +8868,7 @@ function UpdateSubscriptionModal({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "button",
               {
                 type: "button",
@@ -8130,7 +8883,7 @@ function UpdateSubscriptionModal({
                 },
                 disabled: loading,
                 onClick: onProceed,
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "span",
                   {
                     style: {
@@ -8170,7 +8923,7 @@ function PlansView({
   const workspaceCurrencySymbol = getCurrencySymbolByCountry(
     workspace?.country
   );
-  const allPlans = (0, import_react15.useMemo)(() => {
+  const allPlans = (0, import_react17.useMemo)(() => {
     if (products.length > 0) {
       return products.flatMap(
         (product) => product.prices.filter((price) => Boolean(price.metadata?.credits)).map((price) => ({
@@ -8188,7 +8941,7 @@ function PlansView({
     }
     return [];
   }, [products, currentPlanId]);
-  const sortedPlans = (0, import_react15.useMemo)(
+  const sortedPlans = (0, import_react17.useMemo)(
     () => [...allPlans].sort((a, b) => a.amount - b.amount),
     [allPlans]
   );
@@ -8205,8 +8958,8 @@ function PlansView({
   const currentPlan = sortedPlans.find((plan) => plan.isCurrent) ?? freePlan;
   const middlePlans = sortedPlans.filter((plan) => plan.amount > 0);
   const currentPlanAmount = currentPlan?.amount ?? 0;
-  const [selectedMiddlePlanKey, setSelectedMiddlePlanKey] = (0, import_react15.useState)("");
-  (0, import_react15.useEffect)(() => {
+  const [selectedMiddlePlanKey, setSelectedMiddlePlanKey] = (0, import_react17.useState)("");
+  (0, import_react17.useEffect)(() => {
     if (middlePlans.length === 0) {
       setSelectedMiddlePlanKey("");
       return;
@@ -8220,9 +8973,9 @@ function PlansView({
   const isMiddleActionLoading = Boolean(
     selectedMiddlePlan && actionInFlight === selectedMiddlePlan.key
   );
-  const [isPlanSelectorOpen, setIsPlanSelectorOpen] = (0, import_react15.useState)(false);
-  const planDropdownRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const [isPlanSelectorOpen, setIsPlanSelectorOpen] = (0, import_react17.useState)(false);
+  const planDropdownRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (!isPlanSelectorOpen) return;
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -8240,8 +8993,8 @@ function PlansView({
   const isCurrentWithDowngrade = Boolean(
     currentPlan?.isCurrent && downgradeScheduled
   );
-  const [showUpgradeConfirmModal, setShowUpgradeConfirmModal] = (0, import_react15.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  const [showUpgradeConfirmModal, setShowUpgradeConfirmModal] = (0, import_react17.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: "flex flex-col items-start relative size-full overflow-y-auto",
@@ -8252,12 +9005,12 @@ function PlansView({
         backgroundSize: "24px 24px"
       },
       children: [
-        !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "flex items-center justify-end shrink-0 w-full",
             style: { gap: "var(--spacing-lg)" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               "div",
               {
                 className: "flex items-center shrink-0 cursor-pointer",
@@ -8271,8 +9024,8 @@ function PlansView({
                 },
                 onClick: onBack,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons11.SiconLeft, { className: "w-4 h-4", color: MUTED_COLOR }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons12.SiconLeft, { className: "w-4 h-4", color: MUTED_COLOR }),
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "span",
                     {
                       style: {
@@ -8290,14 +9043,14 @@ function PlansView({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: "grid w-full grid-cols-1 md:grid-cols-2 xl:grid-cols-3 items-stretch",
             style: { gap: "var(--spacing-8xl)" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScPlanCard,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScPlanCard,
                 {
                   planName: freePlan?.planName || "Free",
                   price: stripMonthly(freePlan?.price || `${workspaceCurrencySymbol}0`),
@@ -8326,8 +9079,8 @@ function PlansView({
                   className: "h-full"
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScPlanCard,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScPlanCard,
                 {
                   planName: "Pro",
                   price: stripMonthly(selectedMiddlePlan?.price || "\u2014"),
@@ -8347,7 +9100,7 @@ function PlansView({
                     setShowUpgradeConfirmModal(true);
                   },
                   onIncreaseCredits: () => setIsPlanSelectorOpen((prev) => !prev),
-                  creditsDropdown: isPlanSelectorOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  creditsDropdown: isPlanSelectorOpen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "div",
                     {
                       ref: planDropdownRef,
@@ -8364,7 +9117,7 @@ function PlansView({
                       },
                       children: middlePlans.map((plan) => {
                         const selected = plan.key === selectedMiddlePlanKey;
-                        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                           "button",
                           {
                             type: "button",
@@ -8382,7 +9135,7 @@ function PlansView({
                               setIsPlanSelectorOpen(false);
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 "span",
                                 {
                                   className: "flex-1 min-w-0 truncate",
@@ -8396,7 +9149,7 @@ function PlansView({
                                   children: plan.credits
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 "span",
                                 {
                                   style: {
@@ -8419,8 +9172,8 @@ function PlansView({
                   className: "h-full"
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScPlanCard,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScPlanCard,
                 {
                   planName: "Enterprise",
                   type: "custom",
@@ -8436,8 +9189,8 @@ function PlansView({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_ui9.ScPlanComparison,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_ui11.ScPlanComparison,
           {
             layout: "table",
             columns: [...PLAN_COMPARISON_COLUMNS],
@@ -8446,7 +9199,7 @@ function PlansView({
             highlightColumnIndex: 1
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           UpdateSubscriptionModal,
           {
             open: showUpgradeConfirmModal,
@@ -8481,7 +9234,7 @@ function BillingTabBar({
   activeTab,
   onTabChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: "flex items-center shrink-0 relative",
@@ -8493,8 +9246,8 @@ function BillingTabBar({
         border: "0.5px solid var(--alias-border-subtle)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_ui9.ScTabComp,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_ui11.ScTabComp,
           {
             text: "Invoice history",
             type: "text-only",
@@ -8503,8 +9256,8 @@ function BillingTabBar({
             style: { flex: 1 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_ui9.ScTabComp,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_ui11.ScTabComp,
           {
             text: "Usage logs",
             type: "text-only",
@@ -8565,7 +9318,7 @@ function InvoiceHistoryTable({
     }
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         className: "flex items-center justify-center w-full",
@@ -8574,7 +9327,7 @@ function InvoiceHistoryTable({
           borderRadius: "var(--radius-3xl)",
           padding: "var(--spacing-6xl)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "animate-spin",
@@ -8590,7 +9343,7 @@ function InvoiceHistoryTable({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: "flex-1 min-h-0 w-full relative",
@@ -8601,7 +9354,7 @@ function InvoiceHistoryTable({
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             style: {
@@ -8610,15 +9363,15 @@ function InvoiceHistoryTable({
               zIndex: 1,
               backgroundColor: "var(--alias-surface-base)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui9.ScBillingHistoryHeader, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui11.ScBillingHistoryHeader, {})
           }
         ),
-        invoices.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        invoices.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "flex items-center justify-center w-full",
             style: { padding: "var(--spacing-6xl)" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "span",
               {
                 style: {
@@ -8633,8 +9386,8 @@ function InvoiceHistoryTable({
             )
           }
         ),
-        invoices.map((inv) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_ui9.ScBillingHistoryTableList,
+        invoices.map((inv) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_ui11.ScBillingHistoryTableList,
           {
             invoiceNumber: inv.transactionId ? `# ${inv.transactionId.slice(0, 16).toUpperCase()}` : "# INV-UNKNOWN",
             amount: inv.amountPaid != null ? `${currencySymbol}${inv.amountPaid.toFixed(2)}` : `${currencySymbol}${(inv.amount / 100).toFixed(2)}`,
@@ -8654,7 +9407,7 @@ function UsageLogsTable({
   loading
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         className: "flex items-center justify-center w-full",
@@ -8663,7 +9416,7 @@ function UsageLogsTable({
           borderRadius: "var(--radius-3xl)",
           padding: "var(--spacing-6xl)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "animate-spin",
@@ -8679,7 +9432,7 @@ function UsageLogsTable({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: "flex-1 min-h-0 w-full relative",
@@ -8690,7 +9443,7 @@ function UsageLogsTable({
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             style: {
@@ -8705,40 +9458,40 @@ function UsageLogsTable({
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScHeader,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScHeader,
                 {
                   text: "App",
                   state: "none",
                   style: { flex: 1, alignItems: "flex-start", gap: "0.25rem" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScHeader,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScHeader,
                 {
                   text: "Activity",
                   state: "none",
                   style: { flex: 1, alignItems: "flex-start", gap: "0.25rem" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScHeader,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScHeader,
                 {
                   text: "Used by",
                   state: "none",
                   style: { flexShrink: 0, width: "7.5rem" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScHeader,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScHeader,
                 {
                   text: "Date",
                   state: "none",
                   style: { flexShrink: 0, width: "7.5rem" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_ui9.ScHeader,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_ui11.ScHeader,
                 {
                   text: "Credits",
                   state: "none",
@@ -8752,12 +9505,12 @@ function UsageLogsTable({
             ]
           }
         ),
-        logs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        logs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "flex items-center justify-center w-full",
             style: { padding: "var(--spacing-6xl)" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "span",
               {
                 style: {
@@ -8789,7 +9542,7 @@ function UsageLogsTable({
             overflow: "hidden",
             whiteSpace: "nowrap"
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
             "div",
             {
               style: {
@@ -8801,11 +9554,11 @@ function UsageLogsTable({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { ...rowCellRegular, flex: 1 }, children: app }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { ...rowCellRegular, flex: 1 }, children: activity }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { ...rowCellRegular, width: "7.5rem" }, children: userName }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { ...rowCellRegular, width: "7.5rem" }, children: formatDate2(log.createdAt) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { ...rowCellRegular, flex: 1 }, children: app }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { ...rowCellRegular, flex: 1 }, children: activity }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { ...rowCellRegular, width: "7.5rem" }, children: userName }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { ...rowCellRegular, width: "7.5rem" }, children: formatDate2(log.createdAt) }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "div",
                   {
                     style: {
@@ -8835,7 +9588,9 @@ function UsageLogsTable({
 function BillingContent({
   embedded = false,
   showPlans: showPlansProp,
-  onShowPlansChange
+  onShowPlansChange,
+  showPerUserLimits: showPerUserLimitsProp,
+  onShowPerUserLimitsChange
 } = {}) {
   const { auth, workspace, api, toast, navigation } = useSettingsAdapters();
   const user = auth.user;
@@ -8847,35 +9602,41 @@ function BillingContent({
     if (typeof window === "undefined") return "";
     return `${window.location.origin}${window.location.pathname}`;
   };
-  const [activeTab, setActiveTab] = (0, import_react15.useState)("invoice");
-  const [showPlansInternal, setShowPlansInternal] = (0, import_react15.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react17.useState)("invoice");
+  const [showPlansInternal, setShowPlansInternal] = (0, import_react17.useState)(false);
   const showPlans = showPlansProp ?? showPlansInternal;
   const setShowPlans = (next) => {
     if (onShowPlansChange) onShowPlansChange(next);
     else setShowPlansInternal(next);
   };
-  const [showExportModal, setShowExportModal] = (0, import_react15.useState)(false);
-  const [showBuyCreditsModal, setShowBuyCreditsModal] = (0, import_react15.useState)(false);
-  const [subscription, setSubscription] = (0, import_react15.useState)(null);
-  const [availableCredits, setAvailableCredits] = (0, import_react15.useState)(null);
-  const [products, setProducts] = (0, import_react15.useState)([]);
-  const [invoices, setInvoices] = (0, import_react15.useState)([]);
-  const [totalCredits, setTotalCredits] = (0, import_react15.useState)(null);
-  const [usageLogs, setUsageLogs] = (0, import_react15.useState)([]);
-  const [userMap, setUserMap] = (0, import_react15.useState)({});
-  const [customPlanCredits, setCustomPlanCredits] = (0, import_react15.useState)(
+  const [showPerUserLimitsInternal, setShowPerUserLimitsInternal] = (0, import_react17.useState)(false);
+  const showPerUserLimits = (showPerUserLimitsProp ?? showPerUserLimitsInternal) && Boolean(api.fetchMemberCreditLimits);
+  const setShowPerUserLimits = (next) => {
+    if (onShowPerUserLimitsChange) onShowPerUserLimitsChange(next);
+    else setShowPerUserLimitsInternal(next);
+  };
+  const [showExportModal, setShowExportModal] = (0, import_react17.useState)(false);
+  const [showBuyCreditsModal, setShowBuyCreditsModal] = (0, import_react17.useState)(false);
+  const [subscription, setSubscription] = (0, import_react17.useState)(null);
+  const [availableCredits, setAvailableCredits] = (0, import_react17.useState)(null);
+  const [products, setProducts] = (0, import_react17.useState)([]);
+  const [invoices, setInvoices] = (0, import_react17.useState)([]);
+  const [totalCredits, setTotalCredits] = (0, import_react17.useState)(null);
+  const [usageLogs, setUsageLogs] = (0, import_react17.useState)([]);
+  const [userMap, setUserMap] = (0, import_react17.useState)({});
+  const [customPlanCredits, setCustomPlanCredits] = (0, import_react17.useState)(
     null
   );
-  const [planActionInFlight, setPlanActionInFlight] = (0, import_react15.useState)(
+  const [planActionInFlight, setPlanActionInFlight] = (0, import_react17.useState)(
     null
   );
-  const [buyCreditsInFlight, setBuyCreditsInFlight] = (0, import_react15.useState)(false);
-  const [loadingBilling, setLoadingBilling] = (0, import_react15.useState)(false);
-  const [billingOverviewLoaded, setBillingOverviewLoaded] = (0, import_react15.useState)(false);
-  const [loadingTable, setLoadingTable] = (0, import_react15.useState)(false);
-  const [showInitialLoader, setShowInitialLoader] = (0, import_react15.useState)(true);
-  const [initialFetchTriggered, setInitialFetchTriggered] = (0, import_react15.useState)(false);
-  const logBillingEvent = (0, import_react15.useCallback)(
+  const [buyCreditsInFlight, setBuyCreditsInFlight] = (0, import_react17.useState)(false);
+  const [loadingBilling, setLoadingBilling] = (0, import_react17.useState)(false);
+  const [billingOverviewLoaded, setBillingOverviewLoaded] = (0, import_react17.useState)(false);
+  const [loadingTable, setLoadingTable] = (0, import_react17.useState)(false);
+  const [showInitialLoader, setShowInitialLoader] = (0, import_react17.useState)(true);
+  const [initialFetchTriggered, setInitialFetchTriggered] = (0, import_react17.useState)(false);
+  const logBillingEvent = (0, import_react17.useCallback)(
     async (eventName, description, metadata) => {
       if (!api.sendBillingEvent) return;
       try {
@@ -8885,7 +9646,7 @@ function BillingContent({
     },
     [api]
   );
-  const ensureWorkspaceOnBilling = (0, import_react15.useCallback)(async () => {
+  const ensureWorkspaceOnBilling = (0, import_react17.useCallback)(async () => {
     if (!api.createWorkspaceOnBilling) return false;
     try {
       await api.createWorkspaceOnBilling({ serviceNames: [] });
@@ -8894,7 +9655,7 @@ function BillingContent({
       return false;
     }
   }, [api]);
-  const fetchBillingOverview = (0, import_react15.useCallback)(async () => {
+  const fetchBillingOverview = (0, import_react17.useCallback)(async () => {
     setLoadingBilling(true);
     setBillingOverviewLoaded(false);
     try {
@@ -8928,7 +9689,7 @@ function BillingContent({
       setBillingOverviewLoaded(true);
     }
   }, [api, workspace.current?.country]);
-  const fetchUserMap = (0, import_react15.useCallback)(async () => {
+  const fetchUserMap = (0, import_react17.useCallback)(async () => {
     try {
       const members = await api.fetchMembers();
       if (members && members.length) {
@@ -8941,7 +9702,7 @@ function BillingContent({
     } catch {
     }
   }, [api]);
-  const fetchTableData = (0, import_react15.useCallback)(
+  const fetchTableData = (0, import_react17.useCallback)(
     async (tab) => {
       setLoadingTable(true);
       try {
@@ -8969,7 +9730,7 @@ function BillingContent({
     },
     [api]
   );
-  const handlePlanAction = (0, import_react15.useCallback)(
+  const handlePlanAction = (0, import_react17.useCallback)(
     async ({ productId, priceId, planName: planName2 }) => {
       if (!workspaceId || !user?.id || !user.email) {
         toast.error("Missing account details for plan update");
@@ -9038,7 +9799,7 @@ function BillingContent({
       toast
     ]
   );
-  const handleCancelDowngrade = (0, import_react15.useCallback)(async () => {
+  const handleCancelDowngrade = (0, import_react17.useCallback)(async () => {
     if (!api.revertDowngrade) {
       toast.error("Cancel downgrade is not available in this workspace");
       return;
@@ -9064,7 +9825,7 @@ function BillingContent({
       setPlanActionInFlight(null);
     }
   }, [api, fetchBillingOverview, logBillingEvent, toast]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setShowInitialLoader(true);
     setInitialFetchTriggered(false);
     setBillingOverviewLoaded(false);
@@ -9074,22 +9835,22 @@ function BillingContent({
     setTotalCredits(null);
     setCustomPlanCredits(null);
   }, [workspaceId]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setInitialFetchTriggered(true);
     fetchBillingOverview();
     fetchUserMap();
   }, [fetchBillingOverview, fetchUserMap]);
   const usage = workspace.current?.usage ?? null;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     void logBillingEvent("billing_page_viewed", "Billing page viewed", {
       action: "view"
     });
   }, [logBillingEvent]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setInitialFetchTriggered(true);
     fetchTableData(activeTab);
   }, [activeTab, fetchTableData]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!showInitialLoader) return;
     if (!initialFetchTriggered) return;
     if (!billingOverviewLoaded) return;
@@ -9119,7 +9880,7 @@ function BillingContent({
     preDowngradePlan?.credits ?? currentPlanPrice?.metadata?.credits
   );
   const currentPlanCredits = Number.isFinite(planCreditsFromPrice) ? planCreditsFromPrice : customPlanCredits;
-  const planCreditsText = currentPlanCredits != null ? `${formatCredits(currentPlanCredits)} credits` : "";
+  const planCreditsText = currentPlanCredits != null ? `${formatCredits2(currentPlanCredits)} credits` : "";
   const scheduledDowngradeDateLabel = formatEffectiveDateLabel(
     subscription?.scheduledDowngradeEffectiveDate
   );
@@ -9128,7 +9889,7 @@ function BillingContent({
   const usedCredits = availableCredits != null && totalCredits != null ? Math.max(0, totalCredits - availableCredits) : null;
   const progressPct = usedCredits != null && totalCredits != null && totalCredits > 0 ? Math.min(100, Math.round(usedCredits / totalCredits * 100)) : 0;
   const remainingPct = 100 - progressPct;
-  const usageText = usedCredits != null ? formatCredits(usedCredits) : availableCredits != null ? `${formatCredits(availableCredits)} available` : customPlanCredits != null ? `${formatCredits(customPlanCredits)} credits` : "\u2014";
+  const usageText = usedCredits != null ? formatCredits2(usedCredits) : availableCredits != null ? `${formatCredits2(availableCredits)} available` : customPlanCredits != null ? `${formatCredits2(customPlanCredits)} credits` : "\u2014";
   const handleExport = async (startDate, endDate) => {
     const end = new Date(endDate);
     end.setHours(23, 59, 59, 999);
@@ -9256,7 +10017,7 @@ function BillingContent({
     }
   }
   if (showInitialLoader) {
-    const loader = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    const loader = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         className: "flex items-center justify-center w-full",
@@ -9266,7 +10027,7 @@ function BillingContent({
           border: "1px solid var(--alias-border-subtle)",
           borderRadius: "var(--radius-3xl)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "animate-spin",
@@ -9282,7 +10043,7 @@ function BillingContent({
       }
     );
     if (embedded) return loader;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 h-full min-h-0 min-w-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 h-full min-h-0 min-w-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         className: "flex flex-col items-start relative size-full overflow-y-auto",
@@ -9293,7 +10054,7 @@ function BillingContent({
           backgroundSize: "24px 24px"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-between shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-between shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "p",
             {
               className: "flex-1 min-w-0 truncate",
@@ -9312,8 +10073,47 @@ function BillingContent({
       }
     ) });
   }
+  if (showPerUserLimits) {
+    const limitsView = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 h-full min-h-0 min-w-0 w-full", style: { gap: 16 }, children: [
+      !onShowPerUserLimitsChange && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "div",
+        {
+          className: "flex items-center shrink-0 cursor-pointer",
+          style: {
+            gap: "var(--spacing-sm)",
+            padding: "var(--spacing-xs) var(--spacing-lg)",
+            borderRadius: "var(--radius-xl)",
+            height: 32,
+            width: "fit-content",
+            border: "1px solid var(--alias-border-subtle)",
+            backgroundColor: "var(--alias-surface-base)"
+          },
+          onClick: () => setShowPerUserLimits(false),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons12.SiconLeft, { className: "w-4 h-4", color: "var(--alias-text---icons-muted)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "span",
+              {
+                style: {
+                  fontFamily: "var(--font-family-font-family-body)",
+                  fontSize: "var(--font-size-font-size-sm)",
+                  fontWeight: 500,
+                  lineHeight: "var(--line-height-line-height-sm)",
+                  color: "var(--alias-text---icons-muted)"
+                },
+                children: "Back to billing"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PerUserLimitsView, {})
+    ] });
+    if (embedded) return limitsView;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 h-full min-h-0 min-w-0 relative", children: limitsView });
+  }
   if (showPlans) {
-    const plansView = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    const plansView = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       PlansView,
       {
         onBack: () => setShowPlans(false),
@@ -9330,17 +10130,17 @@ function BillingContent({
       }
     );
     if (embedded) return plansView;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 h-full min-h-0 min-w-0 relative", children: plansView });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 h-full min-h-0 min-w-0 relative", children: plansView });
   }
-  const billingInnerContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  const billingInnerContent = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         className: "flex items-start shrink-0 w-full",
         style: { gap: 12 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_ui9.ScPlanDetailsCard,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_ui11.ScPlanDetailsCard,
             {
               planName,
               planCredits: planCreditsText,
@@ -9364,12 +10164,12 @@ function BillingContent({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_ui9.ScCreditsUsageCard,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_ui11.ScCreditsUsageCard,
             {
               usageLabel: "Credits used",
               usageText,
-              remainingText: availableCredits != null ? `${formatCredits(availableCredits)} (${remainingPct}%) Remaining` : `${remainingPct}% Remaining`,
+              remainingText: availableCredits != null ? `${formatCredits2(availableCredits)} (${remainingPct}%) Remaining` : `${remainingPct}% Remaining`,
               buyButtonText: "Buy credits",
               buyButtonState: isFreePlan ? "disabled" : "default",
               buyButtonHoverText: isFreePlan ? "Pro plan required" : void 0,
@@ -9389,7 +10189,7 @@ function BillingContent({
         ]
       }
     ),
-    usage ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    usage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         className: "grid shrink-0 w-full",
@@ -9398,9 +10198,9 @@ function BillingContent({
           gridTemplateColumns: "repeat(auto-fit, minmax(18rem, 1fr))"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui9.ScUsageMeterCard, { kind: "storage", plan: usage.plan, status: usage.storage }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_ui9.ScUsageMeterCard,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui11.ScUsageMeterCard, { kind: "storage", plan: usage.plan, status: usage.storage }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_ui11.ScUsageMeterCard,
             {
               kind: "bandwidth",
               plan: usage.plan,
@@ -9411,9 +10211,60 @@ function BillingContent({
         ]
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between shrink-0 w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BillingTabBar, { activeTab, onTabChange: setActiveTab }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    api.fetchMemberCreditLimits ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        className: "flex items-center justify-between shrink-0 w-full",
+        style: {
+          gap: 12,
+          padding: 16,
+          backgroundColor: "var(--alias-surface-base)",
+          border: "1px solid var(--alias-border-subtle)",
+          borderRadius: "var(--radius-3xl)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col min-w-0", style: { gap: 4 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "span",
+              {
+                style: {
+                  fontFamily: "var(--font-family-font-family-body)",
+                  fontSize: "var(--font-size-font-size-sm)",
+                  fontWeight: 500,
+                  lineHeight: "var(--line-height-line-height-sm)",
+                  color: "var(--alias-text---icons-primary)"
+                },
+                children: "Per-user usage limits"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "span",
+              {
+                style: {
+                  fontFamily: "var(--font-family-font-family-body)",
+                  fontSize: "var(--font-size-font-size-sm)",
+                  lineHeight: "var(--line-height-line-height-sm)",
+                  color: "var(--alias-text---icons-muted)"
+                },
+                children: "Set a default and per-member limits on credits per billing cycle"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_ui11.ScButton,
+            {
+              text: "Manage",
+              variant: "secondary",
+              size: "md",
+              onClick: () => setShowPerUserLimits(true)
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between shrink-0 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BillingTabBar, { activeTab, onTabChange: setActiveTab }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           className: "flex items-center shrink-0 cursor-pointer",
@@ -9425,8 +10276,8 @@ function BillingContent({
           },
           onClick: () => setShowExportModal(true),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons11.SiconDownload, { className: "w-5 h-5", color: PRIMARY_COLOR2 }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons12.SiconDownload, { className: "w-5 h-5", color: PRIMARY_COLOR2 }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "span",
               {
                 style: {
@@ -9443,14 +10294,14 @@ function BillingContent({
         }
       )
     ] }),
-    activeTab === "invoice" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    activeTab === "invoice" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       InvoiceHistoryTable,
       {
         invoices,
         loading: loadingTable,
         workspaceCountry: workspace.current?.country
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       UsageLogsTable,
       {
         logs: usageLogs,
@@ -9458,7 +10309,7 @@ function BillingContent({
         loading: loadingTable
       }
     ),
-    showExportModal && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    showExportModal && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ExportDateModal,
       {
         title: activeTab === "invoice" ? "Export invoices" : "Export log",
@@ -9466,7 +10317,7 @@ function BillingContent({
         onExport: handleExport
       }
     ),
-    showBuyCreditsModal && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    showBuyCreditsModal && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       BuyCreditsModal,
       {
         country: workspace.current?.country,
@@ -9481,7 +10332,7 @@ function BillingContent({
     )
   ] });
   if (embedded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         className: "flex flex-col flex-1 min-w-0 min-h-0 w-full",
@@ -9490,7 +10341,7 @@ function BillingContent({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 h-full min-h-0 min-w-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 h-full min-h-0 min-w-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: "flex flex-col items-start relative size-full overflow-y-auto",
@@ -9501,7 +10352,7 @@ function BillingContent({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-between shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-between shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "p",
           {
             className: "flex-1 min-w-0 truncate",
@@ -9522,10 +10373,10 @@ function BillingContent({
 }
 
 // src/tokens-content.tsx
-var import_react16 = require("react");
-var import_ui10 = require("@streamoid/ui");
-var import_icons12 = require("@streamoid/icons");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_ui12 = require("@streamoid/ui");
+var import_icons13 = require("@streamoid/icons");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var EXPIRY_OPTIONS = [
   { label: "30 days", value: "30d" },
   { label: "60 days", value: "60d" },
@@ -9545,7 +10396,7 @@ function isExpired(expiresAt) {
   if (!expiresAt) return false;
   return /* @__PURE__ */ new Date() > new Date(expiresAt);
 }
-var T12 = {
+var T14 = {
   primary: "var(--alias-text---icons-primary)",
   muted: "var(--alias-text---icons-muted)",
   warning: "var(--alias-text---icons-warning)",
@@ -9567,9 +10418,9 @@ var T12 = {
 };
 function CreateTokenModal({ onClose, onCreated }) {
   const { api, toast } = useSettingsAdapters();
-  const [name, setName] = (0, import_react16.useState)("");
-  const [expiry, setExpiry] = (0, import_react16.useState)("never");
-  const [loading, setLoading] = (0, import_react16.useState)(false);
+  const [name, setName] = (0, import_react18.useState)("");
+  const [expiry, setExpiry] = (0, import_react18.useState)("never");
+  const [loading, setLoading] = (0, import_react18.useState)(false);
   async function handleCreate() {
     if (!name.trim()) {
       toast.error("Token name is required.");
@@ -9585,96 +10436,96 @@ function CreateTokenModal({ onClose, onCreated }) {
       setLoading(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: "fixed inset-0 flex items-center justify-center",
       style: { backgroundColor: "rgba(0,0,0,0.6)", zIndex: 1e3 },
       onClick: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
         {
           className: "flex flex-col items-start relative",
           style: {
-            backgroundColor: T12.neutral825,
-            borderRadius: T12.r4xl,
+            backgroundColor: T14.neutral825,
+            borderRadius: T14.r4xl,
             width: "min(40vw, 500px)",
-            border: `1px solid ${T12.borderSubtle}`
+            border: `1px solid ${T14.borderSubtle}`
           },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "div",
               {
                 className: "relative shrink-0 w-full",
-                style: { borderBottom: `1px solid ${T12.borderDivider}` },
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                style: { borderBottom: `1px solid ${T14.borderDivider}` },
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                   "div",
                   {
                     className: "flex items-center w-full",
-                    style: { padding: `${T12.spXl} ${T12.sp3xl}` },
+                    style: { padding: `${T14.spXl} ${T14.sp3xl}` },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "p",
                         {
                           className: "flex-1 min-w-0 truncate",
                           style: {
-                            fontFamily: T12.fontDisplay,
-                            fontSize: T12.fsLg,
+                            fontFamily: T14.fontDisplay,
+                            fontSize: T14.fsLg,
                             fontWeight: 600,
-                            lineHeight: T12.lhLg,
-                            color: T12.primary,
+                            lineHeight: T14.lhLg,
+                            color: T14.primary,
                             margin: 0
                           },
                           children: "Create New Token"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons12.SiconClose, { className: "w-6 h-6", color: T12.primary }) })
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons13.SiconClose, { className: "w-6 h-6", color: T14.primary }) })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "div",
               {
                 className: "flex flex-col items-start shrink-0 w-full",
-                style: { padding: T12.sp3xl, gap: T12.sp3xl },
+                style: { padding: T14.sp3xl, gap: T14.sp3xl },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                     "div",
                     {
                       className: "flex flex-col items-start shrink-0 w-full",
                       style: { gap: "var(--spacing-xs)" },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center shrink-0 w-full", style: { height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center shrink-0 w-full", style: { height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                           "span",
                           {
                             style: {
-                              fontFamily: T12.font,
-                              fontSize: T12.fsSm,
+                              fontFamily: T14.font,
+                              fontSize: T14.fsSm,
                               fontWeight: 400,
-                              lineHeight: T12.lhSm,
-                              color: T12.muted
+                              lineHeight: T14.lhSm,
+                              color: T14.muted
                             },
                             children: "Token name"
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                           "div",
                           {
                             className: "shrink-0 w-full",
                             style: {
-                              backgroundColor: T12.neutral875,
-                              borderRadius: T12.rXl,
+                              backgroundColor: T14.neutral875,
+                              borderRadius: T14.rXl,
                               height: 48
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                               "div",
                               {
                                 className: "flex items-center size-full",
-                                style: { padding: `var(--spacing-lg) ${T12.spXl}` },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                style: { padding: `var(--spacing-lg) ${T14.spXl}` },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                                   "input",
                                   {
                                     type: "text",
@@ -9683,11 +10534,11 @@ function CreateTokenModal({ onClose, onCreated }) {
                                     placeholder: "Name your token...",
                                     className: "flex-1 min-w-0 bg-transparent border-none outline-none",
                                     style: {
-                                      fontFamily: T12.font,
-                                      fontSize: T12.fsSm,
+                                      fontFamily: T14.font,
+                                      fontSize: T14.fsSm,
                                       fontWeight: 400,
-                                      lineHeight: T12.lhSm,
-                                      color: name ? T12.primary : T12.neutral500
+                                      lineHeight: T14.lhSm,
+                                      color: name ? T14.primary : T14.neutral500
                                     }
                                   }
                                 )
@@ -9698,27 +10549,27 @@ function CreateTokenModal({ onClose, onCreated }) {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                     "div",
                     {
                       className: "flex flex-col items-start shrink-0 w-full",
                       style: { gap: "var(--spacing-xs)" },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center shrink-0 w-full", style: { height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center shrink-0 w-full", style: { height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                           "span",
                           {
                             style: {
-                              fontFamily: T12.font,
-                              fontSize: T12.fsSm,
+                              fontFamily: T14.font,
+                              fontSize: T14.fsSm,
                               fontWeight: 400,
-                              lineHeight: T12.lhSm,
-                              color: T12.muted
+                              lineHeight: T14.lhSm,
+                              color: T14.muted
                             },
                             children: "Expiry"
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { display: "flex", gap: "var(--spacing-md)", flexWrap: "wrap" }, children: EXPIRY_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                          import_ui10.ScButton,
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: "flex", gap: "var(--spacing-md)", flexWrap: "wrap" }, children: EXPIRY_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                          import_ui12.ScButton,
                           {
                             text: opt.label,
                             variant: expiry === opt.value ? "secondary" : "outline",
@@ -9730,8 +10581,8 @@ function CreateTokenModal({ onClose, onCreated }) {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    import_ui10.ScButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_ui12.ScButton,
                     {
                       text: loading ? "Creating..." : "Create token",
                       variant: "secondary",
@@ -9752,7 +10603,7 @@ function CreateTokenModal({ onClose, onCreated }) {
 }
 function TokenCreatedModal({ token, onClose }) {
   const { toast } = useSettingsAdapters();
-  const [copied, setCopied] = (0, import_react16.useState)(false);
+  const [copied, setCopied] = (0, import_react18.useState)(false);
   function handleCopy() {
     navigator.clipboard.writeText(token.token).then(() => {
       setCopied(true);
@@ -9762,101 +10613,101 @@ function TokenCreatedModal({ token, onClose }) {
       toast.error("Failed to copy token. Please copy it manually.");
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: "fixed inset-0 flex items-center justify-center",
       style: { backgroundColor: "rgba(0,0,0,0.6)", zIndex: 1e3 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
         {
           className: "flex flex-col items-start relative",
           style: {
-            backgroundColor: T12.neutral825,
-            borderRadius: T12.r4xl,
+            backgroundColor: T14.neutral825,
+            borderRadius: T14.r4xl,
             width: "min(40vw, 500px)",
-            border: `1px solid ${T12.borderSubtle}`
+            border: `1px solid ${T14.borderSubtle}`
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "div",
               {
                 className: "relative shrink-0 w-full",
-                style: { borderBottom: `1px solid ${T12.borderDivider}` },
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                style: { borderBottom: `1px solid ${T14.borderDivider}` },
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                   "div",
                   {
                     className: "flex items-center w-full",
-                    style: { padding: `${T12.spXl} ${T12.sp3xl}` },
+                    style: { padding: `${T14.spXl} ${T14.sp3xl}` },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "p",
                         {
                           className: "flex-1 min-w-0 truncate",
                           style: {
-                            fontFamily: T12.fontDisplay,
-                            fontSize: T12.fsLg,
+                            fontFamily: T14.fontDisplay,
+                            fontSize: T14.fsLg,
                             fontWeight: 600,
-                            lineHeight: T12.lhLg,
-                            color: T12.primary,
+                            lineHeight: T14.lhLg,
+                            color: T14.primary,
                             margin: 0
                           },
                           children: "Token Created"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons12.SiconClose, { className: "w-6 h-6", color: T12.primary }) })
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons13.SiconClose, { className: "w-6 h-6", color: T14.primary }) })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "div",
               {
                 className: "flex flex-col items-start shrink-0 w-full",
-                style: { padding: T12.sp3xl, gap: T12.sp3xl },
+                style: { padding: T14.sp3xl, gap: T14.sp3xl },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "p",
                     {
                       style: {
-                        fontFamily: T12.font,
-                        fontSize: T12.fsSm,
+                        fontFamily: T14.font,
+                        fontSize: T14.fsSm,
                         fontWeight: 400,
-                        lineHeight: T12.lhSm,
-                        color: T12.warning,
+                        lineHeight: T14.lhSm,
+                        color: T14.warning,
                         margin: 0
                       },
                       children: "Copy this token now. You won't be able to see it again."
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "div",
                     {
                       className: "w-full",
                       style: {
-                        backgroundColor: T12.neutral875,
-                        borderRadius: T12.rXl,
-                        padding: `var(--spacing-lg) ${T12.spXl}`
+                        backgroundColor: T14.neutral875,
+                        borderRadius: T14.rXl,
+                        padding: `var(--spacing-lg) ${T14.spXl}`
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "code",
                         {
                           style: {
                             fontFamily: "monospace",
-                            fontSize: T12.fsSm,
-                            color: T12.primary,
+                            fontSize: T14.fsSm,
+                            color: T14.primary,
                             wordBreak: "break-all",
-                            lineHeight: T12.lhSm
+                            lineHeight: T14.lhSm
                           },
                           children: token.token
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "var(--spacing-md)", width: "100%" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      import_ui10.ScButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "var(--spacing-md)", width: "100%" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_ui12.ScButton,
                       {
                         text: copied ? "Copied!" : "Copy token",
                         variant: "secondary",
@@ -9865,8 +10716,8 @@ function TokenCreatedModal({ token, onClose }) {
                         className: "flex-1"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      import_ui10.ScButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_ui12.ScButton,
                       {
                         text: "Done",
                         variant: "outline",
@@ -9893,22 +10744,22 @@ function TokensContent({
   onCreateOpenChange
 } = {}) {
   const { api, toast } = useSettingsAdapters();
-  const [tokens, setTokens] = (0, import_react16.useState)([]);
-  const [loading, setLoading] = (0, import_react16.useState)(true);
-  const [showRevoked, setShowRevoked] = (0, import_react16.useState)(false);
-  const [showCreateModal, setShowCreateModal] = (0, import_react16.useState)(false);
-  const [createdToken, setCreatedToken] = (0, import_react16.useState)(null);
-  const [deletingId, setDeletingId] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [tokens, setTokens] = (0, import_react18.useState)([]);
+  const [loading, setLoading] = (0, import_react18.useState)(true);
+  const [showRevoked, setShowRevoked] = (0, import_react18.useState)(false);
+  const [showCreateModal, setShowCreateModal] = (0, import_react18.useState)(false);
+  const [createdToken, setCreatedToken] = (0, import_react18.useState)(null);
+  const [deletingId, setDeletingId] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     if (showRevokedOverride !== void 0) setShowRevoked(showRevokedOverride);
   }, [showRevokedOverride]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (createOpenOverride) {
       setShowCreateModal(true);
       onCreateOpenChange?.(false);
     }
   }, [createOpenOverride, onCreateOpenChange]);
-  const fetchTokens = (0, import_react16.useCallback)(async () => {
+  const fetchTokens = (0, import_react18.useCallback)(async () => {
     setLoading(true);
     try {
       const data = await api.fetchTokens({ showRevoked });
@@ -9919,7 +10770,7 @@ function TokensContent({
       setLoading(false);
     }
   }, [api, showRevoked]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     fetchTokens();
   }, [fetchTokens]);
   async function handleRevoke(tokenId) {
@@ -9957,8 +10808,8 @@ function TokensContent({
     setCreatedToken(token);
     fetchTokens();
   }
-  const tokensInnerContent = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    !embedded && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  const tokensInnerContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    !embedded && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         style: {
@@ -9970,8 +10821,8 @@ function TokensContent({
           gap: "var(--spacing-md)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_ui10.ScButton,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_ui12.ScButton,
             {
               text: showRevoked ? "Hide Revoked" : "Show Revoked",
               variant: "outline",
@@ -9979,21 +10830,21 @@ function TokensContent({
               onClick: () => setShowRevoked((v) => !v)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_ui10.ScButton,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_ui12.ScButton,
             {
               text: "New Token",
               variant: "primary",
               size: "md",
               styleVariant: "icon-left",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons12.SiconPlus, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons13.SiconPlus, {}),
               onClick: () => setShowCreateModal(true)
             }
           )
         ]
       }
     ),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -10007,7 +10858,7 @@ function TokensContent({
         },
         children: "Loading tokens..."
       }
-    ) : tokens.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    ) : tokens.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         style: {
@@ -10019,8 +10870,8 @@ function TokensContent({
           gap: "var(--spacing-xl)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SiconKey_default, { size: 48, color: "var(--alias-text---icons-muted)", strokeWidth: 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SiconKey_default, { size: 48, color: "var(--alias-text---icons-muted)", strokeWidth: 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "p",
             {
               style: {
@@ -10034,7 +10885,7 @@ function TokensContent({
           )
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TokenTable,
       {
         tokens,
@@ -10043,14 +10894,14 @@ function TokensContent({
         onDelete: handleDelete
       }
     ),
-    showCreateModal && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    showCreateModal && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       CreateTokenModal,
       {
         onClose: () => setShowCreateModal(false),
         onCreated: handleTokenCreated
       }
     ),
-    createdToken && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    createdToken && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TokenCreatedModal,
       {
         token: createdToken,
@@ -10059,7 +10910,7 @@ function TokensContent({
     )
   ] });
   if (embedded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: "flex flex-col flex-1 min-w-0 min-h-0 w-full",
@@ -10068,7 +10919,7 @@ function TokensContent({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 min-h-0 min-w-0 relative", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 min-h-0 min-w-0 relative", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: "flex flex-col items-stretch size-full overflow-y-auto",
@@ -10079,7 +10930,7 @@ function TokensContent({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             style: {
@@ -10090,7 +10941,7 @@ function TokensContent({
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "p",
                 {
                   style: {
@@ -10104,9 +10955,9 @@ function TokensContent({
                   children: "API Tokens"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "var(--spacing-md)", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  import_ui10.ScButton,
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "var(--spacing-md)", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  import_ui12.ScButton,
                   {
                     text: showRevoked ? "Hide Revoked" : "Show Revoked",
                     variant: "outline",
@@ -10114,14 +10965,14 @@ function TokensContent({
                     onClick: () => setShowRevoked((v) => !v)
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  import_ui10.ScButton,
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  import_ui12.ScButton,
                   {
                     text: "New Token",
                     variant: "primary",
                     size: "md",
                     styleVariant: "icon-left",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons12.SiconPlus, {}),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons13.SiconPlus, {}),
                     onClick: () => setShowCreateModal(true)
                   }
                 )
@@ -10135,7 +10986,7 @@ function TokensContent({
   ) });
 }
 function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       style: {
@@ -10146,7 +10997,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
         overflow: "hidden",
         width: "100%"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
         {
           style: {
@@ -10159,7 +11010,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
             minHeight: 0
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "div",
               {
                 style: {
@@ -10170,7 +11021,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                   borderBottom: "0.5px solid var(--alias-border-subtle)",
                   flexShrink: 0
                 },
-                children: ["Name", "Token", "Expires", "Last Used", "Created", "Actions"].map((h) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                children: ["Name", "Token", "Expires", "Last Used", "Created", "Actions"].map((h) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "span",
                   {
                     style: {
@@ -10186,7 +11037,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                 ))
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" }, children: tokens.map((token, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" }, children: tokens.map((token, idx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "div",
               {
                 style: {
@@ -10197,8 +11048,8 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                   borderBottom: idx < tokens.length - 1 ? "0.5px solid var(--alias-border-subtle)" : "none"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--spacing-md)", minWidth: 0 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--spacing-md)", minWidth: 0 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       "span",
                       {
                         style: {
@@ -10214,9 +11065,9 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                         children: token.name
                       }
                     ),
-                    token.status === "revoked" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui10.ScBadges, { text: "Revoked", variant: "error" })
+                    token.status === "revoked" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui12.ScBadges, { text: "Revoked", variant: "error" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                     "code",
                     {
                       style: {
@@ -10239,7 +11090,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "span",
                     {
                       style: {
@@ -10251,7 +11102,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                       children: formatDate3(token.expiresAt)
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "span",
                     {
                       style: {
@@ -10263,7 +11114,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                       children: token.lastUsedAt ? formatDate3(token.lastUsedAt) : "Never"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "span",
                     {
                       style: {
@@ -10275,9 +11126,9 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                       children: formatDate3(token.createdAt)
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "var(--spacing-sm)" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      import_ui10.ScButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "var(--spacing-sm)" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_ui12.ScButton,
                       {
                         text: deletingId === token._id ? "..." : "Revoke",
                         variant: "outline",
@@ -10286,8 +11137,8 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
                         onClick: () => onRevoke(token._id)
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      import_ui10.ScButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_ui12.ScButton,
                       {
                         text: deletingId === token._id ? "..." : "Delete",
                         variant: "error",
@@ -10309,7 +11160,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
 }
 
 // src/settings-content.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function deriveInitials(name) {
   return name.split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("") || "WS";
 }
@@ -10345,8 +11196,8 @@ function SettingsNavItem({
   onTabChange
 }) {
   const isActive = activeTab === tab;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SettingsTooltip, { content: TAB_DESCRIPTIONS[tab], placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_ui11.ScSidebarMenu,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsTooltip, { content: TAB_DESCRIPTIONS[tab], placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_ui13.ScSidebarMenu,
     {
       icon: icon(isActive ? PRIMARY_COLOR3 : MUTED_COLOR2),
       text: label,
@@ -10374,7 +11225,7 @@ function SettingsNav({
   hasOrganization,
   isWorkspaceAdmin
 }) {
-  const item = (tab, icon) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const item = (tab, icon) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     SettingsNavItem,
     {
       tab,
@@ -10384,7 +11235,7 @@ function SettingsNav({
       onTabChange
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: "flex flex-col items-start shrink-0 relative overflow-y-auto",
@@ -10407,33 +11258,33 @@ function SettingsNav({
         gap: "var(--spacing-5xl)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Account" }),
-          item("profile", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconUser, { className: "w-5 h-5", color })),
-          item("workspaceList", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconSwitch, { className: "w-5 h-5", color }))
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Account" }),
+          item("profile", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconUser, { className: "w-5 h-5", color })),
+          item("workspaceList", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconSwitch, { className: "w-5 h-5", color }))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui11.ScHDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { title: workspaceName ?? void 0, style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Workspace" }),
-          item("workspace", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconSettings, { className: "w-5 h-5", color })),
-          item("workspaceMembers", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconTeam, { className: "w-5 h-5", color })),
-          isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-            item("billing", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconBilling, { className: "w-5 h-5", color })),
-            item("apikey", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SiconKey_default, { className: "w-5 h-5", color }))
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui13.ScHDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { title: workspaceName ?? void 0, style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Workspace" }),
+          item("workspace", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconSettings, { className: "w-5 h-5", color })),
+          item("workspaceMembers", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconTeam, { className: "w-5 h-5", color })),
+          isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+            item("billing", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconBilling, { className: "w-5 h-5", color })),
+            item("apikey", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SiconKey_default, { className: "w-5 h-5", color }))
           ] }),
-          !isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { style: { margin: "4px 12px", fontSize: 12, lineHeight: "18px", color: MUTED_COLOR2 }, children: "Contact your workspace admin for credit top-ups and billing history." })
+          !isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { margin: "4px 12px", fontSize: 12, lineHeight: "18px", color: MUTED_COLOR2 }, children: "Contact your workspace admin for credit top-ups and billing history." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui11.ScHDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: hasOrganization ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Organization" }),
-          item("organization", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconTeam, { className: "w-5 h-5", color })),
-          item("organizationWorkspaces", (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconWorkspace, { className: "w-5 h-5", color }))
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui13.ScHDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: hasOrganization ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Organization" }),
+          item("organization", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconTeam, { className: "w-5 h-5", color })),
+          item("organizationWorkspaces", (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconWorkspace, { className: "w-5 h-5", color }))
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           SettingsNavItem,
           {
             tab: "organization",
             label: "Organization",
-            icon: (color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconGlobe, { className: "w-5 h-5", color }),
+            icon: (color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconGlobe, { className: "w-5 h-5", color }),
             activeTab,
             onTabChange
           }
@@ -10445,7 +11296,7 @@ function SettingsNav({
 var SPECIALIZATION_ICON_SIZE = 24;
 function SpecializationIcon({ iconUrl }) {
   if (iconUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "img",
       {
         src: iconUrl,
@@ -10458,8 +11309,8 @@ function SpecializationIcon({ iconUrl }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_icons13.SiconBolt,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_icons14.SiconBolt,
     {
       style: {
         width: SPECIALIZATION_ICON_SIZE,
@@ -10490,10 +11341,10 @@ function SpecializationDropdown({
   disabled
 }) {
   const { auth } = useSettingsAdapters();
-  const [open, setOpen] = (0, import_react17.useState)(false);
-  const containerRef = (0, import_react17.useRef)(null);
-  const [options, setOptions] = (0, import_react17.useState)([]);
-  (0, import_react17.useEffect)(() => {
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const containerRef = (0, import_react19.useRef)(null);
+  const [options, setOptions] = (0, import_react19.useState)([]);
+  (0, import_react19.useEffect)(() => {
     if (!auth.getSpecializations) return;
     let cancelled = false;
     auth.getSpecializations().then((items) => {
@@ -10513,7 +11364,7 @@ function SpecializationDropdown({
       cancelled = true;
     };
   }, [auth]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!open) return;
     function handleMouseDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -10531,15 +11382,15 @@ function SpecializationDropdown({
     };
   }, [open]);
   const selected = options.find((o) => o.id === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       ref: containerRef,
       className: "w-full",
       style: { position: "relative" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             className: "spec-dropdown-trigger",
@@ -10547,16 +11398,16 @@ function SpecializationDropdown({
             onClick: () => !disabled && setOpen((v) => !v),
             "aria-haspopup": "listbox",
             "aria-expanded": open,
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-              import_ui12.ScTextField,
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_ui14.ScTextField,
               {
                 label: "Specialization",
                 labelGroup: "label",
                 value: selected?.label ?? "",
                 placeholderFilled: "Select specialization",
                 tfGroup: "icon-left-right",
-                tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SpecializationIcon, { iconUrl: selected?.iconUrl }),
-                tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SpecializationIcon, { iconUrl: selected?.iconUrl }),
+                tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "span",
                   {
                     style: {
@@ -10566,7 +11417,7 @@ function SpecializationDropdown({
                       transform: open ? "rotate(180deg)" : "none",
                       transition: "transform 120ms ease-out"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconDown, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconDown, {})
                   }
                 ),
                 className: "sc-text-field-full-width",
@@ -10577,7 +11428,7 @@ function SpecializationDropdown({
             )
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        open && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             role: "listbox",
@@ -10599,11 +11450,11 @@ function SpecializationDropdown({
             },
             children: options.map((opt) => {
               const isActive = opt.id === value;
-              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                import_ui11.ScMenuOptions,
+              return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_ui13.ScMenuOptions,
                 {
                   text: opt.label,
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SpecializationIcon, { iconUrl: opt.iconUrl }),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SpecializationIcon, { iconUrl: opt.iconUrl }),
                   hover: isActive ? "true" : "false",
                   variant: "default",
                   role: "option",
@@ -10628,9 +11479,9 @@ function LanguageDropdown({
   onChange,
   disabled
 }) {
-  const [open, setOpen] = (0, import_react17.useState)(false);
-  const containerRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const containerRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     if (!open) return;
     function handleMouseDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -10647,15 +11498,15 @@ function LanguageDropdown({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       ref: containerRef,
       className: "w-full",
       style: { position: "relative" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             className: "spec-dropdown-trigger",
@@ -10663,15 +11514,15 @@ function LanguageDropdown({
             onClick: () => !disabled && setOpen((v) => !v),
             "aria-haspopup": "listbox",
             "aria-expanded": open,
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-              import_ui12.ScTextField,
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_ui14.ScTextField,
               {
                 label: "Language",
                 labelGroup: "label",
                 value: userLanguageLabel(value),
                 placeholderFilled: "Select language",
                 tfGroup: "icon-right",
-                tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "span",
                   {
                     style: {
@@ -10681,7 +11532,7 @@ function LanguageDropdown({
                       transform: open ? "rotate(180deg)" : "none",
                       transition: "transform 120ms ease-out"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconDown, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconDown, {})
                   }
                 ),
                 className: "sc-text-field-full-width",
@@ -10692,7 +11543,7 @@ function LanguageDropdown({
             )
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        open && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             role: "listbox",
@@ -10718,11 +11569,11 @@ function LanguageDropdown({
             },
             children: USER_LANGUAGES.map((lang) => {
               const isActive = lang.code === value;
-              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                import_ui11.ScMenuOptions,
+              return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_ui13.ScMenuOptions,
                 {
                   text: lang.label,
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {}),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {}),
                   hover: isActive ? "true" : "false",
                   variant: "default",
                   role: "option",
@@ -10748,28 +11599,28 @@ function ProfileTab() {
   const derivedName = user?.name ?? "";
   const derivedSpec = user?.userSpecialization ?? "";
   const derivedLanguage = user?.language?.trim() || DEFAULT_USER_LANGUAGE;
-  const [fullName, setFullName] = (0, import_react17.useState)(derivedName);
-  const [selectedSpec, setSelectedSpec] = (0, import_react17.useState)(derivedSpec);
-  const [selectedLanguage, setSelectedLanguage] = (0, import_react17.useState)(derivedLanguage);
-  const [saving, setSaving] = (0, import_react17.useState)(false);
-  const [imageSaving, setImageSaving] = (0, import_react17.useState)(false);
-  const [imagePreview, setImagePreview] = (0, import_react17.useState)(
+  const [fullName, setFullName] = (0, import_react19.useState)(derivedName);
+  const [selectedSpec, setSelectedSpec] = (0, import_react19.useState)(derivedSpec);
+  const [selectedLanguage, setSelectedLanguage] = (0, import_react19.useState)(derivedLanguage);
+  const [saving, setSaving] = (0, import_react19.useState)(false);
+  const [imageSaving, setImageSaving] = (0, import_react19.useState)(false);
+  const [imagePreview, setImagePreview] = (0, import_react19.useState)(
     void 0
   );
-  const fileInputRef = (0, import_react17.useRef)(null);
+  const fileInputRef = (0, import_react19.useRef)(null);
   const profileDisplayName = fullName || user?.email || "User";
   const profileImage = imagePreview ?? getUserProfileImage(user);
   const profileInitial = profileDisplayName.charAt(0).toUpperCase();
   const disableAllActions = saving || imageSaving;
   const dirty = fullName.trim() !== derivedName || selectedSpec !== derivedSpec || selectedLanguage !== derivedLanguage;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setFullName(derivedName);
     setImagePreview(void 0);
   }, [derivedName]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setSelectedSpec(derivedSpec);
   }, [derivedSpec]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setSelectedLanguage(derivedLanguage);
   }, [derivedLanguage]);
   const handleSave = async () => {
@@ -10851,13 +11702,13 @@ function ProfileTab() {
     }
     auth.clearAuth();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: "flex flex-col items-start flex-1 min-w-0 min-h-0 overflow-y-auto",
       style: { gap: "var(--spacing-3xl)" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             className: "sc-profile-card flex flex-col items-start w-full",
@@ -10870,13 +11721,13 @@ function ProfileTab() {
               gap: "var(--spacing-6xl)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "div",
                 {
                   className: "flex items-center shrink-0 w-full",
                   style: { gap: 24, flexWrap: "wrap" },
                   children: [
-                    profileImage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    profileImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "img",
                       {
                         src: profileImage,
@@ -10889,7 +11740,7 @@ function ProfileTab() {
                           flexShrink: 0
                         }
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
                         "aria-label": "Profile",
@@ -10902,7 +11753,7 @@ function ProfileTab() {
                           border: "1px solid var(--alias-border-subtle)",
                           flexShrink: 0
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           "span",
                           {
                             style: {
@@ -10917,7 +11768,7 @@ function ProfileTab() {
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "input",
                       {
                         ref: fileInputRef,
@@ -10927,17 +11778,17 @@ function ProfileTab() {
                         onChange: handleImageChange
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       "div",
                       {
                         className: "flex items-center",
                         style: { gap: 12, flexWrap: "wrap" },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                            import_ui13.ScButton,
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            import_ui15.ScButton,
                             {
                               text: "Upload photo",
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconUpload, { className: "w-5 h-5", color: PRIMARY_COLOR3 }),
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconUpload, { className: "w-5 h-5", color: PRIMARY_COLOR3 }),
                               styleVariant: "icon-left",
                               variant: "outline",
                               size: "md",
@@ -10945,12 +11796,12 @@ function ProfileTab() {
                               onClick: handleUploadClick
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                            import_ui13.ScButton,
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            import_ui15.ScButton,
                             {
                               text: "Remove photo",
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                                import_icons13.SiconDelete,
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                import_icons14.SiconDelete,
                                 {
                                   className: "w-5 h-5",
                                   color: PRIMARY_COLOR3
@@ -10969,16 +11820,16 @@ function ProfileTab() {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui11.ScHDivider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui13.ScHDivider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "div",
                 {
                   className: "sc-profile-fields flex flex-col min-w-0 w-full",
                   style: { gap: 24 },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "grid", width: "100%", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 240px), 1fr))", gap: 24 }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 min-w-0", style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                        import_ui12.ScTextField,
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "grid", width: "100%", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 240px), 1fr))", gap: 24 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 min-w-0", style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        import_ui14.ScTextField,
                         {
                           label: "Full Name",
                           labelGroup: "label",
@@ -10991,7 +11842,7 @@ function ProfileTab() {
                           onChange: (e) => setFullName(e.target.value)
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         SpecializationDropdown,
                         {
                           value: selectedSpec,
@@ -11000,8 +11851,8 @@ function ProfileTab() {
                         }
                       ) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         LanguageDropdown,
                         {
                           value: selectedLanguage,
@@ -11009,10 +11860,10 @@ function ProfileTab() {
                           disabled: disableAllActions
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 min-w-0" })
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 min-w-0" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                      import_ui12.ScTextField,
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      import_ui14.ScTextField,
                       {
                         label: "Email ID",
                         labelGroup: "label",
@@ -11020,8 +11871,8 @@ function ProfileTab() {
                         value: user?.email ?? "",
                         placeholderFilled: user?.email ?? "chris@kepler.com",
                         tfGroup: "icon-right",
-                        tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                          import_icons13.SiconLock,
+                        tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          import_icons14.SiconLock,
                           {
                             className: "w-6 h-6",
                             color: "var(--alias-text---icons-primary)"
@@ -11032,13 +11883,13 @@ function ProfileTab() {
                         readOnly: true
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
                         className: "flex items-center w-full",
                         style: { justifyContent: "flex-end", paddingTop: "var(--spacing-md)" },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                          import_ui13.ScButton,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          import_ui15.ScButton,
                           {
                             text: saving ? "Saving..." : "Save changes",
                             variant: "secondary",
@@ -11055,7 +11906,7 @@ function ProfileTab() {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             className: "flex items-center w-full",
@@ -11067,8 +11918,8 @@ function ProfileTab() {
               gap: "var(--spacing-3xl)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col min-w-0 flex-1", style: { gap: "var(--spacing-xs)" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col min-w-0 flex-1", style: { gap: "var(--spacing-xs)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "span",
                   {
                     style: {
@@ -11081,7 +11932,7 @@ function ProfileTab() {
                     children: "Session"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "span",
                   {
                     className: "truncate",
@@ -11096,8 +11947,8 @@ function ProfileTab() {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                import_ui13.ScButton,
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_ui15.ScButton,
                 {
                   text: "Log out",
                   variant: "outline",
@@ -11160,11 +12011,11 @@ function WorkspaceListTab({
   const currentOrganization = organizations.find(
     (org) => org._id && org._id === currentWorkspace?.organizationId
   );
-  const [page, setPage] = (0, import_react17.useState)(0);
-  const [serverPage, setServerPage] = (0, import_react17.useState)(null);
-  const [serverFailed, setServerFailed] = (0, import_react17.useState)(false);
+  const [page, setPage] = (0, import_react19.useState)(0);
+  const [serverPage, setServerPage] = (0, import_react19.useState)(null);
+  const [serverFailed, setServerFailed] = (0, import_react19.useState)(false);
   const serverMode = !!listPage && !serverFailed;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!listPage || serverFailed) return;
     let cancelled = false;
     listPage({ limit: pageSize, offset: page * pageSize }).then((result) => {
@@ -11205,21 +12056,21 @@ function WorkspaceListTab({
   const pageRows = serverMode ? (serverPage?.items ?? []).map((ws) => ({ ws, group: serverGroupOf(ws) })) : rows.slice(pageStart, pageStart + pageSize);
   const pageWorkspaces = pageRows.map((row) => row.ws);
   const listLoading = loading || serverMode && !serverPage;
-  const [plans, setPlans] = (0, import_react17.useState)({});
-  const requestedPlans = (0, import_react17.useRef)(/* @__PURE__ */ new Set());
+  const [plans, setPlans] = (0, import_react19.useState)({});
+  const requestedPlans = (0, import_react19.useRef)(/* @__PURE__ */ new Set());
   const visibleIds = [
     ...currentWorkspace ? [currentWorkspace._id] : [],
     ...pageWorkspaces.map((ws) => ws._id)
   ];
   const visibleKey = visibleIds.join(",");
-  const mounted = (0, import_react17.useRef)(true);
-  (0, import_react17.useEffect)(() => {
+  const mounted = (0, import_react19.useRef)(true);
+  (0, import_react19.useEffect)(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!fetchPlans || listLoading) return;
     const missing = visibleKey.split(",").filter((id) => id && !requestedPlans.current.has(id));
     if (!missing.length) return;
@@ -11230,13 +12081,13 @@ function WorkspaceListTab({
     });
   }, [fetchPlans, listLoading, visibleKey]);
   const planOf = (ws) => fetchPlans ? plans[ws._id] ?? "" : ws.plan ?? "";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: "flex flex-col items-start flex-1 min-w-0",
       style: { gap: "var(--spacing-3xl)", height: "100%" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "p",
           {
             className: "shrink-0 w-full",
@@ -11249,7 +12100,7 @@ function WorkspaceListTab({
             children: "Switching changes which workspace the rest of Settings acts on."
           }
         ),
-        listLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        listLoading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "p",
           {
             style: {
@@ -11260,13 +12111,13 @@ function WorkspaceListTab({
             children: "Loading workspaces\u2026"
           }
         ),
-        !listLoading && currentWorkspace && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        !listLoading && currentWorkspace && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             className: "flex flex-col items-start shrink-0 w-full",
             style: { gap: 16, padding: "var(--spacing-md) 0" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "p",
                 {
                   className: "w-full overflow-hidden text-ellipsis whitespace-nowrap",
@@ -11283,8 +12134,8 @@ function WorkspaceListTab({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                import_ui14.ScWorkspaceSwitchCard,
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_ui16.ScWorkspaceSwitchCard,
                 {
                   wsName: currentWorkspace.name,
                   initials: currentWorkspace.initials,
@@ -11300,7 +12151,7 @@ function WorkspaceListTab({
             ]
           }
         ),
-        !listLoading && currentWorkspace && listTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        !listLoading && currentWorkspace && listTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             className: "shrink-0 w-full",
@@ -11310,19 +12161,19 @@ function WorkspaceListTab({
             }
           }
         ),
-        !listLoading && listTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        !listLoading && listTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             className: "flex flex-col items-start flex-1 min-h-0 w-full",
             style: { gap: 16, overflowY: "auto" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "div",
                 {
                   className: "flex flex-col items-start w-full",
                   style: { gap: 16 },
-                  children: pageRows.map(({ ws, group }, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react17.Fragment, { children: [
-                    (index === 0 || pageRows[index - 1].group.key !== group.key) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  children: pageRows.map(({ ws, group }, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react19.Fragment, { children: [
+                    (index === 0 || pageRows[index - 1].group.key !== group.key) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "p",
                       {
                         className: "w-full overflow-hidden text-ellipsis whitespace-nowrap shrink-0",
@@ -11337,8 +12188,8 @@ function WorkspaceListTab({
                         children: group.label
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                      import_ui14.ScWorkspaceSwitchCard,
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      import_ui16.ScWorkspaceSwitchCard,
                       {
                         wsName: ws.name,
                         initials: ws.initials,
@@ -11355,13 +12206,13 @@ function WorkspaceListTab({
                   ] }, ws._id))
                 }
               ),
-              pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "div",
                 {
                   className: "flex items-center justify-between shrink-0 w-full",
                   style: { gap: "var(--spacing-md)" },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       "span",
                       {
                         style: {
@@ -11380,9 +12231,9 @@ function WorkspaceListTab({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", style: { gap: "var(--spacing-md)" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                        import_ui13.ScButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", style: { gap: "var(--spacing-md)" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        import_ui15.ScButton,
                         {
                           text: "Previous",
                           variant: "tertiary",
@@ -11391,8 +12242,8 @@ function WorkspaceListTab({
                           onClick: safePage === 0 ? void 0 : () => setPage(safePage - 1)
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                        import_ui13.ScButton,
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        import_ui15.ScButton,
                         {
                           text: "Next",
                           variant: "tertiary",
@@ -11419,12 +12270,12 @@ function ReferralTab() {
   const referralCode = (user?.referralCode ?? user?.referral_code ?? user?.referalCode ?? user?.referal_code ?? "").trim();
   const domain = typeof window !== "undefined" ? window.location.origin : "";
   const referralLink = referralCode && domain ? `${domain}?referral_code=${encodeURIComponent(referralCode)}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       className: "flex flex-col items-start flex-1 min-w-0",
       style: { gap: "var(--spacing-3xl)" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           className: "w-full relative",
@@ -11433,14 +12284,14 @@ function ReferralTab() {
             borderRadius: "var(--radius-3xl)",
             padding: "var(--spacing-6xl)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               className: "flex items-start w-full",
               style: { gap: "var(--spacing-3xl)" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  import_ui12.ScTextField,
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_ui14.ScTextField,
                   {
                     label: "Your Referral Link",
                     labelGroup: "label",
@@ -11448,8 +12299,8 @@ function ReferralTab() {
                     value: referralLink,
                     placeholderFilled: "https://your-domain.com?referral_code=ABC123",
                     tfGroup: "icon-right",
-                    tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                      import_icons13.SiconBolt,
+                    tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      import_icons14.SiconBolt,
                       {
                         className: "w-6 h-6",
                         color: "var(--alias-text---icons-primary)"
@@ -11459,8 +12310,8 @@ function ReferralTab() {
                     readOnly: true
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                  import_ui12.ScTextField,
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_ui14.ScTextField,
                   {
                     label: "Invite through email",
                     labelGroup: "label",
@@ -11468,8 +12319,8 @@ function ReferralTab() {
                     value: user?.email ?? "",
                     placeholderFilled: "chris@kepler.com",
                     tfGroup: "icon-right",
-                    tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                      import_icons13.SiconSend,
+                    tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      import_icons14.SiconSend,
                       {
                         className: "w-6 h-6",
                         color: "var(--alias-text---icons-primary)"
@@ -11493,7 +12344,7 @@ function SettingsContent({
   onBack,
   hiddenApps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SettingsAdaptersProvider, { adapters, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsAdaptersProvider, { adapters, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     SettingsContentInner,
     {
       activeTab,
@@ -11522,11 +12373,11 @@ function SettingsContentInner({
   const workspaceId = workspace.current?.id ?? null;
   const workspaceOwner = useWorkspaceOrganization({ workspaceId, request: workspace.organizationRequest ?? unavailableOrganizationRequest, enabled: !!workspace.organizationRequest });
   const workspaceOwnerName = workspace.organizationRequest ? workspaceOwner.organizationName : void 0;
-  const [workspaceList, setWorkspaceList] = (0, import_react17.useState)([]);
+  const [workspaceList, setWorkspaceList] = (0, import_react19.useState)([]);
   const currentWorkspaceRole = workspace.current?.role ?? workspaceList.find((item) => item._id === workspaceId)?.role;
   const isWorkspaceAdmin = currentWorkspaceRole?.trim().toLowerCase() === "admin";
-  const [workspaceListLoading, setWorkspaceListLoading] = (0, import_react17.useState)(false);
-  const refreshWorkspaceList = (0, import_react17.useCallback)(async () => {
+  const [workspaceListLoading, setWorkspaceListLoading] = (0, import_react19.useState)(false);
+  const refreshWorkspaceList = (0, import_react19.useCallback)(async () => {
     setWorkspaceListLoading(true);
     try {
       const items = await workspace.list();
@@ -11547,11 +12398,11 @@ function SettingsContentInner({
       setWorkspaceListLoading(false);
     }
   }, [workspace, workspaceId]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     void refreshWorkspaceList();
   }, [refreshWorkspaceList]);
   const hostListPage = workspace.listPage;
-  const listWorkspacePage = (0, import_react17.useMemo)(
+  const listWorkspacePage = (0, import_react19.useMemo)(
     () => hostListPage ? async (params) => {
       const result = await hostListPage(params);
       return {
@@ -11568,8 +12419,8 @@ function SettingsContentInner({
     } : void 0,
     [hostListPage, workspaceId]
   );
-  const [listOrganizations, setListOrganizations] = (0, import_react17.useState)([]);
-  (0, import_react17.useEffect)(() => {
+  const [listOrganizations, setListOrganizations] = (0, import_react19.useState)([]);
+  (0, import_react19.useEffect)(() => {
     if (activeTab !== "workspaceList" || typeof organization?.list !== "function") {
       return;
     }
@@ -11590,7 +12441,7 @@ function SettingsContentInner({
       cancelled = true;
     };
   }, [activeTab, organization]);
-  const switchWorkspace = (0, import_react17.useCallback)(
+  const switchWorkspace = (0, import_react19.useCallback)(
     async (id) => {
       await workspace.switch(id);
     },
@@ -11599,17 +12450,27 @@ function SettingsContentInner({
   const setActiveTab = (tab) => {
     navigation.navigateToTab(tab);
   };
-  const [creatingWorkspace, setCreatingWorkspace] = (0, import_react17.useState)(false);
-  const [updatingWorkspace, setUpdatingWorkspace] = (0, import_react17.useState)(false);
-  const [teamInviteOpen, setTeamInviteOpen] = (0, import_react17.useState)(false);
-  const [tokenShowRevoked, setTokenShowRevoked] = (0, import_react17.useState)(false);
-  const [tokenCreateOpen, setTokenCreateOpen] = (0, import_react17.useState)(false);
-  const [billingShowPlans, setBillingShowPlans] = (0, import_react17.useState)(false);
+  const [creatingWorkspace, setCreatingWorkspace] = (0, import_react19.useState)(false);
+  const [updatingWorkspace, setUpdatingWorkspace] = (0, import_react19.useState)(false);
+  const [teamInviteOpen, setTeamInviteOpen] = (0, import_react19.useState)(false);
+  const [tokenShowRevoked, setTokenShowRevoked] = (0, import_react19.useState)(false);
+  const [tokenCreateOpen, setTokenCreateOpen] = (0, import_react19.useState)(false);
+  const [billingShowPlans, setBillingShowPlans] = (0, import_react19.useState)(false);
   const isBillingPlans = activeTab === "billing" && isWorkspaceAdmin && billingShowPlans;
-  (0, import_react17.useEffect)(() => {
-    if (activeTab !== "billing") setBillingShowPlans(false);
-  }, [activeTab]);
-  (0, import_react17.useEffect)(() => {
+  const [billingShowPerUserLimits, setBillingShowPerUserLimits] = (0, import_react19.useState)(false);
+  const isBillingPerUserLimits = activeTab === "billing" && isWorkspaceAdmin && billingShowPerUserLimits && !billingShowPlans;
+  const isBillingSubView = isBillingPlans || isBillingPerUserLimits;
+  (0, import_react19.useEffect)(() => {
+    if (activeTab !== "billing" || !isWorkspaceAdmin) {
+      setBillingShowPlans(false);
+      setBillingShowPerUserLimits(false);
+    }
+  }, [activeTab, isWorkspaceAdmin]);
+  (0, import_react19.useEffect)(() => {
+    setBillingShowPlans(false);
+    setBillingShowPerUserLimits(false);
+  }, [workspaceId]);
+  (0, import_react19.useEffect)(() => {
     if (!onClose) return;
     const handleKeyDown = (e) => {
       if (e.key !== "Escape" || e.defaultPrevented) return;
@@ -11618,19 +12479,23 @@ function SettingsContentInner({
         setBillingShowPlans(false);
         return;
       }
+      if (billingShowPerUserLimits) {
+        setBillingShowPerUserLimits(false);
+        return;
+      }
       onClose();
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose, billingShowPlans]);
-  const [localWorkspaces, setLocalWorkspaces] = (0, import_react17.useState)(null);
-  const [wsModalOpen, setWsModalOpen] = (0, import_react17.useState)(false);
-  const [wsModalMode, setWsModalMode] = (0, import_react17.useState)("create");
-  const [editingWorkspace, setEditingWorkspace] = (0, import_react17.useState)(null);
-  const [confirmLeaveOpen, setConfirmLeaveOpen] = (0, import_react17.useState)(false);
-  const [leavingWorkspace, setLeavingWorkspace] = (0, import_react17.useState)(null);
-  const [confirmDeleteOpen, setConfirmDeleteOpen] = (0, import_react17.useState)(false);
-  const [deletingWorkspace, setDeletingWorkspace] = (0, import_react17.useState)(null);
+  }, [onClose, billingShowPlans, billingShowPerUserLimits]);
+  const [localWorkspaces, setLocalWorkspaces] = (0, import_react19.useState)(null);
+  const [wsModalOpen, setWsModalOpen] = (0, import_react19.useState)(false);
+  const [wsModalMode, setWsModalMode] = (0, import_react19.useState)("create");
+  const [editingWorkspace, setEditingWorkspace] = (0, import_react19.useState)(null);
+  const [confirmLeaveOpen, setConfirmLeaveOpen] = (0, import_react19.useState)(false);
+  const [leavingWorkspace, setLeavingWorkspace] = (0, import_react19.useState)(null);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = (0, import_react19.useState)(false);
+  const [deletingWorkspace, setDeletingWorkspace] = (0, import_react19.useState)(null);
   const toWorkspaceData = (ws) => ({
     id: ws._id,
     name: ws.name ?? "",
@@ -11720,7 +12585,7 @@ function SettingsContentInner({
     }
     return true;
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (workspaceList.length > 0 && localWorkspaces === null) {
       setLocalWorkspaces(workspaceList.map(toWorkspaceData));
     }
@@ -11894,7 +12759,7 @@ function SettingsContentInner({
     setConfirmLeaveOpen(true);
     return false;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       "data-streamoid-settings": "",
@@ -11904,8 +12769,8 @@ function SettingsContentInner({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SettingsAppearance, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsAppearance, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             className: "flex flex-col items-start relative h-full overflow-hidden",
@@ -11915,8 +12780,8 @@ function SettingsContentInner({
               maxWidth: 1200,
               width: "100%"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col w-full flex-1 min-h-0", style: { gap: 20, paddingTop: 16 }, children: [
-              onBack !== null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center shrink-0", style: { paddingLeft: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col w-full flex-1 min-h-0", style: { gap: 20, paddingTop: 16 }, children: [
+              onBack !== null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center shrink-0", style: { paddingLeft: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -11938,12 +12803,12 @@ function SettingsContentInner({
                   },
                   onClick: () => onBack ? onBack() : window.history.back(),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconLeft, { className: "w-4 h-4 shrink-0", color: "var(--alias-text---icons-muted)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconLeft, { className: "w-4 h-4 shrink-0", color: "var(--alias-text---icons-muted)" }),
                     "Back"
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "div",
                 {
                   className: "flex items-center shrink-0 w-full",
@@ -11953,9 +12818,9 @@ function SettingsContentInner({
                     gap: 16
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center flex-1 min-w-0", style: { gap: 8, paddingLeft: 20 }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconSettings, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center flex-1 min-w-0", style: { gap: 8, paddingLeft: 20 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconSettings, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         "span",
                         {
                           style: {
@@ -11968,9 +12833,9 @@ function SettingsContentInner({
                           children: "Settings"
                         }
                       ),
-                      scopeCrumb && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      scopeCrumb && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           "span",
                           {
                             className: "truncate",
@@ -11987,8 +12852,8 @@ function SettingsContentInner({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         "span",
                         {
                           style: {
@@ -12001,9 +12866,9 @@ function SettingsContentInner({
                           children: leafLabel
                         }
                       ),
-                      isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           "span",
                           {
                             style: {
@@ -12016,9 +12881,25 @@ function SettingsContentInner({
                             children: "Plans"
                           }
                         )
+                      ] }),
+                      isBillingPerUserLimits && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: "var(--font-family-font-family-body)",
+                              fontSize: "var(--font-size-font-size-xl)",
+                              fontWeight: 500,
+                              lineHeight: "var(--line-height-line-height-xl)",
+                              color: "var(--alias-text---icons-primary)"
+                            },
+                            children: "Per-user limits"
+                          }
+                        )
                       ] })
                     ] }),
-                    isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                    isBillingSubView && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       "div",
                       {
                         className: "flex items-center shrink-0 cursor-pointer",
@@ -12030,10 +12911,13 @@ function SettingsContentInner({
                           border: "1px solid var(--alias-border-subtle)",
                           backgroundColor: "var(--alias-surface-base)"
                         },
-                        onClick: () => setBillingShowPlans(false),
+                        onClick: () => {
+                          setBillingShowPlans(false);
+                          setBillingShowPerUserLimits(false);
+                        },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconLeft, { className: "w-4 h-4", color: "var(--alias-text---icons-muted)" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconLeft, { className: "w-4 h-4", color: "var(--alias-text---icons-muted)" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             "span",
                             {
                               style: {
@@ -12049,21 +12933,21 @@ function SettingsContentInner({
                         ]
                       }
                     ),
-                    activeTab === "workspaceList" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "workspaceList" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       SettingsTooltip,
                       {
                         content: "Start a new workspace with its own team, members and billing",
                         placement: "bottom",
                         inline: true,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                          import_ui13.ScButton,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          import_ui15.ScButton,
                           {
                             text: "Create Workspace",
                             variant: "secondary",
                             size: "md",
                             styleVariant: "icon-left",
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                              import_icons13.SiconWorkspace,
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              import_icons14.SiconWorkspace,
                               {
                                 className: "w-5 h-5",
                                 color: "var(--alias-text---icons-inverse)"
@@ -12074,21 +12958,21 @@ function SettingsContentInner({
                         )
                       }
                     ),
-                    activeTab === "workspaceMembers" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "workspaceMembers" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       SettingsTooltip,
                       {
                         content: "Send someone an invite to join this workspace",
                         placement: "bottom",
                         inline: true,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                          import_ui13.ScButton,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          import_ui15.ScButton,
                           {
                             text: "Invite user",
                             variant: "secondary",
                             size: "md",
                             styleVariant: "icon-left",
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                              import_icons13.SiconUserAdd,
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              import_icons14.SiconUserAdd,
                               {
                                 className: "w-5 h-5",
                                 color: "var(--alias-text---icons-inverse)"
@@ -12099,15 +12983,15 @@ function SettingsContentInner({
                         )
                       }
                     ),
-                    activeTab === "apikey" && isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center shrink-0", style: { gap: "var(--spacing-md)" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "apikey" && isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center shrink-0", style: { gap: "var(--spacing-md)" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         SettingsTooltip,
                         {
                           content: "Include keys you have already revoked in the list below",
                           placement: "bottom",
                           inline: true,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                            import_ui13.ScButton,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            import_ui15.ScButton,
                             {
                               text: tokenShowRevoked ? "Hide Revoked" : "Show Revoked",
                               variant: "outline",
@@ -12117,21 +13001,21 @@ function SettingsContentInner({
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         SettingsTooltip,
                         {
                           content: "Generate a key for calling the Streamoid APIs from your own code",
                           placement: "bottom",
                           inline: true,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                            import_ui13.ScButton,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            import_ui15.ScButton,
                             {
                               text: "New API Key",
                               variant: "secondary",
                               size: "md",
                               styleVariant: "icon-left",
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                                import_icons13.SiconPlus,
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                import_icons14.SiconPlus,
                                 {
                                   className: "w-5 h-5",
                                   color: "var(--alias-text---icons-inverse)"
@@ -12143,7 +13027,7 @@ function SettingsContentInner({
                         }
                       )
                     ] }),
-                    onClose && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SettingsTooltip, { content: "Close settings (Esc)", placement: "bottom", inline: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    onClose && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsTooltip, { content: "Close settings (Esc)", placement: "bottom", inline: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "button",
                       {
                         type: "button",
@@ -12159,8 +13043,8 @@ function SettingsContentInner({
                           border: "1px solid var(--alias-border-subtle)",
                           backgroundColor: "var(--alias-surface-base)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                          import_icons13.SiconClose,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          import_icons14.SiconClose,
                           {
                             className: "w-5 h-5",
                             color: "var(--alias-text---icons-muted)"
@@ -12171,13 +13055,13 @@ function SettingsContentInner({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "div",
                 {
                   className: "flex items-start flex-1 min-h-0 w-full overflow-hidden",
                   style: { gap: 20 },
                   children: [
-                    !isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    !isBillingSubView && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       SettingsNav,
                       {
                         isWorkspaceAdmin,
@@ -12188,8 +13072,8 @@ function SettingsContentInner({
                         hasOrganization
                       }
                     ),
-                    activeTab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ProfileTab, {}),
-                    activeTab === "workspace" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProfileTab, {}),
+                    activeTab === "workspace" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       WorkspaceGeneralTab,
                       {
                         workspace: currentWorkspaceData,
@@ -12211,7 +13095,7 @@ function SettingsContentInner({
                         }
                       }
                     ) }),
-                    activeTab === "workspaceMembers" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "workspaceMembers" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       TeamsContent,
                       {
                         embedded: true,
@@ -12223,7 +13107,7 @@ function SettingsContentInner({
                         hiddenApps
                       }
                     ) }),
-                    activeTab === "workspaceList" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "workspaceList" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       WorkspaceListTab,
                       {
                         workspaces: displayWorkspaces,
@@ -12248,8 +13132,8 @@ function SettingsContentInner({
                         }
                       }
                     ),
-                    activeTab === "referral" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReferralTab, {}),
-                    (activeTab === "organization" || activeTab === "organizationWorkspaces" || activeTab === "organizationDomains") && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: organization.managementUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "referral" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ReferralTab, {}),
+                    (activeTab === "organization" || activeTab === "organizationWorkspaces" || activeTab === "organizationDomains") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: organization.managementUrl ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       ManagedOrganizationSummary,
                       {
                         name: workspaceOwner.organizationName,
@@ -12257,29 +13141,37 @@ function SettingsContentInner({
                         status: workspaceOwner.organizationStatus,
                         managementUrl: organization.managementUrl
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       OrganizationContent,
                       {
                         embedded: true,
                         view: activeTab === "organizationWorkspaces" || activeTab === "organizationDomains" ? "workspaces" : "people"
                       }
                     ) }),
-                    activeTab === "billing" && isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "billing" && isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       BillingContent,
                       {
                         embedded: true,
                         showPlans: billingShowPlans,
-                        onShowPlansChange: setBillingShowPlans
+                        onShowPlansChange: (open) => {
+                          setBillingShowPlans(open);
+                          if (open) setBillingShowPerUserLimits(false);
+                        },
+                        showPerUserLimits: billingShowPerUserLimits,
+                        onShowPerUserLimitsChange: (open) => {
+                          setBillingShowPerUserLimits(open);
+                          if (open) setBillingShowPlans(false);
+                        }
                       }
                     ) }),
-                    (activeTab === "billing" || activeTab === "apikey") && !isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { role: "status", className: "flex flex-col flex-1 min-w-0", style: { padding: 28, gap: 12, background: "var(--alias-surface-base)", border: "1px solid var(--alias-border-default)", borderRadius: "var(--radius-3xl, 16px)" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconLock, { size: 24, color: MUTED_COLOR2 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { style: { margin: 0, fontSize: 18, fontWeight: 600, color: PRIMARY_COLOR3 }, children: "Contact your workspace admin" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { style: { margin: 0, fontSize: 14, lineHeight: "22px", color: MUTED_COLOR2, maxWidth: 480 }, children: activeTab === "billing" ? "Your workspace admin manages credit top-ups, plans and billing history. Get in touch with them to add credits or request billing details." : "API Keys are available to workspace Admins only. Get in touch with your workspace admin to manage API access." }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", onClick: () => setActiveTab("workspaceMembers"), style: { alignSelf: "flex-start", marginTop: 8, padding: "8px 12px", background: "transparent", color: PRIMARY_COLOR3, border: "1px solid var(--alias-border-default)", borderRadius: 8, cursor: "pointer" }, children: "View workspace members" })
+                    (activeTab === "billing" || activeTab === "apikey") && !isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("section", { role: "status", className: "flex flex-col flex-1 min-w-0", style: { padding: 28, gap: 12, background: "var(--alias-surface-base)", border: "1px solid var(--alias-border-default)", borderRadius: "var(--radius-3xl, 16px)" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconLock, { size: 24, color: MUTED_COLOR2 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { style: { margin: 0, fontSize: 18, fontWeight: 600, color: PRIMARY_COLOR3 }, children: "Contact your workspace admin" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { style: { margin: 0, fontSize: 14, lineHeight: "22px", color: MUTED_COLOR2, maxWidth: 480 }, children: activeTab === "billing" ? "Your workspace admin manages credit top-ups, plans and billing history. Get in touch with them to add credits or request billing details." : "API Keys are available to workspace Admins only. Get in touch with your workspace admin to manage API access." }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", onClick: () => setActiveTab("workspaceMembers"), style: { alignSelf: "flex-start", marginTop: 8, padding: "8px 12px", background: "transparent", color: PRIMARY_COLOR3, border: "1px solid var(--alias-border-default)", borderRadius: 8, cursor: "pointer" }, children: "View workspace members" })
                     ] }),
-                    activeTab === "apikey" && isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                    activeTab === "apikey" && isWorkspaceAdmin && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                         "a",
                         {
                           href: "https://docs.streamoid.com",
@@ -12289,19 +13181,19 @@ function SettingsContentInner({
                           className: "flex items-center shrink-0",
                           style: { gap: 14, padding: "16px 20px", marginBottom: 16, border: "1px solid var(--alias-border-default)", borderRadius: "var(--radius-3xl, 16px)", background: "var(--alias-surface-base)", color: PRIMARY_COLOR3, textDecoration: "none" },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconBookOpen, { size: 24 }),
-                            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { style: { display: "flex", flexDirection: "column", gap: 4, flex: 1 }, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: 14, fontWeight: 600 }, children: "Build with the Streamoid API" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { fontSize: 13, lineHeight: "20px", color: MUTED_COLOR2 }, children: "Explore authentication, API references and integration guides." })
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconBookOpen, { size: 24 }),
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { style: { display: "flex", flexDirection: "column", gap: 4, flex: 1 }, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: 14, fontWeight: 600 }, children: "Build with the Streamoid API" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: 13, lineHeight: "20px", color: MUTED_COLOR2 }, children: "Explore authentication, API references and integration guides." })
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, whiteSpace: "nowrap" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, whiteSpace: "nowrap" }, children: [
                               "View docs ",
-                              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons13.SiconExternalLink, { size: 16 })
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons14.SiconExternalLink, { size: 16 })
                             ] })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         TokensContent,
                         {
                           embedded: true,
@@ -12318,7 +13210,7 @@ function SettingsContentInner({
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           WorkspaceModal,
           {
             open: wsModalOpen,
@@ -12337,7 +13229,7 @@ function SettingsContentInner({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ConfirmLeaveModal,
           {
             open: confirmLeaveOpen,
@@ -12370,7 +13262,7 @@ function SettingsContentInner({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ConfirmDeleteModal,
           {
             open: confirmDeleteOpen,
@@ -12400,10 +13292,10 @@ function SettingsContentInner({
 }
 
 // src/workspace-picker.tsx
-var import_react18 = require("react");
-var import_ui15 = require("@streamoid/ui");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var T13 = {
+var import_react20 = require("react");
+var import_ui17 = require("@streamoid/ui");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var T15 = {
   primary: "var(--alias-text---icons-primary)",
   muted: "var(--alias-text---icons-muted)",
   tertiary: "var(--alias-text---icons-tertiary)",
@@ -12433,10 +13325,10 @@ function WorkspacePicker({
   onJoin,
   onCreate
 }) {
-  const [selected, setSelected] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
-  const [creating, setCreating] = (0, import_react18.useState)(false);
-  const [name, setName] = (0, import_react18.useState)("");
-  const [busy, setBusy] = (0, import_react18.useState)(false);
+  const [selected, setSelected] = (0, import_react20.useState)(/* @__PURE__ */ new Set());
+  const [creating, setCreating] = (0, import_react20.useState)(false);
+  const [name, setName] = (0, import_react20.useState)("");
+  const [busy, setBusy] = (0, import_react20.useState)(false);
   const hasWorkspaces = workspaces.length > 0;
   const showCreate = creating || !loading && !hasWorkspaces;
   const orgLabel = organizationName || "your organization";
@@ -12455,48 +13347,48 @@ function WorkspacePicker({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: "flex flex-col w-full",
-      style: { maxWidth: 520, gap: T13.sp5xl, fontFamily: T13.font },
+      style: { maxWidth: 520, gap: T15.sp5xl, fontFamily: T15.font },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col", style: { gap: T13.spMd }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col", style: { gap: T15.spMd }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "p",
             {
               style: {
-                color: T13.primary,
-                fontSize: T13.fsXl,
+                color: T15.primary,
+                fontSize: T15.fsXl,
                 fontWeight: 600,
-                lineHeight: T13.lhXl,
+                lineHeight: T15.lhXl,
                 margin: 0
               },
               children: "Choose your workspaces"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { style: { color: T13.muted, fontSize: T13.fsSm, lineHeight: T13.lhSm, margin: 0 }, children: hasWorkspaces || loading ? `Join one or more workspaces in ${orgLabel} as a member, or create your own.` : `There are no workspaces to join in ${orgLabel} yet. Create one to get started.` })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { style: { color: T15.muted, fontSize: T15.fsSm, lineHeight: T15.lhSm, margin: 0 }, children: hasWorkspaces || loading ? `Join one or more workspaces in ${orgLabel} as a member, or create your own.` : `There are no workspaces to join in ${orgLabel} yet. Create one to get started.` })
         ] }),
-        (loading || hasWorkspaces) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        (loading || hasWorkspaces) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
             className: "flex flex-col w-full overflow-y-auto",
             style: {
               maxHeight: 360,
-              background: T13.surface,
-              border: `1px solid ${T13.borderSubtle}`,
-              borderRadius: T13.r3xl
+              background: T15.surface,
+              border: `1px solid ${T15.borderSubtle}`,
+              borderRadius: T15.r3xl
             },
-            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "div",
               {
                 className: "flex items-center justify-center",
-                style: { padding: T13.sp6xl, color: T13.muted, fontSize: T13.fsSm },
+                style: { padding: T15.sp6xl, color: T15.muted, fontSize: T15.fsSm },
                 children: "Loading workspaces\u2026"
               }
             ) : workspaces.map((workspace, index) => {
               const checked = selected.has(workspace._id);
-              return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 "div",
                 {
                   role: "checkbox",
@@ -12504,9 +13396,9 @@ function WorkspacePicker({
                   tabIndex: 0,
                   className: "flex items-center cursor-pointer",
                   style: {
-                    gap: T13.spXl,
-                    padding: `${T13.spXl} ${T13.sp3xl}`,
-                    borderTop: index ? `1px solid ${T13.borderSubtle}` : "none"
+                    gap: T15.spXl,
+                    padding: `${T15.spXl} ${T15.sp3xl}`,
+                    borderTop: index ? `1px solid ${T15.borderSubtle}` : "none"
                   },
                   onClick: () => toggle(workspace._id),
                   onKeyDown: (e) => {
@@ -12516,35 +13408,35 @@ function WorkspacePicker({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui15.ScCheckbox, { checked }),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui17.ScCheckbox, { checked }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       ProfileAvatar,
                       {
                         name: workspace.name,
                         profileImage: workspace.imageUrl,
                         size: 32,
-                        borderRadius: T13.rLg
+                        borderRadius: T15.rLg
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col min-w-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         "span",
                         {
                           className: "truncate",
                           style: {
-                            color: T13.primary,
-                            fontSize: T13.fsSm,
+                            color: T15.primary,
+                            fontSize: T15.fsSm,
                             fontWeight: 500,
-                            lineHeight: T13.lhSm
+                            lineHeight: T15.lhSm
                           },
                           children: workspace.name
                         }
                       ),
-                      workspace.ownerName && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                      workspace.ownerName && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                         "span",
                         {
                           className: "truncate",
-                          style: { color: T13.muted, fontSize: T13.fsXs, lineHeight: T13.lhXs },
+                          style: { color: T15.muted, fontSize: T15.fsXs, lineHeight: T15.lhXs },
                           children: [
                             "Created by ",
                             workspace.ownerName
@@ -12559,16 +13451,16 @@ function WorkspacePicker({
             })
           }
         ),
-        showCreate ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col w-full", style: { gap: T13.spMd }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        showCreate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col w-full", style: { gap: T15.spMd }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "label",
             {
               htmlFor: "workspace-picker-name",
-              style: { color: T13.tertiary, fontSize: T13.fsSm, lineHeight: T13.lhSm },
+              style: { color: T15.tertiary, fontSize: T15.fsSm, lineHeight: T15.lhSm },
               children: "New workspace name"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "input",
             {
               id: "workspace-picker-name",
@@ -12583,20 +13475,20 @@ function WorkspacePicker({
               placeholder: "e.g. Marketing",
               style: {
                 height: 48,
-                padding: `0 ${T13.sp3xl}`,
-                background: T13.fillPlus,
+                padding: `0 ${T15.sp3xl}`,
+                background: T15.fillPlus,
                 border: "none",
                 outline: "none",
-                borderRadius: T13.r3xl,
-                color: T13.primary,
-                fontFamily: T13.font,
-                fontSize: T13.fsSm
+                borderRadius: T15.r3xl,
+                color: T15.primary,
+                fontFamily: T15.font,
+                fontSize: T15.fsSm
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-end w-full", style: { gap: T13.spMd }, children: [
-            hasWorkspaces && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_ui15.ScButton,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-end w-full", style: { gap: T15.spMd }, children: [
+            hasWorkspaces && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_ui17.ScButton,
               {
                 text: "Back",
                 variant: "tertiary",
@@ -12604,8 +13496,8 @@ function WorkspacePicker({
                 onClick: () => setCreating(false)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_ui15.ScButton,
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_ui17.ScButton,
               {
                 text: busy ? "Creating\u2026" : "Create workspace",
                 variant: "primary",
@@ -12615,9 +13507,9 @@ function WorkspacePicker({
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap items-center justify-between w-full", style: { gap: T13.spMd }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_ui15.ScButton,
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap items-center justify-between w-full", style: { gap: T15.spMd }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_ui17.ScButton,
             {
               text: "Create a workspace",
               variant: "tertiary",
@@ -12626,8 +13518,8 @@ function WorkspacePicker({
               onClick: loading || busy ? void 0 : () => setCreating(true)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_ui15.ScButton,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_ui17.ScButton,
             {
               text: busy ? "Joining\u2026" : selected.size > 1 ? `Join ${selected.size} workspaces` : "Join workspace",
               variant: "primary",