@burdenoff/microfe-billing 2026.623.2 → 2026.623.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/billing/modules/addons/pages/AddonsListPage.js +1 -1
  2. package/dist/billing/modules/addons/pages/AddonsListPage.js.map +1 -1
  3. package/dist/billing/modules/dashboard/components/RecommendedAddonsSection.js +1 -1
  4. package/dist/billing/modules/dashboard/components/RecommendedAddonsSection.js.map +1 -1
  5. package/dist/billing/modules/plans/pages/PlansBrowsePage.js +146 -142
  6. package/dist/billing/modules/plans/pages/PlansBrowsePage.js.map +1 -1
  7. package/dist/billing/modules/plans/pages/PlansListPage.js +1 -1
  8. package/dist/billing/modules/plans/pages/PlansListPage.js.map +1 -1
  9. package/dist/billing/modules/quota/pages/QuotaTemplatesListPage.js +1 -1
  10. package/dist/billing/modules/quota/pages/QuotaTemplatesListPage.js.map +1 -1
  11. package/dist/billing/modules/subscriptions/pages/SubscriptionsListPage.js +1 -1
  12. package/dist/billing/modules/subscriptions/pages/SubscriptionsListPage.js.map +1 -1
  13. package/dist/billing/modules/usage/pages/UsagePage.js +1 -1
  14. package/dist/billing/modules/usage/pages/UsagePage.js.map +1 -1
  15. package/dist/billing/shared/ui/Card.js +1 -1
  16. package/dist/billing/shared/ui/Card.js.map +1 -1
  17. package/dist/billing/shared/ui/MetricCard.js +1 -1
  18. package/dist/billing/shared/ui/MetricCard.js.map +1 -1
  19. package/package.json +1 -1
package/dist/billing/modules/plans/pages/PlansBrowsePage.js CHANGED
@@ -12,10 +12,11 @@ import { usePlans as d } from "../hooks/usePlans.js";
12
12
  import "../hooks/index.js";
13
13
  import { FEATURED_QUOTA_LABELS as f, FEATURED_QUOTA_NAMES as p, formatFeaturedQuotaValue as m } from "../constants/featuredQuotas.js";
14
14
  import { useState as h } from "react";
15
- import { jsx as g, jsxs as _ } from "react/jsx-runtime";
16
- import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
15
+ import { ArrowRight as g, Check as _, Sparkles as v } from "lucide-react";
16
+ import { jsx as y, jsxs as b } from "react/jsx-runtime";
17
+ import { useI18n as x } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
17
18
  //#region src/billing/modules/plans/pages/PlansBrowsePage.tsx
