baseline-kit 5.1.0 → 6.0.0

package/dist/remix.mjs

@@ -1,8 +1,9 @@
-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,
+	domDiagnostics: !1,
 	baseline: {
 		variant: "line",
 		debugging: "hidden",
@@ -42,57 +43,58 @@ 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) => {
-	let { parentConfig: t, base: n } = e, r = {};
-	for (let n of i) {
-		let i = e[n], a = t[n], o = {
+], o = (e) => {
+	let { parentConfig: t, base: n, domDiagnostics: r } = e, i = {};
+	for (let n of a) {
+		let r = e[n], a = t[n], o = {
 			...a,
-			...i
+			...r
 		};
-		i && "colors" in i && i.colors && "colors" in a && (o.colors = {
+		r && "colors" in r && r.colors && "colors" in a && (o.colors = {
 			...a.colors,
-			...i.colors
-		}), r[n] = o;
+			...r.colors
+		}), i[n] = o;
 	}
 	return {
 		base: n ?? t.base,
-		...r
+		domDiagnostics: r ?? t.domDiagnostics ?? !1,
+		...i
 	};
 };
 //#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 +103,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 +157,7 @@ function g(e) {
 		left: n.left
 	};
 }
-function _(e) {
+function v(e) {
 	if (typeof e == "number") return {
 		top: e,
 		right: e,
@@ -183,7 +185,7 @@ function _(e) {
 		left: 0
 	};
 }
-function v(e) {
+function y(e) {
 	if (typeof e == "number") return {
 		top: e,
 		bottom: e
@@ -203,7 +205,7 @@ function v(e) {
 		bottom: 0
 	};
 }
-function y(e) {
+function b(e) {
 	if (typeof e == "number") return {
 		left: e,
 		right: e
@@ -225,14 +227,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 +246,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 C = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, ee = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || C.test(e) : !1, te = (e) => Array.isArray(e) && e.length > 0 && e.every(ee), 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, {
+function T(e, t, n) {
+	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 +275,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 +286,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 +301,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 +320,23 @@ function ne(e, t, n) {
 		}
 	}
 }
-var w = (e, t, n) => {
+var E = (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 D(e) {
+	let t = /* @__PURE__ */ new Set([
+		"--bkgd-cl",
+		"--bkgd-cp",
+		"--bkgd-ca",
+		"--bkgd-cf",
+		"--bkgd-line-color"
+	]), n = e.style && Object.keys(e.style).some((e) => !t.has(e));
+	return !e.domDiagnostics && !e.className && !n && e.variant === "fixed" && e.columns === 4 && (e.columnWidth === void 0 || e.columnWidth === 60 || e.columnWidth === "60px") && e.gap === 0 && (e.align || "center") === "center";
+}
+function O({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 	switch (e) {
 		case "line": return {
 			variant: "line",
@@ -354,7 +369,7 @@ function T({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 		base: t
 	};
 }
-var E = (e, t) => ({
+var k = (e, t) => ({
 	"--bkgd-w": "100%",
 	"--bkgd-h": "100%",
 	"--bkgd-mw": "none",
@@ -365,45 +380,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 A(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 = k(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,28 +438,32 @@ 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 j(e) {
+	return e.domDiagnostics || e.base <= 1 || !Number.isInteger(e.base) || e.className || e.contentHeight >= e.base && Math.abs(e.contentHeight - Math.floor(e.contentHeight / e.base) * e.base) > .001 ? !1 : !Object.keys(e.style ?? {}).some((e) => e.startsWith("background") || e === "--bkbl-b");
+}
+function ne(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 = l > 0 ? l : g([void 0, a], [s, 0])[1], S = x - f - h, C = m({
+		height: x,
 		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)",
 			...b ? { padding: b } : {}
 		},
-		rowCount: x,
+		rowCount: C,
+		contentHeight: S,
 		getRowStyle: (e) => ({
 			"--bkbl-rt": e === 0 ? "0px" : `${e * t}px`,
 			"--bkbl-rh": r === "line" ? "1px" : `${t}px`
@@ -456,13 +475,33 @@ 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) },
+var re = /* @__PURE__ */ new Set([
+	"background",
+	"backgroundColor",
+	"boxShadow",
+	"color",
+	"cursor",
+	"opacity",
+	"outline",
+	"outlineColor",
+	"outlineOffset",
+	"outlineStyle",
+	"outlineWidth",
+	"pointerEvents",
+	"textDecoration",
+	"textShadow",
+	"visibility"
+]);
+function ie(e) {
+	return e.className || e.width !== void 0 && e.width !== "fit-content" ? !0 : e.style ? Object.keys(e.style).some((e) => !re.has(e)) : !1;
+}
+function ae(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 = E(i, a, o), d = ["box"];
+	return s && d.push("v"), {
 		boxStyle: l,
 		gridSpanStyle: u,
 		classTokens: d
@@ -470,19 +509,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 oe(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,25 +530,26 @@ 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 se(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
 	};
 }
 //#endregion
 //#region packages/remix/src/Config.ts
-function M(e) {
+function ce(e) {
 	return () => {
-		let t = a({
-			parentConfig: e.props.__baselineConfig ?? e.context.get(N) ?? r,
+		let t = o({
+			parentConfig: e.props.__baselineConfig ?? e.context.get(M) ?? i,
 			base: e.props.base,
+			domDiagnostics: e.props.domDiagnostics,
 			baseline: e.props.baseline,
 			guide: e.props.guide,
 			spacer: e.props.spacer,
@@ -519,7 +559,7 @@ function M(e) {
 		return e.context.set(t), e.props.children ?? null;
 	};
 }
-var N = M, P = (e) => {
+var M = ce, N = (e) => {
 	let t = null, n = null;
 	return [(...r) => {
 		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
@@ -531,7 +571,7 @@ var N = M, P = (e) => {
 };
 //#endregion
 //#region packages/dom/src/measure.ts
-function re(e, t) {
+function le(e, t) {
 	let n = {
 		width: 0,
 		height: 0
@@ -543,7 +583,7 @@ function re(e, t) {
 			};
 			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
 		} catch {}
-	}, [i, a] = P(r);
+	}, [i, a] = N(r);
 	r();
 	let o = new ResizeObserver(i);
 	return o.observe(e), {
@@ -555,7 +595,7 @@ function re(e, t) {
 }
 //#endregion
 //#region packages/dom/src/virtual.ts
-function ie(e, t, n) {
+function ue(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");
@@ -568,7 +608,7 @@ function ie(e, t, n) {
 	}, s = {
 		start: 0,
 		end: r
-	}, [c, l] = P(() => {
+	}, [c, l] = N(() => {
 		let e = o();
 		(e.start !== s.start || e.end !== s.end) && (s = e, n(e));
 	}), u = { passive: !0 };
@@ -582,11 +622,26 @@ function ie(e, t, n) {
 	};
 }
 //#endregion
-//#region packages/remix/src/shared.ts
-function F(...e) {
+//#region packages/remix/src/shared.tsx
+function P(e, t) {
+	return Object.fromEntries(Object.entries(e).filter(([e, n]) => t[e] !== n));
+}
+var F = /* @__PURE__ */ new Set([
+	"id",
+	"title",
+	"role",
+	"tabIndex",
+	"lang",
+	"dir",
+	"hidden"
+]);
+function I(e) {
+	return Object.fromEntries(Object.entries(e).filter(([e]) => e.startsWith("data-") || e.startsWith("aria-") || F.has(e)));
+}
+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 +652,16 @@ 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) {
+	return typeof e.domDiagnostics == "boolean" ? e : {
+		...e,
+		domDiagnostics: !1
+	};
+}
+function V(e, t) {
 	let n = e ?? t;
 	return {
 		isShown: n === "visible",
@@ -608,46 +669,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 H = 40, U = /* @__PURE__ */ new WeakSet(), W = [], G = !1;
+function K() {
+	G = !1;
+	let e = W.splice(0, H);
 	for (let t of e) {
 		if (t.signal.aborted) {
-			B.delete(t);
+			U.delete(t);
 			continue;
 		}
 		try {
-			t.update().catch(() => void 0).finally(() => B.delete(t));
+			t.update().catch(() => void 0).finally(() => U.delete(t));
 		} catch {
-			B.delete(t);
+			U.delete(t);
 		}
 	}
-	V.length > 0 && W();
+	W.length > 0 && q();
 }
-function W() {
-	H || (H = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(U) : () => setTimeout(U, 0), 0));
+function q() {
+	G || (G = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(K) : () => setTimeout(K, 0), 0));
 }
-function G(e) {
-	e.signal.aborted || B.has(e) || (B.add(e), V.push(e), W());
+function J(e) {
+	e.signal.aborted || U.has(e) || (U.add(e), W.push(e), q());
 }
-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 Y(t, r) {
+	let a = e(t, r);
+	return ((e) => () => {
+		let t = e.context.get(M), 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 X(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 = le(t, (t) => {
 				i = t.width > 0 || t.height > 0;
 				let n = () => {
 					s.aborted || e(t);
@@ -656,13 +717,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 de(e, t, n, r = 160) {
 	let i, a = "", o = 0, s = {
 		start: 0,
 		end: 0
@@ -677,7 +738,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 = ue(u, {
 				totalItems: e,
 				itemHeight: l,
 				buffer: r
@@ -695,185 +756,246 @@ 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 fe(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 = () => {
+		J(e);
+	}, a = X((e) => {
+		(e.width !== t.width || e.height !== t.height) && (t = e, r());
+	}), o = de(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 = B(r.__baselineConfig ?? z(e, M, i)), l = r.base ?? s.base, u = r.variant ?? s.baseline.variant, d = V(r.debugging, s.baseline.debugging), f = ne({
 			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
+		}), p = j({
+			base: l,
+			contentHeight: f.contentHeight,
+			domDiagnostics: s.domDiagnostics,
+			className: r.className,
+			style: r.style
 		});
-		if (i.ssrMode) return e("div", {
-			className: F("bk-bas", "bk-h", "bk-ssr", i.className),
-			"data-testid": "baseline",
+		if (r.ssrMode) return /* @__PURE__ */ n("div", {
+			className: L("bk-bas", "bk-h", "bk-ssr", `bk-${u}`, r.className),
+			"data-testid": s.domDiagnostics ? "baseline" : void 0,
 			"aria-hidden": !0,
-			style: I(f.containerStyle, {
-				width: s(i.width ?? "100%"),
-				height: s(i.height ?? "100%")
-			}, i.style)
+			style: R(P(f.containerStyle, {
+				"--bkbl-w": "100%",
+				"--bkbl-h": "100%",
+				"--bkbl-cl": i.baseline.colors.line,
+				"--bkbl-cf": i.baseline.colors.flat,
+				"--bkbl-c": u === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)"
+			}), P({
+				width: c(r.width ?? "100%"),
+				height: c(r.height ?? "100%")
+			}, {
+				width: "100%",
+				height: "100%"
+			}), r.style),
+			...I(r)
 		});
-		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 m = o.getRange(f.rowCount), h = d.isShown && !p ? Array.from({ length: Math.max(0, m.end - m.start) }, (e, t) => {
+			let r = m.start + t;
+			return /* @__PURE__ */ n("div", {
 				className: "bk-row",
-				key: r,
-				"data-row-index": r,
+				"data-row-index": s.domDiagnostics ? r : void 0,
 				style: f.getRowStyle(r)
-			});
+			}, r);
 		}) : [];
-		return e("div", {
-			className: F(...f.classTokens.map((e) => `bk-${e}`), i.className),
-			"data-testid": "baseline",
+		return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), `bk-${u}`, p && "bk-compact", r.className),
+			"data-testid": s.domDiagnostics ? "baseline" : void 0,
 			"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,
-			children: m
+			style: R(P({
+				...f.containerStyle,
+				...p ? { "--bkbl-b": `${l}px` } : {}
+			}, {
+				"--bkbl-w": "100%",
+				"--bkbl-h": "100%",
+				"--bkbl-b": "8px",
+				"--bkbl-cl": i.baseline.colors.line,
+				"--bkbl-cf": i.baseline.colors.flat,
+				"--bkbl-c": u === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)"
+			}), P({
+				width: c(r.width ?? "100%"),
+				height: c(r.height ?? "100%")
+			}, {
+				width: "100%",
+				height: "100%"
+			}), r.style),
+			...I(r),
+			mix: typeof window > "u" || r.ssrMode ? void 0 : a.attach,
+			children: h
 		});
 	};
 }
-var oe = K(`${import.meta.url}#Baseline`, ae);
+var pe = Y(`${import.meta.url}#Baseline`, fe);
 //#endregion
-//#region packages/remix/src/Guide.ts
-function se(t) {
-	let n = {
+//#region packages/remix/src/Guide.tsx
+function me(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 = () => {
+		J(e);
+	}, o = X((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 = B(a.__baselineConfig ?? z(e, M, i)), l = a.variant ?? s.guide.variant, u = V(a.debugging, s.guide.debugging), d = O({
+			variant: l,
+			base: s.base,
+			gap: a.gap ?? 0,
+			columns: a.columns,
+			columnWidth: a.columnWidth
+		}), f = T(t.width, d, {
 			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
+		}), p = A({
+			base: s.base,
+			colors: s.guide.colors,
+			variant: l,
+			align: a.align ?? "center",
+			width: a.width,
+			height: a.height,
+			columnWidth: a.columnWidth,
+			maxWidth: a.maxWidth,
+			color: a.color,
+			template: f.template,
+			columnsCount: f.columnsCount,
+			calculatedGap: f.calculatedGap,
+			isVisible: u.isShown
+		}), m = D({
+			variant: l,
+			columns: a.columns,
+			columnWidth: a.columnWidth,
+			gap: a.gap ?? 0,
+			align: a.align ?? "center",
+			domDiagnostics: s.domDiagnostics,
+			className: a.className,
+			style: a.style && typeof a.style == "object" ? a.style : void 0
 		});
-		if (i.ssrMode) return e("div", {
-			className: F("bk-gde", "bk-h", "bk-ssr", i.className),
-			"data-testid": "guide",
-			"data-variant": s,
+		if (a.ssrMode) return /* @__PURE__ */ n("div", {
+			className: L("bk-gde", "bk-h", "bk-ssr", `bk-${l}`, a.className),
+			"data-testid": s.domDiagnostics ? "guide" : void 0,
+			"data-variant": s.domDiagnostics ? l : void 0,
 			"aria-hidden": !0,
-			style: I({
-				width: i.width ?? "100%",
-				height: i.height ?? "100%",
-				maxWidth: i.maxWidth ?? "none"
-			}, i.style),
-			children: i.children
+			style: R(P({
+				width: c(a.width ?? "100%"),
+				height: c(a.height ?? "100%"),
+				maxWidth: c(a.maxWidth ?? "none")
+			}, {
+				width: "100%",
+				height: "100%",
+				maxWidth: "none"
+			}), a.style),
+			...I(a),
+			children: a.children
 		});
-		let f = !d.isLineVariant && c.isShown ? Array.from({ length: d.columnsCount }, (t, n) => e("div", {
-			key: n,
-			className: "bk-col",
-			"data-column-index": n,
-			"data-variant": s
-		})) : null, p = c.isShown ? e("div", {
-			className: "bk-cols",
-			"data-variant": s,
-			children: f
+		let h = !p.isLineVariant && u.isShown && !m ? Array.from({ length: p.columnsCount }, (e, t) => /* @__PURE__ */ n("div", {
+			className: L("bk-col", `bk-${l}`),
+			"data-column-index": s.domDiagnostics ? t : void 0,
+			"data-variant": s.domDiagnostics ? l : void 0
+		}, t)) : null, g = u.isShown ? /* @__PURE__ */ n("div", {
+			className: L("bk-cols", `bk-${l}`, m && "bk-cols-compact-fixed"),
+			"data-variant": s.domDiagnostics ? l : void 0,
+			children: h
 		}) : null;
-		return e("div", {
-			className: F(...d.classTokens.map((e) => `bk-${e}`), i.className),
-			"data-testid": "guide",
-			"data-variant": s,
+		return /* @__PURE__ */ r("div", {
+			className: L(...p.classTokens.map((e) => `bk-${e}`), !p.classTokens.includes(l) && `bk-${l}`, a.className),
+			"data-testid": s.domDiagnostics ? "guide" : void 0,
+			"data-variant": s.domDiagnostics ? l : void 0,
 			"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(P(p.containerStyle, {
+				"--bkgd-w": "100%",
+				"--bkgd-h": "100%",
+				"--bkgd-mw": "none",
+				"--bkgd-cw": "60px",
+				"--bkgd-n": "12",
+				"--bkgd-b": "0",
+				"--bkgd-cl": i.guide.colors.line,
+				"--bkgd-cp": i.guide.colors.pattern,
+				"--bkgd-ca": i.guide.colors.auto,
+				"--bkgd-cf": i.guide.colors.fixed,
+				"--bkgd-g": "0px",
+				"--bkgd-j": "center",
+				"--bkgd-t": "none",
+				"--bkgd-line-color": "var(--bkgd-cl)"
+			}), a.style),
+			...I(a),
+			mix: typeof window > "u" || a.ssrMode ? void 0 : o.attach,
+			children: [g, a.children]
 		});
 	};
 }
-var ce = K(`${import.meta.url}#Guide`, se);
+var he = Y(`${import.meta.url}#Guide`, me);
 //#endregion
-//#region packages/remix/src/Spacer.ts
-function le(t) {
+//#region packages/remix/src/Spacer.tsx
+function Z(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 = B(t.__baselineConfig ?? z(e, M, i)), o = t.base ?? a.base, s = t.variant ?? a.spacer.variant, c = V(t.debugging, a.spacer.debugging), l = oe({
+			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),
-			"data-testid": "spacer",
-			"data-variant": o,
-			"data-height": `${c.normHeight}px`,
-			style: I(c.style, n.style),
-			children: [l, n.children]
+			children: t.indicatorNode(l.normWidth, "width")
+		}, "width")] : null;
+		return /* @__PURE__ */ r("div", {
+			className: L(...l.classTokens.map((e) => `bk-${e}`), t.className),
+			"data-testid": a.domDiagnostics ? "spacer" : void 0,
+			"data-variant": a.domDiagnostics ? s : void 0,
+			"data-height": a.domDiagnostics ? `${l.normHeight}px` : void 0,
+			style: R(P(l.style, {
+				"--bksp-w": "var(--bk-wf, 100%)",
+				"--bksp-h": "var(--bk-hf, auto)",
+				"--bksp-b": "8px",
+				"--bksp-cl": i.spacer.colors.line,
+				"--bksp-cf": i.spacer.colors.flat,
+				"--bksp-ct": i.spacer.colors.text
+			}), t.style),
+			...I(t),
+			children: [u, t.children]
 		});
 	};
 }
-var Y = K(`${import.meta.url}#Spacer`, le), X = { gridColumn: "1 / -1" }, Z = { gridRow: "2 / 3" }, ue = {
-	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));
+var Q = Y(`${import.meta.url}#Spacer`, Z), ge = Q;
+function _e(e) {
+	let t = i.base, r = _({}), a = null, o = X(({ height: n }) => {
+		e.props.ssrMode || a || n === 0 || (a = x(n, t, r, "height"), J(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 = B(s.__baselineConfig ?? z(e, M, i)), l = V(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 = se({
 			base: c.base,
 			color: c.padder.color,
 			width: s.width,
@@ -882,108 +1004,144 @@ 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),
-			"data-testid": "padder",
+		if (l.isNone) return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
+			"data-testid": c.domDiagnostics ? "padder" : void 0,
 			mix: d,
-			style: I(f.containerStyle, s.style),
-			children: s.children
+			style: R(P(f.containerStyle, {
+				"--bkpd-w": "auto",
+				"--bkpd-h": "auto",
+				"--bkpd-b": "8px",
+				"--bkpd-c": i.padder.color
+			}), s.style),
+			...I(s),
+			children: s.preserveContentHost ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-content",
+				"data-testid": c.domDiagnostics ? "padder-content" : void 0,
+				children: s.children
+			}, "content") : s.children
 		});
-		let p = c.spacer.variant, m = (t, n) => e(Y, {
+		let p = c.spacer.variant, m = (e, t) => /* @__PURE__ */ n(ge, {
 			__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,
+			u.top > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-top",
 				children: m("100%", u.top)
-			}) : null,
-			u.left >= 0 ? e("div", {
-				key: "left",
-				style: Z,
+			}, "top") : null,
+			u.left > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-left",
 				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,
+				"data-testid": c.domDiagnostics ? "padder-content" : void 0,
 				children: s.children
-			}),
-			u.right >= 0 ? e("div", {
-				key: "right",
-				style: Z,
+			}, "content"),
+			u.right > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-right",
 				children: m(u.right, "100%")
-			}) : null,
-			u.bottom >= 0 ? e("div", {
-				key: "bottom",
-				style: X,
+			}, "right") : null,
+			u.bottom > 0 ? /* @__PURE__ */ n("div", {
+				className: "bk-pad-bottom",
 				children: m("100%", u.bottom)
-			}) : null
+			}, "bottom") : null
 		];
-		return e("div", {
-			className: F(...f.classTokens.map((e) => `bk-${e}`), s.className),
-			"data-testid": "padder",
+		return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
+			"data-testid": c.domDiagnostics ? "padder" : void 0,
 			mix: d,
-			style: I(f.containerStyle, s.style),
+			style: R(P(f.containerStyle, {
+				"--bkpd-w": "auto",
+				"--bkpd-h": "auto",
+				"--bkpd-b": "8px",
+				"--bkpd-c": i.padder.color
+			}), s.style),
+			...I(s),
 			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 $ = Y(`${import.meta.url}#Padder`, _e), ve = $, ye = $, be = M;
+function xe(e) {
+	let t = i.base, r = "clamp", a = "bottom", s = _({}), c = null, l = () => {
+		J(e);
+	}, u = X((e) => {
+		r === "none" || c || e.height === 0 || (c = x(e.height, t, s, {
+			mode: r,
+			snapEdge: a
+		}), l());
 	});
 	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 l = e.props, d = B(l.__baselineConfig ?? z(e, M, i)), f = l.snapping ?? "clamp", p = l.snapEdge ?? "bottom", m = V(l.debugging, d.box.debugging), h = _({
+			padding: l.padding,
+			block: l.block,
+			inline: l.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],
-			width: "fit-content",
-			height: s.height,
-			debugging: d.debugging,
-			ssrMode: !0,
-			children: s.children
+		t = d.base, r = f, a = p, s = h;
+		let g = f === "none" ? h : c ?? h, v = o({
+			parentConfig: d,
+			base: 1,
+			spacer: { variant: "flat" }
+		}), y = ie({
+			className: l.className,
+			style: l.style,
+			width: l.width
+		}), b = ae({
+			base: d.base,
+			lineColor: d.box.colors.line,
+			width: l.width,
+			height: l.height,
+			span: l.span,
+			colSpan: l.colSpan,
+			rowSpan: l.rowSpan,
+			isVisible: m.isShown
+		}), x = y ? void 0 : P({
+			...g.top > 0 || g.bottom > 0 ? { gridTemplateRows: `${g.top}px 1fr ${g.bottom}px` } : {},
+			...g.left > 0 || g.right > 0 ? { gridTemplateColumns: `${g.left}px 1fr ${g.right}px` } : {}
+		}, {
+			gridTemplateRows: "auto 1fr auto",
+			gridTemplateColumns: "auto 1fr auto"
 		});
-		return e("div", {
-			className: F(...m.classTokens.map((e) => `bk-${e}`), s.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,
+		return /* @__PURE__ */ n("div", {
+			className: L(...b.classTokens.map((e) => `bk-${e}`), y && "bk-box-separate-padder", m.isShown && !y && "bk-box-pad-visible", l.className),
+			"data-testid": d.domDiagnostics ? "box" : void 0,
+			style: R(P(b.boxStyle, {
+				"--bkbx-w": "fit-content",
+				"--bkbx-h": "fit-content",
+				"--bkbx-cl": i.box.colors.line
+			}), y ? void 0 : R(x, m.isShown ? P({ "--bkpd-c": d.padder.color }, { "--bkpd-c": i.padder.color }) : void 0), b.gridSpanStyle, l.style),
+			...I(l),
+			mix: typeof window > "u" || l.ssrMode || f === "none" ? void 0 : u.attach,
+			children: /* @__PURE__ */ n(be, {
+				__baselineConfig: d,
 				base: 1,
 				spacer: { variant: "flat" },
-				children: h
+				children: y ? /* @__PURE__ */ n(ye, {
+					__baselineConfig: v,
+					block: [g.top, g.bottom],
+					inline: [g.left, g.right],
+					width: "fit-content",
+					height: l.height,
+					debugging: m.debugging,
+					preserveContentHost: !0,
+					ssrMode: !0,
+					children: l.children
+				}) : /* @__PURE__ */ n("div", {
+					className: "bk-pad-content",
+					"data-testid": d.domDiagnostics ? "padder-content" : void 0,
+					children: l.children
+				})
 			})
 		});
 	};
 }
-var fe = K(`${import.meta.url}#Box`, de);
+var Se = Y(`${import.meta.url}#Box`, xe);
 //#endregion
-export { oe as Baseline, fe as Box, N as Config, ce as Guide, $ as Padder, Y as Spacer };
+export { pe as Baseline, Se as Box, M as Config, he as Guide, ve as Padder, Q as Spacer };
 
 //# sourceMappingURL=remix.mjs.map