@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

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

@@ -545,33 +545,33 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 		"aria-modal": "true",
 		"aria-labelledby": "modal-title",
 		children: [/* @__PURE__ */ g("div", {
-			className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+			className: "absolute inset-0 bg-bg-overlay backdrop-blur-sm",
 			onClick: E ? void 0 : w,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ _("div", {
 			ref: R,
-			className: "relative w-full max-w-2xl mx-4 bg-card border border-border rounded-lg shadow-xl max-h-[90vh] flex flex-col overflow-hidden",
+			className: "relative w-full max-w-2xl mx-4 bg-bg-surface border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-h-[90vh] flex flex-col overflow-hidden",
 			children: [
 				/* @__PURE__ */ _("header", {
-					className: "flex items-center justify-between p-4 border-b border-border shrink-0",
+					className: "flex items-center justify-between p-4 border-b border-border-subtle shrink-0",
 					children: [/* @__PURE__ */ _("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ g("div", {
-							className: "size-10 rounded-lg bg-primary/10 flex items-center justify-center",
-							children: /* @__PURE__ */ g(o, { className: "size-5 text-primary" })
+							className: "size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
+							children: /* @__PURE__ */ g(o, { className: "size-5 text-text-link" })
 						}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h2", {
 							id: "modal-title",
-							className: "text-lg font-semibold text-foreground",
+							className: "text-lg font-semibold text-text-primary",
 							children: "Create Billing Account"
 						}), /* @__PURE__ */ g("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Set up a new billing account for your organization"
 						})] })]
 					}), /* @__PURE__ */ g("button", {
 						type: "button",
 						onClick: w,
 						disabled: E,
-						className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50",
+						className: "p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50",
 						"aria-label": "Close modal",
 						children: /* @__PURE__ */ g(m, { className: "size-5" })
 					})]
