@burdenoff/microfe-billing 2026.623.3 → 2026.624.2

package/dist/billing/modules/billing/pages/TransactionsPage.js

@@ -35,24 +35,24 @@ var F = {
 		children: [/* @__PURE__ */ M("button", {
 			type: "button",
 			onClick: () => a(!i),
-			className: "p-1.5 rounded-md hover:bg-muted/50 transition-colors",
+			className: "p-1.5 rounded-md hover:bg-bg-sunken/50 transition-colors",
 			"aria-label": "Transaction actions",
-			children: /* @__PURE__ */ M(E, { className: "size-4 text-muted-foreground" })
+			children: /* @__PURE__ */ M(E, { className: "size-4 text-text-secondary" })
 		}), i && /* @__PURE__ */ N("div", {
-			className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] bg-popover border border-border rounded-md shadow-lg py-1",
+			className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] bg-popover border border-border-subtle rounded-md shadow-lg py-1",
 			children: [/* @__PURE__ */ N("button", {
 				type: "button",
 				onClick: () => {
 					t(), a(!1);
 				},
-				className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted/50 transition-colors whitespace-nowrap",
+				className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors whitespace-nowrap",
 				children: [/* @__PURE__ */ M(C, { className: "size-4" }), "View Details"]
 			}), e.type === "payment" && r && /* @__PURE__ */ N("button", {
 				type: "button",
 				onClick: () => {
 					n(), a(!1);
 				},
-				className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted/50 transition-colors whitespace-nowrap",
+				className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors whitespace-nowrap",
 				children: [/* @__PURE__ */ M(w, { className: "size-4" }), "View Invoice"]
 			})]
 		})]
