@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/earnings/pages/PayoutAdminPage.js

@@ -23,33 +23,33 @@ var j = {
 	FAILED: "Failed",
 	CANCELED: "Canceled"
 }, M = {
-	REQUESTED: "bg-warning-surface text-warning-foreground",
-	APPROVED: "bg-info-surface text-info-foreground",
-	REJECTED: "bg-destructive/10 text-destructive",
-	PROCESSING: "bg-info-surface text-info-foreground",
-	PAID: "bg-success-surface text-success-foreground",
-	FAILED: "bg-destructive/10 text-destructive",
-	CANCELED: "bg-muted text-muted-foreground"
+	REQUESTED: "bg-status-warning-bg-subtle text-status-warning-text",
+	APPROVED: "bg-status-info-bg-subtle text-status-info-text",
+	REJECTED: "bg-status-error-bg-subtle text-status-error-text",
+	PROCESSING: "bg-status-info-bg-subtle text-status-info-text",
+	PAID: "bg-status-success-bg-subtle text-status-success-text",
+	FAILED: "bg-status-error-bg-subtle text-status-error-text",
+	CANCELED: "bg-bg-sunken text-text-muted"
 };
 function N({ status: e }) {
 	return /* @__PURE__ */ k("span", {
-		className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${M[e] ?? "bg-muted text-muted-foreground"}`,
+		className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${M[e] ?? "bg-bg-sunken text-text-muted"}`,
 		children: j[e] ?? e
 	});
 }
 function P({ account: e }) {
 	let [t, n] = _(!1), r = e.accountDetails;
 	return /* @__PURE__ */ A("div", {
-		className: "rounded-md border border-border bg-muted/40 p-3 text-sm",
+		className: "rounded-md border border-border-subtle bg-bg-sunken/40 p-3 text-sm",
 		children: [/* @__PURE__ */ A("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ A("div", {
-				className: "flex items-center gap-2 text-foreground font-medium",
+				className: "flex items-center gap-2 text-text-primary font-medium",
 				children: [
-					/* @__PURE__ */ k(w, { className: "size-4 text-muted-foreground" }),
+					/* @__PURE__ */ k(w, { className: "size-4 text-text-muted" }),
 					e.displayName ?? e.label,
 					/* @__PURE__ */ A("span", {
-						className: "text-xs text-muted-foreground font-normal",
+						className: "text-xs text-text-muted font-normal",
 						children: [
 							"(",
 							e.type === "UPI" ? "UPI" : "Bank",
@@ -65,7 +65,7 @@ function P({ account: e }) {
 			}), r && /* @__PURE__ */ k("button", {
 				type: "button",
 				onClick: () => n((e) => !e),
-				className: "text-muted-foreground hover:text-foreground",
+				className: "text-text-muted hover:text-text-primary",
 				children: k(t ? S : x, { className: "size-4" })
 			})]
 		}), t && r && /* @__PURE__ */ A("div", {
@@ -74,70 +74,70 @@ function P({ account: e }) {
 				r.accountHolderName && /* @__PURE__ */ A("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ k("span", {
-						className: "text-muted-foreground w-32 shrink-0",
+						className: "text-text-muted w-32 shrink-0",
 						children: "Account holder"
 					}), /* @__PURE__ */ k("span", {
-						className: "text-foreground",
+						className: "text-text-primary",
 						children: r.accountHolderName
 					})]
 				}),
 				r.bankName && /* @__PURE__ */ A("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ k("span", {
-						className: "text-muted-foreground w-32 shrink-0",
+						className: "text-text-muted w-32 shrink-0",
 						children: "Bank"
 					}), /* @__PURE__ */ k("span", {
-						className: "text-foreground",
+						className: "text-text-primary",
 						children: r.bankName
 					})]
 				}),
 				e.accountLast4 && /* @__PURE__ */ A("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ k("span", {
-						className: "text-muted-foreground w-32 shrink-0",
+						className: "text-text-muted w-32 shrink-0",
 						children: "Account (last 4)"
 					}), /* @__PURE__ */ A("span", {
-						className: "text-foreground font-mono",
+						className: "text-text-primary font-mono",
 						children: ["••••", e.accountLast4]
 					})]
 				}),
 				r.ifsc && /* @__PURE__ */ A("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ k("span", {
-						className: "text-muted-foreground w-32 shrink-0",
+						className: "text-text-muted w-32 shrink-0",
 						children: "IFSC"
 					}), /* @__PURE__ */ k("span", {
-						className: "text-foreground font-mono",
+						className: "text-text-primary font-mono",
 						children: r.ifsc
 					})]
 				}),
 				r.routingNumberLast4 && /* @__PURE__ */ A("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ k("span", {
-						className: "text-muted-foreground w-32 shrink-0",
+						className: "text-text-muted w-32 shrink-0",
 						children: "Routing (last 4)"
 					}), /* @__PURE__ */ A("span", {
-						className: "text-foreground font-mono",
+						className: "text-text-primary font-mono",
 						children: ["••••", r.routingNumberLast4]
 					})]
 				}),
 				r.upiIdMasked && /* @__PURE__ */ A("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ k("span", {
-						className: "text-muted-foreground w-32 shrink-0",
+						className: "text-text-muted w-32 shrink-0",
 						children: "UPI ID"
 					}), /* @__PURE__ */ k("span", {
-						className: "text-foreground font-mono",
+						className: "text-text-primary font-mono",
 						children: r.upiIdMasked
 					})]
 				}),
 				r.swift && /* @__PURE__ */ A("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ k("span", {
-						className: "text-muted-foreground w-32 shrink-0",
+						className: "text-text-muted w-32 shrink-0",
 						children: "SWIFT"
 					}), /* @__PURE__ */ k("span", {
-						className: "text-foreground font-mono",
+						className: "text-text-primary font-mono",
 						children: r.swift
 					})]
 				})
