@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

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

@@ -9,69 +9,69 @@ 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 ee } from "../../../shared/utils/format.js";
 import { getQuotaProgressColor as f, getSubscriptionStatusColor as te } from "../../../shared/utils/status.js";
 import { useBillingPermissions as ne } from "../../../hooks/useBillingPermissions.js";
-import { useGetDefaultBillingAccountDashboardQuery as re } from "../../../../generated/global-operations.js";
-import { useBillingNavigate as ie } from "../../../hooks/useBillingNavigate.js";
-import { withBillingAccountId as p } from "../../../shared/utils/navigation.js";
-import { useWorkspaceQuotaOverview as ae } from "../../usage/hooks/useUsage.js";
-import { WorkspaceQuotaAssignmentModal as oe } from "../../checkout/components/WorkspaceQuotaAssignmentModal.js";
-import { useSubscription as se, useSubscriptionMutations as m } from "../hooks/useSubscriptions.js";
+import { useGetDefaultBillingAccountDashboardQuery as p } 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 ie } from "../../usage/hooks/useUsage.js";
+import { WorkspaceQuotaAssignmentModal as h } from "../../checkout/components/WorkspaceQuotaAssignmentModal.js";
+import { useSubscription as g, useSubscriptionMutations as ae } from "../hooks/useSubscriptions.js";
 import "../hooks/index.js";
