@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/subscriptions/pages/SubscriptionDetailPage.js

@@ -1,68 +1,72 @@
 import { useBilling as e } from "../../../providers/BillingProvider.js";
-import { useBillingEventEmitter as t } from "../../../hooks/useBillingEventEmitter.js";
-import { useBillingAccountSelection as n } from "../../../hooks/useBillingAccountSelection.js";
-import { PricingModel as r } from "../../../shared/types/graphql.js";
-import { formatBytes as i, formatCurrency as a, formatDate as o, formatPercentage as s, formatPlanDuration as c, formatSubscriptionStatus as l } from "../../../shared/utils/format.js";
-import { getQuotaProgressColor as u, getStatusBadgeClasses as d, getSubscriptionStatusColor as f } from "../../../shared/utils/status.js";
-import { useBillingPermissions as ee } from "../../../hooks/useBillingPermissions.js";
-import { useGetDefaultBillingAccountDashboardQuery as p } from "../../../../generated/global-operations.js";
-import { useBillingNavigate as te } from "../../../hooks/useBillingNavigate.js";
+import { Card as t } from "../../../shared/ui/Card.js";
+import { StatusPill as n } from "../../../shared/ui/StatusPill.js";
+import { ProgressBar as r } from "../../../shared/ui/ProgressBar.js";
+import "../../../shared/ui/index.js";
+import { useBillingEventEmitter as i } from "../../../hooks/useBillingEventEmitter.js";
+import { useBillingAccountSelection as a } from "../../../hooks/useBillingAccountSelection.js";
+import { PricingModel as o } from "../../../shared/types/graphql.js";
+import { formatBytes as s, formatCurrency as c, formatDate as l, formatPercentage as u, formatPlanDuration as d, formatSubscriptionStatus as f } from "../../../shared/utils/format.js";
+import { getQuotaProgressColor as p, getSubscriptionStatusColor as ee } from "../../../shared/utils/status.js";
+import { useBillingPermissions as te } from "../../../hooks/useBillingPermissions.js";
+import { useGetDefaultBillingAccountDashboardQuery as ne } from "../../../../generated/global-operations.js";
+import { useBillingNavigate as re } from "../../../hooks/useBillingNavigate.js";
 import { withBillingAccountId as m } from "../../../shared/utils/navigation.js";
-import { useWorkspaceQuotaOverview as ne } from "../../usage/hooks/useUsage.js";
-import { WorkspaceQuotaAssignmentModal as re } from "../../checkout/components/WorkspaceQuotaAssignmentModal.js";
-import { useSubscription as h, useSubscriptionMutations as g } from "../hooks/useSubscriptions.js";
+import { useWorkspaceQuotaOverview as h } from "../../usage/hooks/useUsage.js";
+import { WorkspaceQuotaAssignmentModal as g } from "../../checkout/components/WorkspaceQuotaAssignmentModal.js";
+import { useSubscription as ie, useSubscriptionMutations as ae } from "../hooks/useSubscriptions.js";
 import "../hooks/index.js";
-import { ManageSeatsModal as ie } from "../components/ManageSeatsModal.js";
+import { ManageSeatsModal as oe } from "../components/ManageSeatsModal.js";
 import { useState as _ } from "react";
-import { useParams as ae } from "react-router-dom";
+import { useParams as se } from "react-router-dom";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useI18n as b } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx
-function x(e, t) {
+function b(e, t) {
 	if (t?.displayName && typeof t.displayName == "string") return t.displayName;
 	if (t?.label && typeof t.label == "string") return t.label;
 	let n = e.split(".");
 	return (n.length > 1 ? n.slice(1) : n).map((e) => e.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase())).join(" ");
 }
