@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

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

@@ -1,7 +1,7 @@
 import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
 import { PageHeader as t } from "../../../shared/components/PageHeader.js";
-import { statusTokens as n } from "../../../shared/utils/tokens.js";
-import { EmptyState as r } from "../../../shared/components/EmptyState.js";
+import { EmptyState as n } from "../../../shared/components/EmptyState.js";
+import { statusTokens as r } from "../../../shared/utils/tokens.js";
 import { ServerError as i } from "../../../shared/components/ServerError.js";
 import "../../../shared/components/index.js";
 import { formatCurrency as a, formatDateTime as o } from "../../../shared/utils/format.js";
@@ -50,14 +50,14 @@ var L = {
 	DUPLICATE_PAYMENT: "Duplicate Payment"
 }, re = ["stripe", "razorpay"], z = (e) => {
 	let t = {
-		yellow: `${n.warning.bg} ${n.warning.text}`,
-		blue: `${n.info.bg} ${n.info.text}`,
-		green: `${n.success.bg} ${n.success.text}`,
-		red: `${n.error.bg} ${n.error.text}`,
-		gray: `${n.neutral.bg} ${n.neutral.text}`
+		yellow: `${r.warning.bg} ${r.warning.text}`,
+		blue: `${r.info.bg} ${r.info.text}`,
+		green: `${r.success.bg} ${r.success.text}`,
+		red: `${r.error.bg} ${r.error.text}`,
+		gray: `${r.neutral.bg} ${r.neutral.text}`
 	};
 	return t[e] || t.gray;
-}, ie = ({ record: e, onViewDetails: t, onProcess: r, onSkip: i, onRetry: a, isProcessing: o }) => {
+}, ie = ({ record: e, onViewDetails: t, onProcess: n, onSkip: i, onRetry: a, isProcessing: o }) => {
 	let [s, c] = h(!1), l = m(null);
 	f(() => {
 		let e = (e) => {
@@ -73,26 +73,26 @@ var L = {
 			type: "button",
 			onClick: () => c(!s),
 			disabled: o,
-			className: "p-1.5 rounded-md hover:bg-muted/50 transition-colors disabled:opacity-50",
+			className: "p-1.5 rounded-md hover:bg-bg-sunken/50 transition-colors disabled:opacity-50",
 			"aria-label": "Refund actions",
-			children: o ? /* @__PURE__ */ P(T, { className: "size-4 animate-spin text-muted-foreground" }) : /* @__PURE__ */ P(E, { className: "size-4 text-muted-foreground" })
+			children: o ? /* @__PURE__ */ P(T, { className: "size-4 animate-spin text-text-muted" }) : /* @__PURE__ */ P(E, { className: "size-4 text-text-muted" })
 		}), s && /* @__PURE__ */ F("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-bg-elevated border border-border-subtle rounded-input shadow-[var(--shadow-elevation-3)] py-1",
 			children: [
 				/* @__PURE__ */ F("button", {
 					type: "button",
 					onClick: () => {
 						t(), c(!1);
 					},
-					className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted/50 transition-colors",
+					className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors",
 					children: [/* @__PURE__ */ P(C, { className: "size-4" }), "View Details"]
 				}),
 				u && /* @__PURE__ */ F("button", {
 					type: "button",
 					onClick: () => {
-						r(), c(!1);
+						n(), c(!1);
 					},
-					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${n.success.text} hover:bg-muted/50 transition-colors`,
+					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${r.success.text} hover:bg-bg-sunken/50 transition-colors`,
 					children: [/* @__PURE__ */ P(ee, { className: "size-4" }), "Process Refund"]
 				}),
 				d && /* @__PURE__ */ F("button", {
@@ -100,7 +100,7 @@ var L = {
 					onClick: () => {
 						i(), c(!1);
 					},
-					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${n.warning.text} hover:bg-muted/50 transition-colors`,
+					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${r.warning.text} hover:bg-bg-sunken/50 transition-colors`,
 					children: [/* @__PURE__ */ P(A, { className: "size-4" }), "Skip Refund"]
 				}),
 				p && /* @__PURE__ */ F("button", {
@@ -108,7 +108,7 @@ var L = {
 					onClick: () => {
 						a(), c(!1);
 					},
-					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${n.info.text} hover:bg-muted/50 transition-colors`,
+					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${r.info.text} hover:bg-bg-sunken/50 transition-colors`,
 					children: [/* @__PURE__ */ P(O, { className: "size-4" }), "Retry Refund"]
 				})
 			]
@@ -180,16 +180,16 @@ var L = {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: x
 		}), /* @__PURE__ */ F("div", {
-			className: "relative bg-background border border-border rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
+			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
 			children: [/* @__PURE__ */ F("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__ */ P("h2", {
 					className: "text-lg font-semibold",
 					children: "Create Manual Refund"
 				}), /* @__PURE__ */ P("button", {
 					type: "button",
 					onClick: x,
-					className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
+					className: "p-1 rounded-md hover:bg-bg-sunken/50 transition-colors",
 					children: /* @__PURE__ */ P(j, { className: "size-5" })
 				})]
 			}), /* @__PURE__ */ F("form", {
@@ -210,14 +210,14 @@ var L = {
 									s(e.target.value), u(null), p(null);
 								},
 								onBlur: () => S(o),
-								className: "flex-1 px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+								className: "flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 								placeholder: "Paste transaction UUID...",
 								required: !0
 							}), /* @__PURE__ */ P("button", {
 								type: "button",
 								onClick: () => S(o),
 								disabled: !o.trim() || m,
-								className: "px-3 py-2 border border-border rounded-md hover:bg-muted/50 transition-colors disabled:opacity-50 flex items-center gap-1 text-sm",
+								className: "px-3 py-2 border border-border-subtle rounded-md hover:bg-bg-sunken/50 transition-colors disabled:opacity-50 flex items-center gap-1 text-sm",
 								children: m ? /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }) : /* @__PURE__ */ P(k, { className: "size-4" })
 							})]
 						}),
