@burdenoff/microfe-billing 2026.624.3 → 2026.625.2

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

@@ -6,71 +6,72 @@ 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 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 { 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 "../hooks/index.js";
-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 ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+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";
 //#region src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx
-function b(e, t) {
+function y(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 x(e) {
+function b(e) {
 	return e === "DAILY" ? "Resets daily" : e === "MONTHLY" ? "Resets monthly" : "";
 }
-var S = () => {
-	let { t: s } = ce(), u = (e, t) => {
+var x = () => {
+	let { t: s } = le(), u = (e, t) => {
 		let n = s(e);
 		return n === e ? t : n;
-	}, { subscriptionId: p } = se(), b = re(), { emit: x } = i(), { orgId: S } = e(), w = te(), { selectedAccountId: pe } = a({
-		orgId: S,
+	}, { subscriptionId: f } = ce(), y = ie(), { emit: b } = i(), { orgId: x } = e(), S = ne(), { selectedAccountId: _e } = a({
+		orgId: x,
 		syncFromUrl: !0,
 		urlParamName: "billingAccountId"
-	}), { 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) {
+	}), { 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) {
 			H(null);
 			try {
-				await ge({
-					billingAccountId: T ?? E.billingAccountId,
-					subscriptionId: E.id,
+				await D({
+					billingAccountId: C ?? w.billingAccountId,
+					subscriptionId: w.id,
 					reason: z || "User requested cancellation"
-				}), x("billing.subscription.cancelled", {
+				}), b("billing.subscription.cancelled", {
 					route: "/billing/subscriptions",
-					entityId: E.id,
+					entityId: w.id,
 					source: "subscription-detail",
 					reason: z || "User requested cancellation"
-				}), I(!1), B(""), await O();
+				}), F(!1), B(""), await E();
 			} catch (e) {
 				H(e instanceof Error ? e.message : "Failed to cancel subscription");
 			}
 		}
 	};
-	if (!w.canViewSubscriptions) return /* @__PURE__ */ v("div", {
+	if (!S.canViewSubscriptions) return /* @__PURE__ */ _("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ v("div", {
 			className: "text-center space-y-2",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ _("div", {
 					className: "size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ _("svg", {
 						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ _("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -78,46 +79,46 @@ var S = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ _("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: "Access Denied"
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ _("p", {
 					className: "text-sm text-text-secondary max-w-sm",
 					children: "You don't have permission to view this subscription."
 				})
 			]
 		})
 	});
-	if (he) return /* @__PURE__ */ y("div", {
+	if (ye) return /* @__PURE__ */ v("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
-		children: [/* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ v("div", {
 			className: "flex items-center gap-4",
-			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", {
+			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", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ _("div", {
 				className: "lg:col-span-2 space-y-6",
-				children: /* @__PURE__ */ y("div", {
-					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" })]
+				children: /* @__PURE__ */ v("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" })]
 				})
 			})
 		})]
 	});
-	if (D || !E) return /* @__PURE__ */ v("div", {
+	if (T || !w) return /* @__PURE__ */ _("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ v("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ _("div", {
 					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ _("svg", {
 						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ _("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -125,127 +126,120 @@ var S = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ _("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: u("billing.subscriptions.notFound", "Subscription not found")
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ _("p", {
 					className: "text-sm text-text-secondary",
-					children: D?.message || "The subscription you are looking for does not exist."
+					children: T?.message || "The subscription you are looking for does not exist."
 				}),
-				/* @__PURE__ */ v("button", {
+				/* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: () => b(m("/subscriptions", T)),
+					onClick: () => y(p("/subscriptions", C)),
 					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 = 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", {
+	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", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "flex items-start gap-4",
-					children: [/* @__PURE__ */ v("button", {
+					children: [/* @__PURE__ */ _("button", {
 						type: "button",
 						"aria-label": "Back to subscriptions",
-						onClick: () => b(m("/subscriptions", T)),
+						onClick: () => y(p("/subscriptions", C)),
 						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", {
+						children: /* @__PURE__ */ _("svg", {
 							className: "size-5",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ v("path", {
+							children: /* @__PURE__ */ _("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
 								d: "M15 19l-7-7 7-7"
 							})
 						})
-					}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("div", {
+					}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("div", {
 						className: "flex items-center gap-3 flex-wrap",
-						children: [/* @__PURE__ */ v("h1", {
+						children: [/* @__PURE__ */ _("h1", {
 							className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 							children: U?.name || "Subscription"
-						}), /* @__PURE__ */ v(n, {
-							status: be,
+						}), /* @__PURE__ */ _(n, {
+							status: Se,
 							dot: !0,
-							children: f(E.status)
+							children: ee(w.status)
 						})]
-					}), /* @__PURE__ */ v("p", {
+					}), /* @__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)} · ${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"
+						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__ */ y("div", {
+				}), /* @__PURE__ */ v("div", {
 					className: "flex items-center gap-2",
-					children: [
-						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-subtle text-text-primary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
-							children: "Manage Seats"
-						}),
-						J && w.canUpdateSubscription && /* @__PURE__ */ v("button", {
-							type: "button",
-							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 && w.canCancelSubscription && !E.canceledAt && /* @__PURE__ */ v("button", {
-							type: "button",
-							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"
-						}),
-						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"
-						})
-					]
+					children: [/* @__PURE__ */ _(ue, {
+						primary: J && S.canUpdateSubscription ? {
+							label: "Change Plan",
+							onSelect: () => y(p(`/subscriptions/${w.id}/upgrade`, C ?? w.billingAccountId))
+						} : void 0,
+						actions: [...J && S.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,
+							intent: "destructive"
+						}] : []]
+					}), w.canceledAt && /* @__PURE__ */ _("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__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						J && /* @__PURE__ */ y(t, {
+						J && /* @__PURE__ */ v(de, {
 							className: "p-5",
-							children: [/* @__PURE__ */ y("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "flex items-center justify-between mb-4",
-								children: [/* @__PURE__ */ v("h2", {
+								children: [/* @__PURE__ */ _("h2", {
 									className: "text-base font-semibold text-text-primary",
 									children: "Current Period"
-								}), /* @__PURE__ */ y("span", {
+								}), /* @__PURE__ */ v("span", {
 									className: "text-sm text-text-secondary tabular-nums",
 									children: [$, " days remaining"]
 								})]
-							}), /* @__PURE__ */ y("div", {
+							}), /* @__PURE__ */ v("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ v(r, {
-									value: Ce,
+								children: [/* @__PURE__ */ _(r, {
+									value: Te,
 									status: "primary",
 									size: "md",
 									"aria-label": "Billing period progress"
-								}), /* @__PURE__ */ y("div", {
+								}), /* @__PURE__ */ v("div", {
 									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") })]
+									children: [/* @__PURE__ */ _("span", { children: l(w.startDate, "short") }), /* @__PURE__ */ _("span", { children: l(w.endDate, "short") })]
 								})]
 							})]
 						}),
-						/* @__PURE__ */ y(t, {
+						/* @__PURE__ */ v(t, {
 							className: "overflow-hidden",
-							children: [/* @__PURE__ */ y("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "p-5 border-b border-border-subtle",
-								children: [/* @__PURE__ */ y("h2", {
+								children: [/* @__PURE__ */ v("h2", {
 									className: "text-base font-semibold text-text-primary",
-									children: ["Plan Quotas", W.length > 0 && /* @__PURE__ */ y("span", {
+									children: ["Plan Quotas", W.length > 0 && /* @__PURE__ */ v("span", {
 										className: "ml-2 text-sm font-normal text-text-muted tabular-nums",
 										children: [
 											"(",
@@ -253,84 +247,84 @@ var S = () => {
 											")"
 										]
 									})]
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary mt-0.5",
 									children: "Limits included in your plan"
 								})]
-							}), /* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "p-5",
-								children: W.length === 0 ? /* @__PURE__ */ v("p", {
+								children: W.length === 0 ? /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "No quotas assigned to this subscription."
-								}) : /* @__PURE__ */ v("div", {
+								}) : /* @__PURE__ */ _("div", {
 									className: "space-y-3",
-									children: W.map((e) => /* @__PURE__ */ v(C, { quota: e }, e.id))
+									children: W.map((e) => /* @__PURE__ */ _(fe, { quota: e }, e.id))
 								})
 							})]
 						}),
-						J && M && /* @__PURE__ */ y(t, {
+						J && j && /* @__PURE__ */ v(t, {
 							className: "overflow-hidden",
 							children: [
-								/* @__PURE__ */ y("div", {
+								/* @__PURE__ */ v("div", {
 									className: "p-5 border-b border-border-subtle flex items-center justify-between gap-4",
-									children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
+									children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h2", {
 										className: "text-base font-semibold text-text-primary",
 										children: "Workspace Quotas"
-									}), /* @__PURE__ */ v("p", {
+									}), /* @__PURE__ */ _("p", {
 										className: "text-sm text-text-secondary mt-0.5",
 										children: "Active limits for your workspace"
-									})] }), X ? /* @__PURE__ */ v(n, {
+									})] }), X ? /* @__PURE__ */ _(n, {
 										status: "success",
 										dot: !0,
 										children: "Active"
-									}) : /* @__PURE__ */ v("button", {
+									}) : /* @__PURE__ */ _("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__ */ v("div", {
+								/* @__PURE__ */ _("div", {
 									className: "p-5",
-									children: X ? Y.length > 0 ? /* @__PURE__ */ v("div", {
+									children: X ? Y.length > 0 ? /* @__PURE__ */ _("div", {
 										className: "space-y-3",
-										children: Y.map((e) => /* @__PURE__ */ v(le, { item: e }, e.assignment.id))
-									}) : /* @__PURE__ */ y("p", {
+										children: Y.map((e) => /* @__PURE__ */ _(pe, { item: e }, e.assignment.id))
+									}) : /* @__PURE__ */ v("p", {
 										className: "text-sm text-text-secondary",
 										children: [
 											"Quotas are activated on workspace",
 											" ",
-											/* @__PURE__ */ v("span", {
+											/* @__PURE__ */ _("span", {
 												className: "font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5",
-												children: E.assignedWorkspaceId
+												children: w.assignedWorkspaceId
 											}),
 											". Usage data will appear here once quotas are consumed."
 										]
-									}) : /* @__PURE__ */ y("div", {
+									}) : /* @__PURE__ */ v("div", {
 										className: "flex items-start gap-3",
-										children: [/* @__PURE__ */ v("div", {
+										children: [/* @__PURE__ */ _("div", {
 											className: "size-8 rounded-full bg-status-warning-bg-subtle flex items-center justify-center shrink-0 mt-0.5",
-											children: /* @__PURE__ */ v("svg", {
+											children: /* @__PURE__ */ _("svg", {
 												className: "size-4 text-status-warning-text",
 												fill: "none",
 												viewBox: "0 0 24 24",
 												stroke: "currentColor",
-												children: /* @__PURE__ */ v("path", {
+												children: /* @__PURE__ */ _("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__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+										}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 											className: "text-sm font-medium text-text-primary",
 											children: "Workspace quotas not activated yet"
-										}), /* @__PURE__ */ y("p", {
+										}), /* @__PURE__ */ v("p", {
 											className: "text-sm text-text-secondary mt-0.5",
 											children: [
 												"Click",
 												" ",
-												/* @__PURE__ */ v("button", {
+												/* @__PURE__ */ _("button", {
 													type: "button",
 													onClick: () => R(!0),
 													className: "text-text-link hover:underline font-medium",
@@ -342,32 +336,32 @@ var S = () => {
 										})] })]
 									})
 								}),
-								ve && /* @__PURE__ */ v(g, {
-									billingAccountId: T ?? E.billingAccountId,
-									subscriptionId: E.id,
+								be && /* @__PURE__ */ _(oe, {
+									billingAccountId: C ?? w.billingAccountId,
+									subscriptionId: w.id,
 									quotas: [],
 									workspaces: [{
-										id: M,
+										id: j,
 										name: "Current workspace"
 									}],
-									currentWorkspaceId: M,
+									currentWorkspaceId: j,
 									onAssigned: () => {
-										R(!1), O(), P();
+										R(!1), E(), N();
 									},
 									onSkip: () => R(!1)
 								})
 							]
 						}),
-						G.length > 0 && /* @__PURE__ */ y(t, {
+						G.length > 0 && /* @__PURE__ */ v(t, {
 							className: "overflow-hidden",
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ _("div", {
 								className: "p-5 border-b border-border-subtle",
-								children: /* @__PURE__ */ y("h2", {
+								children: /* @__PURE__ */ v("h2", {
 									className: "text-base font-semibold text-text-primary",
 									children: [
 										"Addons",
 										" ",
-										/* @__PURE__ */ y("span", {
+										/* @__PURE__ */ v("span", {
 											className: "text-sm font-normal text-text-muted tabular-nums",
 											children: [
 												"(",
@@ -377,31 +371,31 @@ var S = () => {
 										})
 									]
 								})
-							}), /* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "p-5",
-								children: /* @__PURE__ */ v("div", {
+								children: /* @__PURE__ */ _("div", {
 									className: "space-y-3",
-									children: G.map((e) => /* @__PURE__ */ v(ue, { addonSubscription: e }, e.id))
+									children: G.map((e) => /* @__PURE__ */ _(me, { addonSubscription: e }, e.id))
 								})
 							})]
 						}),
-						K.length > 0 && /* @__PURE__ */ y(t, {
+						K.length > 0 && /* @__PURE__ */ v(t, {
 							className: "overflow-hidden",
 							children: [
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ _("div", {
 									className: "p-5 border-b border-border-subtle",
-									children: /* @__PURE__ */ v("h2", {
+									children: /* @__PURE__ */ _("h2", {
 										className: "text-base font-semibold text-text-primary",
 										children: "Recent Transactions"
 									})
 								}),
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ _("div", {
 									className: "divide-y divide-border-subtle",
-									children: K.slice(0, 5).map((e) => /* @__PURE__ */ v(de, { transaction: e }, e.id))
+									children: K.slice(0, 5).map((e) => /* @__PURE__ */ _(he, { transaction: e }, e.id))
 								}),
-								K.length > 5 && /* @__PURE__ */ v("div", {
+								K.length > 5 && /* @__PURE__ */ _("div", {
 									className: "p-4 text-center border-t border-border-subtle",
-									children: /* @__PURE__ */ v("button", {
+									children: /* @__PURE__ */ _("button", {
 										type: "button",
 										className: "text-sm text-text-link hover:underline",
 										children: "View all transactions"
@@ -410,140 +404,140 @@ var S = () => {
 							]
 						})
 					]
-				}), /* @__PURE__ */ y("div", {
-					className: "space-y-6",
-					children: [/* @__PURE__ */ y(t, {
+				}), /* @__PURE__ */ v("div", {
+					className: "space-y-6 lg:sticky lg:top-6 lg:self-start",
+					children: [/* @__PURE__ */ v(t, {
 						className: "overflow-hidden",
-						children: [/* @__PURE__ */ v("div", {
+						children: [/* @__PURE__ */ _("div", {
 							className: "p-5 border-b border-border-subtle",
-							children: /* @__PURE__ */ v("h2", {
+							children: /* @__PURE__ */ _("h2", {
 								className: "text-base font-semibold text-text-primary",
 								children: "Details"
 							})
-						}), /* @__PURE__ */ y("div", {
+						}), /* @__PURE__ */ v("div", {
 							className: "p-5 space-y-4",
 							children: [
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "Subscription ID"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "font-mono text-sm text-text-primary mt-0.5 break-all",
-									children: E.id
+									children: w.id
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "Plan"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-primary mt-0.5",
 									children: U?.name || "Unknown"
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "Billing Account"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-primary mt-0.5",
-									children: E.billingAccount?.name || "Unknown"
+									children: w.billingAccount?.name || "Unknown"
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "Start Date"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-primary mt-0.5",
-									children: l(E.startDate)
+									children: l(w.startDate)
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "End Date"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-primary mt-0.5",
-									children: l(E.endDate)
+									children: l(w.endDate)
 								})] }),
-								E.nextBillingDate && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								w.nextBillingDate && /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "Next Billing"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-primary mt-0.5",
-									children: l(E.nextBillingDate)
+									children: l(w.nextBillingDate)
 								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "Auto Renewal"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-primary mt-0.5",
-									children: E.autoRenewal ? "Enabled" : "Disabled"
+									children: w.autoRenewal ? "Enabled" : "Disabled"
 								})] }),
-								E.paymentGateway && /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+								w.paymentGateway && /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 									className: "text-sm text-text-secondary",
 									children: "Payment Gateway"
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "text-sm text-text-primary mt-0.5 capitalize",
-									children: E.paymentGateway
+									children: w.paymentGateway
 								})] })
 							]
 						})]
-					}), q.length > 0 && /* @__PURE__ */ y(t, {
+					}), q.length > 0 && /* @__PURE__ */ v(t, {
 						className: "overflow-hidden",
-						children: [/* @__PURE__ */ v("div", {
+						children: [/* @__PURE__ */ _("div", {
 							className: "p-5 border-b border-border-subtle",
-							children: /* @__PURE__ */ v("h2", {
+							children: /* @__PURE__ */ _("h2", {
 								className: "text-base font-semibold text-text-primary",
 								children: "History"
 							})
-						}), /* @__PURE__ */ v("div", {
+						}), /* @__PURE__ */ _("div", {
 							className: "p-5",
-							children: /* @__PURE__ */ v("div", {
+							children: /* @__PURE__ */ _("div", {
 								className: "space-y-3",
-								children: q.slice(0, 5).map((e) => /* @__PURE__ */ v(fe, { item: e }, e.id))
+								children: q.slice(0, 5).map((e) => /* @__PURE__ */ _(ge, { item: e }, e.id))
 							})
 						})]
 					})]
 				})]
 			}),
-			_e && E && /* @__PURE__ */ v(oe, {
-				subscription: E,
+			I && w && /* @__PURE__ */ _(h, {
+				subscription: w,
 				onClose: () => L(!1),
 				onConfirm: async (e) => {
-					await A({
-						subscriptionId: E.id,
+					await k({
+						subscriptionId: w.id,
 						seatCount: e
-					}), await O();
+					}), await E();
 				},
-				isLoading: j
+				isLoading: A
 			}),
-			F && /* @__PURE__ */ y("div", {
+			P && /* @__PURE__ */ v("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ _("div", {
 					className: "absolute inset-0 bg-overlay-scrim",
-					onClick: () => I(!1)
-				}), /* @__PURE__ */ y("div", {
-					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",
+					onClick: () => F(!1)
+				}), /* @__PURE__ */ v("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__ */ v("h3", {
+						/* @__PURE__ */ _("h3", {
 							id: "cancel-subscription-title",
 							className: "text-lg font-semibold text-text-primary mb-2",
 							children: "Cancel Subscription"
 						}),
-						/* @__PURE__ */ y("p", {
+						/* @__PURE__ */ v("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__ */ v("span", {
+								/* @__PURE__ */ _("span", {
 									className: "font-medium text-text-primary",
-									children: l(E.endDate)
+									children: l(w.endDate)
 								}),
 								", but will not renew automatically."
 							]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ v("div", {
 							className: "mb-4",
-							children: [/* @__PURE__ */ v("label", {
+							children: [/* @__PURE__ */ _("label", {
 								className: "block text-sm font-medium text-text-primary mb-1",
 								children: "Reason for cancellation (optional)"
-							}), /* @__PURE__ */ v("textarea", {
+							}), /* @__PURE__ */ _("textarea", {
 								value: z,
 								onChange: (e) => B(e.target.value),
 								placeholder: "Please share why you're canceling...",
@@ -551,28 +545,28 @@ var S = () => {
 								rows: 3
 							})]
 						}),
-						V && /* @__PURE__ */ v("div", {
+						V && /* @__PURE__ */ _("div", {
 							className: "mb-4 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card",
-							children: /* @__PURE__ */ v("p", {
+							children: /* @__PURE__ */ _("p", {
 								className: "text-sm text-status-error-text",
 								children: V
 							})
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ v("div", {
 							className: "flex items-center justify-end gap-3",
-							children: [/* @__PURE__ */ v("button", {
+							children: [/* @__PURE__ */ _("button", {
 								type: "button",
 								onClick: () => {
-									I(!1), B(""), H(null);
+									F(!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__ */ v("button", {
+							}), /* @__PURE__ */ _("button", {
 								type: "button",
-								onClick: ye,
-								disabled: k,
+								onClick: xe,
+								disabled: O,
 								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"
+								children: O ? "Canceling..." : "Confirm Cancellation"
 							})]
 						})
 					]
@@ -580,23 +574,23 @@ var S = () => {
 			})
 		]
 	});
-}, 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-card border border-border-subtle bg-bg-surface",
+}, 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", {
+		className: "p-4 rounded-card border border-border-seam bg-bg-surface",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex items-start justify-between gap-4 mb-2",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ v("p", {
+					children: [/* @__PURE__ */ _("p", {
 						className: "font-medium text-text-primary truncate",
 						children: n
-					}), r && /* @__PURE__ */ v("p", {
+					}), r && /* @__PURE__ */ _("p", {
 						className: "text-xs text-text-secondary mt-0.5 line-clamp-2",
 						children: r
 					})]
-				}), /* @__PURE__ */ y("span", {
+				}), /* @__PURE__ */ v("span", {
 					className: "text-sm font-medium text-text-primary shrink-0 tabular-nums",
 					children: [
 						c ? s(a) : a.toLocaleString(),
@@ -605,21 +599,21 @@ var S = () => {
 					]
 				})]
 			}),
-			i > 0 && /* @__PURE__ */ v("div", {
+			i > 0 && /* @__PURE__ */ _("div", {
 				className: "h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2",
-				children: /* @__PURE__ */ v("div", {
-					className: `h-full rounded-full transition-all duration-300 ${p(o)}`,
+				children: /* @__PURE__ */ _("div", {
+					className: `h-full rounded-full transition-all duration-300 ${f(o)}`,
 					style: { width: `${o}%` }
 				})
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex items-center justify-between text-xs text-text-secondary",
-				children: [/* @__PURE__ */ v("span", {
+				children: [/* @__PURE__ */ _("span", {
 					className: "px-1.5 py-0.5 rounded bg-bg-sunken font-medium",
 					children: d ? "Shared" : "Per Workspace"
-				}), /* @__PURE__ */ y("div", {
+				}), /* @__PURE__ */ v("div", {
 					className: "flex items-center gap-3",
-					children: [e.endtime && /* @__PURE__ */ y("span", { children: ["Expires ", l(e.endtime, "short")] }), i > 0 && /* @__PURE__ */ y("span", {
+					children: [e.endtime && /* @__PURE__ */ v("span", { children: ["Expires ", l(e.endtime, "short")] }), i > 0 && /* @__PURE__ */ v("span", {
 						className: o >= 90 ? "text-status-error-text font-medium" : o >= 70 ? "text-status-warning-text font-medium" : "",
 						children: [u(o), " used"]
 					})]
@@ -627,23 +621,23 @@ var S = () => {
 			})
 		]
 	});
-}, 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-card border border-border-subtle bg-bg-surface",
+}, 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", {
+		className: "p-4 rounded-card border border-border-seam bg-bg-surface",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex items-start justify-between gap-4 mb-2",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ v("p", {
+					children: [/* @__PURE__ */ _("p", {
 						className: "font-medium text-text-primary truncate",
 						children: i
-					}), /* @__PURE__ */ y("p", {
+					}), /* @__PURE__ */ v("p", {
 						className: "text-xs text-text-secondary mt-0.5",
 						children: [t.quotaMode === "pooled" ? "Pooled across workspaces" : "Dedicated", d && ` · ${d}`]
 					})]
-				}), /* @__PURE__ */ y("span", {
+				}), /* @__PURE__ */ v("span", {
 					className: "text-sm font-medium text-text-primary shrink-0 tabular-nums",
 					children: [
 						c ? s(n) : n.toLocaleString(),
@@ -652,83 +646,83 @@ var S = () => {
 					]
 				})]
 			}),
-			a && /* @__PURE__ */ v("div", {
+			a && /* @__PURE__ */ _("div", {
 				className: "h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2",
-				children: /* @__PURE__ */ v("div", {
-					className: `h-full rounded-full transition-all duration-300 ${p(r)}`,
+				children: /* @__PURE__ */ _("div", {
+					className: `h-full rounded-full transition-all duration-300 ${f(r)}`,
 					style: { width: `${Math.min(100, r)}%` }
 				})
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ v("div", {
 				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", {
+				children: [/* @__PURE__ */ v("span", { children: ["Since ", l(t.createdAt, "short")] }), a && /* @__PURE__ */ v("span", {
 					className: r >= 90 ? "text-status-error-text font-medium" : r >= 70 ? "text-status-warning-text font-medium" : "",
 					children: [u(r), " used"]
 				})]
 			})
 		]
 	});
-}, ue = ({ addonSubscription: e }) => {
+}, me = ({ addonSubscription: e }) => {
 	let t = e.addon;
-	return /* @__PURE__ */ y("div", {
-		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", {
+	return /* @__PURE__ */ v("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", {
 			className: "font-medium text-text-primary",
 			children: t?.name || "Unknown Addon"
-		}), /* @__PURE__ */ y("p", {
+		}), /* @__PURE__ */ v("p", {
 			className: "text-sm text-text-secondary",
 			children: ["Qty: ", e.quantity]
-		})] }), t && /* @__PURE__ */ v("p", {
+		})] }), t && /* @__PURE__ */ _("p", {
 			className: "text-sm font-medium text-text-primary tabular-nums",
 			children: c(t.price * e.quantity, t.currency)
 		})]
 	});
-}, de = ({ transaction: e }) => /* @__PURE__ */ y("div", {
+}, he = ({ transaction: e }) => /* @__PURE__ */ v("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", {
+	children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
 		className: "font-medium text-text-primary capitalize",
 		children: e.type
-	}), /* @__PURE__ */ v("p", {
+	}), /* @__PURE__ */ _("p", {
 		className: "text-sm text-text-secondary",
 		children: l(e.createdAt, "short")
-	})] }), /* @__PURE__ */ y("div", {
+	})] }), /* @__PURE__ */ v("div", {
 		className: "text-right",
-		children: [/* @__PURE__ */ y("p", {
+		children: [/* @__PURE__ */ v("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__ */ v("p", {
+		}), /* @__PURE__ */ _("p", {
 			className: "text-sm text-text-secondary capitalize",
 			children: e.status
 		})]
 	})]
-}), fe = ({ item: e }) => /* @__PURE__ */ y("div", {
+}), ge = ({ item: e }) => /* @__PURE__ */ v("div", {
 	className: "flex items-start gap-3",
-	children: [/* @__PURE__ */ v("div", { className: "size-2 rounded-full bg-text-muted mt-2 shrink-0" }), /* @__PURE__ */ y("div", { children: [
-		/* @__PURE__ */ y("p", {
+	children: [/* @__PURE__ */ _("div", { className: "size-2 rounded-full bg-text-muted mt-2 shrink-0" }), /* @__PURE__ */ v("div", { children: [
+		/* @__PURE__ */ v("p", {
 			className: "text-sm text-text-primary",
 			children: [
-				/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ _("span", {
 					className: "capitalize",
 					children: e.fromStatus
 				}),
 				" → ",
-				/* @__PURE__ */ v("span", {
+				/* @__PURE__ */ _("span", {
 					className: "capitalize font-medium",
 					children: e.toStatus
 				})
 			]
 		}),
-		e.reason && /* @__PURE__ */ v("p", {
+		e.reason && /* @__PURE__ */ _("p", {
 			className: "text-xs text-text-secondary mt-0.5",
 			children: e.reason
 		}),
-		/* @__PURE__ */ v("p", {
+		/* @__PURE__ */ _("p", {
 			className: "text-xs text-text-secondary mt-0.5",
 			children: l(e.createdAt, "short")
 		})
 	] })]
 });
 //#endregion
-export { S as SubscriptionDetailPage };
+export { x as SubscriptionDetailPage };
 
 //# sourceMappingURL=SubscriptionDetailPage.js.map