@fluid-app/portal-sdk 0.1.300 → 0.1.301

package/dist/{ProfileScreen-BCR3FU5g.cjs → ProfileScreen-CPzuS8kI.cjs}

@@ -36,39 +36,39 @@ function ProfileLayout(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "relative",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "max-w-profile-container relative mx-auto px-5 pt-8 pb-20 md:px-8",
+			className: "relative mx-auto max-w-4xl px-5 pt-8 pb-20 md:px-8",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "flex items-center gap-3.5",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "size-profile-avatar-sm md:size-profile-avatar relative shrink-0 overflow-hidden rounded-full ring-1 ring-black/5",
+							className: "relative size-12 shrink-0 overflow-hidden rounded-full ring-1 ring-black/5 md:size-13",
 							children: account.avatar_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 								src: account.avatar_url,
 								alt: "",
 								className: "h-full w-full object-cover"
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "bg-profile-dark text-profile-dark-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
+								className: "bg-primary text-primary-foreground flex h-full w-full items-center justify-center text-lg font-semibold",
 								children: heroDisplay.charAt(0).toUpperCase()
 							})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-								className: "text-profile-hero tracking-profile-hero text-profile-text md:text-profile-hero-lg truncate font-bold",
+								className: "text-foreground truncate text-xl font-bold tracking-tight md:text-2xl",
 								children: heroDisplay
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-profile-sm-plus text-profile-text-muted mt-0.5 truncate",
+								className: "text-muted-foreground mt-0.5 truncate text-sm",
 								children: account.email
 							})]
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex shrink-0 items-center gap-2",
 							children: rewardsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "ring-profile-border bg-profile-card text-profile-xs-plus text-profile-text inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-semibold ring-1",
+								className: "ring-border text-foreground inline-flex items-center gap-1.5 rounded-md bg-transparent px-2.5 py-1 text-xs font-semibold ring-1",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
-										className: "text-profile-accent size-3",
+										className: "text-primary size-3",
 										strokeWidth: 2.25
 									}),
 									(pointsBalance ?? 0).toLocaleString(),
@@ -88,7 +88,7 @@ function ProfileLayout(props) {
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
 							icon: lucide_react.User,
@@ -127,33 +127,33 @@ function ProfileLayout(props) {
 				rewardsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
 					title: t("points_history"),
 					action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-profile-xs text-profile-text-faint",
+						className: "text-muted-foreground/75 text-xs",
 						children: t("pts_available", { count: String((pointsBalance ?? 0).toLocaleString()) })
 					})
 				}), ledger.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
 					children: [ledgerPreview.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsLedgerRow, {
 						entry,
 						isLast: !hasMoreLedger && i === ledgerPreview.length - 1
 					}, entry.id)), hasMoreLedger && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => setIsPointsHistoryOpen(true),
-						className: "text-profile-xs text-profile-text hover:bg-profile-pill-hover flex w-full items-center justify-center gap-1 px-4 py-3 font-bold transition-colors",
+						className: "text-foreground hover:bg-muted flex w-full items-center justify-center gap-1 px-4 py-3 text-xs font-bold transition-colors",
 						children: t("see_all_transactions", { count: ledger.length })
 					})]
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "ring-dashed ring-profile-dashed-border bg-profile-card mt-2.5 flex flex-col items-center justify-center gap-1 rounded-2xl px-4 py-8 text-center ring-1",
+					className: "ring-dashed ring-border mt-2.5 flex flex-col items-center justify-center gap-1 rounded-2xl bg-transparent px-4 py-8 text-center ring-1",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
-							className: "text-profile-text-faint size-5",
+							className: "text-muted-foreground/75 size-5",
 							strokeWidth: 1.75
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-profile-base text-profile-text font-bold",
+							className: "text-foreground text-sm font-bold",
 							children: t("no_points_yet")
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-profile-xs text-profile-text-muted",
+							className: "text-muted-foreground text-xs",
 							children: t("earn_points_hint")
 						})
 					]
