@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/dashboard/components/RecommendedAddonsSection.js

@@ -27,10 +27,10 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 		maximumFractionDigits: 2
 	}).format(e), w = (e) => e === "yearly" ? "year" : "month", T = t(() => _(e.features || []), [e.features]);
 	return /* @__PURE__ */ h("article", {
-		className: "flex flex-col border border-border rounded-lg bg-card overflow-hidden hover:shadow-md transition-shadow",
+		className: "flex flex-col border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 transition-all duration-200",
 		children: [
 			/* @__PURE__ */ m("header", {
-				className: "p-4 border-b border-border",
+				className: "p-4 border-b border-border-subtle",
 				children: /* @__PURE__ */ m("div", {
 					className: "flex items-start justify-between gap-3",
 					children: /* @__PURE__ */ h("div", {
@@ -39,10 +39,10 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 							className: "size-10 rounded-lg bg-status-success-bg-subtle flex items-center justify-center",
 							children: /* @__PURE__ */ m(c, { className: "size-5 text-status-success-text" })
 						}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h4", {
-							className: "font-semibold text-foreground",
+							className: "font-semibold text-text-primary",
 							children: e.name
 						}), /* @__PURE__ */ h("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: [
 								C(e.price, e.currency),
 								"/",
@@ -61,15 +61,15 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-center gap-2",
 							children: [/* @__PURE__ */ m("span", { className: "size-1.5 rounded-full bg-status-success-bg" }), /* @__PURE__ */ m("span", {
-								className: "text-muted-foreground",
+								className: "text-text-secondary",
 								children: e.name
 							})]
 						}), /* @__PURE__ */ m("span", {
-							className: "font-medium text-foreground",
+							className: "font-medium text-text-primary",
 							children: e.totalValue.toLocaleString()
 						})]
 					}, e.quotaId)), T.length > 2 && /* @__PURE__ */ h("li", {
-						className: "text-xs text-muted-foreground",
+						className: "text-xs text-text-secondary",
 						children: [
 							"+",
 							T.length - 2,
@@ -77,16 +77,16 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 						]
 					})]
 				}) : /* @__PURE__ */ m("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: "Enhance your subscription with additional features"
 				})
 			}),
 			/* @__PURE__ */ h("footer", {
-				className: "p-4 border-t border-border bg-muted/30 flex items-center gap-2",
+				className: "p-4 border-t border-border-subtle bg-bg-sunken flex items-center gap-2",
 				children: [/* @__PURE__ */ m("button", {
 					type: "button",
 					onClick: r,
-					className: "flex-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors text-center",
+					className: "flex-1 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors text-center",
 					children: "View Details"
 				}), d && v ? /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-1",
@@ -94,24 +94,24 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 						/* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: y,
-							className: "p-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors",
+							className: "p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-button transition-colors",
 							title: "Remove from cart",
 							children: /* @__PURE__ */ m(f, { className: "size-4" })
 						}),
 						/* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => v(g - 1),
-							className: "p-2 text-foreground hover:bg-muted rounded-lg transition-colors",
+							className: "p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 							children: /* @__PURE__ */ m(s, { className: "size-4" })
 						}),
 						/* @__PURE__ */ m("span", {
-							className: "w-8 text-center font-medium text-foreground",
+							className: "w-8 text-center font-medium text-text-primary",
 							children: g
 						}),
 						/* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => v(g + 1),
-							className: "p-2 text-foreground hover:bg-muted rounded-lg transition-colors",
+							className: "p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 							children: /* @__PURE__ */ m(l, { className: "size-4" })
 						})
 					]
@@ -119,7 +119,7 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 					type: "button",
 					onClick: S,
 					disabled: b,
-					className: `flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-center flex items-center justify-center gap-1.5 ${b ? "bg-status-success-bg text-primary-foreground hover:bg-status-success-bg/90" : "text-primary-foreground bg-primary hover:bg-primary/90"}`,
+					className: `flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-center flex items-center justify-center gap-1.5 ${b ? "bg-status-success-bg text-action-primary-text hover:bg-status-success-bg/90" : "text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bgHover"}`,
 					children: b ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(i, { className: "size-4" }), "Added"] }) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(u, { className: "size-4" }), "Add to Cart"] })
 				})]
 			})
