baseline-kit 5.1.0 → 5.2.0

package/dist/remix.mjs

@@ -1,7 +1,7 @@
-import { jsx as e } from "remix/ui/jsx-runtime";
-import { clientEntry as t, ref as n } from "remix/ui";
+import { clientEntry as e, ref as t } from "remix/ui";
+import { jsx as n, jsxs as r } from "remix/ui/jsx-runtime";
 //#region packages/core/src/config/defaults.ts
-var r = {
+var i = {
 	base: 8,
 	baseline: {
 		variant: "line",
@@ -42,15 +42,15 @@ var r = {
 		debugging: "hidden",
 		color: "var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6))"
 	}
-}, i = [
+}, a = [
 	"baseline",
 	"guide",
 	"spacer",
 	"box",
 	"padder"
-], a = (e) => {
+], o = (e) => {
 	let { parentConfig: t, base: n } = e, r = {};
-	for (let n of i) {
+	for (let n of a) {
 		let i = e[n], a = t[n], o = {
 			...a,
 			...i
@@ -67,32 +67,32 @@ var r = {
 };
 //#endregion
 //#region packages/core/src/utils/parse.ts
-function o(e) {
+function s(e) {
 	let t = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
 	return t ? {
 		value: parseFloat(t[1]),
 		unit: t[2]
 	} : null;
 }
-function s(e, t) {
+function c(e, t) {
 	return e === void 0 && t !== void 0 ? `${t}px` : e === "auto" || typeof e == "string" && /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(e) ? String(e) : typeof e == "number" ? `${e}px` : e ?? "";
 }
 //#endregion
 //#region packages/core/src/utils/convert.ts
-var c = {
+var l = {
 	parentSize: 0,
 	viewportWidth: 1920,
 	viewportHeight: 1080,
 	rootFontSize: 16,
 	parentFontSize: 16
-}, l = {
+}, u = {
 	px: 1,
 	in: 96,
 	cm: 37.8,
 	mm: 3.78,
 	pt: 1.33,
 	pc: 16
-}, u = {
+}, d = {
 	em: (e) => e.parentFontSize,
 	rem: (e) => e.rootFontSize,
 	vh: (e) => e.viewportHeight / 100,
@@ -101,50 +101,50 @@ var c = {
 	vmax: (e) => Math.max(e.viewportWidth, e.viewportHeight) / 100,
 	"%": (e) => e.parentSize / 100
 };
-function d(e, t) {
+function f(e, t) {
 	if (typeof e == "number") return e;
 	if (typeof e != "string") return null;
-	let n = o(e);
+	let n = s(e);
 	if (!n) return null;
 	let { value: r, unit: i } = n;
-	if (i in l) return r * l[i];
+	if (i in u) return r * u[i];
 	if (i === "auto") return null;
-	let a = u[i];
+	let a = d[i];
 	return a ? r * a({
-		...c,
+		...l,
 		...t
 	}) : null;
 }
 //#endregion
 //#region packages/core/src/utils/math.ts
-function f(e, t, n) {
+function p(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
-function p(e) {
+function m(e) {
 	let { height: t, top: n, bottom: r, base: i } = e, a = (t ?? 0) - (n + r);
 	return Math.max(1, Math.floor(a / i));
 }
 //#endregion
 //#region packages/core/src/utils/normalize.ts
-function m(e, t = {}) {
+function h(e, t = {}) {
 	let { base: n = 8, round: r = !0, clamp: i, context: a } = t;
 	if (e === "auto") return n;
 	let o = null;
-	if (typeof e == "number" ? o = e : typeof e == "string" && (o = d(e, a) ?? n), o === null && (o = n), n <= 0) return o;
+	if (typeof e == "number" ? o = e : typeof e == "string" && (o = f(e, a) ?? n), o === null && (o = n), n <= 0) return o;
 	let s = r ? Math.round(o / n) * n : o;
-	return i === void 0 ? s : f(s, i.min ?? -Infinity, i.max ?? Infinity);
+	return i === void 0 ? s : p(s, i.min ?? -Infinity, i.max ?? Infinity);
 }
-function h(e, t, n) {
-	return !e || e[0] === void 0 && e[1] === void 0 ? t : [e[0] === void 0 ? t[0] : m(e[0], n), e[1] === void 0 ? t[1] : m(e[1], n)];
+function g(e, t, n) {
+	return !e || e[0] === void 0 && e[1] === void 0 ? t : [e[0] === void 0 ? t[0] : h(e[0], n), e[1] === void 0 ? t[1] : h(e[1], n)];
 }
 //#endregion
 //#region packages/core/src/utils/padding.ts
-function g(e) {
-	if ("padding" in e && e.padding != null) return _(e.padding);
-	let t = "block" in e && e.block != null ? v(e.block) : {
+function _(e) {
+	if ("padding" in e && e.padding != null) return v(e.padding);
+	let t = "block" in e && e.block != null ? y(e.block) : {
 		top: 0,
 		bottom: 0
-	}, n = "inline" in e && e.inline != null ? y(e.inline) : {
+	}, n = "inline" in e && e.inline != null ? b(e.inline) : {
 		left: 0,
 		right: 0
 	};
@@ -155,7 +155,7 @@ function g(e) {
 		left: n.left
 	};
 }
-function _(e) {
+function v(e) {
 	if (typeof e == "number") return {
 		top: e,
 		right: e,
@@ -183,7 +183,7 @@ function _(e) {
 		left: 0
 	};
 }
-function v(e) {
+function y(e) {
 	if (typeof e == "number") return {
 		top: e,
 		bottom: e
@@ -203,7 +203,7 @@ function v(e) {
 		bottom: 0
 	};
 }
-function y(e) {
+function b(e) {
 	if (typeof e == "number") return {
 		left: e,
 		right: e
@@ -225,14 +225,17 @@ function y(e) {
 }
 //#endregion
 //#region packages/core/src/utils/snapping.ts
-function b(e, t, n, r) {
-	let i = g({ padding: n });
-	if (r === "none") return i;
-	if (r === "height") {
+function x(e, t, n, r) {
+	let i = _({ padding: n }), a = typeof r == "string" ? r : r.mode, o = typeof r == "string" ? "bottom" : r.snapEdge ?? "bottom";
+	if (a === "none") return i;
+	if (a === "height") {
 		let n = e % t;
-		n !== 0 && (i.bottom += t - n);
+		if (n !== 0) {
+			let e = t - n;
+			o === "top" ? i.top += e : i.bottom += e;
+		}
 	}
-	if (r === "clamp") {
+	if (a === "clamp") {
 		i.top %= t;
 		let n = e % t;
 		n !== 0 && (i.bottom += t - n), i.bottom %= t;
@@ -241,24 +244,24 @@ function b(e, t, n, r) {
 }
 //#endregion
 //#region packages/core/src/utils/merge.ts
-function x(e, t, n) {
+function S(e, t, n) {
 	let r = typeof e == "string" ? e : e.key, i = typeof e == "string" ? t : e.value, a = typeof e == "string" ? n : e.defaultStyles, o = typeof e == "object" ? e.skipDimensions : void 0;
 	return o && (o.fitContent?.includes(r) && i === "fit-content" || o.auto?.includes(r) && i === "auto" || o.fullSize?.includes(r) && (i === "100%" || i === "100vh" || i === "100vw")) || i === a[r] ? {} : { [r]: i };
 }
 //#endregion
 //#region packages/core/src/validation/guide.ts
-var ee = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, S = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || ee.test(e) : !1, te = (e) => Array.isArray(e) && e.length > 0 && e.every(S), C = {
+var ee = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, C = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || ee.test(e) : !1, te = (e) => Array.isArray(e) && e.length > 0 && e.every(C), w = {
 	template: "none",
 	columnsCount: 0,
 	calculatedGap: 0,
 	isValid: !1
 };
 function ne(e, t, n) {
-	let r = t.variant ?? "line", i = t.base ?? 8, a = m(t.gap ?? 0, {
+	let r = t.variant ?? "line", i = t.base ?? 8, a = h(t.gap ?? 0, {
 		base: i,
 		context: n
 	});
-	if (!e) return C;
+	if (!e) return w;
 	switch (r) {
 		case "line": {
 			let t = a === 0 ? 0 : a - 1, n = t + 1, r = t === 0 ? Math.max(1, Math.floor(e) + 1) : Math.max(1, Math.floor((e + 1) / n) + 1);
@@ -270,9 +273,9 @@ function ne(e, t, n) {
 			};
 		}
 		case "pattern": {
-			if (!t.columns || !Array.isArray(t.columns) || !te(t.columns)) return C;
+			if (!t.columns || !Array.isArray(t.columns) || !te(t.columns)) return w;
 			let e = t.columns.map((e) => typeof e == "number" ? `${e}px` : e);
-			return e.some((e) => e === "0" || e === "0px") ? C : {
+			return e.some((e) => e === "0" || e === "0px") ? w : {
 				template: e.join(" "),
 				columnsCount: e.length,
 				calculatedGap: a,
@@ -281,8 +284,8 @@ function ne(e, t, n) {
 		}
 		case "fixed": {
 			let e = typeof t.columns == "number" ? t.columns : 0;
-			return e < 1 ? C : {
-				template: `repeat(${e}, ${t.columnWidth ? s(t.columnWidth) : "1fr"})`,
+			return e < 1 ? w : {
+				template: `repeat(${e}, ${t.columnWidth ? c(t.columnWidth) : "1fr"})`,
 				columnsCount: e,
 				calculatedGap: a,
 				isValid: !0
@@ -296,7 +299,7 @@ function ne(e, t, n) {
 				calculatedGap: a,
 				isValid: !0
 			};
-			let i = typeof r == "number" ? `${r}px` : r.toString(), o = d(i, n) ?? 0, s = o > 0 ? Math.max(1, Math.floor((e + a) / (o + a))) : 1;
+			let i = typeof r == "number" ? `${r}px` : r.toString(), o = f(i, n) ?? 0, s = o > 0 ? Math.max(1, Math.floor((e + a) / (o + a))) : 1;
 			return {
 				template: `repeat(auto-fill, ${i})`,
 				columnsCount: s,
@@ -315,13 +318,13 @@ function ne(e, t, n) {
 		}
 	}
 }
-var w = (e, t, n) => {
+var T = (e, t, n) => {
 	let r = {};
 	return e === void 0 ? (t !== void 0 && (r.gridColumn = `span ${t}`), n !== void 0 && (r.gridRow = `span ${n}`)) : (r.gridColumn = `span ${e}`, r.gridRow = `span ${e}`), r;
 };
 //#endregion
 //#region packages/core/src/descriptors/guide.ts
-function T({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
+function E({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 	switch (e) {
 		case "line": return {
 			variant: "line",
@@ -354,7 +357,7 @@ function T({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 		base: t
 	};
 }
-var E = (e, t) => ({
+var D = (e, t) => ({
 	"--bkgd-w": "100%",
 	"--bkgd-h": "100%",
 	"--bkgd-mw": "none",
@@ -365,45 +368,45 @@ var E = (e, t) => ({
 	"--bkgd-cl": t,
 	"--bkgd-g": "0"
 });
-function D(e) {
-	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: c, maxWidth: l, color: u, template: d, columnsCount: f, calculatedGap: p, isVisible: m } = e, h = E(t, n.line), g = {
+function O(e) {
+	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: s, maxWidth: l, color: u, template: d, columnsCount: f, calculatedGap: p, isVisible: m } = e, h = D(t, n.line), g = {
 		"--bkgd-cl": u ?? n.line,
 		"--bkgd-cp": u ?? n.pattern,
 		"--bkgd-ca": u ?? n.auto,
 		"--bkgd-cf": u ?? n.fixed,
-		"--bkgd-w": s(a ?? "100%"),
-		"--bkgd-h": s(o ?? "100%"),
-		...x({
+		"--bkgd-w": c(a ?? "100%"),
+		"--bkgd-h": c(o ?? "100%"),
+		...S({
 			key: "--bkgd-mw",
-			value: s(l || "none"),
+			value: c(l || "none"),
 			defaultStyles: h
 		}),
-		...x({
+		...S({
 			key: "--bkgd-cw",
-			value: s(c || "60px"),
+			value: c(s || "60px"),
 			defaultStyles: h
 		}),
-		...x({
+		...S({
 			key: "--bkgd-n",
 			value: `${f}`,
 			defaultStyles: h
 		}),
-		...x({
+		...S({
 			key: "--bkgd-b",
 			value: "0",
 			defaultStyles: h
 		}),
-		...x({
+		...S({
 			key: "--bkgd-cl",
 			value: u ?? n.line,
 			defaultStyles: h
 		}),
-		...x({
+		...S({
 			key: "--bkgd-g",
 			value: `${p}px`,
 			defaultStyles: h
 		}),
-		...x({
+		...S({
 			key: "--bkgd-j",
 			value: i || "center",
 			defaultStyles: h
@@ -423,22 +426,22 @@ function D(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/baseline.ts
-function O(e) {
-	let { base: t, colors: n, variant: r, width: i, height: a, color: o, containerWidth: c, containerHeight: l, spacing: u, isVisible: d } = e, { top: f, right: m, bottom: _, left: v } = g(u), y = [
+function k(e) {
+	let { base: t, colors: n, variant: r, width: i, height: a, color: o, containerWidth: s, containerHeight: l, spacing: u, isVisible: d } = e, { top: f, right: p, bottom: h, left: v } = _(u), y = [
 		f,
-		m,
-		_,
+		p,
+		h,
 		v
-	].map((e) => e ? `${e}px` : "0").join(" "), b = y === "0 0 0 0" ? void 0 : y, x = p({
-		height: l > 0 ? l : h([void 0, a], [c, 0])[1],
+	].map((e) => e ? `${e}px` : "0").join(" "), b = y === "0 0 0 0" ? void 0 : y, x = m({
+		height: l > 0 ? l : g([void 0, a], [s, 0])[1],
 		top: f,
-		bottom: _,
+		bottom: h,
 		base: t
 	});
 	return {
 		containerStyle: {
-			...i === void 0 ? {} : { "--bkbl-w": s(i) },
-			...a === void 0 ? {} : { "--bkbl-h": s(a) },
+			...i === void 0 ? {} : { "--bkbl-w": c(i) },
+			...a === void 0 ? {} : { "--bkbl-h": c(a) },
 			"--bkbl-cl": o ?? n.line,
 			"--bkbl-cf": o ?? n.flat,
 			"--bkbl-c": r === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)",
@@ -456,13 +459,13 @@ function O(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/box.ts
-function k(e) {
-	let { lineColor: t, width: n, height: r, span: i, colSpan: a, rowSpan: o, isVisible: c } = e, l = {
-		...n === void 0 ? {} : { "--bkbx-w": s(n) },
-		...r === void 0 ? {} : { "--bkbx-h": s(r) },
+function A(e) {
+	let { lineColor: t, width: n, height: r, span: i, colSpan: a, rowSpan: o, isVisible: s } = e, l = {
+		...n === void 0 ? {} : { "--bkbx-w": c(n) },
+		...r === void 0 ? {} : { "--bkbx-h": c(r) },
 		"--bkbx-cl": t
-	}, u = w(i, a, o), d = ["box"];
-	return c && d.push("v"), {
+	}, u = T(i, a, o), d = ["box"];
+	return s && d.push("v"), {
 		boxStyle: l,
 		gridSpanStyle: u,
 		classTokens: d
@@ -470,19 +473,19 @@ function k(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/spacer.ts
-function A(e) {
-	let { base: t, colors: n, width: r, height: i, color: a, variant: o, isVisible: c } = e, [l, u] = h([r, i], [0, 0], {
+function j(e) {
+	let { base: t, colors: n, width: r, height: i, color: a, variant: o, isVisible: s } = e, [l, u] = g([r, i], [0, 0], {
 		base: t,
 		suppressWarnings: !0
 	}), d = {
-		...i === void 0 ? {} : { "--bksp-h": s(u) },
-		...r === void 0 ? {} : { "--bksp-w": s(l) },
+		...i === void 0 ? {} : { "--bksp-h": c(u) },
+		...r === void 0 ? {} : { "--bksp-w": c(l) },
 		"--bksp-b": `${t}px`,
 		"--bksp-ct": a ?? n.text,
 		"--bksp-cl": a ?? n.line,
 		"--bksp-cf": a ?? n.flat
 	}, f = ["spr"];
-	return c && f.push(o), {
+	return s && f.push(o), {
 		style: d,
 		normWidth: l,
 		normHeight: u,
@@ -491,14 +494,14 @@ function A(e) {
 }
 //#endregion
 //#region packages/core/src/descriptors/padder.ts
-function j(e) {
-	let { base: t, color: n, width: r, height: i, padding: a, enableSpacers: o, isVisible: c } = e, l = {};
-	if (r !== void 0 && r !== "fit-content" && (l["--bkpd-w"] = s(r)), i !== void 0 && i !== "fit-content" && (l["--bkpd-h"] = s(i)), l["--bkpd-b"] = `${t}px`, l["--bkpd-c"] = n, !o) {
+function re(e) {
+	let { base: t, color: n, width: r, height: i, padding: a, enableSpacers: o, isVisible: s } = e, l = {};
+	if (r !== void 0 && r !== "fit-content" && (l["--bkpd-w"] = c(r)), i !== void 0 && i !== "fit-content" && (l["--bkpd-h"] = c(i)), l["--bkpd-b"] = `${t}px`, l["--bkpd-c"] = n, !o) {
 		let { top: e, right: t, bottom: n, left: r } = a;
 		(e > 0 || n > 0) && (l.paddingBlock = `${e}px ${n}px`), (r > 0 || t > 0) && (l.paddingInline = `${r}px ${t}px`);
 	}
 	let u = ["pad"];
-	return c && o && u.push("v"), {
+	return s && o && u.push("v"), {
 		containerStyle: l,
 		classTokens: u
 	};
@@ -507,8 +510,8 @@ function j(e) {
 //#region packages/remix/src/Config.ts
 function M(e) {
 	return () => {
-		let t = a({
-			parentConfig: e.props.__baselineConfig ?? e.context.get(N) ?? r,
+		let t = o({
+			parentConfig: e.props.__baselineConfig ?? e.context.get(N) ?? i,
 			base: e.props.base,
 			baseline: e.props.baseline,
 			guide: e.props.guide,
@@ -531,7 +534,7 @@ var N = M, P = (e) => {
 };
 //#endregion
 //#region packages/dom/src/measure.ts
-function re(e, t) {
+function F(e, t) {
 	let n = {
 		width: 0,
 		height: 0
@@ -555,7 +558,7 @@ function re(e, t) {
 }
 //#endregion
 //#region packages/dom/src/virtual.ts
-function ie(e, t, n) {
+function I(e, t, n) {
 	let { totalItems: r, itemHeight: i, buffer: a = 0 } = t;
 	if (!Number.isFinite(i) || i <= 0) throw Error("createVirtualTracker requires itemHeight to be greater than 0");
 	if (!Number.isFinite(r) || r < 0) throw Error("createVirtualTracker requires totalItems to be 0 or greater");
@@ -582,11 +585,11 @@ function ie(e, t, n) {
 	};
 }
 //#endregion
-//#region packages/remix/src/shared.ts
-function F(...e) {
+//#region packages/remix/src/shared.tsx
+function L(...e) {
 	return e.filter(Boolean).join(" ");
 }
-function I(...e) {
+function R(...e) {
 	let t = {};
 	for (let n of e) if (n) {
 		if (typeof n == "string") {
@@ -597,10 +600,10 @@ function I(...e) {
 	}
 	return t;
 }
-function L(e, t, n) {
+function z(e, t, n) {
 	return e.context.get(t) ?? n;
 }
-function R(e, t) {
+function B(e, t) {
 	let n = e ?? t;
 	return {
 		isShown: n === "visible",
@@ -608,46 +611,46 @@ function R(e, t) {
 		debugging: n
 	};
 }
-var z = 40, B = /* @__PURE__ */ new WeakSet(), V = [], H = !1;
-function U() {
-	H = !1;
-	let e = V.splice(0, z);
+var V = 40, H = /* @__PURE__ */ new WeakSet(), U = [], W = !1;
+function G() {
+	W = !1;
+	let e = U.splice(0, V);
 	for (let t of e) {
 		if (t.signal.aborted) {
-			B.delete(t);
+			H.delete(t);
 			continue;
 		}
 		try {
-			t.update().catch(() => void 0).finally(() => B.delete(t));
+			t.update().catch(() => void 0).finally(() => H.delete(t));
 		} catch {
-			B.delete(t);
+			H.delete(t);
 		}
 	}
-	V.length > 0 && W();
-}
-function W() {
-	H || (H = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(U) : () => setTimeout(U, 0), 0));
+	U.length > 0 && K();
 }
-function G(e) {
-	e.signal.aborted || B.has(e) || (B.add(e), V.push(e), W());
+function K() {
+	W || (W = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(G) : () => setTimeout(G, 0), 0));
 }
-function K(n, i) {
-	let a = t(n, i);
-	return ((t) => () => {
-		let n = t.context.get(N), i = t.props.__baselineConfig ?? n ?? r;
-		return e(a, {
-			...t.props,
-			__baselineConfig: i
+function q(e) {
+	e.signal.aborted || H.has(e) || (H.add(e), U.push(e), K());
+}
+function J(t, r) {
+	let a = e(t, r);
+	return ((e) => () => {
+		let t = e.context.get(N), r = e.props.__baselineConfig ?? t ?? i;
+		return /* @__PURE__ */ n(a, {
+			...e.props,
+			__baselineConfig: r
 		});
 	});
 }
-function q(e) {
-	let t = null, r, i = !1, a = 0, o = (e) => {
+function Y(e) {
+	let n = null, r, i = !1, a = 0, o = (e) => {
 		e.aborted || i || a >= 10 || (a += 1, r?.refresh(), requestAnimationFrame(() => o(e)));
 	};
 	return {
-		attach: n((n, s) => {
-			t = n, typeof ResizeObserver < "u" && (r = re(n, (t) => {
+		attach: t((t, s) => {
+			n = t, typeof ResizeObserver < "u" && (r = F(t, (t) => {
 				i = t.width > 0 || t.height > 0;
 				let n = () => {
 					s.aborted || e(t);
@@ -656,13 +659,13 @@ function q(e) {
 			}), queueMicrotask(() => {
 				s.aborted || (r?.refresh(), requestAnimationFrame(() => o(s)));
 			})), s.addEventListener("abort", () => {
-				r?.disconnect(), r = void 0, i = !1, a = 0, t = null;
+				r?.disconnect(), r = void 0, i = !1, a = 0, n = null;
 			}, { once: !0 });
 		}),
-		getElement: () => t
+		getElement: () => n
 	};
 }
-function J(e, t, n, r = 160) {
+function ie(e, t, n, r = 160) {
 	let i, a = "", o = 0, s = {
 		start: 0,
 		end: 0
@@ -677,7 +680,7 @@ function J(e, t, n, r = 160) {
 			d !== a && (c(), a = d, o = e, s = {
 				start: 0,
 				end: e
-			}, n(s), i = ie(u, {
+			}, n(s), i = I(u, {
 				totalItems: e,
 				itemHeight: l,
 				buffer: r
@@ -695,185 +698,181 @@ function J(e, t, n, r = 160) {
 	};
 }
 //#endregion
-//#region packages/remix/src/Baseline.ts
-function ae(t) {
-	let n = {
+//#region packages/remix/src/Baseline.tsx
+function ae(e) {
+	let t = {
 		width: 0,
 		height: 0
-	}, i = () => {
-		G(t);
-	}, a = q((e) => {
-		(e.width !== n.width || e.height !== n.height) && (n = e, i());
-	}), o = J(t, a.getElement, i);
+	}, r = () => {
+		q(e);
+	}, a = Y((e) => {
+		(e.width !== t.width || e.height !== t.height) && (t = e, r());
+	}), o = ie(e, a.getElement, r);
 	return () => {
-		let i = t.props, c = i.__baselineConfig ?? L(t, N, r), l = i.base ?? c.base, u = i.variant ?? c.baseline.variant, d = R(i.debugging, c.baseline.debugging), f = O({
+		let r = e.props, s = r.__baselineConfig ?? z(e, N, i), l = r.base ?? s.base, u = r.variant ?? s.baseline.variant, d = B(r.debugging, s.baseline.debugging), f = k({
 			base: l,
-			colors: c.baseline.colors,
+			colors: s.baseline.colors,
 			variant: u,
-			width: i.width,
-			height: i.height,
-			color: i.color,
-			containerWidth: n.width,
-			containerHeight: n.height,
+			width: r.width,
+			height: r.height,
+			color: r.color,
+			containerWidth: t.width,
+			containerHeight: t.height,
 			spacing: {
-				padding: i.padding,
-				block: i.block,
-				inline: i.inline
+				padding: r.padding,
+				block: r.block,
+				inline: r.inline
 			},
 			isVisible: d.isShown
 		});
-		if (i.ssrMode) return e("div", {
-			className: F("bk-bas", "bk-h", "bk-ssr", i.className),
+		if (r.ssrMode) return /* @__PURE__ */ n("div", {
+			className: L("bk-bas", "bk-h", "bk-ssr", r.className),
 			"data-testid": "baseline",
 			"aria-hidden": !0,
-			style: I(f.containerStyle, {
-				width: s(i.width ?? "100%"),
-				height: s(i.height ?? "100%")
-			}, i.style)
+			style: R(f.containerStyle, {
+				width: c(r.width ?? "100%"),
+				height: c(r.height ?? "100%")
+			}, r.style)
 		});
-		d.isShown && t.queueTask(() => o.setConfig(f.rowCount, l));
-		let p = o.getRange(f.rowCount), m = d.isShown ? Array.from({ length: Math.max(0, p.end - p.start) }, (t, n) => {
-			let r = p.start + n;
-			return e("div", {
+		d.isShown && e.queueTask(() => o.setConfig(f.rowCount, l));
+		let p = o.getRange(f.rowCount), m = d.isShown ? Array.from({ length: Math.max(0, p.end - p.start) }, (e, t) => {
+			let r = p.start + t;
+			return /* @__PURE__ */ n("div", {
 				className: "bk-row",
-				key: r,
 				"data-row-index": r,
 				style: f.getRowStyle(r)
-			});
+			}, r);
 		}) : [];
-		return e("div", {
-			className: F(...f.classTokens.map((e) => `bk-${e}`), i.className),
+		return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), r.className),
 			"data-testid": "baseline",
 			"aria-hidden": !0,
-			style: I(f.containerStyle, {
-				width: s(i.width ?? "100%"),
-				height: s(i.height ?? "100%")
-			}, i.style),
-			mix: typeof window > "u" || i.ssrMode ? void 0 : a.attach,
+			style: R(f.containerStyle, {
+				width: c(r.width ?? "100%"),
+				height: c(r.height ?? "100%")
+			}, r.style),
+			mix: typeof window > "u" || r.ssrMode ? void 0 : a.attach,
 			children: m
 		});
 	};
 }
-var oe = K(`${import.meta.url}#Baseline`, ae);
+var oe = J(`${import.meta.url}#Baseline`, ae);
 //#endregion
-//#region packages/remix/src/Guide.ts
-function se(t) {
-	let n = {
+//#region packages/remix/src/Guide.tsx
+function se(e) {
+	let t = {
 		width: 0,
 		height: 0
-	}, i = () => {
-		G(t);
-	}, a = q((e) => {
-		(e.width !== n.width || e.height !== n.height) && (n = e, i());
+	}, a = () => {
+		q(e);
+	}, o = Y((e) => {
+		(e.width !== t.width || e.height !== t.height) && (t = e, a());
 	});
 	return () => {
-		let i = t.props, o = i.__baselineConfig ?? L(t, N, r), s = i.variant ?? o.guide.variant, c = R(i.debugging, o.guide.debugging), l = T({
-			variant: s,
-			base: o.base,
-			gap: i.gap ?? 0,
-			columns: i.columns,
-			columnWidth: i.columnWidth
-		}), u = ne(n.width, l, {
+		let a = e.props, s = a.__baselineConfig ?? z(e, N, i), c = a.variant ?? s.guide.variant, l = B(a.debugging, s.guide.debugging), u = E({
+			variant: c,
+			base: s.base,
+			gap: a.gap ?? 0,
+			columns: a.columns,
+			columnWidth: a.columnWidth
+		}), d = ne(t.width, u, {
 			viewportWidth: typeof window > "u" ? void 0 : window.innerWidth,
 			viewportHeight: typeof window > "u" ? void 0 : window.innerHeight
-		}), d = D({
-			base: o.base,
-			colors: o.guide.colors,
-			variant: s,
-			align: i.align ?? "center",
-			width: i.width,
-			height: i.height,
-			columnWidth: i.columnWidth,
-			maxWidth: i.maxWidth,
-			color: i.color,
-			template: u.template,
-			columnsCount: u.columnsCount,
-			calculatedGap: u.calculatedGap,
-			isVisible: c.isShown
+		}), f = O({
+			base: s.base,
+			colors: s.guide.colors,
+			variant: c,
+			align: a.align ?? "center",
+			width: a.width,
+			height: a.height,
+			columnWidth: a.columnWidth,
+			maxWidth: a.maxWidth,
+			color: a.color,
+			template: d.template,
+			columnsCount: d.columnsCount,
+			calculatedGap: d.calculatedGap,
+			isVisible: l.isShown
 		});
-		if (i.ssrMode) return e("div", {
-			className: F("bk-gde", "bk-h", "bk-ssr", i.className),
+		if (a.ssrMode) return /* @__PURE__ */ n("div", {
+			className: L("bk-gde", "bk-h", "bk-ssr", a.className),
 			"data-testid": "guide",
-			"data-variant": s,
+			"data-variant": c,
 			"aria-hidden": !0,
-			style: I({
-				width: i.width ?? "100%",
-				height: i.height ?? "100%",
-				maxWidth: i.maxWidth ?? "none"
-			}, i.style),
-			children: i.children
+			style: R({
+				width: a.width ?? "100%",
+				height: a.height ?? "100%",
+				maxWidth: a.maxWidth ?? "none"
+			}, a.style),
+			children: a.children
 		});
-		let f = !d.isLineVariant && c.isShown ? Array.from({ length: d.columnsCount }, (t, n) => e("div", {
-			key: n,
+		let p = !f.isLineVariant && l.isShown ? Array.from({ length: f.columnsCount }, (e, t) => /* @__PURE__ */ n("div", {
 			className: "bk-col",
-			"data-column-index": n,
-			"data-variant": s
-		})) : null, p = c.isShown ? e("div", {
+			"data-column-index": t,
+			"data-variant": c
+		}, t)) : null, m = l.isShown ? /* @__PURE__ */ n("div", {
 			className: "bk-cols",
-			"data-variant": s,
-			children: f
+			"data-variant": c,
+			children: p
 		}) : null;
-		return e("div", {
-			className: F(...d.classTokens.map((e) => `bk-${e}`), i.className),
+		return /* @__PURE__ */ r("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), a.className),
 			"data-testid": "guide",
-			"data-variant": s,
+			"data-variant": c,
 			"aria-hidden": !0,
-			style: I(d.containerStyle, i.style),
-			mix: typeof window > "u" || i.ssrMode ? void 0 : a.attach,
-			children: [p, i.children]
+			style: R(f.containerStyle, a.style),
+			mix: typeof window > "u" || a.ssrMode ? void 0 : o.attach,
+			children: [m, a.children]
 		});
 	};
 }
-var ce = K(`${import.meta.url}#Guide`, se);
+var ce = J(`${import.meta.url}#Guide`, se);
 //#endregion
-//#region packages/remix/src/Spacer.ts
-function le(t) {
+//#region packages/remix/src/Spacer.tsx
+function le(e) {
 	return () => {
-		let n = t.props, i = n.__baselineConfig ?? L(t, N, r), a = n.base ?? i.base, o = n.variant ?? i.spacer.variant, s = R(n.debugging, i.spacer.debugging), c = A({
-			base: a,
-			colors: i.spacer.colors,
-			width: n.width,
-			height: n.height,
-			color: n.color,
-			variant: o,
-			isVisible: s.isShown
-		}), l = s.isShown && n.indicatorNode ? [c.normHeight === 0 ? null : e("span", {
-			key: "height",
+		let t = e.props, a = t.__baselineConfig ?? z(e, N, i), o = t.base ?? a.base, s = t.variant ?? a.spacer.variant, c = B(t.debugging, a.spacer.debugging), l = j({
+			base: o,
+			colors: a.spacer.colors,
+			width: t.width,
+			height: t.height,
+			color: t.color,
+			variant: s,
+			isVisible: c.isShown
+		}), u = c.isShown && t.indicatorNode ? [l.normHeight === 0 ? null : /* @__PURE__ */ n("span", {
 			className: "bk-indicator",
 			"aria-hidden": !0,
-			children: n.indicatorNode(c.normHeight, "height")
-		}), c.normWidth === 0 ? null : e("span", {
-			key: "width",
+			children: t.indicatorNode(l.normHeight, "height")
+		}, "height"), l.normWidth === 0 ? null : /* @__PURE__ */ n("span", {
 			className: "bk-indicator",
 			"aria-hidden": !0,
-			children: n.indicatorNode(c.normWidth, "width")
-		})] : null;
-		return e("div", {
-			className: F(...c.classTokens.map((e) => `bk-${e}`), n.className),
+			children: t.indicatorNode(l.normWidth, "width")
+		}, "width")] : null;
+		return /* @__PURE__ */ r("div", {
+			className: L(...l.classTokens.map((e) => `bk-${e}`), t.className),
 			"data-testid": "spacer",
-			"data-variant": o,
-			"data-height": `${c.normHeight}px`,
-			style: I(c.style, n.style),
-			children: [l, n.children]
+			"data-variant": s,
+			"data-height": `${l.normHeight}px`,
+			style: R(l.style, t.style),
+			children: [u, t.children]
 		});
 	};
 }
-var Y = K(`${import.meta.url}#Spacer`, le), X = { gridColumn: "1 / -1" }, Z = { gridRow: "2 / 3" }, ue = {
+var X = J(`${import.meta.url}#Spacer`, le), ue = X, Z = { gridColumn: "1 / -1" }, Q = { gridRow: "2 / 3" }, de = {
 	gridRow: "2 / 3",
 	gridColumn: "2 / 3"
 };
-function Q(t) {
-	let n = r.base, i = g({}), a = null, o = q(({ height: e }) => {
-		t.props.ssrMode || a || e === 0 || (a = b(e, n, i, "height"), G(t));
+function fe(e) {
+	let t = i.base, r = _({}), a = null, o = Y(({ height: n }) => {
+		e.props.ssrMode || a || n === 0 || (a = x(n, t, r, "height"), q(e));
 	});
 	return () => {
-		let s = t.props, c = s.__baselineConfig ?? L(t, N, r), l = R(s.debugging, c.padder.debugging);
-		n = c.base, i = g({
+		let s = e.props, c = s.__baselineConfig ?? z(e, N, i), l = B(s.debugging, c.padder.debugging);
+		t = c.base, r = _({
 			padding: s.padding,
 			block: s.block,
 			inline: s.inline
 		});
-		let u = s.ssrMode ? i : a ?? i, d = typeof window > "u" || s.ssrMode ? void 0 : o.attach, f = j({
+		let u = s.ssrMode ? r : a ?? r, d = typeof window > "u" || s.ssrMode ? void 0 : o.attach, f = re({
 			base: c.base,
 			color: c.padder.color,
 			width: s.width,
@@ -882,108 +881,104 @@ function Q(t) {
 			enableSpacers: !l.isNone,
 			isVisible: l.isShown
 		});
-		if (l.isNone) return e("div", {
-			className: F(...f.classTokens.map((e) => `bk-${e}`), s.className),
+		if (l.isNone) return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
 			"data-testid": "padder",
 			mix: d,
-			style: I(f.containerStyle, s.style),
+			style: R(f.containerStyle, s.style),
 			children: s.children
 		});
-		let p = c.spacer.variant, m = (t, n) => e(Y, {
+		let p = c.spacer.variant, m = (e, t) => /* @__PURE__ */ n(ue, {
 			__baselineConfig: c,
-			width: t === "100%" ? void 0 : t,
-			height: n === "100%" ? void 0 : n,
+			width: e === "100%" ? void 0 : e,
+			height: t === "100%" ? void 0 : t,
 			variant: p,
 			debugging: l.debugging,
 			indicatorNode: s.indicatorNode
 		}), h = [
-			u.top >= 0 ? e("div", {
-				key: "top",
-				style: X,
-				children: m("100%", u.top)
-			}) : null,
-			u.left >= 0 ? e("div", {
-				key: "left",
+			u.top >= 0 ? /* @__PURE__ */ n("div", {
 				style: Z,
+				children: m("100%", u.top)
+			}, "top") : null,
+			u.left >= 0 ? /* @__PURE__ */ n("div", {
+				style: Q,
 				children: m(u.left, "100%")
-			}) : null,
-			e("div", {
-				key: "content",
+			}, "left") : null,
+			/* @__PURE__ */ n("div", {
 				className: "bk-pad-content",
 				"data-testid": "padder-content",
-				style: ue,
+				style: de,
 				children: s.children
-			}),
-			u.right >= 0 ? e("div", {
-				key: "right",
-				style: Z,
+			}, "content"),
+			u.right >= 0 ? /* @__PURE__ */ n("div", {
+				style: Q,
 				children: m(u.right, "100%")
-			}) : null,
-			u.bottom >= 0 ? e("div", {
-				key: "bottom",
-				style: X,
+			}, "right") : null,
+			u.bottom >= 0 ? /* @__PURE__ */ n("div", {
+				style: Z,
 				children: m("100%", u.bottom)
-			}) : null
+			}, "bottom") : null
 		];
-		return e("div", {
-			className: F(...f.classTokens.map((e) => `bk-${e}`), s.className),
+		return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
 			"data-testid": "padder",
 			mix: d,
-			style: I(f.containerStyle, s.style),
+			style: R(f.containerStyle, s.style),
 			children: h
 		});
 	};
 }
-var $ = K(`${import.meta.url}#Padder`, Q);
-//#endregion
-//#region packages/remix/src/Box.ts
-function de(t) {
-	let n = r.base, i = "clamp", a = g({}), o = null, s = () => {
-		G(t);
-	}, c = q((e) => {
-		i === "none" || o || e.height === 0 || (o = b(e.height, n, a, i), s());
+var $ = J(`${import.meta.url}#Padder`, fe), pe = N;
+function me(e) {
+	let t = i.base, r = "clamp", a = "bottom", o = _({}), s = null, c = () => {
+		q(e);
+	}, l = Y((e) => {
+		r === "none" || s || e.height === 0 || (s = x(e.height, t, o, {
+			mode: r,
+			snapEdge: a
+		}), c());
 	});
 	return () => {
-		let s = t.props, l = s.__baselineConfig ?? L(t, N, r), u = s.snapping ?? "clamp", d = R(s.debugging, l.box.debugging), f = g({
-			padding: s.padding,
-			block: s.block,
-			inline: s.inline
+		let c = e.props, u = c.__baselineConfig ?? z(e, N, i), d = c.snapping ?? "clamp", f = c.snapEdge ?? "bottom", p = B(c.debugging, u.box.debugging), m = _({
+			padding: c.padding,
+			block: c.block,
+			inline: c.inline
 		});
-		n = l.base, i = u, a = f;
-		let p = u === "none" ? f : o ?? f, m = k({
-			base: l.base,
-			lineColor: l.box.colors.line,
-			width: s.width,
-			height: s.height,
-			span: s.span,
-			colSpan: s.colSpan,
-			rowSpan: s.rowSpan,
-			isVisible: d.isShown
-		}), h = e($, {
-			block: [p.top, p.bottom],
-			inline: [p.left, p.right],
+		t = u.base, r = d, a = f, o = m;
+		let h = d === "none" ? m : s ?? m, g = A({
+			base: u.base,
+			lineColor: u.box.colors.line,
+			width: c.width,
+			height: c.height,
+			span: c.span,
+			colSpan: c.colSpan,
+			rowSpan: c.rowSpan,
+			isVisible: p.isShown
+		}), v = /* @__PURE__ */ n($, {
+			block: [h.top, h.bottom],
+			inline: [h.left, h.right],
 			width: "fit-content",
-			height: s.height,
-			debugging: d.debugging,
+			height: c.height,
+			debugging: p.debugging,
 			ssrMode: !0,
-			children: s.children
+			children: c.children
 		});
-		return e("div", {
-			className: F(...m.classTokens.map((e) => `bk-${e}`), s.className),
+		return /* @__PURE__ */ n("div", {
+			className: L(...g.classTokens.map((e) => `bk-${e}`), c.className),
 			"data-testid": "box",
-			style: I(m.boxStyle, m.gridSpanStyle, s.style),
-			mix: typeof window > "u" || s.ssrMode || u === "none" ? void 0 : c.attach,
-			children: e(N, {
-				__baselineConfig: l,
+			style: R(g.boxStyle, g.gridSpanStyle, c.style),
+			mix: typeof window > "u" || c.ssrMode || d === "none" ? void 0 : l.attach,
+			children: /* @__PURE__ */ n(pe, {
+				__baselineConfig: u,
 				base: 1,
 				spacer: { variant: "flat" },
-				children: h
+				children: v
 			})
 		});
 	};
 }
-var fe = K(`${import.meta.url}#Box`, de);
+var he = J(`${import.meta.url}#Box`, me);
 //#endregion
-export { oe as Baseline, fe as Box, N as Config, ce as Guide, $ as Padder, Y as Spacer };
+export { oe as Baseline, he as Box, N as Config, ce as Guide, $ as Padder, X as Spacer };
 
 //# sourceMappingURL=remix.mjs.map