@@ -226,7 +226,7 @@ var L = {
 							children: f
 						}),
 						m && /* @__PURE__ */ P("p", {
-							className: "text-xs text-muted-foreground mt-1",
+							className: "text-xs text-text-muted mt-1",
 							children: "Looking up transaction…"
 						})
 					] }),
@@ -237,13 +237,13 @@ var L = {
 								className: "flex items-center gap-2 text-status-success-text font-medium",
 								children: [/* @__PURE__ */ P(v, { className: "size-4" }), "Transaction found"]
 							}), /* @__PURE__ */ F("div", {
-								className: "text-muted-foreground grid grid-cols-2 gap-x-4 gap-y-0.5 mt-1",
+								className: "text-text-muted grid grid-cols-2 gap-x-4 gap-y-0.5 mt-1",
 								children: [
 									/* @__PURE__ */ F("span", { children: [
 										"Account:",
 										" ",
 										/* @__PURE__ */ F("span", {
-											className: "text-foreground font-mono text-xs",
+											className: "text-text-primary font-mono text-xs",
 											children: [c.billingAccountId.slice(0, 16), "…"]
 										})
 									] }),
@@ -251,7 +251,7 @@ var L = {
 										"Paid:",
 										" ",
 										/* @__PURE__ */ P("span", {
-											className: "text-foreground",
+											className: "text-text-primary",
 											children: a(c.totalAmount, c.currency)
 										})
 									] }),
@@ -259,12 +259,12 @@ var L = {
 										"Provider:",
 										" ",
 										/* @__PURE__ */ P("span", {
-											className: "text-foreground capitalize",
+											className: "text-text-primary capitalize",
 											children: _.provider
 										})
 									] }),
 									/* @__PURE__ */ F("span", { children: ["Currency: ", /* @__PURE__ */ P("span", {
-										className: "text-foreground",
+										className: "text-text-primary",
 										children: c.currency
 									})] })
 								]
@@ -273,39 +273,39 @@ var L = {
 						/* @__PURE__ */ F("div", {
 							className: "grid grid-cols-2 gap-3",
 							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-								className: "block text-xs font-medium text-muted-foreground mb-1",
+								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Provider"
 							}), /* @__PURE__ */ P("div", {
-								className: "px-3 py-2 border border-border rounded-md bg-muted/30 text-sm capitalize",
+								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm capitalize",
 								children: _.provider
 							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-								className: "block text-xs font-medium text-muted-foreground mb-1",
+								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Currency"
 							}), /* @__PURE__ */ P("div", {
-								className: "px-3 py-2 border border-border rounded-md bg-muted/30 text-sm",
+								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm",
 								children: _.currency
 							})] })]
 						}),
 						/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-							className: "block text-xs font-medium text-muted-foreground mb-1",
