@burdenoff/microfe-billing 2026.912.6 → 2026.914.1

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

@@ -11,56 +11,59 @@ import { withBillingAccountId as d } from "../../../shared/utils/navigation.js";
 import { useBillingAccounts as f, usePaginatedSubscriptions as p } from "../hooks/useSubscriptions.js";
 import "../hooks/index.js";
 import { useEffect as m, useRef as h, useState as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { EmphasisPanel as b, IllustratedEmptyState as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
+import { useSearchParams as _ } from "react-router";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmphasisPanel as x, IllustratedEmptyState as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/subscriptions/pages/SubscriptionsListPage.tsx
-var C = ["expired", "upgraded"], w = 10, T = () => {
-	let n = t(), i = u(), a = l(), { orgId: o } = e(), { billingAccounts: s, isLoading: c } = f(), { selectedAccountId: T, setSelectedAccountId: D } = r({
+var w = ["expired", "upgraded"], T = 10, E = () => {
+	let n = t(), i = u(), a = l(), { orgId: o } = e(), [s, c] = _(), { billingAccounts: E, isLoading: O } = f(), { selectedAccountId: k, setSelectedAccountId: A } = r({
 		orgId: o,
-		billingAccounts: s,
+		billingAccounts: E,
 		syncFromUrl: !0,
 		urlParamName: "billingAccountId"
-	}), [O, k] = g(!1), [A, j] = g("all"), [M, N] = g(""), [P, F] = g(""), [I, L] = g(1), R = h(void 0);
-	m(() => (clearTimeout(R.current), R.current = setTimeout(() => {
-		F(M), L(1);
-	}, 400), () => clearTimeout(R.current)), [M]);
-	let { subscriptions: z, activeSubscriptions: B, totalCount: V, totalPages: H, isLoading: U, error: W, refetch: G } = p(T ?? void 0, I, w, P || void 0), K = s.find((e) => e.id === T), q = (e) => {
-		D(e.id), k(!1), L(1);
-	}, J = (e) => {
-		L(e);
-	}, Y = z.filter((e) => A === "all" ? !0 : A === "inactive" ? C.includes(e.status) : e.status === A), X = c || U;
-	return a.canViewSubscriptions ? X && !K ? /* @__PURE__ */ y("div", {
+	}), [j, M] = g(!1), [N, P] = g("all"), [F, I] = g(""), [L, R] = g(""), [z, B] = g(1), V = h(void 0);
+	m(() => (clearTimeout(V.current), V.current = setTimeout(() => {
+		R(F), B(1);
+	}, 400), () => clearTimeout(V.current)), [F]);
+	let { subscriptions: H, activeSubscriptions: U, totalCount: W, totalPages: G, isLoading: K, error: q, refetch: J } = p(k ?? void 0, z, T, L || void 0), Y = E.find((e) => e.id === k), X = (e) => {
+		A(e.id);
+		let t = new URLSearchParams(s);
+		t.set("billingAccountId", e.id), c(t, { replace: !0 }), M(!1), B(1);
+	}, Z = (e) => {
+		B(e);
+	}, Q = H.filter((e) => N === "all" ? !0 : N === "inactive" ? w.includes(e.status) : e.status === N), $ = O || K;
+	return a.canViewSubscriptions ? $ && !Y ? /* @__PURE__ */ b("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ v("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ y("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ y("div", {
 			className: "space-y-4",
 			children: [
 				1,
 				2,
 				3
-			].map((e) => /* @__PURE__ */ v("div", {
+			].map((e) => /* @__PURE__ */ y("div", {
 				className: "border border-border-subtle rounded-lg p-6",
-				children: /* @__PURE__ */ y("div", {
+				children: /* @__PURE__ */ b("div", {
 					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ v("div", { className: "size-12 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ y("div", {
+					children: [/* @__PURE__ */ y("div", { className: "size-12 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ b("div", {
 						className: "flex-1 space-y-2",
-						children: [/* @__PURE__ */ v("div", { className: "h-5 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ v("div", { className: "h-4 w-48 bg-bg-sunken animate-pulse rounded" })]
+						children: [/* @__PURE__ */ y("div", { className: "h-5 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ y("div", { className: "h-4 w-48 bg-bg-sunken animate-pulse rounded" })]
 					})]
 				})
 			}, e))
 		})]
-	}) : W ? /* @__PURE__ */ v("div", {
+	}) : q ? /* @__PURE__ */ y("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ y("div", {
 					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ y("svg", {
 						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ y("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -68,50 +71,50 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ y("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: n("billing.subscriptions.failedToLoad", "Failed to load subscriptions")
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ y("p", {
 					className: "text-sm text-text-secondary",
-					children: W.message
+					children: q.message
 				}),
-				/* @__PURE__ */ v("button", {
+				/* @__PURE__ */ y("button", {
 					type: "button",
-					onClick: () => G(),
+					onClick: () => J(),
 					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 					children: n("billing.common.tryAgain", "Try Again")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ y("div", {
+	}) : /* @__PURE__ */ b("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ b("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ y("div", { children: [
-					/* @__PURE__ */ v("h1", {
+				children: [/* @__PURE__ */ b("div", { children: [
+					/* @__PURE__ */ y("h1", {
 						className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 						children: n("billing.subscriptions.title", "Subscriptions")
 					}),
-					/* @__PURE__ */ v("p", {
+					/* @__PURE__ */ y("p", {
 						className: "text-sm text-text-secondary mt-1",
 						children: n("billing.subscriptions.subtitle", "Manage your active and past subscriptions")
 					}),
-					/* @__PURE__ */ v(S, {
+					/* @__PURE__ */ y(C, {
 						className: "mt-3",
 						children: n("billing.subscriptions.purpose", "See every plan a billing account is subscribed to — active, canceled and expired — in one place. Use it to review what you are paying for, when each plan renews or ends, upgrade or cancel a subscription, and start a new one by browsing plans.")
 					})
-				] }), a.canCreateSubscription && /* @__PURE__ */ y("button", {
+				] }), a.canCreateSubscription && /* @__PURE__ */ b("button", {
 					type: "button",
 					onClick: () => i("/plans"),
 					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
-					children: [/* @__PURE__ */ v("svg", {
+					children: [/* @__PURE__ */ y("svg", {
 						className: "size-4",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ y("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -120,91 +123,91 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 					}), n("billing.subscriptions.newSubscription", "New Subscription")]
 				})]
 			}),
-			s.length > 1 && /* @__PURE__ */ y("div", {
+			E.length > 1 && /* @__PURE__ */ b("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ y("button", {
+				children: [/* @__PURE__ */ b("button", {
 					type: "button",
-					onClick: () => k(!O),
+					onClick: () => M(!j),
 					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-seam rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
-					children: [/* @__PURE__ */ y("div", {
+					children: [/* @__PURE__ */ b("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ v("div", {
+						children: [/* @__PURE__ */ y("div", {
 							className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
-							children: /* @__PURE__ */ v("svg", {
+							children: /* @__PURE__ */ y("svg", {
 								className: "size-4 text-text-link",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
-								children: /* @__PURE__ */ v("path", {
+								children: /* @__PURE__ */ y("path", {
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
 									strokeWidth: 2,
 									d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
 								})
 							})
-						}), /* @__PURE__ */ y("div", {
+						}), /* @__PURE__ */ b("div", {
 							className: "text-left",
-							children: [/* @__PURE__ */ v("p", {
+							children: [/* @__PURE__ */ y("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: K?.name || n("billing.subscriptions.selectAccount", "Select Account")
-							}), /* @__PURE__ */ v("p", {
+								children: Y?.name || n("billing.subscriptions.selectAccount", "Select Account")
+							}), /* @__PURE__ */ y("p", {
 								className: "text-xs text-text-secondary",
-								children: K?.email
+								children: Y?.email
 							})]
 						})]
-					}), /* @__PURE__ */ v("svg", {
-						className: `size-4 text-text-secondary transition-transform ${O ? "rotate-180" : ""}`,
+					}), /* @__PURE__ */ y("svg", {
+						className: `size-4 text-text-secondary transition-transform ${j ? "rotate-180" : ""}`,
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ y("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
 							d: "M19 9l-7 7-7-7"
 						})
 					})]
-				}), O && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
+				}), j && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("div", {
 					className: "fixed inset-0 z-10",
-					onClick: () => k(!1)
-				}), /* @__PURE__ */ v("div", {
+					onClick: () => M(!1)
+				}), /* @__PURE__ */ y("div", {
 					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-seam rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
-					children: s.map((e) => /* @__PURE__ */ y("button", {
+					children: E.map((e) => /* @__PURE__ */ b("button", {
 						type: "button",
-						onClick: () => q(e),
+						onClick: () => X(e),
 						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
-						children: [/* @__PURE__ */ y("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "flex items-center gap-3 min-w-0",
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ y("div", {
 								className: "size-9 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
-								children: /* @__PURE__ */ v("svg", {
+								children: /* @__PURE__ */ y("svg", {
 									className: "size-4 text-text-secondary",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
-									children: /* @__PURE__ */ v("path", {
+									children: /* @__PURE__ */ y("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
 										d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
 									})
 								})
-							}), /* @__PURE__ */ y("div", {
+							}), /* @__PURE__ */ b("div", {
 								className: "text-left min-w-0",
-								children: [/* @__PURE__ */ v("p", {
+								children: [/* @__PURE__ */ y("p", {
 									className: "text-sm font-medium text-text-primary truncate",
 									children: e.name
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ y("p", {
 									className: "text-xs text-text-secondary truncate",
 									children: e.email
 								})]
 							})]
-						}), K?.id === e.id && /* @__PURE__ */ v("svg", {
+						}), Y?.id === e.id && /* @__PURE__ */ y("svg", {
 							className: "size-4 text-text-link flex-shrink-0",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ v("path", {
+							children: /* @__PURE__ */ y("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -214,32 +217,32 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 					}, e.id))
 				})] })]
 			}),
-			K && /* @__PURE__ */ v(b, {
+			Y && /* @__PURE__ */ y(x, {
 				className: "p-5",
-				children: /* @__PURE__ */ y("div", {
+				children: /* @__PURE__ */ b("div", {
 					className: "grid grid-cols-1 sm:grid-cols-3 gap-4",
 					children: [
-						/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 							className: "text-sm text-text-secondary",
 							children: n("billing.subscriptions.account", "Account")
-						}), /* @__PURE__ */ v("p", {
+						}), /* @__PURE__ */ y("p", {
 							className: "text-lg font-semibold text-text-primary mt-1",
-							children: K.name
+							children: Y.name
 						})] }),
-						/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 							className: "text-sm text-text-secondary",
 							children: n("billing.subscriptions.activeSubscriptions", "Active Subscriptions")
-						}), /* @__PURE__ */ v("p", {
+						}), /* @__PURE__ */ y("p", {
 							className: "text-lg font-semibold tabular-nums text-status-success-text mt-1",
-							children: B.length
+							children: U.length
 						})] }),
-						/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
 							className: "text-sm text-text-secondary",
 							children: n("billing.subscriptions.creditBalance", "Credit Balance")
-						}), /* @__PURE__ */ y("p", {
+						}), /* @__PURE__ */ b("p", {
 							className: "text-lg font-semibold tabular-nums text-text-primary mt-1",
 							children: [
-								(K.creditAmount || 0).toLocaleString(),
+								(Y.creditAmount || 0).toLocaleString(),
 								" ",
 								n("billing.common.credits", "Credits")
 							]
@@ -247,85 +250,85 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 					]
 				})
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ b("div", {
 				className: "flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border-subtle",
 				children: [
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ y("div", {
 						className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken flex-wrap",
 						children: [
 							"all",
 							"active",
 							"canceled",
 							"inactive"
-						].map((e) => /* @__PURE__ */ v("button", {
+						].map((e) => /* @__PURE__ */ y("button", {
 							type: "button",
-							onClick: () => j(e),
-							className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${A === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
+							onClick: () => P(e),
+							className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${N === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 							children: e === "all" ? n("billing.subscriptions.statusAll", "All") : e === "active" ? n("billing.subscriptions.statusActive", "Active") : e === "canceled" ? n("billing.subscriptions.statusCanceled", "Canceled") : n("billing.subscriptions.statusInactive", "Inactive")
 						}, e))
 					}),
-					/* @__PURE__ */ y("div", {
+					/* @__PURE__ */ b("div", {
 						className: "relative flex-1 min-w-0 w-full sm:max-w-md",
-						children: [/* @__PURE__ */ v("svg", {
+						children: [/* @__PURE__ */ y("svg", {
 							className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ v("path", {
+							children: /* @__PURE__ */ y("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
 								d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
 							})
-						}), /* @__PURE__ */ v("input", {
+						}), /* @__PURE__ */ y("input", {
 							type: "text",
 							placeholder: n("billing.subscriptions.searchPlaceholder", "Search subscriptions..."),
-							value: M,
-							onChange: (e) => N(e.target.value),
+							value: F,
+							onChange: (e) => I(e.target.value),
 							className: "w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 						})]
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ y("div", {
 						className: "text-sm text-text-secondary",
 						children: n("billing.subscriptions.totalCount", "{{count}} subscription{{plural}} total", {
-							count: V,
-							plural: V === 1 ? "" : "s"
+							count: W,
+							plural: W === 1 ? "" : "s"
 						})
 					})
 				]
 			}),
-			Y.length === 0 ? /* @__PURE__ */ v(x, {
-				illustration: A !== "all" || P ? "empty-search" : "empty-data",
+			Q.length === 0 ? /* @__PURE__ */ y(S, {
+				illustration: N !== "all" || L ? "empty-search" : "empty-data",
 				title: n("billing.subscriptions.noSubscriptionsFound", "No subscriptions found"),
-				description: A !== "all" || P ? n("billing.subscriptions.noSubscriptionsMatchFilters", "No subscriptions match your filters.") : n("billing.subscriptions.noSubscriptionsYet", "You don't have any subscriptions yet."),
-				action: a.canCreateSubscription && A === "all" && !P ? /* @__PURE__ */ v("button", {
+				description: N !== "all" || L ? n("billing.subscriptions.noSubscriptionsMatchFilters", "No subscriptions match your filters.") : n("billing.subscriptions.noSubscriptionsYet", "You don't have any subscriptions yet."),
+				action: a.canCreateSubscription && N === "all" && !L ? /* @__PURE__ */ y("button", {
 					type: "button",
 					onClick: () => i("/plans"),
 					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: n("billing.subscriptions.browsePlans", "Browse Plans")
 				}) : void 0
-			}) : /* @__PURE__ */ v("div", {
+			}) : /* @__PURE__ */ y("div", {
 				className: "space-y-4",
-				children: Y.map((e) => /* @__PURE__ */ v(E, {
+				children: Q.map((e) => /* @__PURE__ */ y(D, {
 					subscription: e,
 					onView: () => i(d(`/subscriptions/${e.id}`, e.billingAccountId)),
 					canCancel: a.canCancelSubscription
 				}, e.id))
 			}),
-			H > 1 && /* @__PURE__ */ y("div", {
+			G > 1 && /* @__PURE__ */ b("div", {
 				className: "flex items-center justify-center gap-2 pt-4",
 				children: [
-					/* @__PURE__ */ v("button", {
+					/* @__PURE__ */ y("button", {
 						type: "button",
-						onClick: () => J(I - 1),
-						disabled: I === 1,
+						onClick: () => Z(z - 1),
+						disabled: z === 1,
 						className: "px-3 py-1.5 text-sm border border-border-subtle rounded-button disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
-						children: /* @__PURE__ */ v("svg", {
+						children: /* @__PURE__ */ y("svg", {
 							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ v("path", {
+							children: /* @__PURE__ */ y("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -333,32 +336,32 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 							})
 						})
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ y("div", {
 						className: "flex items-center gap-1",
-						children: Array.from({ length: H }, (e, t) => t + 1).map((e) => {
-							let t = e === 1 || e === H || Math.abs(e - I) <= 1, n = e === I - 2 && I > 3, r = e === I + 2 && I < H - 2;
-							return n || r ? /* @__PURE__ */ v("span", {
+						children: Array.from({ length: G }, (e, t) => t + 1).map((e) => {
+							let t = e === 1 || e === G || Math.abs(e - z) <= 1, n = e === z - 2 && z > 3, r = e === z + 2 && z < G - 2;
+							return n || r ? /* @__PURE__ */ y("span", {
 								className: "px-2 text-text-secondary",
 								children: "..."
-							}, e) : t ? /* @__PURE__ */ v("button", {
+							}, e) : t ? /* @__PURE__ */ y("button", {
 								type: "button",
-								onClick: () => J(e),
-								className: `px-3 py-1.5 text-sm rounded-button transition-colors ${e === I ? "bg-action-primary-bg text-action-primary-text" : "border border-border-subtle hover:bg-bg-sunken"}`,
+								onClick: () => Z(e),
+								className: `px-3 py-1.5 text-sm rounded-button transition-colors ${e === z ? "bg-action-primary-bg text-action-primary-text" : "border border-border-subtle hover:bg-bg-sunken"}`,
 								children: e
 							}, e) : null;
 						})
 					}),
-					/* @__PURE__ */ v("button", {
+					/* @__PURE__ */ y("button", {
 						type: "button",
-						onClick: () => J(I + 1),
-						disabled: I === H,
+						onClick: () => Z(z + 1),
+						disabled: z === G,
 						className: "px-3 py-1.5 text-sm border border-border-subtle rounded-button disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
-						children: /* @__PURE__ */ v("svg", {
+						children: /* @__PURE__ */ y("svg", {
 							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
-							children: /* @__PURE__ */ v("path", {
+							children: /* @__PURE__ */ y("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								strokeWidth: 2,
@@ -369,19 +372,19 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 				]
 			})
 		]
-	}) : /* @__PURE__ */ v("div", {
+	}) : /* @__PURE__ */ y("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: "text-center space-y-2",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ y("div", {
 					className: "size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ y("svg", {
 						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ y("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -389,36 +392,36 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ y("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: n("billing.accessDenied.title", "Access Denied")
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ y("p", {
 					className: "text-sm text-text-secondary max-w-sm",
 					children: n("billing.subscriptions.noViewPermission", "You don't have permission to view subscriptions.")
 				})
 			]
 		})
 	});
-}, E = ({ subscription: e, onView: r, canCancel: l }) => {
+}, D = ({ subscription: e, onView: r, canCancel: l }) => {
 	let u = t(), d = e.plan, f = c(e.status), p = e.status === "active", m = new Date(e.endDate), h = /* @__PURE__ */ new Date(), g = Math.max(0, Math.ceil((m.getTime() - h.getTime()) / (1e3 * 60 * 60 * 24)));
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ y("div", {
 		className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 hover:border-border-strong hover:shadow-elevation-2 transition-all duration-200 cursor-pointer",
 		onClick: r,
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: "p-5",
 			children: [
-				/* @__PURE__ */ y("div", {
+				/* @__PURE__ */ b("div", {
 					className: "flex flex-col sm:flex-row sm:items-center gap-4",
 					children: [
-						/* @__PURE__ */ v("div", {
+						/* @__PURE__ */ y("div", {
 							className: "size-12 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0",
-							children: /* @__PURE__ */ v("svg", {
+							children: /* @__PURE__ */ y("svg", {
 								className: "size-6 text-text-link",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
-								children: /* @__PURE__ */ v("path", {
+								children: /* @__PURE__ */ y("path", {
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
 									strokeWidth: 2,
@@ -426,51 +429,51 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 								})
 							})
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ b("div", {
 							className: "flex-1 min-w-0",
-							children: [/* @__PURE__ */ y("div", {
+							children: [/* @__PURE__ */ b("div", {
 								className: "flex items-center gap-2 flex-wrap",
-								children: [/* @__PURE__ */ v("h3", {
+								children: [/* @__PURE__ */ y("h3", {
 									className: "font-semibold text-text-primary",
 									children: d?.name || u("billing.common.unknownPlan", "Unknown Plan")
-								}), /* @__PURE__ */ v(n, {
+								}), /* @__PURE__ */ y(n, {
 									status: f,
 									dot: !0,
 									pulse: p,
 									children: s(e.status)
 								})]
-							}), /* @__PURE__ */ y("div", {
+							}), /* @__PURE__ */ b("div", {
 								className: "flex items-center gap-4 mt-1 text-sm text-text-secondary",
 								children: [
-									/* @__PURE__ */ y("span", { children: [
+									/* @__PURE__ */ b("span", { children: [
 										d ? i(d.price, d.currency) : "—",
 										" /",
 										" ",
 										d ? o(d.duration) : "—"
 									] }),
-									/* @__PURE__ */ v("span", {
+									/* @__PURE__ */ y("span", {
 										className: "hidden sm:inline",
 										children: "•"
 									}),
-									/* @__PURE__ */ v("span", {
+									/* @__PURE__ */ y("span", {
 										className: "hidden sm:inline",
 										children: u("billing.subscriptions.started", "Started {{date}}", { date: a(e.startDate, "short") })
 									})
 								]
 							})]
 						}),
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ b("div", {
 							className: "flex items-center gap-4",
-							children: [p && /* @__PURE__ */ y("div", {
+							children: [p && /* @__PURE__ */ b("div", {
 								className: "text-right",
-								children: [/* @__PURE__ */ v("p", {
+								children: [/* @__PURE__ */ y("p", {
 									className: "text-sm font-medium text-text-primary",
 									children: u("billing.subscriptions.daysRemaining", "{{count}} days", { count: g })
-								}), /* @__PURE__ */ v("p", {
+								}), /* @__PURE__ */ y("p", {
 									className: "text-xs text-text-secondary",
 									children: u("billing.subscriptions.remaining", "remaining")
 								})]
-							}), /* @__PURE__ */ v("button", {
+							}), /* @__PURE__ */ y("button", {
 								type: "button",
 								onClick: (e) => {
 									e.stopPropagation(), r();
@@ -481,9 +484,9 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 						})
 					]
 				}),
-				e.addonSubscriptions && e.addonSubscriptions.length > 0 && /* @__PURE__ */ v("div", {
+				e.addonSubscriptions && e.addonSubscriptions.length > 0 && /* @__PURE__ */ y("div", {
 					className: "mt-4 pt-4 border-t border-border-subtle",
-					children: /* @__PURE__ */ v("p", {
+					children: /* @__PURE__ */ y("p", {
 						className: "text-sm text-text-secondary",
 						children: u("billing.subscriptions.addonsAttached", "{{count}} addon{{plural}} attached", {
 							count: e.addonSubscriptions.length,
@@ -491,11 +494,11 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 						})
 					})
 				}),
-				e.canceledAt && /* @__PURE__ */ v("div", {
+				e.canceledAt && /* @__PURE__ */ y("div", {
 					className: "mt-4 pt-4 border-t border-border-subtle",
-					children: /* @__PURE__ */ y("p", {
+					children: /* @__PURE__ */ b("p", {
 						className: "text-sm text-text-secondary",
-						children: [u("billing.subscriptions.canceledOn", "Canceled on {{date}}", { date: a(e.canceledAt) }), e.cancellationReason && /* @__PURE__ */ y("span", { children: [": ", e.cancellationReason] })]
+						children: [u("billing.subscriptions.canceledOn", "Canceled on {{date}}", { date: a(e.canceledAt) }), e.cancellationReason && /* @__PURE__ */ b("span", { children: [": ", e.cancellationReason] })]
 					})
 				})
 			]
@@ -503,6 +506,6 @@ var C = ["expired", "upgraded"], w = 10, T = () => {
 	});
 };
 //#endregion
-export { T as SubscriptionsListPage };
+export { E as SubscriptionsListPage };
 
 //# sourceMappingURL=SubscriptionsListPage.js.map