-function S(e) {
+function x(e) {
 	return e === "DAILY" ? "Resets daily" : e === "MONTHLY" ? "Resets monthly" : "";
 }
-var C = () => {
-	let { t: i } = b(), s = (e, t) => {
-		let n = i(e);
+var S = () => {
+	let { t: s } = ce(), u = (e, t) => {
+		let n = s(e);
 		return n === e ? t : n;
-	}, { subscriptionId: u } = ae(), x = te(), { emit: S } = t(), { orgId: C } = e(), T = ee(), { selectedAccountId: ue } = n({
-		orgId: C,
+	}, { subscriptionId: p } = se(), b = re(), { emit: x } = i(), { orgId: S } = e(), w = te(), { selectedAccountId: pe } = a({
+		orgId: S,
 		syncFromUrl: !0,
 		urlParamName: "billingAccountId"
-	}), { data: de } = p({ fetchPolicy: "cache-first" }), E = ue ?? de?.getDefaultBillingAccount?.id ?? void 0, { subscription: D, isLoading: fe, error: O, refetch: k } = h(u, E), { cancelSubscription: pe, isCanceling: A, updateSubscriptionSeats: me, isUpdatingSeats: he } = g(), { workspaceId: j } = e(), { overview: M, refetch: N } = ne(j ?? void 0), [P, F] = _(!1), [I, L] = _(!1), [ge, R] = _(!1), [z, B] = _(""), [V, H] = _(null), _e = async () => {
-		if (D) {
+	}), { data: me } = ne({ fetchPolicy: "cache-first" }), T = pe ?? me?.getDefaultBillingAccount?.id ?? void 0, { subscription: E, isLoading: he, error: D, refetch: O } = ie(p, T), { cancelSubscription: ge, isCanceling: k, updateSubscriptionSeats: A, isUpdatingSeats: j } = ae(), { workspaceId: M } = e(), { overview: N, refetch: P } = h(M ?? void 0), [F, I] = _(!1), [_e, L] = _(!1), [ve, R] = _(!1), [z, B] = _(""), [V, H] = _(null), ye = async () => {
+		if (E) {
 			H(null);
 			try {
-				await pe({
-					billingAccountId: E ?? D.billingAccountId,
-					subscriptionId: D.id,
+				await ge({
+					billingAccountId: T ?? E.billingAccountId,
+					subscriptionId: E.id,
 					reason: z || "User requested cancellation"
-				}), S("billing.subscription.cancelled", {
+				}), x("billing.subscription.cancelled", {
 					route: "/billing/subscriptions",
-					entityId: D.id,
+					entityId: E.id,
 					source: "subscription-detail",
 					reason: z || "User requested cancellation"
-				}), F(!1), B(""), await k();
+				}), I(!1), B(""), await O();
 			} catch (e) {
 				H(e instanceof Error ? e.message : "Failed to cancel subscription");
 			}
 		}
 	};
-	if (!T.canViewSubscriptions) return /* @__PURE__ */ v("div", {
+	if (!w.canViewSubscriptions) return /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ y("div", {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ v("div", {
-					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center",
 					children: /* @__PURE__ */ v("svg", {
-						className: "size-6 text-muted-foreground",
+						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -75,41 +79,41 @@ var C = () => {
 					})
 				}),
 				/* @__PURE__ */ v("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Access Denied"
 				}),
 				/* @__PURE__ */ v("p", {
-					className: "text-sm text-muted-foreground max-w-sm",
+					className: "text-sm text-text-secondary max-w-sm",
 					children: "You don't have permission to view this subscription."
 				})
 			]
 		})
 	});
-	if (fe) return /* @__PURE__ */ y("div", {
-		className: "space-y-6 p-6",
+	if (he) return /* @__PURE__ */ y("div", {
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [/* @__PURE__ */ y("div", {
 			className: "flex items-center gap-4",
-			children: [/* @__PURE__ */ v("div", { className: "size-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" })]
+			children: [/* @__PURE__ */ v("div", { className: "size-10 bg-bg-sunken animate-pulse rounded-button" }), /* @__PURE__ */ v("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" })]
 		}), /* @__PURE__ */ v("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
 			children: /* @__PURE__ */ v("div", {
 				className: "lg:col-span-2 space-y-6",
 				children: /* @__PURE__ */ y("div", {
-					className: "border border-border rounded-lg p-6 space-y-4",
-					children: [/* @__PURE__ */ v("div", { className: "h-6 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", { className: "h-4 w-full bg-muted animate-pulse rounded" })]
+					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4",
+					children: [/* @__PURE__ */ v("div", { className: "h-6 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ v("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" })]
 				})
 			})
 		})]
 	});
-	if (O || !D) return /* @__PURE__ */ v("div", {
+	if (D || !E) return /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ y("div", {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ v("div", {
-					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
 					children: /* @__PURE__ */ v("svg", {
-						className: "size-6 text-destructive",
+						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -122,25 +126,25 @@ var C = () => {
 					})
 				}),
 				/* @__PURE__ */ v("h2", {
-					className: "text-lg font-semibold text-foreground",
-					children: s("billing.subscriptions.notFound", "Subscription not found")
+					className: "text-lg font-semibold text-text-primary",
+					children: u("billing.subscriptions.notFound", "Subscription not found")
 				}),
 				/* @__PURE__ */ v("p", {
-					className: "text-sm text-muted-foreground",
-					children: O?.message || "The subscription you are looking for does not exist."
+					className: "text-sm text-text-secondary",
+					children: D?.message || "The subscription you are looking for does not exist."
 				}),
 				/* @__PURE__ */ v("button", {
 					type: "button",
-					onClick: () => x(m("/subscriptions", E)),
-					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					onClick: () => b(m("/subscriptions", T)),
+					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 					children: "Back to Subscriptions"
 				})
 			]
 		})
 	});
-	let U = D.plan, W = D.quotas || [], G = D.addonSubscriptions || [], K = D.transactions || [], q = D.history || [], ve = f(D.status), J = D.status === "active", Y = M.filter((e) => e.assignment.subscriptionId === D.id && e.assignment.isActive), X = !!D.assignedWorkspaceId || Y.length > 0, Z = new Date(D.endDate), ye = new Date(D.startDate), be = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - ye.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - be.getTime()) / (1e3 * 60 * 60 * 24))), xe = Math.round((Q - $) / Q * 100);
+	let U = E.plan, W = E.quotas || [], G = E.addonSubscriptions || [], K = E.transactions || [], q = E.history || [], be = ee(E.status), J = E.status === "active", Y = N.filter((e) => e.assignment.subscriptionId === E.id && e.assignment.isActive), X = !!E.assignedWorkspaceId || Y.length > 0, Z = new Date(E.endDate), xe = new Date(E.startDate), Se = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - xe.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - Se.getTime()) / (1e3 * 60 * 60 * 24))), Ce = Math.round((Q - $) / Q * 100);
 	return /* @__PURE__ */ y("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
@@ -148,8 +152,9 @@ var C = () => {
 					className: "flex items-start gap-4",
 					children: [/* @__PURE__ */ v("button", {
 						type: "button",
-						onClick: () => x(m("/subscriptions", E)),
-						className: "p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
+						"aria-label": "Back to subscriptions",
+						onClick: () => b(m("/subscriptions", T)),
+						className: "p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200",
 						children: /* @__PURE__ */ v("svg", {
 							className: "size-5",
 							fill: "none",
@@ -163,42 +168,43 @@ var C = () => {
 							})
 						})
 					}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("div", {
-						className: "flex items-center gap-3",
+						className: "flex items-center gap-3 flex-wrap",
 						children: [/* @__PURE__ */ v("h1", {
-							className: "text-2xl font-bold text-foreground",
+							className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 							children: U?.name || "Subscription"
-						}), /* @__PURE__ */ v("span", {
-							className: `px-2 py-1 text-xs font-medium rounded ${d(ve)}`,
-							children: l(D.status)
+						}), /* @__PURE__ */ v(n, {
+							status: be,
+							dot: !0,
+							children: f(E.status)
 						})]
 					}), /* @__PURE__ */ v("p", {
-						className: "text-sm text-muted-foreground mt-1",
-						children: U?.pricingModel === r.PER_SEAT && U.pricePerSeat ? `${a(U.pricePerSeat, U.currency)} / seat / ${c(U.duration)} · ${D.seatCount ?? U.minSeats ?? 1} seats = ${a(U.pricePerSeat * (D.seatCount ?? U.minSeats ?? 1), U.currency)} / ${c(U.duration)}` : U ? `${a(U.price, U.currency)} / ${c(U.duration)}` : "Unknown plan"
+						className: "text-sm text-text-secondary mt-1",
+						children: U?.pricingModel === o.PER_SEAT && U.pricePerSeat ? `${c(U.pricePerSeat, U.currency)} / seat / ${d(U.duration)} · ${E.seatCount ?? U.minSeats ?? 1} seats = ${c(U.pricePerSeat * (E.seatCount ?? U.minSeats ?? 1), U.currency)} / ${d(U.duration)}` : U ? `${c(U.price, U.currency)} / ${d(U.duration)}` : "Unknown plan"
 					})] })]
 				}), /* @__PURE__ */ y("div", {
 					className: "flex items-center gap-2",
 					children: [
-						J && T.canUpdateSubscription && U?.pricingModel === r.PER_SEAT && /* @__PURE__ */ v("button", {
+						J && w.canUpdateSubscription && U?.pricingModel === o.PER_SEAT && /* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => L(!0),
-							className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-accent text-foreground transition-colors",
+							className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 							children: "Manage Seats"
 						}),
-						J && T.canUpdateSubscription && /* @__PURE__ */ v("button", {
+						J && w.canUpdateSubscription && /* @__PURE__ */ v("button", {
 							type: "button",
-							onClick: () => x(m(`/subscriptions/${D.id}/upgrade`, E ?? D.billingAccountId)),
-							className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+							onClick: () => b(m(`/subscriptions/${E.id}/upgrade`, T ?? E.billingAccountId)),
+							className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 							children: "Change Plan"
 						}),
-						J && T.canCancelSubscription && !D.canceledAt && /* @__PURE__ */ v("button", {
+						J && w.canCancelSubscription && !E.canceledAt && /* @__PURE__ */ v("button", {
 							type: "button",
-							onClick: () => F(!0),
-							disabled: A,
-							className: "px-4 py-2 text-sm font-medium border border-border text-destructive rounded-md hover:bg-destructive/10 transition-colors disabled:opacity-50",
-							children: A ? "Canceling..." : "Cancel Subscription"
+							onClick: () => I(!0),
+							disabled: k,
+							className: "px-4 py-2 text-sm font-medium border border-border-subtle text-status-error-text rounded-button hover:bg-status-error-bg-subtle hover:border-border-strong transition-all duration-200 disabled:opacity-50",
+							children: k ? "Canceling..." : "Cancel Subscription"
 						}),
-						D.canceledAt && /* @__PURE__ */ v("span", {
-							className: "px-4 py-2 text-sm font-medium text-status-warning-text bg-status-warning-bg-subtle rounded-md",
+						E.canceledAt && /* @__PURE__ */ v("span", {
+							className: "px-4 py-2 text-sm font-medium text-status-warning-text bg-status-warning-bg-subtle rounded-button",
 							children: "Cancellation Scheduled"
 						})
 					]
@@ -209,39 +215,38 @@ var C = () => {
 				children: [/* @__PURE__ */ y("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						J && /* @__PURE__ */ y("div", {
-							className: "border border-border rounded-lg bg-card p-6",
+						J && /* @__PURE__ */ y(t, {
+							className: "p-5",
 							children: [/* @__PURE__ */ y("div", {
 								className: "flex items-center justify-between mb-4",
 								children: [/* @__PURE__ */ v("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-base font-semibold text-text-primary",
 									children: "Current Period"
 								}), /* @__PURE__ */ y("span", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary tabular-nums",
 									children: [$, " days remaining"]
 								})]
 							}), /* @__PURE__ */ y("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ v("div", {
-									className: "h-2 rounded-full bg-muted overflow-hidden",
-									children: /* @__PURE__ */ v("div", {
-										className: "h-full bg-primary transition-all duration-300",
-										style: { width: `${xe}%` }
-									})
+								children: [/* @__PURE__ */ v(r, {
+									value: Ce,
+									status: "primary",
+									size: "md",
+									"aria-label": "Billing period progress"
 								}), /* @__PURE__ */ y("div", {
-									className: "flex items-center justify-between text-sm text-muted-foreground",
-									children: [/* @__PURE__ */ v("span", { children: o(D.startDate, "short") }), /* @__PURE__ */ v("span", { children: o(D.endDate, "short") })]
+									className: "flex items-center justify-between text-sm text-text-secondary",
+									children: [/* @__PURE__ */ v("span", { children: l(E.startDate, "short") }), /* @__PURE__ */ v("span", { children: l(E.endDate, "short") })]
 								})]
 							})]
 						}),
-						/* @__PURE__ */ y("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+						/* @__PURE__ */ y(t, {
+							className: "overflow-hidden",
 							children: [/* @__PURE__ */ y("div", {
-								className: "p-6 border-b border-border bg-muted/30",
+								className: "p-5 border-b border-border-subtle",
 								children: [/* @__PURE__ */ y("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-base font-semibold text-text-primary",
 									children: ["Plan Quotas", W.length > 0 && /* @__PURE__ */ y("span", {
-										className: "ml-2 text-sm font-normal text-muted-foreground",
+										className: "ml-2 text-sm font-normal text-text-muted tabular-nums",
 										children: [
 											"(",
 											W.length,
@@ -249,54 +254,55 @@ var C = () => {
 										]
 									})]
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground mt-0.5",
+									className: "text-sm text-text-secondary mt-0.5",
 									children: "Limits included in your plan"
 								})]
 							}), /* @__PURE__ */ v("div", {
-								className: "p-6",
+								className: "p-5",
 								children: W.length === 0 ? /* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "No quotas assigned to this subscription."
 								}) : /* @__PURE__ */ v("div", {
 									className: "space-y-3",
-									children: W.map((e) => /* @__PURE__ */ v(oe, { quota: e }, e.id))
+									children: W.map((e) => /* @__PURE__ */ v(C, { quota: e }, e.id))
 								})
 							})]
 						}),
-						J && j && /* @__PURE__ */ y("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+						J && M && /* @__PURE__ */ y(t, {
+							className: "overflow-hidden",
 							children: [
 								/* @__PURE__ */ y("div", {
-									className: "p-6 border-b border-border bg-muted/30 flex items-center justify-between",
+									className: "p-5 border-b border-border-subtle flex items-center justify-between gap-4",
 									children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
-										className: "text-lg font-semibold text-foreground",
+										className: "text-base font-semibold text-text-primary",
 										children: "Workspace Quotas"
 									}), /* @__PURE__ */ v("p", {
-										className: "text-sm text-muted-foreground mt-0.5",
+										className: "text-sm text-text-secondary mt-0.5",
 										children: "Active limits for your workspace"
-									})] }), X ? /* @__PURE__ */ y("span", {
-										className: "flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-status-success-bg-subtle text-status-success-text",
-										children: [/* @__PURE__ */ v("span", { className: "size-1.5 rounded-full bg-status-success-text inline-block" }), "Active"]
+									})] }), X ? /* @__PURE__ */ v(n, {
+										status: "success",
+										dot: !0,
+										children: "Active"
 									}) : /* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => R(!0),
-										className: "px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+										className: "px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 										children: "Activate for Workspace"
 									})]
 								}),
 								/* @__PURE__ */ v("div", {
-									className: "p-6",
+									className: "p-5",
 									children: X ? Y.length > 0 ? /* @__PURE__ */ v("div", {
 										className: "space-y-3",
-										children: Y.map((e) => /* @__PURE__ */ v(se, { item: e }, e.assignment.id))
+										children: Y.map((e) => /* @__PURE__ */ v(le, { item: e }, e.assignment.id))
 									}) : /* @__PURE__ */ y("p", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: [
 											"Quotas are activated on workspace",
 											" ",
 											/* @__PURE__ */ v("span", {
-												className: "font-mono text-xs text-foreground",
-												children: D.assignedWorkspaceId
+												className: "font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5",
+												children: E.assignedWorkspaceId
 											}),
 											". Usage data will appear here once quotas are consumed."
 										]
@@ -317,17 +323,17 @@ var C = () => {
 												})
 											})
 										}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-											className: "text-sm font-medium text-foreground",
+											className: "text-sm font-medium text-text-primary",
 											children: "Workspace quotas not activated yet"
 										}), /* @__PURE__ */ y("p", {
-											className: "text-sm text-muted-foreground mt-0.5",
+											className: "text-sm text-text-secondary mt-0.5",
 											children: [
 												"Click",
 												" ",
 												/* @__PURE__ */ v("button", {
 													type: "button",
 													onClick: () => R(!0),
-													className: "text-primary hover:underline font-medium",
+													className: "text-text-link hover:underline font-medium",
 													children: "Activate for Workspace"
 												}),
 												" ",
@@ -336,61 +342,68 @@ var C = () => {
 										})] })]
 									})
 								}),