@@ -167,10 +167,10 @@ function ProfileLayout(props) {
 					}) : void 0
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 flex items-center gap-3 rounded-2xl p-3.5 ring-1",
+					className: "ring-border mt-2.5 flex items-center gap-3 rounded-2xl bg-transparent p-3.5 ring-1",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "size-profile-mysite-icon bg-profile-icon-bg text-profile-text flex shrink-0 items-center justify-center rounded-full",
+							className: "bg-muted text-foreground flex size-11 shrink-0 items-center justify-center rounded-full",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link2, {
 								className: "size-[18px]",
 								strokeWidth: 2
@@ -179,10 +179,10 @@ function ProfileLayout(props) {
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-profile-2xs tracking-profile-uppercase-1 text-profile-text-faint font-bold uppercase",
+								className: "text-muted-foreground/75 text-xs font-bold tracking-widest uppercase",
 								children: t("public_link")
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-profile-base text-profile-text mt-0.5 truncate font-mono font-semibold",
+								className: "text-foreground mt-0.5 truncate font-mono text-sm font-semibold",
 								children: mySiteDisplayUrl || t("set_your_mysite_link")
 							})]
 						}),
@@ -190,7 +190,7 @@ function ProfileLayout(props) {
 							type: "button",
 							onClick: onCopyMySiteLink,
 							disabled: !mySiteDisplayUrl,
-							className: "ring-profile-border bg-profile-card text-profile-xs text-profile-text hover:bg-profile-pill-hover inline-flex items-center gap-1 rounded-md px-3 py-1.5 font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
+							className: "ring-border text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md bg-transparent px-3 py-1.5 text-xs font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, {
 								className: "size-3",
 								strokeWidth: 2.25
@@ -210,12 +210,12 @@ function ProfileLayout(props) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionHeader, {
 					title: t("social_media"),
 					action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-profile-xs text-profile-text-faint",
+						className: "text-muted-foreground/75 text-xs",
 						children: t("connected_count", { count: connectedSocialCount })
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "ring-profile-border bg-profile-card mt-2.5 overflow-hidden rounded-2xl ring-1",
+					className: "ring-border mt-2.5 overflow-hidden rounded-2xl bg-transparent ring-1",
 					children: SOCIAL_ENTRIES.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialRow, {
 						entry,
 						handle: socialLinks[entry.key] ?? "",
@@ -229,7 +229,7 @@ function ProfileLayout(props) {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
 						className: "max-w-md md:max-w-lg",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, { children: t("points_history") }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "ring-profile-border bg-profile-card max-h-[60vh] overflow-y-auto rounded-2xl ring-1",
+							className: "ring-border max-h-[60vh] overflow-y-auto rounded-2xl bg-transparent ring-1",
 							children: ledger.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsLedgerRow, {
 								entry,
 								isLast: i === ledger.length - 1
@@ -238,26 +238,26 @@ function ProfileLayout(props) {
 					})
 				}),
 				onSignOut && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "ring-profile-border bg-profile-card mt-8 flex flex-wrap items-center justify-between gap-3 rounded-2xl p-3.5 ring-1",
+					className: "ring-border mt-8 flex flex-wrap items-center justify-between gap-3 rounded-2xl bg-transparent p-3.5 ring-1",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "bg-profile-danger-bg flex size-9 items-center justify-center rounded-md",
+							className: "bg-destructive/10 flex size-9 items-center justify-center rounded-md",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogOut, {
-								className: "text-profile-danger-icon size-4",
+								className: "text-destructive size-4",
 								strokeWidth: 2.25
 							})
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-profile-base text-profile-text font-bold",
+							className: "text-foreground text-sm font-bold",
 							children: t("sign_out")
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-profile-xs-plus text-profile-text-muted",
+							className: "text-muted-foreground text-xs",
 							children: t("sign_out_description")
 						})] })]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: onSignOut,
