admin-ui-starter-kit 0.6.8 → 0.7.0

package/dist/components/features/filters/index.js

@@ -1,15 +1,15 @@
 import { useStrings as e } from "../../../lib/strings.js";
 import { a as t } from "../../../_shared/ui-provider-Dz2qXgZQ.js";
 import { cn as n } from "../../../lib/utils.js";
-import { t as r } from "../../../_shared/button-Be2ayMxF.js";
-import { a as i, s as a } from "../../../_shared/typography-5bLhAYaK.js";
-import { t as o } from "../../../_shared/badge-nZ2zbAV4.js";
-import { t as s } from "../../../_shared/input-CzJzVyQ0.js";
-import { t as c } from "../../../_shared/date-picker-CvqLnlxm.js";
+import { t as r } from "../../../_shared/button-CNEMqDHK.js";
+import { a as i, s as a } from "../../../_shared/typography-C_kCoR1d.js";
+import { t as o } from "../../../_shared/badge-DOJpEtsa.js";
+import { t as s } from "../../../_shared/input-BEhrcsk7.js";
+import { t as c } from "../../../_shared/date-picker-BaPDfs1p.js";
 import { n as l, r as u, s as d, t as f } from "../../../_shared/popover-xVENY0Ax.js";
 import { i as p, s as m } from "../../../_shared/command-CAI-BCSR.js";
-import { a as h, i as g, n as _, r as v, t as y } from "../../../_shared/command-IP2wy_HN.js";
-import { t as b } from "../../../_shared/popover-menu-f2O6R_27.js";
+import { a as h, i as g, n as _, r as v, t as y } from "../../../_shared/command-B-Yokco3.js";
+import { t as b } from "../../../_shared/popover-menu-DXh14PIu.js";
 import x, { Component as S, createContext as C, useCallback as w, useContext as T, useEffect as E, useId as D, useMemo as O, useRef as k, useState as A } from "react";
 import { format as j, isValid as M, parse as N } from "date-fns";
 import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
