@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

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

@@ -1,7 +1,9 @@
 import { useBilling as e } from "../../../providers/BillingProvider.js";
-import { useBillingAccountSelection as t } from "../../../hooks/useBillingAccountSelection.js";
-import { formatCurrency as n, formatDate as r, formatPlanDuration as i, formatSubscriptionStatus as a } from "../../../shared/utils/format.js";
-import { getStatusBadgeClasses as o, getSubscriptionStatusColor as s } from "../../../shared/utils/status.js";
+import { StatusPill as t } from "../../../shared/ui/StatusPill.js";
+import "../../../shared/ui/index.js";
+import { useBillingAccountSelection as n } from "../../../hooks/useBillingAccountSelection.js";
+import { formatCurrency as r, formatDate as i, formatPlanDuration as a, formatSubscriptionStatus as o } from "../../../shared/utils/format.js";
+import { getSubscriptionStatusColor as s } from "../../../shared/utils/status.js";
 import { useBillingPermissions as c } from "../../../hooks/useBillingPermissions.js";
 import { useBillingNavigate as l } from "../../../hooks/useBillingNavigate.js";
 import { withBillingAccountId as u } from "../../../shared/utils/navigation.js";
@@ -12,10 +14,10 @@ import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { useI18n as y } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx
 var b = ["expired", "upgraded"], x = 10, S = () => {
-	let { t: n } = y(), r = (e, t) => {
-		let r = n(e);
-		return r === e ? t : r;
-	}, i = l(), a = c(), { orgId: o } = e(), { billingAccounts: s, isLoading: S } = d(), { selectedAccountId: w, setSelectedAccountId: T } = t({
+	let { t } = y(), r = (e, n) => {
+		let r = t(e);
+		return r === e ? n : r;
+	}, i = l(), a = c(), { orgId: o } = e(), { billingAccounts: s, isLoading: S } = d(), { selectedAccountId: w, setSelectedAccountId: T } = n({
 		orgId: o,
 		billingAccounts: s,
 		syncFromUrl: !0,
@@ -31,19 +33,19 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 	}, q = L.filter((e) => O === "all" ? !0 : O === "inactive" ? b.includes(e.status) : e.status === O), J = S || V;
 	return a.canViewSubscriptions ? J && !W ? /* @__PURE__ */ v("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ _("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", {
+		children: [/* @__PURE__ */ _("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ _("div", {
 			className: "space-y-4",
 			children: [
 				1,
 				2,
 				3
 			].map((e) => /* @__PURE__ */ _("div", {
-				className: "border border-border rounded-lg p-6",
+				className: "border border-border-subtle rounded-lg p-6",
 				children: /* @__PURE__ */ v("div", {
 					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ _("div", { className: "size-12 bg-muted animate-pulse rounded" }), /* @__PURE__ */ v("div", {
+					children: [/* @__PURE__ */ _("div", { className: "size-12 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ v("div", {
 						className: "flex-1 space-y-2",
-						children: [/* @__PURE__ */ _("div", { className: "h-5 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", { className: "h-4 w-48 bg-muted animate-pulse rounded" })]
+						children: [/* @__PURE__ */ _("div", { className: "h-5 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ _("div", { className: "h-4 w-48 bg-bg-sunken animate-pulse rounded" })]
 					})]
 				})
 			}, e))
@@ -54,9 +56,9 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ _("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__ */ _("svg", {
-						className: "size-6 text-destructive",
+						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -69,36 +71,36 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 					})
 				}),
 				/* @__PURE__ */ _("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Failed to load subscriptions"
 				}),
 				/* @__PURE__ */ _("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: H.message
 				}),
 				/* @__PURE__ */ _("button", {
 					type: "button",
 					onClick: () => U(),
-					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					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",
 					children: "Try Again"
 				})
 			]
 		})
 	}) : /* @__PURE__ */ v("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ v("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: r("billing.subscriptions.title", "Subscriptions")
 				}), /* @__PURE__ */ _("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-secondary mt-1",
 					children: r("billing.subscriptions.subtitle", "Manage your active and past subscriptions")
 				})] }), a.canCreateSubscription && /* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: () => i("/plans"),
-					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					className: "inline-flex items-center gap-2 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: [/* @__PURE__ */ _("svg", {
 						className: "size-4",
 						fill: "none",
@@ -118,13 +120,13 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 				children: [/* @__PURE__ */ v("button", {
 					type: "button",
 					onClick: () => D(!E),
-					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",
+					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-subtle rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 					children: [/* @__PURE__ */ v("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ _("div", {
-							className: "size-8 rounded-lg bg-primary/10 flex items-center justify-center",
+							className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
 							children: /* @__PURE__ */ _("svg", {
-								className: "size-4 text-primary",
+								className: "size-4 text-text-link",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
@@ -138,15 +140,15 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 						}), /* @__PURE__ */ v("div", {
 							className: "text-left",
 							children: [/* @__PURE__ */ _("p", {
-								className: "text-sm font-medium text-foreground",
+								className: "text-sm font-medium text-text-primary",
 								children: W?.name || "Select Account"
 							}), /* @__PURE__ */ _("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: W?.email
 							})]
 						})]
 					}), /* @__PURE__ */ _("svg", {
-						className: `size-4 text-muted-foreground transition-transform ${E ? "rotate-180" : ""}`,
+						className: `size-4 text-text-secondary transition-transform ${E ? "rotate-180" : ""}`,
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -161,17 +163,17 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 					className: "fixed inset-0 z-10",
 					onClick: () => D(!1)
 				}), /* @__PURE__ */ _("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",
+					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-subtle rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
 					children: s.map((e) => /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: () => G(e),
-						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
+						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ v("div", {
 							className: "flex items-center gap-3 min-w-0",
 							children: [/* @__PURE__ */ _("div", {
-								className: "size-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
+								className: "size-9 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
 								children: /* @__PURE__ */ _("svg", {
-									className: "size-4 text-muted-foreground",
+									className: "size-4 text-text-secondary",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -185,15 +187,15 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 							}), /* @__PURE__ */ v("div", {
 								className: "text-left min-w-0",
 								children: [/* @__PURE__ */ _("p", {
-									className: "text-sm font-medium text-foreground truncate",
+									className: "text-sm font-medium text-text-primary truncate",
 									children: e.name
 								}), /* @__PURE__ */ _("p", {
-									className: "text-xs text-muted-foreground truncate",
+									className: "text-xs text-text-secondary truncate",
 									children: e.email
 								})]
 							})]
 						}), W?.id === e.id && /* @__PURE__ */ _("svg", {
-							className: "size-4 text-primary flex-shrink-0",
+							className: "size-4 text-text-link flex-shrink-0",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -211,42 +213,42 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 				className: "grid grid-cols-1 sm:grid-cols-3 gap-4",
 				children: [
 					/* @__PURE__ */ v("div", {
-						className: "border border-border rounded-lg bg-card p-4",
+						className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5",
 						children: [/* @__PURE__ */ _("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Account"
 						}), /* @__PURE__ */ _("p", {
-							className: "text-lg font-semibold text-foreground mt-1",
+							className: "text-lg font-semibold text-text-primary mt-1",
 							children: W.name
 						})]
 					}),
 					/* @__PURE__ */ v("div", {
-						className: "border border-border rounded-lg bg-card p-4",
+						className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5",
 						children: [/* @__PURE__ */ _("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Active Subscriptions"
 						}), /* @__PURE__ */ _("p", {
-							className: "text-lg font-semibold text-status-success-text mt-1",
+							className: "text-lg font-semibold tabular-nums text-status-success-text mt-1",
 							children: R.length
 						})]
 					}),
 					/* @__PURE__ */ v("div", {
-						className: "border border-border rounded-lg bg-card p-4",
+						className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5",
 						children: [/* @__PURE__ */ _("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Credit Balance"
 						}), /* @__PURE__ */ v("p", {
-							className: "text-lg font-semibold text-foreground mt-1",
+							className: "text-lg font-semibold tabular-nums text-text-primary mt-1",
 							children: [(W.creditAmount || 0).toLocaleString(), " Credits"]
 						})]
 					})
 				]
 			}),
 			/* @__PURE__ */ v("div", {
-				className: "flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border",
+				className: "flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border-subtle",
 				children: [
 					/* @__PURE__ */ _("div", {
-						className: "inline-flex rounded-lg border border-border p-1 bg-muted/50 flex-wrap",
+						className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken flex-wrap",
 						children: [
 							"all",
 							"active",
@@ -255,14 +257,14 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 						].map((e) => /* @__PURE__ */ _("button", {
 							type: "button",
 							onClick: () => k(e),
-							className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${O === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+							className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${O === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 							children: e === "inactive" ? "Inactive" : e
 						}, e))
 					}),
 					/* @__PURE__ */ v("div", {
 						className: "relative flex-1 min-w-0 w-full sm:max-w-md",
 						children: [/* @__PURE__ */ _("svg", {
-							className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground",
+							className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -277,11 +279,11 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 							placeholder: r("billing.subscriptions.searchPlaceholder", "Search subscriptions..."),
 							value: A,
 							onChange: (e) => j(e.target.value),
-							className: "w-full pl-[3.25rem] pr-4 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"
+							className: "w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border-subtle rounded-button 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"
 						})]
 					}),
 					/* @__PURE__ */ v("div", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: [
 							z,
 							" subscription",
@@ -292,12 +294,12 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 				]
 			}),
 			q.length === 0 ? /* @__PURE__ */ v("div", {
-				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card",
 				children: [
 					/* @__PURE__ */ _("div", {
-						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
 						children: /* @__PURE__ */ _("svg", {
-							className: "size-6 text-muted-foreground",
+							className: "size-6 text-text-secondary",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -310,17 +312,17 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 						})
 					}),
 					/* @__PURE__ */ _("h3", {
-						className: "text-lg font-medium text-foreground",
+						className: "text-lg font-medium text-text-primary",
 						children: r("billing.subscriptions.noSubscriptionsFound", "No subscriptions found")
 					}),
 					/* @__PURE__ */ _("p", {
-						className: "text-sm text-muted-foreground mt-1",
+						className: "text-sm text-text-secondary mt-1",
 						children: O !== "all" || M ? "No subscriptions match your filters." : "You don't have any subscriptions yet."
 					}),
 					a.canCreateSubscription && O === "all" && !M && /* @__PURE__ */ _("button", {
 						type: "button",
 						onClick: () => i("/plans"),
-						className: "mt-4 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						className: "mt-4 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: "Browse Plans"
 					})
 				]
@@ -339,7 +341,7 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 						type: "button",
 						onClick: () => K(P - 1),
 						disabled: P === 1,
-						className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors",
+						className: "px-3 py-1.5 text-sm border border-border-subtle rounded-button disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
 						children: /* @__PURE__ */ _("svg", {
 							className: "size-4",
 							fill: "none",
@@ -358,12 +360,12 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 						children: Array.from({ length: B }, (e, t) => t + 1).map((e) => {
 							let t = e === 1 || e === B || Math.abs(e - P) <= 1, n = e === P - 2 && P > 3, r = e === P + 2 && P < B - 2;
 							return n || r ? /* @__PURE__ */ _("span", {
-								className: "px-2 text-muted-foreground",
+								className: "px-2 text-text-secondary",
 								children: "..."
 							}, e) : t ? /* @__PURE__ */ _("button", {
 								type: "button",
 								onClick: () => K(e),
-								className: `px-3 py-1.5 text-sm rounded-md transition-colors ${e === P ? "bg-primary text-primary-foreground" : "border border-border hover:bg-muted"}`,
+								className: `px-3 py-1.5 text-sm rounded-button transition-colors ${e === P ? "bg-action-primary-bg text-action-primary-text" : "border border-border-subtle hover:bg-bg-sunken"}`,
 								children: e
 							}, e) : null;
 						})
@@ -372,7 +374,7 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 						type: "button",
 						onClick: () => K(P + 1),
 						disabled: P === B,
-						className: "px-3 py-1.5 text-sm border border-border rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted transition-colors",
+						className: "px-3 py-1.5 text-sm border border-border-subtle rounded-button disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
 						children: /* @__PURE__ */ _("svg", {
 							className: "size-4",
 							fill: "none",
@@ -395,9 +397,9 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ _("div", {
-					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center",
 					children: /* @__PURE__ */ _("svg", {
-						className: "size-6 text-muted-foreground",
+						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -410,31 +412,31 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 					})
 				}),
 				/* @__PURE__ */ _("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Access Denied"
 				}),
 				/* @__PURE__ */ _("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 subscriptions."
 				})
 			]
 		})
 	});
-}, C = ({ subscription: e, onView: t, canCancel: c }) => {
+}, C = ({ subscription: e, onView: n, canCancel: c }) => {
 	let l = e.plan, u = s(e.status), d = e.status === "active", f = new Date(e.endDate), p = /* @__PURE__ */ new Date(), m = Math.max(0, Math.ceil((f.getTime() - p.getTime()) / (1e3 * 60 * 60 * 24)));
 	return /* @__PURE__ */ _("div", {
-		className: "border border-border rounded-lg bg-card hover:shadow-md transition-shadow cursor-pointer",
-		onClick: t,
+		className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 transition-all duration-200 cursor-pointer",
+		onClick: n,
 		children: /* @__PURE__ */ v("div", {
-			className: "p-6",
+			className: "p-5",
 			children: [
 				/* @__PURE__ */ v("div", {
 					className: "flex flex-col sm:flex-row sm:items-center gap-4",
 					children: [
 						/* @__PURE__ */ _("div", {
-							className: "size-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0",
+							className: "size-12 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0",
 							children: /* @__PURE__ */ _("svg", {
-								className: "size-6 text-primary",
+								className: "size-6 text-text-link",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
@@ -451,20 +453,21 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 							children: [/* @__PURE__ */ v("div", {
 								className: "flex items-center gap-2 flex-wrap",
 								children: [/* @__PURE__ */ _("h3", {
-									className: "font-semibold text-foreground",
+									className: "font-semibold text-text-primary",
 									children: l?.name || "Unknown Plan"
-								}), /* @__PURE__ */ _("span", {
-									className: `px-2 py-0.5 text-xs font-medium rounded ${o(u)}`,
-									children: a(e.status)
+								}), /* @__PURE__ */ _(t, {
+									status: u,
+									dot: !0,
+									children: o(e.status)
 								})]
 							}), /* @__PURE__ */ v("div", {
-								className: "flex items-center gap-4 mt-1 text-sm text-muted-foreground",
+								className: "flex items-center gap-4 mt-1 text-sm text-text-secondary",
 								children: [
 									/* @__PURE__ */ v("span", { children: [
-										l ? n(l.price, l.currency) : "—",
+										l ? r(l.price, l.currency) : "—",
 										" /",
 										" ",
-										l ? i(l.duration) : "—"
+										l ? a(l.duration) : "—"
 									] }),
 									/* @__PURE__ */ _("span", {
 										className: "hidden sm:inline",
@@ -472,7 +475,7 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 									}),
 									/* @__PURE__ */ v("span", {
 										className: "hidden sm:inline",
-										children: ["Started ", r(e.startDate, "short")]
+										children: ["Started ", i(e.startDate, "short")]
 									})
 								]
 							})]
@@ -482,27 +485,27 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 							children: [d && /* @__PURE__ */ v("div", {
 								className: "text-right",
 								children: [/* @__PURE__ */ v("p", {
-									className: "text-sm font-medium text-foreground",
+									className: "text-sm font-medium text-text-primary",
 									children: [m, " days"]
 								}), /* @__PURE__ */ _("p", {
-									className: "text-xs text-muted-foreground",
+									className: "text-xs text-text-secondary",
 									children: "remaining"
 								})]
 							}), /* @__PURE__ */ _("button", {
 								type: "button",
 								onClick: (e) => {
-									e.stopPropagation(), t();
+									e.stopPropagation(), n();
 								},
-								className: "px-3 py-1.5 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+								className: "px-3 py-1.5 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: "View"
 							})]
 						})
 					]
 				}),
 				e.addonSubscriptions && e.addonSubscriptions.length > 0 && /* @__PURE__ */ _("div", {
-					className: "mt-4 pt-4 border-t border-border",
+					className: "mt-4 pt-4 border-t border-border-subtle",
 					children: /* @__PURE__ */ v("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: [
 							e.addonSubscriptions.length,
 							" addon",
@@ -512,12 +515,12 @@ var b = ["expired", "upgraded"], x = 10, S = () => {
 					})
 				}),
 				e.canceledAt && /* @__PURE__ */ _("div", {
-					className: "mt-4 pt-4 border-t border-border",
+					className: "mt-4 pt-4 border-t border-border-subtle",
 					children: /* @__PURE__ */ v("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: [
 							"Canceled on ",
-							r(e.canceledAt),
+							i(e.canceledAt),
 							e.cancellationReason && /* @__PURE__ */ v("span", { children: [": ", e.cancellationReason] })
 						]
 					})