@@ -148,7 +148,7 @@ function P({ account: e }) {
 function F({ request: e, onApprove: t, onReject: n, onMarkPaid: r }) {
 	let i = e.status === "REQUESTED" || e.status === "REJECTED", a = e.status === "REQUESTED" || e.status === "APPROVED", c = e.status === "APPROVED" || e.status === "PROCESSING";
 	return /* @__PURE__ */ A("div", {
-		className: "rounded-lg border border-border bg-card p-5 space-y-4",
+		className: "rounded-card border border-border-subtle bg-bg-surface p-5 space-y-4 shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:shadow-[var(--shadow-elevation-2)]",
 		children: [
 			/* @__PURE__ */ A("div", {
 				className: "flex flex-wrap items-start justify-between gap-3",
@@ -157,11 +157,11 @@ function F({ request: e, onApprove: t, onReject: n, onMarkPaid: r }) {
 					children: [/* @__PURE__ */ A("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ k("span", {
-							className: "text-xl font-semibold text-foreground",
+							className: "text-xl font-semibold text-text-primary",
 							children: o(e.requestedAmount, e.currency)
 						}), /* @__PURE__ */ k(N, { status: e.status })]
 					}), /* @__PURE__ */ A("div", {
-						className: "text-xs text-muted-foreground space-x-2",
+						className: "text-xs text-text-muted space-x-2",
 						children: [
 							/* @__PURE__ */ A("span", { children: ["Requested ", s(e.createdAt)] }),
 							e.requesterUserId && /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k("span", { children: "·" }), /* @__PURE__ */ A("span", { children: ["by ", e.requesterUserId] })] }),
@@ -178,19 +178,19 @@ function F({ request: e, onApprove: t, onReject: n, onMarkPaid: r }) {
 						i && /* @__PURE__ */ A("button", {
 							type: "button",
 							onClick: () => t(e),
-							className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground",
+							className: "inline-flex items-center gap-1.5 rounded-button bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text",
 							children: [/* @__PURE__ */ k(b, { className: "size-3.5" }), "Approve"]
 						}),
 						c && /* @__PURE__ */ A("button", {
 							type: "button",
 							onClick: () => r(e),
-							className: "inline-flex items-center gap-1.5 rounded-md bg-success-surface border border-success-border px-3 py-1.5 text-xs font-medium text-success-foreground",
+							className: "inline-flex items-center gap-1.5 rounded-button bg-status-success-bg-subtle border border-status-success-border px-3 py-1.5 text-xs font-medium text-status-success-text transition-colors hover:bg-status-success-bg-subtle/70",
 							children: [/* @__PURE__ */ k(y, { className: "size-3.5" }), "Mark as Paid"]
 						}),
 						a && /* @__PURE__ */ A("button", {
 							type: "button",
 							onClick: () => n(e),
-							className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-destructive",
+							className: "inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-error-text",
 							children: [/* @__PURE__ */ k(D, { className: "size-3.5" }), "Reject"]
 						})
 					]
@@ -198,24 +198,28 @@ function F({ request: e, onApprove: t, onReject: n, onMarkPaid: r }) {
 			}),
 			e.payoutAccount && /* @__PURE__ */ k(P, { account: e.payoutAccount }),
 			e.userNotes && /* @__PURE__ */ A("div", {
-				className: "rounded-md bg-muted/40 border border-border px-3 py-2 text-sm",
+				className: "rounded-md bg-bg-sunken/40 border border-border-subtle px-3 py-2 text-sm",
 				children: [/* @__PURE__ */ k("span", {
-					className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+					className: "text-xs font-medium text-text-muted uppercase tracking-wide",
 					children: "User note"
 				}), /* @__PURE__ */ k("p", {
-					className: "mt-1 text-foreground",
+					className: "mt-1 text-text-primary",
 					children: e.userNotes
 				})]
 			}),
 			(e.internalNotes ?? e.failureReason ?? e.externalReference) && /* @__PURE__ */ A("div", {
-				className: "grid gap-1 text-xs text-muted-foreground",
+				className: "grid gap-1 text-xs text-text-muted",
 				children: [
 					e.externalReference && /* @__PURE__ */ A("div", {
 						className: "flex gap-2",
-						children: [/* @__PURE__ */ k(T, { className: "size-3.5 mt-px shrink-0" }), /* @__PURE__ */ A("span", { children: ["Ref: ", /* @__PURE__ */ k("span", {
-							className: "font-mono text-foreground",
-							children: e.externalReference
-						})] })]
+						children: [/* @__PURE__ */ k(T, { className: "size-3.5 mt-px shrink-0" }), /* @__PURE__ */ A("span", { children: [
+							"Ref:",
+							" ",
+							/* @__PURE__ */ k("span", {
+								className: "font-mono text-text-primary",
+								children: e.externalReference
+							})
+						] })]
 					}),
 					e.internalNotes && /* @__PURE__ */ A("div", {
 						className: "flex gap-2",
@@ -223,18 +227,18 @@ function F({ request: e, onApprove: t, onReject: n, onMarkPaid: r }) {
 							className: "shrink-0",
 							children: "Internal note:"
 						}), /* @__PURE__ */ k("span", {
-							className: "text-foreground",
+							className: "text-text-primary",
 							children: e.internalNotes
 						})]
 					}),
 					e.failureReason && /* @__PURE__ */ A("div", {
-						className: "flex gap-2 text-destructive",
+						className: "flex gap-2 text-status-error-text",
 						children: [/* @__PURE__ */ k(v, { className: "size-3.5 mt-px shrink-0" }), /* @__PURE__ */ k("span", { children: e.failureReason })]
 					})
 				]
 			}),
 			(e.paidAt ?? e.processedAt) && /* @__PURE__ */ A("div", {
-				className: "flex flex-wrap gap-4 text-xs text-muted-foreground",
+				className: "flex flex-wrap gap-4 text-xs text-text-muted",
 				children: [e.processedAt && /* @__PURE__ */ A("span", {
 					className: "flex items-center gap-1",
 					children: [
@@ -259,45 +263,45 @@ function I({ summary: e }) {
 		className: "grid gap-3 sm:grid-cols-3",
 		children: [
 			/* @__PURE__ */ A("div", {
-				className: "rounded-lg border border-border bg-card p-4",
+				className: "rounded-card border border-border-subtle bg-bg-surface p-4 shadow-[var(--shadow-elevation-1)]",
 				children: [
 					/* @__PURE__ */ k("div", {
-						className: "text-xs text-muted-foreground uppercase tracking-wide",
+						className: "text-xs text-text-muted uppercase tracking-wide",
 						children: "Pending payout"
 					}),
 					/* @__PURE__ */ k("div", {
-						className: "mt-1 text-lg font-semibold text-foreground",
+						className: "mt-1 text-lg font-semibold text-text-primary",
 						children: o(e.totalRequestedAmount, "USD")
 					}),
 					/* @__PURE__ */ A("div", {
-						className: "text-xs text-muted-foreground mt-0.5",
+						className: "text-xs text-text-muted mt-0.5",
 						children: [e.pendingCount, " requests"]
 					})
 				]
 			}),
 			/* @__PURE__ */ A("div", {
-				className: "rounded-lg border border-border bg-card p-4",
+				className: "rounded-card border border-border-subtle bg-bg-surface p-4 shadow-[var(--shadow-elevation-1)]",
 				children: [/* @__PURE__ */ k("div", {
-					className: "text-xs text-muted-foreground uppercase tracking-wide",
+					className: "text-xs text-text-muted uppercase tracking-wide",
 					children: "Processing"
 				}), /* @__PURE__ */ k("div", {
-					className: "mt-1 text-lg font-semibold text-foreground",
+					className: "mt-1 text-lg font-semibold text-text-primary",
 					children: o(e.totalProcessingAmount, "USD")
 				})]
 			}),
 			/* @__PURE__ */ A("div", {
-				className: "rounded-lg border border-border bg-card p-4",
+				className: "rounded-card border border-border-subtle bg-bg-surface p-4 shadow-[var(--shadow-elevation-1)]",
 				children: [
 					/* @__PURE__ */ k("div", {
-						className: "text-xs text-muted-foreground uppercase tracking-wide",
+						className: "text-xs text-text-muted uppercase tracking-wide",
 						children: "Total paid"
 					}),
 					/* @__PURE__ */ k("div", {
-						className: "mt-1 text-lg font-semibold text-foreground",
+						className: "mt-1 text-lg font-semibold text-text-primary",
 						children: o(e.totalPaidAmount, "USD")
 					}),
 					e.failedCount > 0 && /* @__PURE__ */ A("div", {
-						className: "text-xs text-destructive mt-0.5",
+						className: "text-xs text-status-error-text mt-0.5",
 						children: [e.failedCount, " failed"]
 					})
 				]
@@ -314,19 +318,19 @@ function L({ dialog: e, onClose: t, onConfirm: n }) {
 		}), d(!1));
 	};
 	return /* @__PURE__ */ k("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-overlay-scrim p-4",
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4",
 		children: /* @__PURE__ */ A("div", {
-			className: "w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg space-y-4",
+			className: "w-full max-w-md rounded-card border border-border-subtle bg-bg-elevated p-6 shadow-[var(--shadow-elevation-4)] space-y-4",
 			children: [
 				/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
-					className: "text-base font-semibold text-foreground",
+					className: "text-base font-semibold text-text-primary",
 					children: {
 						approve: "Approve withdrawal request",
 						reject: "Reject withdrawal request",
 						mark_paid: "Mark as paid"
 					}[e.type]
 				}), /* @__PURE__ */ A("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-muted mt-1",
 					children: [
 						o(e.amount, e.currency),
 						" · ",
@@ -337,7 +341,7 @@ function L({ dialog: e, onClose: t, onConfirm: n }) {
 					className: "space-y-3",
 					children: [/* @__PURE__ */ A("div", { children: [
 						/* @__PURE__ */ k("label", {
-							className: "text-xs font-medium text-foreground block mb-1",
+							className: "text-xs font-medium text-text-primary block mb-1",
 							children: "Transaction reference / UTR number"
 						}),
 						/* @__PURE__ */ k("input", {
@@ -345,37 +349,37 @@ function L({ dialog: e, onClose: t, onConfirm: n }) {
 							value: c,
 							onChange: (e) => l(e.target.value),
 							placeholder: "e.g. UTR123456789012, TXN_abc123",
-							className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+							className: "w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring"
 						}),
 						/* @__PURE__ */ k("p", {
-							className: "text-xs text-muted-foreground mt-1",
+							className: "text-xs text-text-muted mt-1",
 							children: "Enter the bank reference number so the user can verify the transfer."
 						})
 					] }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
-						className: "text-xs font-medium text-foreground block mb-1",
+						className: "text-xs font-medium text-text-primary block mb-1",
 						children: "Internal notes (optional)"
 					}), /* @__PURE__ */ k("textarea", {
 						value: r,
 						onChange: (e) => i(e.target.value),
 						rows: 2,
 						placeholder: "Any internal notes about this payment…",
-						className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+						className: "w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring resize-none"
 					})] })]
 				}),
 				e.type === "approve" && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
-					className: "text-xs font-medium text-foreground block mb-1",
+					className: "text-xs font-medium text-text-primary block mb-1",
 					children: "Internal notes (optional)"
 				}), /* @__PURE__ */ k("textarea", {
 					value: r,
 					onChange: (e) => i(e.target.value),
 					rows: 3,
 					placeholder: "e.g. Verified bank details, approved for transfer…",
-					className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+					className: "w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring resize-none"
 				})] }),
 				e.type === "reject" && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("label", {
-					className: "text-xs font-medium text-foreground block mb-1",
+					className: "text-xs font-medium text-text-primary block mb-1",
 					children: ["Reason for rejection ", /* @__PURE__ */ k("span", {
-						className: "text-destructive",
+						className: "text-status-error-text",
 						children: "*"
 					})]
 				}), /* @__PURE__ */ k("textarea", {
@@ -383,7 +387,7 @@ function L({ dialog: e, onClose: t, onConfirm: n }) {
 					onChange: (e) => s(e.target.value),
 					rows: 3,
 					placeholder: "e.g. Invalid bank details provided, please re-submit with correct IFSC…",
-					className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+					className: "w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring resize-none"
 				})] }),
 				/* @__PURE__ */ A("div", {
 					className: "flex justify-end gap-2 pt-2",
@@ -391,13 +395,13 @@ function L({ dialog: e, onClose: t, onConfirm: n }) {
 						type: "button",
 						onClick: t,
 						disabled: u,
-						className: "rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground disabled:opacity-50",
+						className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary disabled:opacity-50",
 						children: "Cancel"
 					}), /* @__PURE__ */ k("button", {
 						type: "button",
 						onClick: () => void f(),
 						disabled: u || e.type === "reject" && !a.trim(),
-						className: `rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50 ${e.type === "reject" ? "bg-destructive text-destructive-foreground" : "bg-primary text-primary-foreground"}`,
+						className: `rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50 ${e.type === "reject" ? "bg-action-danger-bg text-action-danger-text" : "bg-action-primary-bg text-action-primary-text"}`,
 						children: u ? "Saving…" : e.type === "approve" ? "Approve" : e.type === "reject" ? "Reject" : "Confirm Payment"
 					})]
 				})