@@ -581,7 +581,7 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 					className: "p-4 space-y-4 overflow-y-auto flex-1",
 					children: [
 						D && /* @__PURE__ */ _("div", {
-							className: "flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/20 text-destructive",
+							className: "flex items-center gap-2 p-3 rounded-lg bg-status-error-bg-subtle border border-status-error-border text-status-error-text",
 							children: [/* @__PURE__ */ g(a, { className: "size-4 flex-shrink-0" }), /* @__PURE__ */ g("p", {
 								className: "text-sm",
 								children: D
@@ -592,31 +592,31 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 							children: [
 								/* @__PURE__ */ _("label", {
 									htmlFor: "name",
-									className: "block text-sm font-medium text-foreground",
+									className: "block text-sm font-medium text-text-primary",
 									children: ["Account Name ", /* @__PURE__ */ g("span", {
-										className: "text-destructive",
+										className: "text-status-error-text",
 										children: "*"
 									})]
 								}),
 								/* @__PURE__ */ _("div", {
 									className: "relative",
-									children: [/* @__PURE__ */ g(o, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+									children: [/* @__PURE__ */ g(o, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary" }), /* @__PURE__ */ g("input", {
 										ref: z,
 										type: "text",
 										id: "name",
 										value: A.name,
 										onChange: (e) => K("name", e.target.value),
 										className: `
-                  w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-background text-foreground
-                  placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                  ${M.name ? "border-destructive" : "border-input"}
+                  w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                  placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                  ${M.name ? "border-status-error-border" : "border-border-default"}
                 `,
 										placeholder: "e.g., Acme Corporation",
 										disabled: E
 									})]
 								}),
 								M.name && /* @__PURE__ */ g("p", {
-									className: "text-sm text-destructive",
+									className: "text-sm text-status-error-text",
 									children: M.name
 								})
 							]
@@ -628,30 +628,30 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 								children: [
 									/* @__PURE__ */ _("label", {
 										htmlFor: "email",
-										className: "block text-sm font-medium text-foreground",
+										className: "block text-sm font-medium text-text-primary",
 										children: ["Email ", /* @__PURE__ */ g("span", {
-											className: "text-destructive",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}),
 									/* @__PURE__ */ _("div", {
 										className: "relative",
-										children: [/* @__PURE__ */ g(d, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+										children: [/* @__PURE__ */ g(d, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary" }), /* @__PURE__ */ g("input", {
 											type: "email",
 											id: "email",
 											value: A.email,
 											onChange: (e) => K("email", e.target.value),
 											className: `
-                    w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-background text-foreground
-                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                    ${M.email ? "border-destructive" : "border-input"}
+                    w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                    placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                    ${M.email ? "border-status-error-border" : "border-border-default"}
                   `,
 											placeholder: "contact@company.com",
 											disabled: E
 										})]
 									}),
 									M.email && /* @__PURE__ */ g("p", {
-										className: "text-sm text-destructive",
+										className: "text-sm text-status-error-text",
 										children: M.email
 									})
 								]
@@ -660,41 +660,41 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 								children: [
 									/* @__PURE__ */ _("label", {
 										htmlFor: "billingEmail",
-										className: "block text-sm font-medium text-foreground",
+										className: "block text-sm font-medium text-text-primary",
 										children: ["Billing Email ", /* @__PURE__ */ g("span", {
-											className: "text-muted-foreground text-xs",
+											className: "text-text-secondary text-xs",
 											children: "(optional)"
 										})]
 									}),
 									/* @__PURE__ */ _("div", {
 										className: "relative",
-										children: [/* @__PURE__ */ g(d, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+										children: [/* @__PURE__ */ g(d, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary" }), /* @__PURE__ */ g("input", {
 											type: "email",
 											id: "billingEmail",
 											value: A.billingEmail || "",
 											onChange: (e) => K("billingEmail", e.target.value),
 											className: `
-                    w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-background text-foreground
-                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                    ${M.billingEmail ? "border-destructive" : "border-input"}
+                    w-full pl-[3.25rem] pr-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                    placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                    ${M.billingEmail ? "border-status-error-border" : "border-border-default"}
                   `,
 											placeholder: "billing@company.com",
 											disabled: E
 										})]
 									}),
 									M.billingEmail && /* @__PURE__ */ g("p", {
-										className: "text-sm text-destructive",
+										className: "text-sm text-status-error-text",
 										children: M.billingEmail
 									})
 								]
 							})]
 						}),
 						/* @__PURE__ */ _("div", {
-							className: "pt-3 border-t border-border",
+							className: "pt-3 border-t border-border-subtle",
 							children: [
 								/* @__PURE__ */ _("h3", {
-									className: "text-sm font-medium text-foreground mb-3 flex items-center gap-2",
-									children: [/* @__PURE__ */ g(f, { className: "size-4 text-muted-foreground" }), "Billing Address"]
+									className: "text-sm font-medium text-text-primary mb-3 flex items-center gap-2",
+									children: [/* @__PURE__ */ g(f, { className: "size-4 text-text-secondary" }), "Billing Address"]
 								}),
 								/* @__PURE__ */ _("div", {
 									className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3",
@@ -703,9 +703,9 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 										children: [
 											/* @__PURE__ */ _("label", {
 												htmlFor: "country",
-												className: "block text-sm font-medium text-foreground",
+												className: "block text-sm font-medium text-text-primary",
 												children: ["Country ", /* @__PURE__ */ g("span", {
-													className: "text-destructive",
+													className: "text-status-error-text",
 													children: "*"
 												})]
 											}),
@@ -714,9 +714,9 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 												value: A.country,
 												onChange: (e) => K("country", e.target.value),
 												className: `
-                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
-                    focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                    ${M.country ? "border-destructive" : "border-input"}
+                    w-full px-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                    focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                    ${M.country ? "border-status-error-border" : "border-border-default"}
                   `,
 												disabled: E,
 												children: [/* @__PURE__ */ g("option", {
@@ -728,7 +728,7 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 												}, e.code))]
 											}),
 											M.country && /* @__PURE__ */ g("p", {
-												className: "text-sm text-destructive",
+												className: "text-sm text-status-error-text",
 												children: M.country
 											})
 										]
@@ -737,9 +737,9 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 										children: [
 											/* @__PURE__ */ _("label", {
 												htmlFor: "line1",
-												className: "block text-sm font-medium text-foreground",
+												className: "block text-sm font-medium text-text-primary",
 												children: ["Address Line 1 ", /* @__PURE__ */ g("span", {
-													className: "text-destructive",
+													className: "text-status-error-text",
 													children: "*"
 												})]
 											}),
@@ -749,15 +749,15 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 												value: A.line1,
 												onChange: (e) => K("line1", e.target.value),
 												className: `
-                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
-                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                    ${M.line1 ? "border-destructive" : "border-input"}
+                    w-full px-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                    placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                    ${M.line1 ? "border-status-error-border" : "border-border-default"}
                   `,
 												placeholder: "Street address, P.O. box",
 												disabled: E
 											}),
 											M.line1 && /* @__PURE__ */ g("p", {
-												className: "text-sm text-destructive",
+												className: "text-sm text-status-error-text",
 												children: M.line1
 											})
 										]
@@ -767,9 +767,9 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 									className: "space-y-1.5 mb-3",
 									children: [/* @__PURE__ */ _("label", {
 										htmlFor: "line2",
-										className: "block text-sm font-medium text-foreground",
+										className: "block text-sm font-medium text-text-primary",
 										children: ["Address Line 2 ", /* @__PURE__ */ g("span", {
-											className: "text-muted-foreground text-xs",
+											className: "text-text-secondary text-xs",
 											children: "(optional)"
 										})]
 									}), /* @__PURE__ */ g("input", {
@@ -777,7 +777,7 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 										id: "line2",
 										value: A.line2,
 										onChange: (e) => K("line2", e.target.value),
-										className: "w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
+										className: "w-full px-3 py-2 border border-border-default rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong",
 										placeholder: "Apartment, suite, unit, building, floor",
 										disabled: E
 									})]
@@ -790,9 +790,9 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 											children: [
 												/* @__PURE__ */ _("label", {
 													htmlFor: "city",
-													className: "block text-sm font-medium text-foreground",
+													className: "block text-sm font-medium text-text-primary",
 													children: ["City ", /* @__PURE__ */ g("span", {
-														className: "text-destructive",
+														className: "text-status-error-text",
 														children: "*"
 													})]
 												}),
@@ -802,15 +802,15 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 													value: A.city,
 													onChange: (e) => K("city", e.target.value),
 													className: `
-                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
-                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                    ${M.city ? "border-destructive" : "border-input"}
+                    w-full px-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                    placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                    ${M.city ? "border-status-error-border" : "border-border-default"}
                   `,
 													placeholder: "City",
 													disabled: E
 												}),
 												M.city && /* @__PURE__ */ g("p", {
-													className: "text-sm text-destructive",
+													className: "text-sm text-status-error-text",
 													children: M.city
 												})
 											]
@@ -820,20 +820,24 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 											children: [
 												/* @__PURE__ */ _("label", {
 													htmlFor: "state",
-													className: "block text-sm font-medium text-foreground",
-													children: ["State ", A.country === "IN" && /* @__PURE__ */ g("span", {
-														className: "text-destructive",
-														children: "*"
-													})]
+													className: "block text-sm font-medium text-text-primary",
+													children: [
+														"State",
+														" ",
+														A.country === "IN" && /* @__PURE__ */ g("span", {
+															className: "text-status-error-text",
+															children: "*"
+														})
+													]
 												}),
 												A.country === "IN" ? /* @__PURE__ */ _("select", {
 													id: "state",
 													value: A.state,
 													onChange: (e) => K("state", e.target.value),
 													className: `
-                      w-full px-3 py-2 border rounded-lg bg-background text-foreground
-                      focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                      ${M.state ? "border-destructive" : "border-input"}
+                      w-full px-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                      focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                      ${M.state ? "border-status-error-border" : "border-border-default"}
                     `,
 													disabled: E,
 													children: [/* @__PURE__ */ g("option", {
@@ -848,12 +852,12 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 													id: "state",
 													value: A.state,
 													onChange: (e) => K("state", e.target.value),
-													className: "w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
+													className: "w-full px-3 py-2 border border-border-default rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong",
 													placeholder: "State/Province",
 													disabled: E
 												}),
 												M.state && /* @__PURE__ */ g("p", {
-													className: "text-sm text-destructive",
+													className: "text-sm text-status-error-text",
 													children: M.state
 												})
 											]
@@ -863,9 +867,9 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 											children: [
 												/* @__PURE__ */ _("label", {
 													htmlFor: "postalCode",
-													className: "block text-sm font-medium text-foreground",
+													className: "block text-sm font-medium text-text-primary",
 													children: ["Postal Code ", /* @__PURE__ */ g("span", {
-														className: "text-destructive",
+														className: "text-status-error-text",
 														children: "*"
 													})]
 												}),
@@ -875,15 +879,15 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 													value: A.postalCode,
 													onChange: (e) => K("postalCode", e.target.value),
 													className: `
-                    w-full px-3 py-2 border rounded-lg bg-background text-foreground
-                    placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary
-                    ${M.postalCode ? "border-destructive" : "border-input"}
+                    w-full px-3 py-2 border rounded-lg bg-bg-surface text-text-primary
+                    placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong
+                    ${M.postalCode ? "border-status-error-border" : "border-border-default"}
                   `,
 													placeholder: A.country === "IN" ? "600001" : "ZIP/Postal code",
 													disabled: E
 												}),
 												M.postalCode && /* @__PURE__ */ g("p", {
-													className: "text-sm text-destructive",
+													className: "text-sm text-status-error-text",
 													children: M.postalCode
 												})
 											]
@@ -893,11 +897,11 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 							]
 						}),
 						/* @__PURE__ */ _("div", {
-							className: "grid grid-cols-1 sm:grid-cols-2 gap-4 pt-3 border-t border-border",
+							className: "grid grid-cols-1 sm:grid-cols-2 gap-4 pt-3 border-t border-border-subtle",
 							children: [/* @__PURE__ */ _("div", {
 								className: "space-y-1.5",
 								children: [/* @__PURE__ */ g("label", {
-									className: "block text-sm font-medium text-foreground",
+									className: "block text-sm font-medium text-text-primary",
 									children: k("billing.overview.currency", "Currency")
 								}), /* @__PURE__ */ _("div", {
 									className: "relative",
@@ -910,7 +914,7 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
                   w-full flex items-center justify-between gap-2 px-3 py-2 rounded-lg border
                   transition-all duration-200 text-left
                   disabled:opacity-50 disabled:cursor-not-allowed
-                  ${P ? "border-primary ring-1 ring-primary" : "border-input hover:border-primary/50"}
+                  ${P ? "border-border-strong ring-1 ring-[var(--color-focus-ring)]" : "border-border-default hover:border-border-strong"}
                 `,
 										children: [/* @__PURE__ */ _("div", {
 											className: "flex items-center gap-2",
@@ -920,11 +924,11 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 													children: S(U.flag)
 												}),
 												/* @__PURE__ */ g("span", {
-													className: "font-medium text-foreground",
+													className: "font-medium text-text-primary",
 													children: U.code
 												}),
 												/* @__PURE__ */ _("span", {
-													className: "text-sm text-muted-foreground",
+													className: "text-sm text-text-secondary",
 													children: [
 														U.symbol,
 														" · ",
@@ -932,14 +936,14 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 													]
 												})
 											]
-										}), /* @__PURE__ */ g(c, { className: `size-4 text-muted-foreground transition-transform ${P ? "rotate-180" : ""}` })]
+										}), /* @__PURE__ */ g(c, { className: `size-4 text-text-secondary transition-transform ${P ? "rotate-180" : ""}` })]
 									}), P && /* @__PURE__ */ _("div", {
-										className: "absolute z-50 w-full bottom-full mb-1 bg-popover border border-border rounded-lg shadow-lg overflow-hidden",
+										className: "absolute z-50 w-full bottom-full mb-1 bg-bg-elevated border border-border-subtle rounded-card shadow-elevation-3 overflow-hidden",
 										onMouseDown: (e) => e.stopPropagation(),
 										children: [/* @__PURE__ */ g("div", {
 											className: "max-h-48 overflow-y-auto",
 											children: H.length === 0 ? /* @__PURE__ */ g("div", {
-												className: "px-3 py-4 text-sm text-muted-foreground text-center",
+												className: "px-3 py-4 text-sm text-text-secondary text-center",
 												children: "No currencies found"
 											}) : H.map((e) => {
 												let t = e.code === A.currency;
@@ -951,7 +955,7 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 													className: `
                               w-full flex items-center gap-3 px-3 py-2 text-left
                               transition-colors
-                              ${t ? "bg-primary/10 text-foreground" : "hover:bg-muted/50 text-foreground"}
+                              ${t ? "bg-[var(--color-accent-soft)] text-text-primary" : "hover:bg-bg-sunken text-text-primary"}
                             `,
 													children: [
 														/* @__PURE__ */ g("span", {
@@ -966,30 +970,30 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 																	className: "font-medium",
 																	children: e.code
 																}), /* @__PURE__ */ g("span", {
-																	className: "text-xs text-muted-foreground",
+																	className: "text-xs text-text-secondary",
 																	children: e.symbol
 																})]
 															}), /* @__PURE__ */ g("p", {
-																className: "text-xs text-muted-foreground truncate",
+																className: "text-xs text-text-secondary truncate",
 																children: e.name
 															})]
 														}),
-														t && /* @__PURE__ */ g(s, { className: "size-4 text-primary shrink-0" })
+														t && /* @__PURE__ */ g(s, { className: "size-4 text-text-link shrink-0" })
 													]
 												}, e.code);
 											})
 										}), /* @__PURE__ */ g("div", {
-											className: "p-2 border-t border-border",
+											className: "p-2 border-t border-border-subtle",
 											children: /* @__PURE__ */ _("div", {
 												className: "relative",
-												children: [/* @__PURE__ */ g(p, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+												children: [/* @__PURE__ */ g(p, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-text-secondary" }), /* @__PURE__ */ g("input", {
 													ref: V,
 													type: "text",
 													placeholder: "Search currency...",
 													value: I,
 													onChange: (e) => L(e.target.value),
 													onMouseDown: (e) => e.stopPropagation(),
-													className: "w-full pl-8 pr-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
+													className: "w-full pl-8 pr-3 py-2 text-sm bg-bg-surface border border-border-subtle rounded-button focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)]"
 												})]
 											})
 										})]
@@ -999,23 +1003,19 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 								className: "space-y-1.5",
 								children: [/* @__PURE__ */ _("label", {
 									htmlFor: "taxId",
-									className: "block text-sm font-medium text-foreground",
-									children: [
-										"Tax ID / VAT Number",
-										" ",
-										/* @__PURE__ */ g("span", {
-											className: "text-muted-foreground text-xs",
-											children: "(optional)"
-										})
-									]
+									className: "block text-sm font-medium text-text-primary",
+									children: ["Tax ID / VAT Number ", /* @__PURE__ */ g("span", {
+										className: "text-text-secondary text-xs",
+										children: "(optional)"
+									})]
 								}), /* @__PURE__ */ _("div", {
 									className: "relative",
-									children: [/* @__PURE__ */ g(l, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }), /* @__PURE__ */ g("input", {
+									children: [/* @__PURE__ */ g(l, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary" }), /* @__PURE__ */ g("input", {
 										type: "text",
 										id: "taxId",
 										value: A.taxId || "",
 										onChange: (e) => K("taxId", e.target.value),
-										className: "w-full pl-[3.25rem] pr-3 py-2 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
+										className: "w-full pl-[3.25rem] pr-3 py-2 border border-border-default rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-border-strong",
 										placeholder: A.country === "IN" ? "e.g., 22AAAAA0000A1Z5" : "Tax ID / VAT Number",
 										disabled: E
 									})]
@@ -1025,18 +1025,18 @@ var C = ({ isOpen: C, onClose: w, onSubmit: T, isSubmitting: E = !1, error: D =
 					]
 				}),
 				/* @__PURE__ */ _("footer", {
-					className: "flex items-center justify-end gap-3 p-4 border-t border-border bg-muted/30 rounded-b-lg shrink-0",
+					className: "flex items-center justify-end gap-3 p-4 border-t border-border-subtle bg-bg-sunken rounded-b-card shrink-0",
 					children: [/* @__PURE__ */ g("button", {
 						type: "button",
 						onClick: w,
 						disabled: E,
-						className: "px-4 py-2 text-sm font-medium text-foreground border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-50",
+						className: "px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken hover:border-border-strong transition-all duration-200 disabled:opacity-50",
 						children: "Cancel"
 					}), /* @__PURE__ */ g("button", {
 						type: "button",
 						onClick: G,
 						disabled: E,
-						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 disabled:opacity-50",
+						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 disabled:opacity-50",
 						children: E ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(u, { className: "size-4 animate-spin" }), "Creating…"] }) : "Create Account"
 					})]
 				})