+							className: "block text-xs font-medium text-text-muted mb-1",
 							children: "Gateway Payment ID"
 						}), /* @__PURE__ */ P("div", {
-							className: "px-3 py-2 border border-border rounded-md bg-muted/30 text-sm font-mono truncate",
+							className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm font-mono truncate",
 							children: _.gatewayPaymentId
 						})] }),
 						_.purchaseType && /* @__PURE__ */ F("div", {
 							className: "grid grid-cols-2 gap-3",
 							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-								className: "block text-xs font-medium text-muted-foreground mb-1",
+								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Purchase Type"
 							}), /* @__PURE__ */ P("div", {
-								className: "px-3 py-2 border border-border rounded-md bg-muted/30 text-sm",
+								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm",
 								children: _.purchaseType
 							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
-								className: "block text-xs font-medium text-muted-foreground mb-1",
+								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Purchase Detail"
 							}), /* @__PURE__ */ P("div", {
-								className: "px-3 py-2 border border-border rounded-md bg-muted/30 text-sm truncate",
+								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm truncate",
 								children: _.purchaseDetail || "—"
 							})] })]
 						}),
@@ -313,7 +313,7 @@ var L = {
 							/* @__PURE__ */ F("label", {
 								className: "block text-sm font-medium mb-1",
 								children: ["Refund Amount *", /* @__PURE__ */ F("span", {
-									className: "text-xs text-muted-foreground ml-1",
+									className: "text-xs text-text-muted ml-1",
 									children: [
 										"(max ",
 										a(w, _.currency),
@@ -331,7 +331,7 @@ var L = {
 									..._,
 									amount: parseFloat(e.target.value) || 0
 								}),
-								className: `w-full px-3 py-2 border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary ${E ? "border-status-error-text" : "border-border"}`,
+								className: `w-full px-3 py-2 border rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${E ? "border-status-error-text" : "border-border-subtle"}`,
 								required: !0
 							}),
 							E && /* @__PURE__ */ F("p", {
@@ -353,7 +353,7 @@ var L = {
 								..._,
 								reason: e.target.value
 							}),
-							className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+							className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							placeholder: "Reason for refund"
 						})] }),
 						/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
@@ -365,7 +365,7 @@ var L = {
 								..._,
 								notes: e.target.value
 							}),
-							className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary resize-none",
+							className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none",
 							rows: 2,
 							placeholder: "Internal notes"
 						})] })
@@ -375,12 +375,12 @@ var L = {
 						children: [/* @__PURE__ */ P("button", {
 							type: "button",
 							onClick: x,
-							className: "flex-1 py-2 px-4 border border-border rounded-md hover:bg-muted/50 transition-colors",
+							className: "flex-1 py-2 px-4 border border-border-subtle rounded-md hover:bg-bg-sunken/50 transition-colors",
 							children: "Cancel"
 						}), /* @__PURE__ */ F("button", {
 							type: "submit",
 							disabled: r || !c || !_.gatewayPaymentId || _.amount <= 0 || E,
-							className: "flex-1 py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",
+							className: "flex-1 py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",
 							children: [r && /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }), "Create Refund"]
 						})]
 					})
@@ -388,24 +388,24 @@ var L = {
 			})]
 		})]
 	});
