@goliapkg/gds 2.0.0 → 2.0.1

package/dist/{l3-atoms-BGwlQvjl.js → l3-atoms-BCJNqPHk.js}

@@ -1,14 +1,14 @@
 import { r as e, t } from "./glass-CQTlX7IO.js";
-import { r as n, t as r } from "./button-avu-rQU4.js";
+import { r as n, t as r } from "./button-BD3VHhwq.js";
 import { r as i } from "./motion-DUPegem-.js";
-import { t as a } from "./badge-DTJq6AXr.js";
-import { r as o, t as s } from "./textarea-BJCl_aH2.js";
+import { t as a } from "./badge-BCvi5RVF.js";
+import { r as o, t as s } from "./textarea-Btdu41rY.js";
 import { t as c } from "./skeleton-C9FFZSYN.js";
-import { t as l } from "./avatar-l3SaMCmU.js";
-import { n as u } from "./resize-handle-ilSc7QRM.js";
-import { t as d } from "./switch-DC85Os9r.js";
+import { t as l } from "./avatar-Ct8OOGx6.js";
+import { n as u } from "./resize-handle-BjSNhgJK.js";
+import { t as d } from "./switch-BAS-GXJV.js";
 import { r as f } from "./dom-17XgfxMq.js";
-import { n as p } from "./loading-dots-Dz79qOGY.js";
+import { n as p } from "./loading-dots-C1LPHGa0.js";
 import { Children as ee, forwardRef as m, useCallback as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
 import { jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/l3-atoms/animated-border.tsx
@@ -22,7 +22,7 @@ function C({ children: t, className: n, variant: r = "gradient" }) {
 		className: e("rounded-lg", S.gradient, n),
 		"data-component": "animated-border",
 		children: /* @__PURE__ */ b("div", {
-			className: "rounded-[calc(0.5rem-2px)] bg-bg",
+			className: "bg-bg rounded-[calc(0.5rem-2px)]",
 			children: t
 		})
 	}) : /* @__PURE__ */ b("div", {
@@ -168,7 +168,7 @@ var oe = m(function({ value: t, width: n = 200, height: r = 60, showValue: i = !
 		role: "status",
 		...a,
 		children: s.map((t) => /* @__PURE__ */ b("span", {
-			className: e("animate-[bounce-dot_1.4s_ease-in-out_infinite] rounded-full bg-fg-muted", le[i]),
+			className: e("bg-fg-muted animate-[bounce-dot_1.4s_ease-in-out_infinite] rounded-full", le[i]),
 			style: {
 				animationDelay: `${t * 160}ms`,
 				...n === void 0 ? {} : { backgroundColor: n }
@@ -183,7 +183,7 @@ var oe = m(function({ value: t, width: n = 200, height: r = 60, showValue: i = !
 	};
 	return /* @__PURE__ */ x("div", {
 		ref: c,
-		className: e("flex flex-col gds-gap", t),
+		className: e("gds-gap flex flex-col", t),
 		"data-component": "checkbox-group",
 		role: "group",
 		...s,
@@ -229,11 +229,11 @@ var oe = m(function({ value: t, width: n = 200, height: r = 60, showValue: i = !
 				children: p
 			}) : p,
 			/* @__PURE__ */ b("span", {
-				className: "font-mono text-[10px] text-fg-muted",
+				className: "text-fg-muted font-mono text-[10px]",
 				children: l ? "Copied!" : n
 			}),
 			a !== void 0 && /* @__PURE__ */ b("span", {
-				className: "text-[10px] text-fg-muted/60",
+				className: "text-fg-muted/60 text-[10px]",
 				children: a
 			})
 		]
@@ -285,7 +285,7 @@ var oe = m(function({ value: t, width: n = 200, height: r = 60, showValue: i = !
 }, he = m(function({ className: t, count: n, max: r = 99, variant: i = "danger", ...a }, o) {
 	let s = n > r ? `${r}+` : String(n);
 	return /* @__PURE__ */ b("span", {
-		className: e("inline-flex min-w-5 select-none items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-bold leading-none", me[i], t),
+		className: e("inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] leading-none font-bold select-none", me[i], t),
 		"data-component": "count-badge",
 		"data-variant": i,
 		ref: o,
@@ -382,7 +382,7 @@ var j = m(function({ targetDate: t, onComplete: n, showDays: r = !0, showSeconds
 				"data-testid": "separator",
 				children: ":"
 			}), /* @__PURE__ */ b("span", {
-				className: "inline-flex items-center justify-center rounded bg-bg-tertiary px-1.5 py-0.5 tabular-nums gds-radius-button gds-text-body text-fg",
+				className: "bg-bg-tertiary gds-radius-button gds-text-body text-fg inline-flex items-center justify-center rounded px-1.5 py-0.5 tabular-nums",
 				"data-testid": `segment-${e.label}`,
 				children: e.value
 			})]
@@ -493,7 +493,7 @@ var j = m(function({ targetDate: t, onComplete: n, showDays: r = !0, showSeconds
 		children: n.map((e, t) => /* @__PURE__ */ x("span", {
 			className: "contents",
 			children: [t > 0 && /* @__PURE__ */ b("span", {
-				className: "text-[10px] text-fg-muted",
+				className: "text-fg-muted text-[10px]",
 				children: "+"
 			}), /* @__PURE__ */ b(o, { children: e })]
 		}, t))
@@ -507,7 +507,7 @@ var j = m(function({ targetDate: t, onComplete: n, showDays: r = !0, showSeconds
 		ref: a,
 		...i,
 		children: /* @__PURE__ */ b("span", {
-			className: e("inline-flex cursor-help items-center text-fg-muted/60 hover:text-fg-muted", t),
+			className: e("text-fg-muted/60 hover:text-fg-muted inline-flex cursor-help items-center", t),
 			"data-component": "info-tip",
 			children: /* @__PURE__ */ x("svg", {
 				className: xe[r],
@@ -526,11 +526,11 @@ var j = m(function({ targetDate: t, onComplete: n, showDays: r = !0, showSeconds
 }), Ce = m(function({ label: t, value: n, mono: r = !1, className: i, ...a }, o) {
 	return /* @__PURE__ */ x("div", {
 		ref: o,
-		className: e("inline-flex items-baseline gap-1.5 gds-text-body", i),
+		className: e("gds-text-body inline-flex items-baseline gap-1.5", i),
 		"data-component": "key-value",
 		...a,
 		children: [/* @__PURE__ */ b("span", {
-			className: "shrink-0 text-fg-muted gds-text-caption",
+			className: "text-fg-muted gds-text-caption shrink-0",
 			children: t
 		}), /* @__PURE__ */ b("span", {
 			className: e("text-fg", r && "font-mono"),
@@ -590,9 +590,9 @@ var Ee = m(function({ keys: t, onTrigger: n, showBadge: r = !1, disabled: i = !1
 		...r,
 		children: [/* @__PURE__ */ x("span", {
 			className: "relative flex h-2 w-2",
-			children: [/* @__PURE__ */ b("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-danger opacity-75" }), /* @__PURE__ */ b("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-danger" })]
+			children: [/* @__PURE__ */ b("span", { className: "bg-danger absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }), /* @__PURE__ */ b("span", { className: "bg-danger relative inline-flex h-2 w-2 rounded-full" })]
 		}), /* @__PURE__ */ b("span", {
-			className: "text-xs font-bold uppercase tracking-wide text-danger",
+			className: "text-danger text-xs font-bold tracking-wide uppercase",
 			children: n
 		})]
 	});
@@ -689,10 +689,10 @@ var Me = m(function({ className: t, label: n, max: r = 100, min: i = 0, showValu
 		children: [(n !== void 0 || a) && /* @__PURE__ */ x("div", {
 			className: "mb-1 flex items-center justify-between",
 			children: [n !== void 0 && /* @__PURE__ */ b("span", {
-				className: "gds-text-body font-medium text-fg",
+				className: "gds-text-body text-fg font-medium",
 				children: n
 			}), a && /* @__PURE__ */ x("span", {
-				className: "font-mono gds-text-label text-fg-muted tabular-nums",
+				className: "gds-text-label text-fg-muted font-mono tabular-nums",
 				children: [Math.round(f * 100), "%"]
 			})]
 		}), /* @__PURE__ */ b("div", {
@@ -703,7 +703,7 @@ var Me = m(function({ className: t, label: n, max: r = 100, min: i = 0, showValu
 			className: R({ size: o }),
 			role: "meter",
 			children: /* @__PURE__ */ b("div", {
-				className: e("h-full gds-radius-badge transition-all duration-500", p),
+				className: e("gds-radius-badge h-full transition-all duration-500", p),
 				style: { width: `${f * 100}%` }
 			})
 		})]
@@ -726,7 +726,7 @@ var Me = m(function({ className: t, label: n, max: r = 100, min: i = 0, showValu
 }), Pe = m(function({ className: t, label: n, online: r, ...i }, a) {
 	let o = r ? "bg-success" : "bg-fg-muted/40", s = n ?? (r ? "Online" : "Offline");
 	return /* @__PURE__ */ x("span", {
-		className: e("inline-flex items-center gds-gap-sm", t),
+		className: e("gds-gap-sm inline-flex items-center", t),
 		"data-component": "online-indicator",
 		ref: a,
 		...i,
@@ -771,7 +771,7 @@ function Fe({ children: t, className: n, duration: r = 10, radius: i = 100 }) {
 var Ie = m(function({ className: t, precision: n = 1, showSign: r = !1, value: i, ...a }, o) {
 	let s = i > 0, c = s ? "text-success" : i < 0 ? "text-danger" : "text-fg-muted", l = `${r && s ? "+" : ""}${i.toFixed(n)}%`;
 	return /* @__PURE__ */ b("span", {
-		className: e("inline-flex tabular-nums text-sm font-medium", c, t),
+		className: e("inline-flex text-sm font-medium tabular-nums", c, t),
 		"data-component": "percentage",
 		ref: o,
 		...a,
@@ -917,7 +917,7 @@ var Ie = m(function({ className: t, precision: n = 1, showSign: r = !1, value: i
 				strokeWidth: r
 			})]
 		}), /* @__PURE__ */ x("span", {
-			className: "absolute font-mono text-xs font-bold text-fg",
+			className: "text-fg absolute font-mono text-xs font-bold",
 			style: { fontSize: n * .22 },
 			children: [s, "%"]
 		})]
@@ -1060,13 +1060,13 @@ var Je = m(function({ value: t, size: n = 128, color: r = "currentColor", bgColo
 				children: r
 			})
 		}), a !== void 0 && /* @__PURE__ */ b("span", {
-			className: "select-none text-[10px] text-fg-muted",
+			className: "text-fg-muted text-[10px] select-none",
 			children: a
 		})]
 	});
 }), Xe = m(function({ className: t, direction: n = "vertical", disabled: r = !1, onChange: a, options: o, value: s, ...c }, l) {
 	return /* @__PURE__ */ b("div", {
-		className: e("flex gds-gap", n === "vertical" ? "flex-col" : "flex-row flex-wrap", t),
+		className: e("gds-gap flex", n === "vertical" ? "flex-col" : "flex-row flex-wrap", t),
 		"data-component": "radio-group",
 		ref: l,
 		role: "radiogroup",
@@ -1075,14 +1075,14 @@ var Je = m(function({ value: t, size: n = 128, color: r = "currentColor", bgColo
 			let n = t.value === s, o = r || t.disabled === !0;
 			return /* @__PURE__ */ x("button", {
 				"aria-checked": n,
-				className: e("inline-flex select-none items-center gds-gap-sm gds-text-body", i, o && "cursor-not-allowed opacity-50"),
+				className: e("gds-gap-sm gds-text-body inline-flex items-center select-none", i, o && "cursor-not-allowed opacity-50"),
 				disabled: o,
 				onClick: () => a?.(t.value),
 				role: "radio",
 				type: "button",
 				children: [/* @__PURE__ */ b("span", {
-					className: e("inline-flex gds-icon shrink-0 items-center justify-center gds-radius-badge border transition-colors", n ? "border-accent" : "border-border hover:border-accent/50"),
-					children: n && /* @__PURE__ */ b("span", { className: "h-2 w-2 gds-radius-badge bg-accent" })
+					className: e("gds-icon gds-radius-badge inline-flex shrink-0 items-center justify-center border transition-colors", n ? "border-accent" : "border-border hover:border-accent/50"),
+					children: n && /* @__PURE__ */ b("span", { className: "gds-radius-badge bg-accent h-2 w-2" })
 				}), /* @__PURE__ */ b("span", {
 					className: "text-fg",
 					children: t.label
@@ -1112,7 +1112,7 @@ function K({ filled: t }) {
 var Ze = m(function({ className: t, max: n = 5, onChange: r, readonly: a = !1, renderStar: o, size: s = "default", value: c, ...l }, u) {
 	let [d, f] = y(null), p = h(() => f(null), []);
 	return /* @__PURE__ */ b("div", {
-		className: e("inline-flex gds-gap-xs", t),
+		className: e("gds-gap-xs inline-flex", t),
 		"data-component": "rating",
 		onMouseLeave: a ? void 0 : p,
 		ref: u,
@@ -1163,7 +1163,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 	}), [n]);
 	let l = n instanceof Date ? n : new Date(n), u = Qe(l);
 	return /* @__PURE__ */ b("time", {
-		className: e("font-mono text-fg-muted", t),
+		className: e("text-fg-muted font-mono", t),
 		"data-component": "relative-time",
 		dateTime: l.toISOString(),
 		ref: a,
@@ -1184,7 +1184,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 		"data-component": "ribbon",
 		...o,
 		children: [/* @__PURE__ */ b("div", {
-			className: e("pointer-events-none absolute top-3 z-10 px-6 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm", et[r], c ? "-right-6 rotate-45" : "-left-6 -rotate-45"),
+			className: e("pointer-events-none absolute top-3 z-10 px-6 py-0.5 text-[10px] font-bold tracking-wider uppercase shadow-sm", et[r], c ? "-right-6 rotate-45" : "-left-6 -rotate-45"),
 			children: n
 		}), t]
 	});
@@ -1200,7 +1200,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 		},
 		...a,
 		children: /* @__PURE__ */ b("div", {
-			className: "flex items-center justify-center text-xs font-bold text-accent-fg select-none",
+			className: "text-accent-fg flex items-center justify-center text-xs font-bold select-none",
 			style: {
 				backgroundColor: n ?? "var(--color-accent)",
 				left: s ? void 0 : -20,
@@ -1232,7 +1232,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 		className: e("relative overflow-hidden", i),
 		onPointerDown: c,
 		children: [t, o.map((e) => /* @__PURE__ */ b("span", {
-			className: "pointer-events-none absolute animate-ripple rounded-full",
+			className: "animate-ripple pointer-events-none absolute rounded-full",
 			style: {
 				left: e.x - e.size / 2,
 				top: e.y - e.size / 2,
@@ -1255,7 +1255,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 		style: { height: `${r}px` },
 		...i,
 		children: /* @__PURE__ */ b("div", {
-			className: "h-full bg-accent transition-[width] duration-100 ease-out",
+			className: "bg-accent h-full transition-[width] duration-100 ease-out",
 			style: {
 				width: `${o}%`,
 				...n === void 0 ? {} : { backgroundColor: n }
@@ -1275,7 +1275,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 			top: 0,
 			behavior: n ? "smooth" : "auto"
 		}),
-		className: e("fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full bg-accent text-accent-fg shadow-lg transition-opacity hover:bg-accent/90", i, r),
+		className: e("bg-accent text-accent-fg hover:bg-accent/90 fixed right-6 bottom-6 z-40 flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-opacity", i, r),
 		"data-component": "scroll-to-top",
 		children: /* @__PURE__ */ b("svg", {
 			width: "16",
@@ -1295,7 +1295,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 }, ct = m(function({ options: n, value: r, onChange: a, size: o = "default", disabled: s, glass: c, className: l, ...u }, d) {
 	return /* @__PURE__ */ b("div", {
 		ref: d,
-		className: e("inline-flex select-none gds-radius-button bg-bg-tertiary p-0.5", c === !0 && t(c), s === !0 && "pointer-events-none opacity-50", l),
+		className: e("gds-radius-button bg-bg-tertiary inline-flex p-0.5 select-none", c === !0 && t(c), s === !0 && "pointer-events-none opacity-50", l),
 		"data-component": "segmented-control",
 		"data-state": s === !0 ? "disabled" : "enabled",
 		role: "radiogroup",
@@ -1310,7 +1310,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 				onClick: () => {
 					n || a(t.value);
 				},
-				className: e("gds-radius-button transition-all", st[o ?? "default"], i, n ? "bg-bg font-medium text-fg gds-shadow-sm" : "text-fg-muted hover:text-fg"),
+				className: e("gds-radius-button transition-all", st[o ?? "default"], i, n ? "bg-bg text-fg gds-shadow-sm font-medium" : "text-fg-muted hover:text-fg"),
 				children: t.label
 			}, t.value);
 		})
@@ -1325,7 +1325,7 @@ var $e = m(function({ className: t, date: n, prefix: r, ...i }, a) {
 			className: "inline-flex items-center gap-0.5",
 			children: r.map((e, t) => /* @__PURE__ */ b(o, { children: e }, t))
 		}), n !== void 0 && /* @__PURE__ */ b("span", {
-			className: "text-xs text-fg-muted",
+			className: "text-fg-muted text-xs",
 			children: n
 		})]
 	});
@@ -1507,7 +1507,7 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 }, bt = m(function({ className: n, glass: r, icon: i, label: a, size: o = "default", status: s, ...c }, l) {
 	let u = a ?? s;
 	return /* @__PURE__ */ x("span", {
-		className: e("inline-flex select-none items-center gds-gap-xs gds-radius-badge font-medium", o === "sm" ? "gds-pad-x-sm py-px gds-text-caption" : "gds-pad-x-sm gds-pad-y-sm gds-text-body", Y[s], t(r), r === !0 && "border border-white/10 bg-white/5", n),
+		className: e("gds-gap-xs gds-radius-badge inline-flex items-center font-medium select-none", o === "sm" ? "gds-pad-x-sm py-px gds-text-caption" : "gds-pad-x-sm gds-pad-y-sm gds-text-body", Y[s], t(r), r === !0 && "border border-white/10 bg-white/5", n),
 		"data-component": "status-badge",
 		"data-state": s,
 		ref: l,
@@ -1529,7 +1529,7 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 	disconnected: "bg-danger"
 }, St = m(function({ className: t, label: n, status: r, ...i }, a) {
 	return /* @__PURE__ */ x("span", {
-		className: e("inline-flex items-center gds-gap-sm", t),
+		className: e("gds-gap-sm inline-flex items-center", t),
 		"data-component": "status-dot",
 		"data-state": r,
 		ref: a,
@@ -1546,14 +1546,14 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 		"data-component": "switch-group",
 		role: "group",
 		children: r.map((e) => /* @__PURE__ */ x("div", {
-			className: "flex items-center justify-between gap-4 gds-pad-x gds-pad-y-sm",
+			className: "gds-pad-x gds-pad-y-sm flex items-center justify-between gap-4",
 			children: [/* @__PURE__ */ x("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ b("div", {
-					className: "gds-text-body font-medium text-fg",
+					className: "gds-text-body text-fg font-medium",
 					children: e.label
 				}), e.description !== void 0 && /* @__PURE__ */ b("div", {
-					className: "mt-0.5 gds-text-caption text-fg-muted",
+					className: "gds-text-caption text-fg-muted mt-0.5",
 					children: e.description
 				})]
 			}), /* @__PURE__ */ b(d, {
@@ -1574,7 +1574,7 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 	sm: "px-1 py-px text-[9px]"
 }, Dt = m(function({ className: t, label: n, size: r = "default", variant: i = "accent", ...a }, o) {
 	return /* @__PURE__ */ b("span", {
-		className: e("inline-flex select-none items-center rounded-full font-bold uppercase leading-none tracking-wider", Tt[i], Et[r], t),
+		className: e("inline-flex items-center rounded-full leading-none font-bold tracking-wider uppercase select-none", Tt[i], Et[r], t),
 		"data-component": "text-badge",
 		"data-variant": i,
 		ref: o,
@@ -1595,7 +1595,7 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 		...s,
 		children: t
 	}) : r === "highlight" ? /* @__PURE__ */ b("span", {
-		className: e("box-decoration-clone bg-accent/20 px-1", n),
+		className: e("bg-accent/20 box-decoration-clone px-1", n),
 		"data-component": "text-effect",
 		"data-variant": r,
 		ref: c,
@@ -1644,7 +1644,7 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 		type: "button",
 		"aria-label": s ? "Switch to light mode" : "Switch to dark mode",
 		onClick: () => n(s ? "light" : "dark"),
-		className: e("inline-flex items-center justify-center rounded-full text-fg-muted transition-colors hover:text-fg select-none", At[r], i, a),
+		className: e("text-fg-muted hover:text-fg inline-flex items-center justify-center rounded-full transition-colors select-none", At[r], i, a),
 		"data-component": "theme-toggle",
 		"data-state": t,
 		children: s ? /* @__PURE__ */ x("svg", {
@@ -1687,7 +1687,7 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 	}
 	return /* @__PURE__ */ b("div", {
 		ref: u,
-		className: e("inline-flex select-none overflow-hidden gds-radius-button border border-border bg-bg", s === !0 && "pointer-events-none opacity-50", c),
+		className: e("gds-radius-button border-border bg-bg inline-flex overflow-hidden border select-none", s === !0 && "pointer-events-none opacity-50", c),
 		"data-component": "toggle-group",
 		"data-state": s === !0 ? "disabled" : "enabled",
 		role: "group",
@@ -1696,7 +1696,7 @@ var yt = m(function({ value: t, max: n = 5, size: r = "default", color: i = "cur
 			let c = n.includes(r.value), l = a === t.length - 1;
 			return /* @__PURE__ */ b("button", {
 				"aria-pressed": c,
-				className: e("transition-colors", Z.size[o ?? "default"], !l && "border-r border-border", i, c ? "bg-accent/10 text-accent" : "text-fg-muted hover:bg-bg-tertiary"),
+				className: e("transition-colors", Z.size[o ?? "default"], !l && "border-border border-r", i, c ? "bg-accent/10 text-accent" : "text-fg-muted hover:bg-bg-tertiary"),
 				disabled: s,
 				onClick: () => d(r.value),
 				type: "button",
@@ -1750,7 +1750,7 @@ function It({ className: t, inverse: n = !1, label: r, value: i }) {
 				"%"
 			] }),
 			r !== void 0 && /* @__PURE__ */ b("span", {
-				className: "text-xs font-normal text-fg-muted",
+				className: "text-fg-muted text-xs font-normal",
 				children: r
 			})
 		]
@@ -1761,7 +1761,7 @@ function It({ className: t, inverse: n = !1, label: r, value: i }) {
 var Lt = m(function({ className: t, items: n, max: r = 3, moreLabel: i, ...a }, o) {
 	let s = n.slice(0, r), c = n.length - r;
 	return /* @__PURE__ */ x("div", {
-		className: e("inline-flex flex-wrap items-center gds-gap-sm", t),
+		className: e("gds-gap-sm inline-flex flex-wrap items-center", t),
 		"data-component": "truncated-list",
 		ref: o,
 		...a,
@@ -1836,18 +1836,18 @@ var Lt = m(function({ className: t, items: n, max: r = 3, moreLabel: i, ...a },
 		children: [
 			/* @__PURE__ */ b("button", {
 				type: "button",
-				className: e("flex h-7 w-7 items-center justify-center rounded-md border border-border text-fg-muted transition-colors hover:bg-bg-tertiary disabled:opacity-40", i),
+				className: e("border-border text-fg-muted hover:bg-bg-tertiary flex h-7 w-7 items-center justify-center rounded-md border transition-colors disabled:opacity-40", i),
 				disabled: s || d,
 				onClick: () => n(Math.max(r ?? -Infinity, t - o)),
 				children: "−"
 			}),
 			/* @__PURE__ */ b("span", {
-				className: "min-w-[2rem] text-center tabular-nums gds-text text-fg",
+				className: "gds-text text-fg min-w-[2rem] text-center tabular-nums",
 				children: t
 			}),
 			/* @__PURE__ */ b("button", {
 				type: "button",
-				className: e("flex h-7 w-7 items-center justify-center rounded-md border border-border text-fg-muted transition-colors hover:bg-bg-tertiary disabled:opacity-40", i),
+				className: e("border-border text-fg-muted hover:bg-bg-tertiary flex h-7 w-7 items-center justify-center rounded-md border transition-colors disabled:opacity-40", i),
 				disabled: s || f,
 				onClick: () => n(Math.min(a ?? Infinity, t + o)),
 				children: "+"
@@ -1893,4 +1893,4 @@ var Wt = m(function({ children: t, className: n, duration: r = 300, scale: i = 1
 //#endregion
 export { Ee as $, nt as A, He as B, mt as C, C as Ct, ot as D, ct as E, Ye as F, Fe as G, ze as H, W as I, Me as J, Pe as K, Je as L, $e as M, Ze as N, at as O, Xe as P, De as Q, Ge as R, gt as S, T as St, lt as T, Re as U, Ve as V, Ie as W, ke as X, R as Y, Oe as Z, St as _, ue as _t, Rt as a, _e as at, xt as b, ie as bt, Ft as c, N as ct, Nt as d, O as dt, Ce as et, Mt as f, he as ft, wt as g, de as gt, Dt as h, E as ht, Vt as i, ve as it, tt as j, it as k, Pt as l, M as lt, Ot as m, fe as mt, Ut as n, be as nt, Lt as o, F as ot, kt as p, pe as pt, Ne as q, Ht as r, ye as rt, It as s, P as st, Wt as t, Se as tt, Z as u, j as ut, Ct as v, ce as vt, dt as w, yt as x, re as xt, bt as y, oe as yt, We as z };
 
-//# sourceMappingURL=l3-atoms-BGwlQvjl.js.map
+//# sourceMappingURL=l3-atoms-BCJNqPHk.js.map