@@ -66,13 +66,13 @@ var F = {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: t
 		}), /* @__PURE__ */ N("div", {
-			className: "relative bg-background border border-border rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-auto",
+			className: "relative bg-bg-surface border border-border-subtle rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-auto",
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-labelledby": "transaction-details-title",
 			children: [
 				/* @__PURE__ */ N("div", {
-					className: "flex items-center justify-between p-4 border-b border-border",
+					className: "flex items-center justify-between p-4 border-b border-border-subtle",
 					children: [/* @__PURE__ */ M("h2", {
 						id: "transaction-details-title",
 						className: "text-lg font-semibold",
@@ -80,7 +80,7 @@ var F = {
 					}), /* @__PURE__ */ M("button", {
 						type: "button",
 						onClick: t,
-						className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
+						className: "p-1 rounded-md hover:bg-bg-sunken/50 transition-colors",
 						"aria-label": "Close transaction details",
 						children: /* @__PURE__ */ M(O, { className: "size-5" })
 					})]
@@ -91,13 +91,13 @@ var F = {
 						/* @__PURE__ */ N("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-secondary mb-1",
 								children: "Transaction ID"
 							}), /* @__PURE__ */ M("p", {
 								className: "text-sm font-mono break-all",
 								children: e.id
 							})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-secondary mb-1",
 								children: "Type"
 							}), /* @__PURE__ */ M("p", {
 								className: "text-sm capitalize",
@@ -110,14 +110,14 @@ var F = {
 								/* @__PURE__ */ N("div", {
 									className: "flex justify-between text-sm",
 									children: [/* @__PURE__ */ M("span", {
-										className: "text-muted-foreground",
+										className: "text-text-secondary",
 										children: "Subtotal"
 									}), /* @__PURE__ */ M("span", { children: i(f || e.amount, e.currency) })]
 								}),
 								p > 0 && /* @__PURE__ */ N("div", {
 									className: "flex justify-between text-sm",
 									children: [/* @__PURE__ */ N("span", {
-										className: "text-muted-foreground",
+										className: "text-text-secondary",
 										children: [
 											h || "Tax",
 											" ",
@@ -126,7 +126,7 @@ var F = {
 									}), /* @__PURE__ */ M("span", { children: i(p, e.currency) })]
 								}),
 								/* @__PURE__ */ N("div", {
-									className: "flex justify-between text-sm font-semibold border-t border-border pt-2",
+									className: "flex justify-between text-sm font-semibold border-t border-border-subtle pt-2",
 									children: [/* @__PURE__ */ M("span", { children: "Total" }), /* @__PURE__ */ N("span", {
 										className: e.type === "refund" ? "text-status-error-text" : "",
 										children: [e.type === "refund" ? "-" : "", i(g, e.currency)]
@@ -135,13 +135,13 @@ var F = {
 							] }) : /* @__PURE__ */ N("div", {
 								className: "grid grid-cols-2 gap-4",
 								children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-									className: "text-xs text-muted-foreground mb-1",
+									className: "text-xs text-text-secondary mb-1",
 									children: "Amount"
 								}), /* @__PURE__ */ N("p", {
 									className: `text-sm font-medium ${e.type === "refund" ? "text-status-error-text" : ""}`,
 									children: [e.type === "refund" ? "-" : "", i(g || e.amount, e.currency)]
 								})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-									className: "text-xs text-muted-foreground mb-1",
+									className: "text-xs text-text-secondary mb-1",
 									children: "Status"
 								}), /* @__PURE__ */ M("span", {
 									className: `px-2 py-0.5 text-xs font-medium rounded ${o(s(e.status))}`,
@@ -150,33 +150,33 @@ var F = {
 							})
 						}),
 						A && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-secondary mb-1",
 							children: "Status"
 						}), /* @__PURE__ */ M("span", {
 							className: `px-2 py-0.5 text-xs font-medium rounded ${o(s(e.status))}`,
 							children: e.status
 						})] }),
 						/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-secondary mb-1",
 							children: "Date & Time"
 						}), /* @__PURE__ */ M("p", {
 							className: "text-sm",
 							children: a(e.createdAt)
 						})] }),
 						e.description && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-secondary mb-1",
 							children: "Description"
 						}), /* @__PURE__ */ M("p", {
 							className: "text-sm",
 							children: e.description
 						})] }),
 						_ && /* @__PURE__ */ N("div", {
-							className: "p-3 bg-muted/50 rounded-lg space-y-2",
+							className: "p-3 bg-bg-sunken/50 rounded-lg space-y-2",
 							children: [
 								/* @__PURE__ */ N("div", {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-										className: "text-xs text-muted-foreground mb-1",
+										className: "text-xs text-text-secondary mb-1",
 										children: "Invoice"
 									}), /* @__PURE__ */ M("p", {
 										className: "text-sm font-mono",
@@ -187,7 +187,7 @@ var F = {
 									})]
 								}),
 								c && /* @__PURE__ */ N("p", {
-									className: "text-xs text-muted-foreground",
+									className: "text-xs text-text-secondary",
 									children: ["Provider: ", c]
 								}),
 								r && n && /* @__PURE__ */ N("button", {
@@ -199,7 +199,7 @@ var F = {
 							]
 						}),
 						!_ && r && n && /* @__PURE__ */ M("div", {
-							className: "p-3 bg-muted/50 rounded-lg",
+							className: "p-3 bg-bg-sunken/50 rounded-lg",
 							children: /* @__PURE__ */ N("button", {
 								type: "button",
 								onClick: () => n(e),
@@ -269,14 +269,14 @@ var F = {
 							]
 						}),
 						e.stripePaymentId && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-secondary mb-1",
 							children: "Stripe Payment ID"
 						}), /* @__PURE__ */ M("p", {
 							className: "text-sm font-mono break-all",
 							children: e.stripePaymentId
 						})] }),
 						e.razorpayPaymentId && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-secondary mb-1",
 							children: "Razorpay Payment ID"
 						}), /* @__PURE__ */ M("p", {
 							className: "text-sm font-mono break-all",
@@ -285,11 +285,11 @@ var F = {
 					]
 				}),
 				/* @__PURE__ */ M("div", {
-					className: "p-4 border-t border-border",
+					className: "p-4 border-t border-border-subtle",
 					children: /* @__PURE__ */ M("button", {
 						type: "button",
 						onClick: t,
-						className: "w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						className: "w-full py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 transition-colors",
 						children: "Close"
 					})
 				})