@@ -473,7 +477,7 @@ var R = () => {
 				actions: /* @__PURE__ */ A("button", {
 					type: "button",
 					onClick: () => void V(),
-					className: "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground",
+					className: "inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary",
 					children: [/* @__PURE__ */ k(E, { className: `size-4 ${D ? "animate-spin" : ""}` }), "Refresh"]
 				})
 			}),
@@ -484,29 +488,29 @@ var R = () => {
 					1,
 					2,
 					3
-				].map((e) => /* @__PURE__ */ k("div", { className: "h-20 animate-pulse rounded-lg border border-border bg-card" }, e))
+				].map((e) => /* @__PURE__ */ k("div", { className: "h-20 animate-pulse rounded-lg border border-border-subtle bg-bg-surface" }, e))
 			}),
 			j && !c(j) && /* @__PURE__ */ k("div", {
-				className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive",
+				className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text",
 				children: j.message
 			}),
 			/* @__PURE__ */ k("div", {
-				className: "border-b border-border",
+				className: "border-b border-border-subtle",
 				children: /* @__PURE__ */ k("div", {
 					className: "flex gap-0",
 					children: G.map((e) => /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: () => P(e.id),
-						className: `flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${N === e.id ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+						className: `flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${N === e.id ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-muted hover:text-text-primary"}`,
 						children: [e.label, e.count > 0 && /* @__PURE__ */ k("span", {
-							className: `rounded-full px-1.5 py-0.5 text-xs ${N === e.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`,
+							className: `rounded-full px-1.5 py-0.5 text-xs ${N === e.id ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-muted"}`,
 							children: e.count
 						})]
 					}, e.id))
 				})
 			}),
 			N === "approved" && U.length > 0 && /* @__PURE__ */ A("div", {
-				className: "rounded-lg border border-info-border bg-info-surface px-4 py-3 text-sm text-info-foreground",
+				className: "rounded-card border border-status-info-border bg-status-info-bg-subtle px-4 py-3 text-sm text-status-info-text",
 				children: [
 					/* @__PURE__ */ k("strong", { children: "How to pay:" }),
 					" Click the account row to expand bank/UPI details → transfer the exact amount via your bank → click ",
@@ -516,7 +520,7 @@ var R = () => {
 			}),
 			D ? /* @__PURE__ */ k("div", {
 				className: "space-y-4",
-				children: [1, 2].map((e) => /* @__PURE__ */ k("div", { className: "h-40 animate-pulse rounded-lg border border-border bg-card" }, e))
+				children: [1, 2].map((e) => /* @__PURE__ */ k("div", { className: "h-40 animate-pulse rounded-lg border border-border-subtle bg-bg-surface" }, e))
 			}) : K.length === 0 ? /* @__PURE__ */ k(r, {
 				icon: /* @__PURE__ */ k(b, { className: "size-8" }),
 				title: N === "pending" ? "No pending requests" : N === "approved" ? "No approved requests awaiting payment" : "No history yet",