-								ge && /* @__PURE__ */ v(re, {
-									billingAccountId: E ?? D.billingAccountId,
-									subscriptionId: D.id,
+								ve && /* @__PURE__ */ v(g, {
+									billingAccountId: T ?? E.billingAccountId,
+									subscriptionId: E.id,
 									quotas: [],
 									workspaces: [{
-										id: j,
+										id: M,
 										name: "Current workspace"
 									}],
-									currentWorkspaceId: j,
+									currentWorkspaceId: M,
 									onAssigned: () => {
-										R(!1), k(), N();
+										R(!1), O(), P();
 									},
 									onSkip: () => R(!1)
 								})
 							]
 						}),
-						G.length > 0 && /* @__PURE__ */ y("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+						G.length > 0 && /* @__PURE__ */ y(t, {
+							className: "overflow-hidden",
 							children: [/* @__PURE__ */ v("div", {
-								className: "p-6 border-b border-border bg-muted/30",
+								className: "p-5 border-b border-border-subtle",
 								children: /* @__PURE__ */ y("h2", {
-									className: "text-lg font-semibold text-foreground",
+									className: "text-base font-semibold text-text-primary",
 									children: [
-										"Addons (",
-										G.length,
-										")"
+										"Addons",
+										" ",
+										/* @__PURE__ */ y("span", {
+											className: "text-sm font-normal text-text-muted tabular-nums",
+											children: [
+												"(",
+												G.length,
+												")"
+											]
+										})
 									]
 								})
 							}), /* @__PURE__ */ v("div", {
-								className: "p-6",
+								className: "p-5",
 								children: /* @__PURE__ */ v("div", {
 									className: "space-y-3",
-									children: G.map((e) => /* @__PURE__ */ v(ce, { addonSubscription: e }, e.id))
+									children: G.map((e) => /* @__PURE__ */ v(ue, { addonSubscription: e }, e.id))
 								})
 							})]
 						}),
