@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/plans/pages/PlanBrowseDetailPage.js

@@ -33,21 +33,21 @@ var m = () => {
 		return n === e ? t : n;
 	}, { planId: h } = l(), g = o(), { plan: _, isLoading: v, error: y, refetch: b } = s(h), x = c(() => p(_?.features || []), [_?.features]);
 	return v ? /* @__PURE__ */ d("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [/* @__PURE__ */ d("div", {
 			className: "flex items-center gap-4",
-			children: [/* @__PURE__ */ u("div", { className: "size-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" })]
+			children: [/* @__PURE__ */ u("div", { className: "size-10 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" })]
 		}), /* @__PURE__ */ d("div", {
 			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
 			children: [/* @__PURE__ */ u("div", {
 				className: "lg:col-span-2 space-y-6",
 				children: /* @__PURE__ */ d("div", {
-					className: "border border-border rounded-lg p-6 space-y-4",
-					children: [/* @__PURE__ */ u("div", { className: "h-6 w-32 bg-muted animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-4 w-full bg-muted animate-pulse rounded" })]
+					className: "border border-border-subtle rounded-lg p-6 space-y-4",
+					children: [/* @__PURE__ */ u("div", { className: "h-6 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-4 w-full bg-bg-sunken animate-pulse rounded" })]
 				})
 			}), /* @__PURE__ */ d("div", {
-				className: "border border-border rounded-lg p-6 space-y-4",
-				children: [/* @__PURE__ */ u("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-10 w-full bg-muted animate-pulse rounded" })]
+				className: "border border-border-subtle rounded-lg p-6 space-y-4",
+				children: [/* @__PURE__ */ u("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", { className: "h-10 w-full bg-bg-sunken animate-pulse rounded" })]
 			})]
 		})]
 	}) : y && i(y) ? /* @__PURE__ */ u("div", {
@@ -59,7 +59,7 @@ var m = () => {
 			showRetry: !0
 		})
 	}) : _ ? /* @__PURE__ */ d("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [/* @__PURE__ */ d("div", {
 			className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
 			children: [/* @__PURE__ */ d("div", {
@@ -67,7 +67,7 @@ var m = () => {
 				children: [/* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: () => g("/plans"),
-					className: "p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
+					className: "p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 					children: /* @__PURE__ */ u("svg", {
 						className: "size-5",
 						fill: "none",
@@ -81,16 +81,16 @@ var m = () => {
 						})
 					})
 				}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: _.name
 				}), /* @__PURE__ */ d("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-secondary mt-1",
 					children: [r(_.duration), " billing plan"]
 				})] })]
 			}), /* @__PURE__ */ u("button", {
 				type: "button",
 				onClick: () => g(`/checkout/${_.id}`),
-				className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+				className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 				children: "Subscribe to Plan"
 			})]
 		}), /* @__PURE__ */ d("div", {
@@ -98,11 +98,11 @@ var m = () => {
 			children: [/* @__PURE__ */ d("div", {
 				className: "lg:col-span-2 space-y-6",
 				children: [/* @__PURE__ */ d("div", {
-					className: "border border-border rounded-lg bg-card overflow-hidden",
+					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 					children: [/* @__PURE__ */ u("div", {
-						className: "p-6 border-b border-border bg-muted/30",
+						className: "p-6 border-b border-border-subtle bg-bg-sunken",
 						children: /* @__PURE__ */ u("h2", {
-							className: "text-lg font-semibold text-foreground",
+							className: "text-lg font-semibold text-text-primary",
 							children: m("billing.plans.pricing", "Pricing")
 						})
 					}), /* @__PURE__ */ d("div", {
@@ -110,14 +110,14 @@ var m = () => {
 						children: [/* @__PURE__ */ d("div", {
 							className: "flex items-baseline gap-1",
 							children: [/* @__PURE__ */ u("span", {
-								className: "text-4xl font-bold text-foreground",
+								className: "text-4xl font-bold text-text-primary",
 								children: t(_.price, _.currency)
 							}), /* @__PURE__ */ d("span", {
-								className: "text-lg text-muted-foreground",
+								className: "text-lg text-text-secondary",
 								children: ["/ ", n(_.duration)]
 							})]
 						}), /* @__PURE__ */ d("p", {
-							className: "text-sm text-muted-foreground mt-2",
+							className: "text-sm text-text-secondary mt-2",
 							children: [
 								m("billing.plans.billed", "Billed"),
 								" ",
@@ -126,11 +126,11 @@ var m = () => {
 						})]
 					})]
 				}), /* @__PURE__ */ d("div", {
-					className: "border border-border rounded-lg bg-card overflow-hidden",
+					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 					children: [/* @__PURE__ */ u("div", {
-						className: "p-6 border-b border-border bg-muted/30",
+						className: "p-6 border-b border-border-subtle bg-bg-sunken",
 						children: /* @__PURE__ */ d("h2", {
-							className: "text-lg font-semibold text-foreground",
+							className: "text-lg font-semibold text-text-primary",
 							children: [
 								m("billing.plans.featuresAndQuotas", "Features & Quotas"),
 								" (",
@@ -141,12 +141,12 @@ var m = () => {
 					}), /* @__PURE__ */ u("div", {
 						className: "p-6",
 						children: x.length === 0 ? /* @__PURE__ */ u("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: m("billing.plans.noFeatures", "No features configured for this plan.")
 						}) : /* @__PURE__ */ u("ul", {
 							className: "space-y-3",
 							children: x.map((e) => /* @__PURE__ */ d("li", {
-								className: "flex items-start gap-3 p-3 rounded-lg bg-muted/30",
+								className: "flex items-start gap-3 p-3 rounded-lg bg-bg-sunken",
 								children: [/* @__PURE__ */ u("div", {
 									className: "size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0",
 									children: /* @__PURE__ */ u("svg", {
@@ -166,19 +166,19 @@ var m = () => {
 									children: [/* @__PURE__ */ d("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ u("p", {
-											className: "font-medium text-foreground",
+											className: "font-medium text-text-primary",
 											children: e.name
 										}), /* @__PURE__ */ u("span", {
-											className: "font-semibold text-foreground",
+											className: "font-semibold text-text-primary",
 											children: e.totalValue.toLocaleString()
 										})]
 									}), /* @__PURE__ */ d("div", {
 										className: "flex items-center gap-2 mt-1",
 										children: [/* @__PURE__ */ d("span", {
-											className: "text-sm text-muted-foreground capitalize",
+											className: "text-sm text-text-secondary capitalize",
 											children: ["Type: ", e.limitType]
 										}), e.quotaType && /* @__PURE__ */ u("span", {
-											className: "px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded",
+											className: "px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
 											children: e.quotaType
 										})]
 									})]
@@ -190,21 +190,21 @@ var m = () => {
 			}), /* @__PURE__ */ d("div", {
 				className: "space-y-6",
 				children: [/* @__PURE__ */ d("div", {
-					className: "border border-border rounded-lg bg-card overflow-hidden",
+					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 					children: [/* @__PURE__ */ u("div", {
-						className: "p-6 border-b border-border bg-muted/30",
+						className: "p-6 border-b border-border-subtle bg-bg-sunken",
 						children: /* @__PURE__ */ u("h2", {
-							className: "text-lg font-semibold text-foreground",
+							className: "text-lg font-semibold text-text-primary",
 							children: m("billing.plans.subscribeTitle", "Subscribe")
 						})
 					}), /* @__PURE__ */ d("div", {
 						className: "p-6 space-y-4",
 						children: [
 							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: m("billing.plans.price", "Price")
 							}), /* @__PURE__ */ d("p", {
-								className: "text-sm font-medium text-foreground mt-0.5",
+								className: "text-sm font-medium text-text-primary mt-0.5",
 								children: [
 									t(_.price, _.currency),
 									" / ",
@@ -212,23 +212,23 @@ var m = () => {
 								]
 							})] }),
 							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: m("billing.plans.billingPeriod", "Billing Period")
 							}), /* @__PURE__ */ u("p", {
-								className: "text-sm text-foreground mt-0.5",
+								className: "text-sm text-text-primary mt-0.5",
 								children: r(_.duration)
 							})] }),
 							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: m("billing.plans.quotasIncluded", "Quotas Included")
 							}), /* @__PURE__ */ u("p", {
-								className: "text-sm font-medium text-foreground mt-0.5",
+								className: "text-sm font-medium text-text-primary mt-0.5",
 								children: x.length
 							})] }),
 							/* @__PURE__ */ u("button", {
 								type: "button",
 								onClick: () => g(`/checkout/${_.id}`),
-								className: "w-full px-4 py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+								className: "w-full px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 								children: "Subscribe to Plan"
 							})
 						]
@@ -236,7 +236,7 @@ var m = () => {
 				}), /* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: () => g("/plans"),
-					className: "w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+					className: "w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 					children: "Back to Plans"
 				})]
 			})]
@@ -247,17 +247,17 @@ var m = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ u("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: m("billing.plans.planNotFound", "Plan not found")
 				}),
 				/* @__PURE__ */ u("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: y?.message || m("billing.plans.planNotFoundMessage", "The plan you are looking for does not exist.")
 				}),
 				/* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: () => g("/plans"),
-					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
 					children: "Back to Plans"
 				})
 			]

package/dist/billing/modules/plans/pages/PlanBrowseDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanBrowseDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Browse Detail Page (User-facing)\n * View plan details and subscribe. No edit/toggle actions.\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan } from '../hooks';\nimport { ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  getPlanFeatureQuantity,\n  isServerError,\n} from '../../../shared/utils';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n}\n\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n  for (const feature of features) {\n    if (!feature.quota) continue;\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanBrowseDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-muted animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-muted animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-muted animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-muted animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-muted animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr('billing.plans.unableToLoadPlanDetails', 'Unable to load plan details.')}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-foreground\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <h1 className=\"text-2xl font-bold text-foreground\">{plan.name}</h1>\n            <p className=\"text-sm text-muted-foreground mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(`/checkout/${plan.id}`)}\n          className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n        >\n          Subscribe to Plan\n        </button>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-foreground\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-muted-foreground\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-muted-foreground mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </div>\n\n          {/* Features Card */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-muted/30\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-foreground\">{quota.name}</p>\n                          <span className=\"font-semibold text-foreground\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-muted-foreground capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-muted text-muted-foreground rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Subscribe Card */}\n          <div className=\"border border-border rounded-lg bg-card overflow-hidden\">\n            <div className=\"p-6 border-b border-border bg-muted/30\">\n              <h2 className=\"text-lg font-semibold text-foreground\">\n                {tr('billing.plans.subscribeTitle', 'Subscribe')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr('billing.plans.price', 'Price')}\n                </p>\n                <p className=\"text-sm font-medium text-foreground mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-foreground mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr('billing.plans.quotasIncluded', 'Quotas Included')}\n                </p>\n                <p className=\"text-sm font-medium text-foreground mt-0.5\">\n                  {combinedQuotas.length}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/checkout/${plan.id}`)}\n                className=\"w-full px-4 py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n              >\n                Subscribe to Plan\n              </button>\n            </div>\n          </div>\n\n          {/* Back */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"w-full px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PlanBrowseDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanBrowseDetailPage.tsx"],"sourcesContent":["/**\n * Plans Module - Plan Browse Detail Page (User-facing)\n * View plan details and subscribe. No edit/toggle actions.\n */\n\nimport { type FC, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { usePlan } from '../hooks';\nimport { ServerError } from '../../../shared/components';\nimport {\n  formatCurrency,\n  formatPlanDuration,\n  formatPlanDurationLabel,\n  getPlanFeatureQuantity,\n  isServerError,\n} from '../../../shared/utils';\nimport type { PlanFeature } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  quotaType: string;\n  limitType: string;\n  totalValue: number;\n}\n\nfunction combineQuotas(features: PlanFeature[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n  for (const feature of features) {\n    if (!feature.quota) continue;\n    const quotaId = feature.quota.id;\n    const limits = feature.quota.limits as { type?: string; value?: number } | null;\n    const limitType = limits?.type ?? 'unknown';\n    const limitValue = getPlanFeatureQuantity(feature);\n    const existing = quotaMap.get(quotaId);\n    if (existing) {\n      existing.totalValue += limitValue;\n    } else {\n      quotaMap.set(quotaId, {\n        quotaId,\n        name: feature.quota.name ?? 'Unknown Quota',\n        quotaType: feature.quota.quotaType ?? '',\n        limitType,\n        totalValue: limitValue,\n      });\n    }\n  }\n  return Array.from(quotaMap.values());\n}\n\nexport const PlanBrowseDetailPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const { planId } = useParams<{ planId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { plan, isLoading, error, refetch } = usePlan(planId);\n\n  const combinedQuotas = useMemo(() => combineQuotas(plan?.features || []), [plan?.features]);\n\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n          <div className=\"border border-border-subtle rounded-lg p-6 space-y-4\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded\" />\n            <div className=\"h-10 w-full bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <div className=\"p-6\">\n        <ServerError\n          title={tr('billing.plans.serverUnavailable', 'Server Unavailable')}\n          message={tr('billing.plans.unableToLoadPlanDetails', 'Unable to load plan details.')}\n          onRetry={() => refetch()}\n          showRetry\n        />\n      </div>\n    );\n  }\n\n  if (!plan) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.plans.planNotFound', 'Plan not found')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {error?.message ||\n              tr(\n                'billing.plans.planNotFoundMessage',\n                'The plan you are looking for does not exist.'\n              )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            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\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n              {plan.name}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {formatPlanDurationLabel(plan.duration)} billing plan\n            </p>\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(`/checkout/${plan.id}`)}\n          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\"\n        >\n          Subscribe to Plan\n        </button>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Pricing Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.pricing', 'Pricing')}\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-4xl font-bold text-text-primary\">\n                  {formatCurrency(plan.price, plan.currency)}\n                </span>\n                <span className=\"text-lg text-text-secondary\">\n                  / {formatPlanDuration(plan.duration)}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-2\">\n                {tr('billing.plans.billed', 'Billed')}{' '}\n                {plan.duration === 'monthly'\n                  ? tr('billing.plans.everyMonth', 'every month')\n                  : tr('billing.plans.annually', 'annually')}\n              </p>\n            </div>\n          </div>\n\n          {/* Features Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.featuresAndQuotas', 'Features & Quotas')} (\n                {combinedQuotas.length})\n              </h2>\n            </div>\n            <div className=\"p-6\">\n              {combinedQuotas.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.noFeatures', 'No features configured for this plan.')}\n                </p>\n              ) : (\n                <ul className=\"space-y-3\">\n                  {combinedQuotas.map((quota) => (\n                    <li\n                      key={quota.quotaId}\n                      className=\"flex items-start gap-3 p-3 rounded-lg bg-bg-sunken\"\n                    >\n                      <div className=\"size-8 rounded-full bg-status-success-bg-subtle flex items-center justify-center shrink-0\">\n                        <svg\n                          className=\"size-4 text-status-success-text\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      </div>\n                      <div className=\"flex-1\">\n                        <div className=\"flex items-center justify-between\">\n                          <p className=\"font-medium text-text-primary\">{quota.name}</p>\n                          <span className=\"font-semibold text-text-primary\">\n                            {quota.totalValue.toLocaleString()}\n                          </span>\n                        </div>\n                        <div className=\"flex items-center gap-2 mt-1\">\n                          <span className=\"text-sm text-text-secondary capitalize\">\n                            Type: {quota.limitType}\n                          </span>\n                          {quota.quotaType && (\n                            <span className=\"px-2 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                              {quota.quotaType}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Subscribe Card */}\n          <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n            <div className=\"p-6 border-b border-border-subtle bg-bg-sunken\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {tr('billing.plans.subscribeTitle', 'Subscribe')}\n              </h2>\n            </div>\n            <div className=\"p-6 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">{tr('billing.plans.price', 'Price')}</p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {formatCurrency(plan.price, plan.currency)} / {formatPlanDuration(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.billingPeriod', 'Billing Period')}\n                </p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatPlanDurationLabel(plan.duration)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr('billing.plans.quotasIncluded', 'Quotas Included')}\n                </p>\n                <p className=\"text-sm font-medium text-text-primary mt-0.5\">\n                  {combinedQuotas.length}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo(`/checkout/${plan.id}`)}\n                className=\"w-full px-4 py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Subscribe to Plan\n              </button>\n            </div>\n          </div>\n\n          {/* Back */}\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"w-full px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            Back to Plans\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/plans/pages/PlanCreatePage.js

@@ -20,7 +20,7 @@ var p = () => {
 	if (!g.canManagePlans) return /* @__PURE__ */ u(e, { message: m("billing.plans.noCreatePermission", "You don't have permission to create plans.") });
 	if (v) return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ u("div", {
+		children: [/* @__PURE__ */ u("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ u("div", {
 			className: "max-w-2xl space-y-4",
 			children: [
 				1,
@@ -28,7 +28,7 @@ var p = () => {
 				3,
 				4,
 				5
-			].map((e) => /* @__PURE__ */ u("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ u("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	});
 	let V = () => {
@@ -107,11 +107,11 @@ var p = () => {
 				/* @__PURE__ */ d("div", {
 					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
 					children: [/* @__PURE__ */ d("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden h-fit",
+						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
 						children: [/* @__PURE__ */ u("div", {
-							className: "p-4 border-b border-border bg-muted/30",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 							children: /* @__PURE__ */ u("h2", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: m("billing.plans.basicInfo", "Basic Information")
 							})
 						}), /* @__PURE__ */ d("div", {
@@ -119,21 +119,21 @@ var p = () => {
 							children: [
 								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "name",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: [m("billing.plans.planNameLabel", "Plan Name"), " *"]
 								}), /* @__PURE__ */ u("input", {
 									id: "name",
 									type: "text",
 									value: x,
 									onChange: (e) => S(e.target.value),
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 									placeholder: m("billing.plans.planNamePlaceholder", "e.g., Pro Plan"),
 									required: !0
 								})] }),
 								/* @__PURE__ */ d("div", { children: [
 									/* @__PURE__ */ d("label", {
 										htmlFor: "productId",
-										className: "block text-sm font-medium text-foreground mb-1",
+										className: "block text-sm font-medium text-text-primary mb-1",
 										children: [m("billing.plans.productId", "Product ID"), " *"]
 									}),
 									/* @__PURE__ */ u("input", {
@@ -141,12 +141,12 @@ var p = () => {
 										type: "text",
 										value: k,
 										onChange: (e) => A(e.target.value),
-										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 										placeholder: m("billing.plans.productIdPlaceholder", "e.g., prod_abc123"),
 										required: !0
 									}),
 									/* @__PURE__ */ u("p", {
-										className: "text-xs text-muted-foreground mt-1",
+										className: "text-xs text-text-muted mt-1",
 										children: m("billing.plans.productIdDesc", "The product this plan belongs to")
 									})
 								] }),
@@ -154,7 +154,7 @@ var p = () => {
 									className: "grid grid-cols-2 gap-4",
 									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
 										htmlFor: "price",
-										className: "block text-sm font-medium text-foreground mb-1",
+										className: "block text-sm font-medium text-text-primary mb-1",
 										children: [m("billing.plans.priceLabel", "Price"), " *"]
 									}), /* @__PURE__ */ u("input", {
 										id: "price",
@@ -163,18 +163,18 @@ var p = () => {
 										min: "0",
 										value: C,
 										onChange: (e) => w(e.target.value),
-										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 										placeholder: "49.99",
 										required: !0
 									})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
 										htmlFor: "currency",
-										className: "block text-sm font-medium text-foreground mb-1",
+										className: "block text-sm font-medium text-text-primary mb-1",
 										children: [m("billing.plans.currencyLabel", "Currency"), " *"]
 									}), /* @__PURE__ */ d("select", {
 										id: "currency",
 										value: T,
 										onChange: (e) => E(e.target.value),
-										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+										className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 										children: [
 											/* @__PURE__ */ u("option", {
 												value: "USD",
@@ -213,13 +213,13 @@ var p = () => {
 								}),
 								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
 									htmlFor: "duration",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: [m("billing.plans.billingPeriodLabel", "Billing Period"), " *"]
 								}), /* @__PURE__ */ d("select", {
 									id: "duration",
 									value: D,
 									onChange: (e) => O(e.target.value),
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 									children: [/* @__PURE__ */ u("option", {
 										value: r.MONTHLY,
 										children: "Monthly"
@@ -231,54 +231,54 @@ var p = () => {
 								/* @__PURE__ */ d("div", {
 									className: "flex items-start justify-between gap-4 pt-1",
 									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-										className: "text-sm font-medium text-foreground",
+										className: "text-sm font-medium text-text-primary",
 										children: m("billing.plans.isPurchasableLabel", "Publicly purchasable")
 									}), /* @__PURE__ */ u("p", {
-										className: "text-xs text-muted-foreground mt-0.5",
+										className: "text-xs text-text-muted mt-0.5",
 										children: j ? m("billing.plans.isPurchasableOn", "Visible on pricing page — users can subscribe directly.") : m("billing.plans.isPurchasableOff", "Internal / custom plan — hidden from pricing page, assign via API only.")
 									})] }), /* @__PURE__ */ u("button", {
 										type: "button",
 										role: "switch",
 										"aria-checked": j,
 										onClick: () => M((e) => !e),
-										className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${j ? "bg-primary" : "bg-muted-foreground/30"}`,
-										children: /* @__PURE__ */ u("span", { className: `inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${j ? "translate-x-5" : "translate-x-0"}` })
+										className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:ring-offset-2 ${j ? "bg-action-primary-bg" : "bg-text-muted/30"}`,
+										children: /* @__PURE__ */ u("span", { className: `inline-block h-5 w-5 transform rounded-full bg-bg-surface shadow transition-transform ${j ? "translate-x-5" : "translate-x-0"}` })
 									})]
 								})
 							]
 						})]
 					}), /* @__PURE__ */ d("div", {
-						className: "border border-border rounded-lg bg-card overflow-hidden h-fit",
+						className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)] h-fit",
 						children: [/* @__PURE__ */ d("div", {
-							className: "p-4 border-b border-border bg-muted/30 flex items-center justify-between",
+							className: "p-4 border-b border-border-subtle bg-bg-sunken/30 flex items-center justify-between",
 							children: [/* @__PURE__ */ d("h2", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: [m("billing.plans.quotaAllocations", "Quota Allocations"), " *"]
 							}), /* @__PURE__ */ u("button", {
 								type: "button",
 								onClick: V,
 								disabled: _.length === 0,
-								className: "px-3 py-1 text-sm font-medium text-primary hover:bg-primary/10 rounded-md transition-colors disabled:opacity-50",
+								className: "px-3 py-1 text-sm font-medium text-text-link hover:bg-[var(--color-accent-soft)] rounded-md transition-colors disabled:opacity-50",
 								children: "+ Add Quota"
 							})]
 						}), /* @__PURE__ */ u("div", {
 							className: "p-4 space-y-3",
 							children: _.length === 0 ? /* @__PURE__ */ u("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-muted",
 								children: m("billing.plans.noQuotasAvailable", "No quotas available. Please create quotas first.")
 							}) : N.length === 0 ? /* @__PURE__ */ u("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-muted",
 								children: m("billing.plans.noQuotasAllocated", "No quotas allocated. Click \"Add Quota\" to add one.")
 							}) : N.map((e, t) => {
 								let n = _.find((t) => t.id === e.quotaId), r = n?.limits, i = r?.value ?? 0, a = r?.type ?? "unknown", o = i * e.quantity;
 								return /* @__PURE__ */ d("div", {
-									className: "p-3 border border-border rounded-lg bg-muted/20 space-y-3",
+									className: "p-3 border border-border-subtle rounded-lg bg-bg-sunken/20 space-y-3",
 									children: [/* @__PURE__ */ d("div", {
 										className: "flex items-center gap-3",
 										children: [/* @__PURE__ */ d("select", {
 											value: e.quotaId,
 											onChange: (e) => U(t, "quotaId", e.target.value),
-											className: `flex-1 px-3 py-2 border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary ${e.quotaId === "" ? "text-muted-foreground" : "text-foreground"}`,
+											className: `flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${e.quotaId === "" ? "text-text-muted" : "text-text-primary"}`,
 											children: [/* @__PURE__ */ u("option", {
 												value: "",
 												disabled: !0,
@@ -308,7 +308,7 @@ var p = () => {
 									}), n && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
 										className: "flex items-center justify-between text-sm",
 										children: /* @__PURE__ */ d("div", {
-											className: "text-muted-foreground",
+											className: "text-text-muted",
 											children: [
 												/* @__PURE__ */ d("span", {
 													className: "capitalize",
@@ -322,7 +322,7 @@ var p = () => {
 													"Value per unit:",
 													" ",
 													/* @__PURE__ */ u("span", {
-														className: "font-medium text-foreground",
+														className: "font-medium text-text-primary",
 														children: i.toLocaleString()
 													})
 												] })
@@ -333,19 +333,19 @@ var p = () => {
 										children: [/* @__PURE__ */ d("div", {
 											className: "flex items-center gap-2",
 											children: [/* @__PURE__ */ d("label", {
-												className: "text-sm text-muted-foreground",
+												className: "text-sm text-text-muted",
 												children: [m("billing.plans.quantity", "Quantity"), ":"]
 											}), /* @__PURE__ */ u("input", {
 												type: "number",
 												min: "1",
 												value: e.quantity,
 												onChange: (e) => U(t, "quantity", e.target.value),
-												className: "w-24 px-3 py-1.5 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-center"
+												className: "w-24 px-3 py-1.5 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] text-center"
 											})]
 										}), /* @__PURE__ */ d("div", {
 											className: "flex items-center gap-2 text-sm",
 											children: [/* @__PURE__ */ u("span", {
-												className: "text-muted-foreground",
+												className: "text-text-muted",
 												children: "="
 											}), /* @__PURE__ */ d("span", {
 												className: "font-semibold text-status-success-text",
@@ -367,12 +367,12 @@ var p = () => {
 					children: [/* @__PURE__ */ u("button", {
 						type: "submit",
 						disabled: b || _.length === 0,
-						className: "px-6 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50",
+						className: "px-6 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50",
 						children: b ? m("billing.plans.creating", "Creating...") : m("billing.plans.createPlanBtn", "Create Plan")
 					}), /* @__PURE__ */ u("button", {
 						type: "button",
 						onClick: () => h("/plans"),
-						className: "px-6 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						className: "px-6 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 						children: "Cancel"
 					})]
 				})