-}, oe = ({ isOpen: e, record: t, onClose: r, onSubmit: i, isSubmitting: o }) => {
+}, oe = ({ isOpen: e, record: t, onClose: n, onSubmit: i, isSubmitting: o }) => {
 	let [s, c] = h("");
 	return !e || !t ? null : /* @__PURE__ */ F("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
 		children: [/* @__PURE__ */ P("div", {
 			className: "absolute inset-0 bg-overlay-scrim",
-			onClick: r
+			onClick: n
 		}), /* @__PURE__ */ F("div", {
-			className: "relative bg-background border border-border rounded-lg shadow-xl max-w-md w-full mx-4",
+			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-md w-full mx-4",
 			children: [/* @__PURE__ */ F("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__ */ P("h2", {
 					className: "text-lg font-semibold",
 					children: "Skip Refund"
 				}), /* @__PURE__ */ P("button", {
 					type: "button",
-					onClick: r,
-					className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
+					onClick: n,
+					className: "p-1 rounded-md hover:bg-bg-sunken/50 transition-colors",
 					children: /* @__PURE__ */ P(j, { className: "size-5" })
 				})]
 			}), /* @__PURE__ */ F("form", {
@@ -415,14 +415,14 @@ var L = {
 				className: "p-4 space-y-4",
 				children: [
 					/* @__PURE__ */ P("div", {
-						className: `p-3 ${n.warning.bg} border ${n.warning.border} rounded-md`,
+						className: `p-3 ${r.warning.bg} border ${r.warning.border} rounded-md`,
 						children: /* @__PURE__ */ F("div", {
 							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ P(g, { className: `size-5 ${n.warning.icon} mt-0.5` }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: `text-sm font-medium ${n.warning.text}`,
+							children: [/* @__PURE__ */ P(g, { className: `size-5 ${r.warning.icon} mt-0.5` }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+								className: `text-sm font-medium ${r.warning.text}`,
 								children: "You are about to skip this refund"
 							}), /* @__PURE__ */ F("p", {
-								className: `text-sm ${n.warning.text} mt-1`,
+								className: `text-sm ${r.warning.text} mt-1`,
 								children: ["Amount: ", a(t.amount, t.currency)]
 							})] })]
 						})
@@ -433,7 +433,7 @@ var L = {
 					}), /* @__PURE__ */ P("textarea", {
 						value: s,
 						onChange: (e) => c(e.target.value),
-						className: "w-full px-3 py-2 border border-border rounded-md bg-background resize-none",
+						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface resize-none",
 						rows: 3,
 						placeholder: "Explain why this refund is being skipped...",
 						required: !0
@@ -442,13 +442,13 @@ var L = {
 						className: "flex gap-2",
 						children: [/* @__PURE__ */ P("button", {
 							type: "button",
-							onClick: r,
-							className: "flex-1 py-2 px-4 border border-border rounded-md hover:bg-muted/50 transition-colors",
+							onClick: n,
+							className: "flex-1 py-2 px-4 border border-border-subtle rounded-md hover:bg-bg-sunken/50 transition-colors",
 							children: "Cancel"
 						}), /* @__PURE__ */ F("button", {
 							type: "submit",
 							disabled: o || !s.trim(),
-							className: `flex-1 py-2 px-4 ${n.warning.dot} text-primary-foreground rounded-md hover:opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`,
+							className: `flex-1 py-2 px-4 ${r.warning.dot} text-action-primary-text rounded-md hover:opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`,
 							children: [o && /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }), "Skip Refund"]
 						})]
 					})
@@ -458,24 +458,24 @@ var L = {
 	});
 }, se = ({ record: e, onClose: t }) => {
 	if (!e) return null;
-	let r = L[e.status].icon;
+	let n = L[e.status].icon;
 	return /* @__PURE__ */ F("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
 		children: [/* @__PURE__ */ P("div", {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: t
 		}), /* @__PURE__ */ F("div", {
-			className: "relative bg-background border border-border rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
+			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
 			children: [
 				/* @__PURE__ */ F("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__ */ P("h2", {
 						className: "text-lg font-semibold",
 						children: "Refund Details"
 					}), /* @__PURE__ */ P("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",
 						children: /* @__PURE__ */ P(j, { className: "size-5" })
 					})]
 				}),
@@ -484,7 +484,7 @@ var L = {
 					children: [
 						/* @__PURE__ */ F("div", {
 							className: `flex items-center gap-2 p-3 rounded-md ${z(L[e.status].color)}`,
-							children: [/* @__PURE__ */ P(r, { className: "size-5" }), /* @__PURE__ */ P("span", {
+							children: [/* @__PURE__ */ P(n, { className: "size-5" }), /* @__PURE__ */ P("span", {
 								className: "font-medium",
 								children: L[e.status].label
 							})]
@@ -492,13 +492,13 @@ var L = {
 						/* @__PURE__ */ F("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Refund ID"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm font-mono break-all",
 								children: e.id
 							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Source"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm",
@@ -508,13 +508,13 @@ var L = {
 						/* @__PURE__ */ F("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Amount"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-lg font-semibold",
 								children: a(e.amount, e.currency)
 							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Provider"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm capitalize",
@@ -524,13 +524,13 @@ var L = {
 						/* @__PURE__ */ F("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Gateway Payment ID"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm font-mono break-all",
 								children: e.gatewayPaymentId
 							})] }), e.gatewayOrderId && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Gateway Order ID"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm font-mono break-all",
@@ -538,7 +538,7 @@ var L = {
 							})] })]
 						}),
 						e.gatewayRefundId && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-muted mb-1",
 							children: "Gateway Refund ID"
 						}), /* @__PURE__ */ P("p", {
 							className: "text-sm font-mono break-all",
@@ -547,13 +547,13 @@ var L = {
 						(e.purchaseType || e.purchaseDetail) && /* @__PURE__ */ F("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [e.purchaseType && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Purchase Type"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm",
 								children: e.purchaseType
 							})] }), e.purchaseDetail && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Purchase Detail"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm",