-						K.length > 0 && /* @__PURE__ */ y("div", {
-							className: "border border-border rounded-lg bg-card overflow-hidden",
+						K.length > 0 && /* @__PURE__ */ y(t, {
+							className: "overflow-hidden",
 							children: [
 								/* @__PURE__ */ v("div", {
-									className: "p-6 border-b border-border bg-muted/30",
+									className: "p-5 border-b border-border-subtle",
 									children: /* @__PURE__ */ v("h2", {
-										className: "text-lg font-semibold text-foreground",
+										className: "text-base font-semibold text-text-primary",
 										children: "Recent Transactions"
 									})
 								}),
 								/* @__PURE__ */ v("div", {
-									className: "divide-y divide-border",
-									children: K.slice(0, 5).map((e) => /* @__PURE__ */ v(w, { transaction: e }, e.id))
+									className: "divide-y divide-border-subtle",
+									children: K.slice(0, 5).map((e) => /* @__PURE__ */ v(de, { transaction: e }, e.id))
 								}),
 								K.length > 5 && /* @__PURE__ */ v("div", {
-									className: "p-4 text-center border-t border-border",
+									className: "p-4 text-center border-t border-border-subtle",
 									children: /* @__PURE__ */ v("button", {
 										type: "button",
-										className: "text-sm text-primary hover:underline",
+										className: "text-sm text-text-link hover:underline",
 										children: "View all transactions"
 									})
 								})
@@ -399,128 +412,128 @@ var C = () => {
 					]
 				}), /* @__PURE__ */ y("div", {
 					className: "space-y-6",
-					children: [/* @__PURE__ */ y("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden",
+					children: [/* @__PURE__ */ y(t, {
+						className: "overflow-hidden",
 						children: [/* @__PURE__ */ v("div", {
-							className: "p-6 border-b border-border bg-muted/30",
+							className: "p-5 border-b border-border-subtle",
 							children: /* @__PURE__ */ v("h2", {
-								className: "text-lg font-semibold text-foreground",
+								className: "text-base font-semibold text-text-primary",
 								children: "Details"
 							})
 						}), /* @__PURE__ */ y("div", {
-							className: "p-6 space-y-4",
+							className: "p-5 space-y-4",
 							children: [
 								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "Subscription ID"
 								}), /* @__PURE__ */ v("p", {
-									className: "font-mono text-sm text-foreground mt-0.5 break-all",
-									children: D.id
+									className: "font-mono text-sm text-text-primary mt-0.5 break-all",
+									children: E.id
 								})] }),
 								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "Plan"
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-foreground mt-0.5",
+									className: "text-sm text-text-primary mt-0.5",
 									children: U?.name || "Unknown"
 								})] }),
 								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "Billing Account"
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-foreground mt-0.5",
-									children: D.billingAccount?.name || "Unknown"
+									className: "text-sm text-text-primary mt-0.5",
+									children: E.billingAccount?.name || "Unknown"
 								})] }),
 								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "Start Date"
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-foreground mt-0.5",
-									children: o(D.startDate)
+									className: "text-sm text-text-primary mt-0.5",
+									children: l(E.startDate)
 								})] }),
 								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "End Date"
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-foreground mt-0.5",
-									children: o(D.endDate)
+									className: "text-sm text-text-primary mt-0.5",
+									children: l(E.endDate)
 								})] }),