-import { ManageSeatsModal as h } from "../components/ManageSeatsModal.js";
-import { useState as g } from "react";
-import { useParams as ce } from "react-router-dom";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useI18n as le } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { CTAOverflowMenu as ue, EmphasisPanel as de } from "@burdenoff/fe-libs/ui";
+import { ManageSeatsModal as oe } from "../components/ManageSeatsModal.js";
+import { useState as _ } from "react";
+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 { CTAOverflowMenu as ce, EmphasisPanel as le, NextSteps as ue, PagePurpose as x } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx
-function y(e, t) {
+function S(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 b(e) {
+function C(e) {
 	return e === "DAILY" ? "Resets daily" : e === "MONTHLY" ? "Resets monthly" : "";
 }
-var x = () => {
-	let { t: s } = le(), u = (e, t) => {
+var w = () => {
+	let { t: s } = b(), u = (e, t) => {
 		let n = s(e);
 		return n === e ? t : n;
-	}, { subscriptionId: f } = ce(), y = ie(), { emit: b } = i(), { orgId: x } = e(), S = ne(), { selectedAccountId: _e } = a({
-		orgId: x,
+	}, { subscriptionId: f } = se(), S = re(), { emit: C } = i(), { orgId: w } = e(), T = ne(), { selectedAccountId: ge } = a({
+		orgId: w,
 		syncFromUrl: !0,
 		urlParamName: "billingAccountId"
-	}), { data: ve } = re({ fetchPolicy: "cache-first" }), C = _e ?? ve?.getDefaultBillingAccount?.id ?? void 0, { subscription: w, isLoading: ye, error: T, refetch: E } = se(f, C), { cancelSubscription: D, isCanceling: O, updateSubscriptionSeats: k, isUpdatingSeats: A } = m(), { workspaceId: j } = e(), { overview: M, refetch: N } = ae(j ?? void 0), [P, F] = g(!1), [I, L] = g(!1), [be, R] = g(!1), [z, B] = g(""), [V, H] = g(null), xe = async () => {
-		if (w) {
+	}), { data: _e } = p({ fetchPolicy: "cache-first" }), E = ge ?? _e?.getDefaultBillingAccount?.id ?? void 0, { subscription: D, isLoading: ve, error: O, refetch: k } = g(f, E), { cancelSubscription: A, isCanceling: j, updateSubscriptionSeats: M, isUpdatingSeats: N } = ae(), { workspaceId: P } = e(), { overview: F, refetch: ye } = ie(P ?? void 0), [be, I] = _(!1), [xe, L] = _(!1), [Se, R] = _(!1), [z, B] = _(""), [V, H] = _(null), Ce = async () => {
+		if (D) {
 			H(null);
 			try {
-				await D({
-					billingAccountId: C ?? w.billingAccountId,
-					subscriptionId: w.id,
+				await A({
+					billingAccountId: E ?? D.billingAccountId,
+					subscriptionId: D.id,
 					reason: z || "User requested cancellation"
-				}), b("billing.subscription.cancelled", {
+				}), C("billing.subscription.cancelled", {
 					route: "/billing/subscriptions",
-					entityId: w.id,
+					entityId: D.id,
 					source: "subscription-detail",
 					reason: z || "User requested cancellation"
-				}), F(!1), B(""), await E();
+				}), I(!1), B(""), await k();
 			} catch (e) {
 				H(e instanceof Error ? e.message : "Failed to cancel subscription");
 			}
 		}
 	};
-	if (!S.canViewSubscriptions) return /* @__PURE__ */ _("div", {
+	if (!T.canViewSubscriptions) return /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ v("div", {
+		children: /* @__PURE__ */ y("div", {
 			className: "text-center space-y-2",
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ v("div", {
 					className: "size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center",
-					children: /* @__PURE__ */ _("svg", {
+					children: /* @__PURE__ */ v("svg", {
 						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ _("path", {
+						children: /* @__PURE__ */ v("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -79,46 +79,46 @@ var x = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ _("h2", {
+				/* @__PURE__ */ v("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: "Access Denied"
 				}),
-				/* @__PURE__ */ _("p", {
+				/* @__PURE__ */ v("p", {
 					className: "text-sm text-text-secondary max-w-sm",
 					children: "You don't have permission to view this subscription."
 				})
 			]
 		})
 	});
-	if (ye) return /* @__PURE__ */ v("div", {
+	if (ve) return /* @__PURE__ */ y("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
-		children: [/* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ y("div", {
 			className: "flex items-center gap-4",
-			children: [/* @__PURE__ */ _("div", { className: "size-10 bg-bg-sunken animate-pulse rounded-button" }), /* @__PURE__ */ _("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" })]
-		}), /* @__PURE__ */ _("div", {
+			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__ */ _("div", {
+			children: /* @__PURE__ */ v("div", {
 				className: "lg:col-span-2 space-y-6",
-				children: /* @__PURE__ */ v("div", {
+				children: /* @__PURE__ */ y("div", {
 					className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4",
-					children: [/* @__PURE__ */ _("div", { className: "h-6 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ _("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" })]
+					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 (T || !w) return /* @__PURE__ */ _("div", {
+	if (O || !D) return /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ v("div", {
+		children: /* @__PURE__ */ y("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ v("div", {
 					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ _("svg", {
+					children: /* @__PURE__ */ v("svg", {
 						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ _("path", {
+						children: /* @__PURE__ */ v("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -126,121 +126,153 @@ var x = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ _("h2", {
+				/* @__PURE__ */ v("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: u("billing.subscriptions.notFound", "Subscription not found")
 				}),
-				/* @__PURE__ */ _("p", {
+				/* @__PURE__ */ v("p", {
 					className: "text-sm text-text-secondary",
-					children: T?.message || "The subscription you are looking for does not exist."
+					children: O?.message || "The subscription you are looking for does not exist."
 				}),
-				/* @__PURE__ */ _("button", {
+				/* @__PURE__ */ v("button", {
 					type: "button",
-					onClick: () => y(p("/subscriptions", C)),
+					onClick: () => S(m("/subscriptions", E)),
 					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 = w.plan, W = w.quotas || [], G = w.addonSubscriptions || [], K = w.transactions || [], q = w.history || [], Se = te(w.status), J = w.status === "active", Y = M.filter((e) => e.assignment.subscriptionId === w.id && e.assignment.isActive), X = !!w.assignedWorkspaceId || Y.length > 0, Z = new Date(w.endDate), Ce = new Date(w.startDate), we = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - Ce.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - we.getTime()) / (1e3 * 60 * 60 * 24))), Te = Math.round((Q - $) / Q * 100);
-	return /* @__PURE__ */ v("div", {
+	let U = D.plan, W = D.quotas || [], G = D.addonSubscriptions || [], K = D.transactions || [], q = D.history || [], we = te(D.status), J = D.status === "active", Y = F.filter((e) => e.assignment.subscriptionId === D.id && e.assignment.isActive), X = !!D.assignedWorkspaceId || Y.length > 0, Z = new Date(D.endDate), Te = new Date(D.startDate), Ee = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - Te.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - Ee.getTime()) / (1e3 * 60 * 60 * 24))), De = Math.round((Q - $) / Q * 100), Oe = [
+		...J && T.canUpdateSubscription ? [{
+			id: "change-plan",
+			label: "Review or change your plan",
+			description: "Upgrade, downgrade, or compare what each tier includes.",
+			onClick: () => S(m(`/subscriptions/${D.id}/upgrade`, E ?? D.billingAccountId))
+		}] : [],
+		...J && P && !X ? [{
+			id: "activate-workspace",
+			label: "Activate quotas for your workspace",
+			description: "Turn on the workspace-scoped limits included in this plan.",
+			onClick: () => R(!0)
+		}] : [],
+		{
+			id: "track-usage",
+			label: "Track your usage",
+			description: "See how much of your included quota you have consumed.",
+			onClick: () => S(m("/usage", E ?? D.billingAccountId))
+		},
+		{
+			id: "view-invoices",
+			label: "Review invoices & payments",
+			description: "Check what has been billed for this subscription.",
+			onClick: () => S(m("/invoices", E ?? D.billingAccountId))
+		}
+	];
+	return /* @__PURE__ */ y("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "flex items-start gap-4",
-					children: [/* @__PURE__ */ _("button", {
+					children: [/* @__PURE__ */ v("button", {
 						type: "button",
 						"aria-label": "Back to subscriptions",
-						onClick: () => y(p("/subscriptions", C)),
+						onClick: () => S(m("/subscriptions", E)),
 						className: "p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200",
-						children: /* @__PURE__ */ _("svg", {
+						children: /* @__PURE__ */ v("svg", {
 							className: "size-5",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ _("path", {
+							children: /* @__PURE__ */ v("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
 								d: "M15 19l-7-7 7-7"
 							})
 						})
-					}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("div", {
-						className: "flex items-center gap-3 flex-wrap",
-						children: [/* @__PURE__ */ _("h1", {
-							className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
-							children: U?.name || "Subscription"
-						}), /* @__PURE__ */ _(n, {
-							status: Se,
-							dot: !0,
-							pulse: J,
-							children: ee(w.status)
-						})]
-					}), /* @__PURE__ */ _("p", {
-						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)} · ${w.seatCount ?? U.minSeats ?? 1} seats = ${c(U.pricePerSeat * (w.seatCount ?? U.minSeats ?? 1), U.currency)} / ${d(U.duration)}` : U ? `${c(U.price, U.currency)} / ${d(U.duration)}` : "Unknown plan"
-					})] })]
-				}), /* @__PURE__ */ v("div", {
+					}), /* @__PURE__ */ y("div", { children: [
+						/* @__PURE__ */ y("div", {
+							className: "flex items-center gap-3 flex-wrap",
+							children: [/* @__PURE__ */ v("h1", {
+								className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
+								children: U?.name || "Subscription"
+							}), /* @__PURE__ */ v(n, {
+								status: we,
+								dot: !0,
+								pulse: J,
+								children: ee(D.status)
+							})]
+						}),
+						/* @__PURE__ */ v("p", {
+							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)} · ${D.seatCount ?? U.minSeats ?? 1} seats = ${c(U.pricePerSeat * (D.seatCount ?? U.minSeats ?? 1), U.currency)} / ${d(U.duration)}` : U ? `${c(U.price, U.currency)} / ${d(U.duration)}` : "Unknown plan"
+						}),
+						/* @__PURE__ */ v(x, {
+							className: "mt-3",
+							children: u("billing.subscriptions.detailPurpose", "Everything about this subscription in one view — its billing period, the quotas and add-ons it includes, recent charges and its full status history. Use it to track what you are getting, activate workspace quotas, change your plan, or cancel.")
+						})
+					] })]
+				}), /* @__PURE__ */ y("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ _(ue, {
-						primary: J && S.canUpdateSubscription ? {
+					children: [/* @__PURE__ */ v(ce, {
+						primary: J && T.canUpdateSubscription ? {
 							label: "Change Plan",
-							onSelect: () => y(p(`/subscriptions/${w.id}/upgrade`, C ?? w.billingAccountId))
+							onSelect: () => S(m(`/subscriptions/${D.id}/upgrade`, E ?? D.billingAccountId))
 						} : void 0,
-						actions: [...J && S.canUpdateSubscription && U?.pricingModel === o.PER_SEAT ? [{
+						actions: [...J && T.canUpdateSubscription && U?.pricingModel === o.PER_SEAT ? [{
 							label: "Manage Seats",
 							onSelect: () => L(!0)
-						}] : [], ...J && S.canCancelSubscription && !w.canceledAt ? [{
-							label: O ? "Canceling…" : "Cancel Subscription",
-							onSelect: () => F(!0),
-							disabled: O,
+						}] : [], ...J && T.canCancelSubscription && !D.canceledAt ? [{
+							label: j ? "Canceling…" : "Cancel Subscription",
+							onSelect: () => I(!0),
+							disabled: j,
 							intent: "destructive"
 						}] : []]
-					}), w.canceledAt && /* @__PURE__ */ _("span", {
+					}), D.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"
 					})]
 				})]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						J && /* @__PURE__ */ v(de, {
+						J && /* @__PURE__ */ y(le, {
 							className: "p-5",
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ y("div", {
 								className: "flex items-center justify-between mb-4",
-								children: [/* @__PURE__ */ _("h2", {
+								children: [/* @__PURE__ */ v("h2", {
 									className: "text-base font-semibold text-text-primary",
 									children: "Current Period"
-								}), /* @__PURE__ */ v("span", {
+								}), /* @__PURE__ */ y("span", {
 									className: "text-sm text-text-secondary tabular-nums",
 									children: [$, " days remaining"]
 								})]
-							}), /* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ y("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ _(r, {
-									value: Te,
+								children: [/* @__PURE__ */ v(r, {
+									value: De,
 									status: "primary",
 									size: "md",
 									"aria-label": "Billing period progress"
-								}), /* @__PURE__ */ v("div", {
+								}), /* @__PURE__ */ y("div", {
 									className: "flex items-center justify-between text-sm text-text-secondary",
-									children: [/* @__PURE__ */ _("span", { children: l(w.startDate, "short") }), /* @__PURE__ */ _("span", { children: l(w.endDate, "short") })]
+									children: [/* @__PURE__ */ v("span", { children: l(D.startDate, "short") }), /* @__PURE__ */ v("span", { children: l(D.endDate, "short") })]
 								})]
 							})]
 						}),
-						/* @__PURE__ */ v(t, {
+						/* @__PURE__ */ y(t, {
 							className: "overflow-hidden",
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ y("div", {
 								className: "p-5 border-b border-border-subtle",
-								children: [/* @__PURE__ */ v("h2", {
+								children: [/* @__PURE__ */ y("h2", {
 									className: "text-base font-semibold text-text-primary",
-									children: ["Plan Quotas", W.length > 0 && /* @__PURE__ */ v("span", {
+									children: ["Plan Quotas", W.length > 0 && /* @__PURE__ */ y("span", {
 										className: "ml-2 text-sm font-normal text-text-muted tabular-nums",
 										children: [
 											"(",
@@ -248,84 +280,84 @@ var x = () => {
 											")"
 										]
 									})]
-								}), /* @__PURE__ */ _("p", {
+								}), /* @__PURE__ */ v("p", {
 									className: "text-sm text-text-secondary mt-0.5",
 									children: "Limits included in your plan"
 								})]
-							}), /* @__PURE__ */ _("div", {
+							}), /* @__PURE__ */ v("div", {
 								className: "p-5",
-								children: W.length === 0 ? /* @__PURE__ */ _("p", {
+								children: W.length === 0 ? /* @__PURE__ */ v("p", {
 									className: "text-sm text-text-secondary",
 									children: "No quotas assigned to this subscription."
-								}) : /* @__PURE__ */ _("div", {
+								}) : /* @__PURE__ */ v("div", {
 									className: "space-y-3",
-									children: W.map((e) => /* @__PURE__ */ _(fe, { quota: e }, e.id))
+									children: W.map((e) => /* @__PURE__ */ v(de, { quota: e }, e.id))
 								})
 							})]
 						}),
-						J && j && /* @__PURE__ */ v(t, {
+						J && P && /* @__PURE__ */ y(t, {
 							className: "overflow-hidden",
 							children: [
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ y("div", {
 									className: "p-5 border-b border-border-subtle flex items-center justify-between gap-4",
-									children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h2", {
+									children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
 										className: "text-base font-semibold text-text-primary",
 										children: "Workspace Quotas"
-									}), /* @__PURE__ */ _("p", {
+									}), /* @__PURE__ */ v("p", {
 										className: "text-sm text-text-secondary mt-0.5",
 										children: "Active limits for your workspace"
-									})] }), X ? /* @__PURE__ */ _(n, {
+									})] }), X ? /* @__PURE__ */ v(n, {
 										status: "success",
 										dot: !0,
 										children: "Active"
-									}) : /* @__PURE__ */ _("button", {
+									}) : /* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => R(!0),
 										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__ */ _("div", {
+								/* @__PURE__ */ v("div", {
 									className: "p-5",
-									children: X ? Y.length > 0 ? /* @__PURE__ */ _("div", {
+									children: X ? Y.length > 0 ? /* @__PURE__ */ v("div", {
 										className: "space-y-3",
-										children: Y.map((e) => /* @__PURE__ */ _(pe, { item: e }, e.assignment.id))
-									}) : /* @__PURE__ */ v("p", {
+										children: Y.map((e) => /* @__PURE__ */ v(fe, { item: e }, e.assignment.id))
+									}) : /* @__PURE__ */ y("p", {
 										className: "text-sm text-text-secondary",
 										children: [
 											"Quotas are activated on workspace",
 											" ",
-											/* @__PURE__ */ _("span", {
+											/* @__PURE__ */ v("span", {
 												className: "font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5",
-												children: w.assignedWorkspaceId
+												children: D.assignedWorkspaceId
 											}),
 											". Usage data will appear here once quotas are consumed."
 										]
-									}) : /* @__PURE__ */ v("div", {
+									}) : /* @__PURE__ */ y("div", {
 										className: "flex items-start gap-3",
-										children: [/* @__PURE__ */ _("div", {
+										children: [/* @__PURE__ */ v("div", {
 											className: "size-8 rounded-full bg-status-warning-bg-subtle flex items-center justify-center shrink-0 mt-0.5",
-											children: /* @__PURE__ */ _("svg", {
+											children: /* @__PURE__ */ v("svg", {
 												className: "size-4 text-status-warning-text",
 												fill: "none",
 												viewBox: "0 0 24 24",
 												stroke: "currentColor",
-												children: /* @__PURE__ */ _("path", {
+												children: /* @__PURE__ */ v("path", {
 													strokeLinecap: "round",
 													strokeLinejoin: "round",
 													strokeWidth: 2,
 													d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
 												})
 											})
-										}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+										}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 											className: "text-sm font-medium text-text-primary",
 											children: "Workspace quotas not activated yet"
-										}), /* @__PURE__ */ v("p", {
+										}), /* @__PURE__ */ y("p", {
 											className: "text-sm text-text-secondary mt-0.5",
 											children: [
 												"Click",
 												" ",
-												/* @__PURE__ */ _("button", {
+												/* @__PURE__ */ v("button", {
 													type: "button",
 													onClick: () => R(!0),
 													className: "text-text-link hover:underline font-medium",
@@ -337,32 +369,32 @@ var x = () => {
 										})] })]
 									})
 								}),
-								be && /* @__PURE__ */ _(oe, {
-									billingAccountId: C ?? w.billingAccountId,
-									subscriptionId: w.id,
+								Se && /* @__PURE__ */ v(h, {
+									billingAccountId: E ?? D.billingAccountId,
+									subscriptionId: D.id,
 									quotas: [],
 									workspaces: [{
-										id: j,
+										id: P,
 										name: "Current workspace"
 									}],
-									currentWorkspaceId: j,
+									currentWorkspaceId: P,
 									onAssigned: () => {
-										R(!1), E(), N();
+										R(!1), k(), ye();
 									},
 									onSkip: () => R(!1)
 								})
 							]
 						}),
-						G.length > 0 && /* @__PURE__ */ v(t, {
+						G.length > 0 && /* @__PURE__ */ y(t, {
 							className: "overflow-hidden",
-							children: [/* @__PURE__ */ _("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "p-5 border-b border-border-subtle",
-								children: /* @__PURE__ */ v("h2", {
+								children: /* @__PURE__ */ y("h2", {
 									className: "text-base font-semibold text-text-primary",
 									children: [
 										"Addons",
 										" ",
-										/* @__PURE__ */ v("span", {
+										/* @__PURE__ */ y("span", {
 											className: "text-sm font-normal text-text-muted tabular-nums",
 											children: [
 												"(",
@@ -372,31 +404,31 @@ var x = () => {
 										})
 									]
 								})
-							}), /* @__PURE__ */ _("div", {
+							}), /* @__PURE__ */ v("div", {
 								className: "p-5",
-								children: /* @__PURE__ */ _("div", {
+								children: /* @__PURE__ */ v("div", {
 									className: "space-y-3",
-									children: G.map((e) => /* @__PURE__ */ _(me, { addonSubscription: e }, e.id))
+									children: G.map((e) => /* @__PURE__ */ v(pe, { addonSubscription: e }, e.id))
 								})
 							})]
 						}),
-						K.length > 0 && /* @__PURE__ */ v(t, {
+						K.length > 0 && /* @__PURE__ */ y(t, {
 							className: "overflow-hidden",
 							children: [
-								/* @__PURE__ */ _("div", {
+								/* @__PURE__ */ v("div", {
 									className: "p-5 border-b border-border-subtle",
-									children: /* @__PURE__ */ _("h2", {
+									children: /* @__PURE__ */ v("h2", {
 										className: "text-base font-semibold text-text-primary",
 										children: "Recent Transactions"
 									})
 								}),
-								/* @__PURE__ */ _("div", {
+								/* @__PURE__ */ v("div", {
 									className: "divide-y divide-border-subtle",
-									children: K.slice(0, 5).map((e) => /* @__PURE__ */ _(he, { transaction: e }, e.id))
+									children: K.slice(0, 5).map((e) => /* @__PURE__ */ v(me, { transaction: e }, e.id))
 								}),
-								K.length > 5 && /* @__PURE__ */ _("div", {
+								K.length > 5 && /* @__PURE__ */ v("div", {
 									className: "p-4 text-center border-t border-border-subtle",
-									children: /* @__PURE__ */ _("button", {
+									children: /* @__PURE__ */ v("button", {
 										type: "button",
 										className: "text-sm text-text-link hover:underline",
 										children: "View all transactions"
@@ -405,140 +437,147 @@ var x = () => {
 							]
 						})
 					]
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ y("div", {
 					className: "space-y-6 lg:sticky lg:top-6 lg:self-start",
-					children: [/* @__PURE__ */ v(t, {
-						className: "overflow-hidden",
-						children: [/* @__PURE__ */ _("div", {
-							className: "p-5 border-b border-border-subtle",
-							children: /* @__PURE__ */ _("h2", {
-								className: "text-base font-semibold text-text-primary",
-								children: "Details"
-							})
-						}), /* @__PURE__ */ v("div", {
-							className: "p-5 space-y-4",
-							children: [
-								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "Subscription ID"
-								}), /* @__PURE__ */ _("p", {
-									className: "font-mono text-sm text-text-primary mt-0.5 break-all",
-									children: w.id
-								})] }),
-								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "Plan"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm text-text-primary mt-0.5",
-									children: U?.name || "Unknown"
-								})] }),
-								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "Billing Account"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm text-text-primary mt-0.5",
-									children: w.billingAccount?.name || "Unknown"
-								})] }),
-								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "Start Date"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm text-text-primary mt-0.5",
-									children: l(w.startDate)
-								})] }),
-								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "End Date"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm text-text-primary mt-0.5",
-									children: l(w.endDate)
-								})] }),
-								w.nextBillingDate && /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "Next Billing"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm text-text-primary mt-0.5",
-									children: l(w.nextBillingDate)
-								})] }),
-								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "Auto Renewal"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm text-text-primary mt-0.5",
-									children: w.autoRenewal ? "Enabled" : "Disabled"
-								})] }),
-								w.paymentGateway && /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-secondary",
-									children: "Payment Gateway"
-								}), /* @__PURE__ */ _("p", {
-									className: "text-sm text-text-primary mt-0.5 capitalize",
-									children: w.paymentGateway
-								})] })
-							]
-						})]
-					}), q.length > 0 && /* @__PURE__ */ v(t, {
-						className: "overflow-hidden",
-						children: [/* @__PURE__ */ _("div", {
-							className: "p-5 border-b border-border-subtle",
-							children: /* @__PURE__ */ _("h2", {
-								className: "text-base font-semibold text-text-primary",
-								children: "History"
-							})
-						}), /* @__PURE__ */ _("div", {
-							className: "p-5",
-							children: /* @__PURE__ */ _("div", {
-								className: "space-y-3",
-								children: q.slice(0, 5).map((e) => /* @__PURE__ */ _(ge, { item: e }, e.id))
-							})
-						})]
-					})]
+					children: [
+						/* @__PURE__ */ v(ue, {
+							storageKey: "billing-subscription-detail",
+							steps: Oe
+						}),
+						/* @__PURE__ */ y(t, {
+							className: "overflow-hidden",
+							children: [/* @__PURE__ */ v("div", {
+								className: "p-5 border-b border-border-subtle",
+								children: /* @__PURE__ */ v("h2", {
+									className: "text-base font-semibold text-text-primary",
+									children: "Details"
+								})
+							}), /* @__PURE__ */ y("div", {
+								className: "p-5 space-y-4",
+								children: [
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Subscription ID"
+									}), /* @__PURE__ */ v("p", {
+										className: "font-mono text-sm text-text-primary mt-0.5 break-all",
+										children: D.id
+									})] }),
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Plan"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-primary mt-0.5",
+										children: U?.name || "Unknown"
+									})] }),
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Billing Account"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-primary mt-0.5",
+										children: D.billingAccount?.name || "Unknown"
+									})] }),
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Start Date"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-primary mt-0.5",
+										children: l(D.startDate)
+									})] }),
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "End Date"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-primary mt-0.5",
+										children: l(D.endDate)
+									})] }),
+									D.nextBillingDate && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Next Billing"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-primary mt-0.5",
+										children: l(D.nextBillingDate)
+									})] }),
+									/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Auto Renewal"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-primary mt-0.5",
+										children: D.autoRenewal ? "Enabled" : "Disabled"
+									})] }),
+									D.paymentGateway && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										className: "text-sm text-text-secondary",
+										children: "Payment Gateway"
+									}), /* @__PURE__ */ v("p", {
+										className: "text-sm text-text-primary mt-0.5 capitalize",
+										children: D.paymentGateway
+									})] })
+								]
+							})]
+						}),
+						q.length > 0 && /* @__PURE__ */ y(t, {
+							className: "overflow-hidden",
+							children: [/* @__PURE__ */ v("div", {
+								className: "p-5 border-b border-border-subtle",
+								children: /* @__PURE__ */ v("h2", {
+									className: "text-base font-semibold text-text-primary",
+									children: "History"
+								})
+							}), /* @__PURE__ */ v("div", {
+								className: "p-5",
+								children: /* @__PURE__ */ v("div", {
+									className: "space-y-3",
+									children: q.slice(0, 5).map((e) => /* @__PURE__ */ v(he, { item: e }, e.id))
+								})
+							})]
+						})
+					]
 				})]
 			}),
-			I && w && /* @__PURE__ */ _(h, {
-				subscription: w,
+			xe && D && /* @__PURE__ */ v(oe, {
+				subscription: D,
 				onClose: () => L(!1),
 				onConfirm: async (e) => {
-					await k({
-						subscriptionId: w.id,
+					await M({
+						subscriptionId: D.id,
 						seatCount: e
-					}), await E();
+					}), await k();
 				},
-				isLoading: A
+				isLoading: N
 			}),
-			P && /* @__PURE__ */ v("div", {
+			be && /* @__PURE__ */ y("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center",
-				children: [/* @__PURE__ */ _("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "absolute inset-0 bg-overlay-scrim",
-					onClick: () => F(!1)
-				}), /* @__PURE__ */ v("div", {
+					onClick: () => I(!1)
+				}), /* @__PURE__ */ y("div", {
 					className: "relative bg-bg-elevated border border-border-seam 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__ */ _("h3", {
+						/* @__PURE__ */ v("h3", {
 							id: "cancel-subscription-title",
 							className: "text-lg font-semibold text-text-primary mb-2",
 							children: "Cancel Subscription"
 						}),
-						/* @__PURE__ */ v("p", {
+						/* @__PURE__ */ y("p", {
 							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__ */ _("span", {
+								/* @__PURE__ */ v("span", {
 									className: "font-medium text-text-primary",
-									children: l(w.endDate)
+									children: l(D.endDate)
 								}),
 								", but will not renew automatically."
 							]
 						}),
-						/* @__PURE__ */ v("div", {
+						/* @__PURE__ */ y("div", {
 							className: "mb-4",
-							children: [/* @__PURE__ */ _("label", {
+							children: [/* @__PURE__ */ v("label", {
 								className: "block text-sm font-medium text-text-primary mb-1",
 								children: "Reason for cancellation (optional)"
-							}), /* @__PURE__ */ _("textarea", {
+							}), /* @__PURE__ */ v("textarea", {
 								value: z,
 								onChange: (e) => B(e.target.value),
 								placeholder: "Please share why you're canceling...",
@@ -546,28 +585,28 @@ var x = () => {
 								rows: 3
 							})]
 						}),
-						V && /* @__PURE__ */ _("div", {
+						V && /* @__PURE__ */ v("div", {
 							className: "mb-4 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card",
-							children: /* @__PURE__ */ _("p", {
+							children: /* @__PURE__ */ v("p", {
 								className: "text-sm text-status-error-text",
 								children: V
 							})
 						}),
-						/* @__PURE__ */ v("div", {
+						/* @__PURE__ */ y("div", {
 							className: "flex items-center justify-end gap-3",
-							children: [/* @__PURE__ */ _("button", {
+							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-text-secondary hover:text-text-primary transition-colors",
 								children: "Keep Subscription"
-							}), /* @__PURE__ */ _("button", {
+							}), /* @__PURE__ */ v("button", {
 								type: "button",
-								onClick: xe,
-								disabled: O,
+								onClick: Ce,
+								disabled: j,
 								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: O ? "Canceling..." : "Confirm Cancellation"
+								children: j ? "Canceling..." : "Confirm Cancellation"
 							})]
 						})
 					]
@@ -575,23 +614,23 @@ var x = () => {
 			})
 		]
 	});
-}, fe = ({ quota: e }) => {
-	let t = e.context, n = y(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__ */ v("div", {
+}, de = ({ quota: e }) => {
+	let t = e.context, n = S(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-card border border-border-seam bg-bg-surface",
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-start justify-between gap-4 mb-2",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ _("p", {
+					children: [/* @__PURE__ */ v("p", {
 						className: "font-medium text-text-primary truncate",
 						children: n
-					}), r && /* @__PURE__ */ _("p", {
+					}), r && /* @__PURE__ */ v("p", {
 						className: "text-xs text-text-secondary mt-0.5 line-clamp-2",
 						children: r
 					})]
-				}), /* @__PURE__ */ v("span", {
+				}), /* @__PURE__ */ y("span", {
 					className: "text-sm font-medium text-text-primary shrink-0 tabular-nums",
 					children: [
 						c ? s(a) : a.toLocaleString(),
@@ -600,21 +639,21 @@ var x = () => {
 					]
 				})]
 			}),
-			i > 0 && /* @__PURE__ */ _("div", {
+			i > 0 && /* @__PURE__ */ v("div", {
 				className: "h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2",
-				children: /* @__PURE__ */ _("div", {
+				children: /* @__PURE__ */ v("div", {
 					className: `h-full rounded-full transition-all duration-300 ${f(o)}`,
 					style: { width: `${o}%` }
 				})
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-center justify-between text-xs text-text-secondary",
-				children: [/* @__PURE__ */ _("span", {
+				children: [/* @__PURE__ */ v("span", {
 					className: "px-1.5 py-0.5 rounded bg-bg-sunken font-medium",
 					children: d ? "Shared" : "Per Workspace"
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ y("div", {
 					className: "flex items-center gap-3",
-					children: [e.endtime && /* @__PURE__ */ v("span", { children: ["Expires ", l(e.endtime, "short")] }), i > 0 && /* @__PURE__ */ v("span", {
+					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"]
 					})]
@@ -622,23 +661,23 @@ var x = () => {
 			})
 		]
 	});
-}, pe = ({ item: e }) => {
-	let { assignment: t, effectiveUsed: n, usagePercentage: r } = e, i = y(t.quotaName), a = !t.noLimit && t.limit !== null, o = t.limit ?? 0, c = t.quotaName.includes("bytes") || t.quotaName.includes("storage"), d = b(t.resetPeriod);
-	return /* @__PURE__ */ v("div", {
+}, fe = ({ item: e }) => {
+	let { assignment: t, effectiveUsed: n, usagePercentage: r } = e, i = S(t.quotaName), a = !t.noLimit && t.limit !== null, o = t.limit ?? 0, c = t.quotaName.includes("bytes") || t.quotaName.includes("storage"), d = C(t.resetPeriod);
+	return /* @__PURE__ */ y("div", {
 		className: "p-4 rounded-card border border-border-seam bg-bg-surface",
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-start justify-between gap-4 mb-2",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ _("p", {
+					children: [/* @__PURE__ */ v("p", {
 						className: "font-medium text-text-primary truncate",
 						children: i
-					}), /* @__PURE__ */ v("p", {
+					}), /* @__PURE__ */ y("p", {
 						className: "text-xs text-text-secondary mt-0.5",
 						children: [t.quotaMode === "pooled" ? "Pooled across workspaces" : "Dedicated", d && ` · ${d}`]
 					})]
-				}), /* @__PURE__ */ v("span", {
+				}), /* @__PURE__ */ y("span", {
 					className: "text-sm font-medium text-text-primary shrink-0 tabular-nums",
 					children: [
 						c ? s(n) : n.toLocaleString(),
@@ -647,83 +686,83 @@ var x = () => {
 					]
 				})]
 			}),
-			a && /* @__PURE__ */ _("div", {
+			a && /* @__PURE__ */ v("div", {
 				className: "h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2",
-				children: /* @__PURE__ */ _("div", {
+				children: /* @__PURE__ */ v("div", {
 					className: `h-full rounded-full transition-all duration-300 ${f(r)}`,
 					style: { width: `${Math.min(100, r)}%` }
 				})
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-center justify-between text-xs text-text-secondary",
-				children: [/* @__PURE__ */ v("span", { children: ["Since ", l(t.createdAt, "short")] }), a && /* @__PURE__ */ v("span", {
+				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: [u(r), " used"]
 				})]
 			})
 		]
 	});
-}, me = ({ addonSubscription: e }) => {
+}, pe = ({ addonSubscription: e }) => {
 	let t = e.addon;
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ y("div", {
 		className: "flex items-center justify-between p-3 rounded-card border border-border-seam bg-bg-sunken",
-		children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+		children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 			className: "font-medium text-text-primary",
 			children: t?.name || "Unknown Addon"
-		}), /* @__PURE__ */ v("p", {
+		}), /* @__PURE__ */ y("p", {
 			className: "text-sm text-text-secondary",
 			children: ["Qty: ", e.quantity]
-		})] }), t && /* @__PURE__ */ _("p", {
+		})] }), t && /* @__PURE__ */ v("p", {
 			className: "text-sm font-medium text-text-primary tabular-nums",
 			children: c(t.price * e.quantity, t.currency)
 		})]
 	});
-}, he = ({ transaction: e }) => /* @__PURE__ */ v("div", {
+}, me = ({ transaction: e }) => /* @__PURE__ */ y("div", {
 	className: "flex items-center justify-between px-5 py-4 hover:bg-bg-sunken transition-colors",
-	children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+	children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 		className: "font-medium text-text-primary capitalize",
 		children: e.type
-	}), /* @__PURE__ */ _("p", {
+	}), /* @__PURE__ */ v("p", {
 		className: "text-sm text-text-secondary",
 		children: l(e.createdAt, "short")
-	})] }), /* @__PURE__ */ v("div", {
+	})] }), /* @__PURE__ */ y("div", {
 		className: "text-right",
-		children: [/* @__PURE__ */ v("p", {
+		children: [/* @__PURE__ */ y("p", {
 			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__ */ _("p", {
+		}), /* @__PURE__ */ v("p", {
 			className: "text-sm text-text-secondary capitalize",
 			children: e.status
 		})]
 	})]
-}), ge = ({ item: e }) => /* @__PURE__ */ v("div", {
+}), he = ({ item: e }) => /* @__PURE__ */ y("div", {
 	className: "flex items-start gap-3",
-	children: [/* @__PURE__ */ _("div", { className: "size-2 rounded-full bg-text-muted mt-2 shrink-0" }), /* @__PURE__ */ v("div", { children: [
-		/* @__PURE__ */ v("p", {
+	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-text-primary",
 			children: [
-				/* @__PURE__ */ _("span", {
+				/* @__PURE__ */ v("span", {
 					className: "capitalize",
 					children: e.fromStatus
 				}),
 				" → ",
-				/* @__PURE__ */ _("span", {
+				/* @__PURE__ */ v("span", {
 					className: "capitalize font-medium",
 					children: e.toStatus
 				})
 			]
 		}),
-		e.reason && /* @__PURE__ */ _("p", {
+		e.reason && /* @__PURE__ */ v("p", {
 			className: "text-xs text-text-secondary mt-0.5",
 			children: e.reason
 		}),
-		/* @__PURE__ */ _("p", {
+		/* @__PURE__ */ v("p", {
 			className: "text-xs text-text-secondary mt-0.5",
 			children: l(e.createdAt, "short")
 		})
 	] })]
 });
 //#endregion
-export { x as SubscriptionDetailPage };
+export { w as SubscriptionDetailPage };
 
 //# sourceMappingURL=SubscriptionDetailPage.js.map