@burdenoff/microfe-billing 2026.623.3 → 2026.624.2

package/dist/billing/modules/settings/pages/SettingsPage.js

@@ -10,41 +10,41 @@ import { ArchiveBillingAccountSettingsDocument as re, useGetBillingAccountSettin
 import { useCallback as r, useEffect as le, useMemo as i, useState as a } from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { OptionalFields as u } from "@burdenoff/fe-libs/ui";
+import { AlertDialog as u, AlertDialogAction as ue, AlertDialogCancel as de, AlertDialogContent as fe, AlertDialogDescription as pe, AlertDialogFooter as me, AlertDialogHeader as he, AlertDialogTitle as ge, OptionalFields as _e } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/settings/pages/SettingsPage.tsx
-var d = () => {
+var ve = () => {
 	if (!(typeof window > "u")) return new URLSearchParams(window.location.search).get("billingAccountId") || void 0;
-}, f = () => {
-	let { t: f } = l(), p = (e, t) => {
-		let n = f(e);
+}, d = () => {
+	let { t: d } = l(), f = (e, t) => {
+		let n = d(e);
 		return n === e ? t : n;
-	}, m = ne(), { apiGatewayUrl: h, authToken: g, orgId: _ } = e(), { emit: v } = ee(), [y, b] = a(d), [x, S] = a(!1), [C, w] = a(!1), [T, E] = a(!1), [D, O] = a(null), [ue, k] = a(!1), [de, A] = a(!1), [fe, j] = a(!1), [M, N] = a({
+	}, p = ne(), { apiGatewayUrl: m, authToken: h, orgId: g } = e(), { emit: _ } = ee(), [v, y] = a(ve), [b, x] = a(!1), [S, C] = a(!1), [w, T] = a(!1), [ye, E] = a(!1), [D, O] = a(null), [be, k] = a(!1), [A, j] = a(!1), [M, N] = a(!1), [P, F] = a({
 		name: "",
 		email: "",
 		billingEmail: "",
 		currency: "USD",
 		taxId: "",
 		isDefault: !1
-	}), { data: P, loading: F, refetch: I } = ae({}), L = i(() => P?.getBillingAccountsByOrg || [], [P?.getBillingAccountsByOrg]), { data: R, loading: z, refetch: B } = oe({}), V = R?.getDefaultBillingAccount || null, { data: pe, loading: H, refetch: U } = ie({
-		variables: { id: y },
-		skip: !y
-	}), W = pe?.getBillingAccount || null, [G] = ce(), [K] = se(), q = i(() => {
-		if (y) {
+	}), { data: I, loading: xe, refetch: L } = ae({}), R = i(() => I?.getBillingAccountsByOrg || [], [I?.getBillingAccountsByOrg]), { data: Se, loading: Ce, refetch: z } = oe({}), B = Se?.getDefaultBillingAccount || null, { data: V, loading: H, refetch: U } = ie({
+		variables: { id: v },
+		skip: !v
+	}), W = V?.getBillingAccount || null, [G] = ce(), [K] = se(), q = i(() => {
+		if (v) {
 			if (W) return W;
-			let e = L.find((e) => e.id === y);
+			let e = R.find((e) => e.id === v);
 			if (e) return e;
 			if (H) return null;
 		}
-		return V;
+		return B;
 	}, [
-		y,
+		v,
 		W,
-		L,
+		R,
 		H,
-		V
-	]), me = F || z || y && H;
+		B
+	]), we = xe || Ce || v && H;
 	le(() => {
-		q && N({
+		q && F({
 			name: q.name || "",
 			email: q.email || "",
 			billingEmail: q.billingEmail || "",
@@ -53,122 +53,120 @@ var d = () => {
 			isDefault: q.isDefault || !1
 		});
 	}, [q]);
-	let he = (e) => {
-		b(e.id), S(!1), k(!1), O(null);
+	let Te = (e) => {
+		y(e.id), x(!1), k(!1), O(null);
 	}, J = (e, t) => {
-		N((n) => ({
+		F((n) => ({
 			...n,
 			[e]: t
 		})), k(!1), O(null);
-	}, Y = i(() => L.find((e) => e.isDefault) || null, [L]), ge = i(() => q ? M.name !== (q.name || "") || M.email !== (q.email || "") || M.billingEmail !== (q.billingEmail || "") || M.currency !== (q.currency || "USD") || M.taxId !== (q.taxId || "") || M.isDefault !== (q.isDefault || !1) : !1, [M, q]), X = M.isDefault && !q?.isDefault, Z = X && Y && Y.id !== q?.id, Q = r(async () => {
+	}, Y = i(() => R.find((e) => e.isDefault) || null, [R]), Ee = i(() => q ? P.name !== (q.name || "") || P.email !== (q.email || "") || P.billingEmail !== (q.billingEmail || "") || P.currency !== (q.currency || "USD") || P.taxId !== (q.taxId || "") || P.isDefault !== (q.isDefault || !1) : !1, [P, q]), X = P.isDefault && !q?.isDefault, Z = X && Y && Y.id !== q?.id, Q = r(async () => {
 		if (q?.id) {
-			w(!0), O(null), k(!1), A(!1), j(!1);
+			C(!0), O(null), k(!1), j(!1), N(!1);
 			try {
 				await G({ variables: { input: {
 					id: q.id,
-					name: M.name,
-					email: M.email,
-					billingEmail: M.billingEmail || null,
-					currency: M.currency,
-					taxId: M.taxId || null
-				} } }), v("billing.billing_account.updated", {
+					name: P.name,
+					email: P.email,
+					billingEmail: P.billingEmail || null,
+					currency: P.currency,
+					taxId: P.taxId || null
+				} } }), _("billing.billing_account.updated", {
 					route: "/billing/settings",
 					entityId: q.id,
 					source: "settings"
 				}), X && (await K({
 					variables: { id: q.id },
 					refetchQueries: ["GetBillingAccountsByTenant", "GetDefaultBillingAccount"]
-				}), v("billing.billing_account.updated", {
+				}), _("billing.billing_account.updated", {
 					route: "/billing/settings",
 					entityId: q.id,
 					source: "settings.default"
-				})), y ? await U() : await B(), k(!0), setTimeout(() => k(!1), 3e3);
+				})), v ? await U() : await z(), k(!0), setTimeout(() => k(!1), 3e3);
 			} catch (e) {
 				O(e instanceof Error ? e.message : "Failed to save changes");
 			} finally {
-				w(!1);
+				C(!1);
 			}
 		}
 	}, [
 		q?.id,
-		M,
+		P,
 		X,
 		G,
 		K,
-		y,
+		v,
 		U,
-		B,
-		v
-	]), $ = r(() => {
-		q?.id && (Z ? (j(!0), A(!0)) : Q());
+		z,
+		_
+	]), De = r(() => {
+		q?.id && (Z ? (N(!0), j(!0)) : Q());
 	}, [
 		q?.id,
 		Z,
 		Q
-	]), _e = r(async () => {
-		if (!q?.id || !q.isActive) return;
-		let e = L.find((e) => e.id !== q.id && e.isActive);
-		if (window.confirm(q.isDefault ? `Archive ${q.name}? ${e ? `${e.name} will become the default account.` : "No replacement default account is available."}` : `Archive ${q.name}?`)) {
-			E(!0), O(null), k(!1);
+	]), $ = i(() => q ? R.find((e) => e.id !== q.id && e.isActive) : void 0, [q, R]), Oe = q ? q.isDefault ? `Archive ${q.name}? ${$ ? `${$.name} will become the default account.` : "No replacement default account is available."}` : `Archive ${q.name}?` : "", ke = r(async () => {
+		if (!(!q?.id || !q.isActive)) {
+			T(!0), O(null), k(!1);
 			try {
 				await te({
-					apiGatewayUrl: h,
-					authToken: g,
-					orgId: _,
+					apiGatewayUrl: m,
+					authToken: h,
+					orgId: g,
 					query: re,
 					variables: {
 						id: q.id,
 						reason: "Archived from billing settings",
-						replacementDefaultBillingAccountId: q.isDefault ? e?.id ?? null : null
+						replacementDefaultBillingAccountId: q.isDefault ? $?.id ?? null : null
 					}
-				}), v("billing.billing_account.archived", {
+				}), _("billing.billing_account.archived", {
 					route: "/billing/settings",
 					entityId: q.id,
 					source: "settings"
-				}), await Promise.all([I(), B()]), b(e?.id), k(!0), setTimeout(() => k(!1), 3e3);
+				}), await Promise.all([L(), z()]), y($?.id), k(!0), setTimeout(() => k(!1), 3e3);
 			} catch (e) {
 				O(e instanceof Error ? e.message : "Failed to archive billing account");
 			} finally {
-				E(!1);
+				T(!1);
 			}
 		}
 	}, [
+		m,
 		h,
-		g,
 		q,
+		$,
+		g,
 		L,
-		_,
-		I,
-		B,
-		v
+		z,
+		_
 	]);
-	return m.canManageBillingAccount ? me && !q ? /* @__PURE__ */ c("div", {
+	return p.canManageBillingAccount ? we && !q ? /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ s("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ s("div", {
-			className: "border border-border rounded-lg p-6 space-y-4",
+		children: [/* @__PURE__ */ s("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ s("div", {
+			className: "border border-border-subtle rounded-lg p-6 space-y-4",
 			children: [
 				1,
 				2,
 				3
-			].map((e) => /* @__PURE__ */ s("div", { className: "h-10 bg-muted animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ s("div", { className: "h-10 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	}) : /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
 		children: [
 			/* @__PURE__ */ s(n, {
-				title: p("billing.settings.billingSettings", "Billing Settings"),
-				description: p("billing.settings.description", "Manage your billing account configuration")
+				title: f("billing.settings.billingSettings", "Billing Settings"),
+				description: f("billing.settings.description", "Manage your billing account configuration")
 			}),
-			L.length > 1 && /* @__PURE__ */ c("div", {
+			R.length > 1 && /* @__PURE__ */ c("div", {
 				className: "relative",
 				children: [/* @__PURE__ */ c("button", {
 					type: "button",
-					onClick: () => S(!x),
-					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors",
+					onClick: () => x(!b),
+					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-subtle rounded-lg bg-bg-surface hover:bg-bg-sunken/50 transition-colors",
 					children: [/* @__PURE__ */ c("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ s("div", {
-							className: "size-8 rounded-lg bg-primary/10 flex items-center justify-center",
+							className: "size-8 rounded-lg bg-action-primary-bg/10 flex items-center justify-center",
 							children: /* @__PURE__ */ s("svg", {
 								className: "size-4 text-primary",
 								fill: "none",
@@ -184,15 +182,15 @@ var d = () => {
 						}), /* @__PURE__ */ c("div", {
 							className: "text-left",
 							children: [/* @__PURE__ */ s("p", {
-								className: "text-sm font-medium text-foreground",
-								children: q?.name || p("billing.settings.selectAccount", "Select Account")
+								className: "text-sm font-medium text-text-primary",
+								children: q?.name || f("billing.settings.selectAccount", "Select Account")
 							}), /* @__PURE__ */ s("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: q?.email
 							})]
 						})]
 					}), /* @__PURE__ */ s("svg", {
-						className: `size-4 text-muted-foreground transition-transform ${x ? "rotate-180" : ""}`,
+						className: `size-4 text-text-secondary transition-transform ${b ? "rotate-180" : ""}`,
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -203,21 +201,21 @@ var d = () => {
 							d: "M19 9l-7 7-7-7"
 						})
 					})]
-				}), x && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+				}), b && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
 					className: "fixed inset-0 z-10",
-					onClick: () => S(!1)
+					onClick: () => x(!1)
 				}), /* @__PURE__ */ s("div", {
-					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
-					children: L.map((e) => /* @__PURE__ */ c("button", {
+					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border-subtle rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
+					children: R.map((e) => /* @__PURE__ */ c("button", {
 						type: "button",
-						onClick: () => he(e),
-						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
+						onClick: () => Te(e),
+						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ c("div", {
 							className: "flex items-center gap-3 min-w-0",
 							children: [/* @__PURE__ */ s("div", {
-								className: "size-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
+								className: "size-8 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
 								children: /* @__PURE__ */ s("svg", {
-									className: "size-4 text-muted-foreground",
+									className: "size-4 text-text-secondary",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -231,10 +229,10 @@ var d = () => {
 							}), /* @__PURE__ */ c("div", {
 								className: "text-left min-w-0",
 								children: [/* @__PURE__ */ s("p", {
-									className: "text-sm font-medium text-foreground truncate",
+									className: "text-sm font-medium text-text-primary truncate",
 									children: e.name
 								}), /* @__PURE__ */ s("p", {
-									className: "text-xs text-muted-foreground truncate",
+									className: "text-xs text-text-secondary truncate",
 									children: e.email
 								})]
 							})]
@@ -254,19 +252,19 @@ var d = () => {
 				})] })]
 			}),
 			/* @__PURE__ */ c("div", {
-				className: "border border-border rounded-lg bg-card",
+				className: "border border-border-subtle rounded-lg bg-bg-surface",
 				children: [/* @__PURE__ */ s("div", {
-					className: "p-6 border-b border-border",
+					className: "p-6 border-b border-border-subtle",
 					children: /* @__PURE__ */ c("div", {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
-							className: "text-lg font-semibold text-foreground",
-							children: p("billing.settings.accountInfo", "Account Information")
+							className: "text-lg font-semibold text-text-primary",
+							children: f("billing.settings.accountInfo", "Account Information")
 						}), /* @__PURE__ */ s("p", {
-							className: "text-sm text-muted-foreground mt-1",
-							children: p("billing.settings.accountInfoDescription", "Update your billing contact details and tax information")
+							className: "text-sm text-text-secondary mt-1",
+							children: f("billing.settings.accountInfoDescription", "Update your billing contact details and tax information")
 						})] }), q?.isDefault && /* @__PURE__ */ c("span", {
-							className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full",
+							className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-action-primary-bg/10 text-primary rounded-full",
 							children: [/* @__PURE__ */ s("svg", {
 								className: "size-3",
 								fill: "currentColor",
@@ -276,121 +274,121 @@ var d = () => {
 									d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
 									clipRule: "evenodd"
 								})
-							}), p("billing.settings.defaultAccount", "Default Account")]
+							}), f("billing.settings.defaultAccount", "Default Account")]
 						})]
 					})
 				}), /* @__PURE__ */ c("div", {
 					className: "p-6 space-y-6",
 					children: [
 						q && /* @__PURE__ */ c("div", {
-							className: "grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm pb-4 border-b border-border",
+							className: "grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm pb-4 border-b border-border-subtle",
 							children: [
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
-									children: p("billing.settings.status", "Status")
+									className: "text-text-secondary",
+									children: f("billing.settings.status", "Status")
 								}), /* @__PURE__ */ s("p", {
-									className: `font-medium ${q.isActive ? "text-status-success-text" : "text-destructive"}`,
-									children: q.isActive ? p("billing.settings.active", "Active") : p("billing.settings.inactive", "Inactive")
+									className: `font-medium ${q.isActive ? "text-status-success-text" : "text-status-error-text"}`,
+									children: q.isActive ? f("billing.settings.active", "Active") : f("billing.settings.inactive", "Inactive")
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
-									children: p("billing.settings.creditBalance", "Credit Balance")
+									className: "text-text-secondary",
+									children: f("billing.settings.creditBalance", "Credit Balance")
 								}), /* @__PURE__ */ c("p", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: [(q.creditAmount || 0).toLocaleString(), " Credits"]
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
-									children: p("billing.settings.accountId", "Account ID")
+									className: "text-text-secondary",
+									children: f("billing.settings.accountId", "Account ID")
 								}), /* @__PURE__ */ s("p", {
-									className: "font-mono text-xs text-foreground truncate",
+									className: "font-mono text-xs text-text-primary truncate",
 									title: q.id,
 									children: q.id
 								})] }),
 								/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-									className: "text-muted-foreground",
-									children: p("billing.settings.created", "Created")
+									className: "text-text-secondary",
+									children: f("billing.settings.created", "Created")
 								}), /* @__PURE__ */ s("p", {
-									className: "font-medium text-foreground",
-									children: q.createdAt ? new Date(q.createdAt).toLocaleDateString() : p("billing.settings.notAvailable", "N/A")
+									className: "font-medium text-text-primary",
+									children: q.createdAt ? new Date(q.createdAt).toLocaleDateString() : f("billing.settings.notAvailable", "N/A")
 								})] })
 							]
 						}),
 						/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h3", {
-							className: "text-sm font-medium text-foreground mb-4",
-							children: p("billing.settings.contactDetails", "Contact Details")
+							className: "text-sm font-medium text-text-primary mb-4",
+							children: f("billing.settings.contactDetails", "Contact Details")
 						}), /* @__PURE__ */ c("div", {
 							className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("label", {
 								htmlFor: "billing-account-name",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: [
-									p("billing.settings.accountName", "Account Name"),
+									f("billing.settings.accountName", "Account Name"),
 									" ",
 									/* @__PURE__ */ s("span", {
-										className: "text-destructive",
+										className: "text-status-error-text",
 										children: "*"
 									})
 								]
 							}), /* @__PURE__ */ s("input", {
 								id: "billing-account-name",
 								type: "text",
-								value: M.name,
+								value: P.name,
 								onChange: (e) => J("name", e.target.value),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 							})] }), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("label", {
 								htmlFor: "billing-account-email",
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: [
-									p("billing.settings.email", "Email"),
+									f("billing.settings.email", "Email"),
 									" ",
 									/* @__PURE__ */ s("span", {
-										className: "text-destructive",
+										className: "text-status-error-text",
 										children: "*"
 									})
 								]
 							}), /* @__PURE__ */ s("input", {
 								id: "billing-account-email",
 								type: "email",
-								value: M.email,
+								value: P.email,
 								onChange: (e) => J("email", e.target.value),
-								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 							})] })]
 						})] }),
