@photoroom/ui 0.1.225 → 0.1.227

package/index.mjs

@@ -6008,15 +6008,15 @@ var Ds = bs, Os = Ss, ks = ws, As = U([
 	12: "text-[9px]",
 	16: "text-[11px]",
 	20: "text-[11px]",
-	24: "text-[12px]",
-	32: "text-[17px]",
-	40: "text-[20px]",
+	24: "text-400",
+	32: "text-600",
+	40: "text-700",
 	80: "text-[34px]"
 } } }), Ms = U([""], { variants: { size: {
 	12: "size-[9px]",
 	16: "size-[11px]",
 	20: "size-[11px]",
-	24: "size-[12px]",
+	24: "size-150",
 	32: "size-[18px]",
 	40: "size-5",
 	80: "size-8"
@@ -9324,14 +9324,14 @@ var yc = /* @__PURE__ */ new Set(), bc = ({ variant: e = "default", label: t, pr
 						onContextMenu: (e) => e.preventDefault()
 					}),
 					!_ && d && /* @__PURE__ */ E("div", {
-						className: "absolute end-1 top-1 z-2",
+						className: "absolute inset-e-1 top-1 z-2",
 						children: d
 					}),
-					!_ && !d && l && /* @__PURE__ */ E(sc, { className: "absolute end-1 top-1 z-2" }),
+					!_ && !d && l && /* @__PURE__ */ E(sc, { className: "absolute inset-e-1 top-1 z-2" }),
 					P && /* @__PURE__ */ E(Ns, {
 						...f,
 						size: 24,
-						className: "absolute end-2 bottom-2 z-2"
+						className: "absolute inset-e-2 bottom-2 z-2"
 					}),
 					j && /* @__PURE__ */ E("div", {
 						className: "absolute inset-0 z-2 flex items-center justify-center",
@@ -9504,7 +9504,7 @@ var Mc = /* @__PURE__ */ function(e) {
 		},
 		size: {
 			default: ["grid min-h-[48px] w-full grid-cols-[48px_auto_48px] items-center"],
-			compact: ["grid h-[48px] w-[48px] place-items-center"]
+			compact: ["grid size-600 place-items-center"]
 		}
 	},
 	defaultVariants: { size: "default" }
@@ -9769,7 +9769,7 @@ Zc.displayName = "PullDownButton";
 //#endregion
 //#region src/components/action/QuickActionCard/QuickActionCard.tsx
 var Qc = ({ title: e, imageSrc: t, imageAlt: n, onClick: r, className: i, variant: a = "default", isPro: o = !1, ...s }) => /* @__PURE__ */ D("button", {
-	className: H("flex h-full w-full flex-col", "rounded-400 cursor-pointer overflow-hidden outline-hidden", "transition-all duration-150 ease-out", "focus-visible:ring-misc-focus-indicator focus-visible:ring-[3px]", { "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down": a === "default" }, i),
+	className: H("flex h-full w-full flex-col", "rounded-400 cursor-pointer overflow-hidden outline-hidden", "transition-all duration-150 ease-out", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", { "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down": a === "default" }, i),
 	onClick: r,
 	...s,
 	children: [/* @__PURE__ */ D("div", {
@@ -9783,7 +9783,7 @@ var Qc = ({ title: e, imageSrc: t, imageAlt: n, onClick: r, className: i, varian
 			decoding: "async"
 		}), o && /* @__PURE__ */ E(sc, {
 			size: "small",
-			className: "absolute end-2 top-2 z-10 shrink-0"
+			className: "absolute inset-e-2 top-2 z-10 shrink-0"
 		})]
 	}), /* @__PURE__ */ E("div", {
 		className: "z-10 flex h-[70px] shrink-0 items-center px-4 pt-3",
@@ -23529,7 +23529,7 @@ var UT = "en", WT = {
 		onClick: a,
 		"aria-label": i,
 		className: H("rounded-500 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring text-[0] focus-visible:outline-hidden", n),
-		children: /* @__PURE__ */ E(s, { className: "rounded-500 h-[56px] w-[180px]" })
+		children: /* @__PURE__ */ E(s, { className: "rounded-500 size-h-700 w-[180px]" })
 	});
 };
 //#endregion
@@ -23664,7 +23664,7 @@ var tE = ({ children: e }) => vr(e) ? /* @__PURE__ */ E(e, {}) : e, nE = l(({ ti
 		a && /* @__PURE__ */ E("button", {
 			type: "button",
 			onClick: a,
-			className: "bg-background-subdued hover:bg-background-subdued-hover absolute end-2 top-2 flex size-6 items-center justify-center rounded-full",
+			className: "bg-background-subdued hover:bg-background-subdued-hover absolute inset-e-2 top-2 flex size-6 items-center justify-center rounded-full",
 			"aria-label": "Close",
 			children: /* @__PURE__ */ E(R, { className: "text-content-secondary size-3" })
 		}),
@@ -32325,7 +32325,7 @@ var yU = UH, bU = GH, xU = qH, SU = YH, CU = tU, wU = rU, TU = aU, EU = sU, DU =
 		n?.(e), e.key === "Escape" && e.currentTarget.value && (d(), e.stopPropagation());
 	}, [d, n]);
 	return /* @__PURE__ */ D("label", {
-		className: H("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: H("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),
 		children: [
 			/* @__PURE__ */ E(Oe, { className: "text-content-secondary pointer-events-none h-4 w-4 shrink-0" }),
 			/* @__PURE__ */ E("input", {
@@ -32339,7 +32339,7 @@ var yU = UH, bU = GH, xU = qH, SU = YH, CU = tU, wU = rU, TU = aU, EU = sU, DU =
 			!c && /* @__PURE__ */ E(Mr, {
 				"aria-label": i,
 				onClick: d,
-				className: "absolute end-2 top-1/2 -translate-y-1/2 peer-disabled:pointer-events-none peer-disabled:opacity-30"
+				className: "absolute inset-e-2 top-1/2 -translate-y-1/2 peer-disabled:pointer-events-none peer-disabled:opacity-30"
 			})
 		]
 	});
@@ -33240,7 +33240,7 @@ var kW = /* @__PURE__ */ Ft((() => {
 }), NW = ({ visualLarge: e, visualSmall: t, cssBackgroundColor: n, badgeLabel: r, logo: i, authorName: a, authorJobTitle: s, content: c, cta: l, ...u }) => {
 	let d = b(() => l ? o(l, { variant: "primary" }) : null, [l]);
 	return /* @__PURE__ */ E("div", {
-		className: V("flex flex-col", "w-full min-w-0", "rounded-500 @container overflow-hidden", "bg-[var(--customer-story-card-background-color)]"),
+		className: V("flex flex-col", "w-full min-w-0", "rounded-500 @container overflow-hidden", "bg-(--customer-story-card-background-color)"),
 		style: { "--customer-story-card-background-color": n },
 		...u,
 		children: /* @__PURE__ */ E("div", {
@@ -33260,7 +33260,7 @@ var kW = /* @__PURE__ */ Ft((() => {
 							children: e
 						})]
 					}), r && /* @__PURE__ */ E(MW, {
-						className: "absolute start-6 top-6 @[960px]:hidden",
+						className: "absolute inset-s-6 top-6 @[960px]:hidden",
 						children: r
 					})]
 				}), /* @__PURE__ */ E("div", {
@@ -33279,7 +33279,7 @@ var kW = /* @__PURE__ */ Ft((() => {
 								className: "flex max-w-[448px] grow flex-col gap-6",
 								children: [
 									i && /* @__PURE__ */ E("div", {
-										className: "flex h-[88px] w-[120px] items-end justify-start [&>img]:!static [&>img]:max-h-full [&>img]:max-w-full [&>img]:object-contain [&>img]:object-left-bottom rtl:[&>img]:object-right-bottom",
+										className: "flex h-[88px] w-[120px] items-end justify-start [&>img]:static! [&>img]:max-h-full [&>img]:max-w-full [&>img]:object-contain [&>img]:object-bottom-left rtl:[&>img]:object-bottom-right",
 										children: i
 									}),
 									c && /* @__PURE__ */ E("div", {
@@ -33488,12 +33488,12 @@ var JW = ({ title: e, subtitle: t, image: n, cta: r, className: i, onClick: a, o
 			})]
 		}),
 		!!n && /* @__PURE__ */ E("figure", {
-			className: "aspect-[4/3] h-[60px] w-[80px] shrink-0",
+			className: "size-h-750 aspect-4/3 w-[80px] shrink-0",
 			children: n
 		}),
 		!!o && /* @__PURE__ */ E(jr, {
 			"aria-label": s,
-			className: "absolute end-2 top-2",
+			className: "absolute inset-e-2 top-2",
 			size: "small",
 			onClick: o
 		})
@@ -33596,10 +33596,10 @@ var QW = ({ checkerboard: e, cover: t, imageUrl: n, loading: r, bottomRightIcon:
 		t && /* @__PURE__ */ D("div", {
 			className: "relative mb-2 max-w-fit",
 			children: [/* @__PURE__ */ E("div", {
-				className: "relative h-12 w-12 overflow-hidden rounded-[12px]",
+				className: "rounded-600 relative h-12 w-12 overflow-hidden",
 				children: t
 			}), n && /* @__PURE__ */ E("div", {
-				className: "absolute -end-1.5 -top-1.5 flex",
+				className: "absolute -inset-e-1.5 -top-1.5 flex",
 				children: n
 			})]
 		}),
@@ -33612,7 +33612,7 @@ var QW = ({ checkerboard: e, cover: t, imageUrl: n, loading: r, bottomRightIcon:
 			children: i
 		}),
 		r && /* @__PURE__ */ E("div", {
-			className: "mt-8 flex [&>*]:grow",
+			className: "mt-8 flex *:grow",
 			children: r
 		})
 	]
@@ -33806,7 +33806,7 @@ var uG = U("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__ */ E("div", {
-				className: "bg-black-alpha-8 pointer-events-none absolute end-1 bottom-1 flex h-5 w-5 items-center justify-center rounded-full",
+				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",
 				children: /* @__PURE__ */ E("span", {
 					className: V("font-600 text-content-white-primary", n > 99 ? "component-300" : "component-400"),
 					children: n > 99 ? "99+" : n
@@ -34145,7 +34145,7 @@ var $G = l(({ dropdownContent: e, className: t, children: n, ...r }, i) => {
 		ref: i,
 		className: H("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),
 		children: [n, Jo.isMobile ? /* @__PURE__ */ E("span", {
-			className: "rounded-500 absolute end-3 top-3 z-10 flex size-10 items-center justify-center bg-white",
+			className: "rounded-500 absolute inset-e-3 top-3 z-10 flex size-10 items-center justify-center bg-white",
 			children: /* @__PURE__ */ E(se, { className: "size-5" })
 		}) : /* @__PURE__ */ E("div", {
 			className: V("absolute inset-0 z-10", "flex items-center", "hover:bg-misc-visual-hover group-focus-visible:bg-misc-visual-hover group-active:after:bg-misc-visual-down", "group-focus-visible:opacity-100 hover:opacity-100", "interaction-transition transition-all", {
@@ -34153,7 +34153,7 @@ var $G = l(({ dropdownContent: e, className: t, children: n, ...r }, i) => {
 				"opacity-100": a
 			}),
 			children: !!e && /* @__PURE__ */ E("span", {
-				className: "absolute end-2 top-2",
+				className: "absolute inset-e-2 top-2",
 				children: /* @__PURE__ */ E(HU, {
 					className: "z-10 w-60",
 					align: "end",
@@ -34310,12 +34310,12 @@ var aK = U("rounded-400 focus-visible:ring-misc-focus-indicator focus-visible:mi
 	children: [
 		/* @__PURE__ */ E("img", {
 			src: n,
-			className: V("rounded-400 border-misc-hairline misc-border-size-hairline pointer-events-none absolute z-0 h-auto shrink-0 -rotate-[8deg] select-none", a === "compact" ? "-end-4 -bottom-4 w-20" : "-end-12 -bottom-8 w-[150px]")
+			className: V("rounded-400 border-misc-hairline misc-border-size-hairline pointer-events-none absolute z-0 h-auto shrink-0 rotate-[-8deg] select-none", a === "compact" ? "-inset-e-4 -bottom-4 w-20" : "-inset-e-12 -bottom-8 w-[150px]")
 		}),
 		r && /* @__PURE__ */ E(Vs, {
 			variant: "pro",
 			size: "small",
-			className: "absolute end-2 top-2 shrink-0",
+			className: "absolute inset-e-2 top-2 shrink-0",
 			children: "Pro"
 		}),
 		/* @__PURE__ */ E("div", {
@@ -34728,7 +34728,7 @@ var ZK = ({ children: e }) => /* @__PURE__ */ D("div", {
 								className: "h-full w-full overflow-auto outline-hidden",
 								children: a
 							}), t && /* @__PURE__ */ E("div", {
-								className: "absolute end-4 top-4 z-20",
+								className: "absolute inset-e-4 top-4 z-20",
 								children: /* @__PURE__ */ E(KK, {
 									asChild: !0,
 									children: /* @__PURE__ */ E(XK, {})
@@ -34923,7 +34923,7 @@ var aq = {
 							})]
 						}, t))
 					}), /* @__PURE__ */ E("div", {
-						className: "component-400 text-content-secondary min-h-[1lh]",
+						className: "component-400 text-content-secondary min-h-lh",
 						children: i
 					})]
 				}),
@@ -34966,7 +34966,7 @@ var aq = {
 							}, e.label))
 						})]
 					}), /* @__PURE__ */ E("div", {
-						className: "component-400 text-content-secondary min-h-[1lh]",
+						className: "component-400 text-content-secondary min-h-lh",
 						children: i
 					})]
 				}),
@@ -35978,7 +35978,7 @@ var jJ = {
 		className: V("relative", s),
 		children: [
 			a && /* @__PURE__ */ E("div", {
-				className: V("pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3", c.disabled && "opacity-50"),
+				className: V("pointer-events-none absolute inset-y-0 inset-s-0 flex items-center ps-3", c.disabled && "opacity-50"),
 				children: /* @__PURE__ */ E(a, {
 					className: "h-5 w-5 text-neutral-600",
 					"aria-hidden": "true"
@@ -36002,7 +36002,7 @@ var jJ = {
 				])
 			}),
 			!!c.value && o && /* @__PURE__ */ E("div", {
-				className: V("absolute inset-y-0 end-0 flex items-center", e ? "pe-10" : "pe-3"),
+				className: V("absolute inset-y-0 inset-e-0 flex items-center", e ? "pe-10" : "pe-3"),
 				children: /* @__PURE__ */ E("button", {
 					type: "button",
 					className: V("rounded-full p-0.5", "disabled:cursor-not-allowed disabled:opacity-50"),
@@ -36015,7 +36015,7 @@ var jJ = {
 				})
 			}),
 			e && /* @__PURE__ */ E("div", {
-				className: V("pointer-events-none absolute inset-y-0 end-0 flex items-center", jJ[i]),
+				className: V("pointer-events-none absolute inset-y-0 inset-e-0 flex items-center", jJ[i]),
 				children: /* @__PURE__ */ E(de, {
 					className: V("h-5 w-5", e ? "text-content-negative" : "text-neutral-600"),
 					"aria-hidden": "true"
@@ -36198,7 +36198,7 @@ var NJ = (e) => !e || e.length !== 7 ? !1 : Gq(e).isValid(), PJ = (e) => `#${e}`
 				className: "rounded-none! border-transparent! bg-transparent! shadow-none! ring-0! focus-visible:border-transparent! focus-visible:ring-0!"
 			}), k && /* @__PURE__ */ D("div", {
 				className: "relative flex shrink-0 items-center self-stretch",
-				children: [/* @__PURE__ */ E("div", { className: "absolute start-0 top-[3px] bottom-[3px] w-px bg-current opacity-20" }), /* @__PURE__ */ E("select", {
+				children: [/* @__PURE__ */ E("div", { className: "absolute inset-s-0 top-[3px] bottom-[3px] w-px bg-current opacity-20" }), /* @__PURE__ */ E("select", {
 					value: M,
 					onChange: (e) => N(e.currentTarget.value),
 					disabled: w.disabled,
@@ -36514,12 +36514,12 @@ var nY = l(({ label: e, labelTestId: t, subtitle: n, isHidden: r, defaultIsHidde
 					active: me,
 					inactive: pe
 				},
-				className: "absolute end-12 top-1/2 -translate-y-1/2"
+				className: "absolute inset-e-12 top-1/2 -translate-y-1/2"
 			}),
 			/* @__PURE__ */ E("span", {
 				...u,
 				tabIndex: -1,
-				className: H("group cursor-move outline-hidden", "absolute end-0 top-0 bottom-0", "ps-3 pe-5", "flex items-center justify-center", "text-content-primary", { invisible: !u || d?.disabled }, u?.className),
+				className: H("group cursor-move outline-hidden", "absolute inset-e-0 top-0 bottom-0", "ps-3 pe-5", "flex items-center justify-center", "text-content-primary", { invisible: !u || d?.disabled }, u?.className),
 				children: /* @__PURE__ */ E(ce, { className: "icon-size-400" })
 			})
 		]
@@ -36682,7 +36682,7 @@ var dY = ({ left: e, top: t, width: n, height: r, rotation: i, users: a, ...o })
 		draggable: !1,
 		...o,
 		children: a && /* @__PURE__ */ E("div", {
-			className: "absolute end-0 top-[-22px] m-[-2px] inline-flex text-xs leading-normal whitespace-nowrap",
+			className: "absolute inset-e-0 top-[-22px] m-[-2px] inline-flex text-xs leading-normal whitespace-nowrap",
 			children: a.map((e, t) => {
 				let n = t === a.length - 1;
 				return /* @__PURE__ */ E(uY, {
@@ -36711,10 +36711,10 @@ var dY = ({ left: e, top: t, width: n, height: r, rotation: i, users: a, ...o })
 	className: "border-accent-alpha-500 pointer-events-none absolute inset-0 border",
 	children: [
 		/* @__PURE__ */ E(fY, {}),
-		/* @__PURE__ */ E("div", { className: "border-content-accent absolute top-[-4px] left-[-4px] size-[14px] border-t-4 border-l-4" }),
-		/* @__PURE__ */ E("div", { className: "border-content-accent absolute top-[-4px] right-[-4px] size-[14px] border-t-4 border-r-4" }),
-		/* @__PURE__ */ E("div", { className: "border-content-accent absolute bottom-[-4px] left-[-4px] size-[14px] border-b-4 border-l-4" }),
-		/* @__PURE__ */ E("div", { className: "border-content-accent absolute right-[-4px] bottom-[-4px] size-[14px] border-r-4 border-b-4" }),
+		/* @__PURE__ */ E("div", { className: "border-content-accent icon-size-300 absolute top-[-4px] left-[-4px] border-t-4 border-l-4" }),
+		/* @__PURE__ */ E("div", { className: "border-content-accent icon-size-300 absolute top-[-4px] right-[-4px] border-t-4 border-r-4" }),
+		/* @__PURE__ */ E("div", { className: "border-content-accent icon-size-300 absolute bottom-[-4px] left-[-4px] border-b-4 border-l-4" }),
+		/* @__PURE__ */ E("div", { className: "border-content-accent icon-size-300 absolute right-[-4px] bottom-[-4px] border-r-4 border-b-4" }),
 		/* @__PURE__ */ E("div", { className: "bg-content-accent absolute top-[-4px] left-1/2 h-1 w-[18px] -translate-x-1/2" }),
 		/* @__PURE__ */ E("div", { className: "bg-content-accent absolute bottom-[-4px] left-1/2 h-1 w-[18px] -translate-x-1/2" }),
 		/* @__PURE__ */ E("div", { className: "bg-content-accent absolute top-1/2 left-[-4px] h-[18px] w-1 -translate-y-1/2" }),
@@ -46472,7 +46472,7 @@ var Wde = /* @__PURE__ */ function(e) {
 		default: V("[&>.moveable-control]:border-content-accent! [&>.moveable-control]:border-2! [&>.moveable-control]:bg-white!", "[&>.moveable-control:hover]:bg-content-accent! [&>.moveable-control:hover]:text-content-white-primary!", "[&>.moveable-control:focus-visible]:bg-content-accent! [&>.moveable-control:focus-visible]:text-content-white-primary!", "[&>.moveable-control:active]:bg-content-accent! [&>.moveable-control:active]:text-content-white-primary!", "[&>.moveable-e]:rounded-300! [&>.moveable-e]:h-5! [&>.moveable-e]:w-2!", "[&>.moveable-w]:rounded-300! [&>.moveable-w]:h-5! [&>.moveable-w]:w-2!", "[&>.moveable-n]:rounded-300! [&>.moveable-n]:h-2! [&>.moveable-n]:w-5!", "[&>.moveable-s]:rounded-300! [&>.moveable-s]:h-2! [&>.moveable-s]:w-5!", "[&>.moveable-e]:top-[-3px]! [&>.moveable-e]:left-0.5!", "[&>.moveable-w]:top-[-3px]! [&>.moveable-w]:left-1!", "[&>.moveable-n]:top-1! [&>.moveable-n]:left-[-3px]!", "[&>.moveable-s]:top-0.5! [&>.moveable-s]:left-[-3px]!"),
 		layerBox: O,
 		cropBox: k
-	}[o], j = V("[&>.moveable-nw]:-mt-[4px]! [&>.moveable-nw]:-ml-[4px]!", "[&>.moveable-ne]:-mt-[4px]! [&>.moveable-ne]:-ml-[6px]!", "[&>.moveable-sw]:-mt-[6px]! [&>.moveable-sw]:-ml-[4px]!", "[&>.moveable-se]:-mt-[6px]! [&>.moveable-se]:-ml-[6px]!"), M = {
+	}[o], j = V("[&>.moveable-nw]:mt-[-4px]! [&>.moveable-nw]:ml-[-4px]!", "[&>.moveable-ne]:mt-[-4px]! [&>.moveable-ne]:ml-[-6px]!", "[&>.moveable-sw]:mt-[-6px]! [&>.moveable-sw]:ml-[-4px]!", "[&>.moveable-se]:mt-[-6px]! [&>.moveable-se]:ml-[-6px]!"), M = {
 		default: V("[&>.moveable-ne]:top-px! [&>.moveable-ne]:-left-px!", "[&>.moveable-nw]:top-px! [&>.moveable-nw]:left-px!", "[&>.moveable-se]:-top-px! [&>.moveable-se]:-left-px!", "[&>.moveable-sw]:-top-px! [&>.moveable-sw]:left-px!"),
 		layerBox: j,
 		cropBox: void 0
@@ -46488,7 +46488,7 @@ var Wde = /* @__PURE__ */ function(e) {
 		origin: !1,
 		transformOrigin: "center",
 		target: e,
-		className: V("!z-10", N, v || y ? "[&>.moveable-line:not(.moveable-edge)]:h-px!" : "[&>.moveable-line]:h-0.5!", (v || y) && "moveable-edge-hover-band", "[&>.moveable-line[data-line-key=render-line-0]]:top-px!", "[&>.moveable-line[data-line-key=render-line-1]]:-left-px!", "[&>.moveable-line[data-line-key=render-line-2]]:-top-px!", "[&>.moveable-line[data-line-key=render-line-3]]:left-px!", A, M),
+		className: V("z-10!", N, v || y ? "[&>.moveable-line:not(.moveable-edge)]:h-px!" : "[&>.moveable-line]:h-0.5!", (v || y) && "moveable-edge-hover-band", "[&>.moveable-line[data-line-key=render-line-0]]:top-px!", "[&>.moveable-line[data-line-key=render-line-1]]:-left-px!", "[&>.moveable-line[data-line-key=render-line-2]]:-top-px!", "[&>.moveable-line[data-line-key=render-line-3]]:left-px!", A, M),
 		scalable: !y,
 		resizable: y,
 		checkResizableError: y ? !1 : void 0,
@@ -46782,7 +46782,7 @@ function ofe({ children: e, icon: t, visible: n = !0, className: r }) {
 			opacity: 0,
 			transition: { duration: .15 }
 		},
-		className: H("pointer-events-none flex w-fit max-w-[400px] items-center", "bg-black-alpha-7 rounded-full px-4 py-[14px] backdrop-blur-[4px]", t && "gap-2", r),
+		className: H("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),
 		children: [t && /* @__PURE__ */ E(t, { className: "text-content-white-primary size-[18px] shrink-0" }), /* @__PURE__ */ E("span", {
 			className: "component-500 text-content-white-primary min-w-0 flex-1",
 			children: e
@@ -47736,8 +47736,8 @@ var v3 = ({ indeterminate: e, defaultIndeterminate: t, onIndeterminateChange: n,
 			className: "pointer-events-none relative h-0.5 w-2.5 rounded-[2px] bg-white"
 		}) : /* @__PURE__ */ E(lce, {
 			"aria-hidden": "true",
-			className: V("shadow-500 pointer-events-none absolute inline-block rounded-full ring-0", d ? "start-px h-3.5 w-3.5" : "start-[2px] h-4 w-4", u ? "bg-content-white-primary-inverted" : "bg-white", "transition-transform duration-200 ease-in-out", {
-				"group-radix-state-checked/switch:translate-x-[10px] group-radix-state-checked/switch:rtl:-translate-x-[10px]": d,
+			className: V("shadow-500 pointer-events-none absolute inline-block rounded-full ring-0", d ? "inset-s-px h-3.5 w-3.5" : "inset-s-[2px] h-4 w-4", u ? "bg-content-white-primary-inverted" : "bg-white", "transition-transform duration-200 ease-in-out", {
+				"group-radix-state-checked/switch:translate-x-[10px] group-radix-state-checked/switch:rtl:translate-x-[-10px]": d,
 				"group-radix-state-checked/switch:translate-x-3 group-radix-state-checked/switch:rtl:-translate-x-3": !d
 			})
 		})]
@@ -47802,7 +47802,7 @@ var Afe = U([
 	"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",
-	"aspect-[4/3]"
+	"aspect-4/3"
 ], {
 	variants: {
 		dragging: {
@@ -47892,7 +47892,7 @@ var Afe = U([
 							loading: "lazy",
 							onLoad: m,
 							onError: h,
-							className: V("bg-damier-checker bg-damier-large h-full w-full !bg-left-top object-cover transition-opacity", f === "loaded" ? "opacity-100" : "opacity-0")
+							className: V("bg-damier-checker bg-damier-large h-full w-full bg-top-left! object-cover transition-opacity", f === "loaded" ? "opacity-100" : "opacity-0")
 						})
 					}),
 					!j && /* @__PURE__ */ D("div", {
@@ -47982,7 +47982,7 @@ var C3 = .5, w3 = 2, Nfe = 80, Pfe = 80, T3 = l(({ src: e, alt: t, width: n = Pf
 				onLoad: i ? v : void 0
 			}), !c && /* @__PURE__ */ E("div", { className: "rounded-400 interaction-transition group-hover:bg-misc-visual-hover group-active:bg-misc-visual-down absolute inset-0 transition-colors" })]
 		}), w && /* @__PURE__ */ E("div", {
-			className: "absolute end-1 top-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100",
+			className: "absolute inset-e-1 top-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100",
 			children: /* @__PURE__ */ E(Yo, {
 				content: d,
 				side: "top",
@@ -48017,7 +48017,7 @@ var E3 = l(({ title: e, description: t, actionLabel: n, placeholder: r, inputPro
 		}),
 		s && /* @__PURE__ */ E("button", {
 			type: "button",
-			className: "bg-background-subdued text-content-tertiary hover:text-content-primary absolute end-2 top-2 flex size-6 shrink-0 items-center justify-center rounded-full",
+			className: "bg-background-subdued text-content-tertiary hover:text-content-primary absolute inset-e-2 top-2 flex size-6 shrink-0 items-center justify-center rounded-full",
 			onClick: s,
 			"aria-label": c,
 			children: /* @__PURE__ */ E(R, { className: "icon-size-300" })
@@ -48154,7 +48154,7 @@ A3.displayName = "DropdownMenuMultipleSelectionItem";
 //#region src/components/input/OptionGroup/OptionGroupItem/OptionGroupItem.tsx
 var Ife = U([
 	"group",
-	"rounded-500 focus-within:ring-misc-focus-indicator focus-within:misc-border-size-focus-ring p-[1px] transition-all duration-150 ease-out focus-within:outline-hidden focus-visible:outline-hidden",
+	"rounded-500 focus-within:ring-misc-focus-indicator focus-within:misc-border-size-focus-ring p-px transition-all duration-150 ease-out focus-within:outline-hidden focus-visible:outline-hidden",
 	"radix-state-unchecked:bg-misc-border-box",
 	"hover:radix-state-unchecked:bg-misc-border-box-hover",
 	"active:radix-state-unchecked:bg-misc-border-box-down"
@@ -48187,7 +48187,7 @@ var Ife = U([
 	disabled: s,
 	...c,
 	children: /* @__PURE__ */ D("div", {
-		className: V("rounded-450 w-full p-[1px] transition-all duration-150 ease-out", "group-radix-state-checked:bg-transparent", "group-radix-state-unchecked:bg-surface-higher"),
+		className: V("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"),
 		children: [/* @__PURE__ */ D("div", {
 			className: V("bg-surface-higher flex w-full items-center gap-2 p-4 transition-all duration-150 ease-out", a ? "rounded-t-400" : "rounded-400"),
 			children: [
@@ -48218,7 +48218,7 @@ var Ife = U([
 				})
 			]
 		}), a && /* @__PURE__ */ E("div", {
-			className: V("component-400 rounded-b-400 bg-content-tertiary -mx-[2px] -mb-[2px] px-4 py-1.5 text-white transition duration-150 ease-out", "group-radix-state-checked:bg-transparent"),
+			className: V("component-400 rounded-b-400 bg-content-tertiary mx-[-2px] mb-[-2px] px-4 py-1.5 text-white transition duration-150 ease-out", "group-radix-state-checked:bg-transparent"),
 			children: a
 		})]
 	})
@@ -48372,7 +48372,7 @@ var Lfe = ({ title: e, overline: t, isSkeleton: n, visual: r, className: i, chil
 			value: t,
 			checked: n
 		}), r && /* @__PURE__ */ E("div", {
-			className: "absolute end-1.5 top-1.5",
+			className: "absolute inset-e-1.5 top-1.5",
 			children: r
 		})]
 	}), /* @__PURE__ */ E("span", {
@@ -48397,7 +48397,7 @@ var Bfe = ({ title: e, className: t, children: n, onClick: r }) => {
 		className: H("pointer-events-none w-full", n.props.className)
 	}) : null, [n]);
 	return /* @__PURE__ */ E("div", {
-		className: H("flex h-full w-full cursor-pointer", "rounded-400 border-content-accent bg-background-accent-subdued border p-3", "transition-all duration-150 ease-out", "hover:border-content-accent hover:bg-background-accent-subdued-hover", "active:border-content-accent active:bg-background-accent-subdued-down", "focus-visible:ring-misc-focus-indicator focus:outline-hidden focus-visible:ring-[3px]", t),
+		className: H("flex h-full w-full cursor-pointer", "rounded-400 border-content-accent bg-background-accent-subdued border p-3", "transition-all duration-150 ease-out", "hover:border-content-accent hover:bg-background-accent-subdued-hover", "active:border-content-accent active:bg-background-accent-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus:outline-hidden", t),
 		onClick: r,
 		onKeyDown: (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.());
@@ -48411,7 +48411,7 @@ var Bfe = ({ title: e, className: t, children: n, onClick: r }) => {
 				className: "rounded-200 border-accent-alpha-500 flex flex-1 items-center justify-center border border-dashed",
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ E(Ne, {
-					className: "text-content-accent h-[48px] w-[48px]",
+					className: "text-content-accent size-h-600 size-w-600",
 					"aria-hidden": "true"
 				})
 			}), /* @__PURE__ */ D("div", {
@@ -48474,7 +48474,7 @@ var Hfe = ({ reaction: e, selected: t = !1, onClick: n }) => /* @__PURE__ */ E("
 		children: e
 	})
 }), Ufe = ({ onSelectReaction: e, reactions: t, className: n, ...r }) => /* @__PURE__ */ E("div", {
-	className: H("bg-surface-higher shadow-700 flex w-fit rounded-[12px] p-1", n),
+	className: H("bg-surface-higher shadow-700 rounded-600 flex w-fit p-1", n),
 	...r,
 	children: t.map((t) => /* @__PURE__ */ E(Hfe, {
 		reaction: t,
@@ -49791,7 +49791,7 @@ var Y6 = l(({ className: e, placeholder: t, search: n, onOpenChange: r, children
 			className: u,
 			side: f,
 			children: /* @__PURE__ */ D(cq, {
-				className: V("w-(--radix-select-trigger-width) p-0!", "h-max max-h-[min(524px,var(--radix-select-content-available-height))]", "border-misc-border border"),
+				className: V("w-radix-select-trigger p-0!", "h-max max-h-[min(524px,var(--radix-select-content-available-height))]", "border-misc-border border"),
 				style: { minHeight: l },
 				children: [
 					o && /* @__PURE__ */ E("div", {
@@ -50621,7 +50621,7 @@ var xme = U(["group rounded-500 border-misc-border bg-surface-high text-500 text
 							])
 						}),
 						u && /* @__PURE__ */ E("div", {
-							className: "absolute inset-y-0 end-3 top-2.5 h-fit w-fit",
+							className: "absolute inset-y-0 inset-e-3 top-2.5 h-fit w-fit",
 							children: /* @__PURE__ */ E("button", {
 								type: "button",
 								"aria-label": "Clear all tags",
@@ -50718,7 +50718,7 @@ var Sme = U(["min-h-full min-w-full p-1.5 py-2", "duration-200 active:bg-neutral
 				children: t
 			}),
 			a && /* @__PURE__ */ E("div", {
-				className: "relative inset-y-0 end-0 flex h-5 items-center",
+				className: "relative inset-y-0 inset-e-0 flex h-5 items-center",
 				children: /* @__PURE__ */ E("button", {
 					type: "button",
 					disabled: r,
@@ -50760,7 +50760,7 @@ var Sme = U(["min-h-full min-w-full p-1.5 py-2", "duration-200 active:bg-neutral
 }), k8 = l(({ children: e, className: t, ...n }, r) => /* @__PURE__ */ D("div", {
 	ref: r,
 	...n,
-	className: V("relative flex items-center justify-between", "rounded-500 p-2.5 pe-3", "cursor-pointer outline-hidden", "hover:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visble:border-size-ring-3 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "[&>img]:h-[20px] [&>img]:object-cover [&>img]:py-[3.5px] [&>img]:filter-(--font-thumbnail-filter)", t),
+	className: V("relative flex items-center justify-between", "rounded-500 p-2.5 pe-3", "cursor-pointer outline-hidden", "hover:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:border-size-ring-3 focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "[&>img]:size-h-250 [&>img]:object-cover [&>img]:py-[3.5px] [&>img]:filter-(--font-thumbnail-filter)", t),
 	children: [e, /* @__PURE__ */ E(ne, { className: "text-content-tertiary icon-size-500 shrink-0" })]
 }));
 k8.displayName = "FontFamilyRow";
@@ -50787,7 +50787,7 @@ var Dme = ({ label: e, description: t, avatar: n, trailingElement: r, className:
 				})]
 			})]
 		}), !!r && /* @__PURE__ */ E("div", {
-			className: "flex h-[40px] shrink-0 items-center gap-x-1",
+			className: "size-h-500 flex shrink-0 items-center gap-x-1",
 			children: r
 		})]
 	});
@@ -51199,7 +51199,7 @@ var $me = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i,
 					})]
 				}), /* @__PURE__ */ D("div", {
 					className: V({
-						"bg-background-subdued flex max-w-[220px] flex-col overflow-hidden rounded-[12px] px-3 pt-2 pb-[10px]": e === "message",
+						"bg-background-subdued rounded-600 flex max-w-[220px] flex-col overflow-hidden px-3 pt-2 pb-[10px]": e === "message",
 						"group-hover:bg-background-subdued-hover group-active:bg-background-subdued-down": e === "message" && l
 					}),
 					children: [/* @__PURE__ */ D("div", {
@@ -51228,7 +51228,7 @@ var $me = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i,
 				"after:rounded-150 after:absolute after:right-0 after:bottom-0 after:h-[90%] after:w-1/2 after:origin-bottom-right after:rotate-[5deg] after:bg-neutral-400 after:content-['']": c
 			}),
 			children: /* @__PURE__ */ E("div", {
-				className: "after:border-misc-border after:misc-border-size-hairline relative after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[3px] after:content-['']",
+				className: "after:border-misc-border after:misc-border-size-hairline after:rounded-150 relative after:pointer-events-none after:absolute after:inset-0 after:z-10 after:content-['']",
 				children: /* @__PURE__ */ E("img", {
 					onError: () => f(!0),
 					className: "rounded-150 relative z-1 block max-h-[60px] w-12 object-cover",
@@ -51254,7 +51254,7 @@ var $me = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i,
 			/* @__PURE__ */ D("div", {
 				className: "relative w-fit",
 				children: [/* @__PURE__ */ D("div", {
-					className: V("flex flex-col gap-1 overflow-hidden rounded-[12px] px-3 pt-2 pb-[10px] text-ellipsis transition-colors", {
+					className: V("rounded-600 flex flex-col gap-1 overflow-hidden px-3 pt-2 pb-[10px] text-ellipsis transition-colors", {
 						"animate-spotlight-fade-subdued bg-background-spotlight": s,
 						"bg-background-subdued": !s,
 						"group-hover:bg-background-subdued-hover": o
@@ -51269,11 +51269,11 @@ var $me = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i,
 							children: n
 						})]
 					}), /* @__PURE__ */ E("p", {
-						className: V("text-content-subdued-primary min-w-0 overflow-hidden break-words whitespace-pre-wrap", c ? "component-900" : "component-500"),
+						className: V("text-content-subdued-primary min-w-0 overflow-hidden wrap-break-word whitespace-pre-wrap", c ? "component-900" : "component-500"),
 						children: t
 					})]
 				}), !!o && /* @__PURE__ */ E("div", {
-					className: "pointer-events-none absolute end-[-8px] top-[-8px] z-20 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100",
+					className: "pointer-events-none absolute inset-e-[-8px] top-[-8px] z-20 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100",
 					children: o
 				})]
 			}),
@@ -51312,7 +51312,7 @@ var $me = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i,
 					})]
 				})]
 			}), !o && /* @__PURE__ */ E("div", {
-				className: "after:border-misc-border after:misc-border-size-hairline relative shrink-0 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[3px] after:content-['']",
+				className: "after:border-misc-border after:misc-border-size-hairline after:rounded-150 relative shrink-0 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:content-['']",
 				children: /* @__PURE__ */ E("img", {
 					onError: () => s(!0),
 					className: "rounded-150 relative z-1 block max-h-[60px] w-12 object-cover",
@@ -51364,8 +51364,8 @@ var $me = ({ variant: e, accountType: t, title: n, description: r, thumbnail: i,
 	12: "h-3 w-3 text-[6px]",
 	16: "h-4 w-4 text-[8px]",
 	20: "h-5 w-5 text-[8px]",
-	24: "h-6 w-6 text-[10px]",
-	32: "h-8 w-8 text-[14px]",
+	24: "text-300 h-6 w-6",
+	32: "text-500 h-8 w-8",
 	40: "h-10 w-10 text-[16px]",
 	80: "h-20 w-20 text-[32px]"
 } } }), che = ({ count: e, size: t = 32, className: n }) => /* @__PURE__ */ E("div", {
@@ -51609,7 +51609,7 @@ var b5 = t.forwardRef((e, t) => {
 			children: t
 		}),
 		!!n && /* @__PURE__ */ E("span", {
-			className: "absolute end-[5px] top-[5px] flex select-none",
+			className: "absolute inset-e-[5px] top-[5px] flex select-none",
 			role: "presentation",
 			children: n
 		})
@@ -51836,7 +51836,7 @@ var k5 = {
 		}, t),
 		children: [
 			n === "scroll" && /* @__PURE__ */ E("div", {
-				className: V("absolute inset-y-0 start-0 z-2", "flex w-20 items-center justify-start", "bg-linear-to-r from-50% to-transparent rtl:bg-linear-to-l", k5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !o }),
+				className: V("absolute inset-y-0 inset-s-0 z-2", "flex w-20 items-center justify-start", "bg-linear-to-r from-50% to-transparent rtl:bg-linear-to-l", k5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !o }),
 				children: /* @__PURE__ */ E(Ar, {
 					icon: j,
 					onClick: () => a.current?.scrollBy({
@@ -51859,7 +51859,7 @@ var k5 = {
 				children: e
 			}),
 			n === "scroll" && /* @__PURE__ */ E("div", {
-				className: V("absolute inset-y-0 end-0 z-2", "flex w-20 items-center justify-end", "bg-linear-to-l from-50% to-transparent rtl:bg-linear-to-r", k5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !c }),
+				className: V("absolute inset-y-0 inset-e-0 z-2", "flex w-20 items-center justify-end", "bg-linear-to-l from-50% to-transparent rtl:bg-linear-to-r", k5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !c }),
 				children: /* @__PURE__ */ E(Ar, {
 					icon: M,
 					onClick: () => a.current?.scrollBy({
@@ -51952,7 +51952,7 @@ var P5 = {
 		className: H("relative -m-1", t),
 		children: [
 			/* @__PURE__ */ E("div", {
-				className: V("absolute inset-y-0 start-0 z-2", "flex w-20 items-center justify-start", "bg-linear-to-r from-50% to-transparent rtl:bg-linear-to-l", P5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !s }),
+				className: V("absolute inset-y-0 inset-s-0 z-2", "flex w-20 items-center justify-start", "bg-linear-to-r from-50% to-transparent rtl:bg-linear-to-l", P5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !s }),
 				children: /* @__PURE__ */ E(Ar, {
 					icon: j,
 					"aria-label": "Scroll left",
@@ -51973,7 +51973,7 @@ var P5 = {
 				children: e
 			}),
 			/* @__PURE__ */ E("div", {
-				className: V("absolute inset-y-0 end-0 z-2", "flex w-20 items-center justify-end", "bg-linear-to-l from-50% to-transparent rtl:bg-linear-to-r", P5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !l }),
+				className: V("absolute inset-y-0 inset-e-0 z-2", "flex w-20 items-center justify-end", "bg-linear-to-l from-50% to-transparent rtl:bg-linear-to-r", P5[r], "transition-opacity duration-200", "pointer-events-none", { "opacity-0": !l }),
 				children: /* @__PURE__ */ E(Ar, {
 					icon: M,
 					"aria-label": "Scroll right",
@@ -52025,7 +52025,7 @@ var L5 = l(({ size: e = "default", label: t, showProBadge: n, icon: r, className
 		}),
 		n && /* @__PURE__ */ E(sc, {
 			size: "small",
-			className: "absolute end-2 top-2"
+			className: "absolute inset-e-2 top-2"
 		})
 	]
 }));
@@ -52063,7 +52063,7 @@ R5.displayName = "ChoiceGroup";
 //#region src/components/onboarding/ChoiceGroup/ChoiceTile.tsx
 var z5 = ({ label: e, imageSrc: t, className: n, children: r, ...i }) => /* @__PURE__ */ D("label", {
 	...i,
-	className: H("relative cursor-pointer select-none", "flex w-max flex-col", "rounded-500 misc-border-size-selection outline-hidden", "[&:has([data-state=unchecked])]:border-transparent", "[&:has([data-state=checked])]:border-accent-500", "[&:has([data-state=checked])]:misc-shadow-selection", "bg-background-subdued", "has-active:bg-background-subdued-down hover:bg-background-subdued-hover [&:has(:focus-visible)]:bg-background-subdued-hover", "[&:has(:focus-visible)]:ring-misc-focus-indicator [&:has(:focus-visible)]:misc-border-size-focus-ring", "transition-all", n),
+	className: H("relative cursor-pointer select-none", "flex w-max flex-col", "rounded-500 misc-border-size-selection outline-hidden", "has-data-[state=unchecked]:border-transparent", "has-data-[state=checked]:border-accent-500", "has-data-[state=checked]:misc-shadow-selection", "bg-background-subdued", "has-active:bg-background-subdued-down hover:bg-background-subdued-hover has-focus-visible:bg-background-subdued-hover", "has-focus-visible:ring-misc-focus-indicator has-focus-visible:misc-border-size-focus-ring", "transition-all", n),
 	children: [r, /* @__PURE__ */ D("span", {
 		className: "flex grow flex-col text-start",
 		children: [/* @__PURE__ */ E("figure", {
@@ -52083,7 +52083,7 @@ var z5 = ({ label: e, imageSrc: t, className: n, children: r, ...i }) => /* @__P
 	})]
 }), B5 = l(({ multiSelect: e }, t) => /* @__PURE__ */ E("span", {
 	ref: t,
-	className: V("absolute start-2 top-2 z-20 size-400", "inline-flex items-center justify-center", "shadow-500 rounded-full bg-white outline-hidden", {
+	className: V("absolute inset-s-2 top-2 z-20 size-400", "inline-flex items-center justify-center", "shadow-500 rounded-full bg-white outline-hidden", {
 		"group-radix-state-unchecked:opacity-0": !e,
 		"group-radix-state-checked:opacity-100": !e,
 		"transition-opacity duration-150 ease-out": !e
@@ -52126,7 +52126,7 @@ var Ehe = U([
 	"inline-flex flex-row items-center gap-2",
 	"w-full px-4 py-3",
 	"rounded-500 border outline-hidden",
-	"[&:has(:focus-visible)]:ring-misc-focus-indicator [&:has(:focus-visible)]:misc-border-size-focus-ring",
+	"has-focus-visible:ring-misc-focus-indicator has-focus-visible:misc-border-size-focus-ring",
 	"transition-all"
 ], {
 	variants: {
@@ -52142,11 +52142,11 @@ var Ehe = U([
 	compoundVariants: [{
 		variant: "filled",
 		selected: !1,
-		class: "has-active:bg-background-subdued-down hover:bg-background-subdued-hover [&:has(:focus-visible)]:bg-background-subdued-hover"
+		class: "has-active:bg-background-subdued-down hover:bg-background-subdued-hover has-focus-visible:bg-background-subdued-hover"
 	}, {
 		variant: "outlined",
 		selected: !1,
-		class: "has-active:border-content-secondary hover:border-content-tertiary [&:has(:focus-visible)]:border-content-tertiary"
+		class: "has-active:border-content-secondary hover:border-content-tertiary has-focus-visible:border-content-tertiary"
 	}],
 	defaultVariants: {
 		variant: "filled",
@@ -52162,7 +52162,7 @@ var Ehe = U([
 		className: "flex grow flex-col text-start",
 		children: [/* @__PURE__ */ D("span", {
 			className: "component-500 text-content-primary flex items-center gap-2",
-			children: [t && /* @__PURE__ */ E(t, { className: "size-[28px]" }), e]
+			children: [t && /* @__PURE__ */ E(t, { className: "size-350" }), e]
 		}), !!n && /* @__PURE__ */ E("span", {
 			className: "component-400 text-content-secondary truncate",
 			children: n
@@ -54298,9 +54298,9 @@ var i9 = {
 		asChild: !0,
 		children: r
 	}), /* @__PURE__ */ D(i9.Portal, { children: [/* @__PURE__ */ E(i9.Overlay, { className: H("bg-black-alpha-6 fixed inset-0", e) }), /* @__PURE__ */ E(i9.Content, {
-		className: H("fixed inset-x-0 bottom-0 rounded-t-[12px] bg-white outline-hidden", t),
+		className: H("rounded-t-600 fixed inset-x-0 bottom-0 bg-white outline-hidden", t),
 		children: /* @__PURE__ */ D("div", {
-			className: "rounded-t-[12px] bg-white",
+			className: "rounded-t-600 bg-white",
 			children: [i && /* @__PURE__ */ E("div", {
 				className: "pt-4 pb-8",
 				children: /* @__PURE__ */ E("div", { className: "mx-auto h-1.5 w-12 shrink-0 rounded-full bg-neutral-300" })
@@ -54471,7 +54471,7 @@ var i9 = {
 					ref: u,
 					disabled: a,
 					type: "number",
-					className: V("component-500 border-misc-border-box bg-surface-default text-content-primary h-10 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-[3px]", "group-hover:[&:not(:focus-visible)]:border-misc-border-box-hover", "group-focus-visible:[&:not(:focus-visible)]:border-misc-border-box-hover", "group-disabled:opacity-30"),
+					className: V("component-500 border-misc-border-box bg-surface-default text-content-primary h-10 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", "group-hover:not-focus-visible:border-misc-border-box-hover", "group-focus-visible:not-focus-visible:border-misc-border-box-hover", "group-disabled:opacity-30"),
 					value: f,
 					onFocus: F,
 					onChange: P,
@@ -54805,7 +54805,7 @@ var r_e = ({ title: e, date: t, className: n }) => /* @__PURE__ */ D("div", {
 	children: /* @__PURE__ */ E("div", {
 		className: "flex items-center justify-center",
 		children: /* @__PURE__ */ D("div", {
-			className: "sm:max-w-mdlg flex w-full max-w-xs flex-wrap items-center justify-center gap-x-12 gap-y-6 lg:max-w-[45rem]",
+			className: "sm:max-w-mdlg flex w-full max-w-xs flex-wrap items-center justify-center gap-x-12 gap-y-6 lg:max-w-180",
 			children: [
 				/* @__PURE__ */ E("div", {
 					className: "order-1",
@@ -54884,7 +54884,7 @@ var r_e = ({ title: e, date: t, className: n }) => /* @__PURE__ */ D("div", {
 	...a,
 	className: H("relative overflow-hidden", "flex flex-col lg:pb-[148px]", "bg-sand-50 rounded-500", i),
 	children: [/* @__PURE__ */ E("div", {
-		className: V("relative", "aspect-[4/3] w-full lg:aspect-auto lg:h-[300px]", "[&_img]:size-full [&_img]:object-cover lg:[&_img]:object-top-left"),
+		className: V("relative", "aspect-4/3 w-full lg:aspect-auto lg:h-[300px]", "[&_img]:size-full [&_img]:object-cover lg:[&_img]:object-top-left"),
 		children: e
 	}), /* @__PURE__ */ D("div", {
 		className: V("lg:absolute lg:inset-x-0 lg:bottom-0", "flex flex-1 flex-col justify-between gap-6 lg:flex-row lg:items-end", "p-6 lg:p-8", "bg-sand-50"),
@@ -55144,9 +55144,9 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 			className: "gap-i500 flex flex-col",
 			children: [/* @__PURE__ */ E("div", {
 				ref: d,
-				className: V("[--viewport-content:1200px]", "[--side-padding-raw:calc(50%-var(--viewport-content)/2)]", "[--side-padding:max(var(--side-padding-raw),16px)]", "sm:[--side-padding:max(var(--side-padding-raw),24px)]", "md:[--side-padding:max(var(--side-padding-raw),32px)]", "xl:[--side-padding:max(var(--side-padding-raw),40px)]", "snap-x snap-mandatory scroll-p-[var(--side-padding)] overflow-x-scroll", "scrollbar-none scroll-smooth"),
+				className: V("[--viewport-content:1200px]", "[--side-padding-raw:calc(50%-var(--viewport-content)/2)]", "[--side-padding:max(var(--side-padding-raw),16px)]", "sm:[--side-padding:max(var(--side-padding-raw),24px)]", "md:[--side-padding:max(var(--side-padding-raw),32px)]", "xl:[--side-padding:max(var(--side-padding-raw),40px)]", "snap-x snap-mandatory scroll-p-(--side-padding) overflow-x-scroll", "scrollbar-none scroll-smooth"),
 				children: !!t && /* @__PURE__ */ E("div", {
-					className: V("mx-auto grid w-fit grid-flow-col gap-6", "px-[var(--side-padding)] py-[3px]"),
+					className: V("mx-auto grid w-fit grid-flow-col gap-6", "px-(--side-padding) py-[3px]"),
 					children: t.map((e, t) => /* @__PURE__ */ E("div", {
 						className: V("flex snap-start", {
 							"w-[240px] sm:w-[282px]": r === "default",
@@ -55289,7 +55289,7 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 	"max-w-sm sm:max-w-lg"
 ], { variants: { wide: {
 	true: "lg:max-w-[1200px]",
-	false: "lg:max-w-[67rem]"
+	false: "lg:max-w-268"
 } } }), A_e = U("mx-auto grid grid-cols-1 gap-4", { variants: { invertOrder: {
 	true: "lg:-order-1 lg:pr-16",
 	false: "lg:pl-16"
@@ -55420,7 +55420,7 @@ var p_e = ({ titleBlock: e, children: t, ...n }) => /* @__PURE__ */ D("div", {
 	children: /* @__PURE__ */ D("div", {
 		className: "flex w-full flex-col gap-4 sm:gap-6 sm:@[592px]:flex-row sm:@[592px]:items-start sm:@[592px]:gap-6",
 		children: [/* @__PURE__ */ E("div", {
-			className: "rounded-500 relative aspect-[3/2] w-full shrink-0 overflow-hidden sm:@[592px]:flex-1 sm:@[592px]:basis-0 [&_img]:static [&_img]:size-full [&_img]:object-cover",
+			className: "rounded-500 relative aspect-3/2 w-full shrink-0 overflow-hidden sm:@[592px]:flex-1 sm:@[592px]:basis-0 [&_img]:static [&_img]:size-full [&_img]:object-cover",
 			children: e
 		}), /* @__PURE__ */ D("div", {
 			className: "flex w-full flex-col items-start gap-6 sm:@[592px]:flex-1 sm:@[592px]:basis-0 sm:@[592px]:justify-center",
@@ -55534,10 +55534,10 @@ function H_e({ title: e, className: t, children: n, ...r }) {
 				children: [/* @__PURE__ */ E("span", {
 					className: "component-600 text-content-primary",
 					children: e
-				}), /* @__PURE__ */ E(te, { className: "text-content-secondary icon-size-400 interaction-transition transition-transform group-has-[:checked]:rotate-90 sm:hidden" })]
+				}), /* @__PURE__ */ E(te, { className: "text-content-secondary icon-size-400 interaction-transition transition-transform group-has-checked:rotate-90 sm:hidden" })]
 			}),
 			/* @__PURE__ */ E("div", {
-				className: "interaction-transition h-0 overflow-hidden opacity-0 transition-all peer-checked:h-max peer-checked:opacity-100 sm:!h-auto sm:!opacity-100 sm:transition-none",
+				className: "interaction-transition h-0 overflow-hidden opacity-0 transition-all peer-checked:h-max peer-checked:opacity-100 sm:h-auto! sm:opacity-100! sm:transition-none",
 				children: /* @__PURE__ */ E("div", {
 					className: "flex flex-col gap-4 pt-6",
 					children: n
@@ -55763,7 +55763,7 @@ var y9 = {}, b9 = ({ variant: e, className: t, cssBackgroundColor: n, children:
 		children: /* @__PURE__ */ E("div", {
 			className: V("mx-auto -mb-6 w-full max-w-[1800px] [&>*+*]:mt-2", "columns-2 gap-x-2 sm:columns-4 md:columns-5 lg:columns-6", "[&>:nth-child(n+7)]:hidden", "sm:[&>:nth-child(n+7)]:block sm:[&>:nth-child(n+7):nth-child(n+13)]:hidden", "md:[&>:nth-child(n+7):nth-child(n+13)]:block md:[&>:nth-child(n+7):nth-child(n+16)]:hidden", "lg:[&>:nth-child(n+7):nth-child(n+16)]:block"),
 			children: t?.slice(0, 18).map((e, t) => /* @__PURE__ */ E("figure", {
-				className: "rounded-500 relative aspect-[3/4] break-inside-avoid-column overflow-hidden [&:nth-child(6n)]:aspect-square [&:nth-child(6n+1)]:aspect-square",
+				className: "rounded-500 relative aspect-3/4 break-inside-avoid-column overflow-hidden nth-[6n]:aspect-square nth-[6n+1]:aspect-square",
 				children: e
 			}, t.toString()))
 		})
@@ -55778,7 +55778,7 @@ var y9 = {}, b9 = ({ variant: e, className: t, cssBackgroundColor: n, children:
 			children: [!!t?.length && /* @__PURE__ */ E("div", {
 				className: "grid grid-cols-2 gap-4 sm:grid-cols-4 lg:gap-6",
 				children: t.slice(0, 4).map((e, t) => /* @__PURE__ */ E("div", {
-					className: "rounded-500 relative aspect-[3/4] overflow-hidden",
+					className: "rounded-500 relative aspect-3/4 overflow-hidden",
 					children: e
 				}, u(e) ? e.key ?? t : t))
 			}), n && /* @__PURE__ */ E("div", {
@@ -55865,7 +55865,7 @@ var y9 = {}, b9 = ({ variant: e, className: t, cssBackgroundColor: n, children:
 	}), /* @__PURE__ */ E("div", {
 		className: "flex flex-wrap justify-center gap-2 lg:gap-4 xl:gap-8",
 		children: t.map((e, t) => /* @__PURE__ */ E("figure", {
-			className: "relative aspect-[16/9] w-[calc((100%-1rem)/3)] sm:w-[calc((100%-2rem)/5)] lg:w-[calc((100%-5rem)/6)] xl:w-[calc((100%-10rem)/6)]",
+			className: "relative aspect-video w-[calc((100%-1rem)/3)] sm:w-[calc((100%-2rem)/5)] lg:w-[calc((100%-5rem)/6)] xl:w-[calc((100%-10rem)/6)]",
 			children: e
 		}, t.toString()))
 	})]
@@ -56752,12 +56752,12 @@ var Mve = Object.assign(R9, {
 	children: /* @__PURE__ */ D("div", {
 		className: "mx-auto flex max-w-[1200px] flex-col justify-center gap-8",
 		children: [/* @__PURE__ */ E("div", {
-			className: V("text-900 font-500 leading-500 -tracking-[0.058px]", "sm:text-1100 sm:-tracking-[0.357px]", "lg:text-1300 lg:-tracking-[1.05px]"),
+			className: V("text-900 font-500 leading-500 tracking-[-0.058px]", "sm:text-1100 sm:tracking-[-0.357px]", "lg:text-1300 lg:tracking-[-1.05px]"),
 			children: e
 		}), /* @__PURE__ */ D("div", {
 			className: "flex flex-row items-center gap-4 sm:gap-6",
 			children: [!!t && /* @__PURE__ */ E("div", {
-				className: V("relative", "w-16 sm:w-20", "aspect-[1/1] overflow-hidden rounded-full"),
+				className: V("relative", "w-16 sm:w-20", "aspect-square overflow-hidden rounded-full"),
 				children: t
 			}), /* @__PURE__ */ D("div", {
 				className: "flex flex-col gap-1",
@@ -56859,7 +56859,7 @@ var Mve = Object.assign(R9, {
 					className: "w-full max-w-[760px] text-balance",
 					children: n
 				}), !!a && /* @__PURE__ */ E("div", {
-					className: "hidden h-[1lh] items-center lg:inline-flex",
+					className: "hidden h-lh items-center lg:inline-flex",
 					children: a
 				})]
 			})]