@@ -136,14 +136,14 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 		className: `space-y-4 ${b}`,
 		"data-tour": x,
 		children: [/* @__PURE__ */ h("header", { children: [/* @__PURE__ */ m("h3", {
-			className: "text-lg font-semibold text-foreground",
+			className: "text-lg font-semibold text-text-primary",
 			children: C("billing.overview.recommendedAddons", "Recommended Add-ons")
 		}), /* @__PURE__ */ m("p", {
-			className: "text-sm text-muted-foreground",
+			className: "text-sm text-text-secondary",
 			children: "Enhance your subscription with these popular add-ons"
 		})] }), /* @__PURE__ */ m("div", {
 			className: "flex items-center justify-center py-12",
-			children: /* @__PURE__ */ m(o, { className: "size-6 animate-spin text-muted-foreground" })
+			children: /* @__PURE__ */ m(o, { className: "size-6 animate-spin text-text-secondary" })
 		})]
 	}) : w.length === 0 ? null : /* @__PURE__ */ h("section", {
 		className: `space-y-4 ${b}`,
@@ -154,16 +154,16 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 				children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ m(d, { className: "size-5 text-status-warning-text" }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
-						className: "text-lg font-semibold text-foreground",
+						className: "text-lg font-semibold text-text-primary",
 						children: "Recommended Add-ons"
 					}), /* @__PURE__ */ m("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: "Enhance your subscription with these popular add-ons"
 					})] })]
 				}), /* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: s,
-					className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-primary hover:text-primary/80 transition-colors",
+					className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-link hover:text-text-link transition-colors",
 					children: ["View All", /* @__PURE__ */ m(a, { className: "size-4" })]
 				})]
 			}),
