baseline-kit 5.0.0 → 5.2.0

package/dist/index.mjs

@@ -1,37 +1,37 @@
-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-QHaSfgVe.js";
+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";
 //#region packages/react/src/components/Config/Config.tsx
-var S = p.createContext(a);
-S.displayName = "ConfigContext";
-var C = () => p.use(S);
-function w({ children: t, base: n, baseline: r, guide: i, spacer: a, box: o, padder: s }) {
-	let c = C();
-	return /* @__PURE__ */ b(S, {
-		value: p.useMemo(() => e({
-			parentConfig: c,
-			base: n,
-			baseline: r,
-			guide: i,
-			spacer: a,
-			box: o,
-			padder: s
-		}), [
-			c,
-			n,
-			r,
-			i,
-			a,
-			o,
-			s
-		]),
+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,
+		baseline: r,
+		guide: i,
+		spacer: a,
+		box: o,
+		padder: s
+	}), [
+		c,
+		n,
+		r,
+		i,
+		a,
+		o,
+		s
+	]);
+	return /* @__PURE__ */ b(w, {
+		value: l,
 		children: t
 	});
 }
 //#endregion
 //#region packages/dom/src/timing.ts
-var T = (e) => {
+var D = (e) => {
 	let t = null, n = null;
 	return [(...r) => {
 		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
@@ -43,7 +43,7 @@ var T = (e) => {
 };
 //#endregion
 //#region packages/dom/src/measure.ts
-function E(e, t) {
+function O(e, t) {
 	let n = {
 		width: 0,
 		height: 0
@@ -55,7 +55,7 @@ function E(e, t) {
 			};
 			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
 		} catch {}
-	}, [i, a] = T(r);
+	}, [i, a] = D(r);
 	r();
 	let o = new ResizeObserver(i);
 	return o.observe(e), {
@@ -67,15 +67,15 @@ function E(e, t) {
 }
 //#endregion
 //#region packages/react/src/hooks/useMeasure.ts
-var D = {
+var k = {
 	width: 0,
 	height: 0
 };
-function O(e) {
-	let [t, n] = p.useState(D), r = p.useRef(null);
+function A(e) {
+	let [t, n] = p.useState(k), r = p.useRef(null);
 	p.useLayoutEffect(() => {
 		if (typeof window > "u" || !e.current) return;
-		let t = E(e.current, (e) => {
+		let t = O(e.current, (e) => {
 			n((t) => t.width === e.width && t.height === e.height ? t : e);
 		});
 		return r.current = t, () => {
@@ -92,7 +92,7 @@ function O(e) {
 }
 //#endregion
 //#region packages/dom/src/virtual.ts
-function k(e, t, n) {
+function j(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 +105,7 @@ function k(e, t, n) {
 	}, s = {
 		start: 0,
 		end: r
-	}, [c, l] = T(() => {
+	}, [c, l] = D(() => {
 		let e = o();
 		(e.start !== s.start || e.end !== s.end) && (s = e, n(e));
 	}), u = { passive: !0 };
@@ -120,7 +120,7 @@ function k(e, t, n) {
 }
 //#endregion
 //#region packages/react/src/hooks/useVirtual.ts
-function A({ totalLines: e, lineHeight: t, containerRef: n, buffer: r = 0 }) {
+function M({ totalLines: e, lineHeight: t, containerRef: n, buffer: r = 0 }) {
 	let i = typeof r == "number" ? r : parseInt(r, 10) || 0, [a, o] = v({
 		start: 0,
 		end: e
@@ -129,7 +129,11 @@ function A({ totalLines: e, lineHeight: t, containerRef: n, buffer: r = 0 }) {
 	}, []);
 	return g(() => {
 		if (!n.current) return;
-		let r = k(n.current, {
+		o((t) => t.start === 0 && t.end === e ? t : {
+			start: 0,
+			end: e
+		});
+		let r = j(n.current, {
 			totalItems: e,
 			itemHeight: t,
 			buffer: i
@@ -145,42 +149,46 @@ function A({ totalLines: e, lineHeight: t, containerRef: n, buffer: r = 0 }) {
 }
 //#endregion
 //#region packages/react/src/hooks/useBaseline.ts
-function j(e, { base: t = 8, snapping: n = "none", spacing: i = {} } = {}) {
+function N(e, { base: t = 8, snapping: n = "none", snapEdge: i = "bottom", spacing: a = {} } = {}) {
 	if (t < 1) throw Error("Base must be >= 1 for baseline alignment.");
-	let { height: a } = O(e), s = p.useRef(null);
+	let { height: s } = A(e), c = p.useRef(null);
 	return p.useMemo(() => {
-		let e = r({ padding: i }), c = a % t === 0;
+		let e = r({ padding: a }), l = s % t === 0;
 		if (n === "none") return {
 			padding: e,
-			isAligned: c,
-			height: a
+			isAligned: l,
+			height: s
 		};
-		if (s.current) return {
-			padding: s.current,
-			isAligned: c,
-			height: a
+		if (c.current) return {
+			padding: c.current,
+			isAligned: l,
+			height: s
 		};
-		if (a === 0) return {
+		if (s === 0) return {
 			padding: e,
-			isAligned: c,
-			height: a
+			isAligned: l,
+			height: s
 		};
-		let l = o(a, t, e, n);
-		return s.current = l, {
-			padding: l,
-			isAligned: c,
-			height: a
+		let u = o(s, t, e, {
+			mode: n,
+			snapEdge: i
+		});
+		return c.current = u, {
+			padding: u,
+			isAligned: l,
+			height: s
 		};
 	}, [
 		t,
 		n,
 		i,
-		a
+		a,
+		s
 	]);
 }
 //#endregion
 //#region packages/dom/src/viewport.ts
-function M() {
+function P() {
 	return typeof window > "u" ? {} : {
 		viewportWidth: window.innerWidth,
 		viewportHeight: window.innerHeight
@@ -188,24 +196,24 @@ function M() {
 }
 //#endregion
 //#region packages/react/src/hooks/useGuide.ts
-function N(e, t) {
-	let { width: n } = O(e);
-	return p.useMemo(() => d(n, t, M()), [t, n]);
+function F(e, t) {
+	let { width: n } = A(e);
+	return p.useMemo(() => d(n, t, P()), [t, n]);
 }
 //#endregion
 //#region packages/react/src/hooks/useConfig.ts
-function P(e) {
-	let t = C();
+function I(e) {
+	let t = T();
 	return _(() => Object.assign({ base: t.base }, t[e]), [t, e]);
 }
 //#endregion
 //#region packages/react/src/hooks/useDebug.ts
-function F(e, t) {
+function L(e, t) {
 	return _(() => l(e, t), [e, t]);
 }
 //#endregion
 //#region packages/react/src/hooks/useIsClient.ts
-function I() {
+function R() {
 	let [e, t] = v(!1);
 	return h(() => {
 		t(!0);
@@ -213,29 +221,29 @@ function I() {
 }
 //#endregion
 //#region packages/react/src/utils/ssr.tsx
-function L({ children: e, fallback: t = null }) {
-	return I() ? /* @__PURE__ */ b(y, { children: e }) : /* @__PURE__ */ b(y, { children: t });
+function z({ children: e, fallback: t = null }) {
+	return R() ? /* @__PURE__ */ b(y, { children: e }) : /* @__PURE__ */ b(y, { children: t });
 }
 //#endregion
 //#region packages/react/src/utils/merge.ts
-function R(...e) {
+function B(...e) {
 	return Object.assign({}, ...e.filter(Boolean));
 }
-function z(...e) {
+function V(...e) {
 	return (t) => {
 		e.forEach((e) => {
 			e && (typeof e == "function" ? e(t) : Object.assign(e, { current: t }));
 		});
 	};
 }
-var B = {
+var H = {
 	bas: "bas_4Emvv",
 	v: "v_lNfeX",
 	h: "h_PbNDU",
 	row: "row_J1Wva",
 	ssr: "ssr_PQAP-"
-}, V = p.memo(function({ className: e, debugging: t, style: r, variant: a, height: o, width: s, base: c, color: l, ...u }) {
-	let d = P("baseline"), { isShown: f } = F(t, d.debugging), m = p.useRef(null), { width: h, height: g } = O(m), _ = c || d.base, v = p.useMemo(() => i({
+}, 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,
@@ -258,39 +266,39 @@ var B = {
 		g,
 		u,
 		f
-	]), { start: y, end: x } = A({
+	]), { start: y, end: x } = M({
 		totalLines: v.rowCount,
 		lineHeight: _,
 		containerRef: m,
 		buffer: 160
-	}), S = p.useMemo(() => R(v.containerStyle, r), [v.containerStyle, r]);
+	}), S = p.useMemo(() => B(v.containerStyle, r), [v.containerStyle, r]);
 	return /* @__PURE__ */ b("div", {
 		ref: m,
 		"data-testid": "baseline",
 		"aria-hidden": "true",
-		className: n(...v.classTokens.map((e) => B[e]), e),
+		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: B.row,
+				className: H.row,
 				"data-row-index": n,
 				style: v.getRowStyle(n)
 			}, n);
 		})
 	});
-}), H = 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 = P("baseline"), f = i ?? d.variant, p = s ?? d.base, { isShown: m } = F(t, d.debugging);
+}), 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(B.bas, B.h, e),
+		className: n(H.bas, H.h, e),
 		style: r,
 		"data-testid": "baseline",
 		"aria-hidden": "true",
 		...u
 	});
 	let h = /* @__PURE__ */ b("div", {
-		className: n(B.bas, B.h, B.ssr, e),
+		className: n(H.bas, H.h, H.ssr, e),
 		style: {
 			width: o ?? "100%",
 			height: a ?? "100%",
@@ -299,9 +307,9 @@ var B = {
 		"data-testid": "baseline",
 		"aria-hidden": "true"
 	});
-	return l ? h : /* @__PURE__ */ b(L, {
+	return l ? h : /* @__PURE__ */ b(z, {
 		fallback: h,
-		children: /* @__PURE__ */ b(V, {
+		children: /* @__PURE__ */ b(U, {
 			className: e,
 			debugging: t,
 			style: r,
@@ -313,7 +321,7 @@ var B = {
 			...u
 		})
 	});
-}), U = {
+}), G = {
 	gde: "gde_4PKz3",
 	v: "v_yAvN0",
 	h: "h_XcWcy",
@@ -321,10 +329,10 @@ var B = {
 	cols: "cols_ibtT4",
 	col: "col_QPSDI",
 	ssr: "ssr_4UN4k"
-}, W = 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 = P("guide"), _ = i ?? g.variant, v = typeof o == "number" ? o : 0, { isShown: y } = F(t, g.debugging);
+}, 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(U.gde, U.h, e),
+		className: n(G.gde, G.h, e),
 		style: r,
 		"data-testid": "guide",
 		"data-variant": _,
@@ -333,7 +341,7 @@ var B = {
 		children: p
 	});
 	let x = /* @__PURE__ */ b("div", {
-		className: n(U.gde, U.h, U.ssr, e),
+		className: n(G.gde, G.h, G.ssr, e),
 		style: {
 			width: c ?? "100%",
 			height: s ?? "100%",
@@ -345,9 +353,9 @@ var B = {
 		"aria-hidden": "true",
 		children: p
 	});
-	return m ? x : /* @__PURE__ */ b(L, {
+	return m ? x : /* @__PURE__ */ b(z, {
 		fallback: x,
-		children: /* @__PURE__ */ b(G, {
+		children: /* @__PURE__ */ b(te, {
 			className: e,
 			debugging: t,
 			style: r,
@@ -364,10 +372,10 @@ var B = {
 			children: p
 		})
 	});
-}), G = 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 = P("guide"), { isShown: y } = F(r, v.debugging), S = p.useRef(null);
-	O(S);
-	let C = a ?? v.variant, w = typeof s == "number" ? s : 0, { template: T, columnsCount: E, calculatedGap: D } = N(S, p.useMemo(() => t({
+}), 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({
 		variant: C,
 		base: v.base,
 		gap: w,
@@ -379,7 +387,7 @@ var B = {
 		w,
 		d,
 		f
-	])), k = p.useMemo(() => c({
+	])), O = p.useMemo(() => c({
 		base: v.base,
 		colors: v.colors,
 		variant: C,
@@ -407,28 +415,27 @@ var B = {
 		E,
 		D,
 		y
-	]), A = p.useMemo(() => R(k.containerStyle, i), [k.containerStyle, i]);
+	]), k = p.useMemo(() => B(O.containerStyle, i), [O.containerStyle, i]);
 	return /* @__PURE__ */ x("div", {
 		ref: S,
 		"data-testid": "guide",
 		"aria-hidden": "true",
-		className: n(...k.classTokens.map((e) => U[e]), e),
+		className: n(...O.classTokens.map((e) => G[e]), e),
 		"data-variant": a,
-		style: A,
+		style: k,
 		..._,
 		children: [y && /* @__PURE__ */ b("div", {
-			className: U.cols,
+			className: G.cols,
 			"data-variant": a,
-			children: !k.isLineVariant && Array.from({ length: k.columnsCount }, (e, t) => /* @__PURE__ */ b("div", {
-				className: U.col,
+			children: !O.isLineVariant && Array.from({ length: O.columnsCount }, (e, t) => /* @__PURE__ */ b("div", {
+				className: G.col,
 				"data-column-index": t,
-				"data-variant": a,
-				style: { backgroundColor: k.columnColor }
+				"data-variant": a
 			}, t))
 		}), g]
 	});
 }), K = typeof window > "u";
-function q(e, t) {
+function ne(e, t) {
 	if (K) return t;
 	try {
 		return e();
@@ -436,15 +443,16 @@ function q(e, t) {
 		return t;
 	}
 }
-function J(e, t, n) {
+function q(e, t, n) {
 	return !e || K ? t : n;
 }
-var ee = {
+var J = {
 	spr: "spr_syfhf",
 	line: "line_nzGsp",
-	flat: "flat_XJWHt"
+	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 = P("spacer"), { isShown: _ } = F(i, g.debugging), v = a ?? g.variant, S = o ?? g.base, C = I(), w = p.useMemo(() => s({
+	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,
 		colors: g.colors,
 		width: t,
@@ -460,13 +468,15 @@ var ee = {
 		c,
 		v,
 		_
-	]), T = J(C && !f, !1, _ && r !== void 0), E = p.useMemo(() => {
+	]), 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,
 			"aria-hidden": "true",
 			children: r(t, "height")
 		}, "height"), e !== 0 && /* @__PURE__ */ b("span", {
+			className: J.indicator,
 			"aria-hidden": "true",
 			children: r(e, "width")
 		}, "width")] });
@@ -475,11 +485,11 @@ var ee = {
 		r,
 		w.normWidth,
 		w.normHeight
-	]), D = p.useMemo(() => R(w.style, u), [w.style, u]);
+	]), D = p.useMemo(() => B(w.style, u), [w.style, u]);
 	return /* @__PURE__ */ x("div", {
 		ref: h,
 		"data-testid": "spacer",
-		className: n(...w.classTokens.map((e) => ee[e]), l),
+		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,
@@ -488,11 +498,9 @@ var ee = {
 	});
 }), X = {
 	pad: "pad_NizuS",
-	lay: "lay_ZdQLz",
-	line: "line_7S7iI",
-	stk: "stk_X79YA",
+	content: "content_xFX0U",
 	v: "v_dowAz"
-}, te = (e, t, n) => {
+}, re = (e, t, n) => {
 	let r = e || "line", i = t || "none", a = (e, t) => /* @__PURE__ */ b(Y, {
 		variant: r,
 		debugging: t === 0 || e === 0 ? "none" : i,
@@ -501,11 +509,11 @@ var ee = {
 		width: e === "100%" ? void 0 : e
 	});
 	return a.displayName = "PadderSpacer", a;
-}, Z = { gridColumn: "1 / -1" }, Q = { gridRow: "2 / 3" }, ne = {
+}, 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 = P("padder"), { variant: h } = P("spacer"), g = p.useMemo(() => r(u), [u]), { isShown: _, isNone: v, debugging: S } = F(i, m.debugging), C = !v, w = I(), T = p.useRef(null), E = j(T, {
+	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,
 		snapping: "height",
 		spacing: g
@@ -514,7 +522,7 @@ var ee = {
 		right: g.right || 0,
 		bottom: g.bottom || 0,
 		left: g.left || 0
-	} }, { padding: O } = J(w && !l, D, E), k = z(d, T), A = p.useMemo(() => f({
+	} }, { padding: O } = q(w && !l, D, E), k = V(d, T), A = p.useMemo(() => f({
 		base: m.base,
 		color: m.color,
 		width: c,
@@ -530,7 +538,7 @@ var ee = {
 		O,
 		C,
 		_
-	]), M = p.useMemo(() => R(A.containerStyle, s), [A.containerStyle, s]), N = p.useMemo(() => te(h, S, o), [
+	]), j = p.useMemo(() => B(A.containerStyle, s), [A.containerStyle, s]), M = p.useMemo(() => re(h, S, o), [
 		h,
 		S,
 		o
@@ -539,92 +547,95 @@ var ee = {
 		ref: k,
 		"data-testid": "padder",
 		className: n(...A.classTokens.map((e) => X[e]), t),
-		style: M,
+		style: j,
 		children: [
 			/* @__PURE__ */ x(y, { children: [O.top >= 0 && /* @__PURE__ */ b("div", {
 				style: Z,
-				children: N("100%", O.top)
+				children: M("100%", O.top)
 			}), O.left >= 0 && /* @__PURE__ */ b("div", {
 				style: Q,
-				children: N(O.left, "100%")
+				children: M(O.left, "100%")
 			})] }),
 			/* @__PURE__ */ b("div", {
-				style: ne,
+				"data-testid": "padder-content",
+				className: X.content,
+				style: ie,
 				children: e
 			}),
 			/* @__PURE__ */ x(y, { children: [O.right >= 0 && /* @__PURE__ */ b("div", {
 				style: Q,
-				children: N(O.right, "100%")
+				children: M(O.right, "100%")
 			}), O.bottom >= 0 && /* @__PURE__ */ b("div", {
 				style: Z,
-				children: N("100%", O.bottom)
+				children: M("100%", O.bottom)
 			})] })
 		]
 	}) : /* @__PURE__ */ b("div", {
 		ref: k,
 		"data-testid": "padder",
 		className: n(...A.classTokens.map((e) => X[e]), t),
-		style: M,
+		style: j,
 		children: e
 	});
-})), re = {
+})), ae = {
 	box: "box_sPqFs",
 	v: "v_ZrZ5j"
-}, ie = p.memo(p.forwardRef(function({ children: e, snapping: t = "clamp", debugging: i, className: a, colSpan: o, rowSpan: s, span: c, width: l, height: d, style: f, ssrMode: m = !1, ...h }, g) {
-	let _ = P("box"), { isShown: v, debugging: y } = F(i, _.debugging), x = I(), S = p.useRef(null), { top: C, bottom: T, left: E, right: D } = r(h), O = j(S, {
-		base: _.base,
+}, 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,
 		spacing: {
-			top: C,
+			top: w,
 			bottom: T,
-			left: E,
-			right: D
+			left: D,
+			right: O
 		}
-	}), { padding: k } = J(x && !m, { padding: {
-		top: C || 0,
-		right: D || 0,
+	}), { padding: A } = q(S && !h, { padding: {
+		top: w || 0,
+		right: O || 0,
 		bottom: T || 0,
-		left: E || 0
-	} }, O), A = p.useMemo(() => u({
-		base: _.base,
-		lineColor: _.colors.line,
-		width: l,
-		height: d,
-		span: c,
-		colSpan: o,
-		rowSpan: s,
-		isVisible: v
+		left: D || 0
+	} }, k), j = p.useMemo(() => u({
+		base: v.base,
+		lineColor: v.colors.line,
+		width: d,
+		height: f,
+		span: l,
+		colSpan: s,
+		rowSpan: c,
+		isVisible: y
 	}), [
-		_.base,
-		_.colors.line,
-		l,
+		v.base,
+		v.colors.line,
 		d,
-		c,
-		o,
+		f,
+		l,
 		s,
-		v
-	]), M = p.useMemo(() => R(A.boxStyle, f), [A.boxStyle, f]);
+		c,
+		y
+	]), M = p.useMemo(() => B(j.boxStyle, m), [j.boxStyle, m]);
 	return /* @__PURE__ */ b("div", {
-		ref: z(g, S),
+		ref: V(_, C),
 		"data-testid": "box",
-		className: n(...A.classTokens.map((e) => re[e]), a),
-		style: R(M, A.gridSpanStyle),
-		children: /* @__PURE__ */ b(w, {
+		className: n(...j.classTokens.map((e) => ae[e]), o),
+		style: B(M, j.gridSpanStyle),
+		children: /* @__PURE__ */ b(E, {
 			base: 1,
 			spacer: { variant: "flat" },
 			children: /* @__PURE__ */ b($, {
-				block: [k.top, k.bottom],
-				inline: [k.left, k.right],
+				block: [A.top, A.bottom],
+				inline: [A.left, A.right],
 				width: "fit-content",
-				height: d,
-				debugging: y,
-				ssrMode: m,
+				height: f,
+				debugging: x,
+				ssrMode: !0,
 				children: e
 			})
 		})
 	});
 }));
 //#endregion
-export { H as Baseline, ie as Box, w as Config, W as Guide, $ as Padder, Y as Spacer, K as isSSR, q as safeClientValue };
+export { W as Baseline, oe as Box, E as Config, ee as Guide, $ as Padder, Y as Spacer, K as isSSR, ne as safeClientValue };
 
 //# sourceMappingURL=index.mjs.map