@@ -318,7 +318,7 @@ var F = {
 		className: "p-6",
 		children: /* @__PURE__ */ M(n, {
 			icon: /* @__PURE__ */ M("svg", {
-				className: "size-6 text-muted-foreground",
+				className: "size-6 text-text-secondary",
 				fill: "none",
 				viewBox: "0 0 24 24",
 				stroke: "currentColor",
@@ -345,7 +345,7 @@ var F = {
 	let $ = K === "all" ? z : z.filter((e) => e.type === K);
 	return V ? /* @__PURE__ */ N("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ M("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ M("div", {
+		children: [/* @__PURE__ */ M("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ M("div", {
 			className: "space-y-2",
 			children: [
 				1,
@@ -353,7 +353,7 @@ var F = {
 				3,
 				4,
 				5
-			].map((e) => /* @__PURE__ */ M("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
+			].map((e) => /* @__PURE__ */ M("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 		})]
 	}) : /* @__PURE__ */ N("div", {
 		className: "space-y-6 p-6",
@@ -361,7 +361,7 @@ var F = {
 			/* @__PURE__ */ N("button", {
 				type: "button",
 				onClick: () => O("/overview"),
-				className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+				className: "inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors",
 				children: [/* @__PURE__ */ M(_, { className: "size-4" }), "Back to Overview"]
 			}),
 			/* @__PURE__ */ M(t, {
@@ -369,15 +369,15 @@ var F = {
 				description: j ? `Transactions for ${j.name}` : "View all your billing transactions"
 			}),
 			j && /* @__PURE__ */ M("div", {
-				className: "border border-border rounded-lg p-4 bg-card",
+				className: "border border-border-subtle rounded-lg p-4 bg-bg-surface",
 				children: /* @__PURE__ */ N("div", {
 					className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4",
 					children: [
 						/* @__PURE__ */ N("div", {
 							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ M(S, { className: "size-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [
+							children: [/* @__PURE__ */ M(S, { className: "size-4 text-text-secondary mt-0.5" }), /* @__PURE__ */ N("div", { children: [
 								/* @__PURE__ */ M("p", {
-									className: "text-xs text-muted-foreground mb-0.5",
+									className: "text-xs text-text-secondary mb-0.5",
 									children: "Account"
 								}),
 								/* @__PURE__ */ M("p", {
@@ -395,8 +395,8 @@ var F = {
 						}),
 						/* @__PURE__ */ N("div", {
 							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ M(T, { className: "size-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-								className: "text-xs text-muted-foreground mb-0.5",
+							children: [/* @__PURE__ */ M(T, { className: "size-4 text-text-secondary mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-text-secondary mb-0.5",
 								children: "Email"
 							}), /* @__PURE__ */ M("p", {
 								className: "text-sm font-medium break-all",
@@ -405,18 +405,18 @@ var F = {
 						}),
 						/* @__PURE__ */ N("div", {
 							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ M(D, { className: "size-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-								className: "text-xs text-muted-foreground mb-0.5",
+							children: [/* @__PURE__ */ M(D, { className: "size-4 text-text-secondary mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-text-secondary mb-0.5",
 								children: "Credits Balance"
 							}), /* @__PURE__ */ N("p", {
-								className: "text-sm font-semibold text-foreground",
+								className: "text-sm font-semibold text-text-primary",
 								children: [(j.creditAmount || 0).toLocaleString(), " Credits"]
 							})] })]
 						}),
 						/* @__PURE__ */ N("div", {
 							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ M(w, { className: "size-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-								className: "text-xs text-muted-foreground mb-0.5",
+							children: [/* @__PURE__ */ M(w, { className: "size-4 text-text-secondary mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-text-secondary mb-0.5",
 								children: "Tax ID"
 							}), /* @__PURE__ */ M("p", {
 								className: "text-sm font-medium",
@@ -425,8 +425,8 @@ var F = {
 						}),
 						/* @__PURE__ */ N("div", {
 							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ M(v, { className: "size-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
-								className: "text-xs text-muted-foreground mb-0.5",
+							children: [/* @__PURE__ */ M(v, { className: "size-4 text-text-secondary mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-text-secondary mb-0.5",
 								children: "Member Since"
 							}), /* @__PURE__ */ M("p", {
 								className: "text-sm font-medium",
@@ -439,7 +439,7 @@ var F = {
 			/* @__PURE__ */ M("div", {
 				className: "flex items-center gap-4",
 				children: /* @__PURE__ */ M("div", {
-					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken/50",
 					children: [
 						"all",
 						"payment",
@@ -448,14 +448,14 @@ var F = {
 					].map((e) => /* @__PURE__ */ M("button", {
 						type: "button",
 						onClick: () => q(e),
-						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${K === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${K === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 						children: e === "all" ? "All" : F[e]
 					}, e))
 				})
 			}),
 			$.length === 0 ? /* @__PURE__ */ M(n, {
 				icon: /* @__PURE__ */ M("svg", {
-					className: "size-6 text-muted-foreground",
+					className: "size-6 text-text-secondary",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
@@ -469,30 +469,30 @@ var F = {
 				title: h("billing.transactions.noTransactionsFound", "No transactions found"),
 				description: K === "all" ? h("billing.transactions.noTransactionsYet", "Your transaction history will appear here.") : h("billing.transactions.noTransactionsFiltered", "No transactions match your filter.")
 			}) : /* @__PURE__ */ M("div", {
-				className: "border border-border rounded-lg overflow-visible",
+				className: "border border-border-subtle rounded-lg overflow-visible",
 				children: /* @__PURE__ */ N("table", {
 					className: "w-full",
 					children: [/* @__PURE__ */ M("thead", {
-						className: "bg-muted/50",
+						className: "bg-bg-sunken/50",
 						children: /* @__PURE__ */ N("tr", { children: [
 							/* @__PURE__ */ M("th", {
-								className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								className: "text-left text-sm font-medium text-text-secondary px-3 py-2 whitespace-nowrap",
 								children: "Date"
 							}),
 							/* @__PURE__ */ M("th", {
-								className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								className: "text-left text-sm font-medium text-text-secondary px-3 py-2 whitespace-nowrap",
 								children: "Type"
 							}),
 							/* @__PURE__ */ M("th", {
-								className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								className: "text-left text-sm font-medium text-text-secondary px-3 py-2 whitespace-nowrap",
 								children: "Description"
 							}),
 							/* @__PURE__ */ M("th", {
-								className: "text-right text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								className: "text-right text-sm font-medium text-text-secondary px-3 py-2 whitespace-nowrap",
 								children: "Amount"
 							}),
 							/* @__PURE__ */ M("th", {
-								className: "text-center text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								className: "text-center text-sm font-medium text-text-secondary px-3 py-2 whitespace-nowrap",
 								children: "Status"
 							}),
 							/* @__PURE__ */ M("th", { className: "p-2 w-10" })
@@ -500,22 +500,22 @@ var F = {
 					}), /* @__PURE__ */ M("tbody", {
 						className: "divide-y divide-border",
 						children: $.map((e) => /* @__PURE__ */ N("tr", {
-							className: "hover:bg-muted/30 transition-colors",
+							className: "hover:bg-bg-sunken/30 transition-colors",
 							children: [
 								/* @__PURE__ */ M("td", {
-									className: "px-3 py-2 text-sm text-foreground whitespace-nowrap",
+									className: "px-3 py-2 text-sm text-text-primary whitespace-nowrap",
 									children: a(e.createdAt)
 								}),
 								/* @__PURE__ */ M("td", {
-									className: "px-3 py-2 text-sm text-foreground capitalize whitespace-nowrap",
+									className: "px-3 py-2 text-sm text-text-primary capitalize whitespace-nowrap",
 									children: I(e.type)
 								}),
 								/* @__PURE__ */ M("td", {
-									className: "px-3 py-2 text-sm text-muted-foreground",
+									className: "px-3 py-2 text-sm text-text-secondary",
 									children: e.description ?? "-"
 								}),
 								/* @__PURE__ */ N("td", {
-									className: `px-3 py-2 text-sm text-right font-medium whitespace-nowrap ${e.type === "refund" ? "text-status-error-text" : "text-foreground"}`,
+									className: `px-3 py-2 text-sm text-right font-medium whitespace-nowrap ${e.type === "refund" ? "text-status-error-text" : "text-text-primary"}`,
 									children: [e.type === "refund" ? "-" : "", i(Z(e), e.currency)]
 								}),
 								/* @__PURE__ */ M("td", {
@@ -540,9 +540,9 @@ var F = {
 				})
 			}),
 			B.totalCount > 0 && /* @__PURE__ */ N("div", {
-				className: "flex items-center justify-between border-t border-border pt-4",
+				className: "flex items-center justify-between border-t border-border-subtle pt-4",
 				children: [/* @__PURE__ */ N("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: [
 						"Showing ",
 						B.page * B.pageSize + 1,
@@ -561,11 +561,11 @@ var F = {
 							type: "button",
 							onClick: G,
 							disabled: !B.hasPrevious,
-							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
 							children: [/* @__PURE__ */ M(b, { className: "size-4" }), "Previous"]
 						}),
 						/* @__PURE__ */ N("span", {
-							className: "text-sm text-muted-foreground px-2",
+							className: "text-sm text-text-secondary px-2",
 							children: [
 								"Page ",
 								B.page + 1,
@@ -577,7 +577,7 @@ var F = {
 							type: "button",
 							onClick: W,
 							disabled: !B.hasMore,
-							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
 							children: ["Next", /* @__PURE__ */ M(x, { className: "size-4" })]
 						})
 					]