@photoroom/ui 0.1.543 → 0.1.545

package/index.mjs

@@ -6910,7 +6910,7 @@ var sd = W("focus-visible:misc-border-size-focus-ring relative inline-flex w-fit
 			secondary: "bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
 			borderless: "text-content-primary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-borderless-subdued-down",
 			"secondary-outline": "border-misc-border misc-border-size-default text-content-primary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-borderless-subdued-down bg-transparent",
-			negative: "bg-negative-alpha-1 text-content-negative hover:bg-negative-alpha-2 focus-visible:bg-negative-alpha-2 focus-visible:ring-misc-focus-indicator active:bg-negative-alpha-3",
+			negative: "bg-negative-alpha-100 text-content-negative hover:bg-negative-alpha-200 focus-visible:bg-negative-alpha-200 focus-visible:ring-misc-focus-indicator active:bg-negative-alpha-300",
 			pro: "bg-content-accent! bg-background-pro hover:bg-background-pro-hover focus-visible:ring-misc-focus-indicator focus-visible:bg-background-pro-hover active:bg-background-pro-down text-white",
 			flash: "bg-background-flash hover:bg-background-flash-hover focus-visible:bg-background-flash-hover focus-visible:ring-misc-focus-indicator active:bg-background-flash-down text-content-black-primary",
 			"on-dark": "bg-background-white hover:bg-background-white-hover focus-visible:bg-background-white-hover focus-visible:ring-misc-white-focus-indicator active:bg-background-white text-black",
@@ -6949,49 +6949,49 @@ var sd = W("focus-visible:misc-border-size-focus-ring relative inline-flex w-fit
 			size: "medium",
 			density: "compact",
 			icon: !1,
-			class: "content-to-edge-spacious-px-400 size-h-400"
+			class: "size-h-400 px-3.25"
 		},
 		{
 			size: "medium",
 			density: "regular",
 			icon: !1,
-			class: "content-to-edge-spacious-px-500 size-h-500"
+			class: "size-h-500 px-4"
 		},
 		{
 			size: "medium",
 			density: "spacious",
 			icon: !1,
-			class: "content-to-edge-spacious-px-600 size-h-600"
+			class: "size-h-600 px-4.75"
 		},
 		{
 			size: "large",
 			density: "spacious",
 			icon: !1,
-			class: "content-to-edge-spacious-px-700 size-h-700"
+			class: "size-h-700 px-5.5"
 		},
 		{
 			size: "medium",
 			density: "compact",
 			icon: !0,
-			class: "content-to-edge-spacious-pe-400 icon-to-edge-spacious-ps-400 size-h-400"
+			class: "size-h-400 ps-2.75 pe-3.25"
 		},
 		{
 			size: "medium",
 			density: "regular",
 			icon: !0,
-			class: "content-to-edge-spacious-pe-500 icon-to-edge-spacious-ps-500 size-h-500"
+			class: "size-h-500 ps-3.5 pe-4"
 		},
 		{
 			size: "medium",
 			density: "spacious",
 			icon: !0,
-			class: "content-to-edge-spacious-pe-600 icon-to-edge-spacious-ps-600 size-h-600"
+			class: "size-h-600 ps-4.25 pe-4.75"
 		},
 		{
 			size: "large",
 			density: "spacious",
 			icon: !0,
-			class: "content-to-edge-spacious-pe-700 icon-to-edge-spacious-ps-700 size-h-700"
+			class: "size-h-700 ps-4.75 pe-5.5"
 		}
 	]
 }), Hre = W("flex items-center justify-center", {
@@ -7031,8 +7031,8 @@ var sd = W("focus-visible:misc-border-size-focus-ring relative inline-flex w-fit
 		class: "component-600"
 	}]
 }), Ure = {
-	medium: "text-to-leading-500",
-	large: "text-to-leading-600"
+	medium: "ms-2",
+	large: "ms-2.5"
 }, fd = (({ as: t = "button", type: n, className: r, loading: i = !1, variant: a = "accent", size: o = "medium", density: s = "spacious", stacked: c, children: l, icon: u, ref: d, ...f }) => {
 	let p = Bre({
 		icon: u,
@@ -7152,7 +7152,7 @@ var Wre = ({ open: e, onClose: t, closeLabel: n, text: r, inlineAction: i, child
 }) }), md = (({ as: e = "button", icon: t, label: n, className: r, ref: i, ...a }) => /* @__PURE__ */ L(e, {
 	ref: i,
 	...a,
-	className: H("inline-flex items-center justify-center gap-1.5", "content-to-edge-pe-500 size-h-500 shrink-0 ps-2.5", "rounded-500 border-misc-border misc-border-size-default", "bg-background-default hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "component-500 text-content-white-primary-inverted", "interaction-transition transition-colors", r),
+	className: H("inline-flex items-center justify-center gap-1.5", "size-h-500 shrink-0 ps-2.5 pe-3", "rounded-500 border-misc-border misc-border-size-default", "bg-background-default hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "component-500 text-content-white-primary-inverted", "interaction-transition transition-colors", r),
 	children: [/* @__PURE__ */ I(t, { className: "icon-size-400" }), n]
 }));
 md.displayName = "AppButton";
@@ -11027,7 +11027,7 @@ var _h = Jm, vh = Qm, yh = eh, bh = ih, xh = oh, Sh = uh, Ch = /* @__PURE__ */ x
 		}), t && /* @__PURE__ */ I(g, { children: /* @__PURE__ */ L(xh, {
 			side: o,
 			sideOffset: l,
-			className: U("component-400 rounded-250 bg-background-tooltip z-50 px-1.5 pt-[5px] pb-1.5 [word-break:break-word] text-white", "max-w-[100vw]", "[&_strong]:component-400 [&_strong]:bg-white-alpha-3 [&_strong]:rounded-[2px] [&_strong]:px-[2px]", "[&_b]:component-400 [&_b]:bg-white-alpha-3 [&_b]:rounded-[2px] [&_b]:px-[2px]", "[&_a]:underline", o === "bottom" && "animate-tooltip-slide-down", o === "top" && "animate-tooltip-slide-up", o === "left" && "animate-tooltip-slide-left", o === "right" && "animate-tooltip-slide-right", r),
+			className: U("component-400 rounded-250 bg-background-tooltip z-50 px-1.5 pt-[5px] pb-1.5 [word-break:break-word] text-white", "max-w-[100vw]", "[&_strong]:component-400 [&_strong]:bg-white-alpha-300 [&_strong]:rounded-[2px] [&_strong]:px-[2px]", "[&_b]:component-400 [&_b]:bg-white-alpha-300 [&_b]:rounded-[2px] [&_b]:px-[2px]", "[&_a]:underline", o === "bottom" && "animate-tooltip-slide-down", o === "top" && "animate-tooltip-slide-up", o === "left" && "animate-tooltip-slide-left", o === "right" && "animate-tooltip-slide-right", r),
 			id: f,
 			...d,
 			children: [t, /* @__PURE__ */ I(Sh, {
@@ -11311,8 +11311,8 @@ var Zh = (({ as: t = "button", type: n = "button", className: r, variant: a = "a
 	...d,
 	disabled: s || d.disabled,
 	className: U("relative shrink-0 appearance-none overflow-hidden", "flex items-center justify-center gap-[7px]", "rounded-500", "focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "interaction-transition transition-colors", {
-		"icon-to-edge-pe-750 size-h-600 ps-[19px]": o === "medium",
-		"content-to-edge-spacious-ps-700 size-h-700 pe-[18px]": o === "large",
+		"size-h-600 ps-4.75 pe-3.75": o === "medium",
+		"size-h-700 ps-5.5 pe-[18px]": o === "large",
 		"bg-background-accent hover:bg-background-accent-hover focus-visible:bg-background-accent-hover active:bg-background-accent-down": a === "accent",
 		"bg-background-default hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down": a === "primary",
 		"bg-background-white hover:bg-background-white-hover focus-visible:bg-background-white-hover active:bg-background-white-down": a === "on-dark",
@@ -11388,7 +11388,7 @@ var tg = W("inline-flex items-center justify-center", {
 			large: "component-semi-strong-500 rounded-300 size-h-300 gap-1 py-[3px]"
 		},
 		variant: {
-			default: "bg-black-alpha-7 text-white",
+			default: "bg-black-alpha-700 text-white",
 			accent: "bg-accent-400 text-white",
 			pro: "border-misc-border text-accent-500 shadow-400 misc-border-size-hairline bg-background-inverted",
 			"pro-alt": "bg-background-pro text-white",
@@ -11412,34 +11412,34 @@ var tg = W("inline-flex items-center justify-center", {
 			size: "small",
 			icon: !0,
 			iconOnly: !1,
-			class: "content-to-edge-pe-200 p-1"
+			class: "p-1 pe-1.25"
 		},
 		{
 			size: "small",
 			icon: !1,
-			class: "content-to-edge-px-200"
+			class: "px-1.25"
 		},
 		{
 			size: "medium",
 			icon: !0,
 			iconOnly: !1,
-			class: "content-to-edge-pe-250 p-[5px]"
+			class: "p-[5px] pe-1.5"
 		},
 		{
 			size: "medium",
 			icon: !1,
-			class: "content-to-edge-px-250"
+			class: "px-1.5"
 		},
 		{
 			size: "large",
 			icon: !0,
 			iconOnly: !1,
-			class: "content-to-edge-pe-300 p-[5px]"
+			class: "p-[5px] pe-1.75"
 		},
 		{
 			size: "large",
 			icon: !1,
-			class: "content-to-edge-px-300"
+			class: "px-1.75"
 		},
 		{
 			iconOnly: !0,
@@ -12198,7 +12198,7 @@ var qg = /* @__PURE__ */ function(e) {
 			className: H("justify-self-center", r && "invisible"),
 			children: c
 		}), /* @__PURE__ */ I("span", {
-			className: "icon-to-edge-py-750 justify-self-center",
+			className: "justify-self-center py-3.75",
 			children: r ? /* @__PURE__ */ I(e, { className: H("icon-size-500", n === qg.Google ? "text-white" : "text-content-accent") }) : t
 		})] }) : /* @__PURE__ */ I(me, { children: r ? /* @__PURE__ */ I(e, { className: H("icon-size-500", n === qg.Google ? "text-white" : "text-content-accent") }) : /* @__PURE__ */ I("span", {
 			className: r ? "invisible" : "",
@@ -12359,7 +12359,7 @@ var a_ = ({ isSelected: e, ref: t, ...n }) => /* @__PURE__ */ I(r_, {
 a_.displayName = "OverlaySelectButton";
 //#endregion
 //#region src/components/action/PullDownButton/utils.ts
-var o_ = W("content-to-edge-px-650 flex h-10 items-center justify-center", { variants: { withLabel: {
+var o_ = W("flex h-10 items-center justify-center px-4", { variants: { withLabel: {
 	true: "size-h-600",
 	false: "size-h-500"
 } } }), s_ = W("component-300 overflow-hidden text-start text-ellipsis whitespace-nowrap", { variants: { variant: {
@@ -12389,7 +12389,7 @@ var o_ = W("content-to-edge-px-650 flex h-10 items-center justify-center", { var
 	}) : i;
 }, d_ = (({ as: e = "button", variant: t = "accent", className: n, children: r, label: i, badge: a, ref: o, ...s }) => /* @__PURE__ */ L(e, {
 	ref: o,
-	className: td(H("content-to-edge-px-650 flex max-w-full items-center justify-center", sd({
+	className: td(H("flex max-w-full items-center justify-center px-4", sd({
 		variant: t,
 		loading: !1
 	}), o_({ withLabel: !!i }), n)),
@@ -12408,7 +12408,7 @@ var o_ = W("content-to-edge-px-650 flex h-10 items-center justify-center", { var
 			children: i ?? r
 		})]
 	}), /* @__PURE__ */ I(d, {
-		className: "text-to-leading-compact-500 icon-size-400",
+		className: "icon-size-400 ms-1",
 		"aria-hidden": !0
 	})]
 }));
@@ -12441,7 +12441,7 @@ var f_ = ({ title: e, imageSrc: t, imageAlt: n, onClick: r, className: i, varian
 	})]
 }), p_ = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ I("button", {
 	ref: t,
-	className: U("inline-flex items-center justify-center", "h-12 w-12", "shadow-500 rounded-full", "bg-black-alpha-4 hover:bg-black-alpha-5 active:bg-black-alpha-6", "text-white", "appearance-none outline-hidden transition-colors", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", e),
+	className: U("inline-flex items-center justify-center", "h-12 w-12", "shadow-500 rounded-full", "bg-black-alpha-400 hover:bg-black-alpha-500 active:bg-black-alpha-600", "text-white", "appearance-none outline-hidden transition-colors", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", e),
 	...n,
 	children: /* @__PURE__ */ I(ie, {
 		className: "h-5 w-5",
@@ -31209,7 +31209,7 @@ var XH = (({ 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 content-to-edge-spacious-px-500 flex items-start gap-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-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 = {
 		className: d,
 		onClick: s
 	};
@@ -31522,7 +31522,7 @@ var wU = 175, TU = typeof window < "u" ? Me : De, EU = ({ label: e, isSelected:
 		}), /* @__PURE__ */ I("hr", { className: H("h-px flex-1 border-none", t ? "bg-background-accent" : "bg-misc-border group-hover:bg-misc-border-emphasized") })]
 	});
 }, DU = ({ label: e, className: t }) => /* @__PURE__ */ I("kbd", {
-	className: U("content-to-edge-px-300 inline-block shrink-0", "rounded-300 bg-background-subdued", "component-400 font-brand text-content-secondary leading-6 uppercase", "text-center whitespace-nowrap", t),
+	className: U("inline-block shrink-0 px-1.75", "rounded-300 bg-background-subdued", "component-400 font-brand text-content-secondary leading-6 uppercase", "text-center whitespace-nowrap", t),
 	children: e
 }), OU = ({ labels: e, onRename: t, onMoveUp: n, onMoveDown: r, onDownloadAsZip: i, onDelete: a, isMoveUpDisabled: o, isMoveDownDisabled: s, isDownloadAsZipDisabled: c, formatShortcut: l }) => /* @__PURE__ */ L(me, { children: [
 	/* @__PURE__ */ I(eH.Item, {
@@ -31882,7 +31882,7 @@ var QU = ({ selection: e, reserveSelection: t, productLabel: n, imagesLabel: r,
 		onImageLoad: o,
 		children: i
 	}), n && /* @__PURE__ */ I("div", {
-		className: "bg-black-alpha-3 pointer-events-none absolute inset-0 flex items-center justify-center",
+		className: "bg-black-alpha-300 pointer-events-none absolute inset-0 flex items-center justify-center",
 		children: /* @__PURE__ */ I(eW, { variant: "on-dark" })
 	})]
 });
@@ -32233,7 +32233,7 @@ var cW = /* @__PURE__ */ xt((() => {
 		]
 	});
 }, dW = ({ children: e, className: t }) => /* @__PURE__ */ I("div", {
-	className: U("rounded-200 bg-white-alpha-8 px-2 py-[5px]", "component-semi-strong-500", "text-content-black-primary", t),
+	className: U("rounded-200 bg-white-alpha-800 px-2 py-[5px]", "component-semi-strong-500", "text-content-black-primary", t),
 	children: e
 }), fW = ({ visualLarge: e, visualSmall: t, cssBackgroundColor: n, badgeLabel: r, logo: i, authorName: a, authorJobTitle: o, content: s, cta: c, ...l }) => {
 	let u = Ne(() => c ? ye(c, { variant: "primary" }) : null, [c]);
@@ -32701,7 +32701,7 @@ var BW = ({ indeterminate: e, defaultIndeterminate: t, onIndeterminateChange: n,
 }, VW = ({ label: e, description: t, tooltip: n, isTooltipDisabled: r, className: i, inverted: a = !1, indeterminate: o, defaultIndeterminate: s, onIndeterminateChange: c, variant: l, size: u, ...d }) => {
 	let f = ke(), p = d.id || f;
 	return /* @__PURE__ */ L("div", {
-		className: H("group content-to-edge-py-250 flex items-start gap-3", a ? "flex-row-reverse" : "flex-row", i),
+		className: H("group flex items-start gap-3 py-1.5", a ? "flex-row-reverse" : "flex-row", i),
 		children: [/* @__PURE__ */ I(BW, {
 			...d,
 			id: p,
@@ -32963,14 +32963,14 @@ var QW = W("rounded-300 component-semi-strong-300 inline-flex h-5 w-fit items-ce
 				imgClassName: a ? "size-full object-cover" : void 0
 			}),
 			n != null && /* @__PURE__ */ I("div", {
-				className: "bg-black-alpha-8 pointer-events-none absolute inset-e-1 bottom-1 flex h-5 w-5 items-center justify-center rounded-full",
+				className: "bg-black-alpha-800 pointer-events-none absolute inset-e-1 bottom-1 flex h-5 w-5 items-center justify-center rounded-full",
 				children: /* @__PURE__ */ I("span", {
 					className: H("font-600 text-content-white-primary", n > 99 ? "component-300" : "component-400"),
 					children: n > 99 ? "99+" : n
 				})
 			}),
 			r && /* @__PURE__ */ I("div", {
-				className: "bg-black-alpha-5 pointer-events-none absolute inset-0 flex items-center justify-center",
+				className: "bg-black-alpha-500 pointer-events-none absolute inset-0 flex items-center justify-center",
 				children: /* @__PURE__ */ I(eW, {
 					className: "size-500",
 					variant: "on-dark"
@@ -33492,7 +33492,7 @@ var WG = /* @__PURE__ */ R.forwardRef(/* @__PURE__ */ vG(function(e, t) {
 			...a,
 			"aria-labelledby": o,
 			ref: i,
-			className: H("group relative block appearance-none outline-hidden", "bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:after:bg-black-alpha-2", "active:after:bg-black-alpha-3", "focus-visible:after:bg-black-alpha-2", "after:border", "radix-state-unchecked:after:border-misc-border", "aria-[checked=false]:after:border-misc-border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "aria-checked:after:border-content-accent aria-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "aria-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", {
+			className: H("group relative block appearance-none outline-hidden", "bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:after:bg-black-alpha-200", "active:after:bg-black-alpha-300", "focus-visible:after:bg-black-alpha-200", "after:border", "radix-state-unchecked:after:border-misc-border", "aria-[checked=false]:after:border-misc-border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "aria-checked:after:border-content-accent aria-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "aria-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", {
 				"rounded-400": e === "default",
 				"rounded-200": e === "compact"
 			}, t),
@@ -33812,7 +33812,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
 			children: n !== "error" && f
 		}),
 		n === "loading" && /* @__PURE__ */ I("div", {
-			className: H("bg-black-alpha-4 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 px-4 text-center", { "backdrop-blur-2xl": i }),
+			className: H("bg-black-alpha-400 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 px-4 text-center", { "backdrop-blur-2xl": i }),
 			children: a === void 0 ? /* @__PURE__ */ I(e, { className: "size-8 text-white" }) : /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ L("span", {
 				className: "component-semi-strong-500",
 				children: [a, "%"]
@@ -33822,7 +33822,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
 			})] })
 		}),
 		n === "error" && /* @__PURE__ */ I("div", {
-			className: "bg-black-alpha-4 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center text-center",
+			className: "bg-black-alpha-400 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center text-center",
 			children: d ? /* @__PURE__ */ I(p_, {
 				onClick: m,
 				className: "shadow-none",
@@ -33833,8 +33833,8 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
 			className: "component-400 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center bg-black text-center",
 			children: r
 		}),
-		n === "blocked" && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: "bg-black-alpha-7 absolute inset-0 z-4" }), /* @__PURE__ */ L("div", {
-			className: H("absolute inset-x-0 bottom-0 z-5", "flex items-center justify-center gap-1", "px-2 pt-4 pb-2", "to-black-alpha-5 bg-linear-to-b from-transparent", {
+		n === "blocked" && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: "bg-black-alpha-700 absolute inset-0 z-4" }), /* @__PURE__ */ L("div", {
+			className: H("absolute inset-x-0 bottom-0 z-5", "flex items-center justify-center gap-1", "px-2 pt-4 pb-2", "to-black-alpha-500 bg-linear-to-b from-transparent", {
 				"text-content-white-primary": c === "default",
 				"text-content-negative": c === "urgent"
 			}),
@@ -33844,7 +33844,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
 			})]
 		})] }),
 		n === "fidelity-check" && /* @__PURE__ */ I("div", {
-			className: "to-black-alpha-8 absolute inset-0 z-5 flex flex-col items-center justify-center bg-linear-to-b from-transparent backdrop-blur-xs",
+			className: "to-black-alpha-800 absolute inset-0 z-5 flex flex-col items-center justify-center bg-linear-to-b from-transparent backdrop-blur-xs",
 			children: /* @__PURE__ */ L("div", {
 				className: "flex w-full flex-col items-center gap-3 px-3",
 				children: [/* @__PURE__ */ I("div", {
@@ -33860,7 +33860,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
 							children: l
 						})
 					}), u && /* @__PURE__ */ I("p", {
-						className: "component-light-300 text-white-alpha-5 text-center",
+						className: "component-light-300 text-white-alpha-500 text-center",
 						children: u
 					})]
 				})]
@@ -34081,7 +34081,7 @@ var PK = W("rounded-400 interaction-transition focus-visible:ring-misc-focus-ind
 	});
 }, IK = ({ label: e, onClick: t }) => /* @__PURE__ */ I("button", {
 	"aria-label": e,
-	className: H("bg-black-alpha-8 flex h-24 w-24 items-center justify-center rounded-full outline-hidden transition-all", "hover:bg-black", "active:bg-black", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"),
+	className: H("bg-black-alpha-800 flex h-24 w-24 items-center justify-center rounded-full outline-hidden transition-all", "hover:bg-black", "active:bg-black", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"),
 	onClick: t,
 	children: /* @__PURE__ */ I("svg", {
 		width: "48",
@@ -34129,7 +34129,7 @@ var PK = W("rounded-400 interaction-transition focus-visible:ring-misc-focus-ind
 			controls: s && !l,
 			children: m.map((e) => c ? /* @__PURE__ */ I("source", { "data-src": e }, e) : /* @__PURE__ */ I("source", { src: e }, e))
 		}), l && /* @__PURE__ */ I("div", {
-			className: "bg-black-alpha-8 absolute inset-0 flex cursor-pointer items-center justify-center",
+			className: "bg-black-alpha-800 absolute inset-0 flex cursor-pointer items-center justify-center",
 			onClick: p,
 			children: /* @__PURE__ */ I(IK, {
 				label: e,
@@ -34186,15 +34186,15 @@ function HK({ messages: e, totalExpectedDuration: t, generationStartedAt: n, loa
 						return /* @__PURE__ */ I("p", {
 							className: U("truncate", {
 								"progress-timer-shimmer text-content-white-primary": n,
-								"text-white-alpha-5": t === g.length - 2,
-								"text-white-alpha-3": t < g.length - 2
+								"text-white-alpha-500": t === g.length - 2,
+								"text-white-alpha-300": t < g.length - 2
 							}),
 							children: e
 						}, `${t}-${e}`);
 					})
 				}),
 				/* @__PURE__ */ I("div", {
-					className: "bg-white-alpha-3 h-1.5 w-full overflow-hidden rounded-full",
+					className: "bg-white-alpha-300 h-1.5 w-full overflow-hidden rounded-full",
 					children: /* @__PURE__ */ I("div", {
 						className: "bg-white-1 h-full rounded-full transition-[width] duration-300",
 						style: { width: `${m * 100}%` }
@@ -36732,7 +36732,7 @@ var JY = ({ icon: e, label: t, className: n, chevron: r = !1, tooltip: i, ref: a
 		...o,
 		ref: a,
 		"aria-label": o["aria-label"] ?? (s ? i : void 0),
-		className: H("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "hover:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", s && !r && "size-400", s && r && "size-h-400 content-to-edge-ps-250 content-to-edge-pe-150 gap-1", c && !r && "content-to-edge-px-400 size-h-400", c && r && "content-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", l && !r && "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2", l && r && "icon-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", n),
+		className: H("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "hover:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", s && !r && "size-400", s && r && "size-h-400 gap-1 ps-1.5 pe-1", c && !r && "size-h-400 px-2.5", c && r && "size-h-400 gap-1 ps-2.5 pe-1.5", l && !r && "size-h-400 gap-2 ps-2 pe-2.5", l && r && "size-h-400 gap-1 ps-2 pe-1.5", n),
 		children: r ? /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("span", {
 			className: "flex items-center gap-2",
 			children: u
@@ -36786,8 +36786,8 @@ var XY = W([
 		},
 		content: {
 			icon: "size-400",
-			label: "content-to-edge-px-400 size-h-400",
-			"icon-label": "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2"
+			label: "size-h-400 px-2.5",
+			"icon-label": "size-h-400 gap-2 ps-2 pe-2.5"
 		}
 	},
 	defaultVariants: {
@@ -36846,7 +36846,7 @@ var eX = 4e3, tX = ({ backgroundColor: e, displayName: t, initials: n, isLast: r
 		l();
 	}, [l]), /* @__PURE__ */ I("span", {
 		ref: a,
-		className: H("ms-[-9px]", "h-5 min-w-5", "content-to-edge-px-250", "body-400 text-center whitespace-nowrap text-white", r ? "rounded-300" : "rounded-s-300"),
+		className: H("ms-[-9px]", "h-5 min-w-5", "px-1.5", "body-400 text-center whitespace-nowrap text-white", r ? "rounded-300" : "rounded-s-300"),
 		style: { backgroundColor: e },
 		children: s
 	});
@@ -36897,7 +36897,7 @@ var nX = ({ left: e, top: t, width: n, height: r, rotation: i, users: a, ...o })
 		})
 	});
 }, rX = () => /* @__PURE__ */ I("svg", {
-	className: "text-white-alpha-7 pointer-events-none absolute inset-0 size-full",
+	className: "text-white-alpha-700 pointer-events-none absolute inset-0 size-full",
 	viewBox: "0 0 100 100",
 	preserveAspectRatio: "none",
 	"aria-hidden": "true",
@@ -46859,7 +46859,7 @@ var h4 = /* @__PURE__ */ new Set(), g4 = ({ label: t, previewUrl: n, previewBitm
 			...f,
 			"aria-labelledby": p,
 			ref: d,
-			className: H("relative block appearance-none outline-hidden", "h-full w-full", "rounded-400 bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:radix-state-unchecked:after:bg-black-alpha-2", "active:radix-state-unchecked:after:bg-black-alpha-3", "focus-visible:radix-state-unchecked:after:bg-black-alpha-2", "radix-state-unchecked:after:border-misc-border after:border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", l),
+			className: H("relative block appearance-none outline-hidden", "h-full w-full", "rounded-400 bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:radix-state-unchecked:after:bg-black-alpha-200", "active:radix-state-unchecked:after:bg-black-alpha-300", "focus-visible:radix-state-unchecked:after:bg-black-alpha-200", "radix-state-unchecked:after:border-misc-border after:border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", l),
 			children: [/* @__PURE__ */ I("div", {
 				className: "pointer-events-none relative flex h-full w-full items-center justify-center select-none",
 				style: { aspectRatio: c },
@@ -47001,7 +47001,7 @@ var jhe = ({ type: e = "prompt", image: t, icon: n = ee, label: r, ...i }) => {
 		"active:bg-background-borderless-subdued-down",
 		"focus-visible:bg-surface-high",
 		"disabled:bg-surface-high"
-	], n ? "content-to-edge-pe-400 icon-to-edge-ps-400 gap-2" : "content-to-edge-px-400", r),
+	], n ? "gap-2 ps-2 pe-2.5" : "px-2.5", r),
 	...a,
 	children: [!!n && /* @__PURE__ */ I("span", {
 		role: "presentation",
@@ -47030,7 +47030,7 @@ function Mhe({ children: e, icon: t, visible: n = !0, className: r }) {
 			opacity: 0,
 			transition: { duration: .15 }
 		},
-		className: U("pointer-events-none flex w-fit max-w-[400px] items-center", "bg-black-alpha-7 rounded-full px-4 py-[14px] backdrop-blur-xs", t && "gap-2", r),
+		className: U("pointer-events-none flex w-fit max-w-[400px] items-center", "bg-black-alpha-700 rounded-full px-4 py-[14px] backdrop-blur-xs", t && "gap-2", r),
 		children: [t && /* @__PURE__ */ I(t, { className: "text-content-white-primary size-[18px] shrink-0" }), /* @__PURE__ */ I("span", {
 			className: "component-500 text-content-white-primary min-w-0 flex-1",
 			children: e
@@ -47171,7 +47171,7 @@ x4.displayName = "CanvasInput";
 var Rhe = ({ label: e, className: t, description: n, tooltip: r, isTooltipDisabled: i, variant: a, ...o }) => {
 	let s = ke(), c = o.id || s;
 	return /* @__PURE__ */ L("div", {
-		className: H("content-to-edge-py-250 flex items-start gap-3", {
+		className: H("flex items-start gap-3 py-1.5", {
 			"pointer-events-none opacity-30": o.disabled,
 			"cursor-pointer": !o.disabled
 		}, t),
@@ -48495,10 +48495,10 @@ var b3 = ({ label: e, weight: t, italic: n = !1, selected: r, ref: i, ...a }) =>
 b3.displayName = "FontWeightSelectorItem";
 //#endregion
 //#region src/components/input/IconSwitch/IconSwitch.tsx
-var x3 = "relative z-10 flex h-8 w-10 items-center justify-center text-white-alpha-7 transition-colors", S3 = "transition-all icon-size-400", C3 = ({ icons: e, label: t, tooltips: n, isTooltipDisabled: r, className: i, ref: a, ...o }) => /* @__PURE__ */ L(mP, {
+var x3 = "relative z-10 flex h-8 w-10 items-center justify-center text-white-alpha-700 transition-colors", S3 = "transition-all icon-size-400", C3 = ({ icons: e, label: t, tooltips: n, isTooltipDisabled: r, className: i, ref: a, ...o }) => /* @__PURE__ */ L(mP, {
 	ref: a,
 	"aria-label": t,
-	className: U("group/icon-switch rounded-500 bg-black-alpha-7 relative inline-flex h-8 w-fit items-center", "active:bg-black-alpha-8 disabled:cursor-not-allowed disabled:opacity-30", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "interaction-transition transition-colors", i),
+	className: U("group/icon-switch rounded-500 bg-black-alpha-700 relative inline-flex h-8 w-fit items-center", "active:bg-black-alpha-800 disabled:cursor-not-allowed disabled:opacity-30", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "interaction-transition transition-colors", i),
 	...o,
 	children: [
 		/* @__PURE__ */ I(gP, {
@@ -48564,7 +48564,7 @@ var xge = W([
 	}
 }), Sge = W(["pointer-events-none absolute -inset-px transition-[opacity,background-color]", "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"], {
 	variants: { error: {
-		true: "bg-black-alpha-3 group-hover:bg-black-alpha-3 group-focus-visible:bg-black-alpha-3 group-active:bg-black-alpha-4",
+		true: "bg-black-alpha-300 group-hover:bg-black-alpha-300 group-focus-visible:bg-black-alpha-300 group-active:bg-black-alpha-400",
 		false: "bg-misc-visual-hover group-hover:bg-misc-visual-hover group-focus-visible:bg-misc-visual-hover group-active:bg-misc-visual-down"
 	} },
 	defaultVariants: { error: !1 }
@@ -48660,7 +48660,7 @@ var xge = W([
 						variant: "primary",
 						icon: ie,
 						onClick: E,
-						className: "bg-black-alpha-4 hover:bg-black-alpha-6 active:bg-black-alpha-6 absolute top-1/2 left-1/2 size-600 -translate-x-1/2 -translate-y-1/2 rounded-full",
+						className: "bg-black-alpha-400 hover:bg-black-alpha-600 active:bg-black-alpha-600 absolute top-1/2 left-1/2 size-600 -translate-x-1/2 -translate-y-1/2 rounded-full",
 						"aria-label": "Retry"
 					})
 				]
@@ -49260,7 +49260,7 @@ R3.displayName = "PromptInput";
 //#region src/components/input/RadioGroup/RadioGroupItem/RadioGroupItem.tsx
 var Nge = ({ label: e, description: t, className: n, ...r }) => /* @__PURE__ */ I(GG, {
 	...r,
-	className: H("group/radiogroupitem content-to-edge-py-250 relative focus-visible:outline-hidden", n),
+	className: H("group/radiogroupitem relative py-1.5 focus-visible:outline-hidden", n),
 	children: /* @__PURE__ */ L("div", {
 		className: H("flex gap-4 text-start", {
 			"pointer-events-none opacity-30": r.disabled,
@@ -49423,14 +49423,14 @@ var Pge = ({ reaction: e, selected: t = !1, onClick: n }) => /* @__PURE__ */ I("
 						className: "component-semi-strong-500 text-content-white-primary",
 						children: n.length
 					})]
-				}), r !== e.length - 1 && /* @__PURE__ */ I("span", { className: "bg-white-alpha-3 mx-1.5 h-5 w-px rounded-full" })]
+				}), r !== e.length - 1 && /* @__PURE__ */ I("span", { className: "bg-white-alpha-300 mx-1.5 h-5 w-px rounded-full" })]
 			}, t))
 		}),
 		children: o
 	});
 }, Lge = (e) => /* @__PURE__ */ I("button", {
 	...e,
-	className: H("rounded-200 relative h-10 w-10 overflow-hidden bg-neutral-200 outline-hidden transition-all", "after:rounded-200 after:absolute after:inset-0 after:transition-all after:content-['']", "hover:after:bg-black-alpha-3", "active:after:bg-black-alpha-6", "focus-visible:after:bg-black-alpha-3", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", e.disabled && "opacity-50")
+	className: H("rounded-200 relative h-10 w-10 overflow-hidden bg-neutral-200 outline-hidden transition-all", "after:rounded-200 after:absolute after:inset-0 after:transition-all after:content-['']", "hover:after:bg-black-alpha-300", "active:after:bg-black-alpha-600", "focus-visible:after:bg-black-alpha-300", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", e.disabled && "opacity-50")
 }), H3 = ({ title: e, children: t }) => /* @__PURE__ */ L("div", {
 	className: "flex flex-col items-center gap-3",
 	children: [!!e && /* @__PURE__ */ I("div", {
@@ -50780,7 +50780,7 @@ var L_e = ({ value: e, defaultValue: t = 0, onValueChange: n, onNumberFieldValue
 		...o
 	}), [o, s]);
 	return /* @__PURE__ */ L("div", {
-		className: H("content-to-edge-py-250 flex items-start gap-4", a),
+		className: H("flex items-start gap-4 py-1.5", a),
 		children: [/* @__PURE__ */ I(VW.Indicator, {
 			"aria-labelledby": `${c.id}-label`,
 			...c,
@@ -50879,7 +50879,7 @@ F6.displayName = "TagField";
 //#region src/components/input/TextEditionBox/TextEditionBox.tsx
 var I6 = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ I(EP, {
 	ref: t,
-	className: H("component-500 rounded-500 bg-black-alpha-8", "max-w-full", "text-content-white-primary placeholder-content-white-secondary", "icon-to-edge-py-450 px-[10px]", "backdrop-blur-2xl", "border-none! ring-0!", e),
+	className: H("component-500 rounded-500 bg-black-alpha-800", "max-w-full", "text-content-white-primary placeholder-content-white-secondary", "px-2.5 py-2.25", "backdrop-blur-2xl", "border-none! ring-0!", e),
 	minRows: 1,
 	...n
 });
@@ -52270,7 +52270,7 @@ q8.Item = G8;
 //#endregion
 //#region src/components/navigation/TagGroup/Tag/Tag.tsx
 var J8 = (({ as: e = "a", children: t, className: n, onClick: r, href: i, ref: a, ...o }) => /* @__PURE__ */ L(e, {
-	className: H("max-w-full", "content-to-edge-ps-700 icon-to-edge-pe-700 size-h-700", "interaction-transition cursor-pointer rounded-full outline-hidden", "component-semi-strong-600 bg-background-subdued text-content-primary", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "inline-flex items-center gap-1", n),
+	className: H("max-w-full", "size-h-700 ps-4.25 pe-3.5", "interaction-transition cursor-pointer rounded-full outline-hidden", "component-semi-strong-600 bg-background-subdued text-content-primary", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "inline-flex items-center gap-1", n),
 	href: i,
 	onClick: r,
 	role: "link",
@@ -52295,7 +52295,7 @@ var X8 = (({ selected: e, children: t, className: n, as: r = "button", ref: i, .
 	ref: i,
 	...r === "button" ? { type: "button" } : {},
 	"aria-pressed": r === "button" ? e : void 0,
-	className: U("inline-flex items-center", "content-to-edge-px-300 h-6", "outline-hidden", "rounded-300", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "component-400 whitespace-nowrap", { "shadow-[inset_0_0_0_0.5px_var(--color-misc-border-default)]": !e }, {
+	className: U("inline-flex items-center", "h-6 px-1.75", "outline-hidden", "rounded-300", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "component-400 whitespace-nowrap", { "shadow-[inset_0_0_0_0.5px_var(--color-misc-border-default)]": !e }, {
 		"bg-background-default": e,
 		"hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down": e,
 		"hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down": !e
@@ -53736,7 +53736,7 @@ function O5({ label: e, status: t = "pending", stepNumber: n, value: r, classNam
 O5.displayName = "ProgressStep";
 //#endregion
 //#region src/components/status/ToastProgress/ToastProgress.tsx
-var k5 = H("absolute inset-0 z-1", "flex h-full items-center gap-1.5 p-1 ps-5", "transition-all duration-200 ease-[cubic-bezier(0.2,0.82,0.61,1)]"), A5 = "min-w-0 grow overflow-hidden text-ellipsis whitespace-nowrap text-start", j5 = H("shrink-0 appearance-none outline-hidden", "flex h-full items-center px-4", "hover:bg-black-alpha-2 rounded-full", "focus-visible:bg-black-alpha-2 active:bg-black-alpha-3", "text-content-white-primary-inverted", "transition-colors duration-200");
+var k5 = H("absolute inset-0 z-1", "flex h-full items-center gap-1.5 p-1 ps-5", "transition-all duration-200 ease-[cubic-bezier(0.2,0.82,0.61,1)]"), A5 = "min-w-0 grow overflow-hidden text-ellipsis whitespace-nowrap text-start", j5 = H("shrink-0 appearance-none outline-hidden", "flex h-full items-center px-4", "hover:bg-black-alpha-200 rounded-full", "focus-visible:bg-black-alpha-200 active:bg-black-alpha-300", "text-content-white-primary-inverted", "transition-colors duration-200");
 function abe({ className: e, inProgressLabel: t, completedLabel: n, actionLabel: r, cancelLabel: i, onAction: a, onCancel: s, ...c }) {
 	let l = Math.min(100, Math.max(0, c.value ?? 0)), u = l === 100, d = ke();
 	return /* @__PURE__ */ L(SK, {
@@ -54858,7 +54858,7 @@ var h7 = {
 	children: [r && /* @__PURE__ */ I(h7.Trigger, {
 		asChild: !0,
 		children: r
-	}), /* @__PURE__ */ L(h7.Portal, { children: [/* @__PURE__ */ I(h7.Overlay, { className: U("bg-black-alpha-6 fixed inset-0", e) }), /* @__PURE__ */ I(h7.Content, {
+	}), /* @__PURE__ */ L(h7.Portal, { children: [/* @__PURE__ */ I(h7.Overlay, { className: U("bg-black-alpha-600 fixed inset-0", e) }), /* @__PURE__ */ I(h7.Content, {
 		className: U("rounded-t-600 fixed inset-x-0 bottom-0 bg-white outline-hidden", t),
 		children: /* @__PURE__ */ L("div", {
 			className: "rounded-t-600 bg-white",
@@ -55264,7 +55264,7 @@ var Jbe = ({ title: e, date: t, className: n }) => /* @__PURE__ */ L("div", {
 		})]
 	})
 }), Xbe = ({ className: t, isLoading: n, children: r }) => /* @__PURE__ */ I(me, { children: /* @__PURE__ */ L("div", {
-	className: H(t, "rounded-area-500 bg-white-alpha-3 relative h-full w-full overflow-hidden", "pointer-events-none", "after:rounded-area-500 after:pointer-events-none after:absolute after:start-0 after:top-0 after:h-full after:w-full after:border after:border-solid after:content-['']", "after:transition-all after:duration-300", "after:border-neutral-alpha-300"),
+	className: H(t, "rounded-area-500 bg-white-alpha-300 relative h-full w-full overflow-hidden", "pointer-events-none", "after:rounded-area-500 after:pointer-events-none after:absolute after:start-0 after:top-0 after:h-full after:w-full after:border after:border-solid after:content-['']", "after:transition-all after:duration-300", "after:border-neutral-alpha-300"),
 	children: [/* @__PURE__ */ I("div", {
 		className: H("flex h-full w-full justify-center", "transition-opacity duration-300", n && "opacity-25"),
 		children: r
@@ -55524,7 +55524,7 @@ var rxe = ({ title: e, children: t, cta: n, className: r }) => {
 		]
 	});
 }, ixe = ({ variant: e = "default", author: t, children: n, className: r, ...i }) => /* @__PURE__ */ L("blockquote", {
-	className: H("not-prose flex flex-col gap-4", "content-to-edge-spacious-ps-700 my-10 sm:my-12 sm:ps-[30px]", "border-misc-border border-s-2", r),
+	className: H("not-prose flex flex-col gap-4", "my-10 ps-5.5 sm:my-12 sm:ps-[30px]", "border-misc-border border-s-2", r),
 	...i,
 	children: [/* @__PURE__ */ I("div", {
 		className: H("text-content-primary", {
@@ -55562,7 +55562,7 @@ var axe = ({ badge: e, brandName: t, brandDescription: n, backgroundImage: r, pr
 	children: [/* @__PURE__ */ L("div", {
 		"aria-hidden": !0,
 		className: "absolute inset-0",
-		children: [r, /* @__PURE__ */ I("div", { className: "bg-black-alpha-7 absolute inset-0" })]
+		children: [r, /* @__PURE__ */ I("div", { className: "bg-black-alpha-700 absolute inset-0" })]
 	}), /* @__PURE__ */ L("div", {
 		className: "relative z-10 mx-auto flex w-full max-w-300 flex-col gap-8 lg:flex-row lg:items-center lg:gap-6",
 		children: [/* @__PURE__ */ I("div", {
@@ -55789,10 +55789,10 @@ var T7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
 	}), /* @__PURE__ */ L("div", {
 		className: "flex flex-row sm:inline sm:gap-2",
 		children: [/* @__PURE__ */ I("span", {
-			className: H("text-neutral-alpha-6 component-semi-strong-600", "hidden sm:inline"),
+			className: H("text-neutral-alpha-600 component-semi-strong-600", "hidden sm:inline"),
 			children: "-"
 		}), /* @__PURE__ */ I("span", {
-			className: "text-neutral-alpha-6 component-semi-strong-600",
+			className: "text-neutral-alpha-600 component-semi-strong-600",
 			children: t
 		})]
 	})]
@@ -56045,7 +56045,7 @@ var T7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
 		]
 	})
 }), Sxe = ({ className: e, header: t, title: n, description: r, ...i }) => /* @__PURE__ */ L("div", {
-	className: U("bg-white-alpha-2 rounded-500 flex flex-col justify-between gap-6 overflow-clip p-6 sm:min-h-[360px]", e),
+	className: U("bg-white-alpha-200 rounded-500 flex flex-col justify-between gap-6 overflow-clip p-6 sm:min-h-[360px]", e),
 	...i,
 	children: [/* @__PURE__ */ I("div", {
 		className: "relative h-18 w-full shrink-0 [&_img]:size-full [&_img]:object-contain ltr:[&_img]:object-left rtl:[&_img]:object-right",
@@ -56764,7 +56764,7 @@ var Zxe = ({ titleBlock: e, logoWallBlock: t, children: n, className: r, ...i })
 	})]
 }), I7 = ({ language: e, translatedLanguage: t, selected: n, onClick: r, className: i, ...a }) => /* @__PURE__ */ L("button", {
 	tabIndex: 0,
-	className: H("rounded-500 content-to-edge-px-500 box-border flex h-16 w-full flex-col justify-center gap-1 border-2 text-start", "transition-all duration-100", "hover:cursor-pointer", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", {
+	className: H("rounded-500 box-border flex h-16 w-full flex-col justify-center gap-1 border-2 px-3 text-start", "transition-all duration-100", "hover:cursor-pointer", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", {
 		"border-content-primary": n,
 		"border-transparent": !n,
 		"hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down": !n
@@ -57669,7 +57669,7 @@ var CSe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 }, zSe = ({ planType: e, description: t, cta: n, propLists: r, billingPeriod: i, specialOfferLabel: a, clientLogos: o, planPriceLabelOverride: s, planPriceSubLabel: c, planName: l, showYearlyPriceAsMonthly: u, tagLabel: d, tagVariant: f = "neutral", variant: p = "default", perMonthLabel: m, perYearLabel: h, billedAnnuallyLabel: g, subscriptionOptions: _, isUnavailable: v, unavailableLabel: y, subscriptionType: b, onSubscriptionTypeChange: x, resolvedPrice: S, isError: C, isSelectorLoading: w, ...T }) => {
 	let [E, D] = Pe(_?.[0]?.value), O = b ?? E, k = x ?? D, A = i === "yearly" && u, { value: j, originalValue: M } = S ?? {}, N = p === "dark";
 	return /* @__PURE__ */ L("div", {
-		className: H("relative flex w-full flex-col gap-6", "px-4 py-7", "rounded-500", N ? "bg-background-default text-content-white-primary" : "bg-background-inverted", "border", N ? "border-white-alpha-3" : "border-misc-border", d && "max-xl:pt-0", !d && "sm:max-xl:pt-0"),
+		className: H("relative flex w-full flex-col gap-6", "px-4 py-7", "rounded-500", N ? "bg-background-default text-content-white-primary" : "bg-background-inverted", "border", N ? "border-white-alpha-300" : "border-misc-border", d && "max-xl:pt-0", !d && "sm:max-xl:pt-0"),
 		...T,
 		children: [/* @__PURE__ */ L("div", {
 			className: "flex flex-col",
@@ -57691,7 +57691,7 @@ var CSe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 						}), a && /* @__PURE__ */ I("div", {
 							className: "flex items-center",
 							children: /* @__PURE__ */ I("div", {
-								className: "component-semi-strong-400 rounded-200 bg-content-accent content-to-edge-px-300 py-[2px] text-white",
+								className: "component-semi-strong-400 rounded-200 bg-content-accent px-1.75 py-[2px] text-white",
 								children: a
 							})
 						})]
@@ -57752,7 +57752,7 @@ var CSe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 					children: n && /* @__PURE__ */ I("div", {
 						className: "block *:w-full",
 						children: v ? /* @__PURE__ */ I("div", {
-							className: H("flex items-center justify-center", "content-to-edge-spacious-px-600 h-12", "rounded-500 border-neutral-alpha-400 border border-dashed", "component-500 text-content-secondary"),
+							className: H("flex items-center justify-center", "h-12 px-4.75", "rounded-500 border-neutral-alpha-400 border border-dashed", "component-500 text-content-secondary"),
 							children: y
 						}) : n
 					})
@@ -57760,7 +57760,7 @@ var CSe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
 			]
 		}), /* @__PURE__ */ L("div", {
 			className: H("flex flex-1 flex-col justify-between gap-6", N && "[&_svg]:text-content-white-primary"),
-			children: [r && r.length > 0 && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: H("h-px w-full shrink-0", N ? "bg-white-alpha-3" : "bg-misc-divider") }), /* @__PURE__ */ I("div", {
+			children: [r && r.length > 0 && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: H("h-px w-full shrink-0", N ? "bg-white-alpha-300" : "bg-misc-divider") }), /* @__PURE__ */ I("div", {
 				className: H("flex flex-1 flex-col justify-between gap-8", r.length > 1 && "[&>*:last-child]:justify-end"),
 				children: r
 			})] }), o && o.length > 0 && /* @__PURE__ */ I("div", {
@@ -58469,7 +58469,7 @@ var iCe = ({ titleBlock: e, content: t, ctaLabel: n, ctaLink: r, ...i }) => /* @
 		children: [/* @__PURE__ */ L("div", {
 			className: "flex items-center",
 			children: [t, /* @__PURE__ */ I("span", {
-				className: "component-600 text-to-leading-compact-600",
+				className: "component-600 ms-1.25",
 				children: n
 			})]
 		}), r && /* @__PURE__ */ I("p", {
@@ -59377,7 +59377,7 @@ function owe({ logo: e, sections: t, ctas: n, mobileSections: r, mobileCtas: i,
 	return /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", {
 		className: "overflow-x-clip",
 		children: /* @__PURE__ */ I("header", {
-			className: U("relative flex h-(--header-height) items-center px-4 sm:px-6 md:px-8 2xl:px-10", "bg-white-alpha-8 backdrop-blur-md", "before:bg-black-alpha-1 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:h-px before:transition-opacity before:duration-300 before:content-['']", l ? "before:opacity-100" : "before:opacity-0", u),
+			className: U("relative flex h-(--header-height) items-center px-4 sm:px-6 md:px-8 2xl:px-10", "bg-white-alpha-800 backdrop-blur-md", "before:bg-black-alpha-100 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:h-px before:transition-opacity before:duration-300 before:content-['']", l ? "before:opacity-100" : "before:opacity-0", u),
 			...d,
 			children: /* @__PURE__ */ L("div", {
 				className: "mx-auto flex w-full max-w-[1200px] items-center justify-between gap-1",