@@ -185,7 +185,7 @@ var v = ({ addon: e, onView: r, onPurchase: a, onAddToCart: o, isInCart: d = !1,
 				children: /* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: s,
-					className: "inline-flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+					className: "inline-flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors",
 					children: [
 						"View all ",
 						e.length,

package/dist/billing/modules/dashboard/components/RecommendedAddonsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendedAddonsSection.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/RecommendedAddonsSection.tsx"],"sourcesContent":["/**\n * Recommended Addons Section Component\n * Displays recommended addons that users might want to purchase\n * Supports add to cart functionality\n */\n\nimport { type FC, useState, useMemo } from 'react';\nimport {\n  Package,\n  ArrowRight,\n  Sparkles,\n  ChevronRight,\n  Loader2,\n  ShoppingCart,\n  Check,\n  Plus,\n  Minus,\n  Trash2,\n} from 'lucide-react';\nimport type { Addon, PlanDuration, SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n * e.g., 10 bots + 10 bots = 20 bots (shown as one feature)\n */\nfunction combineQuotas(features: SubscriptionFeatures[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limitValue = getPlanFeatureQuantity(feature);\n\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        totalValue: limitValue,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\ninterface RecommendedAddonsSectionProps {\n  addons: Addon[];\n  hasSubscription: boolean;\n  onViewAddon: (addonId: string) => void;\n  onPurchaseAddon: (addonId: string) => void;\n  onViewAllAddons: () => void;\n  /** Handler for adding addon to cart */\n  onAddToCart?: (addon: Addon) => void;\n  /** Check if addon is in cart */\n  isInCart?: (addonId: string) => boolean;\n  /** Get cart quantity for addon */\n  getCartQuantity?: (addonId: string) => number;\n  /** Update quantity in cart */\n  onUpdateQuantity?: (addonId: string, quantity: number) => void;\n  /** Remove from cart */\n  onRemoveFromCart?: (addonId: string) => void;\n  /** Maximum number of addons to show (default: 3) */\n  maxAddons?: number;\n  isLoading?: boolean;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nconst AddonCard: FC<{\n  addon: Addon;\n  onView: () => void;\n  onPurchase: () => void;\n  onAddToCart?: () => void;\n  isInCart?: boolean;\n  cartQuantity?: number;\n  onUpdateQuantity?: (quantity: number) => void;\n  onRemoveFromCart?: () => void;\n}> = ({\n  addon,\n  onView,\n  onPurchase,\n  onAddToCart,\n  isInCart = false,\n  cartQuantity = 0,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const [justAdded, setJustAdded] = useState(false);\n\n  const handleAddToCart = () => {\n    if (onAddToCart) {\n      onAddToCart();\n      setJustAdded(true);\n      setTimeout(() => setJustAdded(false), 2000);\n    } else {\n      onPurchase();\n    }\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 0,\n      maximumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const getDurationLabel = (duration: PlanDuration) => {\n    return duration === 'yearly' ? 'year' : 'month';\n  };\n\n  // Combine duplicate quotas (e.g., 10 bots + 10 bots = 20 bots)\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features as SubscriptionFeatures[]);\n  }, [addon.features]);\n\n  return (\n    <article className=\"flex flex-col border border-border rounded-lg bg-card overflow-hidden hover:shadow-md transition-shadow\">\n      {/* Header */}\n      <header className=\"p-4 border-b border-border\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-lg bg-status-success-bg-subtle flex items-center justify-center\">\n              <Package className=\"size-5 text-status-success-text\" />\n            </div>\n            <div>\n              <h4 className=\"font-semibold text-foreground\">{addon.name}</h4>\n              <p className=\"text-sm text-muted-foreground\">\n                {formatCurrency(addon.price, addon.currency)}/{getDurationLabel(addon.duration)}\n              </p>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 flex-1\">\n        {combinedQuotas.length > 0 ? (\n          <ul className=\"space-y-2\">\n            {combinedQuotas.slice(0, 2).map((quota) => (\n              <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"size-1.5 rounded-full bg-status-success-bg\" />\n                  <span className=\"text-muted-foreground\">{quota.name}</span>\n                </div>\n                <span className=\"font-medium text-foreground\">\n                  {quota.totalValue.toLocaleString()}\n                </span>\n              </li>\n            ))}\n            {combinedQuotas.length > 2 && (\n              <li className=\"text-xs text-muted-foreground\">\n                +{combinedQuotas.length - 2} more quotas\n              </li>\n            )}\n          </ul>\n        ) : (\n          <p className=\"text-sm text-muted-foreground\">\n            Enhance your subscription with additional features\n          </p>\n        )}\n      </div>\n\n      {/* Footer */}\n      <footer className=\"p-4 border-t border-border bg-muted/30 flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={onView}\n          className=\"flex-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors text-center\"\n        >\n          View Details\n        </button>\n        {isInCart && onUpdateQuantity ? (\n          // Quantity controls when in cart\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={onRemoveFromCart}\n              className=\"p-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors\"\n              title=\"Remove from cart\"\n            >\n              <Trash2 className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity - 1)}\n              className=\"p-2 text-foreground hover:bg-muted rounded-lg transition-colors\"\n            >\n              <Minus className=\"size-4\" />\n            </button>\n            <span className=\"w-8 text-center font-medium text-foreground\">{cartQuantity}</span>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity + 1)}\n              className=\"p-2 text-foreground hover:bg-muted rounded-lg transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          // Add to cart button\n          <button\n            type=\"button\"\n            onClick={handleAddToCart}\n            disabled={justAdded}\n            className={`flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-center flex items-center justify-center gap-1.5 ${\n              justAdded\n                ? 'bg-status-success-bg text-primary-foreground hover:bg-status-success-bg/90'\n                : 'text-primary-foreground bg-primary hover:bg-primary/90'\n            }`}\n          >\n            {justAdded ? (\n              <>\n                <Check className=\"size-4\" />\n                Added\n              </>\n            ) : (\n              <>\n                <ShoppingCart className=\"size-4\" />\n                Add to Cart\n              </>\n            )}\n          </button>\n        )}\n      </footer>\n    </article>\n  );\n};\n\nexport const RecommendedAddonsSection: FC<RecommendedAddonsSectionProps> = ({\n  addons,\n  hasSubscription,\n  onViewAddon,\n  onPurchaseAddon,\n  onViewAllAddons,\n  onAddToCart,\n  isInCart,\n  getCartQuantity,\n  onUpdateQuantity,\n  onRemoveFromCart,\n  maxAddons = 3,\n  isLoading = false,\n  className = '',\n  dataTour,\n}) => {\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  // Only show if user has a subscription\n  if (!hasSubscription) {\n    return null;\n  }\n\n  // Limit addons to maxAddons\n  const displayAddons = addons.slice(0, maxAddons);\n\n  if (isLoading) {\n    return (\n      <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n        <header>\n          <h3 className=\"text-lg font-semibold text-foreground\">\n            {tr('billing.overview.recommendedAddons', 'Recommended Add-ons')}\n          </h3>\n          <p className=\"text-sm text-muted-foreground\">\n            Enhance your subscription with these popular add-ons\n          </p>\n        </header>\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"size-6 animate-spin text-muted-foreground\" />\n        </div>\n      </section>\n    );\n  }\n\n  if (displayAddons.length === 0) {\n    return null;\n  }\n\n  return (\n    <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n      {/* Header */}\n      <header className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <Sparkles className=\"size-5 text-status-warning-text\" />\n          <div>\n            <h3 className=\"text-lg font-semibold text-foreground\">Recommended Add-ons</h3>\n            <p className=\"text-sm text-muted-foreground\">\n              Enhance your subscription with these popular add-ons\n            </p>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onViewAllAddons}\n          className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-primary hover:text-primary/80 transition-colors\"\n        >\n          View All\n          <ChevronRight className=\"size-4\" />\n        </button>\n      </header>\n\n      {/* Addons Grid - Limited to maxAddons */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        {displayAddons.map((addon) => (\n          <AddonCard\n            key={addon.id}\n            addon={addon}\n            onView={() => onViewAddon(addon.id)}\n            onPurchase={() => onPurchaseAddon(addon.id)}\n            onAddToCart={onAddToCart ? () => onAddToCart(addon) : undefined}\n            isInCart={isInCart ? isInCart(addon.id) : false}\n            cartQuantity={getCartQuantity ? getCartQuantity(addon.id) : 0}\n            onUpdateQuantity={\n              onUpdateQuantity ? (qty) => onUpdateQuantity(addon.id, qty) : undefined\n            }\n            onRemoveFromCart={onRemoveFromCart ? () => onRemoveFromCart(addon.id) : undefined}\n          />\n        ))}\n      </div>\n\n      {/* See More Link - show if there are more addons */}\n      {addons.length > maxAddons && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            type=\"button\"\n            onClick={onViewAllAddons}\n            className=\"inline-flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\n          >\n            View all {addons.length} add-ons\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"RecommendedAddonsSection.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/RecommendedAddonsSection.tsx"],"sourcesContent":["/**\n * Recommended Addons Section Component\n * Displays recommended addons that users might want to purchase\n * Supports add to cart functionality\n */\n\nimport { type FC, useState, useMemo } from 'react';\nimport {\n  Package,\n  ArrowRight,\n  Sparkles,\n  ChevronRight,\n  Loader2,\n  ShoppingCart,\n  Check,\n  Plus,\n  Minus,\n  Trash2,\n} from 'lucide-react';\nimport type { Addon, PlanDuration, SubscriptionFeatures } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { getPlanFeatureQuantity } from '../../../shared/utils/planFeatureQuantity';\n\n/**\n * Combined quota info for display\n */\ninterface CombinedQuota {\n  quotaId: string;\n  name: string;\n  totalValue: number;\n}\n\n/**\n * Combines duplicate quotas by quota ID and aggregates their values\n * e.g., 10 bots + 10 bots = 20 bots (shown as one feature)\n */\nfunction combineQuotas(features: SubscriptionFeatures[]): CombinedQuota[] {\n  const quotaMap = new Map<string, CombinedQuota>();\n\n  for (const feature of features) {\n    if (!feature.quota) continue;\n\n    const quotaId = feature.quota.id;\n    const limitValue = getPlanFeatureQuantity(feature);\n\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        totalValue: limitValue,\n      });\n    }\n  }\n\n  return Array.from(quotaMap.values());\n}\n\ninterface RecommendedAddonsSectionProps {\n  addons: Addon[];\n  hasSubscription: boolean;\n  onViewAddon: (addonId: string) => void;\n  onPurchaseAddon: (addonId: string) => void;\n  onViewAllAddons: () => void;\n  /** Handler for adding addon to cart */\n  onAddToCart?: (addon: Addon) => void;\n  /** Check if addon is in cart */\n  isInCart?: (addonId: string) => boolean;\n  /** Get cart quantity for addon */\n  getCartQuantity?: (addonId: string) => number;\n  /** Update quantity in cart */\n  onUpdateQuantity?: (addonId: string, quantity: number) => void;\n  /** Remove from cart */\n  onRemoveFromCart?: (addonId: string) => void;\n  /** Maximum number of addons to show (default: 3) */\n  maxAddons?: number;\n  isLoading?: boolean;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nconst AddonCard: FC<{\n  addon: Addon;\n  onView: () => void;\n  onPurchase: () => void;\n  onAddToCart?: () => void;\n  isInCart?: boolean;\n  cartQuantity?: number;\n  onUpdateQuantity?: (quantity: number) => void;\n  onRemoveFromCart?: () => void;\n}> = ({\n  addon,\n  onView,\n  onPurchase,\n  onAddToCart,\n  isInCart = false,\n  cartQuantity = 0,\n  onUpdateQuantity,\n  onRemoveFromCart,\n}) => {\n  const [justAdded, setJustAdded] = useState(false);\n\n  const handleAddToCart = () => {\n    if (onAddToCart) {\n      onAddToCart();\n      setJustAdded(true);\n      setTimeout(() => setJustAdded(false), 2000);\n    } else {\n      onPurchase();\n    }\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 0,\n      maximumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const getDurationLabel = (duration: PlanDuration) => {\n    return duration === 'yearly' ? 'year' : 'month';\n  };\n\n  // Combine duplicate quotas (e.g., 10 bots + 10 bots = 20 bots)\n  const combinedQuotas = useMemo(() => {\n    const features = addon.features || [];\n    return combineQuotas(features as SubscriptionFeatures[]);\n  }, [addon.features]);\n\n  return (\n    <article className=\"flex flex-col border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 transition-all duration-200\">\n      {/* Header */}\n      <header className=\"p-4 border-b border-border-subtle\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"size-10 rounded-lg bg-status-success-bg-subtle flex items-center justify-center\">\n              <Package className=\"size-5 text-status-success-text\" />\n            </div>\n            <div>\n              <h4 className=\"font-semibold text-text-primary\">{addon.name}</h4>\n              <p className=\"text-sm text-text-secondary\">\n                {formatCurrency(addon.price, addon.currency)}/{getDurationLabel(addon.duration)}\n              </p>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 flex-1\">\n        {combinedQuotas.length > 0 ? (\n          <ul className=\"space-y-2\">\n            {combinedQuotas.slice(0, 2).map((quota) => (\n              <li key={quota.quotaId} className=\"flex items-center justify-between text-sm\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"size-1.5 rounded-full bg-status-success-bg\" />\n                  <span className=\"text-text-secondary\">{quota.name}</span>\n                </div>\n                <span className=\"font-medium text-text-primary\">\n                  {quota.totalValue.toLocaleString()}\n                </span>\n              </li>\n            ))}\n            {combinedQuotas.length > 2 && (\n              <li className=\"text-xs text-text-secondary\">\n                +{combinedQuotas.length - 2} more quotas\n              </li>\n            )}\n          </ul>\n        ) : (\n          <p className=\"text-sm text-text-secondary\">\n            Enhance your subscription with additional features\n          </p>\n        )}\n      </div>\n\n      {/* Footer */}\n      <footer className=\"p-4 border-t border-border-subtle bg-bg-sunken flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={onView}\n          className=\"flex-1 px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors text-center\"\n        >\n          View Details\n        </button>\n        {isInCart && onUpdateQuantity ? (\n          // Quantity controls when in cart\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={onRemoveFromCart}\n              className=\"p-2 text-status-error-text hover:bg-status-error-bg-subtle rounded-button transition-colors\"\n              title=\"Remove from cart\"\n            >\n              <Trash2 className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity - 1)}\n              className=\"p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n            >\n              <Minus className=\"size-4\" />\n            </button>\n            <span className=\"w-8 text-center font-medium text-text-primary\">{cartQuantity}</span>\n            <button\n              type=\"button\"\n              onClick={() => onUpdateQuantity(cartQuantity + 1)}\n              className=\"p-2 text-text-primary hover:bg-bg-sunken rounded-button transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          // Add to cart button\n          <button\n            type=\"button\"\n            onClick={handleAddToCart}\n            disabled={justAdded}\n            className={`flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-center flex items-center justify-center gap-1.5 ${\n              justAdded\n                ? 'bg-status-success-bg text-action-primary-text hover:bg-status-success-bg/90'\n                : 'text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bgHover'\n            }`}\n          >\n            {justAdded ? (\n              <>\n                <Check className=\"size-4\" />\n                Added\n              </>\n            ) : (\n              <>\n                <ShoppingCart className=\"size-4\" />\n                Add to Cart\n              </>\n            )}\n          </button>\n        )}\n      </footer>\n    </article>\n  );\n};\n\nexport const RecommendedAddonsSection: FC<RecommendedAddonsSectionProps> = ({\n  addons,\n  hasSubscription,\n  onViewAddon,\n  onPurchaseAddon,\n  onViewAllAddons,\n  onAddToCart,\n  isInCart,\n  getCartQuantity,\n  onUpdateQuantity,\n  onRemoveFromCart,\n  maxAddons = 3,\n  isLoading = false,\n  className = '',\n  dataTour,\n}) => {\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  // Only show if user has a subscription\n  if (!hasSubscription) {\n    return null;\n  }\n\n  // Limit addons to maxAddons\n  const displayAddons = addons.slice(0, maxAddons);\n\n  if (isLoading) {\n    return (\n      <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n        <header>\n          <h3 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.overview.recommendedAddons', 'Recommended Add-ons')}\n          </h3>\n          <p className=\"text-sm text-text-secondary\">\n            Enhance your subscription with these popular add-ons\n          </p>\n        </header>\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"size-6 animate-spin text-text-secondary\" />\n        </div>\n      </section>\n    );\n  }\n\n  if (displayAddons.length === 0) {\n    return null;\n  }\n\n  return (\n    <section className={`space-y-4 ${className}`} data-tour={dataTour}>\n      {/* Header */}\n      <header className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <Sparkles className=\"size-5 text-status-warning-text\" />\n          <div>\n            <h3 className=\"text-lg font-semibold text-text-primary\">Recommended Add-ons</h3>\n            <p className=\"text-sm text-text-secondary\">\n              Enhance your subscription with these popular add-ons\n            </p>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onViewAllAddons}\n          className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-link hover:text-text-link transition-colors\"\n        >\n          View All\n          <ChevronRight className=\"size-4\" />\n        </button>\n      </header>\n\n      {/* Addons Grid - Limited to maxAddons */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        {displayAddons.map((addon) => (\n          <AddonCard\n            key={addon.id}\n            addon={addon}\n            onView={() => onViewAddon(addon.id)}\n            onPurchase={() => onPurchaseAddon(addon.id)}\n            onAddToCart={onAddToCart ? () => onAddToCart(addon) : undefined}\n            isInCart={isInCart ? isInCart(addon.id) : false}\n            cartQuantity={getCartQuantity ? getCartQuantity(addon.id) : 0}\n            onUpdateQuantity={\n              onUpdateQuantity ? (qty) => onUpdateQuantity(addon.id, qty) : undefined\n            }\n            onRemoveFromCart={onRemoveFromCart ? () => onRemoveFromCart(addon.id) : undefined}\n          />\n        ))}\n      </div>\n\n      {/* See More Link - show if there are more addons */}\n      {addons.length > maxAddons && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            type=\"button\"\n            onClick={onViewAllAddons}\n            className=\"inline-flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            View all {addons.length} add-ons\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/dashboard/pages/OverviewPage.js

@@ -131,32 +131,32 @@ var g = () => {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ h("div", {
 			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ m(xe, { className: "size-8 animate-spin text-primary" }), /* @__PURE__ */ m("p", {
-				className: "text-sm text-muted-foreground",
+			children: [/* @__PURE__ */ m(xe, { className: "size-8 animate-spin text-text-link" }), /* @__PURE__ */ m("p", {
+				className: "text-sm text-text-secondary",
 				children: _("billing.overview.loadingInfo", "Loading billing information...")
 			})]
 		})
 	}) : !R && N.length === 0 ? /* @__PURE__ */ h("div", {
-		className: "p-6",
+		className: "px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ h("header", {
 				className: "mb-8",
 				children: [/* @__PURE__ */ m("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: _("billing.overview.title", "Billing Overview")
 				}), /* @__PURE__ */ m("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-secondary mt-1",
 					children: _("billing.overview.emptySetupDescription", "Set up billing to manage subscriptions, payments, and invoices")
 				})]
 			}),
 			/* @__PURE__ */ m(ee, {
-				icon: /* @__PURE__ */ m(c, { className: "size-6 text-muted-foreground" }),
+				icon: /* @__PURE__ */ m(c, { className: "size-6 text-text-secondary" }),
 				title: _("billing.overview.emptyTitle", "No billing account"),
 				description: _("billing.overview.emptyDescription", "Create a billing account to start managing your subscriptions and payments"),
 				action: x.canManageBillingAccount ? /* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: () => T(!0),
-					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors",
+					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 					children: [/* @__PURE__ */ m(u, { className: "size-4" }), _("billing.overview.createBillingAccount", "Create Billing Account")]
 				}) : void 0
 			}),
@@ -171,28 +171,28 @@ var g = () => {
 			})
 		]
 	}) : /* @__PURE__ */ h("div", {
-		className: "p-4 sm:p-6 space-y-6 sm:space-y-8",
+		className: "px-6 lg:px-8 py-6 space-y-6 sm:space-y-8",
 		children: [
 			/* @__PURE__ */ h("header", {
 				className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4",
 				children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: _("billing.overview.title", "Billing Overview")
 				}), /* @__PURE__ */ m("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-secondary mt-1",
 					children: _("billing.overview.description", "Manage your billing accounts, subscriptions, and payment methods")
 				})] }), /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ m("button", {
 						type: "button",
 						onClick: Be,
-						className: "p-2 rounded-lg border border-border hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+						className: "p-2 rounded-button border border-border-subtle hover:bg-bg-sunken hover:border-border-strong text-text-secondary hover:text-text-primary transition-all duration-200",
 						"aria-label": _("billing.overview.refresh", "Refresh"),
 						children: /* @__PURE__ */ m(d, { className: `size-4 ${R ? "animate-spin" : ""}` })
 					}), x.canManageBillingAccount && N.length > 0 && /* @__PURE__ */ h("button", {
 						type: "button",
 						onClick: () => T(!0),
-						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors",
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 						children: [/* @__PURE__ */ m(u, { className: "size-4" }), /* @__PURE__ */ m("span", {
 							className: "hidden sm:inline",
 							children: _("billing.overview.newAccount", "New Account")
@@ -206,48 +206,48 @@ var g = () => {
 				children: [/* @__PURE__ */ h("button", {
 					type: "button",
 					onClick: () => k(!O),
-					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors",
+					className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-subtle rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 					children: [/* @__PURE__ */ h("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ m("div", {
-							className: "size-8 rounded-lg bg-primary/10 flex items-center justify-center",
-							children: /* @__PURE__ */ m(c, { className: "size-4 text-primary" })
+							className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
+							children: /* @__PURE__ */ m(c, { className: "size-4 text-text-link" })
 						}), /* @__PURE__ */ h("div", {
 							className: "text-left",
 							children: [/* @__PURE__ */ m("p", {
-								className: "text-sm font-medium text-foreground",
+								className: "text-sm font-medium text-text-primary",
 								children: P?.name || _("billing.overview.selectAccount", "Select Account")
 							}), /* @__PURE__ */ m("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: P?.email
 							})]
 						})]
-					}), /* @__PURE__ */ m(ye, { className: `size-4 text-muted-foreground transition-transform ${O ? "rotate-180" : ""}` })]
+					}), /* @__PURE__ */ m(ye, { className: `size-4 text-text-muted transition-transform ${O ? "rotate-180" : ""}` })]
 				}), O && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
 					className: "fixed inset-0 z-10",
 					onClick: () => k(!1)
 				}), /* @__PURE__ */ m("div", {
-					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
+					className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-subtle rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
 					children: N.map((e) => /* @__PURE__ */ h("button", {
 						type: "button",
 						onClick: () => ze(e),
-						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
+						className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-center gap-3 min-w-0",
 							children: [/* @__PURE__ */ m("div", {
-								className: "size-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
-								children: /* @__PURE__ */ m(c, { className: "size-4 text-muted-foreground" })
+								className: "size-9 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
+								children: /* @__PURE__ */ m(c, { className: "size-4 text-text-secondary" })
 							}), /* @__PURE__ */ h("div", {
 								className: "text-left min-w-0",
 								children: [/* @__PURE__ */ m("p", {
-									className: "text-sm font-medium text-foreground truncate",
+									className: "text-sm font-medium text-text-primary truncate",
 									children: e.name
 								}), /* @__PURE__ */ m("p", {
-									className: "text-xs text-muted-foreground truncate",
+									className: "text-xs text-text-secondary truncate",
 									children: e.email
 								})]
 							})]
-						}), P?.id === e.id && /* @__PURE__ */ m(ve, { className: "size-4 text-primary flex-shrink-0" })]
+						}), P?.id === e.id && /* @__PURE__ */ m(ve, { className: "size-4 text-text-link flex-shrink-0" })]
 					}, e.id))
 				})] })]
 			}),
