admin-ui-starter-kit 0.1.3 → 0.4.2

package/dist/components/composed/cards/index.js

@@ -1,17 +1,17 @@
 import { useStrings as e } from "../../../lib/strings.js";
 import { cn as t } from "../../../lib/utils.js";
-import { t as n } from "../../../_shared/text-DIxMTECE.js";
-import { t as r } from "../../../_shared/heading-BprqyzDs.js";
-import { t as i } from "../../../_shared/icon-badge-Bi63T-bj.js";
-import { t as a } from "../../../_shared/badge-BVCh_hfL.js";
-import { t as o } from "../../../_shared/button-ChCkwoOD.js";
-import { t as s } from "../../../_shared/smart-card-MT6JjkoI.js";
-import { P as c, i as l } from "../../../_shared/display-BM_GxDAo.js";
-import { o as u, r as d, t as f } from "../../../_shared/avatar-CpBz9pTv.js";
-import { c as p, i as m, n as h, o as g, r as _, t as v, u as y } from "../../../_shared/item-Cu5JbZyZ.js";
-import { useState as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { ArrowRight as w, Calendar as T, Check as E, ChevronRight as D, Copy as O, ExternalLink as k, Eye as A, Gift as j, Mail as M, MapPin as N, MessageSquare as ee, Phone as P, Sparkles as F, User as I } from "lucide-react";
+import { n, t as r } from "../../../_shared/heading-HeP06nXG.js";
+import { t as i } from "../../../_shared/icon-badge-zTBVtgt9.js";
+import { t as a } from "../../../_shared/badge-yGlx9trX.js";
+import { t as o } from "../../../_shared/button-SuocMQFT.js";
+import { t as s } from "../../../_shared/smart-card-DYZGY_Su.js";
+import { O as c, i as l } from "../../../_shared/display-C4n0uuxl.js";
+import { o as u, r as d, t as f } from "../../../_shared/avatar-CBi4LGxy.js";
+import { t as p } from "../../../_shared/metadata-qTNAOM7E.js";
+import { c as m, i as h, n as g, o as _, r as v, t as y, u as b } from "../../../_shared/item-DAjqQhhj.js";
+import { useId as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { ArrowRight as E, Check as D, ChevronRight as O, Copy as k, ExternalLink as A, Eye as j, Gift as M, Mail as N, MapPin as P, MessageSquare as ee, Phone as F, Sparkles as I } from "lucide-react";
 //#region src/components/composed/cards/contact-card/types.ts
 var L = {
 	contact: "Contact",
@@ -22,97 +22,97 @@ var L = {
 function te(e, t) {
 	return t || e.split(" ").map((e) => e[0]).slice(0, 2).join("").toUpperCase();
 }
-function R({ name: i, role: s, email: c, phone: l, location: m, avatarUrl: h, initials: b, badge: x, badgeVariant: w = "success", onContact: T, onViewProfile: E, className: D, strings: O }) {
-	let A = e(L, O);
-	return /* @__PURE__ */ C("div", {
-		className: t("contact-card--component", "overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm p-6 sm:p-7", D),
+function R({ name: r, role: i, email: s, phone: c, location: l, avatarUrl: p, initials: h, badge: g, badgeVariant: x = "success", onContact: S, onViewProfile: C, className: E, strings: D }) {
+	let O = e(L, D);
+	return /* @__PURE__ */ T("div", {
+		className: t("contact-card--component", "overflow-hidden rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm sm:p-5", E),
 		children: [
-			/* @__PURE__ */ C("div", {
-				className: "flex items-start gap-4",
-				children: [/* @__PURE__ */ C(f, {
-					className: "h-16 w-16 shrink-0 border-2 border-border",
-					children: [!!h && /* @__PURE__ */ S(u, {
-						src: h,
-						alt: i
-					}), /* @__PURE__ */ S(d, {
-						className: "text-lg font-bold",
-						children: te(i, b)
+			/* @__PURE__ */ T("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ T(f, {
+					className: "size-12 shrink-0 border border-border",
+					children: [!!p && /* @__PURE__ */ w(u, {
+						src: p,
+						alt: r
+					}), /* @__PURE__ */ w(d, {
+						className: "text-sm font-semibold",
+						children: te(r, h)
 					})]
-				}), /* @__PURE__ */ C("div", {
-					className: "min-w-0 flex-1 pt-0.5",
-					children: [/* @__PURE__ */ C("div", {
-						className: "flex items-center gap-2.5",
-						children: [/* @__PURE__ */ S(r, {
-							tag: "h4",
-							className: "truncate text-lg",
-							children: i
-						}), !!x && /* @__PURE__ */ S(a, {
-							variant: w,
-							children: x
+				}), /* @__PURE__ */ T("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ w(n, {
+							weight: "semibold",
+							className: "truncate",
+							children: r
+						}), !!g && /* @__PURE__ */ w(a, {
+							variant: x,
+							children: g
 						})]
-					}), !!s && /* @__PURE__ */ S(n, {
+					}), !!i && /* @__PURE__ */ w(n, {
+						size: "xs",
 						type: "secondary",
-						className: "mt-1",
-						children: s
+						className: "mt-0.5",
+						children: i
 					})]
 				})]
 			}),
-			!!(c || l || m) && /* @__PURE__ */ C(g, {
-				className: "mt-6 gap-1",
+			!!(s || c || l) && /* @__PURE__ */ T(_, {
+				className: "mt-4 gap-0",
 				children: [
-					!!c && /* @__PURE__ */ C(v, {
+					!!s && /* @__PURE__ */ T(y, {
 						size: "xs",
-						className: "px-0",
-						children: [/* @__PURE__ */ S(p, {
+						className: "px-0 py-1.5",
+						children: [/* @__PURE__ */ w(m, {
 							variant: "icon",
 							className: "text-muted-foreground",
-							children: /* @__PURE__ */ S(M, {})
-						}), /* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(y, {
+							children: /* @__PURE__ */ w(N, {})
+						}), /* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(b, {
 							bold: !1,
-							children: c
+							children: s
 						}) })]
 					}),
-					!!l && /* @__PURE__ */ C(v, {
+					!!c && /* @__PURE__ */ T(y, {
 						size: "xs",
-						className: "px-0",
-						children: [/* @__PURE__ */ S(p, {
+						className: "px-0 py-1.5",
+						children: [/* @__PURE__ */ w(m, {
 							variant: "icon",
 							className: "text-muted-foreground",
-							children: /* @__PURE__ */ S(P, {})
-						}), /* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(y, {
+							children: /* @__PURE__ */ w(F, {})
+						}), /* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(b, {
 							bold: !1,
-							children: l
+							children: c
 						}) })]
 					}),
-					!!m && /* @__PURE__ */ C(v, {
+					!!l && /* @__PURE__ */ T(y, {
 						size: "xs",
-						className: "px-0",
-						children: [/* @__PURE__ */ S(p, {
+						className: "px-0 py-1.5",
+						children: [/* @__PURE__ */ w(m, {
 							variant: "icon",
 							className: "text-muted-foreground",
-							children: /* @__PURE__ */ S(N, {})
-						}), /* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(y, {
+							children: /* @__PURE__ */ w(P, {})
+						}), /* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(b, {
 							bold: !1,
-							children: m
+							children: l
 						}) })]
 					})
 				]
 			}),
-			!!(T || E) && /* @__PURE__ */ C("div", {
-				className: "mt-6 flex items-center gap-2",
-				children: [!!T && /* @__PURE__ */ S(o, {
-					variant: "secondary",
+			!!(S || C) && /* @__PURE__ */ T("div", {
+				className: "mt-4 flex items-center gap-2",
+				children: [!!S && /* @__PURE__ */ w(o, {
+					variant: "primary",
 					buttonStyle: "solid",
-					icon: M,
-					onClick: T,
-					className: "flex-1",
-					children: A.contact
-				}), !!E && /* @__PURE__ */ S(o, {
+					icon: N,
+					onClick: S,
+					children: O.contact
+				}), !!C && /* @__PURE__ */ w(o, {
 					variant: "secondary",
 					buttonStyle: "ghost",
-					icon: k,
-					onClick: E,
-					children: A.profile
+					icon: A,
+					onClick: C,
+					children: O.profile
 				})]
 			})
 		]
@@ -122,115 +122,116 @@ R.displayName = "ContactCard";
 //#endregion
 //#region src/components/composed/cards/gradient-card/gradient-card.tsx
 var z = {
-	coral: "bg-gradient-to-br from-[#e8453c] to-[#f4845f]",
-	ocean: "bg-gradient-to-br from-chart-4 to-[#7c6cf0]",
-	forest: "bg-gradient-to-br from-chart-1 to-[#2d9a5f]",
-	twilight: "bg-gradient-to-br from-[#1e1b4b] to-chart-4",
-	ember: "bg-gradient-to-br from-chart-3 to-chart-2"
+	coral: "bg-gradient-to-br from-destructive to-warning",
+	ocean: "bg-gradient-to-br from-info to-primary",
+	forest: "bg-gradient-to-br from-success to-info",
+	twilight: "bg-gradient-to-br from-foreground to-info",
+	ember: "bg-gradient-to-br from-destructive via-warning to-destructive"
 };
 function ne() {
-	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
-		className: "absolute -right-12 -top-12 h-44 w-44 rounded-full bg-white/[0.06]",
+	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("div", {
+		className: "absolute -right-12 -top-12 h-44 w-44 rounded-full bg-inverse-decoration",
 		"aria-hidden": "true"
-	}), /* @__PURE__ */ S("div", {
-		className: "absolute -bottom-8 -left-8 h-28 w-28 rounded-full bg-white/[0.05]",
+	}), /* @__PURE__ */ w("div", {
+		className: "absolute -bottom-8 -left-8 h-28 w-28 rounded-full bg-inverse-decoration",
 		"aria-hidden": "true"
 	})] });
 }
 function re() {
-	return /* @__PURE__ */ C("svg", {
+	let e = `gradient-card-diag-stripes-${x().replace(/:/g, "")}`;
+	return /* @__PURE__ */ T("svg", {
 		className: "absolute inset-0 h-full w-full opacity-[0.04]",
 		xmlns: "http://www.w3.org/2000/svg",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ S("defs", { children: /* @__PURE__ */ S("pattern", {
-			id: "diag-stripes",
+		children: [/* @__PURE__ */ w("defs", { children: /* @__PURE__ */ w("pattern", {
+			id: e,
 			width: "8",
 			height: "8",
 			patternUnits: "userSpaceOnUse",
 			patternTransform: "rotate(45)",
-			children: /* @__PURE__ */ S("rect", {
+			children: /* @__PURE__ */ w("rect", {
 				width: "2",
 				height: "8",
-				fill: "white"
+				className: "fill-inverse-foreground"
 			})
-		}) }), /* @__PURE__ */ S("rect", {
+		}) }), /* @__PURE__ */ w("rect", {
 			width: "100%",
 			height: "100%",
-			fill: "url(#diag-stripes)"
+			fill: `url(#${e})`
 		})]
 	});
 }
 var B = {
 	none: null,
-	circles: () => /* @__PURE__ */ S(ne, {}),
-	diagonal: () => /* @__PURE__ */ S(re, {})
+	circles: () => /* @__PURE__ */ w(ne, {}),
+	diagonal: () => /* @__PURE__ */ w(re, {})
 };
 function V({ gradient: e = "coral", pattern: i = "none", title: a, subtitle: s, value: c, valueLabel: l, badge: u, icon: d, alertText: f, alertCount: p, action: m, footer: h, children: g, className: _ }) {
 	let v = B[i], y = !!(a || s || d);
-	return /* @__PURE__ */ C("div", {
-		className: t("relative overflow-hidden rounded-2xl", z[e], _),
-		children: [!!v && v(), /* @__PURE__ */ C("div", {
+	return /* @__PURE__ */ T("div", {
+		className: t("gradient-card--component relative overflow-hidden rounded-lg", z[e], _),
+		children: [!!v && v(), /* @__PURE__ */ T("div", {
 			className: "relative flex flex-col gap-5 p-6",
 			children: [
-				!!y && /* @__PURE__ */ C("div", {
+				!!y && /* @__PURE__ */ T("div", {
 					className: "flex items-start justify-between gap-4",
-					children: [/* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ T("div", {
 						className: "min-w-0 flex-1",
-						children: [!!a && /* @__PURE__ */ S(n, {
+						children: [!!a && /* @__PURE__ */ w(n, {
 							weight: "semibold",
-							className: "text-white tracking-tight leading-snug",
+							className: "tracking-tight leading-snug text-inverse-foreground",
 							children: a
-						}), !!s && /* @__PURE__ */ S(n, {
+						}), !!s && /* @__PURE__ */ w(n, {
 							size: "xs",
-							className: "mt-0.5 text-white/70 leading-snug",
+							className: "mt-0.5 leading-snug text-inverse-muted",
 							children: s
 						})]
-					}), !!d && /* @__PURE__ */ S("span", {
+					}), !!d && /* @__PURE__ */ w("span", {
 						"aria-hidden": "true",
-						className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/15 backdrop-blur-sm",
-						children: /* @__PURE__ */ S(d, { className: "size-5" })
+						className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xl bg-inverse-surface text-inverse-foreground ring-1 ring-inverse-border backdrop-blur-sm",
+						children: /* @__PURE__ */ w(d, { className: "size-5" })
 					})]
 				}),
-				!!c && /* @__PURE__ */ C("div", {
+				!!c && /* @__PURE__ */ T("div", {
 					className: "flex flex-col gap-1",
-					children: [/* @__PURE__ */ S(r, {
+					children: [/* @__PURE__ */ w(r, {
 						tag: "h3",
 						align: "left",
-						className: "text-4xl font-bold tabular-nums tracking-tight text-white border-none pb-0 leading-none",
+						className: "text-4xl font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-inverse-foreground",
 						children: c
-					}), (l || u) && /* @__PURE__ */ C("div", {
+					}), (l || u) && /* @__PURE__ */ T("div", {
 						className: "flex flex-wrap items-center justify-between gap-2",
-						children: [!!l && /* @__PURE__ */ S(n, {
+						children: [!!l && /* @__PURE__ */ w(n, {
 							size: "xs",
-							className: "text-white/75 leading-snug",
+							className: "leading-snug text-inverse-muted",
 							children: l
-						}), !!u && /* @__PURE__ */ S("span", {
-							className: "inline-flex items-center rounded-full bg-white/20 px-2.5 py-0.5 text-xxs font-semibold uppercase tracking-wider text-white backdrop-blur-sm",
+						}), !!u && /* @__PURE__ */ w("span", {
+							className: "inline-flex items-center rounded-full bg-inverse-surface-strong px-2.5 py-0.5 text-xxs font-semibold uppercase tracking-wider text-inverse-foreground backdrop-blur-sm",
 							children: u
 						})]
 					})]
 				}),
-				!!f && /* @__PURE__ */ C("div", {
-					className: "flex items-center gap-3 rounded-xl bg-white/10 px-3.5 py-2.5 ring-1 ring-white/10 backdrop-blur-sm",
-					children: [/* @__PURE__ */ S(n, {
-						className: "min-w-0 flex-1 text-white/90 leading-snug",
+				!!f && /* @__PURE__ */ T("div", {
+					className: "flex items-center gap-3 rounded-xl bg-inverse-surface px-3.5 py-2.5 ring-1 ring-inverse-border backdrop-blur-sm",
+					children: [/* @__PURE__ */ w(n, {
+						className: "min-w-0 flex-1 leading-snug text-inverse-foreground",
 						children: f
-					}), !!p && /* @__PURE__ */ S("span", {
-						className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-white/25 px-1.5 text-xs font-bold tabular-nums text-white",
+					}), !!p && /* @__PURE__ */ w("span", {
+						className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-inverse-surface-strong px-1.5 text-xs font-bold tabular-nums text-inverse-foreground",
 						children: p
 					})]
 				}),
-				!!g && /* @__PURE__ */ S("div", { children: g }),
-				(!!m || !!h) && /* @__PURE__ */ C("div", {
+				!!g && /* @__PURE__ */ w("div", { children: g }),
+				(!!m || !!h) && /* @__PURE__ */ T("div", {
 					className: "flex items-center justify-between gap-3 pt-1",
-					children: [m ? /* @__PURE__ */ S(o, {
+					children: [m ? /* @__PURE__ */ w(o, {
 						variant: "dark",
 						onClick: m.onClick,
 						className: "rounded-xl px-4",
 						children: m.label
-					}) : /* @__PURE__ */ S("span", {}), !!h && /* @__PURE__ */ S(n, {
+					}) : /* @__PURE__ */ w("span", {}), !!h && /* @__PURE__ */ w(n, {
 						size: "xs",
-						className: "text-white/70",
+						className: "text-inverse-muted",
 						children: h
 					})]
 				})
@@ -241,32 +242,32 @@ function V({ gradient: e = "coral", pattern: i = "none", title: a, subtitle: s,
 V.displayName = "GradientCard";
 function H({ gradient: e = "coral", pattern: i = "none", title: a, value: o, change: s, subtitle: c, className: l }) {
 	let u = B[i];
-	return /* @__PURE__ */ C("div", {
-		className: t("relative overflow-hidden rounded-2xl", z[e], l),
-		children: [!!u && u(), /* @__PURE__ */ C("div", {
+	return /* @__PURE__ */ T("div", {
+		className: t("gradient-card-compact--component relative overflow-hidden rounded-lg", z[e], l),
+		children: [!!u && u(), /* @__PURE__ */ T("div", {
 			className: "relative flex flex-col gap-1 p-5",
 			children: [
-				!!a && /* @__PURE__ */ S(n, {
+				!!a && /* @__PURE__ */ w(n, {
 					size: "xs",
 					weight: "medium",
-					className: "text-white/80 uppercase tracking-wider",
+					className: "uppercase tracking-wider text-inverse-muted",
 					children: a
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex items-baseline gap-2",
-					children: [!!o && /* @__PURE__ */ S(r, {
+					children: [!!o && /* @__PURE__ */ w(r, {
 						tag: "h4",
 						align: "left",
-						className: "text-2xl font-bold tabular-nums tracking-tight text-white border-none pb-0 leading-none",
+						className: "text-2xl font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-inverse-foreground",
 						children: o
-					}), !!s && /* @__PURE__ */ S("span", {
-						className: "inline-flex items-center rounded-full bg-white/15 px-2 py-0.5 text-xs font-semibold tabular-nums text-white backdrop-blur-sm",
+					}), !!s && /* @__PURE__ */ w("span", {
+						className: "inline-flex items-center rounded-full bg-inverse-surface px-2 py-0.5 text-xs font-semibold tabular-nums text-inverse-foreground backdrop-blur-sm",
 						children: s
 					})]
 				}),
-				!!c && /* @__PURE__ */ S(n, {
+				!!c && /* @__PURE__ */ w(n, {
 					size: "xs",
-					className: "text-white/65 leading-snug",
+					className: "leading-snug text-inverse-subtle",
 					children: c
 				})
 			]
@@ -301,21 +302,21 @@ var U = {
 U.status.active, U.status.redeemed, U.status.expired, U.status.disabled;
 var ie = {
 	purple: {
-		card: "from-violet-600 via-purple-700 to-indigo-800",
-		strip: "from-violet-500 via-purple-600 to-indigo-700"
+		card: "from-primary via-primary/90 to-info",
+		strip: "from-primary via-primary/90 to-info"
 	},
 	green: {
-		card: "from-emerald-600 via-teal-700 to-emerald-800",
-		strip: "from-emerald-500 via-teal-600 to-emerald-700"
+		card: "from-success via-info to-success",
+		strip: "from-success via-info to-success"
 	},
 	warm: {
-		card: "from-orange-500 via-rose-600 to-pink-700",
-		strip: "from-orange-400 via-rose-500 to-pink-600"
+		card: "from-warning via-warning/90 to-destructive",
+		strip: "from-warning via-warning/90 to-destructive"
 	}
 }, ae = {
-	purple: "from-violet-600 to-indigo-800",
-	green: "from-emerald-600 to-teal-800",
-	warm: "from-orange-500 to-rose-700"
+	purple: "from-primary to-info",
+	green: "from-success to-info",
+	warm: "from-warning to-destructive"
 }, oe = {
 	green: {
 		line: "bg-success",
@@ -330,119 +331,125 @@ var ie = {
 		iconBg: "bg-warning/15 text-warning-foreground"
 	}
 }, se = {
-	green: "from-emerald-500 to-teal-600",
-	blue: "from-blue-500 to-indigo-600",
-	amber: "from-amber-500 to-orange-600"
+	green: "from-success to-info",
+	blue: "from-info to-primary",
+	amber: "from-warning to-destructive"
 }, ce = {
-	green: "bg-emerald-500 ring-4 ring-white shadow-lg",
-	blue: "bg-blue-500 ring-4 ring-white shadow-lg",
-	amber: "bg-amber-500 ring-4 ring-white shadow-lg"
+	green: "bg-success ring-4 ring-background shadow-lg",
+	blue: "bg-info ring-4 ring-background shadow-lg",
+	amber: "bg-warning ring-4 ring-background shadow-lg"
 };
 //#endregion
 //#region src/components/composed/cards/giftcard-card/partials/giftcard-full.tsx
-function G({ code: i, amount: a, remainingAmount: s, status: c, recipientName: l, senderName: u, message: d, expiresAt: f, createdAt: p, template: m, onView: h, gradient: g = "purple", pattern: _ = "none", className: v, strings: y }) {
-	let b = e(U, y), w = b.status[c], E = W[c], D = !!s && s !== a, k = D ? s : a;
-	return /* @__PURE__ */ C("div", {
-		className: t("group w-full max-w-sm transition-shadow duration-300 ease-out", "hover:shadow-xl hover:shadow-black/10", v),
-		children: [/* @__PURE__ */ C("div", {
-			className: t("relative overflow-hidden rounded-t-xl bg-gradient-to-br p-6", ie[g].card),
+function G({ code: i, amount: a, remainingAmount: s, status: c, recipientName: l, senderName: u, message: d, expiresAt: f, createdAt: m, template: h, onView: g, gradient: _ = "purple", pattern: v = "none", className: y, strings: b }) {
+	let x = e(U, b), S = x.status[c], E = W[c], D = !!s && s !== a, O = D ? s : a, A = [
+		...l ? [{
+			label: x.to,
+			value: l
+		}] : [],
+		...u ? [{
+			label: x.from,
+			value: u
+		}] : [],
+		...f ? [{
+			label: x.expires,
+			value: f
+		}] : []
+	];
+	return /* @__PURE__ */ T("div", {
+		className: t("giftcard-card--component w-full max-w-sm transition-shadow duration-300 ease-out", "hover:shadow-md hover:shadow-foreground/10", y),
+		children: [/* @__PURE__ */ T("div", {
+			className: t("relative overflow-hidden rounded-t-lg bg-gradient-to-br p-6", ie[_].card),
 			children: [
-				/* @__PURE__ */ S("div", {
-					className: "pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out",
+				v === "circles" && /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("div", {
+					className: "absolute -top-8 -right-8 h-32 w-32 rounded-full bg-inverse-decoration",
 					"aria-hidden": "true"
-				}),
-				_ === "circles" && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
-					className: "absolute -top-8 -right-8 h-32 w-32 rounded-full bg-white/5",
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ S("div", {
-					className: "absolute -bottom-4 -left-4 h-20 w-20 rounded-full bg-white/5",
+				}), /* @__PURE__ */ w("div", {
+					className: "absolute -bottom-4 -left-4 h-20 w-20 rounded-full bg-inverse-decoration",
 					"aria-hidden": "true"
 				})] }),
-				_ === "waves" && /* @__PURE__ */ C("svg", {
+				v === "waves" && /* @__PURE__ */ T("svg", {
 					className: "absolute inset-0 h-full w-full opacity-5",
 					viewBox: "0 0 400 200",
 					preserveAspectRatio: "none",
 					"aria-hidden": "true",
-					children: [/* @__PURE__ */ S("path", {
+					children: [/* @__PURE__ */ w("path", {
 						d: "M0 80 C100 20, 200 140, 400 60 L400 200 L0 200 Z",
-						fill: "white"
-					}), /* @__PURE__ */ S("path", {
+						className: "fill-inverse-foreground"
+					}), /* @__PURE__ */ w("path", {
 						d: "M0 120 C120 60, 280 180, 400 100 L400 200 L0 200 Z",
-						fill: "white"
+						className: "fill-inverse-foreground"
 					})]
 				}),
-				/* @__PURE__ */ S("div", {
+				/* @__PURE__ */ w("div", {
 					className: "absolute top-4 right-4 z-20",
-					children: /* @__PURE__ */ C("span", {
-						className: t("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xxs font-semibold uppercase tracking-wide", "bg-white/20 text-white border border-white/25 shadow-sm backdrop-blur-md"),
+					children: /* @__PURE__ */ T("span", {
+						className: t("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xxs font-semibold uppercase tracking-wide", "bg-inverse-surface-strong text-inverse-foreground border border-inverse-border shadow-sm backdrop-blur-md"),
 						"data-status": E,
-						children: [/* @__PURE__ */ S("span", {
-							className: "size-1.5 rounded-full bg-white/85",
+						children: [/* @__PURE__ */ w("span", {
+							className: "size-1.5 rounded-full bg-inverse-foreground/85",
 							"aria-hidden": "true"
-						}), w]
+						}), S]
 					})
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ T("div", {
 					className: "relative z-10",
 					children: [
-						/* @__PURE__ */ C("div", {
+						/* @__PURE__ */ T("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ S(j, { className: "h-5 w-5 text-white/80" }), /* @__PURE__ */ S(n, {
+							children: [/* @__PURE__ */ w(M, { className: "h-5 w-5 text-inverse-foreground opacity-80" }), /* @__PURE__ */ w(n, {
 								weight: "medium",
-								className: "text-white/80",
-								children: b.giftCard
+								className: "text-inverse-muted",
+								children: x.giftCard
 							})]
 						}),
-						/* @__PURE__ */ C("div", {
+						/* @__PURE__ */ T("div", {
 							className: "mt-8 mb-5",
-							children: [/* @__PURE__ */ S(n, {
+							children: [/* @__PURE__ */ w(n, {
 								size: "xs",
-								className: "text-white/50 uppercase tracking-wider",
-								children: b.balance
-							}), /* @__PURE__ */ C("div", {
+								className: "uppercase tracking-wider text-inverse-subtle",
+								children: x.balance
+							}), /* @__PURE__ */ T("div", {
 								className: "flex items-baseline gap-2.5 mt-1",
-								children: [/* @__PURE__ */ S(r, {
+								children: [/* @__PURE__ */ w(r, {
 									tag: "h2",
-									className: "text-4xl border-none pb-0 text-white tabular-nums drop-shadow-sm",
-									children: k
-								}), !!D && /* @__PURE__ */ S(n, {
-									className: "text-white/40 line-through tabular-nums",
+									className: "text-4xl border-none pb-0 text-inverse-foreground tabular-nums drop-shadow-sm",
+									children: O
+								}), !!D && /* @__PURE__ */ w(n, {
+									className: "line-through tabular-nums text-inverse-disabled",
 									children: a
 								})]
 							})]
 						}),
-						/* @__PURE__ */ C("div", {
-							className: t("flex items-center gap-2 rounded-lg px-4 py-2.5", "bg-white/10 backdrop-blur-sm", "border border-white/15", "shadow-[0_0_12px_-3px_rgba(255,255,255,0.15)]"),
-							children: [/* @__PURE__ */ S(n, {
+						/* @__PURE__ */ T("div", {
+							className: t("flex items-center gap-2 rounded-lg px-4 py-2.5", "bg-inverse-surface backdrop-blur-sm", "border border-inverse-border", "shadow-sm"),
+							children: [/* @__PURE__ */ w(n, {
 								weight: "semibold",
-								className: "text-white font-mono tracking-[0.2em] flex-1",
+								className: "flex-1 font-mono tracking-[0.2em] text-inverse-foreground",
 								children: i
-							}), /* @__PURE__ */ S(o, {
+							}), /* @__PURE__ */ w(o, {
 								variant: "light",
 								buttonStyle: "ghost",
-								className: "p-1 h-auto text-white/50 hover:text-white hover:bg-white/10",
-								"aria-label": b.copyCode,
-								children: /* @__PURE__ */ S(O, { className: "h-4 w-4" })
+								className: "p-1 h-auto text-inverse-foreground opacity-60 hover:bg-inverse-surface hover:opacity-100",
+								"aria-label": x.copyCode,
+								children: /* @__PURE__ */ w(k, { className: "h-4 w-4" })
 							})]
 						})
 					]
 				})
 			]
-		}), /* @__PURE__ */ C("div", {
-			className: "rounded-b-xl bg-card p-5 shadow-sm border border-t-0 border-border/50 space-y-4",
+		}), /* @__PURE__ */ T("div", {
+			className: "rounded-b-lg bg-card p-5 shadow-sm border border-t-0 border-border/50 space-y-4",
 			children: [
-				!!d && /* @__PURE__ */ C("div", {
+				!!d && /* @__PURE__ */ T("div", {
 					className: "rounded-lg bg-muted/50 p-3 border border-border/30",
-					children: [/* @__PURE__ */ C("div", {
-						className: "flex items-center gap-1.5 mb-1",
-						children: [/* @__PURE__ */ S(F, { className: "h-3 w-3 text-warning" }), /* @__PURE__ */ S(n, {
-							size: "xxs",
-							type: "secondary",
-							weight: "medium",
-							className: "uppercase tracking-wide",
-							children: b.personalMessage
-						})]
-					}), /* @__PURE__ */ C(n, {
+					children: [/* @__PURE__ */ w(n, {
+						size: "xxs",
+						type: "secondary",
+						weight: "medium",
+						className: "mb-1 uppercase tracking-wide",
+						children: x.personalMessage
+					}), /* @__PURE__ */ T(n, {
 						type: "secondary",
 						className: "italic leading-relaxed",
 						children: [
@@ -452,66 +459,17 @@ function G({ code: i, amount: a, remainingAmount: s, status: c, recipientName: l
 						]
 					})]
 				}),
-				/* @__PURE__ */ C("div", {
-					className: "grid grid-cols-2 gap-3",
-					children: [
-						!!l && /* @__PURE__ */ C("div", {
-							className: "space-y-0.5",
-							children: [/* @__PURE__ */ C("div", {
-								className: "flex items-center gap-1.5",
-								children: [/* @__PURE__ */ S(I, { className: "h-3 w-3 text-muted-foreground" }), /* @__PURE__ */ S(n, {
-									size: "xxs",
-									type: "discrete",
-									weight: "medium",
-									className: "uppercase tracking-wide",
-									children: b.to
-								})]
-							}), /* @__PURE__ */ S(n, {
-								weight: "medium",
-								children: l
-							})]
-						}),
-						!!u && /* @__PURE__ */ C("div", {
-							className: "space-y-0.5",
-							children: [/* @__PURE__ */ C("div", {
-								className: "flex items-center gap-1.5",
-								children: [/* @__PURE__ */ S(I, { className: "h-3 w-3 text-muted-foreground" }), /* @__PURE__ */ S(n, {
-									size: "xxs",
-									type: "discrete",
-									weight: "medium",
-									className: "uppercase tracking-wide",
-									children: b.from
-								})]
-							}), /* @__PURE__ */ S(n, {
-								weight: "medium",
-								children: u
-							})]
-						}),
-						!!f && /* @__PURE__ */ C("div", {
-							className: "space-y-0.5",
-							children: [/* @__PURE__ */ C("div", {
-								className: "flex items-center gap-1.5",
-								children: [/* @__PURE__ */ S(T, { className: "h-3 w-3 text-muted-foreground" }), /* @__PURE__ */ S(n, {
-									size: "xxs",
-									type: "discrete",
-									weight: "medium",
-									className: "uppercase tracking-wide",
-									children: b.expires
-								})]
-							}), /* @__PURE__ */ S(n, {
-								weight: "medium",
-								children: f
-							})]
-						})
-					]
+				/* @__PURE__ */ w(p, {
+					items: A,
+					columns: 2
 				}),
-				!!h && /* @__PURE__ */ S(o, {
+				!!g && /* @__PURE__ */ w(o, {
 					variant: "secondary",
 					buttonStyle: "outline",
-					icon: A,
+					icon: j,
 					fullWidth: !0,
-					onClick: h,
-					children: b.viewDetails
+					onClick: g,
+					children: x.viewDetails
 				})
 			]
 		})]
@@ -521,126 +479,139 @@ G.displayName = "GiftcardCard";
 //#endregion
 //#region src/components/composed/cards/giftcard-card/partials/giftcard-compact.tsx
 function K({ code: r, amount: i, remainingAmount: o, status: s, recipientName: c, gradient: l = "purple", className: u, strings: d }) {
-	let f = e(U, d).status[s], g = W[s], b = !!o && o !== i, x = b ? o : i;
-	return /* @__PURE__ */ C(v, {
+	let f = e(U, d).status[s], p = W[s], _ = !!o && o !== i, x = _ ? o : i;
+	return /* @__PURE__ */ T(y, {
+		size: "xs",
 		variant: "outline",
-		className: t("shadow-sm transition-colors duration-150 hover:border-border", u),
+		className: t("giftcard-compact--component flex-nowrap gap-x-2.5 px-3 py-2 shadow-sm transition-colors duration-150 hover:border-border", u),
 		children: [
-			/* @__PURE__ */ S(p, {
+			/* @__PURE__ */ w(m, {
 				variant: "image",
-				children: /* @__PURE__ */ S("div", {
+				children: /* @__PURE__ */ w("div", {
 					className: t("flex size-full items-center justify-center bg-gradient-to-br", ae[l]),
-					children: /* @__PURE__ */ S(j, { className: "h-4 w-4 text-white" })
+					children: /* @__PURE__ */ w(M, { className: "h-4 w-4 text-inverse-foreground" })
 				})
 			}),
-			/* @__PURE__ */ C(_, { children: [/* @__PURE__ */ S(y, {
-				className: "font-mono",
-				children: r
-			}), !!c && /* @__PURE__ */ S(m, {
-				clamp: 1,
-				children: c
-			})] }),
-			/* @__PURE__ */ S(h, { children: /* @__PURE__ */ C("div", {
-				className: "flex shrink-0 flex-col items-end gap-0.5",
-				children: [/* @__PURE__ */ C("div", {
-					className: "flex items-baseline gap-1",
-					children: [/* @__PURE__ */ S(n, {
-						size: "base",
-						weight: "bold",
-						className: "tabular-nums",
-						children: x
-					}), !!b && /* @__PURE__ */ S(n, {
-						size: "xxs",
-						type: "discrete",
-						className: "line-through tabular-nums",
-						children: i
-					})]
-				}), /* @__PURE__ */ S(a, {
-					variant: g,
-					children: f
+			/* @__PURE__ */ T(v, {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ w(b, {
+					className: "w-full max-w-full truncate whitespace-nowrap font-mono text-xs",
+					children: r
+				}), !!c && /* @__PURE__ */ w(h, {
+					clamp: 1,
+					children: c
 				})]
-			}) })
+			}),
+			/* @__PURE__ */ w(g, {
+				className: "shrink-0",
+				children: /* @__PURE__ */ T("div", {
+					className: "flex shrink-0 flex-col items-end gap-0.5",
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex items-baseline gap-1",
+						children: [/* @__PURE__ */ w(n, {
+							size: "sm",
+							weight: "bold",
+							className: "tabular-nums",
+							children: x
+						}), !!_ && /* @__PURE__ */ w(n, {
+							size: "xxs",
+							type: "discrete",
+							className: "line-through tabular-nums",
+							children: i
+						})]
+					}), /* @__PURE__ */ w(a, {
+						variant: p,
+						size: "xs",
+						children: f
+					})]
+				})
+			})
 		]
 	});
 }
 K.displayName = "GiftcardCompact";
 //#endregion
 //#region src/components/composed/cards/giftcard-card/partials/giftcard-minimal.tsx
-function q({ code: i, amount: s, remainingAmount: c, status: u, recipientName: d, expiresAt: f, onView: m, color: g = "green", className: b, strings: x }) {
-	let T = e(U, x), E = T.status[u], D = W[u], k = !!c && c !== s, A = k ? c : s, M = oe[g];
-	return /* @__PURE__ */ C("div", {
-		className: t("w-full max-w-sm rounded-2xl bg-card border border-border/50 shadow-sm overflow-hidden", b),
+function q({ code: i, amount: s, remainingAmount: c, status: l, recipientName: u, expiresAt: d, onView: f, color: h = "green", className: _, strings: x }) {
+	let S = e(U, x), C = S.status[l], D = W[l], O = !!c && c !== s, A = O ? c : s, j = oe[h], N = [...u ? [{
+		label: S.recipient,
+		value: u
+	}] : [], ...d ? [{
+		label: S.expires,
+		value: d
+	}] : []];
+	return /* @__PURE__ */ T("div", {
+		className: t("giftcard-minimal--component w-full max-w-sm overflow-hidden rounded-lg border border-border bg-card shadow-sm", _),
 		children: [
-			/* @__PURE__ */ S("div", { className: t("h-1 w-16 rounded-full mx-6 mt-5", M.line) }),
-			/* @__PURE__ */ C(v, {
+			/* @__PURE__ */ w("div", { className: t("mx-4 mt-3 h-1 w-12 rounded-sm", j.line) }),
+			/* @__PURE__ */ T(y, {
 				size: "xs",
-				className: "px-6 pt-4 pb-2",
+				className: "flex-nowrap items-center px-4 pb-1.5 pt-2",
 				children: [
-					/* @__PURE__ */ S(p, { children: /* @__PURE__ */ S("div", {
-						className: t("flex h-8 w-8 items-center justify-center rounded-full", M.iconBg),
-						children: /* @__PURE__ */ S(j, { className: "h-4 w-4" })
+					/* @__PURE__ */ w(m, { children: /* @__PURE__ */ w("div", {
+						className: t("flex h-7 w-7 items-center justify-center rounded-full", j.iconBg),
+						children: /* @__PURE__ */ w(M, { className: "h-3.5 w-3.5" })
 					}) }),
-					/* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(y, {
+					/* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(b, {
 						bold: !1,
 						className: "text-muted-foreground",
-						children: T.giftCard
+						children: S.giftCard
 					}) }),
-					/* @__PURE__ */ S(h, { children: /* @__PURE__ */ S(a, {
-						variant: D,
-						children: E
-					}) })
+					/* @__PURE__ */ w(g, {
+						className: "shrink-0",
+						children: /* @__PURE__ */ w(a, {
+							variant: D,
+							size: "xs",
+							children: C
+						})
+					})
 				]
 			}),
-			/* @__PURE__ */ S("div", {
-				className: "px-6 pt-2 pb-3",
-				children: /* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
+				className: "px-4 pb-2 pt-0",
+				children: /* @__PURE__ */ T("div", {
 					className: "flex items-baseline gap-2",
-					children: [/* @__PURE__ */ S(r, {
+					children: [/* @__PURE__ */ w(r, {
 						tag: "h2",
-						className: "text-3xl border-none pb-0 tabular-nums",
+						className: "border-none pb-0 text-2xl tabular-nums",
 						children: A
-					}), !!k && /* @__PURE__ */ S(n, {
+					}), !!O && /* @__PURE__ */ w(n, {
 						type: "discrete",
 						className: "line-through tabular-nums",
 						children: s
 					})]
 				})
 			}),
-			/* @__PURE__ */ C("div", {
-				className: "mx-6 flex items-center gap-2 rounded-lg bg-muted/50 px-3.5 py-2.5 border border-border/30",
-				children: [/* @__PURE__ */ S(n, {
+			/* @__PURE__ */ T("div", {
+				className: "mx-4 flex items-center gap-1.5 rounded-md border border-border/30 bg-muted/50 px-2.5 py-1.5",
+				children: [/* @__PURE__ */ w(n, {
 					weight: "medium",
-					className: "font-mono tracking-[0.15em] flex-1",
+					className: "flex-1 font-mono tracking-[0.15em]",
 					children: i
-				}), /* @__PURE__ */ S(o, {
+				}), /* @__PURE__ */ w(o, {
 					variant: "secondary",
 					buttonStyle: "ghost",
 					size: "icon-sm",
 					className: "shrink-0",
-					"aria-label": T.copyCode,
-					children: /* @__PURE__ */ S(O, { className: "h-3.5 w-3.5" })
+					"aria-label": S.copyCode,
+					children: /* @__PURE__ */ w(k, { className: "h-3.5 w-3.5" })
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
-				className: "px-6 pt-4 pb-2 space-y-2.5",
-				children: [!!d && /* @__PURE__ */ S(l, {
-					label: T.recipient,
-					value: d,
-					valueClassName: "text-sm font-medium"
-				}), !!f && /* @__PURE__ */ S(l, {
-					label: T.expires,
-					value: f,
-					valueClassName: "text-sm font-medium"
-				})]
+			/* @__PURE__ */ w(p, {
+				items: N,
+				columns: 1,
+				dense: !0,
+				gapClassName: "gap-1.5",
+				className: "px-4 pb-1.5 pt-2"
 			}),
-			!!m && /* @__PURE__ */ S("div", {
-				className: "px-3 py-2 border-t border-border/30 mt-2",
-				children: /* @__PURE__ */ C(o, {
+			!!f && /* @__PURE__ */ w("div", {
+				className: "mt-1 border-t border-border/30 px-3 py-1.5",
+				children: /* @__PURE__ */ T(o, {
 					variant: "secondary",
 					buttonStyle: "ghost",
-					onClick: m,
+					onClick: f,
 					className: "group/link",
-					children: [T.viewDetails, /* @__PURE__ */ S(w, { className: "ml-1 h-3.5 w-3.5 transition-transform group-hover/link:translate-x-0.5" })]
+					children: [S.viewDetails, /* @__PURE__ */ w(E, { className: "ml-1 h-3.5 w-3.5 transition-transform group-hover/link:translate-x-0.5" })]
 				})
 			})
 		]
@@ -649,81 +620,78 @@ function q({ code: i, amount: s, remainingAmount: c, status: u, recipientName: d
 q.displayName = "GiftcardCardMinimal";
 //#endregion
 //#region src/components/composed/cards/giftcard-card/partials/giftcard-dark.tsx
-function J({ code: i, amount: s, remainingAmount: c, status: u, recipientName: d, expiresAt: f, onView: m, className: g, strings: b }) {
-	let x = e(U, b), w = x.status[u], T = W[u], E = !!c && c !== s, D = E ? c : s;
-	return /* @__PURE__ */ C("div", {
-		className: t("dark w-full max-w-sm rounded-2xl bg-card text-card-foreground overflow-hidden shadow-lg ring-1 ring-border", g),
+function J({ code: i, amount: s, remainingAmount: c, status: l, recipientName: u, expiresAt: d, onView: f, className: h, strings: _ }) {
+	let x = e(U, _), S = x.status[l], C = W[l], E = !!c && c !== s, D = E ? c : s, O = [...u ? [{
+		label: x.recipient,
+		value: u
+	}] : [], ...d ? [{
+		label: x.expires,
+		value: d
+	}] : []];
+	return /* @__PURE__ */ T("div", {
+		className: t("giftcard-dark--component dark w-full max-w-sm overflow-hidden rounded-lg bg-card text-card-foreground shadow-sm ring-1 ring-border", h),
 		children: [
-			/* @__PURE__ */ C(v, {
+			/* @__PURE__ */ T(y, {
 				size: "xs",
-				className: "px-6 pt-6 pb-2",
+				className: "px-4 pb-2 pt-4",
 				children: [
-					/* @__PURE__ */ S(p, { children: /* @__PURE__ */ S("div", {
+					/* @__PURE__ */ w(m, { children: /* @__PURE__ */ w("div", {
 						className: "flex h-8 w-8 items-center justify-center rounded-full bg-warning/15",
-						children: /* @__PURE__ */ S(j, { className: "h-4 w-4 text-warning" })
+						children: /* @__PURE__ */ w(M, { className: "h-4 w-4 text-warning" })
 					}) }),
-					/* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(y, {
+					/* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(b, {
 						bold: !1,
 						className: "text-muted-foreground",
 						children: x.giftCard
 					}) }),
-					/* @__PURE__ */ S(h, { children: /* @__PURE__ */ S(a, {
-						variant: T,
-						children: w
+					/* @__PURE__ */ w(g, { children: /* @__PURE__ */ w(a, {
+						variant: C,
+						children: S
 					}) })
 				]
 			}),
-			/* @__PURE__ */ S("div", {
-				className: "px-6 pt-4 pb-4",
-				children: /* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
+				className: "px-4 pb-3 pt-2",
+				children: /* @__PURE__ */ T("div", {
 					className: "flex items-baseline gap-2",
-					children: [/* @__PURE__ */ S(r, {
+					children: [/* @__PURE__ */ w(r, {
 						tag: "h2",
-						className: "text-4xl border-none pb-0 tabular-nums",
+						className: "border-none pb-0 text-3xl tabular-nums",
 						children: D
-					}), !!E && /* @__PURE__ */ S(n, {
+					}), !!E && /* @__PURE__ */ w(n, {
 						type: "discrete",
 						className: "line-through tabular-nums",
 						children: s
 					})]
 				})
 			}),
-			/* @__PURE__ */ C("div", {
-				className: "mx-6 flex items-center gap-2 rounded-lg bg-muted px-3.5 py-2.5 border border-border",
-				children: [/* @__PURE__ */ S(n, {
+			/* @__PURE__ */ T("div", {
+				className: "mx-4 flex items-center gap-2 rounded-md border border-border bg-muted px-3 py-2",
+				children: [/* @__PURE__ */ w(n, {
 					weight: "medium",
 					className: "font-mono tracking-[0.15em] flex-1",
 					children: i
-				}), /* @__PURE__ */ S(o, {
+				}), /* @__PURE__ */ w(o, {
 					variant: "secondary",
 					buttonStyle: "ghost",
-					onClick: () => {},
 					className: "p-1 h-auto",
 					"aria-label": x.copyCode,
-					children: /* @__PURE__ */ S(O, { className: "h-3.5 w-3.5" })
+					children: /* @__PURE__ */ w(k, { className: "h-3.5 w-3.5" })
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
-				className: "px-6 pt-4 pb-2 space-y-2.5",
-				children: [!!d && /* @__PURE__ */ S(l, {
-					label: x.recipient,
-					value: d,
-					valueClassName: "text-sm font-medium"
-				}), !!f && /* @__PURE__ */ S(l, {
-					label: x.expires,
-					value: f,
-					valueClassName: "text-sm font-medium"
-				})]
+			/* @__PURE__ */ w(p, {
+				items: O,
+				columns: 1,
+				className: "px-4 pb-2 pt-3"
 			}),
-			!!m && /* @__PURE__ */ S("div", {
-				className: "px-6 pt-2 pb-5",
-				children: /* @__PURE__ */ S(o, {
-					variant: "light",
+			!!f && /* @__PURE__ */ w("div", {
+				className: "px-4 pb-4 pt-2",
+				children: /* @__PURE__ */ w(o, {
+					variant: "dark",
 					buttonStyle: "solid",
-					icon: A,
+					icon: j,
 					fullWidth: !0,
-					onClick: m,
-					className: "bg-white text-zinc-900 hover:bg-white/90 hover:text-zinc-900",
+					onClick: f,
 					children: x.viewDetails
 				})
 			})
@@ -733,111 +701,92 @@ function J({ code: i, amount: s, remainingAmount: c, status: u, recipientName: d
 J.displayName = "GiftcardCardDark";
 //#endregion
 //#region src/components/composed/cards/giftcard-card/partials/giftcard-illustrated.tsx
-function Y({ code: i, amount: s, remainingAmount: c, status: l, recipientName: u, expiresAt: d, onView: f, headerColor: m = "green", className: h, strings: b }) {
-	let x = e(U, b), w = x.status[l], E = W[l], D = !!c && c !== s, k = D ? c : s;
-	return /* @__PURE__ */ C("div", {
-		className: t("w-full max-w-sm rounded-2xl bg-card border border-border/50 shadow-sm overflow-hidden", h),
-		children: [
-			/* @__PURE__ */ C("div", {
-				className: t("relative h-24 bg-gradient-to-br", se[m]),
-				children: [
-					/* @__PURE__ */ S("div", {
-						className: "absolute inset-0",
-						style: { backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px)" },
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "absolute -top-8 -right-8 h-28 w-28 rounded-full bg-white/[0.06]",
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "absolute -bottom-4 -left-4 h-20 w-20 rounded-full bg-white/[0.04]",
-						"aria-hidden": "true"
-					})
-				]
-			}),
-			/* @__PURE__ */ S("div", {
-				className: "relative -mt-7 px-6",
-				children: /* @__PURE__ */ S("div", {
-					className: t("flex h-14 w-14 items-center justify-center rounded-xl", ce[m]),
-					children: /* @__PURE__ */ S(j, { className: "h-6 w-6 text-white" })
+function Y({ code: s, amount: c, remainingAmount: l, status: u, recipientName: d, expiresAt: f, onView: m, headerColor: h = "green", className: g, strings: _ }) {
+	let v = e(U, _), y = v.status[u], b = W[u], x = !!l && l !== c, S = x ? l : c, C = [...d ? [{
+		label: v.recipient,
+		value: d
+	}] : [], ...f ? [{
+		label: v.expires,
+		value: f
+	}] : []];
+	return /* @__PURE__ */ T("div", {
+		className: t("giftcard-illustrated--component w-full max-w-sm overflow-hidden rounded-lg border border-border bg-card shadow-sm", g),
+		children: [/* @__PURE__ */ T("div", {
+			className: t("relative flex h-16 items-center justify-between overflow-hidden bg-gradient-to-br px-4", se[h]),
+			children: [
+				/* @__PURE__ */ w("div", {
+					className: "absolute inset-0 opacity-80",
+					style: { backgroundImage: "repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in oklch, var(--inverse-foreground) 3%, transparent) 10px 20px)" },
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ w(i, {
+					icon: M,
+					size: "md",
+					shape: "square",
+					className: t("relative rounded-md text-inverse-foreground ring-1 ring-inverse-border", ce[h])
+				}),
+				/* @__PURE__ */ w(n, {
+					tag: "span",
+					size: "xs",
+					weight: "semibold",
+					className: "relative uppercase tracking-wider text-inverse-foreground opacity-80",
+					children: v.giftCard
 				})
-			}),
-			/* @__PURE__ */ C("div", {
-				className: "px-6 pt-4 pb-6 space-y-4",
-				children: [
-					/* @__PURE__ */ C("div", {
-						className: "flex items-start justify-between",
-						children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("div", {
-							className: "flex items-baseline gap-2",
-							children: [/* @__PURE__ */ S(r, {
-								tag: "h2",
-								className: "text-3xl border-none pb-0 tabular-nums",
-								children: k
-							}), !!D && /* @__PURE__ */ S(n, {
-								type: "discrete",
-								className: "line-through tabular-nums",
-								children: s
-							})]
-						}), /* @__PURE__ */ C(n, {
-							size: "xs",
-							type: "secondary",
-							className: "mt-0.5",
-							children: [
-								x.giftCard,
-								" · ",
-								x.balance
-							]
-						})] }), /* @__PURE__ */ S(a, {
-							variant: E,
-							children: w
-						})]
-					}),
-					/* @__PURE__ */ C("div", {
-						className: "flex items-center gap-2 rounded-lg bg-muted/50 px-3.5 py-2.5 border border-border/30",
-						children: [/* @__PURE__ */ S(n, {
-							weight: "medium",
-							className: "font-mono tracking-[0.15em] flex-1",
-							children: i
-						}), /* @__PURE__ */ S(o, {
-							variant: "secondary",
-							buttonStyle: "ghost",
-							className: "p-1 h-auto",
-							"aria-label": x.copyCode,
-							children: /* @__PURE__ */ S(O, { className: "h-3.5 w-3.5" })
-						})]
-					}),
-					/* @__PURE__ */ C(g, {
-						className: "gap-1",
-						children: [!!u && /* @__PURE__ */ C(v, {
-							size: "xs",
-							className: "px-0",
-							children: [/* @__PURE__ */ S(p, {
-								variant: "icon",
-								className: "text-muted-foreground",
-								children: /* @__PURE__ */ S(I, {})
-							}), /* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(y, { children: u }) })]
-						}), !!d && /* @__PURE__ */ C(v, {
-							size: "xs",
-							className: "px-0",
-							children: [/* @__PURE__ */ S(p, {
-								variant: "icon",
-								className: "text-muted-foreground",
-								children: /* @__PURE__ */ S(T, {})
-							}), /* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(y, { children: d }) })]
+			]
+		}), /* @__PURE__ */ T("div", {
+			className: "space-y-3 px-4 py-4",
+			children: [
+				/* @__PURE__ */ T("div", {
+					className: "flex items-start justify-between",
+					children: [/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("div", {
+						className: "flex items-baseline gap-2",
+						children: [/* @__PURE__ */ w(r, {
+							tag: "h2",
+							className: "border-none pb-0 text-2xl tabular-nums",
+							children: S
+						}), !!x && /* @__PURE__ */ w(n, {
+							type: "discrete",
+							className: "line-through tabular-nums",
+							children: c
 						})]
-					}),
-					!!f && /* @__PURE__ */ S(o, {
+					}), /* @__PURE__ */ w(n, {
+						size: "xs",
+						type: "secondary",
+						className: "mt-0.5",
+						children: v.balance
+					})] }), /* @__PURE__ */ w(a, {
+						variant: b,
+						children: y
+					})]
+				}),
+				/* @__PURE__ */ T("div", {
+					className: "flex items-center gap-2 rounded-md border border-border/50 bg-muted/40 px-3 py-2",
+					children: [/* @__PURE__ */ w(n, {
+						weight: "medium",
+						className: "font-mono tracking-[0.15em] flex-1",
+						children: s
+					}), /* @__PURE__ */ w(o, {
 						variant: "secondary",
-						buttonStyle: "outline",
-						icon: A,
-						fullWidth: !0,
-						onClick: f,
-						children: x.viewDetails
-					})
-				]
-			})
-		]
+						buttonStyle: "ghost",
+						className: "p-1 h-auto",
+						"aria-label": v.copyCode,
+						children: /* @__PURE__ */ w(k, { className: "h-3.5 w-3.5" })
+					})]
+				}),
+				/* @__PURE__ */ w(p, {
+					items: C,
+					columns: 2
+				}),
+				!!m && /* @__PURE__ */ w(o, {
+					variant: "secondary",
+					buttonStyle: "outline",
+					icon: j,
+					fullWidth: !0,
+					onClick: m,
+					children: v.viewDetails
+				})
+			]
+		})]
 	});
 }
 Y.displayName = "GiftcardCardIllustrated";
@@ -846,7 +795,7 @@ Y.displayName = "GiftcardCardIllustrated";
 var le = {
 	participants: "Participants",
 	progress: "Progress"
-}, X = "rounded-xl bg-background/80 ring-1 ring-border/60 p-3", ue = "bg-gradient-to-br from-violet-500 via-fuchsia-500 to-pink-500";
+}, X = "rounded-xl bg-background/80 ring-1 ring-border/60 p-3", ue = "from-primary/8 via-card to-info/10";
 function de(e) {
 	return e.map((e, t) => ({
 		id: `${t}-${e.name ?? e.initials ?? ""}`,
@@ -854,160 +803,175 @@ function de(e) {
 		imageUrl: e.imageUrl
 	}));
 }
-function Z({ title: r, description: i, badges: l = [], participants: u = [], extraParticipants: d = 0, progressPercent: f, actionLabel: p, onAction: g, className: b, strings: x, variant: w = "default", gradient: T = ue }) {
+function Z({ title: r, description: i, badges: l = [], participants: u = [], extraParticipants: d = 0, progressPercent: f, actionLabel: p, onAction: m, className: _, strings: x, variant: S = "default", gradient: C = ue }) {
 	let E = e(le, x), D = u.length + d, O = de(u);
-	return w === "minimal" ? /* @__PURE__ */ C(v, {
+	return S === "minimal" ? /* @__PURE__ */ T(y, {
 		variant: "outline",
-		className: t("course-card--component", "hover:bg-muted/30 transition-colors", b),
-		children: [/* @__PURE__ */ C(_, { children: [/* @__PURE__ */ S(y, { children: r }), !!i && /* @__PURE__ */ S(m, {
-			clamp: 1,
-			children: i
-		})] }), /* @__PURE__ */ C(h, { children: [
-			u.length > 0 && /* @__PURE__ */ S(c, {
-				users: O,
-				max: 3,
-				size: "sm",
-				overflowFormatter: () => `+${d || 0}`,
-				showOverflow: d > 0
-			}),
-			f !== void 0 && /* @__PURE__ */ C(n, {
-				size: "xs",
-				type: "secondary",
-				className: "shrink-0 tabular-nums",
-				children: [f, "%"]
-			}),
-			!!p && /* @__PURE__ */ S(o, {
-				variant: "secondary",
-				buttonStyle: "ghost",
-				onClick: g,
-				children: p
-			})
-		] })]
-	}) : w === "gradient" ? /* @__PURE__ */ C("div", {
-		className: t("relative overflow-hidden rounded-2xl text-white shadow-sm", T, b),
+		className: t("course-card--component", "hover:bg-muted/30 transition-colors", _),
+		children: [/* @__PURE__ */ T(v, {
+			className: "min-w-[min(12rem,100%)]",
+			children: [/* @__PURE__ */ w(b, { children: r }), !!i && /* @__PURE__ */ w(h, {
+				clamp: 1,
+				children: i
+			})]
+		}), /* @__PURE__ */ T(g, {
+			className: "ml-auto shrink-0 flex-wrap justify-end",
+			children: [
+				u.length > 0 && /* @__PURE__ */ w(c, {
+					users: O,
+					max: 3,
+					size: "sm",
+					overflowFormatter: () => `+${d || 0}`,
+					showOverflow: d > 0
+				}),
+				f !== void 0 && /* @__PURE__ */ T(n, {
+					size: "xs",
+					type: "secondary",
+					className: "shrink-0 tabular-nums",
+					children: [f, "%"]
+				}),
+				!!p && /* @__PURE__ */ w(o, {
+					variant: "secondary",
+					buttonStyle: "outline",
+					onClick: m,
+					children: p
+				})
+			]
+		})]
+	}) : S === "gradient" ? /* @__PURE__ */ T(s, {
+		title: r,
+		description: i,
+		className: t("course-card--component border-primary/20 bg-gradient-to-br", C, _),
 		children: [
-			/* @__PURE__ */ C("div", {
-				className: "p-5",
-				children: [
-					/* @__PURE__ */ S(n, {
-						size: "base",
-						weight: "semibold",
-						className: "text-white",
-						children: r
-					}),
-					!!i && /* @__PURE__ */ S(n, {
-						className: "text-white/80 mt-0.5",
-						children: i
-					}),
-					l.length > 0 && /* @__PURE__ */ S("div", {
-						className: "mt-3 flex flex-wrap gap-1.5",
-						children: l.map((e) => /* @__PURE__ */ S("span", {
-							className: "inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-xxs font-medium text-white backdrop-blur-sm",
-							children: e.label
-						}, e.label))
-					})
-				]
+			l.length > 0 && /* @__PURE__ */ w("div", {
+				className: "flex flex-wrap gap-1.5",
+				children: l.map((e) => /* @__PURE__ */ w(a, {
+					variant: e.variant,
+					children: e.label
+				}, e.label))
 			}),
-			(u.length > 0 || f !== void 0) && /* @__PURE__ */ C("div", {
-				className: "bg-black/15 px-5 py-3 backdrop-blur-sm flex items-center gap-4",
-				children: [u.length > 0 && /* @__PURE__ */ C("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ S(c, {
-						users: O,
-						max: 3,
-						size: "sm",
-						showOverflow: !1
-					}), /* @__PURE__ */ C(n, {
-						size: "xs",
-						className: "text-white/80",
-						children: [
-							D,
-							" ",
-							E.participants.toLowerCase()
-						]
-					})]
-				}), f !== void 0 && /* @__PURE__ */ C("div", {
-					className: "ml-auto flex items-center gap-2",
-					children: [/* @__PURE__ */ S("div", {
-						className: "h-1.5 w-24 overflow-hidden rounded-full bg-white/25",
-						children: /* @__PURE__ */ S("div", {
-							className: "h-full rounded-full bg-white",
-							style: { width: `${f}%` }
-						})
-					}), /* @__PURE__ */ C(n, {
-						size: "xs",
-						className: "text-white/90 tabular-nums",
-						children: [f, "%"]
+			(u.length > 0 || f !== void 0) && /* @__PURE__ */ w("div", {
+				className: "mt-4 rounded-lg border border-border/70 bg-background/80 p-3",
+				children: /* @__PURE__ */ T("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [u.length > 0 && /* @__PURE__ */ T("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ w(c, {
+							users: O,
+							max: 3,
+							size: "sm",
+							showOverflow: !1
+						}), /* @__PURE__ */ T(n, {
+							size: "xs",
+							type: "secondary",
+							className: "truncate",
+							children: [
+								D,
+								" ",
+								E.participants.toLowerCase()
+							]
+						})]
+					}), f !== void 0 && /* @__PURE__ */ T("div", {
+						className: "ml-auto flex min-w-36 items-center gap-2",
+						children: [/* @__PURE__ */ w("div", {
+							className: "h-1.5 min-w-20 flex-1 overflow-hidden rounded-full bg-success/15",
+							children: /* @__PURE__ */ w("div", {
+								className: "h-full rounded-full bg-success",
+								style: { width: `${f}%` }
+							})
+						}), /* @__PURE__ */ T(n, {
+							size: "xs",
+							type: "secondary",
+							className: "shrink-0 tabular-nums",
+							children: [f, "%"]
+						})]
 					})]
-				})]
-			}),
-			!!p && /* @__PURE__ */ S("div", {
-				className: "px-5 pb-5 pt-0",
-				children: /* @__PURE__ */ S("button", {
-					type: "button",
-					onClick: g,
-					className: t("w-full rounded-xl bg-white/95 px-3 py-2 text-sm font-semibold text-foreground shadow-sm hover:bg-white transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2"),
-					children: p
 				})
+			}),
+			!!p && /* @__PURE__ */ w(o, {
+				variant: "primary",
+				className: "mt-4 w-full rounded-xl",
+				onClick: m,
+				children: p
 			})
 		]
-	}) : /* @__PURE__ */ C(s, {
+	}) : /* @__PURE__ */ T(s, {
 		title: r,
 		description: i,
-		className: t("bg-gradient-to-b from-muted/30 to-card", b),
+		className: t("course-card--component", _),
 		children: [
-			l.length > 0 && /* @__PURE__ */ S("div", {
+			l.length > 0 && /* @__PURE__ */ w("div", {
 				className: "flex flex-wrap gap-1.5",
-				children: l.map((e) => /* @__PURE__ */ S(a, {
+				children: l.map((e) => /* @__PURE__ */ w(a, {
 					variant: e.variant,
 					children: e.label
 				}, e.label))
 			}),
-			(u.length > 0 || f !== void 0) && /* @__PURE__ */ C("div", {
-				className: "mt-4 grid grid-cols-2 gap-2.5",
-				children: [u.length > 0 && /* @__PURE__ */ C("div", {
+			(u.length > 0 || f !== void 0) && /* @__PURE__ */ T("div", {
+				className: "mt-4 grid gap-2.5 sm:grid-cols-2",
+				children: [u.length > 0 && /* @__PURE__ */ T("div", {
 					className: X,
-					children: [/* @__PURE__ */ S(n, {
-						size: "xs",
-						type: "secondary",
-						children: E.participants
-					}), /* @__PURE__ */ S("div", {
-						className: "mt-2",
-						children: /* @__PURE__ */ S(c, {
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ w(n, {
+							size: "xs",
+							type: "secondary",
+							children: E.participants
+						}), /* @__PURE__ */ w(n, {
+							size: "xs",
+							weight: "semibold",
+							className: "tabular-nums",
+							children: D
+						})]
+					}), /* @__PURE__ */ T("div", {
+						className: "mt-2 flex items-center gap-2",
+						children: [/* @__PURE__ */ w(c, {
 							users: O,
 							max: 4,
 							size: "sm",
 							showOverflow: d > 0,
 							overflowFormatter: () => `+${d}`
-						})
+						}), /* @__PURE__ */ T(n, {
+							size: "xs",
+							type: "secondary",
+							className: "truncate",
+							children: [
+								D,
+								" ",
+								E.participants.toLowerCase()
+							]
+						})]
 					})]
-				}), f !== void 0 && /* @__PURE__ */ C("div", {
+				}), f !== void 0 && /* @__PURE__ */ T("div", {
 					className: X,
-					children: [/* @__PURE__ */ S(n, {
-						size: "xs",
-						type: "secondary",
-						children: E.progress
-					}), /* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ w(n, {
+							size: "xs",
+							type: "secondary",
+							children: E.progress
+						}), /* @__PURE__ */ T(n, {
+							size: "xs",
+							weight: "semibold",
+							className: "tabular-nums",
+							children: [f, "%"]
+						})]
+					}), /* @__PURE__ */ w("div", {
 						className: "mt-2.5",
-						children: [/* @__PURE__ */ S("div", {
+						children: /* @__PURE__ */ w("div", {
 							className: "h-1.5 w-full overflow-hidden rounded-full bg-success/15",
-							children: /* @__PURE__ */ S("div", {
+							children: /* @__PURE__ */ w("div", {
 								className: "h-full rounded-full bg-success",
 								style: { width: `${f}%` }
 							})
-						}), /* @__PURE__ */ C(n, {
-							size: "xs",
-							type: "secondary",
-							className: "mt-1 tabular-nums",
-							children: [f, "%"]
-						})]
+						})
 					})]
 				})]
 			}),
-			!!p && /* @__PURE__ */ S(o, {
-				variant: "dark",
+			!!p && /* @__PURE__ */ w(o, {
+				variant: "primary",
 				className: "mt-4 w-full rounded-xl",
-				onClick: g,
+				onClick: m,
 				children: p
 			})
 		]
@@ -1016,42 +980,38 @@ function Z({ title: r, description: i, badges: l = [], participants: u = [], ext
 Z.displayName = "CourseCard";
 //#endregion
 //#region src/components/composed/cards/feature-announcement/feature-announcement.tsx
-function Q({ icon: e = F, title: n, description: r, tags: c = [], actionLabel: l, onAction: u, className: d }) {
-	return /* @__PURE__ */ C(s, {
-		className: t("feature-announcement--component", "bg-gradient-to-b from-muted/30 to-card", d),
+function Q({ icon: e = I, title: n, description: r, tags: c = [], actionLabel: l, onAction: u, className: d }) {
+	return /* @__PURE__ */ T(s, {
+		className: t("feature-announcement--component", d),
 		children: [
-			/* @__PURE__ */ C(v, {
-				size: "default",
-				className: "px-0 items-start",
-				children: [/* @__PURE__ */ S(p, { children: /* @__PURE__ */ S(i, {
+			/* @__PURE__ */ T(y, {
+				className: "items-start px-0",
+				children: [/* @__PURE__ */ w(m, { children: /* @__PURE__ */ w(i, {
 					icon: e,
 					tone: "primary",
-					size: "lg",
+					size: "md",
 					shape: "square",
-					className: "rounded-xl ring-1 ring-primary/15"
-				}) }), /* @__PURE__ */ C(_, { children: [/* @__PURE__ */ S(y, {
-					className: "text-base",
-					children: n
-				}), /* @__PURE__ */ S(m, {
+					className: "rounded-md ring-1 ring-primary/15"
+				}) }), /* @__PURE__ */ T(v, { children: [/* @__PURE__ */ w(b, { children: n }), /* @__PURE__ */ w(h, {
 					clamp: "none",
 					children: r
 				})] })]
 			}),
-			c.length > 0 && /* @__PURE__ */ S("div", {
-				className: "mt-4 flex flex-wrap gap-1.5",
-				children: c.map((e) => /* @__PURE__ */ S(a, {
+			c.length > 0 && /* @__PURE__ */ w("div", {
+				className: "mt-3 flex flex-wrap gap-1.5",
+				children: c.map((e) => /* @__PURE__ */ w(a, {
 					variant: "info",
 					children: e
 				}, e))
 			}),
-			!!l && /* @__PURE__ */ S("div", {
-				className: "mt-4",
-				children: /* @__PURE__ */ C(o, {
+			!!l && /* @__PURE__ */ w("div", {
+				className: "mt-3",
+				children: /* @__PURE__ */ T(o, {
 					variant: "light",
 					buttonStyle: "ghost",
 					onClick: u,
-					className: "-ml-2 h-auto px-2",
-					children: [l, /* @__PURE__ */ S(D, { className: "ml-1 size-3.5" })]
+					className: "-ml-2",
+					children: [l, /* @__PURE__ */ w(O, { className: "ml-1 size-3.5" })]
 				})
 			})
 		]
@@ -1070,86 +1030,85 @@ var fe = {
 };
 //#endregion
 //#region src/components/composed/cards/vendor-profile/vendor-profile.tsx
-function $({ name: a, initials: s, avatarUrl: c, role: u, verified: d = !1, earnings: f, earningsChange: h, metrics: g = [], stats: x = [], onMessage: w, onHire: T, className: O, strings: k }) {
-	let A = e(fe, k), [j, M] = b("overview"), N = s ?? a.split(" ").map((e) => e[0]).join("").slice(0, 2).toUpperCase(), P = {
-		overview: A.tabOverview,
-		stats: A.tabStats
-	};
-	return /* @__PURE__ */ C("div", {
-		className: t("vendor-profile--component", "flex flex-col gap-5 rounded-xl border border-border bg-gradient-to-b from-muted/30 to-card p-5 shadow-sm", O),
+function $({ name: r, initials: a, avatarUrl: s, role: c, verified: u = !1, earnings: d, earningsChange: f, metrics: p = [], stats: g = [], onMessage: _, onHire: x, className: C, strings: E }) {
+	let k = e(fe, E), [A, j] = S("overview"), M = a ?? r.split(" ").map((e) => e[0]).join("").slice(0, 2).toUpperCase(), N = {
+		overview: k.tabOverview,
+		stats: k.tabStats
+	}, P = !!d || p.length > 0, F = g.length > 0, I = [["overview", P], ["stats", F]].filter(([, e]) => e).map(([e]) => e), L = A === "overview" && !P && F ? "stats" : A;
+	return /* @__PURE__ */ T("div", {
+		className: t("vendor-profile--component", "flex flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-sm", C),
 		children: [
-			/* @__PURE__ */ C(v, {
-				size: "default",
-				className: "px-0 items-start",
-				children: [/* @__PURE__ */ S(p, {
-					variant: c ? "avatar" : "default",
-					children: c ? /* @__PURE__ */ S("img", {
-						src: c,
-						alt: a,
-						className: "size-12 rounded-full object-cover ring-2 ring-border"
-					}) : /* @__PURE__ */ S(i, {
+			/* @__PURE__ */ T(y, {
+				className: "items-start px-0",
+				children: [/* @__PURE__ */ w(m, {
+					variant: s ? "avatar" : "default",
+					children: s ? /* @__PURE__ */ w("img", {
+						src: s,
+						alt: r,
+						className: "size-10 rounded-full object-cover ring-1 ring-border"
+					}) : /* @__PURE__ */ w(i, {
 						tone: "primary",
-						size: "lg",
-						className: "font-semibold ring-2 ring-primary/15",
-						children: N
+						size: "md",
+						className: "font-semibold ring-1 ring-primary/15",
+						children: M
 					})
-				}), /* @__PURE__ */ C(_, { children: [/* @__PURE__ */ C(y, {
-					className: "text-base",
-					children: [/* @__PURE__ */ S(r, {
-						tag: "h4",
-						className: "border-none p-0 text-base font-semibold tracking-tight",
-						children: a
-					}), !!d && /* @__PURE__ */ S(i, {
+				}), /* @__PURE__ */ T(v, { children: [/* @__PURE__ */ w(b, { children: /* @__PURE__ */ T("span", {
+					className: "inline-flex items-center gap-1.5",
+					children: [r, !!u && /* @__PURE__ */ w(i, {
 						tone: "success",
 						solid: !0,
 						size: "xs",
-						"aria-label": A.verifiedAriaLabel,
-						className: "size-4",
-						children: /* @__PURE__ */ S(E, {
+						"aria-label": k.verifiedAriaLabel,
+						className: "size-4 shrink-0",
+						children: /* @__PURE__ */ w(D, {
 							className: "size-2.5",
 							strokeWidth: 3
 						})
 					})]
-				}), !!u && /* @__PURE__ */ S(m, {
+				}) }), !!c && /* @__PURE__ */ w(h, {
 					clamp: 2,
-					children: u
+					children: c
 				})] })]
 			}),
-			/* @__PURE__ */ S("div", {
-				className: "flex gap-1 rounded-full bg-muted/60 p-1",
-				children: ["overview", "stats"].map((e) => /* @__PURE__ */ S("button", {
+			I.length > 1 && /* @__PURE__ */ w("div", {
+				className: "flex gap-1 rounded-md bg-muted/60 p-0.5",
+				children: I.map((e) => /* @__PURE__ */ w(o, {
 					type: "button",
-					"aria-pressed": j === e,
-					onClick: () => M(e),
-					className: t("flex-1 rounded-full px-3 py-1.5 text-xs font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", j === e ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
-					children: P[e]
+					"aria-pressed": L === e,
+					onClick: () => j(e),
+					variant: "secondary",
+					buttonStyle: "ghost",
+					size: "xs",
+					className: t("h-auto flex-1 rounded-sm px-3 py-1.5 text-xs font-medium transition-colors", L === e ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+					children: N[e]
 				}, e))
 			}),
-			j === "overview" ? /* @__PURE__ */ C("div", {
-				className: "space-y-4",
-				children: [!!f && /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S(n, {
+			L === "overview" && P && /* @__PURE__ */ T("div", {
+				className: "space-y-3",
+				children: [!!d && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w(n, {
 					size: "xxs",
 					type: "secondary",
 					weight: "medium",
 					className: "uppercase tracking-wider",
-					children: A.totalEarnings
-				}), /* @__PURE__ */ C("div", {
+					children: k.totalEarnings
+				}), /* @__PURE__ */ T("div", {
 					className: "mt-0.5 flex items-baseline gap-2",
-					children: [/* @__PURE__ */ S(r, {
-						tag: "h3",
-						className: "text-3xl tabular-nums tracking-tight border-none pb-0",
-						children: f
-					}), !!h && /* @__PURE__ */ S(n, {
+					children: [/* @__PURE__ */ w(n, {
+						size: "xl",
+						weight: "semibold",
+						className: "tabular-nums tracking-tight",
+						children: d
+					}), !!f && /* @__PURE__ */ w(n, {
 						tag: "span",
 						size: "xs",
 						weight: "semibold",
 						className: "rounded-full bg-success/15 px-1.5 py-0.5 text-success tabular-nums",
-						children: h
+						children: f
 					})]
-				})] }), g.length > 0 && /* @__PURE__ */ S("div", {
-					className: "space-y-2",
-					children: g.map((e) => /* @__PURE__ */ S(l, {
-						className: "border-b border-border/50 pb-2 last:border-0",
+				})] }), p.length > 0 && /* @__PURE__ */ w("div", {
+					className: "space-y-1.5",
+					children: p.map((e) => /* @__PURE__ */ w(l, {
+						className: "border-b border-border/50 pb-1.5 last:border-0",
 						label: e.label,
 						value: e.value,
 						mono: !0,
@@ -1157,24 +1116,25 @@ function $({ name: a, initials: s, avatarUrl: c, role: u, verified: d = !1, earn
 						valueClassName: "text-sm font-semibold"
 					}, e.label))
 				})]
-			}) : /* @__PURE__ */ S("div", {
-				className: "grid grid-cols-2 gap-2",
-				children: x.map((e) => /* @__PURE__ */ C("div", {
-					className: "rounded-lg border border-border/60 bg-muted/20 px-3 py-2.5",
-					children: [/* @__PURE__ */ S(n, {
+			}),
+			L === "stats" && F && /* @__PURE__ */ w("div", {
+				className: "grid grid-cols-2 gap-1.5",
+				children: g.map((e) => /* @__PURE__ */ T("div", {
+					className: "rounded-lg border border-border/60 bg-muted/20 px-3 py-2",
+					children: [/* @__PURE__ */ w(n, {
 						size: "xxs",
 						type: "secondary",
 						weight: "medium",
 						className: "uppercase tracking-wider",
 						children: e.label
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "mt-1 flex items-baseline gap-1.5",
-						children: [/* @__PURE__ */ S(n, {
+						children: [/* @__PURE__ */ w(n, {
 							size: "base",
 							weight: "semibold",
 							className: "tabular-nums",
 							children: e.value
-						}), !!e.change && /* @__PURE__ */ S(n, {
+						}), !!e.change && /* @__PURE__ */ w(n, {
 							tag: "span",
 							size: "xxs",
 							weight: "semibold",
@@ -1184,19 +1144,19 @@ function $({ name: a, initials: s, avatarUrl: c, role: u, verified: d = !1, earn
 					})]
 				}, e.label))
 			}),
-			/* @__PURE__ */ C("div", {
-				className: "flex gap-2",
-				children: [/* @__PURE__ */ C(o, {
+			/* @__PURE__ */ T("div", {
+				className: "flex gap-1.5",
+				children: [/* @__PURE__ */ T(o, {
 					variant: "light",
 					buttonStyle: "outline",
-					className: "flex-1 rounded-xl",
-					onClick: w,
-					children: [/* @__PURE__ */ S(ee, { className: "mr-1.5 size-3.5" }), A.message]
-				}), /* @__PURE__ */ C(o, {
+					className: "flex-1 rounded-md",
+					onClick: _,
+					children: [/* @__PURE__ */ w(ee, { className: "mr-1.5 size-3.5" }), k.message]
+				}), /* @__PURE__ */ T(o, {
 					variant: "dark",
-					className: "flex-1 rounded-xl",
-					onClick: T,
-					children: [A.hire, /* @__PURE__ */ S(D, { className: "ml-1 size-3.5" })]
+					className: "flex-1 rounded-md",
+					onClick: x,
+					children: [k.hire, /* @__PURE__ */ w(O, { className: "ml-1 size-3.5" })]
 				})]
 			})
 		]