-								D.nextBillingDate && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+								E.nextBillingDate && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
 									children: "Next Billing"
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-foreground mt-0.5",
-									children: o(D.nextBillingDate)
+									className: "text-sm text-text-primary mt-0.5",
+									children: l(E.nextBillingDate)
 								})] }),
 								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: "Auto Renewal"
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-foreground mt-0.5",
-									children: D.autoRenewal ? "Enabled" : "Disabled"
+									className: "text-sm text-text-primary mt-0.5",
+									children: E.autoRenewal ? "Enabled" : "Disabled"
 								})] }),
-								D.paymentGateway && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-									className: "text-sm text-muted-foreground",
+								E.paymentGateway && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
 									children: "Payment Gateway"
 								}), /* @__PURE__ */ v("p", {
-									className: "text-sm text-foreground mt-0.5 capitalize",
-									children: D.paymentGateway
+									className: "text-sm text-text-primary mt-0.5 capitalize",
+									children: E.paymentGateway
 								})] })
 							]
 						})]
-					}), q.length > 0 && /* @__PURE__ */ y("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden",
+					}), q.length > 0 && /* @__PURE__ */ y(t, {
+						className: "overflow-hidden",
 						children: [/* @__PURE__ */ v("div", {
-							className: "p-6 border-b border-border bg-muted/30",
+							className: "p-5 border-b border-border-subtle",
 							children: /* @__PURE__ */ v("h2", {
-								className: "text-lg font-semibold text-foreground",
+								className: "text-base font-semibold text-text-primary",
 								children: "History"
 							})
 						}), /* @__PURE__ */ v("div", {
-							className: "p-6",
+							className: "p-5",
 							children: /* @__PURE__ */ v("div", {
 								className: "space-y-3",
-								children: q.slice(0, 5).map((e) => /* @__PURE__ */ v(le, { item: e }, e.id))
+								children: q.slice(0, 5).map((e) => /* @__PURE__ */ v(fe, { item: e }, e.id))
 							})
 						})]
 					})]
 				})]
 			}),