@@ -297,18 +297,18 @@ var g = () => {
 								children: [/* @__PURE__ */ h("button", {
 									type: "button",
 									onClick: () => M(!j),
-									className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors",
+									className: "w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border-subtle rounded-card bg-bg-surface hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
 									children: [/* @__PURE__ */ h("div", {
 										className: "flex items-center gap-3",
 										children: [/* @__PURE__ */ m("div", {
-											className: "size-8 rounded-lg bg-primary/10 flex items-center justify-center",
-											children: /* @__PURE__ */ m(l, { className: "size-4 text-primary" })
+											className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
+											children: /* @__PURE__ */ m(l, { className: "size-4 text-text-link" })
 										}), /* @__PURE__ */ h("div", {
 											className: "text-left",
 											children: [/* @__PURE__ */ h("p", {
-												className: "text-sm font-medium text-foreground",
+												className: "text-sm font-medium text-text-primary",
 												children: [Z?.plan?.name || _("billing.overview.selectSubscription", "Select Subscription"), Z?.plan?.product?.name && /* @__PURE__ */ h("span", {
-													className: "text-muted-foreground font-normal",
+													className: "text-text-secondary font-normal",
 													children: [
 														" ",
 														"· ",
@@ -316,7 +316,7 @@ var g = () => {
 													]
 												})]
 											}), /* @__PURE__ */ h("p", {
-												className: "text-xs text-muted-foreground",
+												className: "text-xs text-text-secondary",
 												children: [
 													I.length,
 													" ",
@@ -324,30 +324,30 @@ var g = () => {
 												]
 											})]
 										})]
-									}), /* @__PURE__ */ m(ye, { className: `size-4 text-muted-foreground transition-transform ${j ? "rotate-180" : ""}` })]
+									}), /* @__PURE__ */ m(ye, { className: `size-4 text-text-muted transition-transform ${j ? "rotate-180" : ""}` })]
 								}), j && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
 									className: "fixed inset-0 z-10",
 									onClick: () => M(!1)
 								}), /* @__PURE__ */ m("div", {
-									className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto",
+									className: "absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-bg-elevated border border-border-subtle rounded-card shadow-elevation-3 z-20 py-1 max-h-60 overflow-y-auto",
 									children: I.map((e, t) => /* @__PURE__ */ h("button", {
 										type: "button",
 										onClick: () => {
 											ke(t), M(!1);
 										},
-										className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors",
+										className: "w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-bg-sunken transition-colors",
 										children: [/* @__PURE__ */ h("div", {
 											className: "flex items-center gap-3 min-w-0",
 											children: [/* @__PURE__ */ m("div", {
-												className: "size-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0",
-												children: /* @__PURE__ */ m(l, { className: "size-4 text-muted-foreground" })
+												className: "size-9 rounded-lg bg-bg-sunken flex items-center justify-center flex-shrink-0",
+												children: /* @__PURE__ */ m(l, { className: "size-4 text-text-secondary" })
 											}), /* @__PURE__ */ h("div", {
 												className: "text-left min-w-0",
 												children: [/* @__PURE__ */ m("p", {
-													className: "text-sm font-medium text-foreground truncate",
+													className: "text-sm font-medium text-text-primary truncate",
 													children: e.plan?.name || _("billing.overview.subscription", "Subscription")
 												}), /* @__PURE__ */ h("p", {
-													className: "text-xs text-muted-foreground truncate",
+													className: "text-xs text-text-secondary truncate",
 													children: [
 														e.plan?.product?.name || _("billing.overview.unknownProduct", "Unknown Product"),
 														" ",
@@ -358,7 +358,7 @@ var g = () => {
 													]
 												})]
 											})]
-										}), Oe === t && /* @__PURE__ */ m(ve, { className: "size-4 text-primary flex-shrink-0" })]
+										}), Oe === t && /* @__PURE__ */ m(ve, { className: "size-4 text-text-link flex-shrink-0" })]
 									}, e.id))
 								})] })]
 							}), /* @__PURE__ */ m(de, {
@@ -383,40 +383,40 @@ var g = () => {
 				}), /* @__PURE__ */ h("div", {
 					className: "space-y-6",
 					children: [/* @__PURE__ */ h("section", {
-						className: "border border-border rounded-lg bg-card p-4",
+						className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5",
 						"data-tour": "billing-overview-quick-actions",
 						children: [/* @__PURE__ */ m("h3", {
-							className: "font-semibold text-foreground mb-4",
+							className: "font-semibold text-text-primary mb-4",
 							children: "Quick Actions"
 						}), /* @__PURE__ */ h("div", {
-							className: "space-y-2",
+							className: "space-y-1.5",
 							children: [
 								/* @__PURE__ */ h("button", {
 									type: "button",
 									onClick: () => P && Q(`/transactions/${P.id}`),
 									disabled: !P,
-									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ m("div", {
-										className: "size-8 rounded bg-status-info-bg-subtle flex items-center justify-center",
-										children: /* @__PURE__ */ m(Se, { className: "size-4 text-accent-blue" })
+										className: "size-9 rounded-lg bg-status-info-bg-subtle flex items-center justify-center",
+										children: /* @__PURE__ */ m(Se, { className: "size-4 text-status-info-text" })
 									}), "View Transactions"]
 								}),
 								/* @__PURE__ */ h("button", {
 									type: "button",
 									onClick: () => P && Q(`/creditTransactions/${P.id}`),
 									disabled: !P,
-									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ m("div", {
-										className: "size-8 rounded bg-status-warning-bg-subtle flex items-center justify-center",
+										className: "size-9 rounded-lg bg-status-warning-bg-subtle flex items-center justify-center",
 										children: /* @__PURE__ */ m(f, { className: "size-4 text-status-warning-text" })
 									}), "Credit History"]
 								}),
 								/* @__PURE__ */ h("button", {
 									type: "button",
 									onClick: () => Q("/checkout/credits"),
-									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors",
+									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 									children: [/* @__PURE__ */ m("div", {
-										className: "size-8 rounded bg-status-success-bg-subtle flex items-center justify-center",
+										className: "size-9 rounded-lg bg-status-success-bg-subtle flex items-center justify-center",
 										children: /* @__PURE__ */ m(be, { className: "size-4 text-status-success-text" })
 									}), "Purchase Credits"]
 								}),
@@ -424,32 +424,32 @@ var g = () => {
 									type: "button",
 									onClick: () => P && Q(`/usage?billingAccountId=${P.id}`),
 									disabled: !P,
-									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									className: "w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-text-primary hover:bg-bg-sunken rounded-button transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									children: [/* @__PURE__ */ m("div", {
-										className: "size-8 rounded bg-accent-violet-subtle flex items-center justify-center",
-										children: /* @__PURE__ */ m(ge, { className: "size-4 text-accent-violet" })
+										className: "size-9 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
+										children: /* @__PURE__ */ m(ge, { className: "size-4 text-text-link" })
 									}), "Usage Analytics"]
 								})
 							]
 						})]
 					}), !L && /* @__PURE__ */ h("section", {
-						className: "border border-border rounded-lg bg-gradient-to-br from-primary/5 to-primary/10 p-4",
+						className: "border border-border-subtle rounded-card bg-[var(--color-accent-soft)] shadow-elevation-1 p-5",
 						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-start gap-3 mb-4",
 							children: [/* @__PURE__ */ m("div", {
-								className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0",
-								children: /* @__PURE__ */ m(Ce, { className: "size-5 text-primary" })
+								className: "size-10 rounded-lg bg-bg-surface flex items-center justify-center flex-shrink-0 shadow-elevation-1",
+								children: /* @__PURE__ */ m(Ce, { className: "size-5 text-text-link" })
 							}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
-								className: "font-semibold text-foreground",
+								className: "font-semibold text-text-primary",
 								children: "Get Started"
 							}), /* @__PURE__ */ m("p", {
-								className: "text-sm text-muted-foreground mt-1",
+								className: "text-sm text-text-secondary mt-1",
 								children: "Choose a plan that fits your needs to unlock all features"
 							})] })]
 						}), /* @__PURE__ */ h("button", {
 							type: "button",
 							onClick: () => Q("/plans"),
-							className: "w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors",
+							className: "w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
 							children: ["Browse Plans", /* @__PURE__ */ m(_e, { className: "size-4" })]
 						})]
 					})]