-						className: "bg-profile-danger-button-bg text-profile-sm text-profile-danger-button-text hover:bg-profile-danger-button-hover rounded-md px-4 py-2 font-bold transition-colors",
+						className: "bg-destructive/15 text-destructive hover:bg-destructive/25 rounded-md px-4 py-2 text-xs font-bold transition-colors",
 						children: t("sign_out")
 					})]
 				})
@@ -269,7 +269,7 @@ function SectionHeader({ title, action }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "mt-8 flex items-end justify-between",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-			className: "text-profile-lg tracking-profile-heading text-profile-text font-bold",
+			className: "text-foreground text-base font-bold tracking-tight",
 			children: title
 		}), action ?? null]
 	});
@@ -279,7 +279,7 @@ function PillButton({ onClick, icon: Icon, label, disabled }) {
 		type: "button",
 		onClick,
 		disabled,
-		className: "ring-profile-border bg-profile-card text-profile-xs text-profile-text hover:bg-profile-pill-hover inline-flex items-center gap-1 rounded-md px-3 py-1.5 font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
+		className: "ring-border text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md bg-transparent px-3 py-1.5 text-xs font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			className: "size-3",
 			strokeWidth: 2.25
@@ -291,33 +291,33 @@ function PointsLedgerRow({ entry, isLast }) {
 	const isCredit = entry.amount >= 0;
 	const sign = isCredit ? "+" : "−";
 	const magnitude = Math.abs(entry.amount).toLocaleString();
-	const amountColor = isCredit ? "text-emerald-600" : "text-profile-danger-icon";
+	const amountColor = isCredit ? "text-emerald-600" : "text-destructive";
 	const sourceName = entry.metadata?.source?.name?.trim();
 	const transactionType = entry.metadata?.transaction_type;
 	const label = sourceName || (transactionType ? transactionType.charAt(0).toUpperCase() + transactionType.slice(1) : isCredit ? t("points_awarded") : t("points_redeemed"));
 	const dateLabel = formatLedgerDate(entry.created_at);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-profile-divider border-b"}`,
+		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-border border-b"}`,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "bg-profile-icon-bg flex size-9 shrink-0 items-center justify-center rounded-full",
+				className: "bg-muted flex size-9 shrink-0 items-center justify-center rounded-full",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sparkles, {
-					className: `size-4 ${isCredit ? "text-profile-accent" : "text-profile-text-muted"}`,
+					className: `size-4 ${isCredit ? "text-primary" : "text-muted-foreground"}`,
 					strokeWidth: 2
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-profile-md text-profile-text truncate font-medium",
+					className: "text-foreground truncate text-sm font-medium",
 					children: label
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-profile-xs text-profile-text-muted",
+					className: "text-muted-foreground text-xs",
 					children: dateLabel
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `text-profile-md shrink-0 font-mono font-bold tabular-nums ${amountColor}`,
+				className: `shrink-0 font-mono text-sm font-bold tabular-nums ${amountColor}`,
 				children: [sign, magnitude]
 			})
 		]
@@ -337,9 +337,9 @@ function formatLedgerDate(iso) {
 function FieldRow({ icon: Icon, label, value, placeholder, isLast, multiline }) {
 	const display = value || placeholder || "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `flex gap-3 px-4 py-3.5 ${multiline ? "items-start" : "items-center"} ${isLast ? "" : "border-profile-divider border-b"}`,
+		className: `flex gap-3 px-4 py-3.5 ${multiline ? "items-start" : "items-center"} ${isLast ? "" : "border-border border-b"}`,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "bg-profile-icon-bg text-profile-text-muted flex size-9 shrink-0 items-center justify-center rounded-full",
+			className: "bg-muted text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 				className: "size-4",
 				strokeWidth: 2
@@ -347,10 +347,10 @@ function FieldRow({ icon: Icon, label, value, placeholder, isLast, multiline })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-profile-2xs tracking-profile-uppercase-1 text-profile-text-faint font-bold uppercase",
+				className: "text-muted-foreground/75 text-xs font-bold tracking-widest uppercase",
 				children: label
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `mt-0.5 ${multiline ? "whitespace-pre-line" : "truncate"} text-profile-md font-medium ${!value && Boolean(placeholder) ? "text-profile-text-placeholder" : "text-profile-text"}`,
+				className: `mt-0.5 ${multiline ? "whitespace-pre-line" : "truncate"} text-sm font-medium ${!value && Boolean(placeholder) ? "text-muted-foreground/55" : "text-foreground"}`,
 				children: display
 			})]
 		})]
