@photoroom/ui 0.1.676 → 0.1.678

package/index.mjs

@@ -11487,7 +11487,7 @@ var yoe = W([
 		...r,
 		ref: n,
 		type: "button",
-		className: H("relative overflow-hidden", "size-h-400 w-8 cursor-pointer rounded-full outline-hidden", "ring-misc-border ring-1", "bg-surface-higher text-content-primary shadow-500", "flex items-center justify-center", "before:absolute before:inset-0 before:rounded-full before:transition-colors", "hover:before:bg-background-borderless-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:before:bg-background-borderless-subdued-hover", "active:before:bg-background-borderless-subdued-down", "interaction-transition transition-all", r.className),
+		className: H("relative overflow-hidden", "size-h-400 w-8 cursor-pointer rounded-full outline-hidden", "ring-misc-border ring-1", "bg-surface-primary-elevated text-content-primary shadow-500", "flex items-center justify-center", "before:absolute before:inset-0 before:rounded-full before:transition-colors", "hover:before:bg-background-borderless-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:before:bg-background-borderless-subdued-hover", "active:before:bg-background-borderless-subdued-down", "interaction-transition transition-all", r.className),
 		children: /* @__PURE__ */ I(ie, { className: "icon-size-500 relative" })
 	})
 });
@@ -12084,7 +12084,7 @@ var rh = /* @__PURE__ */ new Set(), Roe = ({ variant: t = "default", label: n, p
 			})]: t === "stack" }, y.className),
 			disabled: w,
 			children: /* @__PURE__ */ L("div", {
-				className: U("relative z-1 overflow-hidden", "flex items-center justify-center", "rounded-500 bg-surface-high", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring", "interaction-transition transition-all", "after:border-misc-border after:misc-border-size-default after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "group-focus-active:after:bg-misc-visual-down group-hover:after:bg-misc-visual-hover group-focus-visible:after:bg-misc-visual-hover", "after:interaction-transition after:transition-all", {
+				className: U("relative z-1 overflow-hidden", "flex items-center justify-center", "rounded-500 bg-surface-primary-elevated", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring", "interaction-transition transition-all", "after:border-misc-border after:misc-border-size-default after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "group-focus-active:after:bg-misc-visual-down group-hover:after:bg-misc-visual-hover group-focus-visible:after:bg-misc-visual-hover", "after:interaction-transition after:transition-all", {
 					"h-[160px] max-w-[360px] min-w-[40px]": s === "height",
 					"h-auto w-full": s === "width"
 				}, v),
@@ -12385,7 +12385,7 @@ _h.displayName = "NavigationButton";
 var vh = ({ className: e, buttonRef: t, children: n, as: r = "button", ...i }) => /* @__PURE__ */ I(r, {
 	ref: t,
 	type: "button",
-	className: H("shadow-500 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring inline-flex appearance-none items-center justify-center rounded-full outline-hidden transition-colors", "bg-surface-high text-content-secondary hover:text-content-primary focus:text-content-primary active:text-content-primary", "h-8 w-8", e),
+	className: H("shadow-500 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring inline-flex appearance-none items-center justify-center rounded-full outline-hidden transition-colors", "bg-surface-primary-elevated text-content-secondary hover:text-content-primary focus:text-content-primary active:text-content-primary", "h-8 w-8", e),
 	...i,
 	children: /* @__PURE__ */ I("div", {
 		className: "h-4 w-4",
@@ -12572,7 +12572,7 @@ var wh = ({ direction: e = "end", className: t, ref: n, ...r }) => {
 		...r,
 		type: "button",
 		ref: n,
-		className: U("group relative appearance-none", "inline-flex items-center justify-center overflow-hidden", "size-10 shrink-0", "bg-surface-high rounded-full outline-hidden", "shadow-500 ring-misc-border ring-1", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-colors", t),
+		className: U("group relative appearance-none", "inline-flex items-center justify-center overflow-hidden", "size-10 shrink-0", "bg-surface-primary-elevated rounded-full outline-hidden", "shadow-500 ring-misc-border ring-1", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-colors", t),
 		children: [/* @__PURE__ */ I("div", { className: H("pointer-events-none absolute inset-0 rounded-full", "group-hover:bg-background-borderless-subdued-hover group-active:bg-background-borderless-subdued-down", "group-focus-visible:bg-background-borderless-subdued-hover", "interaction-transition transition-colors") }), /* @__PURE__ */ I(i, { className: "text-content-primary icon-size-500 relative z-10" })]
 	});
 };
@@ -28721,7 +28721,7 @@ AF.displayName = "TextAreaAutosize";
 //#endregion
 //#region src/components/input/TextArea/TextArea.tsx
 var jF = ({ label: e, helper: t, className: n, invalid: r, trailingElement: i, autosized: a, style: o, ref: s, ...c }) => {
-	let l = Ae(), u = r || c["aria-invalid"], d = [c["aria-describedby"], t ? l : null].filter(Boolean).join(" ") || void 0, f = U("rounded-500 bg-surface-high w-full", "outline-hidden transition duration-200", "component-500 text-content-primary", "placeholder:text-content-tertiary", "disabled:cursor-not-allowed disabled:opacity-30", {
+	let l = Ae(), u = r || c["aria-invalid"], d = [c["aria-describedby"], t ? l : null].filter(Boolean).join(" ") || void 0, f = U("rounded-500 w-full bg-transparent", "outline-hidden transition duration-200", "component-500 text-content-primary", "placeholder:text-content-tertiary", "disabled:cursor-not-allowed disabled:opacity-30", {
 		"border-content-negative focus-visible:border-content-negative focus-visible:ring-0": r,
 		"border-misc-border hover:border-misc-border-hover focus-visible:border-content-accent focus-visible:ring-misc-focus-indicator-subdued focus-visible:misc-border-size-focus-ring": !r
 	}, n);
@@ -28768,7 +28768,7 @@ var MF = ({ title: e, description: t, loading: n, disabled: r, onClick: i, onClo
 		children: u
 	}) : null;
 	return /* @__PURE__ */ L("div", {
-		className: H("bg-surface-high relative flex flex-col items-center gap-3", o ? "px-4 pt-3 pb-4" : "p-4"),
+		className: H("bg-surface-primary-elevated relative flex flex-col items-center gap-3", o ? "px-4 pt-3 pb-4" : "p-4"),
 		children: [
 			a && /* @__PURE__ */ I("button", {
 				type: "button",
@@ -32435,7 +32435,7 @@ var KH = ({ enabled: e, onDragEnter: t, onDragOver: n, onDrop: r, onDragLeave: i
 	]);
 }, qH = ({ children: e, ref: t }) => /* @__PURE__ */ I(ou.div, {
 	ref: t,
-	className: H("misc-hairline-spacing flex flex-col", "bg-surface-high shadow-700 misc-dropdown-padding misc-dropdown-rounding outline-hidden", "misc-outer-border", "max-w-[100vw]", "max-h-[inherit]", "overflow-auto"),
+	className: H("misc-hairline-spacing flex flex-col", "bg-surface-primary-elevated shadow-700 misc-dropdown-padding misc-dropdown-rounding outline-hidden", "misc-outer-border", "max-w-[100vw]", "max-h-[inherit]", "overflow-auto"),
 	initial: {
 		opacity: 0,
 		scale: .95
@@ -32516,7 +32516,7 @@ var eU = function({ className: e, ref: t, ...n }) {
 		...n
 	});
 }, tU = ({ children: e, className: t }) => /* @__PURE__ */ I(ou.div, {
-	className: U("misc-hairline-spacing flex flex-col", "bg-surface-higher shadow-700 misc-dropdown-padding misc-dropdown-rounding outline-hidden", "misc-outer-border", "max-w-[100vw]", "overflow-auto", t),
+	className: U("misc-hairline-spacing flex flex-col", "bg-surface-primary-elevated shadow-700 misc-dropdown-padding misc-dropdown-rounding outline-hidden", "misc-outer-border", "max-w-[100vw]", "overflow-auto", t),
 	initial: {
 		opacity: 0,
 		scale: .95
@@ -32765,7 +32765,7 @@ var iU = Object.defineProperty, aU = (e, t) => iU(e, "name", {
 		e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Escape" && e.stopPropagation();
 	}, [d, n]);
 	return /* @__PURE__ */ L("label", {
-		className: U("relative cursor-pointer", "h-[calc(3.5rem-2px)] w-full p-3", "flex items-center gap-2", "bg-surface-default", "has-disabled:cursor-not-allowed has-disabled:opacity-30", e),
+		className: U("relative cursor-pointer", "h-[calc(3.5rem-2px)] w-full p-3", "flex items-center gap-2", "bg-surface-primary-elevated", "has-disabled:cursor-not-allowed has-disabled:opacity-30", e),
 		children: [
 			/* @__PURE__ */ I(F, { className: "text-content-secondary pointer-events-none h-4 w-4 shrink-0" }),
 			/* @__PURE__ */ I("input", {
@@ -32968,7 +32968,7 @@ var YU = ({ triggerProps: e, children: t, className: n, withPortal: r, open: i,
 				collisionPadding: a,
 				onClick: (e) => e.stopPropagation(),
 				children: p ? /* @__PURE__ */ L(ou.div, {
-					className: U("flex flex-col overflow-hidden", "bg-surface-high shadow-700 misc-dropdown-rounding misc-outer-border outline-hidden", "max-h-[inherit] max-w-[100vw]"),
+					className: U("flex flex-col overflow-hidden", "bg-surface-primary-elevated shadow-700 misc-dropdown-rounding misc-outer-border outline-hidden", "max-h-[inherit] max-w-[100vw]"),
 					...XU,
 					children: [
 						/* @__PURE__ */ I(VU, {
@@ -33033,7 +33033,7 @@ var $U = (({ as: e, icon: t, title: n, description: r, href: i, className: a, di
 			className: "body-500 text-content-secondary line-clamp-2",
 			children: r
 		})]
-	})] }), d = H("rounded-500 flex items-start gap-4 px-4 py-4", "border-misc-border bg-surface-higher border transition-colors duration-150 ease-in-out", "overflow-hidden text-start", "cursor-pointer", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", "hover:border-misc-border-hover", "active:border-misc-border-down", "focus-visible:border-misc-border-hover", "h-auto w-full grow", { "pointer-events-none cursor-not-allowed opacity-50": o }, a), f = e || (i ? "a" : "button"), p = {
+	})] }), d = H("rounded-500 flex items-start gap-4 px-4 py-4", "border-misc-border bg-surface-primary-elevated border transition-colors duration-150 ease-in-out", "overflow-hidden text-start", "cursor-pointer", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", "hover:border-misc-border-hover", "active:border-misc-border-down", "focus-visible:border-misc-border-hover", "h-auto w-full grow", { "pointer-events-none cursor-not-allowed opacity-50": o }, a), f = e || (i ? "a" : "button"), p = {
 		className: d,
 		onClick: s
 	};
@@ -33259,7 +33259,7 @@ var xW = sW, SW = lW, CW = pW, wW = hW, TW = ({ children: e }) => /* @__PURE__ *
 				onOpenAutoFocus: (e) => {
 					h && e.preventDefault();
 				},
-				className: U("bg-surface-higher shadow-700 misc-dropdown-rounding outline-hidden", "max-w-[100vw]", "overflow-auto", o && "misc-outer-border", l),
+				className: U("bg-surface-primary-elevated shadow-700 misc-dropdown-rounding outline-hidden", "max-w-[100vw]", "overflow-auto", o && "misc-outer-border", l),
 				side: e,
 				align: t,
 				alignOffset: f || 0,
@@ -33329,7 +33329,7 @@ var DW = 175, OW = typeof window < "u" ? Ne : Oe, kW = ({ label: e, isSelected:
 				onBlur: g,
 				onKeyDown: h,
 				autoFocus: !0,
-				className: "component-semi-strong-500 rounded-200 bg-surface-higher text-content-primary outline-content-accent col-start-1 row-start-1 min-w-0 border-none px-2 py-1 outline-1 outline-solid",
+				className: "component-semi-strong-500 rounded-200 bg-surface-primary-elevated text-content-primary outline-content-accent col-start-1 row-start-1 min-w-0 border-none px-2 py-1 outline-1 outline-solid",
 				"data-testid": "board-section-input",
 				"aria-label": "Section name"
 			})]
@@ -33623,7 +33623,7 @@ eG.displayName = "CheckboxPullDown";
 var tG = ({ selection: e, reserveSelection: t, productLabel: n, imagesLabel: r, statusLabel: i, listingScoreLabel: a, className: o }) => {
 	let s = !e && t ? "min-w-[308px]" : "min-w-60";
 	return /* @__PURE__ */ L("div", {
-		className: U("bg-surface-high flex flex-col gap-2 pt-2", o),
+		className: U("bg-surface-primary-elevated flex flex-col gap-2 pt-2", o),
 		children: [/* @__PURE__ */ L("div", {
 			className: "flex items-center px-4",
 			children: [e && /* @__PURE__ */ I(eG, {
@@ -34219,12 +34219,12 @@ var dG = /* @__PURE__ */ gt((() => {
 }), EG = ({ image: e, cardLink: t, categoryLink: n, direction: r = "vertical", title: i, description: a, authorName: o, authorAvatar: s, border: c = !0, ...l }) => {
 	let u = Pe(() => t ? xe(t, { className: H("rounded-500 absolute h-full w-full outline-hidden", "interaction-transition focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring transition-all focus-visible:outline-hidden") }) : null, [t]), d = Pe(() => n ? xe(n, { className: yG({ direction: r }) }) : null, [n, r]);
 	return /* @__PURE__ */ L("div", {
-		className: H("@container", "relative flex-1", "rounded-500 bg-surface-high", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", { "after:border-misc-border after:border": c }),
+		className: H("@container", "relative flex-1", "rounded-500 bg-surface-primary-elevated", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", { "after:border-misc-border after:border": c }),
 		...l,
 		children: [u, /* @__PURE__ */ L("div", {
 			className: gG({ direction: r }),
 			children: [/* @__PURE__ */ I("div", {
-				className: H(bG({ direction: r }), { "bg-surface-higher": !e }),
+				className: H(bG({ direction: r }), { "bg-surface-primary-elevated": !e }),
 				children: e
 			}), /* @__PURE__ */ L("div", {
 				className: _G({ direction: r }),
@@ -34398,7 +34398,7 @@ var PG = ({ checkerboard: t, cover: n, imageUrl: r, loading: i, bottomRightIcon:
 	let s = r ? `url(${r})` : void 0;
 	return /* @__PURE__ */ L("div", {
 		...o,
-		className: U("rounded-200 border-misc-divider relative h-10 w-10 shrink-0 border bg-center bg-no-repeat", n ? "bg-cover" : "bg-contain", i && "bg-surface-default", t && "bg-damier-checker", o.className),
+		className: U("rounded-200 border-misc-divider relative h-10 w-10 shrink-0 border bg-center bg-no-repeat", n ? "bg-cover" : "bg-contain", i && "bg-surface-primary", t && "bg-damier-checker", o.className),
 		style: {
 			backgroundImage: i ? void 0 : s,
 			...o.style
@@ -34826,7 +34826,7 @@ var tK = W("rounded-300 component-semi-strong-300 inline-flex h-5 w-fit items-ce
 		e.stopPropagation();
 	};
 	return /* @__PURE__ */ L("div", {
-		className: U("bg-surface-high flex flex-col gap-3", d && [
+		className: U("bg-surface-primary-elevated flex flex-col gap-3", d && [
 			"hover:bg-background-subdued-down cursor-pointer",
 			"outline-hidden transition-colors",
 			"focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"
@@ -34899,7 +34899,7 @@ var tK = W("rounded-300 component-semi-strong-300 inline-flex h-5 w-fit items-ce
 	onClick: n,
 	...a,
 	ref: i,
-	className: U("group bg-surface-high flex w-full items-center py-3 ps-4 text-start", "border-b border-transparent", "cursor-pointer outline-hidden transition-colors", "hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:opacity-30", r),
+	className: U("group bg-surface-primary-elevated flex w-full items-center py-3 ps-4 text-start", "border-b border-transparent", "cursor-pointer outline-hidden transition-colors", "hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:opacity-30", r),
 	children: /* @__PURE__ */ L("span", {
 		className: "flex items-center gap-4 ps-3",
 		children: [/* @__PURE__ */ I("span", {
@@ -34916,7 +34916,7 @@ uK.displayName = "ProductListNewItem";
 //#region src/components/content/ProductTile/ProductTile.tsx
 var dK = ({ title: e, imageUrl: t, sellScore: n, mediaCount: r, onClick: i, hasUnpublishedChanges: a = !1, unpublishedChangesLabel: o, className: s }) => /* @__PURE__ */ L("div", {
 	onClick: i,
-	className: U("rounded-500 bg-surface-high relative flex cursor-pointer items-center justify-start gap-3 p-1 pe-9", "border-misc-hairline misc-border-size-hairline hover:border-misc-border-emphasized", "active:bg-background-subdued-down", s),
+	className: U("rounded-500 bg-surface-primary-elevated relative flex cursor-pointer items-center justify-start gap-3 p-1 pe-9", "border-misc-hairline misc-border-size-hairline hover:border-misc-border-emphasized", "active:bg-background-subdued-down", s),
 	children: [/* @__PURE__ */ I(oK, {
 		imageUrl: t,
 		alt: e,
@@ -35568,7 +35568,7 @@ var rq = ({ isOver: e, label: t, className: n }) => /* @__PURE__ */ L("div", {
 	return /* @__PURE__ */ L("button", {
 		...i,
 		ref: r,
-		className: U("group relative flex appearance-none outline-hidden", "bg-surface-high min-h-[64px] min-w-[64px]", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", t),
+		className: U("group relative flex appearance-none outline-hidden", "bg-surface-primary-elevated min-h-[64px] min-w-[64px]", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", t),
 		children: [n, Mm.isMobile ? /* @__PURE__ */ I("span", {
 			className: "rounded-500 absolute inset-e-3 top-3 z-10 flex size-10 items-center justify-center bg-white",
 			children: /* @__PURE__ */ I(x, { className: "size-5" })
@@ -35614,7 +35614,7 @@ var aq = ({ index: e, title: t, children: n, className: r, ...i }) => /* @__PURE
 		})]
 	})]
 }), oq = ({ title: e, description: t, icon: n, action: r, className: i }) => /* @__PURE__ */ L("div", {
-	className: U("rounded-500 border-misc-border bg-surface-higher flex flex-col gap-4 border p-4", i),
+	className: U("rounded-500 border-misc-border bg-surface-primary-elevated flex flex-col gap-4 border p-4", i),
 	children: [/* @__PURE__ */ L("div", {
 		className: "flex min-w-0 flex-col gap-0.5",
 		children: [/* @__PURE__ */ L("div", {
@@ -35640,7 +35640,7 @@ oq.displayName = "Task";
 //#region src/components/content/Tile/TileFont.tsx
 function sq({ name: e, label: t, badge: n, className: r, ...i }) {
 	return /* @__PURE__ */ L("div", {
-		className: U("size-full p-3", "flex flex-col", "bg-surface-default text-center", r),
+		className: U("size-full p-3", "flex flex-col", "bg-surface-primary text-center", r),
 		role: "presentation",
 		...i,
 		children: [/* @__PURE__ */ I("div", {
@@ -35671,7 +35671,7 @@ function cq({ children: e, className: t, ...n }) {
 //#region src/components/content/Tile/TileIcon.tsx
 function lq({ icon: e, className: t, ...n }) {
 	return /* @__PURE__ */ I("div", {
-		className: U("flex size-full items-center justify-center", "text-content-tertiary bg-surface-low", t),
+		className: U("flex size-full items-center justify-center", "text-content-tertiary bg-surface-primary-grouped", t),
 		...n,
 		children: wd(e) ? /* @__PURE__ */ I(e, { className: "size-8" }) : e
 	});
@@ -35894,11 +35894,11 @@ Nq.displayName = "TileSelectable";
 function Pq({ icon: e, iconDarkMode: t, aspectRatio: n = "1/1", className: r, children: i, ...a }) {
 	let [o, s] = n.split("/").map(Number), c = o / s;
 	return /* @__PURE__ */ L("div", {
-		className: U("size-full p-2", "flex items-center justify-center", "bg-surface-low text-content-primary", r),
+		className: U("size-full p-2", "flex items-center justify-center", "bg-surface-primary-grouped text-content-primary", r),
 		role: "presentation",
 		...a,
 		children: [/* @__PURE__ */ I("div", {
-			className: H("rounded-200 bg-surface-high relative flex items-center justify-center", {
+			className: H("rounded-200 bg-surface-primary-elevated relative flex items-center justify-center", {
 				"h-auto w-full": c >= 1,
 				"h-full w-auto": c < 1
 			}),
@@ -35962,7 +35962,7 @@ var zq = (({ as: e = "button", layout: t = "fixedHeight128", aspectRatio: n = "1
 	type: e === "button" ? "button" : void 0,
 	...g,
 	children: [/* @__PURE__ */ L("div", {
-		className: U("relative isolate overflow-hidden", "rounded-400 bg-surface-default", "group-focus-visible/tile:ring-misc-focus-indicator group-focus-visible/tile:misc-border-size-focus-ring", "interaction-transition transition-shadow", "before:pointer-events-none before:absolute before:inset-0 before:z-8 before:content-['']", "before:interaction-transition before:transition-colors", "after:pointer-events-none after:absolute after:inset-0 after:z-9 after:content-['']", "after:border-misc-border after:misc-border-size-default after:rounded-[inherit]", "after:interaction-transition after:transition-all", "group-data-[checked=true]/tile:after:border-content-accent group-data-[checked=true]/tile:after:misc-border-size-selection", "group-data-[checked=true]/tile:after:shadow-[inset_0_0_0_1px_var(--color-content-white-inverted-primary)]", {
+		className: U("relative isolate overflow-hidden", "rounded-400 bg-surface-primary", "group-focus-visible/tile:ring-misc-focus-indicator group-focus-visible/tile:misc-border-size-focus-ring", "interaction-transition transition-shadow", "before:pointer-events-none before:absolute before:inset-0 before:z-8 before:content-['']", "before:interaction-transition before:transition-colors", "after:pointer-events-none after:absolute after:inset-0 after:z-9 after:content-['']", "after:border-misc-border after:misc-border-size-default after:rounded-[inherit]", "after:interaction-transition after:transition-all", "group-data-[checked=true]/tile:after:border-content-accent group-data-[checked=true]/tile:after:misc-border-size-selection", "group-data-[checked=true]/tile:after:shadow-[inset_0_0_0_1px_var(--color-content-white-inverted-primary)]", {
 			"w-full min-w-21": t === "fluidWidth",
 			"h-32": t === "fixedHeight128",
 			"group-hover/tile:before:bg-misc-visual-hover": u,
@@ -36051,7 +36051,7 @@ var Vq = W("rounded-400 interaction-transition focus-visible:ring-misc-focus-ind
 		...o,
 		children: [
 			/* @__PURE__ */ I("div", {
-				className: H("rounded-200 flex size-12 shrink-0 items-center justify-center", s ? "bg-background-accent-subdued" : "bg-surface-default"),
+				className: H("rounded-200 flex size-12 shrink-0 items-center justify-center", s ? "bg-background-accent-subdued" : "bg-surface-primary"),
 				children: /* @__PURE__ */ I(t, { className: H("size-5", s ? "text-content-accent" : "text-content-subdued-primary") })
 			}),
 			/* @__PURE__ */ I("span", {
@@ -36521,7 +36521,7 @@ NJ.displayName = "DialogCloseButton";
 var PJ = ({ children: e }) => /* @__PURE__ */ L("div", {
 	className: "rounded-t-500 sticky top-0 overflow-hidden",
 	children: [/* @__PURE__ */ I("div", {
-		className: "bg-surface-higher py-4 ps-4 pe-[60px]",
+		className: "bg-surface-primary-elevated py-4 ps-4 pe-[60px]",
 		children: /* @__PURE__ */ I("div", {
 			className: "flex items-center py-[5px]",
 			children: /* @__PURE__ */ I(wJ, {
@@ -36632,7 +36632,7 @@ var PJ = ({ children: e }) => /* @__PURE__ */ L("div", {
 	defaultVariants: { layout: "default" }
 }), BJ = W([
 	"group/dialog",
-	"bg-surface-higher relative outline-hidden",
+	"bg-surface-primary-elevated relative outline-hidden",
 	"radix-state-closed:animate-dialog-leave radix-state-open:animate-dialog-enter"
 ], {
 	variants: { layout: {
@@ -36728,7 +36728,7 @@ var HJ = ({ "aria-label": e = "Close", ...t }) => /* @__PURE__ */ I(OJ, {
 	onPointerDownOutside: (e) => {
 		n?.(e), !e.defaultPrevented && e.target instanceof Element && (!e.target.closest("[data-dialog-overlay]") || e.target.closest("[data-sonner-toast]")) && e.preventDefault();
 	},
-	className: U("bg-surface-high shadow-700 misc-dialog-rounding relative h-full w-full outline-hidden", "radix-state-closed:animate-dialog-leave radix-state-open:animate-dialog-enter", e),
+	className: U("bg-surface-primary-elevated shadow-700 misc-dialog-rounding relative h-full w-full outline-hidden", "radix-state-closed:animate-dialog-leave radix-state-open:animate-dialog-enter", e),
 	...r,
 	children: t
 }), WJ = ({ className: e, children: t, ...n }) => /* @__PURE__ */ I(hJ, {
@@ -36816,7 +36816,7 @@ var JJ = Se(null), YJ = () => {
 		className: U("relative isolate z-10 flex shrink-0 items-center gap-4 px-6 pt-4", e),
 		children: [/* @__PURE__ */ I("div", {
 			"aria-hidden": "true",
-			className: H("bg-surface-high border-misc-border-default absolute inset-x-0 top-0 -bottom-4 -z-10 border-b", "interaction-transition transition-opacity", n ? "opacity-100" : "opacity-0")
+			className: H("bg-surface-primary-elevated border-misc-border-default absolute inset-x-0 top-0 -bottom-4 -z-10 border-b", "interaction-transition transition-opacity", n ? "opacity-100" : "opacity-0")
 		}), t]
 	});
 }, ZJ = ({ leading: e, trailing: t, className: n }) => /* @__PURE__ */ L("div", {
@@ -36856,7 +36856,7 @@ var JJ = Se(null), YJ = () => {
 		children: n
 	})]
 }), eY = ({ image: e, multiple: t = !1, previousImage: n, className: r }) => {
-	let i = H("bg-surface-high absolute inset-1 overflow-hidden", "border-misc-hairline misc-border-size-hairline rounded-200 border", "transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]", "[&_img]:size-full [&_img]:object-cover");
+	let i = H("bg-surface-primary-elevated absolute inset-1 overflow-hidden", "border-misc-hairline misc-border-size-hairline rounded-200 border", "transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]", "[&_img]:size-full [&_img]:object-cover");
 	return /* @__PURE__ */ L("div", {
 		className: H("relative size-10", r),
 		children: [/* @__PURE__ */ I("div", {
@@ -37021,7 +37021,7 @@ cY.displayName = "PillToggle";
 //#region src/components/editor/Pill/Pill.tsx
 var lY = ({ className: e, ...t }) => /* @__PURE__ */ I("div", {
 	...t,
-	className: U("flex w-max items-center gap-1 p-1", "rounded-500 shadow-500 misc-outer-border", "bg-surface-higher", e)
+	className: U("flex w-max items-center gap-1 p-1", "rounded-500 shadow-500 misc-outer-border", "bg-surface-primary-elevated", e)
 });
 lY.Button = iY, lY.Divider = aY, lY.Toggle = cY;
 //#endregion
@@ -37060,10 +37060,10 @@ var uY = (e) => /* @__PURE__ */ I("svg", {
 				/* @__PURE__ */ L("div", {
 					className: "relative flex min-h-0 flex-1",
 					children: [o && /* @__PURE__ */ I("div", {
-						className: H("bg-surface-high border-misc-divider flex w-80 shrink-0 flex-col overflow-y-auto border-e", "max-[800px]:border-misc-border max-[800px]:rounded-500 max-[800px]:absolute max-[800px]:inset-y-3 max-[800px]:start-3 max-[800px]:z-10 max-[800px]:w-74 max-[800px]:border", !m && "max-[800px]:hidden"),
+						className: H("bg-surface-primary-elevated border-misc-divider flex w-80 shrink-0 flex-col overflow-y-auto border-e", "max-[800px]:border-misc-border max-[800px]:rounded-500 max-[800px]:absolute max-[800px]:inset-y-3 max-[800px]:start-3 max-[800px]:z-10 max-[800px]:w-74 max-[800px]:border", !m && "max-[800px]:hidden"),
 						children: o
 					}), /* @__PURE__ */ L("div", {
-						className: "bg-surface-low relative min-w-0 flex-1",
+						className: "bg-surface-canvas relative min-w-0 flex-1",
 						children: [(s || o) && /* @__PURE__ */ I("div", {
 							className: H("absolute start-3 top-3 z-20", o && m && "max-[800px]:start-80"),
 							children: /* @__PURE__ */ L(lY, {
@@ -37115,11 +37115,11 @@ var mY = ({ open: e, defaultOpen: t, onOpenChange: n, trigger: r, title: i, side
 					children: i
 				}),
 				/* @__PURE__ */ I("div", {
-					className: H("bg-surface-high border-misc-divider w-70 shrink-0 overflow-y-auto border-e p-4", "max-[800px]:border-misc-border max-[800px]:rounded-500 max-[800px]:absolute max-[800px]:inset-y-3 max-[800px]:start-3 max-[800px]:z-10 max-[800px]:w-70 max-[800px]:border", !p && "max-[800px]:hidden"),
+					className: H("bg-surface-primary-elevated border-misc-divider w-70 shrink-0 overflow-y-auto border-e p-4", "max-[800px]:border-misc-border max-[800px]:rounded-500 max-[800px]:absolute max-[800px]:inset-y-3 max-[800px]:start-3 max-[800px]:z-10 max-[800px]:w-70 max-[800px]:border", !p && "max-[800px]:hidden"),
 					children: a
 				}),
 				/* @__PURE__ */ L("div", {
-					className: "bg-surface-low relative min-w-0 flex-1",
+					className: "bg-surface-primary-grouped relative min-w-0 flex-1",
 					children: [/* @__PURE__ */ I("div", {
 						className: H("absolute start-3 top-3 z-20 hidden max-[800px]:block", p && "max-[800px]:start-76"),
 						children: /* @__PURE__ */ I(lY, { children: /* @__PURE__ */ I(lY.Button, {
@@ -37409,7 +37409,7 @@ var mY = ({ open: e, defaultOpen: t, onOpenChange: n, trigger: r, title: i, side
 		})
 	});
 }, bY = ({ visualSrc: e, visual: t, overline: n, title: r, description: i, children: a, onClose: o, closeAriaLabel: s }) => /* @__PURE__ */ L("div", {
-	className: "rounded-500 bg-surface-higher shadow-700 relative flex w-full max-w-[640px] flex-col overflow-hidden",
+	className: "rounded-500 bg-surface-primary-elevated shadow-700 relative flex w-full max-w-[640px] flex-col overflow-hidden",
 	children: [
 		o && /* @__PURE__ */ I(Bd, {
 			className: "absolute inset-e-4 top-4 z-10",
@@ -37507,7 +37507,7 @@ var xY = ({ open: e, defaultOpen: t, onOpenChange: n, trigger: r, visual: i, tit
 	});
 }, SY = ({ children: e, className: t, ref: n, ...r }) => /* @__PURE__ */ I("div", {
 	ref: n,
-	className: U("border-misc-border bg-surface-high shadow-700 misc-hairline-spacing misc-dropdown-padding misc-dropdown-rounding relative flex flex-col", t),
+	className: U("border-misc-border bg-surface-primary-elevated shadow-700 misc-hairline-spacing misc-dropdown-padding misc-dropdown-rounding relative flex flex-col", t),
 	...r,
 	children: e
 });
@@ -38409,7 +38409,7 @@ var lhe = typeof window < "u" ? Ne : Oe, uhe = function() {
 		{
 			variant: "default",
 			highlighted: !1,
-			class: "bg-surface-high"
+			class: "bg-transparent"
 		},
 		{
 			variant: "editor",
@@ -38509,7 +38509,7 @@ var _he = {
 				...u,
 				"aria-invalid": e || u["aria-invalid"],
 				className: Sd([
-					"w-full appearance-none rounded-500 bg-surface-high component-500 text-content-primary placeholder-neutral-600 outline-hidden transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
+					"w-full appearance-none rounded-500 bg-transparent component-500 text-content-primary placeholder-neutral-600 outline-hidden transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
 					"focus-visible:misc-border-size-focus-ring",
 					e ? ["border border-content-negative caret-content-primary", "focus-visible:border-content-negative focus-visible:ring-background-negative-subdued-down"] : [
 						"border caret-content-accent",
@@ -38586,7 +38586,7 @@ var vhe = (e) => !e || e.length !== 7 ? !1 : tX(e).isValid(), xX = (e) => `#${e}
 	variants: {
 		variant: {
 			editor: "bg-background-subdued hover:outline-misc-border outline-transparent",
-			default: "bg-surface-high outline-misc-border hover:outline-misc-border-hover"
+			default: "outline-misc-border hover:outline-misc-border-hover"
 		},
 		disabled: {
 			true: "cursor-not-allowed opacity-50",
@@ -38989,7 +38989,7 @@ var Dhe = ({ color: e, onChange: t, label: n }) => {
 		className: U("relative isolate z-10 flex shrink-0 flex-col gap-2.5 px-4 pt-4", t),
 		children: [/* @__PURE__ */ I("div", {
 			"aria-hidden": "true",
-			className: H("bg-surface-high border-misc-border-default absolute inset-x-0 top-0 -bottom-4 -z-10 border-b", "interaction-transition transition-opacity", n ? "opacity-100" : "opacity-0")
+			className: H("bg-surface-primary-elevated border-misc-border-default absolute inset-x-0 top-0 -bottom-4 -z-10 border-b", "interaction-transition transition-opacity", n ? "opacity-100" : "opacity-0")
 		}), e]
 	});
 };
@@ -39011,7 +39011,7 @@ var AX = ({ children: e, className: t }) => {
 		m.current = null;
 	}), [m, t]), /* @__PURE__ */ L("div", {
 		ref: d,
-		className: U("border-misc-border-default bg-surface-higher flex shrink-0 flex-col border-b px-4", f && "cursor-grab active:cursor-grabbing", u),
+		className: U("border-misc-border-default bg-surface-primary-elevated flex shrink-0 flex-col border-b px-4", f && "cursor-grab active:cursor-grabbing", u),
 		...f ? p : {},
 		children: [/* @__PURE__ */ L("div", {
 			className: H("flex h-14 items-center gap-2", c && "-mb-2"),
@@ -39182,7 +39182,7 @@ var Nhe = ({ x: e, y: t }, { width: n, height: r }, i, a) => ({
 				height: c ? void 0 : i
 			},
 			onKeyDown: g,
-			className: U("border-misc-border-default bg-surface-higher shadow-600 misc-dropdown-rounding fixed isolate z-50 flex flex-col overflow-clip border", t),
+			className: U("border-misc-border-default bg-surface-primary-elevated shadow-600 misc-dropdown-rounding fixed isolate z-50 flex flex-col overflow-clip border", t),
 			children: e
 		})
 	});
@@ -49267,7 +49267,7 @@ var h4 = /* @__PURE__ */ new Set(), g4 = ({ label: t, previewUrl: n, previewBitm
 				style: { aspectRatio: c },
 				children: s || (r ? /* @__PURE__ */ I("canvas", {
 					ref: _,
-					className: H("bg-surface-default bg-damier-checker bg-size-[32px_32px] bg-top-left"),
+					className: H("bg-surface-primary bg-damier-checker bg-size-[32px_32px] bg-top-left"),
 					style: {
 						width: "100%",
 						height: "100%",
@@ -49277,7 +49277,7 @@ var h4 = /* @__PURE__ */ new Set(), g4 = ({ label: t, previewUrl: n, previewBitm
 				}) : /* @__PURE__ */ I(nh, {
 					src: n ?? "",
 					alt: "",
-					className: H("bg-surface-default bg-damier-checker bg-size-[32px_32px] bg-top-left", "interaction-transition transition-opacity", { "opacity-0": v }),
+					className: H("bg-surface-primary bg-damier-checker bg-size-[32px_32px] bg-top-left", "interaction-transition transition-opacity", { "opacity-0": v }),
 					fadeInDuration: 0,
 					style: {
 						width: "100%",
@@ -49401,8 +49401,8 @@ var zye = ({ type: e = "prompt", image: t, icon: n = P, label: r, ...i }) => {
 		"border-misc-border text-content-secondary misc-border-size-default",
 		"hover:bg-background-borderless-subdued-hover",
 		"active:bg-background-borderless-subdued-down",
-		"focus-visible:bg-surface-high",
-		"disabled:bg-surface-high"
+		"focus-visible:bg-surface-primary-elevated",
+		"disabled:bg-surface-primary-elevated"
 	], n ? "gap-2 ps-2 pe-2.5" : "px-2.5", r),
 	...a,
 	children: [!!n && /* @__PURE__ */ I("span", {
@@ -49568,7 +49568,7 @@ var Vye = W(["component-500 text-content-primary flex flex-row items-center"], {
 		})]
 	});
 }, Gye = 4, S4 = ({ title: e, onBack: t, backLabel: n, loading: r = !1, children: i, className: a }) => /* @__PURE__ */ L("div", {
-	className: U("bg-surface-higher misc-outer-border shadow-700 misc-dropdown-rounding flex flex-col overflow-clip pb-1", a),
+	className: U("bg-surface-primary-elevated misc-outer-border shadow-700 misc-dropdown-rounding flex flex-col overflow-clip pb-1", a),
 	children: [/* @__PURE__ */ I(b4, {
 		title: e,
 		onBack: t,
@@ -49602,7 +49602,7 @@ var Kye = ({ status: e }) => {
 		let e = requestAnimationFrame(() => s(!0));
 		return () => cancelAnimationFrame(e);
 	}, []), /* @__PURE__ */ L("div", {
-		className: U("bg-surface-alternate rounded-500 flex min-h-12 w-full items-center justify-between gap-3 px-3 py-2", i),
+		className: U("bg-surface-secondary rounded-500 flex min-h-12 w-full items-center justify-between gap-3 px-3 py-2", i),
 		...a,
 		children: [/* @__PURE__ */ L("div", {
 			role: "status",
@@ -49632,7 +49632,7 @@ var Kye = ({ status: e }) => {
 			h.current?.focus();
 		}, 0);
 	}), /* @__PURE__ */ L("div", {
-		className: H("rounded-area-500 bg-surface-high box-border flex w-[440px] items-center gap-2 py-2 ps-3 pe-2", "border-misc-border border transition duration-200", "hover:border-misc-border-hover", "focus-within:border-content-accent focus-within:ring-misc-focus-indicator-subdued focus-within:misc-border-size-focus-ring", n && "cursor-not-allowed opacity-30"),
+		className: H("rounded-area-500 bg-surface-primary-elevated box-border flex w-[440px] items-center gap-2 py-2 ps-3 pe-2", "border-misc-border border transition duration-200", "hover:border-misc-border-hover", "focus-within:border-content-accent focus-within:ring-misc-focus-indicator-subdued focus-within:misc-border-size-focus-ring", n && "cursor-not-allowed opacity-30"),
 		onClick: () => {
 			n || h.current?.focus();
 		},
@@ -49744,7 +49744,7 @@ var Xye = ({ label: e, className: t, description: n, tooltip: r, isTooltipDisabl
 		...i,
 		onFocus: o,
 		onKeyDown: s,
-		className: U("appearance-none", "h-14 w-10", "rounded-500 bg-surface-high outline-hidden", "transition duration-200", "component-strong-900 text-content-primary", "disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:misc-border-size-focus-ring", "px-0 text-center", e ? [
+		className: U("appearance-none", "h-14 w-10", "rounded-500 bg-transparent outline-hidden", "transition duration-200", "component-strong-900 text-content-primary", "disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:misc-border-size-focus-ring", "px-0 text-center", e ? [
 			"border-content-negative caret-content-primary border",
 			"focus-visible:border-content-negative focus-visible:ring-background-negative-subdued-down",
 			"text-content-negative"
@@ -50795,7 +50795,7 @@ var c3 = (e) => e.isFile === !0, l3 = (e) => e.isDirectory === !0, Tbe = new Int
 	ref: a,
 	type: "button",
 	disabled: i,
-	className: U("cursor-pointer outline-hidden", "flex h-10 w-full items-center gap-2 px-3", "rounded-500 border-misc-border bg-surface-high border", "focus-visible:border-content-accent hover:border-neutral-400", "invalid:border-content-negative invalid:hover:border-content-negative invalid:focus-visible:border-content-negative", "component-500 text-content-primary font-medium placeholder-neutral-600", "focus-visible:ring-misc-focus-indicator-subdued", "focus-visible:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50", "transition duration-200", r),
+	className: U("cursor-pointer outline-hidden", "flex h-10 w-full items-center gap-2 px-3", "rounded-500 border-misc-border bg-surface-primary-elevated border", "focus-visible:border-content-accent hover:border-neutral-400", "invalid:border-content-negative invalid:hover:border-content-negative invalid:focus-visible:border-content-negative", "component-500 text-content-primary font-medium placeholder-neutral-600", "focus-visible:ring-misc-focus-indicator-subdued", "focus-visible:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50", "transition duration-200", r),
 	...o,
 	children: [
 		t,
@@ -50875,7 +50875,7 @@ var _3 = .5, v3 = 2, Abe = 80, jbe = 80, y3 = ({ src: e, alt: t, width: n = jbe,
 		},
 		children: [
 			/* @__PURE__ */ L("div", {
-				className: H("rounded-400 bg-surface-default relative h-full w-full overflow-hidden", "after:rounded-400 after:pointer-events-none after:absolute after:inset-0 after:content-['']", s ? "after:shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "after:shadow-[inset_0_0_0_1px_var(--color-misc-border)]"),
+				className: H("rounded-400 relative h-full w-full overflow-hidden", "after:rounded-400 after:pointer-events-none after:absolute after:inset-0 after:content-['']", s ? "after:shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "after:shadow-[inset_0_0_0_1px_var(--color-misc-border)]"),
 				children: [o ? /* @__PURE__ */ I("div", {
 					className: "flex h-full w-full items-center justify-center",
 					children: /* @__PURE__ */ I(rG, { className: "size-6" })
@@ -50974,7 +50974,7 @@ var Mbe = ({ referenceImages: e, disabled: t }) => {
 		className: H("w-full border-none bg-transparent p-0", p ? "py-0" : "py-[11px]", "component-500 text-content-primary placeholder:text-content-tertiary leading-[19px]", "outline-hidden focus:ring-0", "disabled:cursor-not-allowed")
 	});
 	return /* @__PURE__ */ L("div", {
-		className: U("rounded-450 border-misc-border bg-surface-default shadow-500 flex w-[320px] flex-col overflow-hidden border", "focus-within:ring-misc-focus-indicator-subdued focus-within:misc-border-size-focus-ring", u),
+		className: U("rounded-450 border-misc-border bg-surface-primary shadow-500 flex w-[320px] flex-col overflow-hidden border", "focus-within:ring-misc-focus-indicator-subdued focus-within:misc-border-size-focus-ring", u),
 		children: [p ? /* @__PURE__ */ L("div", {
 			className: "flex items-center gap-3 px-3 py-2.5",
 			children: [/* @__PURE__ */ I("div", {
@@ -51064,7 +51064,7 @@ var w3 = "relative z-10 flex h-8 w-10 items-center justify-center text-white-alp
 	children: [
 		/* @__PURE__ */ I(Hh, {
 			"aria-hidden": "true",
-			className: "rounded-500 border-misc-border-default bg-surface-high pointer-events-none absolute inset-s-0 top-0 h-8 w-10 border transition-transform duration-200 ease-out data-[state=checked]:translate-x-10 data-[state=checked]:rtl:-translate-x-10"
+			className: "rounded-500 border-misc-border-default bg-surface-primary-elevated pointer-events-none absolute inset-s-0 top-0 h-8 w-10 border transition-transform duration-200 ease-out data-[state=checked]:translate-x-10 data-[state=checked]:rtl:-translate-x-10"
 		}),
 		/* @__PURE__ */ I(Nm, {
 			content: n?.off,
@@ -51098,7 +51098,7 @@ E3.displayName = "IconSwitch";
 var Pbe = W([
 	"group rounded-500 relative w-full overflow-hidden",
 	"misc-border-size-default border border-solid",
-	"bg-surface-default",
+	"bg-surface-primary",
 	"outline-hidden transition-all",
 	"focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
 	"focus-visible:border-content-accent focus-visible:bg-background-accent-subdued",
@@ -51130,7 +51130,7 @@ var Pbe = W([
 	} },
 	defaultVariants: { error: !1 }
 }), Ibe = ({ dropFileLabel: e }) => /* @__PURE__ */ I("div", {
-	className: "rounded-500 bg-surface-default absolute inset-0 flex overflow-hidden",
+	className: "rounded-500 bg-surface-primary absolute inset-0 flex overflow-hidden",
 	children: /* @__PURE__ */ I("div", {
 		className: "rounded-500 border-content-accent bg-background-accent-subdued flex flex-1 flex-col items-center justify-center border p-6",
 		children: /* @__PURE__ */ I("p", {
@@ -51198,7 +51198,7 @@ var Pbe = W([
 					!O && /* @__PURE__ */ L("div", {
 						className: "rounded-500 pointer-events-none absolute inset-0",
 						"aria-hidden": "true",
-						children: [/* @__PURE__ */ I("div", { className: "rounded-500 bg-surface-default absolute inset-0" }), /* @__PURE__ */ I("div", { className: "rounded-500 bg-damier-checker bg-damier-large absolute inset-0 bg-top-left opacity-6" })]
+						children: [/* @__PURE__ */ I("div", { className: "rounded-500 bg-surface-primary absolute inset-0" }), /* @__PURE__ */ I("div", { className: "rounded-500 bg-damier-checker bg-damier-large absolute inset-0 bg-top-left opacity-6" })]
 					}),
 					/* @__PURE__ */ I("div", { className: Fbe({ error: r }) }),
 					k && /* @__PURE__ */ I(Pd, {
@@ -51410,9 +51410,9 @@ var Rbe = W([
 	disabled: s,
 	...l,
 	children: /* @__PURE__ */ L("div", {
-		className: H("rounded-450 w-full p-px transition-all duration-150 ease-out", "group-radix-state-checked:bg-transparent", "group-radix-state-unchecked:bg-surface-higher"),
+		className: H("rounded-450 w-full p-px transition-all duration-150 ease-out", "group-radix-state-checked:bg-transparent", "group-radix-state-unchecked:bg-surface-primary-elevated"),
 		children: [/* @__PURE__ */ L("div", {
-			className: H("bg-surface-higher flex w-full items-center gap-2 p-4 transition-all duration-150 ease-out", a ? "rounded-t-400" : "rounded-400"),
+			className: H("bg-surface-primary-elevated flex w-full items-center gap-2 p-4 transition-all duration-150 ease-out", a ? "rounded-t-400" : "rounded-400"),
 			children: [
 				/* @__PURE__ */ I($K, {
 					asChild: !0,
@@ -51464,10 +51464,10 @@ P3.displayName = "OptionGroup", P3.Item = N3;
 var F3 = ({ title: e, description: t, imageSrc: n, altLabel: r = "", showCheckerboard: i = !1, className: a, ref: o, ...s }) => /* @__PURE__ */ L(ZK, {
 	...s,
 	ref: o,
-	className: U("bg-surface-default rounded-500 relative flex w-full cursor-pointer items-center gap-3 py-1 ps-1 pe-8 text-start outline-hidden", "radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border)]", "hover:radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]", "focus-visible:radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]", "active:radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border-down)]", "radix-state-checked:shadow-[inset_0_0_0_2px_var(--color-content-accent)]", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", a),
+	className: U("bg-surface-primary rounded-500 relative flex w-full cursor-pointer items-center gap-3 py-1 ps-1 pe-8 text-start outline-hidden", "radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border)]", "hover:radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]", "focus-visible:radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]", "active:radix-state-unchecked:shadow-[inset_0_0_0_1px_var(--color-misc-border-down)]", "radix-state-checked:shadow-[inset_0_0_0_2px_var(--color-content-accent)]", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", a),
 	children: [
 		/* @__PURE__ */ L("div", {
-			className: "rounded-concentric-500-4px bg-surface-default relative h-24 w-24 shrink-0 self-center overflow-hidden",
+			className: "rounded-concentric-500-4px bg-surface-primary relative h-24 w-24 shrink-0 self-center overflow-hidden",
 			children: [
 				i && /* @__PURE__ */ I("div", { className: "bg-damier-neutral-200 bg-damier-large absolute inset-0 bg-top-left" }),
 				/* @__PURE__ */ I("img", {
@@ -51573,7 +51573,7 @@ var L3 = ({ value: e, onChange: t, placeholder: n, options: r = [], leadingSlot:
 	}, [t]);
 	return /* @__PURE__ */ L("div", {
 		role: "textbox",
-		className: U("flex min-h-[113px] flex-col", "rounded-500 bg-surface-high", "interaction-transition border transition-colors", "border-misc-border [&:not(:focus-within):hover]:border-misc-border-hover", "focus-within:border-content-accent focus-within:ring-misc-focus-indicator-subdued focus-within:misc-border-size-focus-ring", l),
+		className: U("flex min-h-[113px] flex-col", "rounded-500", "interaction-transition border transition-colors", "border-misc-border [&:not(:focus-within):hover]:border-misc-border-hover", "focus-within:border-content-accent focus-within:ring-misc-focus-indicator-subdued focus-within:misc-border-size-focus-ring", l),
 		children: [/* @__PURE__ */ I("div", {
 			className: H("px-3 pt-3", c && "opacity-50"),
 			children: /* @__PURE__ */ I(AF, {
@@ -51710,7 +51710,7 @@ var z3 = {
 	}),
 	children: [/* @__PURE__ */ L("div", {
 		"aria-hidden": !0,
-		className: H("aspect-square", "relative flex items-center justify-center overflow-hidden", "w-full", "rounded-500 border-misc-border bg-surface-high border", "group-radix-state-unchecked/PresetGroupItem:hover:border-misc-border-hover", "group-radix-state-unchecked/PresetGroupItem:group-focus-visible/PresetGroupItem:border-misc-border-hover", "group-radix-state-unchecked/PresetGroupItem:active:border-misc-border-down", "group-radix-state-checked/PresetGroupItem:border-content-accent group-radix-state-checked/PresetGroupItem:misc-border-size-selection", "group-focus-visible/PresetGroupItem:ring-misc-focus-indicator group-focus-visible/PresetGroupItem:misc-border-size-focus-ring"),
+		className: H("aspect-square", "relative flex items-center justify-center overflow-hidden", "w-full", "rounded-500 border-misc-border bg-surface-primary-elevated border", "group-radix-state-unchecked/PresetGroupItem:hover:border-misc-border-hover", "group-radix-state-unchecked/PresetGroupItem:group-focus-visible/PresetGroupItem:border-misc-border-hover", "group-radix-state-unchecked/PresetGroupItem:active:border-misc-border-down", "group-radix-state-checked/PresetGroupItem:border-content-accent group-radix-state-checked/PresetGroupItem:misc-border-size-selection", "group-focus-visible/PresetGroupItem:ring-misc-focus-indicator group-focus-visible/PresetGroupItem:misc-border-size-focus-ring"),
 		children: [i ? /* @__PURE__ */ I("img", {
 			src: i,
 			alt: "",
@@ -51747,7 +51747,7 @@ var Ube = 204, Wbe = [
 		n
 	]);
 	return /* @__PURE__ */ L("div", {
-		className: U("relative flex flex-col gap-6", "rounded-500 border-misc-border bg-surface-high shadow-500 border", "px-3 pt-1.5 pb-3", "transition-shadow duration-200", "focus-within:ring-misc-focus-indicator focus-within:misc-border-size-focus-ring", m),
+		className: U("relative flex flex-col gap-6", "rounded-500 border-misc-border bg-surface-primary-elevated shadow-500 border", "px-3 pt-1.5 pb-3", "transition-shadow duration-200", "focus-within:ring-misc-focus-indicator focus-within:misc-border-size-focus-ring", m),
 		children: [
 			/* @__PURE__ */ I("style", { children: Wbe }),
 			/* @__PURE__ */ I("div", {
@@ -51870,7 +51870,7 @@ var Kbe = ({ reaction: e, selected: t = !1, onClick: n }) => /* @__PURE__ */ I("
 		children: e
 	})
 }), qbe = ({ onSelectReaction: e, reactions: t, className: n, ...r }) => /* @__PURE__ */ I("div", {
-	className: U("bg-surface-higher shadow-700 misc-outer-border misc-dropdown-rounding misc-dropdown-padding flex w-fit", n),
+	className: U("bg-surface-primary-elevated shadow-700 misc-outer-border misc-dropdown-rounding misc-dropdown-padding flex w-fit", n),
 	...r,
 	children: t.map((t) => /* @__PURE__ */ I(Kbe, {
 		reaction: t,
@@ -52010,10 +52010,10 @@ var K3 = (e) => /* @__PURE__ */ I(bX, {
 	type: "search",
 	leadingIcon: F,
 	borderLess: !0,
-	className: H(e.invalid ? "bg-surface-high" : [
-		"bg-surface-alternate",
+	className: H(e.invalid ? "bg-surface-primary-elevated" : [
+		"bg-surface-secondary",
 		"hover:border-transparent hover:bg-neutral-200",
-		"focus-visible:bg-surface-high"
+		"focus-visible:bg-surface-primary-elevated"
 	], e.className)
 });
 K3.displayName = "SearchInput";
@@ -53023,7 +53023,7 @@ j6.displayName = "SearchableSelectItem";
 var Gxe = W([
 	"outline-hidden",
 	"flex w-full gap-1",
-	"rounded-500 border-misc-border bg-surface-high border",
+	"rounded-500 border-misc-border bg-surface-primary-elevated border",
 	"focus-visible:border-content-accent hover:border-neutral-400",
 	"invalid:border-content-negative invalid:hover:border-content-negative invalid:focus-visible:border-content-negative",
 	"component-500 text-content-primary font-medium placeholder-neutral-600",
@@ -53121,7 +53121,7 @@ var N6 = ({ className: e, placeholder: t, search: n, onOpenChange: r, children:
 				style: { minHeight: c },
 				children: [
 					a && /* @__PURE__ */ I("div", {
-						className: "rounded-t-500 border-misc-border bg-surface-high absolute inset-x-0 top-0 z-1 overflow-hidden border-b",
+						className: "rounded-t-500 border-misc-border bg-surface-primary-elevated absolute inset-x-0 top-0 z-1 overflow-hidden border-b",
 						children: /* @__PURE__ */ I(VU, {
 							...n,
 							tabIndex: -1,
@@ -53131,7 +53131,7 @@ var N6 = ({ className: e, placeholder: t, search: n, onOpenChange: r, children:
 						})
 					}),
 					s && /* @__PURE__ */ I("div", {
-						className: "bg-surface-high absolute inset-x-0 top-[55px] z-1 overflow-hidden px-3 py-2",
+						className: "bg-surface-primary-elevated absolute inset-x-0 top-[55px] z-1 overflow-hidden px-3 py-2",
 						children: s
 					}),
 					/* @__PURE__ */ I(Lxe, {
@@ -53338,7 +53338,7 @@ var Kxe = ({ value: e, defaultValue: t = 0, onValueChange: n, onNumberFieldValue
 F6.Item = qxe;
 //#endregion
 //#region src/components/input/TagField/TagField.tsx
-var Jxe = W(["group rounded-500 border-misc-border bg-surface-high text-500 text-content-primary placeholder-content-tertiary w-full appearance-none border font-medium", "focus-within:misc-border-size-focus-ring outline-hidden transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"], {
+var Jxe = W(["group rounded-500 border-misc-border text-500 text-content-primary placeholder-content-tertiary w-full appearance-none border font-medium", "focus-within:misc-border-size-focus-ring outline-hidden transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"], {
 	variants: { invalid: {
 		true: ["border-content-negative border caret-black", "focus-within:border-content-negative focus-within:ring-background-negative-subdued-down"],
 		false: [
@@ -53368,7 +53368,7 @@ var Jxe = W(["group rounded-500 border-misc-border bg-surface-high text-500 text
 							ref: o,
 							...s,
 							className: U([
-								"peer rounded-500 bg-surface-high caret-content-accent w-full appearance-none border-transparent p-0 px-0.5",
+								"peer rounded-500 caret-content-accent w-full appearance-none border-transparent bg-transparent p-0 px-0.5",
 								"outline-hidden transition duration-200 focus-visible:border-transparent focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
 								"component-500 text-content-primary placeholder-content-tertiary leading-none",
 								r
@@ -53594,11 +53594,11 @@ var Qxe = ({ label: e, description: t, avatar: n, trailingElement: r, className:
 		ref: o,
 		type: "button",
 		disabled: i,
-		className: U("group rounded-500 flex w-full items-center justify-between gap-3 overflow-hidden p-2", "bg-surface-high hover:bg-background-borderless-subdued-hover focus-visible:bg-background-subdued active:bg-background-borderless-subdued-down", "transition-colors duration-150 ease-out", "focus-visible:ring-misc-focus-indicator focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-30", "cursor-pointer", a),
+		className: U("group rounded-500 flex w-full items-center justify-between gap-3 overflow-hidden p-2", "bg-surface-primary-elevated hover:bg-background-borderless-subdued-hover focus-visible:bg-background-subdued active:bg-background-borderless-subdued-down", "transition-colors duration-150 ease-out", "focus-visible:ring-misc-focus-indicator focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-30", "cursor-pointer", a),
 		...s,
 		children: [
 			/* @__PURE__ */ I("div", {
-				className: H("rounded-200 bg-surface-high flex shrink-0 items-center justify-center p-2", c ? "shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "shadow-[inset_0_0_0_0.5px_var(--color-misc-hairline-emphasized)]"),
+				className: H("rounded-200 bg-surface-primary-elevated flex shrink-0 items-center justify-center p-2", c ? "shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "shadow-[inset_0_0_0_0.5px_var(--color-misc-hairline-emphasized)]"),
 				children: (() => {
 					let e = n;
 					return xe(e, { className: H("text-content-primary h-5 w-5", e.props.className) });
@@ -53905,7 +53905,7 @@ var s8 = xSe, c8 = OSe, l8 = ASe, u8 = jSe, d8 = NSe, PSe = ({ children: e, clas
 			className: H("rounded-200 border-misc-border misc-border-size-default block h-10 w-10 object-cover", "border-misc-border hover:border-content-accent-hover active:border-content-accent-down")
 		}), /* @__PURE__ */ I("div", {
 			className: "rounded-200 bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
-			children: /* @__PURE__ */ I(v, { className: "text-surface-default icon-size-500" })
+			children: /* @__PURE__ */ I(v, { className: "text-surface-primary icon-size-500" })
 		})]
 	})
 }) : /* @__PURE__ */ I("div", {
@@ -53959,7 +53959,7 @@ h8.HeaderItem = ISe, h8.ValueItem = m8, h8.Trailing = f8, h8.Leading = p8;
 var LSe = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i, time: a, avatar: o, unread: s = !1, stacked: c = !1, selectable: l = !0, showUnread: u = !0 }) => {
 	let [d, f] = Fe(!1), p = Ae();
 	return /* @__PURE__ */ L("div", {
-		className: H("group bg-surface-high flex cursor-pointer gap-3 p-2 pe-4", { "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down": l && e === "event" }),
+		className: H("group bg-surface-primary-elevated flex cursor-pointer gap-3 p-2 pe-4", { "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down": l && e === "event" }),
 		children: [/* @__PURE__ */ L("div", {
 			className: "w-full pb-2",
 			children: [/* @__PURE__ */ L("div", {
@@ -54022,7 +54022,7 @@ var LSe = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i,
 	});
 }, RSe = ({ name: e, message: t, info: n, avatar: r, className: i, status: a, overlayButton: o, isHighlighted: s = !1, largeText: c = !1, ...l }) => /* @__PURE__ */ I("div", {
 	...l,
-	className: U("group bg-surface-high relative flex gap-3 px-4 py-2", i),
+	className: U("group bg-surface-primary-elevated relative flex gap-3 px-4 py-2", i),
 	children: /* @__PURE__ */ L("div", {
 		className: "grid w-full grid-cols-[auto_1fr] grid-rows-none gap-x-2 gap-y-1",
 		children: [
@@ -54370,7 +54370,7 @@ var YSe = Object.defineProperty, XSe = (e, t) => YSe(e, "name", {
 		activePillColor: "#141414"
 	}
 }, D8 = ({ className: e, ...t }) => /* @__PURE__ */ I(T8, {
-	className: U("group relative flex-1", "min-h-10 min-w-0 px-1", "flex items-center justify-center", "rounded-500 outline-hidden", "misc-border-size-default radix-state-off:border-transparent radix-state-on:border-misc-border", "radix-state-off:bg-transparent radix-state-on:bg-surface-high", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "component-500 radix-state-off:text-content-secondary radix-state-on:text-content-primary", "radix-state-off:enabled:hover:text-content-primary radix-state-off:enabled:focus-visible:text-content-primary radix-state-off:enabled:active:text-content-primary", "interaction-transition transition-colors", "disabled:cursor-not-allowed disabled:opacity-30", e),
+	className: U("group relative flex-1", "min-h-10 min-w-0 px-1", "flex items-center justify-center", "rounded-500 outline-hidden", "misc-border-size-default radix-state-off:border-transparent radix-state-on:border-misc-border", "radix-state-off:bg-transparent radix-state-on:bg-surface-primary-elevated", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "component-500 radix-state-off:text-content-secondary radix-state-on:text-content-primary", "radix-state-off:enabled:hover:text-content-primary radix-state-off:enabled:focus-visible:text-content-primary radix-state-off:enabled:active:text-content-primary", "interaction-transition transition-colors", "disabled:cursor-not-allowed disabled:opacity-30", e),
 	...t
 }), sCe = ({ icon: e, label: t, tooltip: n, side: r = "top", withPortal: i = !0, disabled: a, className: o, ...s }) => {
 	let c = wd(e) ? /* @__PURE__ */ I(e, { className: "icon-size-500" }) : e;
@@ -54702,10 +54702,9 @@ K8.displayName = "TabsItem";
 //#endregion
 //#region src/components/navigation/Tabs/Tabs.tsx
 var q8 = {
-	"surface-default": "from-surface-default",
-	"surface-high": "from-surface-high",
-	"surface-higher": "from-surface-higher"
-}, J8 = ({ children: e, className: t, overflow: n = "wrap", bgGradientColor: a = "surface-high", ...o }) => {
+	"surface-primary": "from-surface-primary",
+	"surface-primary-elevated": "from-surface-primary-elevated"
+}, J8 = ({ children: e, className: t, overflow: n = "wrap", bgGradientColor: a = "surface-primary-elevated", ...o }) => {
 	let s = V(null), [c, l] = Fe(!1), [u, d] = Fe(!0), f = B(() => {
 		if (n === "scroll" && s.current) {
 			let { scrollLeft: e, scrollWidth: t, offsetWidth: n } = s.current;
@@ -54805,10 +54804,9 @@ Z8.displayName = "TagNavigationItem";
 //#endregion
 //#region src/components/navigation/TagNavigation/TagNavigation.tsx
 var Q8 = {
-	"surface-default": "from-surface-default",
-	"surface-high": "from-surface-high",
-	"surface-higher": "from-surface-higher"
-}, $8 = ({ children: e, className: t, overflow: n = "wrap", bgGradientColor: a = "surface-high", onScroll: o, ...s }) => {
+	"surface-primary": "from-surface-primary",
+	"surface-primary-elevated": "from-surface-primary-elevated"
+}, $8 = ({ children: e, className: t, overflow: n = "wrap", bgGradientColor: a = "surface-primary-elevated", onScroll: o, ...s }) => {
 	let c = V(null), [l, u] = Fe(!1), [d, f] = Fe(!0), p = B(() => {
 		if (n === "scroll" && c.current) {
 			let { scrollLeft: e, scrollWidth: t, offsetWidth: n } = c.current;
@@ -55446,7 +55444,7 @@ var DCe = () => /* @__PURE__ */ I("div", {
 		variant: "borderless",
 		density: "regular",
 		loading: !1
-	}), "rounded-500 bg-surface-high size-h-500 inline-flex items-center justify-center px-3", "border-misc-border misc-border-size-default", "hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:border-content-accent", "focus-visible:ring-misc-focus-indicator-subdued", i),
+	}), "rounded-500 bg-surface-primary-elevated size-h-500 inline-flex items-center justify-center px-3", "border-misc-border misc-border-size-default", "hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:border-content-accent", "focus-visible:ring-misc-focus-indicator-subdued", i),
 	...s,
 	children: /* @__PURE__ */ I(eK, {
 		score: e,
@@ -55493,7 +55491,7 @@ var PCe = W("flex size-300 shrink-0 items-center justify-center rounded-full", {
 }), v5 = ({ type: e, preview: t, label: n, description: r, action: i, className: a, progress: o, isStacked: s = !1, dismissible: c = !0, closeLabel: l, onClose: u }) => {
 	let d = !!e || !!t, f = o !== void 0 && Number.isFinite(o) ? Math.min(100, Math.max(0, o)) : null, p = r ?? (e === "progress" && f !== null ? FCe(f / 100) : void 0);
 	return /* @__PURE__ */ L("div", {
-		className: U("rounded-500 border-misc-border bg-surface-high shadow-500 relative isolate flex min-h-[56px] w-72 items-center gap-3 overflow-hidden border py-2", d ? "px-3" : "ps-4 pe-3", a),
+		className: U("rounded-500 border-misc-border bg-surface-primary-elevated shadow-500 relative isolate flex min-h-[56px] w-72 items-center gap-3 overflow-hidden border py-2", d ? "px-3" : "ps-4 pe-3", a),
 		children: [
 			e === "danger" && /* @__PURE__ */ I("div", {
 				"aria-hidden": "true",
@@ -56241,8 +56239,8 @@ var cwe = /*#__PURE__*/ z.forwardRef(function(e, t) {
 	#n;
 }, fwe = W(["rounded-500 flex items-center gap-3 border px-4 py-3", "transition-colors duration-200"], {
 	variants: { status: {
-		pending: "border-misc-border bg-surface-high",
-		loading: "border-misc-border bg-surface-high",
+		pending: "border-misc-border bg-surface-primary-elevated",
+		loading: "border-misc-border bg-surface-primary-elevated",
 		completed: "border-accent-500 bg-background-accent-subdued"
 	} },
 	defaultVariants: { status: "pending" }
@@ -56469,7 +56467,7 @@ M5.displayName = "PanelHeaderTrailing";
 var N5 = ({ children: e, className: t, isSticky: n = !0 }) => {
 	let r = ve.count(e) === 1;
 	return /* @__PURE__ */ I("div", {
-		className: U("flex w-full flex-col gap-3 px-4 pt-4", n && "bg-surface-high sticky inset-x-0 top-0 z-20", r ? "pb-3" : "pb-2", t),
+		className: U("flex w-full flex-col gap-3 px-4 pt-4", n && "bg-surface-primary-elevated sticky inset-x-0 top-0 z-20", r ? "pb-3" : "pb-2", t),
 		children: e
 	});
 };
@@ -57465,7 +57463,7 @@ var m7 = {
 }), h7 = ({ size: e = "default", className: t, children: n, ...r }) => /* @__PURE__ */ I("button", {
 	...r,
 	type: "button",
-	className: U("bg-surface-high flex w-10 items-center justify-center outline-hidden", e === "compact" ? "size-h-400" : "size-h-500", "border-misc-border border", "first:rounded-s-500 first:border-e-0", "last:rounded-e-500 last:border-s-0", "hover:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", "group-hover:border-misc-border-hover", "group-focus-visible:border-misc-border-hover", "disabled:pointer-events-none", "group", t),
+	className: U("bg-surface-primary-elevated flex w-10 items-center justify-center outline-hidden", e === "compact" ? "size-h-400" : "size-h-500", "border-misc-border border", "first:rounded-s-500 first:border-e-0", "last:rounded-e-500 last:border-s-0", "hover:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", "group-hover:border-misc-border-hover", "group-focus-visible:border-misc-border-hover", "disabled:pointer-events-none", "group", t),
 	tabIndex: -1,
 	children: /* @__PURE__ */ I("span", {
 		className: "group-disabled:opacity-30",
@@ -57633,7 +57631,7 @@ var m7 = {
 					ref: p,
 					disabled: o,
 					type: "number",
-					className: H(d ? "size-h-400" : "size-h-500", "component-500 border-misc-border bg-surface-high text-content-primary w-10 border-0 border-y p-0 text-center focus:ring-0", "focus-visible:border-content-accent focus-visible:border focus-visible:outline-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:rounded-150", "focus-visible:relative focus-visible:z-10", "group-hover:not-focus-visible:border-misc-border-hover", "group-focus-visible:not-focus-visible:border-misc-border-hover", "group-disabled:opacity-30"),
+					className: H(d ? "size-h-400" : "size-h-500", "component-500 border-misc-border bg-surface-primary-elevated text-content-primary w-10 border-0 border-y p-0 text-center focus:ring-0", "focus-visible:border-content-accent focus-visible:border focus-visible:outline-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:rounded-150", "focus-visible:relative focus-visible:z-10", "group-hover:not-focus-visible:border-misc-border-hover", "group-focus-visible:not-focus-visible:border-misc-border-hover", "group-disabled:opacity-30"),
 					value: h,
 					onFocus: ee,
 					onChange: M,
@@ -58057,11 +58055,11 @@ var nTe = ({ title: e, date: t, className: n }) => /* @__PURE__ */ L("div", {
 	ref: i,
 	...a,
 	className: U({
-		"bg-surface-default": t === "surface-default",
+		"bg-surface-primary": t === "surface-default",
 		"bg-neutral-50": t === "neutral-50",
 		"bg-sand-50": t === "sand-50",
-		"to-surface-default bg-linear-to-b from-neutral-50": t === "neutral-50-top",
-		"from-surface-default bg-linear-to-b to-neutral-50": t === "neutral-50-bottom"
+		"to-surface-primary bg-linear-to-b from-neutral-50": t === "neutral-50-top",
+		"from-surface-primary bg-linear-to-b to-neutral-50": t === "neutral-50-bottom"
 	}, n),
 	children: r
 }));
@@ -58665,7 +58663,7 @@ var w7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
 	className: H("pt-e700 pb-e1000 px-4 sm:px-6 md:px-8 xl:px-10", o),
 	...s,
 	children: /* @__PURE__ */ L("div", {
-		className: H("mx-auto flex max-w-[1200px] flex-col gap-6 p-4 sm:flex-row sm:p-6 lg:gap-12 lg:p-12", "border-content-accent bg-surface-default rounded-500 border-2"),
+		className: H("mx-auto flex max-w-[1200px] flex-col gap-6 p-4 sm:flex-row sm:p-6 lg:gap-12 lg:p-12", "border-content-accent bg-surface-primary rounded-500 border-2"),
 		children: [/* @__PURE__ */ I("div", {
 			className: "flex flex-1 flex-col justify-center",
 			children: /* @__PURE__ */ L("div", {
@@ -58726,7 +58724,7 @@ var w7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
 		c
 	].some(d);
 	return /* @__PURE__ */ L("div", {
-		className: U("flex flex-col gap-6 md:flex-row md:items-start md:gap-8 lg:gap-10", "rounded-500 border-misc-border bg-surface-default border p-4 md:p-6 lg:p-10", l),
+		className: U("flex flex-col gap-6 md:flex-row md:items-start md:gap-8 lg:gap-10", "rounded-500 border-misc-border bg-surface-primary border p-4 md:p-6 lg:p-10", l),
 		...u,
 		children: [/* @__PURE__ */ L("div", {
 			className: "flex flex-1 flex-col md:max-w-[420px]",
@@ -58786,7 +58784,7 @@ var w7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
 }), LTe = ({ titleBlock: e, background: t = "lightgrey", className: n, children: r, ...i }) => /* @__PURE__ */ I("section", {
 	...i,
 	className: U("py-e700 px-4 sm:px-6 md:px-8 xl:px-10", {
-		"bg-surface-default": t === "white",
+		"bg-surface-primary": t === "white",
 		"bg-neutral-50": t === "lightgrey"
 	}, n),
 	children: /* @__PURE__ */ L("div", {
@@ -59089,7 +59087,7 @@ function QTe({ title: e, className: t, children: n, ...r }) {
 //#region src/components/website/FooterBlockV2/FooterV2Block.tsx
 function O7({ appsSectionTitle: e, appButtons: t, linksSections: n, socialLinks: r, legalLinks: i, languageSelector: a, ...o }) {
 	return /* @__PURE__ */ I("footer", {
-		className: "bg-surface-default px-4 py-6 sm:px-6 sm:pt-20 md:px-8 lg:pt-24 lg:pb-10",
+		className: "bg-surface-primary px-4 py-6 sm:px-6 sm:pt-20 md:px-8 lg:pt-24 lg:pb-10",
 		...o,
 		children: /* @__PURE__ */ L("div", {
 			className: "mx-auto flex max-w-[1200px] flex-col gap-12 md:gap-16 lg:gap-32",
@@ -59547,7 +59545,7 @@ var _Ee = ({ variant: e = "default", trustLabel: t, logos: n, ...r }) => {
 		}), /* @__PURE__ */ I("div", {
 			className: H("grid w-full flex-1 grid-cols-3 gap-3 sm:grid-cols-6 md:gap-[10px]", "lg:grid-cols-4 lg:gap-3 xl:grid-cols-6"),
 			children: n.map((e, t) => /* @__PURE__ */ I("div", {
-				className: H("bg-surface-default rounded-300 aspect-3/2 items-center justify-center overflow-hidden p-1", {
+				className: H("bg-surface-primary rounded-300 aspect-3/2 items-center justify-center overflow-hidden p-1", {
 					flex: t < 6,
 					"hidden sm:flex": t >= 6
 				}),
@@ -59606,7 +59604,7 @@ function bEe({ title: e, overline: t, className: n, ...r }) {
 //#endregion
 //#region src/components/website/OffersBlock/OffersBlock.tsx
 var xEe = ({ title: e, children: t, ...n }) => /* @__PURE__ */ I("section", {
-	className: "bg-surface-default pt-e700 pb-e1000 px-4 sm:px-6 md:px-8",
+	className: "bg-surface-primary pt-e700 pb-e1000 px-4 sm:px-6 md:px-8",
 	...n,
 	children: /* @__PURE__ */ L("div", {
 		className: "mx-auto flex max-w-[1200px] flex-col items-center",
@@ -59685,7 +59683,7 @@ var xEe = ({ title: e, children: t, ...n }) => /* @__PURE__ */ I("section", {
 				})]
 			}), r]
 		}), /* @__PURE__ */ L("div", {
-			className: H("bg-surface-default flex w-full flex-col justify-between p-6", "sm:flex-1 sm:basis-0"),
+			className: H("bg-surface-primary flex w-full flex-col justify-between p-6", "sm:flex-1 sm:basis-0"),
 			children: [/* @__PURE__ */ I("div", {
 				className: "flex h-10 w-[120px] items-center justify-start [&_img]:size-full [&_img]:object-contain [&_img]:object-left",
 				children: i
@@ -59778,7 +59776,7 @@ var xEe = ({ title: e, children: t, ...n }) => /* @__PURE__ */ I("section", {
 	})
 }), OEe = ({ titleBlock: e, background: t = "lightgrey", cta: n, children: r, className: i, ...a }) => /* @__PURE__ */ I("section", {
 	className: H("pt-e700 pb-e1000 px-4 sm:px-6 md:px-8 xl:px-10", {
-		"bg-surface-default": t === "white",
+		"bg-surface-primary": t === "white",
 		"bg-neutral-50": t === "lightgrey"
 	}, i),
 	...a,
@@ -60127,7 +60125,7 @@ var IEe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 						children: [
 							/* @__PURE__ */ I("div", {
 								"aria-hidden": !0,
-								className: "bg-surface-default pointer-events-none sticky top-0 z-1 hidden xl:block",
+								className: "bg-surface-primary pointer-events-none sticky top-0 z-1 hidden xl:block",
 								style: {
 									height: "var(--header-stack-height, var(--header-height, 5rem))",
 									marginBottom: "calc(-1 * (var(--header-stack-height, var(--header-height, 5rem)) + 1.5rem))"
@@ -60135,7 +60133,7 @@ var IEe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 							}),
 							/* @__PURE__ */ L("div", {
 								ref: c,
-								className: "bg-surface-default relative hidden xl:sticky xl:top-[var(--header-stack-height,var(--header-height))] xl:z-1 xl:block",
+								className: "bg-surface-primary relative hidden xl:sticky xl:top-[var(--header-stack-height,var(--header-height))] xl:z-1 xl:block",
 								children: [o && /* @__PURE__ */ I(K7, {
 									columnHighlights: i,
 									highlightRoundingClassName: "rounded-t-400"
@@ -60344,7 +60342,7 @@ var IEe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 		]
 	});
 }, ZEe = ({ label: e, variant: t = "neutral", children: n, ...r }) => /* @__PURE__ */ L("div", {
-	className: H("relative flex flex-col", "xl:rounded-[16px] xl:p-1.5 xl:pt-8", t === "accent" ? "xl:bg-background-pro" : "xl:bg-surface-alternate", ve.count(n) > 1 && "sm:col-span-2 xl:col-span-2"),
+	className: H("relative flex flex-col", "xl:rounded-[16px] xl:p-1.5 xl:pt-8", t === "accent" ? "xl:bg-background-pro" : "xl:bg-surface-secondary", ve.count(n) > 1 && "sm:col-span-2 xl:col-span-2"),
 	...r,
 	children: [/* @__PURE__ */ I("div", {
 		className: H("component-400 absolute inset-x-0 top-0 hidden h-8 items-center justify-center px-2 text-center xl:flex", t === "accent" ? "text-content-white-primary" : "text-content-primary"),
@@ -60422,7 +60420,7 @@ var IEe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 				/* @__PURE__ */ I("div", {
 					className: H("flex items-end justify-end xl:hidden", d && "h-10", !d && "xs:h-4 sm:h-10"),
 					children: d && /* @__PURE__ */ I("div", {
-						className: H("component-semi-strong-400 rounded-300 px-3 py-1", f === "accent" ? "bg-background-accent text-content-white-primary" : "bg-surface-alternate text-content-primary"),
+						className: H("component-semi-strong-400 rounded-300 px-3 py-1", f === "accent" ? "bg-background-accent text-content-white-primary" : "bg-surface-secondary text-content-primary"),
 						children: d
 					})
 				}),
@@ -60604,7 +60602,7 @@ var aDe = Object.assign($7, {
 			className: "component-400 text-content-white-primary absolute inset-x-0 top-0 flex h-8 items-center justify-center px-2 text-center",
 			children: c
 		}), /* @__PURE__ */ L("div", {
-			className: H("flex flex-1 flex-col gap-8 md:flex-row md:items-start xl:flex-col", "rounded-500 bg-surface-default p-4 md:p-6", !c && "border-misc-border border"),
+			className: H("flex flex-1 flex-col gap-8 md:flex-row md:items-start xl:flex-col", "rounded-500 bg-surface-primary p-4 md:p-6", !c && "border-misc-border border"),
 			children: [/* @__PURE__ */ L("div", {
 				className: "flex flex-col md:max-xl:flex-1",
 				children: [
@@ -60662,10 +60660,10 @@ var aDe = Object.assign($7, {
 	"focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
 	"interaction-transition transition-colors"
 ], { variants: { index: {
-	0: "border-misc-border bg-surface-high text-content-primary group-has-[>span:not(:nth-of-type(1)):target]/tabs:text-content-secondary group-has-[>div:not(:nth-of-type(1))_:target]/tabs:text-content-secondary group-has-[>div:not(:nth-of-type(1))_:target]/tabs:border-transparent group-has-[>div:not(:nth-of-type(1))_:target]/tabs:bg-transparent group-has-[>span:not(:nth-of-type(1)):target]/tabs:border-transparent group-has-[>span:not(:nth-of-type(1)):target]/tabs:bg-transparent",
-	1: "group-has-[>span:nth-of-type(2):target]/tabs:border-misc-border group-has-[>span:nth-of-type(2):target]/tabs:bg-surface-high group-has-[>span:nth-of-type(2):target]/tabs:text-content-primary group-has-[>div:nth-of-type(2)_:target]/tabs:border-misc-border group-has-[>div:nth-of-type(2)_:target]/tabs:bg-surface-high group-has-[>div:nth-of-type(2)_:target]/tabs:text-content-primary",
-	2: "group-has-[>span:nth-of-type(3):target]/tabs:border-misc-border group-has-[>span:nth-of-type(3):target]/tabs:bg-surface-high group-has-[>span:nth-of-type(3):target]/tabs:text-content-primary group-has-[>div:nth-of-type(3)_:target]/tabs:border-misc-border group-has-[>div:nth-of-type(3)_:target]/tabs:bg-surface-high group-has-[>div:nth-of-type(3)_:target]/tabs:text-content-primary",
-	3: "group-has-[>span:nth-of-type(4):target]/tabs:border-misc-border group-has-[>span:nth-of-type(4):target]/tabs:bg-surface-high group-has-[>span:nth-of-type(4):target]/tabs:text-content-primary group-has-[>div:nth-of-type(4)_:target]/tabs:border-misc-border group-has-[>div:nth-of-type(4)_:target]/tabs:bg-surface-high group-has-[>div:nth-of-type(4)_:target]/tabs:text-content-primary"
+	0: "border-misc-border bg-surface-primary-elevated text-content-primary group-has-[>span:not(:nth-of-type(1)):target]/tabs:text-content-secondary group-has-[>div:not(:nth-of-type(1))_:target]/tabs:text-content-secondary group-has-[>div:not(:nth-of-type(1))_:target]/tabs:border-transparent group-has-[>div:not(:nth-of-type(1))_:target]/tabs:bg-transparent group-has-[>span:not(:nth-of-type(1)):target]/tabs:border-transparent group-has-[>span:not(:nth-of-type(1)):target]/tabs:bg-transparent",
+	1: "group-has-[>span:nth-of-type(2):target]/tabs:border-misc-border group-has-[>span:nth-of-type(2):target]/tabs:bg-surface-primary-elevated group-has-[>span:nth-of-type(2):target]/tabs:text-content-primary group-has-[>div:nth-of-type(2)_:target]/tabs:border-misc-border group-has-[>div:nth-of-type(2)_:target]/tabs:bg-surface-primary-elevated group-has-[>div:nth-of-type(2)_:target]/tabs:text-content-primary",
+	2: "group-has-[>span:nth-of-type(3):target]/tabs:border-misc-border group-has-[>span:nth-of-type(3):target]/tabs:bg-surface-primary-elevated group-has-[>span:nth-of-type(3):target]/tabs:text-content-primary group-has-[>div:nth-of-type(3)_:target]/tabs:border-misc-border group-has-[>div:nth-of-type(3)_:target]/tabs:bg-surface-primary-elevated group-has-[>div:nth-of-type(3)_:target]/tabs:text-content-primary",
+	3: "group-has-[>span:nth-of-type(4):target]/tabs:border-misc-border group-has-[>span:nth-of-type(4):target]/tabs:bg-surface-primary-elevated group-has-[>span:nth-of-type(4):target]/tabs:text-content-primary group-has-[>div:nth-of-type(4)_:target]/tabs:border-misc-border group-has-[>div:nth-of-type(4)_:target]/tabs:bg-surface-primary-elevated group-has-[>div:nth-of-type(4)_:target]/tabs:text-content-primary"
 } } }), lDe = W("", { variants: { index: {
 	0: "block group-has-[>div:not(:nth-of-type(1))_:target]/tabs:hidden group-has-[>span:not(:nth-of-type(1)):target]/tabs:hidden",
 	1: "hidden group-has-[>div:nth-of-type(2)_:target]/tabs:block group-has-[>span:nth-of-type(2):target]/tabs:block",
@@ -61298,14 +61296,14 @@ var SDe = ({ titleBlock: e, content: t, ctaLabel: n, ctaLink: r, ...i }) => /* @
 	className: U("relative flex flex-col", "items-start gap-4 ps-8", "lg:items-center lg:gap-11 lg:ps-0", r),
 	children: [
 		/* @__PURE__ */ I("div", {
-			className: "rounded-500 bg-surface-default border-misc-border flex h-9 items-center justify-center border px-3",
+			className: "rounded-500 bg-surface-primary border-misc-border flex h-9 items-center justify-center border px-3",
 			children: /* @__PURE__ */ I("p", {
 				className: "component-600 text-content-primary max-w-full truncate text-center",
 				children: e
 			})
 		}),
 		/* @__PURE__ */ L("div", {
-			className: "rounded-500 bg-surface-default border-misc-border flex w-full flex-col gap-2 border p-6",
+			className: "rounded-500 bg-surface-primary border-misc-border flex w-full flex-col gap-2 border p-6",
 			children: [/* @__PURE__ */ I("h3", {
 				className: "component-700 text-content-primary text-pretty",
 				children: t
@@ -61316,7 +61314,7 @@ var SDe = ({ titleBlock: e, content: t, ctaLabel: n, ctaLink: r, ...i }) => /* @
 		}),
 		/* @__PURE__ */ I("span", {
 			"aria-hidden": "true",
-			className: H("bg-surface-default border-misc-border absolute size-3 rounded-full border", "start-0 top-3", "lg:start-1/2 lg:top-14 lg:-translate-x-1/2 lg:rtl:translate-x-1/2")
+			className: H("bg-surface-primary border-misc-border absolute size-3 rounded-full border", "start-0 top-3", "lg:start-1/2 lg:top-14 lg:-translate-x-1/2 lg:rtl:translate-x-1/2")
 		})
 	]
 }), r9 = (({ as: e = "a", icon: t, title: n, description: r, image: i, ref: a, ...o }) => o.href ? /* @__PURE__ */ L(e, {
@@ -61460,7 +61458,7 @@ var FDe = ({ title: e, logos: t, className: n, ...r }) => {
 			}), /* @__PURE__ */ I("div", {
 				className: H("flex flex-wrap items-center justify-center gap-6", "max-w-[432px] lg:max-w-none lg:flex-nowrap"),
 				children: i.map((e, t) => /* @__PURE__ */ I("div", {
-					className: "bg-surface-default rounded-500 flex size-32 shrink-0 items-center justify-center overflow-clip",
+					className: "bg-surface-primary rounded-500 flex size-32 shrink-0 items-center justify-center overflow-clip",
 					children: /* @__PURE__ */ I("div", {
 						className: "flex size-24 items-center justify-center",
 						children: e
@@ -61519,7 +61517,7 @@ var FDe = ({ title: e, logos: t, className: n, ...r }) => {
 	let a = ve.toArray(n), o = a.length;
 	return /* @__PURE__ */ I("section", {
 		className: U("pt-e700 pb-e1000 w-full px-4 sm:px-6 md:px-8 xl:px-10", {
-			"bg-surface-default": t === "white",
+			"bg-surface-primary": t === "white",
 			"bg-neutral-50": t === "lightgrey"
 		}, r),
 		...i,
@@ -62190,7 +62188,7 @@ function N9({ children: e, className: t, label: n = "Main" }) {
 		}), /* @__PURE__ */ I(xOe, {
 			ref: f,
 			style: { insetInlineStart: SOe },
-			className: U("bg-surface-default shadow-700 rounded-500 ring-misc-border-default absolute top-full z-50 mt-3 ring-[0.5px]", "h-[var(--radix-navigation-menu-viewport-height,0px)] w-[var(--radix-navigation-menu-viewport-width,0px)]", "max-w-[calc(100vw-2rem)] origin-top overflow-hidden", "duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]", a ? "transition-[opacity,transform,width,height,inset-inline-start]" : "transition-[opacity,transform]", l ? "translate-y-0 opacity-100" : "-translate-y-3 opacity-0", "data-[state=closed]:animate-nav-content-fade-out")
+			className: U("bg-surface-primary shadow-700 rounded-500 ring-misc-border-default absolute top-full z-50 mt-3 ring-[0.5px]", "h-[var(--radix-navigation-menu-viewport-height,0px)] w-[var(--radix-navigation-menu-viewport-width,0px)]", "max-w-[calc(100vw-2rem)] origin-top overflow-hidden", "duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]", a ? "transition-[opacity,transform,width,height,inset-inline-start]" : "transition-[opacity,transform]", l ? "translate-y-0 opacity-100" : "-translate-y-3 opacity-0", "data-[state=closed]:animate-nav-content-fade-out")
 		})]
 	}) : /* @__PURE__ */ I("nav", {
 		"aria-label": n,
@@ -62406,7 +62404,7 @@ var R9 = (({ as: e = "a", className: t, title: n, subtitle: r, ref: i, ...a }) =
 			children: r
 		})]
 	}), /* @__PURE__ */ I("span", {
-		className: "bg-surface-default flex size-7 shrink-0 items-center justify-center rounded-full transition-transform group-hover:translate-x-0.5 group-active:translate-x-0.5 rtl:group-hover:-translate-x-0.5 rtl:group-active:-translate-x-0.5",
+		className: "bg-surface-primary flex size-7 shrink-0 items-center justify-center rounded-full transition-transform group-hover:translate-x-0.5 group-active:translate-x-0.5 rtl:group-hover:-translate-x-0.5 rtl:group-active:-translate-x-0.5",
 		children: /* @__PURE__ */ I(m, {
 			"aria-hidden": !0,
 			className: "text-content-primary icon-size-300"
@@ -62447,7 +62445,7 @@ function DOe({ trigger: e, children: t, stackTarget: n }) {
 		}) : e] }, Te(e) ? e.key ?? t : t);
 	});
 	return n ? /* @__PURE__ */ L(_e, { children: [e, nee(/* @__PURE__ */ I("div", {
-		className: "bg-surface-default shadow-700 rounded-500 ring-misc-border-default flex min-h-64 text-start whitespace-normal ring-[0.5px]",
+		className: "bg-surface-primary shadow-700 rounded-500 ring-misc-border-default flex min-h-64 text-start whitespace-normal ring-[0.5px]",
 		children: f
 	}), n)] }) : a ? /* @__PURE__ */ L(M9, { children: [/* @__PURE__ */ I(vOe, {
 		asChild: !0,
@@ -62462,7 +62460,7 @@ function DOe({ trigger: e, children: t, stackTarget: n }) {
 	})] }) : /* @__PURE__ */ L("li", {
 		className: "group/panel",
 		children: [e, /* @__PURE__ */ I("div", {
-			className: H("absolute inset-x-0 top-full z-50 mx-auto mt-3 hidden w-max", "group-focus-within/panel:block group-hover/panel:block", "before:absolute before:inset-x-0 before:-top-7 before:h-7 before:content-['']", "bg-surface-default shadow-700 rounded-500 ring-misc-border-default ring-[0.5px]", "max-w-[calc(100vw-2rem)] min-w-96"),
+			className: H("absolute inset-x-0 top-full z-50 mx-auto mt-3 hidden w-max", "group-focus-within/panel:block group-hover/panel:block", "before:absolute before:inset-x-0 before:-top-7 before:h-7 before:content-['']", "bg-surface-primary shadow-700 rounded-500 ring-misc-border-default ring-[0.5px]", "max-w-[calc(100vw-2rem)] min-w-96"),
 			children: /* @__PURE__ */ I("div", {
 				className: "rounded-500 flex min-h-64 w-full overflow-x-auto text-start whitespace-normal",
 				children: f
@@ -62478,7 +62476,7 @@ var B9 = ({ className: e, title: t, children: n, footer: r, background: i = "sur
 		ref: a,
 		role: "group",
 		"aria-labelledby": s,
-		className: U("flex flex-col p-4 lg:min-w-[280px] lg:p-6", i === "sand-50" ? "lg:bg-sand-50" : "lg:bg-surface-default", e),
+		className: U("flex flex-col p-4 lg:min-w-[280px] lg:p-6", i === "sand-50" ? "lg:bg-sand-50" : "lg:bg-surface-primary", e),
 		...o,
 		children: [
 			/* @__PURE__ */ I("span", {