@photoroom/ui 0.1.544 → 0.1.545

package/index.mjs

@@ -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";
@@ -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",
@@ -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
 	})]
 }));
@@ -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, {
@@ -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,
@@ -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
 	});
@@ -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",
@@ -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),
@@ -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,
@@ -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-800", "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
@@ -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", {
@@ -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
@@ -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
 					})
@@ -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", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.544",
+  "version": "0.1.545",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [

package/theme.css

@@ -391,69 +391,6 @@
   --animate-nav-content-fade-out: nav-content-fade-out 450ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/*
- * Content-to-edge spacing tokens (used only by the @utility blocks below)
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12472
- */
-@theme {
-  --content-edge-150: 4px;
-  --content-edge-200: 5px;
-  --content-edge-250: 6px;
-  --content-edge-300: 7px;
-  --content-edge-350: 8px;
-  --content-edge-400: 10px;
-  --content-edge-450: 11px;
-  --content-edge-500: 12px;
-  --content-edge-550: 13px;
-  --content-edge-600: 14px;
-  --content-edge-650: 16px;
-  --content-edge-700: 17px;
-  --content-edge-750: 18px;
-  --content-edge-800: 19px;
-
-  --content-edge-spacious-200: 6px;
-  --content-edge-spacious-250: 8px;
-  --content-edge-spacious-300: 10px;
-  --content-edge-spacious-350: 11px;
-  --content-edge-spacious-400: 13px;
-  --content-edge-spacious-450: 14px;
-  --content-edge-spacious-500: 16px;
-  --content-edge-spacious-550: 18px;
-  --content-edge-spacious-600: 19px;
-  --content-edge-spacious-650: 21px;
-  --content-edge-spacious-700: 22px;
-  --content-edge-spacious-750: 24px;
-  --content-edge-spacious-800: 26px;
-
-  --icon-edge-200: 4px;
-  --icon-edge-250: 5px;
-  --icon-edge-300: 6px;
-  --icon-edge-350: 6px;
-  --icon-edge-400: 8px;
-  --icon-edge-450: 9px;
-  --icon-edge-500: 10px;
-  --icon-edge-550: 11px;
-  --icon-edge-600: 12px;
-  --icon-edge-650: 13px;
-  --icon-edge-700: 14px;
-  --icon-edge-750: 15px;
-  --icon-edge-800: 16px;
-
-  --icon-edge-spacious-200: 5px;
-  --icon-edge-spacious-250: 7px;
-  --icon-edge-spacious-300: 9px;
-  --icon-edge-spacious-350: 9px;
-  --icon-edge-spacious-400: 11px;
-  --icon-edge-spacious-450: 12px;
-  --icon-edge-spacious-500: 14px;
-  --icon-edge-spacious-550: 16px;
-  --icon-edge-spacious-600: 17px;
-  --icon-edge-spacious-650: 18px;
-  --icon-edge-spacious-700: 19px;
-  --icon-edge-spacious-750: 21px;
-  --icon-edge-spacious-800: 23px;
-}
-
 /*
  * Custom utilities (replaces src/plugins/transitions.js)
  * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=62868-23303&m=dev
@@ -463,29 +400,6 @@
   transition-duration: 200ms;
 }
 
-/*
- * Icon offset utilities (replaces src/plugins/icon-offset.js)
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12440
- */
-@utility icon-offset-200 {
-  margin-left: -1.2px;
-}
-@utility icon-offset-300 {
-  margin-left: -1.4px;
-}
-@utility icon-offset-400 {
-  margin-left: -1.7px;
-}
-@utility icon-offset-500 {
-  margin-left: -2px;
-}
-@utility icon-offset-600 {
-  margin-left: -2.4px;
-}
-@utility icon-offset-700 {
-  margin-left: -2.9px;
-}
-
 /*
  * Icon size utilities (replaces src/plugins/icon-size.js)
  * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12716
@@ -678,56 +592,6 @@
   background-size: 28px 28px;
 }
 
-/*
- * Text-to-leading utilities (replaces src/plugins/text-to-leading.js)
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12592
- */
-@utility text-to-leading-300 {
-  margin-inline-start: 6px;
-}
-@utility text-to-leading-400 {
-  margin-inline-start: 7px;
-}
-@utility text-to-leading-500 {
-  margin-inline-start: 8px;
-}
-@utility text-to-leading-600 {
-  margin-inline-start: 10px;
-}
-@utility text-to-leading-700 {
-  margin-inline-start: 12px;
-}
-@utility text-to-leading-compact-300 {
-  margin-inline-start: 3px;
-}
-@utility text-to-leading-compact-400 {
-  margin-inline-start: 3.3px;
-}
-@utility text-to-leading-compact-500 {
-  margin-inline-start: 4px;
-}
-@utility text-to-leading-compact-600 {
-  margin-inline-start: 5px;
-}
-@utility text-to-leading-compact-700 {
-  margin-inline-start: 6px;
-}
-@utility text-to-leading-spacious-300 {
-  margin-inline-start: 8px;
-}
-@utility text-to-leading-spacious-400 {
-  margin-inline-start: 10px;
-}
-@utility text-to-leading-spacious-500 {
-  margin-inline-start: 12px;
-}
-@utility text-to-leading-spacious-600 {
-  margin-inline-start: 14px;
-}
-@utility text-to-leading-spacious-700 {
-  margin-inline-start: 17px;
-}
-
 /*
  * Misc design-system utilities (replaces src/plugins/misc.js)
  * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=20464-7406
@@ -830,70 +694,6 @@
   color: transparent;
 }
 
-/* Content to edge (replaces src/plugins/content-to-edge.js) */
-@utility content-to-edge-pl-* {
-  padding-left: --value(--content-edge-*);
-}
-@utility content-to-edge-pr-* {
-  padding-right: --value(--content-edge-*);
-}
-@utility content-to-edge-ps-* {
-  padding-inline-start: --value(--content-edge-*);
-}
-@utility content-to-edge-pe-* {
-  padding-inline-end: --value(--content-edge-*);
-}
-@utility content-to-edge-px-* {
-  padding-inline: --value(--content-edge-*);
-}
-@utility content-to-edge-py-* {
-  padding-block: --value(--content-edge-*);
-}
-@utility content-to-edge-spacious-pl-* {
-  padding-left: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-pr-* {
-  padding-right: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-px-* {
-  padding-inline: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-ps-* {
-  padding-inline-start: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-pe-* {
-  padding-inline-end: --value(--content-edge-spacious-*);
-}
-
-/* Icon to edge (replaces src/plugins/icon-to-edge.js) */
-@utility icon-to-edge-pl-* {
-  padding-left: --value(--icon-edge-*);
-}
-@utility icon-to-edge-pr-* {
-  padding-right: --value(--icon-edge-*);
-}
-@utility icon-to-edge-ps-* {
-  padding-inline-start: --value(--icon-edge-*);
-}
-@utility icon-to-edge-pe-* {
-  padding-inline-end: --value(--icon-edge-*);
-}
-@utility icon-to-edge-py-* {
-  padding-block: --value(--icon-edge-*);
-}
-@utility icon-to-edge-spacious-pl-* {
-  padding-left: --value(--icon-edge-spacious-*);
-}
-@utility icon-to-edge-spacious-pr-* {
-  padding-right: --value(--icon-edge-spacious-*);
-}
-@utility icon-to-edge-spacious-ps-* {
-  padding-inline-start: --value(--icon-edge-spacious-*);
-}
-@utility icon-to-edge-spacious-pe-* {
-  padding-inline-end: --value(--icon-edge-spacious-*);
-}
-
 /*
  * Size utilities (replaces src/plugins/size.js)
  * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=16712-19165