-			I && D && /* @__PURE__ */ v(ie, {
-				subscription: D,
+			_e && E && /* @__PURE__ */ v(oe, {
+				subscription: E,
 				onClose: () => L(!1),
 				onConfirm: async (e) => {
-					await me({
-						subscriptionId: D.id,
+					await A({
+						subscriptionId: E.id,
 						seatCount: e
-					}), await k();
+					}), await O();
 				},
-				isLoading: he
+				isLoading: j
 			}),
-			P && /* @__PURE__ */ y("div", {
+			F && /* @__PURE__ */ y("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center",
 				children: [/* @__PURE__ */ v("div", {
 					className: "absolute inset-0 bg-overlay-scrim",
-					onClick: () => F(!1)
+					onClick: () => I(!1)
 				}), /* @__PURE__ */ y("div", {
-					className: "relative bg-card border border-border rounded-lg shadow-lg w-full max-w-md mx-4 p-6",
+					className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] w-full max-w-md mx-4 p-6",
 					role: "dialog",
 					"aria-modal": "true",
 					"aria-labelledby": "cancel-subscription-title",
 					children: [
 						/* @__PURE__ */ v("h3", {
 							id: "cancel-subscription-title",
-							className: "text-lg font-semibold text-foreground mb-2",
+							className: "text-lg font-semibold text-text-primary mb-2",
 							children: "Cancel Subscription"
 						}),
 						/* @__PURE__ */ y("p", {
-							className: "text-sm text-muted-foreground mb-4",
+							className: "text-sm text-text-secondary mb-4",
 							children: [
 								"Are you sure you want to cancel this subscription? Your subscription will remain active until",
 								" ",
 								/* @__PURE__ */ v("span", {
-									className: "font-medium text-foreground",
-									children: o(D.endDate)
+									className: "font-medium text-text-primary",
+									children: l(E.endDate)
 								}),
 								", but will not renew automatically."
 							]
@@ -528,20 +541,20 @@ var C = () => {
 						/* @__PURE__ */ y("div", {
 							className: "mb-4",
 							children: [/* @__PURE__ */ v("label", {
-								className: "block text-sm font-medium text-foreground mb-1",
+								className: "block text-sm font-medium text-text-primary mb-1",
 								children: "Reason for cancellation (optional)"
 							}), /* @__PURE__ */ v("textarea", {
 								value: z,
 								onChange: (e) => B(e.target.value),
 								placeholder: "Please share why you're canceling...",
-								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 resize-none",
+								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent resize-none",
 								rows: 3
 							})]
 						}),
 						V && /* @__PURE__ */ v("div", {
-							className: "mb-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md",
+							className: "mb-4 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card",
 							children: /* @__PURE__ */ v("p", {
-								className: "text-sm text-destructive",
+								className: "text-sm text-status-error-text",
 								children: V
 							})
 						}),
@@ -550,16 +563,16 @@ var C = () => {
 							children: [/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => {
-									F(!1), B(""), H(null);
+									I(!1), B(""), H(null);
 								},
-								className: "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+								className: "px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors",
 								children: "Keep Subscription"
 							}), /* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: _e,
-								disabled: A,
-								className: "px-4 py-2 text-sm font-medium bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors disabled:opacity-50",
-								children: A ? "Canceling..." : "Confirm Cancellation"
+								onClick: ye,
+								disabled: k,
+								className: "px-4 py-2 text-sm font-medium bg-action-danger-bg text-action-danger-text rounded-button hover:bg-action-danger-bgHover transition-colors duration-200 disabled:opacity-50",
+								children: k ? "Canceling..." : "Confirm Cancellation"
 							})]
 						})
 					]
@@ -567,132 +580,132 @@ var C = () => {
 			})
 		]
 	});
-}, oe = ({ quota: e }) => {
-	let t = e.context, n = x(e.name, t), r = t?.description && typeof t.description == "string" ? t.description : null, a = e.limits?.value ?? 0, c = e.currentUsageSum ?? 0, l = a > 0 ? Math.min(100, c / a * 100) : 0, d = e.name.includes("bytes") || e.name.includes("storage"), f = e.quotaType === "POOLED";
+}, C = ({ quota: e }) => {
+	let t = e.context, n = b(e.name, t), r = t?.description && typeof t.description == "string" ? t.description : null, i = e.limits?.value ?? 0, a = e.currentUsageSum ?? 0, o = i > 0 ? Math.min(100, a / i * 100) : 0, c = e.name.includes("bytes") || e.name.includes("storage"), d = e.quotaType === "POOLED";
 	return /* @__PURE__ */ y("div", {
-		className: "p-4 rounded-lg border border-border bg-card",
+		className: "p-4 rounded-card border border-border-subtle bg-bg-surface",
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "flex items-start justify-between gap-4 mb-2",
 				children: [/* @__PURE__ */ y("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ v("p", {
-						className: "font-medium text-foreground truncate",
+						className: "font-medium text-text-primary truncate",
 						children: n
 					}), r && /* @__PURE__ */ v("p", {
-						className: "text-xs text-muted-foreground mt-0.5 line-clamp-2",
+						className: "text-xs text-text-secondary mt-0.5 line-clamp-2",
 						children: r
 					})]
 				}), /* @__PURE__ */ y("span", {
-					className: "text-sm font-medium text-foreground shrink-0 tabular-nums",
+					className: "text-sm font-medium text-text-primary shrink-0 tabular-nums",
 					children: [
-						d ? i(c) : c.toLocaleString(),
+						c ? s(a) : a.toLocaleString(),
 						" / ",
-						a > 0 ? d ? i(a) : a.toLocaleString() : "∞"
+						i > 0 ? c ? s(i) : i.toLocaleString() : "∞"
 					]
 				})]
 			}),
-			a > 0 && /* @__PURE__ */ v("div", {
-				className: "h-1.5 rounded-full bg-muted overflow-hidden mb-2",
+			i > 0 && /* @__PURE__ */ v("div", {
+				className: "h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2",
 				children: /* @__PURE__ */ v("div", {
-					className: `h-full transition-all duration-300 ${u(l)}`,
-					style: { width: `${l}%` }
+					className: `h-full rounded-full transition-all duration-300 ${p(o)}`,
+					style: { width: `${o}%` }
 				})
 			}),
 			/* @__PURE__ */ y("div", {
-				className: "flex items-center justify-between text-xs text-muted-foreground",
+				className: "flex items-center justify-between text-xs text-text-secondary",
 				children: [/* @__PURE__ */ v("span", {
-					className: "px-1.5 py-0.5 rounded bg-muted font-medium",
-					children: f ? "Shared" : "Per Workspace"
+					className: "px-1.5 py-0.5 rounded bg-bg-sunken font-medium",
+					children: d ? "Shared" : "Per Workspace"
 				}), /* @__PURE__ */ y("div", {
 					className: "flex items-center gap-3",
-					children: [e.endtime && /* @__PURE__ */ y("span", { children: ["Expires ", o(e.endtime, "short")] }), a > 0 && /* @__PURE__ */ y("span", {
-						className: l >= 90 ? "text-status-error-text font-medium" : l >= 70 ? "text-status-warning-text font-medium" : "",
-						children: [s(l), " used"]
+					children: [e.endtime && /* @__PURE__ */ y("span", { children: ["Expires ", l(e.endtime, "short")] }), i > 0 && /* @__PURE__ */ y("span", {
+						className: o >= 90 ? "text-status-error-text font-medium" : o >= 70 ? "text-status-warning-text font-medium" : "",
+						children: [u(o), " used"]
 					})]
 				})]
 			})
 		]
 	});
-}, se = ({ item: e }) => {
-	let { assignment: t, effectiveUsed: n, usagePercentage: r } = e, a = x(t.quotaName), c = !t.noLimit && t.limit !== null, l = t.limit ?? 0, d = t.quotaName.includes("bytes") || t.quotaName.includes("storage"), f = S(t.resetPeriod);
+}, le = ({ item: e }) => {
+	let { assignment: t, effectiveUsed: n, usagePercentage: r } = e, i = b(t.quotaName), a = !t.noLimit && t.limit !== null, o = t.limit ?? 0, c = t.quotaName.includes("bytes") || t.quotaName.includes("storage"), d = x(t.resetPeriod);
 	return /* @__PURE__ */ y("div", {
-		className: "p-4 rounded-lg border border-border bg-card",
+		className: "p-4 rounded-card border border-border-subtle bg-bg-surface",
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "flex items-start justify-between gap-4 mb-2",
 				children: [/* @__PURE__ */ y("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ v("p", {
-						className: "font-medium text-foreground truncate",
-						children: a
+						className: "font-medium text-text-primary truncate",
+						children: i
 					}), /* @__PURE__ */ y("p", {
-						className: "text-xs text-muted-foreground mt-0.5",
-						children: [t.quotaMode === "pooled" ? "Pooled across workspaces" : "Dedicated", f && ` · ${f}`]
+						className: "text-xs text-text-secondary mt-0.5",
+						children: [t.quotaMode === "pooled" ? "Pooled across workspaces" : "Dedicated", d && ` · ${d}`]
 					})]
 				}), /* @__PURE__ */ y("span", {
-					className: "text-sm font-medium text-foreground shrink-0 tabular-nums",
+					className: "text-sm font-medium text-text-primary shrink-0 tabular-nums",
 					children: [
-						d ? i(n) : n.toLocaleString(),
+						c ? s(n) : n.toLocaleString(),
 						" / ",
-						t.noLimit ? "∞" : c ? d ? i(l) : l.toLocaleString() : "∞"
+						t.noLimit ? "∞" : a ? c ? s(o) : o.toLocaleString() : "∞"
 					]
 				})]
 			}),
-			c && /* @__PURE__ */ v("div", {
-				className: "h-1.5 rounded-full bg-muted overflow-hidden mb-2",
+			a && /* @__PURE__ */ v("div", {
+				className: "h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2",
 				children: /* @__PURE__ */ v("div", {
-					className: `h-full transition-all duration-300 ${u(r)}`,
+					className: `h-full rounded-full transition-all duration-300 ${p(r)}`,
 					style: { width: `${Math.min(100, r)}%` }
 				})
 			}),
 			/* @__PURE__ */ y("div", {
-				className: "flex items-center justify-between text-xs text-muted-foreground",
-				children: [/* @__PURE__ */ y("span", { children: ["Since ", o(t.createdAt, "short")] }), c && /* @__PURE__ */ y("span", {
+				className: "flex items-center justify-between text-xs text-text-secondary",
+				children: [/* @__PURE__ */ y("span", { children: ["Since ", l(t.createdAt, "short")] }), a && /* @__PURE__ */ y("span", {
 					className: r >= 90 ? "text-status-error-text font-medium" : r >= 70 ? "text-status-warning-text font-medium" : "",
-					children: [s(r), " used"]
+					children: [u(r), " used"]
 				})]
 			})
 		]
 	});
-}, ce = ({ addonSubscription: e }) => {
+}, ue = ({ addonSubscription: e }) => {
 	let t = e.addon;
 	return /* @__PURE__ */ y("div", {
-		className: "flex items-center justify-between p-3 rounded-lg bg-muted/30",
+		className: "flex items-center justify-between p-3 rounded-card border border-border-subtle bg-bg-sunken",
 		children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-			className: "font-medium text-foreground",
+			className: "font-medium text-text-primary",
 			children: t?.name || "Unknown Addon"
 		}), /* @__PURE__ */ y("p", {
-			className: "text-sm text-muted-foreground",
+			className: "text-sm text-text-secondary",
 			children: ["Qty: ", e.quantity]
 		})] }), t && /* @__PURE__ */ v("p", {
-			className: "text-sm font-medium text-foreground",
-			children: a(t.price * e.quantity, t.currency)
+			className: "text-sm font-medium text-text-primary tabular-nums",
+			children: c(t.price * e.quantity, t.currency)
 		})]
 	});
-}, w = ({ transaction: e }) => /* @__PURE__ */ y("div", {
-	className: "flex items-center justify-between px-6 py-4",
+}, de = ({ transaction: e }) => /* @__PURE__ */ y("div", {
+	className: "flex items-center justify-between px-5 py-4 hover:bg-bg-sunken transition-colors",
 	children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
-		className: "font-medium text-foreground capitalize",
+		className: "font-medium text-text-primary capitalize",
 		children: e.type
 	}), /* @__PURE__ */ v("p", {
-		className: "text-sm text-muted-foreground",
-		children: o(e.createdAt, "short")
+		className: "text-sm text-text-secondary",
+		children: l(e.createdAt, "short")
 	})] }), /* @__PURE__ */ y("div", {
 		className: "text-right",
 		children: [/* @__PURE__ */ y("p", {
-			className: `font-medium ${e.type === "refund" ? "text-status-error-text" : "text-foreground"}`,
-			children: [e.type === "refund" ? "-" : "", a(e.amount, e.currency)]
+			className: `font-medium tabular-nums ${e.type === "refund" ? "text-status-error-text" : "text-text-primary"}`,
+			children: [e.type === "refund" ? "-" : "", c(e.amount, e.currency)]
 		}), /* @__PURE__ */ v("p", {
-			className: "text-sm text-muted-foreground capitalize",
+			className: "text-sm text-text-secondary capitalize",
 			children: e.status
 		})]
 	})]