@@ -441,7 +441,7 @@ function ge({ operator: e, operators: t, onOperatorChange: i, segmentResetClass:
 		trigger: /* @__PURE__ */ F(r, {
 			variant: "secondary",
 			buttonStyle: "ghost",
-			className: n(o, "h-full px-control text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground"),
+			className: n(o, "h-full px-control text-pxs text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground"),
 			onClick: (e) => {
 				e.stopPropagation();
 			},
@@ -480,28 +480,28 @@ function _e({ filter: e, value: t }) {
 		weight: "semibold",
 		children: ye(e, t, n)
 	}) : e.options && e.type !== G.DATE ? /* @__PURE__ */ I("div", {
-		className: "flex items-center gap-1",
+		className: "flex items-center gap-space-xs",
 		children: [/* @__PURE__ */ I("div", {
 			className: "relative flex",
 			children: [t.slice(0, 2).map((t, n) => {
 				let r = e.options?.find((e) => e.value === t);
 				return r?.icon ? /* @__PURE__ */ F("div", {
-					className: `${n > 0 ? "-ml-1.5" : ""} border-background bg-background relative rounded-full border`,
+					className: `${n > 0 ? "-ml-space-sm" : ""} border-background bg-background relative rounded-full border`,
 					style: { zIndex: 10 - n },
 					children: r.icon
 				}, t) : null;
 			}), t.length > 2 && /* @__PURE__ */ I("div", {
-				className: "bg-muted border-background relative -ml-space-sm flex size-icon items-center justify-center rounded-full border text-xs font-medium",
+				className: "bg-muted border-background relative -ml-space-sm flex size-icon items-center justify-center rounded-full border text-pxs font-medium",
 				children: ["+", t.length - 2]
 			})]
 		}), /* @__PURE__ */ F(a, {
 			tag: "span",
-			size: "xs",
+			size: "pxs",
 			weight: "semibold",
 			children: be(e, t, n)
 		})]
 	}) : e.type === G.DATE ? /* @__PURE__ */ I("div", {
-		className: "flex items-center gap-1",
+		className: "flex items-center gap-space-xs",
 		children: [/* @__PURE__ */ F(z, { className: "text-muted-foreground size-icon-sm" }), /* @__PURE__ */ F(a, {
 			tag: "span",
 			size: "xs",
@@ -565,9 +565,9 @@ function xe({ filter: e, value: t, isActive: i, operators: o, operator: s, onOpe
 					}),
 					/* @__PURE__ */ F(a, {
 						tag: "span",
-						size: "xs",
+						size: "pxs",
 						weight: "semibold",
-						className: "text-xs",
+						className: "text-pxs",
 						children: e.label
 					}),
 					/* @__PURE__ */ F(B, { className: "size-icon-sm" })
@@ -755,7 +755,7 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 	}, ne = () => {
 		n(m), o();
 	}, U = O(() => C || w ? /* @__PURE__ */ I("div", {
-		className: "flex items-center justify-center gap-2 py-4",
+		className: "flex items-center justify-center gap-space-md py-space-xl",
 		children: [/* @__PURE__ */ F(H, { className: "text-muted-foreground size-4 animate-spin" }), /* @__PURE__ */ F(a, {
 			tag: "span",
 			size: "xs",
@@ -763,9 +763,9 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 			children: c.searching
 		})]
 	}) : T ? /* @__PURE__ */ I("div", {
-		className: "flex flex-col items-center gap-2 py-4",
+		className: "flex flex-col items-center gap-space-md py-space-xl",
 		children: [/* @__PURE__ */ I("div", {
-			className: "flex items-center gap-1.5",
+			className: "flex items-center gap-space-sm",
 			children: [/* @__PURE__ */ F(L, { className: "text-destructive size-4" }), /* @__PURE__ */ F(a, {
 				tag: "span",
 				size: "xs",
@@ -782,7 +782,7 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 			children: c.retryFetch
 		})]
 	}) : j ? /* @__PURE__ */ F("div", {
-		className: "text-muted-foreground flex items-center justify-center py-4",
+		className: "text-muted-foreground flex items-center justify-center py-space-xl",
 		children: /* @__PURE__ */ F(a, {
 			tag: "span",
 			size: "xs",
@@ -800,7 +800,7 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 	]);
 	return /* @__PURE__ */ I(P, { children: [
 		/* @__PURE__ */ I("div", {
-			className: "flex items-center gap-2 border-b border-border/60 px-3 py-2.5",
+			className: "flex items-center gap-space-md border-b border-border/60 px-control py-row-y-lg",
 			children: [!!B && /* @__PURE__ */ F(r, {
 				variant: "secondary",
 				buttonStyle: "ghost",
@@ -831,7 +831,7 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 				value: d,
 				onValueChange: f
 			}), /* @__PURE__ */ F(h, { children: te.length === 0 ? /* @__PURE__ */ F(_, { children: U }) : /* @__PURE__ */ I(v, { children: [!!(w && !C) && /* @__PURE__ */ I("div", {
-				className: "flex items-center gap-1.5 px-2 py-1",
+				className: "flex items-center gap-space-sm px-control-sm py-space-xs",
 				children: [/* @__PURE__ */ F(H, { className: "text-muted-foreground size-3 animate-spin" }), /* @__PURE__ */ F(a, {
 					tag: "span",
 					size: "xs",
@@ -841,7 +841,7 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 			}), te.map((e) => /* @__PURE__ */ I(g, {
 				onSelect: () => V(e.value),
 				disabled: e.disabled || !!z && m.length >= z && !m.includes(e.value),
-				className: "flex items-center gap-2",
+				className: "flex items-center gap-space-md",
 				children: [
 					e.icon,
 					/* @__PURE__ */ F(a, {
@@ -857,7 +857,7 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 			}, e.value))] }) })]
 		}),
 		/* @__PURE__ */ I("div", {
-			className: "flex justify-between border-t p-2",
+			className: "flex items-center justify-between gap-space-md border-t border-border/60 px-control-sm py-row-y",
 			children: [/* @__PURE__ */ F(a, {
 				tag: "span",
 				size: "xs",
@@ -867,7 +867,7 @@ function Ee({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 					filterLabel: (m.length > 1 ? e.pluralLabel : e.label) ?? e.label
 				})
 			}), /* @__PURE__ */ F("div", {
-				className: "flex gap-2",
+				className: "flex gap-space-md",
 				children: /* @__PURE__ */ F(r, {
 					variant: "secondary",
 					buttonStyle: "outline",
@@ -943,7 +943,7 @@ function ke({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, isF
 	return /* @__PURE__ */ I("div", {
 		className: "flex flex-col",
 		children: [/* @__PURE__ */ I("div", {
-			className: "flex items-center gap-2 border-b border-border/60 px-3 py-2.5",
+			className: "flex items-center gap-space-md border-b border-border/60 px-control py-row-y-lg",
 			children: [!!p && /* @__PURE__ */ F(r, {
 				type: "button",
 				variant: "secondary",
@@ -960,7 +960,7 @@ function ke({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, isF
 				children: e.label
 			})]
 		}), /* @__PURE__ */ F("div", {
-			className: "p-2",
+			className: "p-space-md",
 			children: /* @__PURE__ */ F(Oe, {
 				filter: e,
 				value: m,
@@ -999,10 +999,10 @@ var Ae = class extends S {
 		if (this.state.hasError) {
 			let { fallback: e, filterKey: t, labels: n } = this.props;
 			return e || /* @__PURE__ */ I("div", {
-				className: "rounded-md border border-destructive/30 bg-destructive/10 p-3 text-xs text-destructive",
+				className: "rounded-md border border-destructive/30 bg-destructive/10 p-surface-sm text-xs text-destructive",
 				children: [
 					/* @__PURE__ */ I("div", {
-						className: "mb-1 flex items-center justify-between",
+						className: "mb-space-xs flex items-center justify-between",
 						children: [/* @__PURE__ */ F(a, {
 							tag: "span",
 							weight: "semibold",
@@ -1025,7 +1025,7 @@ var Ae = class extends S {
 					/* @__PURE__ */ F(a, {
 						size: "xs",
 						type: "error",
-						className: "mt-1 font-mono",
+						className: "mt-space-xs font-mono",
 						children: this.state.error?.message || n.unknownError
 					})
 				]
@@ -1052,7 +1052,7 @@ function je({ filter: e, onSelect: t }) {
 	let { strings: n } = Y(), r = e.type === G.DATE ? e.operator === "between" ? n?.selectDateRange : n?.selectDate : e.options ? `${e.options.length} ${n?.options ?? ""}`.trim() : null;
 	return /* @__PURE__ */ I(g, {
 		onSelect: t,
-		className: "mx-2 flex items-center gap-3 rounded-md px-2 py-2",
+		className: "mx-space-xs flex items-center gap-space-md rounded-md px-control-sm py-row-y",
 		children: [!!e.icon && /* @__PURE__ */ F("span", {
 			className: "shrink-0 text-muted-foreground",
 			children: e.icon
@@ -1078,20 +1078,20 @@ function je({ filter: e, onSelect: t }) {
 function Me({ availableFilters: e, activeFilters: t, onFilterSelect: n }) {
 	let { strings: r } = Y(), i = (e) => {
 		n(e);
-	}, a = "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-muted-foreground/70 [&_[cmdk-group-heading]]:font-medium";
+	}, a = "[&_[cmdk-group-heading]]:px-control-sm [&_[cmdk-group-heading]]:pb-space-2xs [&_[cmdk-group-heading]]:pt-space-sm [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-muted-foreground/70 [&_[cmdk-group-heading]]:font-medium";
 	return /* @__PURE__ */ I(y, {
 		className: "rounded-none p-0",
 		children: [/* @__PURE__ */ F("div", {
-			className: "border-b border-border/50 px-3 py-2",
+			className: "border-b border-border/50 px-control-sm py-space-sm",
 			children: /* @__PURE__ */ F(p, {
-				className: "text-xs",
+				className: "text-pxs",
 				placeholder: r.searchFilters
 			})
 		}), /* @__PURE__ */ I(h, {
-			className: "max-h-72 py-1",
+			className: "max-h-72 py-space-xs",
 			children: [
 				/* @__PURE__ */ F(_, {
-					className: "px-3 py-4 text-center text-xs text-muted-foreground",
+					className: "px-control-sm py-space-xl text-center text-xs text-muted-foreground",
 					children: r.noFiltersAvailable
 				}),
 				e.length > 0 && /* @__PURE__ */ F(v, {
@@ -1137,7 +1137,7 @@ function Ne({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 		className: "flex flex-col",
 		children: [
 			/* @__PURE__ */ I("div", {
-				className: "flex items-center gap-2 border-b border-border/60 px-3 py-2.5",
+				className: "flex items-center gap-space-md border-b border-border/60 px-control py-row-y-lg",
 				children: [!!d && /* @__PURE__ */ F(r, {
 					type: "button",
 					variant: "secondary",
@@ -1149,7 +1149,7 @@ function Ne({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 					children: /* @__PURE__ */ F(R, { className: "size-icon-sm" })
 				}), /* @__PURE__ */ F(a, {
 					tag: "span",
-					size: "xs",
+					size: "pxs",
 					weight: "semibold",
 					className: "truncate",
 					children: e.label
@@ -1158,18 +1158,18 @@ function Ne({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 			/* @__PURE__ */ I(y, {
 				className: "rounded-none p-0",
 				children: [/* @__PURE__ */ F("div", {
-					className: "border-b border-border/50 px-3 py-2.5",
+					className: "border-b border-border/50 px-control py-row-y-lg",
 					children: /* @__PURE__ */ F(p, {
-						className: "text-xs",
+						className: "text-pxs",
 						placeholder: W(c.searchPlaceholder, { filterLabel: e.label.toLowerCase() })
 					})
 				}), /* @__PURE__ */ I(h, {
-					className: "max-h-64 px-3 py-2",
+					className: "max-h-64 px-control py-row-y",
 					children: [/* @__PURE__ */ F(_, { children: /* @__PURE__ */ F(a, {
 						size: "xs",
 						type: "secondary",
 						align: "center",
-						className: "py-4",
+						className: "py-space-xl",
 						children: c.noOptionsFound
 					}) }), /* @__PURE__ */ F(v, {
 						className: "p-0 [&_[cmdk-group]]:p-0",
@@ -1179,7 +1179,7 @@ function Ne({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 								onSelect: () => b(e.value),
 								"data-checked": t || void 0,
 								disabled: e.disabled,
-								className: "flex items-start gap-2.5 rounded-md px-2 py-2 data-[checked=true]:**:[svg]:text-primary",
+								className: "flex items-start gap-space-md rounded-md px-control-sm py-row-y data-[checked=true]:**:[svg]:text-primary",
 								children: [!!e.icon && /* @__PURE__ */ F("span", {
 									className: "mt-0.5 shrink-0 text-muted-foreground",
 									children: e.icon
@@ -1195,7 +1195,7 @@ function Ne({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 										tag: "span",
 										size: "xs",
 										type: "secondary",
-										className: "truncate mt-0.5",
+										className: "truncate mt-space-2xs",
 										children: e.description
 									})]
 								})]
@@ -1205,7 +1205,7 @@ function Ne({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 				})]
 			}),
 			!!S && /* @__PURE__ */ I("div", {
-				className: "flex items-center justify-between gap-2 border-t border-border/60 px-2.5 py-1.5",
+				className: "flex items-center justify-between gap-space-md border-t border-border/60 px-control-sm py-row-y",
 				children: [/* @__PURE__ */ F(a, {
 					tag: "span",
 					size: "xs",
@@ -1242,7 +1242,7 @@ function Pe({ filter: e, value: t, onChange: i, className: c }) {
 	}, h = w(() => {
 		i([]), d("");
 	}, [i]), g = t.length > 0, _ = t.length === 1 ? l.tag : l.tags, v = g ? /* @__PURE__ */ I("div", {
-		className: "space-y-2",
+		className: "space-y-space-md",
 		children: [/* @__PURE__ */ I("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ I(a, {
@@ -1259,13 +1259,13 @@ function Pe({ filter: e, value: t, onChange: i, className: c }) {
 				variant: "secondary",
 				buttonStyle: "ghost",
 				size: "small",
-				className: "h-auto px-space-sm py-0 text-xs text-muted-foreground hover:text-foreground",
+				className: "h-auto px-space-sm py-0 text-pxs text-muted-foreground hover:text-foreground",
 				type: "button",
 				"aria-label": l.clearAll,
 				children: l.clearAll
 			})]
 		}), /* @__PURE__ */ F("div", {
-			className: "flex flex-wrap gap-2",
+			className: "flex flex-wrap gap-space-md",
 			children: t.map((e) => /* @__PURE__ */ I(o, {
 				variant: "secondary",
 				className: "flex items-center gap-space-sm py-space-2xs pl-space-md pr-space-sm",
@@ -1287,9 +1287,9 @@ function Pe({ filter: e, value: t, onChange: i, className: c }) {
 		})]
 	}) : null;
 	return /* @__PURE__ */ I("div", {
-		className: n("tags-facet--component", "space-y-3", c),
+		className: n("tags-facet--component", "space-y-space-lg", c),
 		children: [/* @__PURE__ */ I("div", {
-			className: "flex gap-2",
+			className: "flex gap-space-md",
 			children: [/* @__PURE__ */ F("div", {
 				className: "relative flex-1",
 				children: /* @__PURE__ */ F(s, {
@@ -1337,7 +1337,7 @@ function Ie({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 		className: "flex flex-col",
 		children: [
 			/* @__PURE__ */ I("div", {
-				className: "flex items-center gap-2 border-b border-border/60 px-3 py-2.5",
+				className: "flex items-center gap-space-md border-b border-border/60 px-control py-row-y-lg",
 				children: [!!f && /* @__PURE__ */ F(r, {
 					type: "button",
 					variant: "secondary",
@@ -1355,7 +1355,7 @@ function Ie({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 				})]
 			}),
 			/* @__PURE__ */ F("div", {
-				className: "p-2",
+				className: "p-space-md",
 				children: /* @__PURE__ */ F(Fe, {
 					filter: e,
 					value: u,
@@ -1363,7 +1363,7 @@ function Ie({ filter: e, value: t, onFilterChange: n, onBackToFilterList: i, onC
 				})
 			}),
 			!!h && /* @__PURE__ */ I("div", {
-				className: "flex items-center justify-between gap-2 border-t border-border/60 px-2.5 py-1.5",
+				className: "flex items-center justify-between gap-space-md border-t border-border/60 px-control-sm py-row-y",
 				children: [/* @__PURE__ */ I(a, {
 					tag: "span",
 					size: "xs",
@@ -1558,7 +1558,7 @@ function ze({ tabs: e }) {
 				role: "tab",
 				"aria-selected": t,
 				onClick: () => l(e),
-				className: n("rounded-md px-2.5 py-1 text-xs font-semibold transition-colors", t ? "bg-foreground text-background" : "bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground"),
+				className: n("h-action-xs rounded-md px-control-sm py-0 text-pxs font-semibold transition-colors", t ? "bg-foreground text-background" : "bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground"),
 				children: [e.label, e.count !== void 0 && /* @__PURE__ */ F("span", {
 					className: n("ml-space-sm tabular-nums", t ? "text-background/70" : "text-muted-foreground/70"),
 					children: e.count
@@ -1685,8 +1685,8 @@ function Ge({ className: e, dynamicFilterOptions: t = {}, loadingFilters: i = {}
 					Object.entries(i).filter(([, e]) => e).map(([e]) => {
 						let t = g.find((t) => t.key === e)?.label || e;
 						return /* @__PURE__ */ I("div", {
-							className: "text-muted-foreground bg-muted/50 flex items-center rounded-md px-2 py-1 text-xs",
-							children: [/* @__PURE__ */ F("div", { className: "border-muted-foreground/30 border-t-primary mr-1 size-3 animate-spin rounded-full border-2" }), W(h.loadingOptions, { filterLabel: t })]
+							className: "text-muted-foreground bg-muted/50 flex items-center gap-space-sm rounded-md px-control-sm py-space-xs text-pxs",
+							children: [/* @__PURE__ */ F("div", { className: "border-muted-foreground/30 border-t-primary size-3 animate-spin rounded-full border-2" }), W(h.loadingOptions, { filterLabel: t })]
 						}, `loading-${e}`);
 					}),
 					v.map((e) => /* @__PURE__ */ F(Q, {
@@ -1964,7 +1964,7 @@ function st({ filter: e, value: t, onChange: i, className: o }) {
 		let r = C.current.get(e);
 		return r ? r.label : e;
 	}, re = t.length > 0, ie = O(() => T || D ? /* @__PURE__ */ I("div", {
-		className: n("async-select-facet--component", "flex items-center justify-center gap-2 py-4"),
+		className: n("async-select-facet--component", "flex items-center justify-center gap-space-md py-space-xl"),
 		children: [/* @__PURE__ */ F(H, { className: "text-muted-foreground size-4 animate-spin" }), /* @__PURE__ */ F(a, {
 			tag: "span",
 			size: "xs",
@@ -1972,9 +1972,9 @@ function st({ filter: e, value: t, onChange: i, className: o }) {
 			children: s.searching
 		})]
 	}) : j ? /* @__PURE__ */ I("div", {
-		className: "flex flex-col items-center gap-2 py-4",
+		className: "flex flex-col items-center gap-space-md py-space-xl",
 		children: [/* @__PURE__ */ I("div", {
-			className: "flex items-center gap-1.5",
+			className: "flex items-center gap-space-sm",
 			children: [/* @__PURE__ */ F(L, { className: "text-destructive size-4" }), /* @__PURE__ */ F(a, {
 				tag: "span",
 				size: "xs",
@@ -1991,7 +1991,7 @@ function st({ filter: e, value: t, onChange: i, className: o }) {
 			children: s.retryFetch
 		})]
 	}) : N ? /* @__PURE__ */ F("div", {
-		className: "text-muted-foreground flex items-center justify-center py-4",
+		className: "text-muted-foreground flex items-center justify-center py-space-xl",
 		children: /* @__PURE__ */ F(a, {
 			tag: "span",
 			size: "xs",
@@ -2055,7 +2055,7 @@ function st({ filter: e, value: t, onChange: i, className: o }) {
 						value: x,
 						onValueChange: S
 					}), /* @__PURE__ */ F(h, { children: V.length === 0 ? /* @__PURE__ */ F(_, { children: ie }) : /* @__PURE__ */ I(v, { children: [!!(D && !T) && /* @__PURE__ */ I("div", {
-						className: "flex items-center gap-1.5 px-2 py-1",
+						className: "flex items-center gap-space-sm px-control-sm py-space-xs",
 						children: [/* @__PURE__ */ F(H, { className: "text-muted-foreground size-3 animate-spin" }), /* @__PURE__ */ F(a, {
 							tag: "span",
 							size: "xs",
@@ -2104,11 +2104,11 @@ function ct({ filter: e, value: t, onChange: r, className: a }) {
 		u,
 		e.delay
 	]), /* @__PURE__ */ F("div", {
-		className: n("range-facet--component", "space-y-2", a),
+		className: n("range-facet--component", "space-y-space-md", a),
 		children: /* @__PURE__ */ I("div", {
-			className: "grid grid-cols-2 gap-2",
+			className: "grid grid-cols-2 gap-space-md",
 			children: [/* @__PURE__ */ I("div", {
-				className: "space-y-1",
+				className: "space-y-space-xs",
 				children: [/* @__PURE__ */ F(i, {
 					htmlFor: `${f}-min`,
 					children: o.min
@@ -2124,7 +2124,7 @@ function ct({ filter: e, value: t, onChange: r, className: a }) {
 					className: "w-full"
 				})]
 			}), /* @__PURE__ */ I("div", {
-				className: "space-y-1",
+				className: "space-y-space-xs",
 				children: [/* @__PURE__ */ F(i, {
 					htmlFor: `${f}-max`,
 					children: o.max