@@ -397,13 +397,13 @@ function PaymentCardVisual({ method, onClick }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative flex items-start justify-between",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-profile-micro tracking-profile-uppercase-2 text-background/50 font-semibold uppercase",
+					className: "text-background/50 text-xs font-semibold tracking-widest uppercase",
 					children: brandLabel
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-profile-hero tracking-profile-mono text-background mt-1 font-mono font-bold",
+					className: "text-background mt-1 font-mono text-xl font-bold tracking-wider",
 					children: last4
 				})] }), method.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-profile-micro bg-background/10 text-background/80 rounded-md px-2 py-0.5 font-bold tracking-wider uppercase",
+					className: "bg-background/10 text-background/80 rounded-md px-2 py-0.5 text-xs font-bold tracking-wider uppercase",
 					children: t("default")
 				})]
 			}),
@@ -413,22 +413,22 @@ function PaymentCardVisual({ method, onClick }) {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-profile-nano tracking-profile-uppercase-2 text-background/40 font-semibold uppercase",
+							className: "text-background/40 text-xs font-semibold tracking-widest uppercase",
 							children: t("cardholder")
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-profile-xs-plus text-background truncate font-semibold",
+							className: "text-background truncate text-xs font-semibold",
 							children: holder || " "
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-profile-nano tracking-profile-uppercase-2 text-background/40 font-semibold uppercase",
+						className: "text-background/40 text-xs font-semibold tracking-widest uppercase",
 						children: t("card_expires")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-profile-xs-plus text-background font-mono font-semibold",
+						className: "text-background font-mono text-xs font-semibold",
 						children: exp
 					})] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `text-profile-micro shrink-0 rounded px-1.5 py-0.5 font-bold tracking-wider text-white ${badgeBg}`,
+						className: `shrink-0 rounded px-1.5 py-0.5 text-xs font-bold tracking-wider text-white ${badgeBg}`,
 						children: badge
 					})
 				]
@@ -441,21 +441,21 @@ function AddPaymentTile({ onClick }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		onClick,
-		className: "group ring-dashed ring-profile-dashed-border bg-profile-card text-profile-text-muted hover:bg-profile-canvas hover:text-profile-text flex aspect-[1.586/1] flex-col items-center justify-center gap-1.5 rounded-xl ring-1 transition-colors",
+		className: "group ring-dashed ring-border text-muted-foreground hover:bg-background hover:text-foreground flex aspect-[1.586/1] flex-col items-center justify-center gap-1.5 rounded-xl bg-transparent ring-1 transition-colors",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "ring-profile-border bg-profile-card flex size-9 items-center justify-center rounded-full ring-1",
+				className: "ring-border flex size-9 items-center justify-center rounded-full bg-transparent ring-1",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
 					className: "size-4",
 					strokeWidth: 2.25
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-profile-sm text-profile-text font-bold",
+				className: "text-foreground text-xs font-bold",
 				children: t("add_payment_method")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-profile-2xs-plus text-profile-text-faint",
+				className: "text-muted-foreground/75 text-xs",
 				children: t("accepted_cards")
 			})
 		]
@@ -470,7 +470,7 @@ function AddressCard({ address, onEdit, onDelete }) {
 		address.postal_code
 	].filter(Boolean).join(", ");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "ring-profile-border bg-profile-card hover:bg-profile-pill-hover focus-within:ring-profile-text/40 relative flex flex-col rounded-2xl ring-1 transition-all duration-200 focus-within:ring-2 hover:ring-2",