@@ -561,39 +561,39 @@ var L = {
 							})] })]
 						}),
 						e.reason && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-muted mb-1",
 							children: "Reason"
 						}), /* @__PURE__ */ P("p", {
 							className: "text-sm",
 							children: e.reason
 						})] }),
 						e.notes && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-muted mb-1",
 							children: "Notes"
 						}), /* @__PURE__ */ P("p", {
 							className: "text-sm",
 							children: e.notes
 						})] }),
 						e.errorMessage && /* @__PURE__ */ F("div", {
-							className: `p-3 ${n.error.bg} border ${n.error.border} rounded-md`,
+							className: `p-3 ${r.error.bg} border ${r.error.border} rounded-md`,
 							children: [/* @__PURE__ */ P("p", {
-								className: `text-xs ${n.error.text} mb-1`,
+								className: `text-xs ${r.error.text} mb-1`,
 								children: "Error Message"
 							}), /* @__PURE__ */ P("p", {
-								className: `text-sm ${n.error.text}`,
+								className: `text-sm ${r.error.text}`,
 								children: e.errorMessage
 							})]
 						}),
 						/* @__PURE__ */ F("div", {
-							className: "grid grid-cols-2 gap-4 pt-2 border-t border-border",
+							className: "grid grid-cols-2 gap-4 pt-2 border-t border-border-subtle",
 							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Created At"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm",
 								children: o(e.createdAt)
 							})] }), e.processedAt && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-								className: "text-xs text-muted-foreground mb-1",
+								className: "text-xs text-text-muted mb-1",
 								children: "Processed At"
 							}), /* @__PURE__ */ P("p", {
 								className: "text-sm",
@@ -601,7 +601,7 @@ var L = {
 							})] })]
 						}),
 						e.retryCount > 0 && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
-							className: "text-xs text-muted-foreground mb-1",
+							className: "text-xs text-text-muted mb-1",
 							children: "Retry Count"
 						}), /* @__PURE__ */ P("p", {
 							className: "text-sm",
@@ -610,11 +610,11 @@ var L = {
 					]
 				}),
 				/* @__PURE__ */ P("div", {
-					className: "p-4 border-t border-border",
+					className: "p-4 border-t border-border-subtle",
 					children: /* @__PURE__ */ P("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-bgHover transition-colors",
 						children: "Close"
 					})
 				})
@@ -717,7 +717,7 @@ var L = {
 	return le ? /* @__PURE__ */ F("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ P("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }),