18
- function y(e) {
19
+ function S(e) {
19
20
  let t = /* @__PURE__ */ new Map();
20
21
  for (let n of e) {
21
22
  if (!n.quota) continue;
@@ -28,103 +29,103 @@ function y(e) {
28
29
  }
29
30
  return Array.from(t.values());
30
31
  }
31
- function b(e) {
32
- let t = y(e), n = new Map(t.map((e) => [e.name, e]));
32
+ function C(e) {
33
+ let t = S(e), n = new Map(t.map((e) => [e.name, e]));
33
34
  return p.flatMap((e) => {
34
35
  let t = n.get(e);
35
36
  return t ? [t] : [];
36
37
  });
37
38
  }
38
- var x = () => {
39
- let { t: r } = v(), i = (e, t) => {
39
+ var w = () => {
40
+ let { t: r } = x(), i = (e, t) => {
40
41
  let n = r(e);
41
42
  return n === e ? t : n;
42
43
  }, a = c(), { productId: s } = e(), { plans: l, isLoading: u, error: f, refetch: p } = d({
43
44
  includeFree: !1,
44
45
  productId: s ?? void 0
45
- }), [m, y] = h("grid"), [b, x] = h(n.MONTHLY), S = l.filter((e) => e.isActive && e.isPurchasable !== !1 && e.duration === b);
46
- return u && l.length === 0 ? /* @__PURE__ */ _("div", {
46
+ }), [m, g] = h("grid"), [_, v] = h(n.MONTHLY), S = l.filter((e) => e.isActive && e.isPurchasable !== !1 && e.duration === _), C = S.length >= 2 ? 1 : -1;
47
+ return u && l.length === 0 ? /* @__PURE__ */ b("div", {
47
48
  className: "space-y-6 px-6 lg:px-8 py-6",
48
- children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded-card" }), /* @__PURE__ */ g("div", {
49
+ children: [/* @__PURE__ */ y("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded-card" }), /* @__PURE__ */ y("div", {
49
50
  className: "grid grid-cols-1 md:grid-cols-3 gap-6",
50
51
  children: [
51
52
  1,
52
53
  2,
53
54
  3
54
- ].map((e) => /* @__PURE__ */ _("div", {
55
+ ].map((e) => /* @__PURE__ */ b("div", {
55
56
  className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4",
56
57
  children: [
57
- /* @__PURE__ */ g("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }),
58
- /* @__PURE__ */ g("div", { className: "h-8 w-32 bg-bg-sunken animate-pulse rounded" }),
59
- /* @__PURE__ */ g("div", {
58
+ /* @__PURE__ */ y("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }),
59
+ /* @__PURE__ */ y("div", { className: "h-8 w-32 bg-bg-sunken animate-pulse rounded" }),
60
+ /* @__PURE__ */ y("div", {
60
61
  className: "space-y-2",
61
62
  children: [
62
63
  1,
63
64
  2,
64
65
  3
65
- ].map((e) => /* @__PURE__ */ g("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" }, e))
66
+ ].map((e) => /* @__PURE__ */ y("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" }, e))
66
67
  })
67
68
  ]
68
69
  }, e))
69
70
  })]
70
- }) : f && o(f) ? /* @__PURE__ */ g("div", {
71
+ }) : f && o(f) ? /* @__PURE__ */ y("div", {
71
72
  className: "p-6",
72
- children: /* @__PURE__ */ g(t, {
73
+ children: /* @__PURE__ */ y(t, {
73
74
  title: i("billing.plans.serverUnavailable", "Server Unavailable"),
74
75
  message: i("billing.plans.unableToLoadPlans", "Unable to load plans."),
75
76
  onRetry: () => p(),
76
77
  showRetry: !0
77
78
  })
78
- }) : /* @__PURE__ */ _("div", {
79
+ }) : /* @__PURE__ */ b("div", {
79
80
  className: "space-y-6 px-6 lg:px-8 py-6",
80
81
  children: [
81
- /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
82
+ /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
82
83
  className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
83
84
  children: i("billing.plans.browsePlansTitle", "Plans")
84
- }), /* @__PURE__ */ g("p", {
85
+ }), /* @__PURE__ */ y("p", {
85
86
  className: "text-sm text-text-secondary mt-1",
86
87
  children: i("billing.plans.browsePlansSubtitle", "Choose a plan that fits your needs")
87
88
  })] }),
88
- /* @__PURE__ */ _("div", {
89
+ /* @__PURE__ */ b("div", {
89
90
  className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle",
90
- children: [/* @__PURE__ */ g("div", {
91
+ children: [/* @__PURE__ */ y("div", {
91
92
  className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken",
92
- children: [n.MONTHLY, n.YEARLY].map((e) => /* @__PURE__ */ g("button", {
93
+ children: [n.MONTHLY, n.YEARLY].map((e) => /* @__PURE__ */ y("button", {
93
94
  type: "button",
94
- onClick: () => x(e),
95
- className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${b === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
95
+ onClick: () => v(e),
96
+ className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${_ === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
96
97
  children: e === n.MONTHLY ? "Monthly" : "Yearly"
97
98
  }, e))
98
- }), /* @__PURE__ */ _("div", {
99
+ }), /* @__PURE__ */ b("div", {
99
100
  className: "ml-auto inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken",
100
- children: [/* @__PURE__ */ g("button", {
101
+ children: [/* @__PURE__ */ y("button", {
101
102
  type: "button",
102
- onClick: () => y("grid"),
103
+ onClick: () => g("grid"),
103
104
  className: `p-1.5 rounded-button transition-colors ${m === "grid" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
104
105
  title: "Grid view",
105
- children: /* @__PURE__ */ g("svg", {
106
+ children: /* @__PURE__ */ y("svg", {
106
107
  className: "size-4",
107
108
  fill: "none",
108
109
  viewBox: "0 0 24 24",
109
110
  stroke: "currentColor",
110
- children: /* @__PURE__ */ g("path", {
111
+ children: /* @__PURE__ */ y("path", {
111
112
  strokeLinecap: "round",
112
113
  strokeLinejoin: "round",
113
114
  strokeWidth: 2,
114
115
  d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
115
116
  })
116
117
  })
117
- }), /* @__PURE__ */ g("button", {
118
+ }), /* @__PURE__ */ y("button", {
118
119
  type: "button",
119
- onClick: () => y("list"),
120
+ onClick: () => g("list"),
120
121
  className: `p-1.5 rounded-button transition-colors ${m === "list" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
121
122
  title: "List view",
122
- children: /* @__PURE__ */ g("svg", {
123
+ children: /* @__PURE__ */ y("svg", {
123
124
  className: "size-4",
124
125
  fill: "none",
125
126
  viewBox: "0 0 24 24",
126
127
  stroke: "currentColor",
127
- children: /* @__PURE__ */ g("path", {
128
+ children: /* @__PURE__ */ y("path", {
128
129
  strokeLinecap: "round",
129
130
  strokeLinejoin: "round",
130
131
  strokeWidth: 2,
@@ -134,17 +135,17 @@ var x = () => {
134
135
  })]
135
136
  })]
136
137
  }),
137
- S.length === 0 ? /* @__PURE__ */ _("div", {
138
+ S.length === 0 ? /* @__PURE__ */ b("div", {
138
139
  className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card",
139
140
  children: [
140
- /* @__PURE__ */ g("div", {
141
+ /* @__PURE__ */ y("div", {
141
142
  className: "size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4",
142
- children: /* @__PURE__ */ g("svg", {
143
+ children: /* @__PURE__ */ y("svg", {
143
144
  className: "size-6 text-text-secondary",
144
145
  fill: "none",
145
146
  viewBox: "0 0 24 24",
146
147
  stroke: "currentColor",
147
- children: /* @__PURE__ */ g("path", {
148
+ children: /* @__PURE__ */ y("path", {
148
149
  strokeLinecap: "round",
149
150
  strokeLinejoin: "round",
150
151
  strokeWidth: 2,
@@ -152,33 +153,34 @@ var x = () => {
152
153
  })
153
154
  })
154
155
  }),
155
- /* @__PURE__ */ g("h3", {
156
+ /* @__PURE__ */ y("h3", {
156
157
  className: "text-lg font-medium text-text-primary",
157
158
  children: i("billing.plans.noPlansAvailable", "No plans available")
158
159
  }),
159
- /* @__PURE__ */ g("p", {
160
+ /* @__PURE__ */ y("p", {
160
161
  className: "text-sm text-text-secondary mt-1",
161
162
  children: i("billing.plans.checkBackLater", "Check back later for new plans.")
162
163
  })
163
164
  ]
164
- }) : m === "grid" ? /* @__PURE__ */ _("div", {
165
- className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
166
- children: [S.map((e) => /* @__PURE__ */ g(T, {
165
+ }) : m === "grid" ? /* @__PURE__ */ b("div", {
166
+ className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch",
167
+ children: [S.map((e, t) => /* @__PURE__ */ y(O, {
167
168
  plan: e,
169
+ highlighted: t === C,
168
170
  onView: () => a(`/plans/${e.id}`),
169
171
  onSubscribe: () => a(`/checkout/${e.id}`)
170
- }, e.id)), /* @__PURE__ */ g(C, {})]
171
- }) : /* @__PURE__ */ _("div", {
172
+ }, e.id)), /* @__PURE__ */ y(E, {})]
173
+ }) : /* @__PURE__ */ b("div", {
172
174
  className: "space-y-3",
173
- children: [S.map((e) => /* @__PURE__ */ g(E, {
175
+ children: [S.map((e) => /* @__PURE__ */ y(k, {
174
176
  plan: e,
175
177
  onView: () => a(`/plans/${e.id}`),
176
178
  onSubscribe: () => a(`/checkout/${e.id}`)
177
- }, e.id)), /* @__PURE__ */ g(w, {})]
179
+ }, e.id)), /* @__PURE__ */ y(D, {})]
178
180
  })
179
181
  ]
180
182
  });
181
- }, S = [
183
+ }, T = [
182
184
  "Unlimited Agents & Sessions",
183
185
  "Dedicated single-tenant infra",
184
186
  "Customer-managed encryption keys",
@@ -187,73 +189,73 @@ var x = () => {
187
189
  "Volume-based custom pricing",
188
190
  "Audit log with custom retention",
189
191
  "Priority onboarding & migration"
190
- ], C = () => /* @__PURE__ */ _("div", {
192
+ ], E = () => /* @__PURE__ */ b("div", {
191
193
  className: "border border-border-strong bg-[var(--color-accent-soft)] rounded-card shadow-elevation-1 p-5 flex flex-col h-full",
192
194
  children: [
193
- /* @__PURE__ */ _("div", {
195
+ /* @__PURE__ */ b("div", {
194
196
  className: "mb-4",
195
- children: [/* @__PURE__ */ _("div", {
197
+ children: [/* @__PURE__ */ b("div", {
196
198
  className: "flex items-center gap-2",
197
- children: [/* @__PURE__ */ g("h3", {
199
+ children: [/* @__PURE__ */ y("h3", {
198
200
  className: "text-lg font-semibold text-text-primary",
199
201
  children: "Enterprise"
200
- }), /* @__PURE__ */ g("span", {
202
+ }), /* @__PURE__ */ y("span", {
201
203
  className: "text-xs font-medium px-2 py-0.5 rounded-full bg-bg-surface text-text-link",
202
204
  children: "Contact Us"
203
205
  })]
204
- }), /* @__PURE__ */ g("span", {
206
+ }), /* @__PURE__ */ y("span", {
205
207
  className: "text-sm text-text-secondary",
206
208
  children: "Custom contract"
207
209
  })]
208
210
  }),
209
- /* @__PURE__ */ g("div", {
211
+ /* @__PURE__ */ y("div", {
210
212
  className: "flex items-baseline gap-1 mb-4",
211
- children: /* @__PURE__ */ g("span", {
213
+ children: /* @__PURE__ */ y("span", {
212
214
  className: "text-2xl font-semibold text-text-primary",
213
215
  children: "Custom pricing"
214
216
  })
215
217
  }),
216
- /* @__PURE__ */ g("ul", {
218
+ /* @__PURE__ */ y("ul", {
217
219
  className: "space-y-2 mb-4 flex-1",
218
- children: S.map((e) => /* @__PURE__ */ _("li", {
220
+ children: T.map((e) => /* @__PURE__ */ b("li", {
219
221
  className: "flex items-center gap-2 text-sm",
220
- children: [/* @__PURE__ */ g("svg", {
222
+ children: [/* @__PURE__ */ y("svg", {
221
223
  className: "size-4 text-status-success-text shrink-0",
222
224
  fill: "none",
223
225
  viewBox: "0 0 24 24",
224
226
  stroke: "currentColor",
225
- children: /* @__PURE__ */ g("path", {
227
+ children: /* @__PURE__ */ y("path", {
226
228
  strokeLinecap: "round",
227
229
  strokeLinejoin: "round",
228
230
  strokeWidth: 2,
229
231
  d: "M5 13l4 4L19 7"
230
232
  })
231
- }), /* @__PURE__ */ g("span", {
233
+ }), /* @__PURE__ */ y("span", {
232
234
  className: "text-text-primary",
233
235
  children: e
234
236
  })]
235
237
  }, e))
236
238
  }),
237
- /* @__PURE__ */ g("div", {
239
+ /* @__PURE__ */ y("div", {
238
240
  className: "space-y-2 pt-4 border-t border-border-subtle mt-auto",
239
- children: /* @__PURE__ */ g("a", {
241
+ children: /* @__PURE__ */ y("a", {
240
242
  href: "mailto:contact@burdenoff.com?subject=Enterprise Plan Inquiry",
241
243
  className: "block w-full px-4 py-2 text-sm font-medium text-center bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
242
244
  children: "Contact Us"
243
245
  })
244
246
  })
245
247
  ]
246
- }), w = () => /* @__PURE__ */ _("div", {
247
- className: "flex items-center gap-4 p-5 border border-border-strong rounded-card bg-[var(--color-accent-soft)] shadow-elevation-1 transition-all duration-200 hover:shadow-elevation-2 hover:-translate-y-0.5",
248
+ }), D = () => /* @__PURE__ */ b("div", {
249
+ className: "flex items-center gap-4 p-5 border border-border-strong rounded-card bg-[var(--color-accent-soft)] shadow-elevation-1 transition-all duration-200 hover:shadow-elevation-2",
248
250
  children: [
249
- /* @__PURE__ */ g("div", {
251
+ /* @__PURE__ */ y("div", {
250
252
  className: "size-10 rounded-lg bg-bg-surface flex items-center justify-center shrink-0 shadow-elevation-1",
251
- children: /* @__PURE__ */ g("svg", {
253
+ children: /* @__PURE__ */ y("svg", {
252
254
  className: "size-5 text-text-link",
253
255
  fill: "none",
254
256
  viewBox: "0 0 24 24",
255
257
  stroke: "currentColor",
256
- children: /* @__PURE__ */ g("path", {
258
+ children: /* @__PURE__ */ y("path", {
257
259
  strokeLinecap: "round",
258
260
  strokeLinejoin: "round",
259
261
  strokeWidth: 2,
@@ -261,129 +263,131 @@ var x = () => {
261
263
  })
262
264
  })
263
265
  }),
264
- /* @__PURE__ */ _("div", {
266
+ /* @__PURE__ */ b("div", {
265
267
  className: "flex-1 min-w-0",
266
- children: [/* @__PURE__ */ _("div", {
268
+ children: [/* @__PURE__ */ b("div", {
267
269
  className: "flex items-center gap-2",
268
- children: [/* @__PURE__ */ g("h3", {
270
+ children: [/* @__PURE__ */ y("h3", {
269
271
  className: "font-semibold text-text-primary",
270
272
  children: "Enterprise"
271
- }), /* @__PURE__ */ g("span", {
273
+ }), /* @__PURE__ */ y("span", {
272
274
  className: "text-xs font-medium px-2 py-0.5 rounded-full bg-bg-surface text-text-link shrink-0",
273
275
  children: "Contact Us"
274
276
  })]
275
- }), /* @__PURE__ */ g("p", {
277
+ }), /* @__PURE__ */ y("p", {
276
278
  className: "text-sm text-text-secondary",
277
279
  children: "Dedicated infra · SSO/SCIM · Custom SLA"
278
280
  })]
279
281
  }),
280
- /* @__PURE__ */ _("div", {
282
+ /* @__PURE__ */ b("div", {
281
283
  className: "text-right",
282
- children: [/* @__PURE__ */ g("div", {
284
+ children: [/* @__PURE__ */ y("div", {
283
285
  className: "font-semibold text-text-primary",
284
286
  children: "Custom pricing"
285
- }), /* @__PURE__ */ g("div", {
287
+ }), /* @__PURE__ */ y("div", {
286
288
  className: "text-sm text-text-secondary",
287
289
  children: "contract-based"
288
290
  })]
289
291
  }),
290
- /* @__PURE__ */ g("a", {
292
+ /* @__PURE__ */ y("a", {
291
293
  href: "mailto:contact@burdenoff.com?subject=Enterprise Plan Inquiry",
292
294
  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 shrink-0",
293
295
  children: "Contact Us"
294
296
  })
295
297
  ]
296
- }), T = ({ plan: e, onView: t, onSubscribe: n }) => {
297
- let o = b(e.features || []), s = y(e.features || []).length - o.length, c = u();
298
- return /* @__PURE__ */ _("div", {
299
- className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5 transition-all duration-200 hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 flex flex-col h-full",
298
+ }), O = ({ plan: e, highlighted: t = !1, onView: n, onSubscribe: o }) => {
299
+ let s = C(e.features || []), c = S(e.features || []).length - s.length, d = u(), { price: p, currency: h } = l(e.price, e.currency, e.currencyPrices, d);
300
+ return /* @__PURE__ */ b("div", {
301
+ className: `relative flex flex-col h-full rounded-card bg-bg-surface p-6 transition-[border-color,box-shadow] duration-200 ${t ? "border-2 border-action-primary-bg shadow-[var(--shadow-glow)]" : "border border-border-subtle shadow-elevation-1 hover:border-border-strong hover:shadow-elevation-2"}`,
300
302
  children: [
301
- /* @__PURE__ */ _("div", {
303
+ t && /* @__PURE__ */ b("span", {
304
+ className: "absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 rounded-full bg-action-primary-bg px-3 py-1 text-xs font-semibold text-action-primary-text shadow-elevation-2",
305
+ children: [/* @__PURE__ */ y(v, {
306
+ className: "size-3.5",
307
+ "aria-hidden": "true"
308
+ }), "Most popular"]
309
+ }),
310
+ /* @__PURE__ */ b("div", {
302
311
  className: "mb-4",
303
- children: [/* @__PURE__ */ g("h3", {
312
+ children: [/* @__PURE__ */ y("h3", {
304
313
  className: "text-lg font-semibold text-text-primary",
305
314
  children: e.name
306
- }), /* @__PURE__ */ g("span", {
315
+ }), /* @__PURE__ */ y("span", {
307
316
  className: "text-sm text-text-secondary",
308
317
  children: a(e.duration)
309
318
  })]
310
319
  }),
311
- /* @__PURE__ */ _("div", {
312
- className: "flex items-baseline gap-1 mb-4",
313
- children: [/* @__PURE__ */ g("span", {
314
- className: "text-3xl font-semibold tabular-nums text-text-primary",
315
- children: (() => {
316
- let { price: t, currency: n } = l(e.price, e.currency, e.currencyPrices, c);
317
- return r(t, n);
318
- })()
319
- }), /* @__PURE__ */ _("span", {
320
+ /* @__PURE__ */ b("div", {
321
+ className: "flex items-baseline gap-1.5 mb-5",
322
+ children: [/* @__PURE__ */ y("span", {
323
+ className: "text-4xl font-bold tabular-nums tracking-tight text-text-primary",
324
+ children: r(p, h)
325
+ }), /* @__PURE__ */ b("span", {
320
326
  className: "text-text-secondary text-sm",
321
327
  children: ["/ ", i(e.duration)]
322
328
  })]
323
329
  }),
324
- o.length > 0 && /* @__PURE__ */ _("ul", {
325
- className: "space-y-2 mb-4 flex-1",
326
- children: [o.map((e) => /* @__PURE__ */ _("li", {
327
- className: "flex items-center justify-between text-sm",
328
- children: [/* @__PURE__ */ _("div", {
329
- className: "flex items-center gap-2",
330
- children: [/* @__PURE__ */ g("svg", {
331
- className: "size-4 text-status-success-text shrink-0",
332
- fill: "none",
333
- viewBox: "0 0 24 24",
334
- stroke: "currentColor",
335
- children: /* @__PURE__ */ g("path", {
336
- strokeLinecap: "round",
337
- strokeLinejoin: "round",
338
- strokeWidth: 2,
339
- d: "M5 13l4 4L19 7"
330
+ s.length > 0 && /* @__PURE__ */ b("ul", {
331
+ className: "space-y-2.5 mb-5 flex-1",
332
+ children: [s.map((e) => /* @__PURE__ */ b("li", {
333
+ className: "flex items-center justify-between gap-2 text-sm",
334
+ children: [/* @__PURE__ */ b("span", {
335
+ className: "flex items-center gap-2 min-w-0",
336
+ children: [/* @__PURE__ */ y("span", {
337
+ className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)]",
338
+ children: /* @__PURE__ */ y(_, {
339
+ className: "size-3 text-action-primary-bg",
340
+ "aria-hidden": "true"
340
341
  })
341
- }), /* @__PURE__ */ g("span", {
342
- className: "text-text-primary",
342
+ }), /* @__PURE__ */ y("span", {
343
+ className: "truncate text-text-primary",
343
344
  children: f[e.name] ?? e.name
344
345
  })]
345
- }), /* @__PURE__ */ g("span", {
346
- className: "font-medium text-text-primary tabular-nums",
346
+ }), /* @__PURE__ */ y("span", {
347
+ className: "font-semibold text-text-primary tabular-nums shrink-0",
347
348
  children: m(e.name, e.totalValue)
348
349
  })]
349
- }, e.quotaId)), s > 0 && /* @__PURE__ */ _("li", {
350
- className: "text-sm text-text-secondary pl-6",
350
+ }, e.quotaId)), c > 0 && /* @__PURE__ */ b("li", {
351
+ className: "text-sm text-text-secondary pl-7",
351
352
  children: [
352
353
  "+",
353
- s,
354
+ c,
354
355
  " more — see details"
355
356
  ]
356
357
  })]
357
358
  }),
358
- /* @__PURE__ */ _("div", {
359
+ /* @__PURE__ */ b("div", {
359
360
  className: "space-y-2 pt-4 border-t border-border-subtle mt-auto",
360
- children: [/* @__PURE__ */ g("button", {
361
+ children: [/* @__PURE__ */ b("button", {
361
362
  type: "button",
362
- onClick: n,
363
- className: "w-full 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",
364
- children: "Subscribe"
365
- }), /* @__PURE__ */ g("button", {
363
+ onClick: o,
364
+ className: "group inline-flex w-full items-center justify-center gap-2 rounded-button bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text shadow-elevation-1 transition-colors duration-200 hover:bg-action-primary-bgHover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
365
+ children: ["Subscribe", /* @__PURE__ */ y(g, {
366
+ className: "size-4 transition-transform duration-200 group-hover:translate-x-0.5",
367
+ "aria-hidden": "true"
368
+ })]
369
+ }), /* @__PURE__ */ y("button", {
366
370
  type: "button",
367
- onClick: t,
368
- className: "w-full 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",
369
- children: "View Details"
371
+ onClick: n,
372
+ className: "w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-secondary rounded-button hover:bg-bg-sunken hover:text-text-primary hover:border-border-strong transition-colors duration-200",
373
+ children: "View details"
370
374
  })]
371
375
  })
372
376
  ]
373
377
  });
374
- }, E = ({ plan: e, onView: t, onSubscribe: n }) => {
375
- let a = b(e.features || []), o = u();
376
- return /* @__PURE__ */ _("div", {
377
- className: "flex items-center gap-4 p-5 border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 transition-all duration-200 hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5",
378
+ }, k = ({ plan: e, onView: t, onSubscribe: n }) => {
379
+ let a = C(e.features || []), o = u();
380
+ return /* @__PURE__ */ b("div", {
381
+ className: "flex items-center gap-4 p-5 border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 transition-all duration-200 hover:border-border-strong hover:shadow-elevation-2",
378
382
  children: [
379
- /* @__PURE__ */ g("div", {
383
+ /* @__PURE__ */ y("div", {
380
384
  className: "size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center shrink-0",
381
- children: /* @__PURE__ */ g("svg", {
385
+ children: /* @__PURE__ */ y("svg", {
382
386
  className: "size-5 text-text-link",
383
387
  fill: "none",
384
388
  viewBox: "0 0 24 24",
385
389
  stroke: "currentColor",
386
- children: /* @__PURE__ */ g("path", {
390
+ children: /* @__PURE__ */ y("path", {
387
391
  strokeLinecap: "round",
388
392
  strokeLinejoin: "round",
389
393
  strokeWidth: 2,
@@ -391,12 +395,12 @@ var x = () => {
391
395
  })
392
396
  })
393
397
  }),
394
- /* @__PURE__ */ _("div", {
398
+ /* @__PURE__ */ b("div", {
395
399
  className: "flex-1 min-w-0",
396
- children: [/* @__PURE__ */ g("h3", {
400
+ children: [/* @__PURE__ */ y("h3", {
397
401
  className: "font-semibold text-text-primary truncate",
398
402
  children: e.name
399
- }), /* @__PURE__ */ _("p", {
403
+ }), /* @__PURE__ */ b("p", {
400
404
  className: "text-sm text-text-secondary",
401
405
  children: [
402
406
  a.length,
@@ -406,27 +410,27 @@ var x = () => {
406
410
  ]
407
411
  })]
408
412
  }),
409
- /* @__PURE__ */ _("div", {
413
+ /* @__PURE__ */ b("div", {
410
414
  className: "text-right",
411
- children: [/* @__PURE__ */ g("div", {
415
+ children: [/* @__PURE__ */ y("div", {
412
416
  className: "font-semibold text-text-primary",
413
417
  children: (() => {
414
418
  let { price: t, currency: n } = l(e.price, e.currency, e.currencyPrices, o);
415
419
  return r(t, n);
416
420
  })()
417
- }), /* @__PURE__ */ _("div", {
421
+ }), /* @__PURE__ */ b("div", {
418
422
  className: "text-sm text-text-secondary",
419
423
  children: ["per ", i(e.duration)]
420
424
  })]
421
425
  }),
422
- /* @__PURE__ */ _("div", {
426
+ /* @__PURE__ */ b("div", {
423
427
  className: "flex items-center gap-2",
424
- children: [/* @__PURE__ */ g("button", {
428
+ children: [/* @__PURE__ */ y("button", {
425
429
  type: "button",
426
430
  onClick: n,
427
431
  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",
428
432
  children: "Subscribe"
429
- }), /* @__PURE__ */ g("button", {
433
+ }), /* @__PURE__ */ y("button", {
430
434
  type: "button",
431
435
  onClick: t,
432
436
  className: "px-3 py-1.5 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
@@ -437,6 +441,6 @@ var x = () => {
437
441
  });
438
442
  };
439
443
  //#endregion
440
- export { x as PlansBrowsePage };
444
+ export { w as PlansBrowsePage };
441
445
 
442
446
  //# sourceMappingURL=PlansBrowsePage.js.map