-						/* @__PURE__ */ s(u, {
-							title: p("billing.settings.advancedTitle", "Advanced settings"),
-							description: p("billing.settings.advancedDescription", "Billing email override, currency, and tax identification."),
+						/* @__PURE__ */ s(_e, {
+							title: f("billing.settings.advancedTitle", "Advanced settings"),
+							description: f("billing.settings.advancedDescription", "Billing email override, currency, and tax identification."),
 							children: /* @__PURE__ */ c("div", {
 								className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
 								children: [
 									/* @__PURE__ */ c("div", { children: [
 										/* @__PURE__ */ s("label", {
 											htmlFor: "billing-account-billing-email",
-											className: "block text-sm font-medium text-foreground mb-1",
-											children: p("billing.settings.billingEmail", "Billing Email")
+											className: "block text-sm font-medium text-text-primary mb-1",
+											children: f("billing.settings.billingEmail", "Billing Email")
 										}),
 										/* @__PURE__ */ s("input", {
 											id: "billing-account-billing-email",
 											type: "email",
-											value: M.billingEmail,
+											value: P.billingEmail,
 											onChange: (e) => J("billingEmail", e.target.value),
-											placeholder: p("billing.settings.billingEmailPlaceholder", "Optional - defaults to account email"),
-											className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+											placeholder: f("billing.settings.billingEmailPlaceholder", "Optional - defaults to account email"),
+											className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 										}),
 										/* @__PURE__ */ s("p", {
-											className: "text-xs text-muted-foreground mt-1",
-											children: p("billing.settings.billingEmailHelp", "Invoices will be sent to this email if provided")
+											className: "text-xs text-text-secondary mt-1",
+											children: f("billing.settings.billingEmailHelp", "Invoices will be sent to this email if provided")
 										})
 									] }),
 									/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
 										htmlFor: "billing-account-currency",
-										className: "block text-sm font-medium text-foreground mb-1",
-										children: p("billing.settings.currency", "Currency")
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: f("billing.settings.currency", "Currency")
 									}), /* @__PURE__ */ c("select", {
 										id: "billing-account-currency",
-										value: M.currency,
+										value: P.currency,
 										onChange: (e) => J("currency", e.target.value),
-										className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+										className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
 										children: [
 											/* @__PURE__ */ s("option", {
 												value: "USD",
@@ -415,28 +413,28 @@ var d = () => {
 										children: [
 											/* @__PURE__ */ s("label", {
 												htmlFor: "billing-account-tax-id",
-												className: "block text-sm font-medium text-foreground mb-1",
-												children: p("billing.settings.taxId", "Tax ID / VAT Number")
+												className: "block text-sm font-medium text-text-primary mb-1",
+												children: f("billing.settings.taxId", "Tax ID / VAT Number")
 											}),
 											/* @__PURE__ */ s("input", {
 												id: "billing-account-tax-id",
 												type: "text",
-												value: M.taxId,
+												value: P.taxId,
 												onChange: (e) => J("taxId", e.target.value),
-												placeholder: p("billing.settings.taxIdPlaceholder", "Enter your tax identification number"),
-												className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+												placeholder: f("billing.settings.taxIdPlaceholder", "Enter your tax identification number"),
+												className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-md bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
 											}),
 											/* @__PURE__ */ s("p", {
-												className: "text-xs text-muted-foreground mt-1",
-												children: p("billing.settings.taxIdHelp", "Used for invoices and tax compliance (e.g., GST, VAT number)")
+												className: "text-xs text-text-secondary mt-1",
+												children: f("billing.settings.taxIdHelp", "Used for invoices and tax compliance (e.g., GST, VAT number)")
 											})
 										]
 									})
 								]
 							})
 						}),
-						q?.isActive && L.length > 1 && /* @__PURE__ */ s("div", {
-							className: "pt-4 border-t border-border",
+						q?.isActive && R.length > 1 && /* @__PURE__ */ s("div", {
+							className: "pt-4 border-t border-border-subtle",
 							children: /* @__PURE__ */ c("div", {
 								className: "flex items-start gap-3",
 								children: [/* @__PURE__ */ s("div", {
@@ -444,32 +442,32 @@ var d = () => {
 									children: /* @__PURE__ */ s("input", {
 										type: "checkbox",
 										id: "isDefault",
-										checked: M.isDefault,
-										onChange: (e) => N((t) => ({
+										checked: P.isDefault,
+										onChange: (e) => F((t) => ({
 											...t,
 											isDefault: e.target.checked
 										})),
 										disabled: q?.isDefault,
-										className: "size-4 rounded border-border text-primary focus:ring-primary focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
+										className: "size-4 rounded border-border-subtle text-primary focus:ring-primary focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed"
 									})
 								}), /* @__PURE__ */ c("div", {
 									className: "flex-1",
 									children: [/* @__PURE__ */ s("label", {
 										htmlFor: "isDefault",
-										className: "text-sm font-medium text-foreground cursor-pointer",
-										children: p("billing.settings.setDefault", "Set as default billing account")
+										className: "text-sm font-medium text-text-primary cursor-pointer",
+										children: f("billing.settings.setDefault", "Set as default billing account")
 									}), /* @__PURE__ */ s("p", {
-										className: "text-xs text-muted-foreground mt-0.5",
-										children: q?.isDefault ? p("billing.settings.currentDefaultDescription", "This is currently your default billing account") : p("billing.settings.makePrimaryDescription", "Make this your primary billing account for new subscriptions")
+										className: "text-xs text-text-secondary mt-0.5",
+										children: q?.isDefault ? f("billing.settings.currentDefaultDescription", "This is currently your default billing account") : f("billing.settings.makePrimaryDescription", "Make this your primary billing account for new subscriptions")
 									})]
 								})]
 							})
 						}),
 						/* @__PURE__ */ c("div", {
-							className: "pt-4 border-t border-border flex items-center justify-between",
+							className: "pt-4 border-t border-border-subtle flex items-center justify-between",
 							children: [/* @__PURE__ */ c("div", {
 								className: "flex items-center gap-2",
-								children: [ue && /* @__PURE__ */ c("div", {
+								children: [be && /* @__PURE__ */ c("div", {
 									className: "flex items-center gap-2 text-sm text-status-success-text",
 									children: [/* @__PURE__ */ s("svg", {
 										className: "size-4",
@@ -482,9 +480,9 @@ var d = () => {
 											strokeWidth: 2,
 											d: "M5 13l4 4L19 7"
 										})
-									}), p("billing.settings.saveSuccess", "Changes saved successfully")]
+									}), f("billing.settings.saveSuccess", "Changes saved successfully")]
 								}), D && /* @__PURE__ */ c("div", {
-									className: "flex items-center gap-2 text-sm text-destructive",
+									className: "flex items-center gap-2 text-sm text-status-error-text",
 									children: [/* @__PURE__ */ s("svg", {
 										className: "size-4",
 										fill: "none",
@@ -500,18 +498,18 @@ var d = () => {
 								})]
 							}), /* @__PURE__ */ c("div", {
 								className: "flex items-center gap-3",
-								children: [m.canArchiveBillingAccount && q?.isActive ? /* @__PURE__ */ s("button", {
+								children: [p.canArchiveBillingAccount && q?.isActive ? /* @__PURE__ */ s("button", {
 									type: "button",
-									onClick: _e,
-									disabled: C || T,
-									className: "px-4 py-2 text-sm font-medium border border-border text-status-error-text rounded-md hover:bg-status-error-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-									children: T ? "Archiving..." : "Archive Account"
+									onClick: () => E(!0),
+									disabled: S || w,
+									className: "px-4 py-2 text-sm font-medium border border-border-subtle text-status-error-text rounded-md hover:bg-status-error-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+									children: w ? "Archiving..." : "Archive Account"
 								}) : null, /* @__PURE__ */ c("button", {
 									type: "button",
-									onClick: $,
-									disabled: !ge || C || T || !M.name || !M.email,
-									className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2",
-									children: [C && /* @__PURE__ */ c("svg", {
+									onClick: De,
+									disabled: !Ee || S || w || !P.name || !P.email,
+									className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2",
+									children: [S && /* @__PURE__ */ c("svg", {
 										className: "size-4 animate-spin",
 										fill: "none",
 										viewBox: "0 0 24 24",
@@ -527,17 +525,17 @@ var d = () => {
 											fill: "currentColor",
 											d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 										})]
-									}), C ? "Saving..." : "Save Changes"]
+									}), S ? "Saving..." : "Save Changes"]
 								})]
 							})]
 						})
 					]
 				})]
 			}),
-			de && fe && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+			A && M && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
 				className: "fixed inset-0 bg-overlay-scrim z-40",
 				onClick: () => {
-					C || (A(!1), j(!1), N((e) => ({
+					S || (j(!1), N(!1), F((e) => ({
 						...e,
 						isDefault: q?.isDefault || !1
 					})));
@@ -545,19 +543,19 @@ var d = () => {
 			}), /* @__PURE__ */ s("div", {
 				className: "fixed inset-0 flex items-center justify-center z-50 p-4",
 				children: /* @__PURE__ */ c("div", {
-					className: "bg-card border border-border rounded-lg shadow-xl max-w-md w-full p-6",
+					className: "bg-bg-surface border border-border-subtle rounded-lg shadow-xl max-w-md w-full p-6",
 					children: [
 						/* @__PURE__ */ s("h3", {
-							className: "text-lg font-semibold text-foreground mb-2",
+							className: "text-lg font-semibold text-text-primary mb-2",
 							children: "Confirm Default Account Change"
 						}),
 						/* @__PURE__ */ c("p", {
-							className: "text-sm text-muted-foreground mb-4",
+							className: "text-sm text-text-secondary mb-4",
 							children: [
 								"You are about to set",
 								" ",
 								/* @__PURE__ */ s("strong", {
-									className: "text-foreground",
+									className: "text-text-primary",
 									children: q?.name
 								}),
 								" as your default billing account and save your changes."
@@ -595,20 +593,20 @@ var d = () => {
 							children: [/* @__PURE__ */ s("button", {
 								type: "button",
 								onClick: () => {
-									A(!1), j(!1), N((e) => ({
+									j(!1), N(!1), F((e) => ({
 										...e,
 										isDefault: q?.isDefault || !1
 									}));
 								},
-								disabled: C,
-								className: "px-4 py-2 text-sm font-medium text-foreground border border-border rounded-md hover:bg-muted transition-colors disabled:opacity-50",
+								disabled: S,
+								className: "px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50",
 								children: "Cancel"
 							}), /* @__PURE__ */ c("button", {
 								type: "button",
 								onClick: Q,
-								disabled: C,
-								className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors flex items-center gap-2",
-								children: [C && /* @__PURE__ */ c("svg", {
+								disabled: S,
+								className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 transition-colors flex items-center gap-2",
+								children: [S && /* @__PURE__ */ c("svg", {
 									className: "size-4 animate-spin",
 									fill: "none",
 									viewBox: "0 0 24 24",
@@ -624,16 +622,26 @@ var d = () => {
 										fill: "currentColor",
 										d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 									})]
-								}), C ? "Saving..." : "Save Changes"]
+								}), S ? "Saving..." : "Save Changes"]
 							})]
 						})
 					]
 				})
-			})] })
+			})] }),
+			/* @__PURE__ */ s(u, {
+				open: ye,
+				onOpenChange: E,
+				children: /* @__PURE__ */ c(fe, { children: [/* @__PURE__ */ c(he, { children: [/* @__PURE__ */ s(ge, { children: "Archive billing account?" }), /* @__PURE__ */ s(pe, { children: Oe })] }), /* @__PURE__ */ c(me, { children: [/* @__PURE__ */ s(de, { children: "Cancel" }), /* @__PURE__ */ s(ue, {
+					onClick: () => {
+						E(!1), ke();
+					},
+					children: "Archive Account"
+				})] })] })
+			})
 		]
 	}) : /* @__PURE__ */ s(t, { message: "You don't have permission to manage billing settings." });
 };
 //#endregion
-export { f as SettingsPage };
+export { d as SettingsPage };
 
 //# sourceMappingURL=SettingsPage.js.map