+			/* @__PURE__ */ P("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }),
 			/* @__PURE__ */ P("div", {
 				className: "grid grid-cols-5 gap-4",
 				children: [
@@ -726,7 +726,7 @@ var L = {
 					3,
 					4,
 					5
-				].map((e) => /* @__PURE__ */ P("div", { className: "h-24 bg-muted animate-pulse rounded-lg" }, e))
+				].map((e) => /* @__PURE__ */ P("div", { className: "h-24 bg-bg-sunken animate-pulse rounded-lg" }, e))
 			}),
 			/* @__PURE__ */ P("div", {
 				className: "space-y-2",
@@ -736,7 +736,7 @@ var L = {
 					3,
 					4,
 					5
-				].map((e) => /* @__PURE__ */ P("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
+				].map((e) => /* @__PURE__ */ P("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 			})
 		]
 	}) : /* @__PURE__ */ F("div", {
@@ -752,7 +752,7 @@ var L = {
 							type: "button",
 							onClick: we,
 							disabled: Q,
-							className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border ${n.warning.border} ${n.warning.bg} ${n.warning.text} hover:opacity-90 transition-colors disabled:opacity-50`,
+							className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border ${r.warning.border} ${r.warning.bg} ${r.warning.text} hover:opacity-90 transition-colors disabled:opacity-50`,
 							children: [
 								Q ? /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }) : /* @__PURE__ */ P(S, { className: "size-4" }),
 								"Import ",
@@ -763,20 +763,20 @@ var L = {
 						/* @__PURE__ */ F("button", {
 							type: "button",
 							onClick: () => X(),
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 transition-colors",
+							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 transition-colors",
 							children: [/* @__PURE__ */ P(D, { className: "size-4" }), "Refresh"]
 						}),
 						/* @__PURE__ */ F("button", {
 							type: "button",
 							onClick: () => N(!0),
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-button bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover transition-colors",
 							children: [/* @__PURE__ */ P(te, { className: "size-4" }), "Create Manual Refund"]
 						})
 					]
 				})
 			}),
 			/* @__PURE__ */ P("div", {
-				className: "border-b border-border",
+				className: "border-b border-border-subtle",
 				children: /* @__PURE__ */ P("div", {
 					className: "flex flex-wrap gap-2 sm:gap-0",
 					children: Object.keys(V).map((e) => {
@@ -784,9 +784,9 @@ var L = {
 						return /* @__PURE__ */ F("button", {
 							type: "button",
 							onClick: () => ye(e),
-							className: `flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${t ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"}`,
+							className: `flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${t ? "border-action-primary-bg text-text-link" : "border-transparent text-text-muted hover:text-text-primary hover:border-border-subtle"}`,
 							children: [V[e].label, K && /* @__PURE__ */ P("span", {
-								className: `px-2 py-0.5 text-xs rounded-full ${t ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"}`,
+								className: `px-2 py-0.5 text-xs rounded-full ${t ? "bg-[var(--color-accent-soft)] text-text-link" : "bg-bg-sunken text-text-muted"}`,
 								children: n
 							})]
 						}, e);
@@ -798,23 +798,23 @@ var L = {
 				children: [
 					/* @__PURE__ */ F("div", {
 						className: "relative flex-1",
-						children: [/* @__PURE__ */ P(k, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }), /* @__PURE__ */ P("input", {
+						children: [/* @__PURE__ */ P(k, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-muted" }), /* @__PURE__ */ P("input", {
 							type: "text",
 							placeholder: "Search by payment ID, order ID, or reason...",
 							value: _,
 							onChange: (e) => v(e.target.value),
-							className: "w-full pl-[3.25rem] pr-4 py-2 border border-border rounded-md bg-background"
+							className: "w-full pl-[3.25rem] pr-4 py-2 border border-border-subtle rounded-md bg-bg-surface"
 						})]
 					}),
 					/* @__PURE__ */ F("button", {
 						type: "button",
 						onClick: () => ee(!E),
-						className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${E ? "border-primary bg-primary/10 text-primary" : "border-border bg-background hover:bg-muted/50"}`,
+						className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${E ? "border-action-primary-bg bg-[var(--color-accent-soft)] text-text-link" : "border-border-subtle bg-bg-surface hover:bg-bg-sunken/50"}`,
 						children: [
 							/* @__PURE__ */ P(w, { className: "size-4" }),
 							"Filters",
 							Object.values(x).filter(Boolean).length > 0 && /* @__PURE__ */ P("span", {
-								className: "px-1.5 py-0.5 text-xs rounded-full bg-primary text-primary-foreground",
+								className: "px-1.5 py-0.5 text-xs rounded-full bg-action-primary-bg text-action-primary-text",
 								children: Object.values(x).filter(Boolean).length
 							})
 						]
@@ -824,13 +824,13 @@ var L = {
 						onClick: () => {
 							C({}), Z({});
 						},
-						className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md text-muted-foreground hover:text-foreground transition-colors",
+						className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md text-text-muted hover:text-text-primary transition-colors",
 						children: [/* @__PURE__ */ P(j, { className: "size-4" }), "Clear"]
 					})
 				]
 			}),
 			E && /* @__PURE__ */ F("div", {
-				className: "p-4 border border-border rounded-lg bg-muted/30 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+				className: "p-4 border border-border-subtle rounded-lg bg-bg-sunken/30 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
 				children: [
 					/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
 						className: "block text-sm font-medium mb-1",
@@ -838,7 +838,7 @@ var L = {
 					}), /* @__PURE__ */ F("select", {
 						value: x.source || "",
 						onChange: (e) => $("source", e.target.value),
-						className: "w-full px-3 py-2 border border-border rounded-md bg-background",
+						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface",
 						children: [/* @__PURE__ */ P("option", {
 							value: "",
 							children: "All Sources"
@@ -853,7 +853,7 @@ var L = {
 					}), /* @__PURE__ */ F("select", {
 						value: x.provider || "",
 						onChange: (e) => $("provider", e.target.value),
-						className: "w-full px-3 py-2 border border-border rounded-md bg-background",
+						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface",
 						children: [/* @__PURE__ */ P("option", {
 							value: "",
 							children: "All Providers"
@@ -874,79 +874,79 @@ var L = {
 									type: "date",
 									value: x.fromDate ? x.fromDate.split("T")[0] : "",
 									onChange: (e) => $("fromDate", e.target.value ? new Date(e.target.value).toISOString() : void 0),
-									className: "w-full sm:flex-1 p-2 border border-border rounded-md bg-background text-sm"
+									className: "w-full sm:flex-1 p-2 border border-border-subtle rounded-md bg-bg-surface text-sm"
 								}),
 								/* @__PURE__ */ P("span", {
-									className: "text-muted-foreground hidden sm:inline",
+									className: "text-text-muted hidden sm:inline",
 									children: "-"
 								}),
 								/* @__PURE__ */ P("input", {
 									type: "date",
 									value: x.toDate ? x.toDate.split("T")[0] : "",
 									onChange: (e) => $("toDate", e.target.value ? new Date(e.target.value).toISOString() : void 0),
-									className: "w-full sm:flex-1 p-2 border border-border rounded-md bg-background text-sm"
+									className: "w-full sm:flex-1 p-2 border border-border-subtle rounded-md bg-bg-surface text-sm"
 								})
 							]
 						})]
 					})
 				]
 			}),
-			Te.length === 0 ? /* @__PURE__ */ P(r, {
-				icon: /* @__PURE__ */ P(D, { className: "size-6 text-muted-foreground" }),
+			Te.length === 0 ? /* @__PURE__ */ P(n, {
+				icon: /* @__PURE__ */ P(D, { className: "size-6 text-text-muted" }),
 				title: "No refund records found",
 				description: Object.values(x).filter(Boolean).length > 0 ? "Try adjusting your filters." : m === "PENDING" ? "No pending refunds to process." : "Refund records will appear here when created."
 			}) : /* @__PURE__ */ P("div", {
-				className: "border border-border rounded-lg overflow-hidden",
+				className: "border border-border-subtle rounded-lg overflow-hidden",
 				children: /* @__PURE__ */ P("div", {
 					className: "overflow-x-auto",
 					children: /* @__PURE__ */ F("table", {
 						className: "w-full min-w-[400px]",
 						children: [/* @__PURE__ */ P("thead", {
-							className: "bg-muted/50",
+							className: "bg-bg-sunken/50",
 							children: /* @__PURE__ */ F("tr", { children: [
 								/* @__PURE__ */ P("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-muted px-3 py-2 whitespace-nowrap",
 									children: "Date"
 								}),
 								/* @__PURE__ */ P("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-muted px-3 py-2 whitespace-nowrap",
 									children: "Status"
 								}),
 								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap hidden sm:table-cell",
+									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap hidden sm:table-cell",
 									children: "Source"
 								}),
 								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap hidden md:table-cell",
+									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap hidden md:table-cell",
 									children: "Provider"
 								}),
 								/* @__PURE__ */ P("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-muted px-3 py-2 whitespace-nowrap",
 									children: "Payment ID"
 								}),
 								/* @__PURE__ */ P("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-muted px-3 py-2 whitespace-nowrap",
 									children: "Amount"
 								}),
 								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap hidden lg:table-cell",
+									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap hidden lg:table-cell",
 									children: "Reason"
 								}),
 								/* @__PURE__ */ P("th", { className: "p-2 w-10" })
 							] })
 						}), /* @__PURE__ */ P("tbody", {
-							className: "divide-y divide-border",
+							className: "divide-y divide-border-subtle",
 							children: Te.map((e) => {
 								let t = L[e.status].icon;
 								return /* @__PURE__ */ F("tr", {
-									className: "hover:bg-muted/30 transition-colors",
+									className: "hover:bg-bg-sunken/30 transition-colors",
 									children: [
 										/* @__PURE__ */ P("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: /* @__PURE__ */ F("div", {
 												className: "flex flex-col",
 												children: [/* @__PURE__ */ P("span", { children: o(e.createdAt).split(" ")[0] }), /* @__PURE__ */ P("span", {
-													className: "text-xs text-muted-foreground",
+													className: "text-xs text-text-muted",
 													children: o(e.createdAt).split(" ")[1]
 												})]
 											})
@@ -962,15 +962,15 @@ var L = {
 											})
 										}),
 										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-muted-foreground whitespace-nowrap hidden sm:table-cell",
+											className: "px-3 py-2 text-sm text-text-muted whitespace-nowrap hidden sm:table-cell",
 											children: R[e.source]
 										}),
 										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-foreground capitalize whitespace-nowrap hidden md:table-cell",
+											className: "px-3 py-2 text-sm text-text-primary capitalize whitespace-nowrap hidden md:table-cell",
 											children: e.provider
 										}),
 										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm font-mono text-muted-foreground whitespace-nowrap max-w-[120px] sm:max-w-[200px] truncate",
+											className: "px-3 py-2 text-sm font-mono text-text-muted whitespace-nowrap max-w-[120px] sm:max-w-[200px] truncate",
 											children: e.gatewayPaymentId
 										}),
 										/* @__PURE__ */ P("td", {
@@ -978,7 +978,7 @@ var L = {
 											children: a(e.amount, e.currency)
 										}),
 										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-muted-foreground max-w-[200px] truncate hidden lg:table-cell",
+											className: "px-3 py-2 text-sm text-text-muted max-w-[200px] truncate hidden lg:table-cell",
 											children: e.reason || "-"
 										}),
 										/* @__PURE__ */ P("td", {
@@ -1002,9 +1002,9 @@ var L = {
 				})
 			}),
 			q.totalCount > 0 && /* @__PURE__ */ F("div", {
-				className: "flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-border pt-4",
+				className: "flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-border-subtle pt-4",
 				children: [/* @__PURE__ */ F("p", {
-					className: "text-sm text-muted-foreground text-center sm:text-left",
+					className: "text-sm text-text-muted text-center sm:text-left",
 					children: [
 						"Showing ",
 						q.page * q.pageSize + 1,
@@ -1023,14 +1023,14 @@ var L = {
 							type: "button",
 							onClick: de,
 							disabled: !q.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-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
 							children: [/* @__PURE__ */ P(y, { className: "size-4" }), /* @__PURE__ */ P("span", {
 								className: "hidden sm:inline",
 								children: "Previous"
 							})]
 						}),
 						/* @__PURE__ */ F("span", {
-							className: "text-sm text-muted-foreground px-2",
+							className: "text-sm text-text-muted px-2",
 							children: [
 								/* @__PURE__ */ P("span", {
 									className: "hidden sm:inline",
@@ -1054,7 +1054,7 @@ var L = {
 							type: "button",
 							onClick: ue,
 							disabled: !q.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-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
 							children: [/* @__PURE__ */ P("span", {
 								className: "hidden sm:inline",
 								children: "Next"