baseline-kit 5.2.0 → 6.0.0

package/dist/index.mjs

@@ -1,22 +1,24 @@
-import { O as e, a as t, f as n, h as r, i, k as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f } from "./src-D0nL1BwZ.js";
-import * as p from "react";
-import { useCallback as m, useEffect as h, useLayoutEffect as g, useMemo as _, useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { E as e, M as t, _ as n, a as r, c as i, g as a, h as o, i as s, j as c, l, n as u, o as d, r as f, s as p, t as m, u as h, v as g } from "./src-CPIpvN4R.js";
+import * as _ from "react";
+import { useCallback as v, useEffect as y, useLayoutEffect as b, useMemo as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region packages/react/src/components/Config/Config.tsx
-var S = "__baseline_kit_config_context__", C = globalThis, w = C[S] ?? (C[S] = p.createContext(a));
-w.displayName = "ConfigContext";
-var T = () => p.use(w);
-function E({ children: t, base: n, baseline: r, guide: i, spacer: a, box: o, padder: s }) {
-	let c = T(), l = p.useMemo(() => e({
-		parentConfig: c,
-		base: n,
+var E = "__baseline_kit_config_context__", D = globalThis, O = D[E] ?? (D[E] = _.createContext(t));
+O.displayName = "ConfigContext";
+var k = () => _.use(O);
+function A({ children: e, base: t, domDiagnostics: n, baseline: r, guide: i, spacer: a, box: o, padder: s }) {
+	let l = k(), u = _.useMemo(() => c({
+		parentConfig: l,
+		base: t,
+		domDiagnostics: n,
 		baseline: r,
 		guide: i,
 		spacer: a,
 		box: o,
 		padder: s
 	}), [
-		c,
+		l,
+		t,
 		n,
 		r,
 		i,
@@ -24,14 +26,14 @@ function E({ children: t, base: n, baseline: r, guide: i, spacer: a, box: o, pad
 		o,
 		s
 	]);
-	return /* @__PURE__ */ b(w, {
-		value: l,
-		children: t
+	return /* @__PURE__ */ w(O, {
+		value: u,
+		children: e
 	});
 }
 //#endregion
 //#region packages/dom/src/timing.ts
-var D = (e) => {
+var j = (e) => {
 	let t = null, n = null;
 	return [(...r) => {
 		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
@@ -43,7 +45,7 @@ var D = (e) => {
 };
 //#endregion
 //#region packages/dom/src/measure.ts
-function O(e, t) {
+function M(e, t) {
 	let n = {
 		width: 0,
 		height: 0
@@ -55,7 +57,7 @@ function O(e, t) {
 			};
 			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
 		} catch {}
-	}, [i, a] = D(r);
+	}, [i, a] = j(r);
 	r();
 	let o = new ResizeObserver(i);
 	return o.observe(e), {
@@ -67,22 +69,22 @@ function O(e, t) {
 }
 //#endregion
 //#region packages/react/src/hooks/useMeasure.ts
-var k = {
+var N = {
 	width: 0,
 	height: 0
 };
-function A(e) {
-	let [t, n] = p.useState(k), r = p.useRef(null);
-	p.useLayoutEffect(() => {
+function P(e) {
+	let [t, n] = _.useState(N), r = _.useRef(null);
+	_.useLayoutEffect(() => {
 		if (typeof window > "u" || !e.current) return;
-		let t = O(e.current, (e) => {
+		let t = M(e.current, (e) => {
 			n((t) => t.width === e.width && t.height === e.height ? t : e);
 		});
 		return r.current = t, () => {
 			t.disconnect(), r.current = null;
 		};
 	}, [e]);
-	let i = p.useCallback(() => {
+	let i = _.useCallback(() => {
 		r.current?.refresh();
 	}, []);
 	return {
@@ -92,7 +94,7 @@ function A(e) {
 }
 //#endregion
 //#region packages/dom/src/virtual.ts
-function j(e, t, n) {
+function F(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");
@@ -105,7 +107,7 @@ function j(e, t, n) {
 	}, s = {
 		start: 0,
 		end: r
-	}, [c, l] = D(() => {
+	}, [c, l] = j(() => {
 		let e = o();
 		(e.start !== s.start || e.end !== s.end) && (s = e, n(e));
 	}), u = { passive: !0 };
@@ -120,20 +122,20 @@ function j(e, t, n) {
 }
 //#endregion
 //#region packages/react/src/hooks/useVirtual.ts
-function M({ totalLines: e, lineHeight: t, containerRef: n, buffer: r = 0 }) {
-	let i = typeof r == "number" ? r : parseInt(r, 10) || 0, [a, o] = v({
+function I({ totalLines: e, lineHeight: t, containerRef: n, buffer: r = 0 }) {
+	let i = typeof r == "number" ? r : parseInt(r, 10) || 0, [a, o] = S({
 		start: 0,
 		end: e
-	}), s = m((e) => {
+	}), s = v((e) => {
 		o((t) => t.start === e.start && t.end === e.end ? t : e);
 	}, []);
-	return g(() => {
+	return b(() => {
 		if (!n.current) return;
 		o((t) => t.start === 0 && t.end === e ? t : {
 			start: 0,
 			end: e
 		});
-		let r = j(n.current, {
+		let r = F(n.current, {
 			totalItems: e,
 			itemHeight: t,
 			buffer: i
@@ -149,46 +151,46 @@ function M({ totalLines: e, lineHeight: t, containerRef: n, buffer: r = 0 }) {
 }
 //#endregion
 //#region packages/react/src/hooks/useBaseline.ts
-function N(e, { base: t = 8, snapping: n = "none", snapEdge: i = "bottom", spacing: a = {} } = {}) {
+function L(e, { base: t = 8, snapping: r = "none", snapEdge: i = "bottom", spacing: a = {} } = {}) {
 	if (t < 1) throw Error("Base must be >= 1 for baseline alignment.");
-	let { height: s } = A(e), c = p.useRef(null);
-	return p.useMemo(() => {
-		let e = r({ padding: a }), l = s % t === 0;
-		if (n === "none") return {
+	let { height: o } = P(e), s = _.useRef(null);
+	return _.useMemo(() => {
+		let e = g({ padding: a }), c = o % t === 0;
+		if (r === "none") return {
 			padding: e,
-			isAligned: l,
-			height: s
+			isAligned: c,
+			height: o
 		};
-		if (c.current) return {
-			padding: c.current,
-			isAligned: l,
-			height: s
+		if (s.current) return {
+			padding: s.current,
+			isAligned: c,
+			height: o
 		};
-		if (s === 0) return {
+		if (o === 0) return {
 			padding: e,
-			isAligned: l,
-			height: s
+			isAligned: c,
+			height: o
 		};
-		let u = o(s, t, e, {
-			mode: n,
+		let l = n(o, t, e, {
+			mode: r,
 			snapEdge: i
 		});
-		return c.current = u, {
-			padding: u,
-			isAligned: l,
-			height: s
+		return s.current = l, {
+			padding: l,
+			isAligned: c,
+			height: o
 		};
 	}, [
 		t,
-		n,
+		r,
 		i,
 		a,
-		s
+		o
 	]);
 }
 //#endregion
 //#region packages/dom/src/viewport.ts
-function P() {
+function ee() {
 	return typeof window > "u" ? {} : {
 		viewportWidth: window.innerWidth,
 		viewportHeight: window.innerHeight
@@ -196,312 +198,402 @@ function P() {
 }
 //#endregion
 //#region packages/react/src/hooks/useGuide.ts
-function F(e, t) {
-	let { width: n } = A(e);
-	return p.useMemo(() => d(n, t, P()), [t, n]);
+function te(e, t) {
+	let { width: n } = P(e);
+	return _.useMemo(() => h(n, t, ee()), [t, n]);
 }
 //#endregion
 //#region packages/react/src/hooks/useConfig.ts
-function I(e) {
-	let t = T();
-	return _(() => Object.assign({ base: t.base }, t[e]), [t, e]);
+function R(e) {
+	let t = k();
+	return x(() => Object.assign({
+		base: t.base,
+		domDiagnostics: t.domDiagnostics
+	}, t[e]), [t, e]);
 }
 //#endregion
 //#region packages/react/src/hooks/useDebug.ts
-function L(e, t) {
-	return _(() => l(e, t), [e, t]);
+function z(e, t) {
+	return x(() => a(e, t), [e, t]);
 }
 //#endregion
 //#region packages/react/src/hooks/useIsClient.ts
-function R() {
-	let [e, t] = v(!1);
-	return h(() => {
+function B() {
+	let [e, t] = S(!1);
+	return y(() => {
 		t(!0);
 	}, []), e;
 }
 //#endregion
 //#region packages/react/src/utils/ssr.tsx
-function z({ children: e, fallback: t = null }) {
-	return R() ? /* @__PURE__ */ b(y, { children: e }) : /* @__PURE__ */ b(y, { children: t });
+function ne({ children: e, fallback: t = null }) {
+	return B() ? /* @__PURE__ */ w(C, { children: e }) : /* @__PURE__ */ w(C, { children: t });
 }
 //#endregion
 //#region packages/react/src/utils/merge.ts
-function B(...e) {
+function V(...e) {
 	return Object.assign({}, ...e.filter(Boolean));
 }
-function V(...e) {
+function H(...e) {
 	return (t) => {
 		e.forEach((e) => {
 			e && (typeof e == "function" ? e(t) : Object.assign(e, { current: t }));
 		});
 	};
 }
-var H = {
+//#endregion
+//#region packages/react/src/utils/dom.ts
+function U(e, t) {
+	return Object.fromEntries(Object.entries(e).filter(([e, n]) => t[e] !== n));
+}
+var re = /* @__PURE__ */ new Set([
+	"id",
+	"title",
+	"role",
+	"tabIndex",
+	"lang",
+	"dir",
+	"hidden"
+]);
+function W(e) {
+	return Object.fromEntries(Object.entries(e).filter(([e]) => e.startsWith("data-") || e.startsWith("aria-") || re.has(e)));
+}
+var G = {
 	bas: "bas_4Emvv",
+	line: "line_jXAw3",
+	flat: "flat_DwUeJ",
+	compact: "compact_CjR0G",
 	v: "v_lNfeX",
 	h: "h_PbNDU",
 	row: "row_J1Wva",
 	ssr: "ssr_PQAP-"
-}, U = p.memo(function({ className: e, debugging: t, style: r, variant: a, height: o, width: s, base: c, color: l, ...u }) {
-	let d = I("baseline"), { isShown: f } = L(t, d.debugging), m = p.useRef(null), { width: h, height: g } = A(m), _ = c || d.base, v = p.useMemo(() => i({
-		base: _,
-		colors: d.colors,
-		variant: a ?? d.variant,
-		width: s,
-		height: o,
-		color: l,
-		containerWidth: h,
-		containerHeight: g,
-		spacing: u,
-		isVisible: f
+}, ie = _.memo(function({ className: e, debugging: n, style: i, variant: a, height: s, width: c, base: l, color: u, ...f }) {
+	let p = R("baseline"), m = a ?? p.variant, { isShown: h } = z(n, p.debugging), g = _.useRef(null), { width: v, height: y } = P(g), b = l || p.base, x = _.useMemo(() => d({
+		base: b,
+		colors: p.colors,
+		variant: m,
+		width: c,
+		height: s,
+		color: u,
+		containerWidth: v,
+		containerHeight: y,
+		spacing: f,
+		isVisible: h
 	}), [
-		_,
-		d.colors,
-		d.variant,
-		a,
+		b,
+		p.colors,
+		m,
+		c,
 		s,
-		o,
-		l,
-		h,
-		g,
 		u,
-		f
-	]), { start: y, end: x } = M({
-		totalLines: v.rowCount,
-		lineHeight: _,
-		containerRef: m,
+		v,
+		y,
+		f,
+		h
+	]), S = r({
+		base: b,
+		contentHeight: x.contentHeight,
+		domDiagnostics: p.domDiagnostics,
+		className: e,
+		style: i
+	}), { start: C, end: T } = I({
+		totalLines: x.rowCount,
+		lineHeight: b,
+		containerRef: g,
 		buffer: 160
-	}), S = p.useMemo(() => B(v.containerStyle, r), [v.containerStyle, r]);
-	return /* @__PURE__ */ b("div", {
-		ref: m,
-		"data-testid": "baseline",
+	}), E = _.useMemo(() => V(U({
+		...x.containerStyle,
+		...S ? { "--bkbl-b": `${b}px` } : {}
+	}, {
+		"--bkbl-w": "100%",
+		"--bkbl-h": "100%",
+		"--bkbl-b": "8px",
+		"--bkbl-cl": t.baseline.colors.line,
+		"--bkbl-cf": t.baseline.colors.flat,
+		"--bkbl-c": m === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)"
+	}), i), [
+		x.containerStyle,
+		i,
+		m,
+		b,
+		S
+	]);
+	return /* @__PURE__ */ w("div", {
+		ref: g,
+		"data-testid": p.domDiagnostics ? "baseline" : void 0,
 		"aria-hidden": "true",
-		className: n(...v.classTokens.map((e) => H[e]), e),
-		style: S,
-		...u,
-		children: f && Array.from({ length: x - y }, (e, t) => {
-			let n = t + y;
-			return /* @__PURE__ */ b("div", {
-				className: H.row,
-				"data-row-index": n,
-				style: v.getRowStyle(n)
+		className: o(...x.classTokens.map((e) => G[e]), G[m], S && G.compact, e),
+		style: E,
+		...W(f),
+		children: h && !S && Array.from({ length: T - C }, (e, t) => {
+			let n = t + C;
+			return /* @__PURE__ */ w("div", {
+				className: G.row,
+				"data-row-index": p.domDiagnostics ? n : void 0,
+				style: x.getRowStyle(n)
 			}, n);
 		})
 	});
-}), W = p.memo(function({ className: e, debugging: t, style: r, variant: i, height: a, width: o, base: s, color: c, ssrMode: l = !1, ...u }) {
-	let d = I("baseline"), f = i ?? d.variant, p = s ?? d.base, { isShown: m } = L(t, d.debugging);
-	if (!m) return /* @__PURE__ */ b("div", {
-		className: n(H.bas, H.h, e),
+}), ae = _.memo(function({ className: t, debugging: n, style: r, variant: i, height: a, width: s, base: c, color: l, ssrMode: u = !1, ...d }) {
+	let f = R("baseline"), p = i ?? f.variant, m = c ?? f.base, { isShown: h } = z(n, f.debugging);
+	if (!h) return /* @__PURE__ */ w("div", {
+		className: o(G.bas, G.h, G[p], t),
 		style: r,
-		"data-testid": "baseline",
+		"data-testid": f.domDiagnostics ? "baseline" : void 0,
 		"aria-hidden": "true",
-		...u
+		...W(d)
 	});
-	let h = /* @__PURE__ */ b("div", {
-		className: n(H.bas, H.h, H.ssr, e),
-		style: {
-			width: o ?? "100%",
-			height: a ?? "100%",
-			...r
-		},
-		"data-testid": "baseline",
-		"aria-hidden": "true"
+	let g = /* @__PURE__ */ w("div", {
+		className: o(G.bas, G.h, G.ssr, G[p], t),
+		style: V(U({
+			width: e(s ?? "100%"),
+			height: e(a ?? "100%")
+		}, {
+			width: "100%",
+			height: "100%"
+		}), r),
+		"data-testid": f.domDiagnostics ? "baseline" : void 0,
+		"aria-hidden": "true",
+		...W(d)
 	});
-	return l ? h : /* @__PURE__ */ b(z, {
-		fallback: h,
-		children: /* @__PURE__ */ b(U, {
-			className: e,
-			debugging: t,
+	return u ? g : /* @__PURE__ */ w(ne, {
+		fallback: g,
+		children: /* @__PURE__ */ w(ie, {
+			className: t,
+			debugging: n,
 			style: r,
-			variant: f,
+			variant: p,
 			height: a,
-			width: o,
-			base: p,
-			color: c,
-			...u
+			width: s,
+			base: m,
+			color: l,
+			...d
 		})
 	});
-}), G = {
+}), K = {
 	gde: "gde_4PKz3",
 	v: "v_yAvN0",
 	h: "h_XcWcy",
 	line: "line_UaLjW",
 	cols: "cols_ibtT4",
 	col: "col_QPSDI",
+	pattern: "pattern_8ihi5",
+	auto: "auto_xzTBc",
+	fixed: "fixed_g2rOO",
+	compactFixed: "compactFixed_C3AMS",
 	ssr: "ssr_4UN4k"
-}, ee = p.memo(function({ className: e, debugging: t, style: r, variant: i, align: a = "center", gap: o, height: s, width: c, columns: l, columnWidth: u, maxWidth: d, color: f, children: p, ssrMode: m = !1, ...h }) {
-	let g = I("guide"), _ = i ?? g.variant, v = typeof o == "number" ? o : 0, { isShown: y } = L(t, g.debugging);
-	if (!y) return /* @__PURE__ */ b("div", {
-		className: n(G.gde, G.h, e),
+}, oe = _.memo(function({ className: t, debugging: n, style: r, variant: i, align: a = "center", gap: s, height: c, width: l, columns: u, columnWidth: d, maxWidth: f, color: p, children: m, ssrMode: h = !1, ...g }) {
+	let _ = R("guide"), v = i ?? _.variant, y = typeof s == "number" ? s : 0, { isShown: b } = z(n, _.debugging);
+	if (!b) return /* @__PURE__ */ w("div", {
+		className: o(K.gde, K.h, K[v], t),
 		style: r,
-		"data-testid": "guide",
-		"data-variant": _,
+		"data-testid": _.domDiagnostics ? "guide" : void 0,
+		"data-variant": _.domDiagnostics ? v : void 0,
 		"aria-hidden": "true",
-		...h,
-		children: p
+		...g,
+		children: m
 	});
-	let x = /* @__PURE__ */ b("div", {
-		className: n(G.gde, G.h, G.ssr, e),
-		style: {
-			width: c ?? "100%",
-			height: s ?? "100%",
-			maxWidth: d ?? "none",
-			...r
-		},
-		"data-testid": "guide",
-		"data-variant": _,
+	let x = /* @__PURE__ */ w("div", {
+		className: o(K.gde, K.h, K.ssr, K[v], t),
+		style: V(U({
+			width: e(l ?? "100%"),
+			height: e(c ?? "100%"),
+			maxWidth: e(f ?? "none")
+		}, {
+			width: "100%",
+			height: "100%",
+			maxWidth: "none"
+		}), r),
+		"data-testid": _.domDiagnostics ? "guide" : void 0,
+		"data-variant": _.domDiagnostics ? v : void 0,
 		"aria-hidden": "true",
-		children: p
+		...g,
+		children: m
 	});
-	return m ? x : /* @__PURE__ */ b(z, {
+	return h ? x : /* @__PURE__ */ w(ne, {
 		fallback: x,
-		children: /* @__PURE__ */ b(te, {
-			className: e,
-			debugging: t,
+		children: /* @__PURE__ */ w(se, {
+			className: t,
+			debugging: n,
 			style: r,
-			variant: _,
+			variant: v,
 			align: a,
-			gap: v,
-			height: s,
-			width: c,
-			columns: l,
-			columnWidth: u,
-			maxWidth: d,
-			color: f,
-			...h,
-			children: p
+			gap: y,
+			height: c,
+			width: l,
+			columns: u,
+			columnWidth: d,
+			maxWidth: f,
+			color: p,
+			...g,
+			children: m
 		})
 	});
-}), te = p.memo(function({ className: e, debugging: r, style: i, variant: a, align: o = "center", gap: s, height: l, width: u, columns: d, columnWidth: f, maxWidth: m, color: h, children: g, ..._ }) {
-	let v = I("guide"), { isShown: y } = L(r, v.debugging), S = p.useRef(null);
-	A(S);
-	let C = a ?? v.variant, w = typeof s == "number" ? s : 0, { template: T, columnsCount: E, calculatedGap: D } = F(S, p.useMemo(() => t({
+}), se = _.memo(function({ className: e, debugging: n, style: r, variant: a, align: s = "center", gap: c, height: u, width: d, columns: f, columnWidth: m, maxWidth: h, color: g, children: v, ...y }) {
+	let b = R("guide"), { isShown: x } = z(n, b.debugging), S = _.useRef(null);
+	P(S);
+	let C = a ?? b.variant, E = typeof c == "number" ? c : 0, { template: D, columnsCount: O, calculatedGap: k } = te(S, _.useMemo(() => i({
 		variant: C,
-		base: v.base,
-		gap: w,
-		columns: d,
-		columnWidth: f
+		base: b.base,
+		gap: E,
+		columns: f,
+		columnWidth: m
 	}), [
 		C,
-		v.base,
-		w,
-		d,
-		f
-	])), O = p.useMemo(() => c({
-		base: v.base,
-		colors: v.colors,
+		b.base,
+		E,
+		f,
+		m
+	])), A = p({
 		variant: C,
-		align: o || "center",
-		width: u,
-		height: l,
-		columnWidth: f,
-		maxWidth: m,
-		color: h,
-		template: T,
-		columnsCount: E,
-		calculatedGap: D,
-		isVisible: y
+		columns: f,
+		columnWidth: m,
+		gap: E,
+		align: s,
+		domDiagnostics: b.domDiagnostics,
+		className: e,
+		style: r
+	}), j = _.useMemo(() => l({
+		base: b.base,
+		colors: b.colors,
+		variant: C,
+		align: s || "center",
+		width: d,
+		height: u,
+		columnWidth: m,
+		maxWidth: h,
+		color: g,
+		template: D,
+		columnsCount: O,
+		calculatedGap: k,
+		isVisible: x
 	}), [
-		v.base,
-		v.colors,
+		b.base,
+		b.colors,
 		C,
-		o,
+		s,
+		d,
 		u,
-		l,
-		f,
 		m,
 		h,
-		T,
-		E,
+		g,
 		D,
-		y
-	]), k = p.useMemo(() => B(O.containerStyle, i), [O.containerStyle, i]);
-	return /* @__PURE__ */ x("div", {
+		O,
+		k,
+		x
+	]), M = _.useMemo(() => V(U(j.containerStyle, {
+		"--bkgd-w": "100%",
+		"--bkgd-h": "100%",
+		"--bkgd-mw": "none",
+		"--bkgd-cw": "60px",
+		"--bkgd-n": "12",
+		"--bkgd-b": "0",
+		"--bkgd-cl": t.guide.colors.line,
+		"--bkgd-cp": t.guide.colors.pattern,
+		"--bkgd-ca": t.guide.colors.auto,
+		"--bkgd-cf": t.guide.colors.fixed,
+		"--bkgd-g": "0px",
+		"--bkgd-j": "center",
+		"--bkgd-t": "none",
+		"--bkgd-line-color": "var(--bkgd-cl)"
+	}), r), [j.containerStyle, r]);
+	return /* @__PURE__ */ T("div", {
 		ref: S,
-		"data-testid": "guide",
+		"data-testid": b.domDiagnostics ? "guide" : void 0,
 		"aria-hidden": "true",
-		className: n(...O.classTokens.map((e) => G[e]), e),
-		"data-variant": a,
-		style: k,
-		..._,
-		children: [y && /* @__PURE__ */ b("div", {
-			className: G.cols,
-			"data-variant": a,
-			children: !O.isLineVariant && Array.from({ length: O.columnsCount }, (e, t) => /* @__PURE__ */ b("div", {
-				className: G.col,
-				"data-column-index": t,
-				"data-variant": a
+		className: o(...j.classTokens.map((e) => K[e]), !j.classTokens.includes(C) && K[C], e),
+		"data-variant": b.domDiagnostics ? C : void 0,
+		style: M,
+		...y,
+		children: [x && /* @__PURE__ */ w("div", {
+			className: o(K.cols, K[C], A && K.compactFixed),
+			"data-variant": b.domDiagnostics ? C : void 0,
+			children: !j.isLineVariant && !A && Array.from({ length: j.columnsCount }, (e, t) => /* @__PURE__ */ w("div", {
+				className: o(K.col, K[C]),
+				"data-column-index": b.domDiagnostics ? t : void 0,
+				"data-variant": b.domDiagnostics ? C : void 0
 			}, t))
-		}), g]
+		}), v]
 	});
-}), K = typeof window > "u";
-function ne(e, t) {
-	if (K) return t;
+}), q = typeof window > "u";
+function ce(e, t) {
+	if (q) return t;
 	try {
 		return e();
 	} catch {
 		return t;
 	}
 }
-function q(e, t, n) {
-	return !e || K ? t : n;
+function J(e, t, n) {
+	return !e || q ? t : n;
 }
-var J = {
+var Y = {
 	spr: "spr_syfhf",
 	line: "line_nzGsp",
 	flat: "flat_XJWHt",
 	indicator: "indicator_inw1x"
-}, Y = p.memo(function({ height: e, width: t, indicatorNode: r, debugging: i, variant: a, base: o, color: c, className: l, style: u, children: d, ssrMode: f = !1, ...m }) {
-	let h = p.useRef(null), g = I("spacer"), { isShown: _ } = L(i, g.debugging), v = a ?? g.variant, S = o ?? g.base, C = R(), w = p.useMemo(() => s({
-		base: S,
+}, X = _.memo(function({ height: e, width: n, indicatorNode: r, debugging: i, variant: a, base: s, color: c, className: l, style: d, children: f, ssrMode: p = !1, ...m }) {
+	let h = _.useRef(null), g = R("spacer"), { isShown: v } = z(i, g.debugging), y = a ?? g.variant, b = s ?? g.base, x = B(), S = _.useMemo(() => u({
+		base: b,
 		colors: g.colors,
-		width: t,
+		width: n,
 		height: e,
 		color: c,
-		variant: v,
-		isVisible: _
+		variant: y,
+		isVisible: v
 	}), [
-		S,
+		b,
 		g.colors,
-		t,
+		n,
 		e,
 		c,
-		v,
-		_
-	]), T = q(C && !f, !1, _ && r !== void 0), E = p.useMemo(() => {
-		if (!T) return null;
-		let e = w.normWidth, t = w.normHeight;
-		return /* @__PURE__ */ x(y, { children: [t !== 0 && /* @__PURE__ */ b("span", {
-			className: J.indicator,
+		y,
+		v
+	]), E = J(x && !p, !1, v && r !== void 0), D = _.useMemo(() => {
+		if (!E) return null;
+		let e = S.normWidth, t = S.normHeight;
+		return /* @__PURE__ */ T(C, { children: [t !== 0 && /* @__PURE__ */ w("span", {
+			className: Y.indicator,
 			"aria-hidden": "true",
 			children: r(t, "height")
-		}, "height"), e !== 0 && /* @__PURE__ */ b("span", {
-			className: J.indicator,
+		}, "height"), e !== 0 && /* @__PURE__ */ w("span", {
+			className: Y.indicator,
 			"aria-hidden": "true",
 			children: r(e, "width")
 		}, "width")] });
 	}, [
-		T,
+		E,
 		r,
-		w.normWidth,
-		w.normHeight
-	]), D = p.useMemo(() => B(w.style, u), [w.style, u]);
-	return /* @__PURE__ */ x("div", {
+		S.normWidth,
+		S.normHeight
+	]), O = _.useMemo(() => V(U(S.style, {
+		"--bksp-w": "var(--bk-wf, 100%)",
+		"--bksp-h": "var(--bk-hf, auto)",
+		"--bksp-b": "8px",
+		"--bksp-cl": t.spacer.colors.line,
+		"--bksp-cf": t.spacer.colors.flat,
+		"--bksp-ct": t.spacer.colors.text
+	}), d), [S.style, d]);
+	return /* @__PURE__ */ T("div", {
 		ref: h,
-		"data-testid": "spacer",
-		className: n(...w.classTokens.map((e) => J[e]), l),
-		"data-variant": v,
-		"data-height": typeof w.normHeight == "number" ? `${w.normHeight}px` : w.normHeight,
-		style: D,
+		"data-testid": g.domDiagnostics ? "spacer" : void 0,
+		className: o(...S.classTokens.map((e) => Y[e]), l),
+		"data-variant": g.domDiagnostics ? y : void 0,
+		"data-height": g.domDiagnostics ? typeof S.normHeight == "number" ? `${S.normHeight}px` : S.normHeight : void 0,
+		style: O,
 		...m,
-		children: [E, d]
+		children: [D, f]
 	});
-}), X = {
+}), Z = {
 	pad: "pad_NizuS",
 	content: "content_xFX0U",
+	topEdge: "topEdge_7hMCE",
+	leftEdge: "leftEdge_1Dc-j",
+	rightEdge: "rightEdge_P7r9Z",
+	bottomEdge: "bottomEdge_PfOep",
 	v: "v_dowAz"
-}, re = (e, t, n) => {
-	let r = e || "line", i = t || "none", a = (e, t) => /* @__PURE__ */ b(Y, {
+}, le = (e, t, n) => {
+	let r = e || "line", i = t || "none", a = (e, t) => /* @__PURE__ */ w(X, {
 		variant: r,
 		debugging: t === 0 || e === 0 ? "none" : i,
 		indicatorNode: n,
@@ -509,133 +601,172 @@ var J = {
 		width: e === "100%" ? void 0 : e
 	});
 	return a.displayName = "PadderSpacer", a;
-}, Z = { gridColumn: "1 / -1" }, Q = { gridRow: "2 / 3" }, ie = {
-	gridRow: "2 / 3",
-	gridColumn: "2 / 3"
-}, $ = p.memo(p.forwardRef(function({ children: e, className: t, debugging: i, height: a, indicatorNode: o, style: s, width: c, ssrMode: l = !1, ...u }, d) {
-	let m = I("padder"), { variant: h } = I("spacer"), g = p.useMemo(() => r(u), [u]), { isShown: _, isNone: v, debugging: S } = L(i, m.debugging), C = !v, w = R(), T = p.useRef(null), E = N(T, {
-		base: m.base,
+}, Q = _.memo(_.forwardRef(function({ children: e, className: n, debugging: r, height: i, indicatorNode: a, style: s, width: c, ssrMode: l = !1, preserveContentHost: u = !1, ...d }, f) {
+	let p = R("padder"), { variant: h } = R("spacer"), v = _.useMemo(() => g(d), [d]), { isShown: y, isNone: b, debugging: x } = z(r, p.debugging), S = !b, E = B(), D = _.useRef(null), O = L(D, {
+		base: p.base,
 		snapping: "height",
-		spacing: g
-	}), D = { padding: {
-		top: g.top || 0,
-		right: g.right || 0,
-		bottom: g.bottom || 0,
-		left: g.left || 0
-	} }, { padding: O } = q(w && !l, D, E), k = V(d, T), A = p.useMemo(() => f({
-		base: m.base,
-		color: m.color,
+		spacing: v
+	}), k = { padding: {
+		top: v.top || 0,
+		right: v.right || 0,
+		bottom: v.bottom || 0,
+		left: v.left || 0
+	} }, { padding: A } = J(E && !l, k, O), j = H(f, D), M = _.useMemo(() => m({
+		base: p.base,
+		color: p.color,
 		width: c,
-		height: a,
-		padding: O,
-		enableSpacers: C,
-		isVisible: _
+		height: i,
+		padding: A,
+		enableSpacers: S,
+		isVisible: y
 	}), [
-		m.base,
-		m.color,
+		p.base,
+		p.color,
 		c,
-		a,
-		O,
-		C,
-		_
-	]), j = p.useMemo(() => B(A.containerStyle, s), [A.containerStyle, s]), M = p.useMemo(() => re(h, S, o), [
-		h,
+		i,
+		A,
 		S,
-		o
+		y
+	]), N = _.useMemo(() => V(U(M.containerStyle, {
+		"--bkpd-w": "fit-content",
+		"--bkpd-h": "fit-content",
+		"--bkpd-b": "8px",
+		"--bkpd-c": t.padder.color
+	}), s), [M.containerStyle, s]), P = _.useMemo(() => le(h, x, a), [
+		h,
+		x,
+		a
 	]);
-	return C ? /* @__PURE__ */ x("div", {
-		ref: k,
-		"data-testid": "padder",
-		className: n(...A.classTokens.map((e) => X[e]), t),
-		style: j,
+	return S ? /* @__PURE__ */ T("div", {
+		ref: j,
+		"data-testid": p.domDiagnostics ? "padder" : void 0,
+		className: o(...M.classTokens.map((e) => Z[e]), n),
+		style: N,
+		...W(d),
 		children: [
-			/* @__PURE__ */ x(y, { children: [O.top >= 0 && /* @__PURE__ */ b("div", {
-				style: Z,
-				children: M("100%", O.top)
-			}), O.left >= 0 && /* @__PURE__ */ b("div", {
-				style: Q,
-				children: M(O.left, "100%")
+			/* @__PURE__ */ T(C, { children: [A.top > 0 && /* @__PURE__ */ w("div", {
+				className: Z.topEdge,
+				children: P("100%", A.top)
+			}), A.left > 0 && /* @__PURE__ */ w("div", {
+				className: Z.leftEdge,
+				children: P(A.left, "100%")
 			})] }),
-			/* @__PURE__ */ b("div", {
-				"data-testid": "padder-content",
-				className: X.content,
-				style: ie,
+			/* @__PURE__ */ w("div", {
+				"data-testid": p.domDiagnostics ? "padder-content" : void 0,
+				className: Z.content,
 				children: e
-			}),
-			/* @__PURE__ */ x(y, { children: [O.right >= 0 && /* @__PURE__ */ b("div", {
-				style: Q,
-				children: M(O.right, "100%")
-			}), O.bottom >= 0 && /* @__PURE__ */ b("div", {
-				style: Z,
-				children: M("100%", O.bottom)
+			}, "content"),
+			/* @__PURE__ */ T(C, { children: [A.right > 0 && /* @__PURE__ */ w("div", {
+				className: Z.rightEdge,
+				children: P(A.right, "100%")
+			}), A.bottom > 0 && /* @__PURE__ */ w("div", {
+				className: Z.bottomEdge,
+				children: P("100%", A.bottom)
 			})] })
 		]
-	}) : /* @__PURE__ */ b("div", {
-		ref: k,
-		"data-testid": "padder",
-		className: n(...A.classTokens.map((e) => X[e]), t),
-		style: j,
-		children: e
+	}) : /* @__PURE__ */ w("div", {
+		ref: j,
+		"data-testid": p.domDiagnostics ? "padder" : void 0,
+		className: o(...M.classTokens.map((e) => Z[e]), n),
+		style: N,
+		...W(d),
+		children: u ? /* @__PURE__ */ w("div", {
+			"data-testid": p.domDiagnostics ? "padder-content" : void 0,
+			className: Z.content,
+			children: e
+		}, "content") : e
 	});
-})), ae = {
+})), ue = Q, de = Q, $ = {
 	box: "box_sPqFs",
-	v: "v_ZrZ5j"
-}, oe = p.memo(p.forwardRef(function({ children: e, snapping: t = "clamp", snapEdge: i = "bottom", debugging: a, className: o, colSpan: s, rowSpan: c, span: l, width: d, height: f, style: m, ssrMode: h = !1, ...g }, _) {
-	let v = I("box"), { isShown: y, debugging: x } = L(a, v.debugging), S = R(), C = p.useRef(null), { top: w, bottom: T, left: D, right: O } = r(g), k = N(C, {
-		base: v.base,
-		snapping: t,
-		snapEdge: i,
+	v: "v_ZrZ5j",
+	padderVisible: "padderVisible_zft5p",
+	separatePadder: "separatePadder_BmOqc"
+}, fe = _.memo(_.forwardRef(function({ children: e, snapping: n = "clamp", snapEdge: r = "bottom", debugging: i, className: a, colSpan: c, rowSpan: l, span: u, width: d, height: p, style: m, ssrMode: h = !1, ...v }, y) {
+	let b = R("box"), x = R("padder"), { isShown: S, debugging: C } = z(i, b.debugging), T = B(), E = _.useRef(null), { top: D, bottom: O, left: k, right: j } = g(v), M = L(E, {
+		base: b.base,
+		snapping: n,
+		snapEdge: r,
 		spacing: {
-			top: w,
-			bottom: T,
-			left: D,
-			right: O
+			top: D,
+			bottom: O,
+			left: k,
+			right: j
 		}
-	}), { padding: A } = q(S && !h, { padding: {
-		top: w || 0,
-		right: O || 0,
-		bottom: T || 0,
-		left: D || 0
-	} }, k), j = p.useMemo(() => u({
-		base: v.base,
-		lineColor: v.colors.line,
+	}), { padding: N } = J(T && !h, { padding: {
+		top: D || 0,
+		right: j || 0,
+		bottom: O || 0,
+		left: k || 0
+	} }, M), P = _.useMemo(() => f({
+		base: b.base,
+		lineColor: b.colors.line,
 		width: d,
-		height: f,
-		span: l,
-		colSpan: s,
-		rowSpan: c,
-		isVisible: y
+		height: p,
+		span: u,
+		colSpan: c,
+		rowSpan: l,
+		isVisible: S
 	}), [
-		v.base,
-		v.colors.line,
+		b.base,
+		b.colors.line,
 		d,
-		f,
-		l,
-		s,
+		p,
+		u,
 		c,
-		y
-	]), M = p.useMemo(() => B(j.boxStyle, m), [j.boxStyle, m]);
-	return /* @__PURE__ */ b("div", {
-		ref: V(_, C),
-		"data-testid": "box",
-		className: n(...j.classTokens.map((e) => ae[e]), o),
-		style: B(M, j.gridSpanStyle),
-		children: /* @__PURE__ */ b(E, {
+		l,
+		S
+	]), F = s({
+		className: a,
+		style: m,
+		width: d
+	}), I = _.useMemo(() => V(U(P.boxStyle, {
+		"--bkbx-w": "fit-content",
+		"--bkbx-h": "fit-content",
+		"--bkbx-cl": t.box.colors.line
+	}), F ? void 0 : V(U({
+		...N.top > 0 || N.bottom > 0 ? { gridTemplateRows: `${N.top}px 1fr ${N.bottom}px` } : {},
+		...N.left > 0 || N.right > 0 ? { gridTemplateColumns: `${N.left}px 1fr ${N.right}px` } : {}
+	}, {
+		gridTemplateRows: "auto 1fr auto",
+		gridTemplateColumns: "auto 1fr auto"
+	}), S ? U({ "--bkpd-c": x.color }, { "--bkpd-c": t.padder.color }) : void 0), m), [
+		P.boxStyle,
+		F,
+		m,
+		x.color,
+		S,
+		N.top,
+		N.right,
+		N.bottom,
+		N.left
+	]);
+	return /* @__PURE__ */ w("div", {
+		ref: H(y, E),
+		"data-testid": b.domDiagnostics ? "box" : void 0,
+		className: o(...P.classTokens.map((e) => $[e]), F && $.separatePadder, S && !F && $.padderVisible, a),
+		style: V(I, P.gridSpanStyle),
+		...W(v),
+		children: /* @__PURE__ */ w(A, {
 			base: 1,
 			spacer: { variant: "flat" },
-			children: /* @__PURE__ */ b($, {
-				block: [A.top, A.bottom],
-				inline: [A.left, A.right],
+			children: F ? /* @__PURE__ */ w(de, {
+				block: [N.top, N.bottom],
+				inline: [N.left, N.right],
 				width: "fit-content",
-				height: f,
-				debugging: x,
+				height: p,
+				debugging: C,
+				preserveContentHost: !0,
 				ssrMode: !0,
 				children: e
+			}) : /* @__PURE__ */ w("div", {
+				"data-testid": b.domDiagnostics ? "padder-content" : void 0,
+				className: Z.content,
+				children: e
 			})
 		})
 	});
 }));
 //#endregion
-export { W as Baseline, oe as Box, E as Config, ee as Guide, $ as Padder, Y as Spacer, K as isSSR, ne as safeClientValue };
+export { ae as Baseline, fe as Box, A as Config, oe as Guide, ue as Padder, X as Spacer, q as isSSR, ce as safeClientValue };
 
 //# sourceMappingURL=index.mjs.map