+		className: "ring-border hover:bg-muted focus-within:ring-foreground/40 relative flex flex-col rounded-2xl bg-transparent ring-1 transition-all duration-200 focus-within:ring-2 hover:ring-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
 			onClick: onEdit,
@@ -480,27 +480,27 @@ function AddressCard({ address, onEdit, onDelete }) {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "bg-profile-icon-bg flex size-8 items-center justify-center rounded-full",
+						className: "bg-muted flex size-8 items-center justify-center rounded-full",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MapPin, {
-							className: "text-profile-text-muted size-4",
+							className: "text-muted-foreground size-4",
 							strokeWidth: 2
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-profile-md text-profile-text font-bold",
+						className: "text-foreground text-sm font-bold",
 						children: label
 					})]
 				}), address.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "bg-profile-dark text-profile-micro text-profile-dark-foreground rounded-md px-2 py-0.5 font-bold tracking-wider uppercase",
+					className: "bg-primary text-primary-foreground rounded-md px-2 py-0.5 text-xs font-bold tracking-wider uppercase",
 					children: t("default")
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "text-profile-sm-plus text-profile-text mt-3 space-y-0.5 leading-snug",
+				className: "text-foreground mt-3 space-y-0.5 text-sm leading-snug",
 				children: [
 					address.address1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: address.address1 }),
 					address.address2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: address.address2 }),
 					cityLine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: cityLine }),
 					address.country_code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-profile-text-muted",
+						className: "text-muted-foreground",
 						children: address.country_code
 					})
 				]
@@ -521,15 +521,15 @@ function AddAddressTile({ onClick }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		onClick,
-		className: "group ring-dashed ring-profile-dashed-border min-h-profile-tile-min-h bg-profile-card text-profile-text-muted hover:bg-profile-canvas hover:text-profile-text flex flex-col items-center justify-center gap-1.5 rounded-2xl ring-1 transition-colors",
+		className: "group ring-dashed ring-border text-muted-foreground hover:bg-background hover:text-foreground flex min-h-37 flex-col items-center justify-center gap-1.5 rounded-2xl bg-transparent ring-1 transition-colors",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "ring-profile-border bg-profile-card flex size-9 items-center justify-center rounded-full ring-1",
+			className: "ring-border flex size-9 items-center justify-center rounded-full bg-transparent ring-1",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {
 				className: "size-4",
 				strokeWidth: 2.25
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "text-profile-base text-profile-text font-bold",
+			className: "text-foreground text-sm font-bold",
 			children: t("add_an_address")
 		})]
 	});
@@ -582,10 +582,10 @@ function SocialRow({ entry, handle, isLast, onConnect }) {
 	const { t } = require_AddressAutocompleteInput.useProfileTranslation();
 	const Icon = entry.icon;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-profile-divider border-b"}`,
+		className: `flex items-center gap-3 px-4 py-3.5 ${isLast ? "" : "border-border border-b"}`,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "bg-profile-icon-bg text-profile-text flex size-9 shrink-0 items-center justify-center rounded-full",
+				className: "bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-full",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 					className: "size-4",
 					strokeWidth: 2
@@ -594,10 +594,10 @@ function SocialRow({ entry, handle, isLast, onConnect }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-profile-base text-profile-text font-bold",
+					className: "text-foreground text-sm font-bold",
 					children: entry.label
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: `text-profile-sm truncate ${handle ? "text-profile-text-muted" : "text-profile-text-placeholder"}`,
+					className: `truncate text-xs ${handle ? "text-muted-foreground" : "text-muted-foreground/55"}`,
 					children: handle || entry.placeholder
 				})]
 			}),
@@ -1265,4 +1265,4 @@ Object.defineProperty(exports, "profileScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ProfileScreen-BCR3FU5g.cjs.map
+//# sourceMappingURL=ProfileScreen-CPzuS8kI.cjs.map