-}), le = ({ item: e }) => /* @__PURE__ */ y("div", {
+}), fe = ({ item: e }) => /* @__PURE__ */ y("div", {
 	className: "flex items-start gap-3",
-	children: [/* @__PURE__ */ v("div", { className: "size-2 rounded-full bg-muted-foreground mt-2 shrink-0" }), /* @__PURE__ */ y("div", { children: [
+	children: [/* @__PURE__ */ v("div", { className: "size-2 rounded-full bg-text-muted mt-2 shrink-0" }), /* @__PURE__ */ y("div", { children: [
 		/* @__PURE__ */ y("p", {
-			className: "text-sm text-foreground",
+			className: "text-sm text-text-primary",
 			children: [
 				/* @__PURE__ */ v("span", {
 					className: "capitalize",
@@ -706,16 +719,16 @@ var C = () => {
 			]
 		}),
 		e.reason && /* @__PURE__ */ v("p", {
-			className: "text-xs text-muted-foreground mt-0.5",
+			className: "text-xs text-text-secondary mt-0.5",
 			children: e.reason
 		}),
 		/* @__PURE__ */ v("p", {
-			className: "text-xs text-muted-foreground mt-0.5",
-			children: o(e.createdAt, "short")
+			className: "text-xs text-text-secondary mt-0.5",
+			children: l(e.createdAt, "short")
 		})
 	] })]
 });
 //#endregion
-export { C as SubscriptionDetailPage };
+export { S as SubscriptionDetailPage };
 
 //# sourceMappingURL=SubscriptionDetailPage.js.map