baseline-kit 5.0.0 → 5.1.0

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 /**
@@ -85,19 +84,27 @@ type ConfigSchema = {
     };
 };
 
-type ConfigProps = {
-    children: React.ReactNode;
+type PartialColors<T> = T extends {
+    colors: infer Colors;
+} ? Omit<Partial<T>, 'colors'> & {
+    colors?: Partial<Colors>;
+} : Partial<T>;
+type ConfigOverrides = {
     base?: number;
-    baseline?: Partial<ConfigSchema['baseline']>;
-    guide?: Partial<ConfigSchema['guide']>;
-    spacer?: Partial<ConfigSchema['spacer']>;
-    box?: Partial<ConfigSchema['box']>;
+    baseline?: PartialColors<ConfigSchema['baseline']>;
+    guide?: PartialColors<ConfigSchema['guide']>;
+    spacer?: PartialColors<ConfigSchema['spacer']>;
+    box?: PartialColors<ConfigSchema['box']>;
     padder?: Partial<ConfigSchema['padder']>;
 };
+
+type ConfigProps = ConfigOverrides & {
+    children: React.ReactNode;
+};
 /**
  * Configuration provider for baseline-kit components.
  */
-declare function Config({ children, base, baseline, guide, spacer, box, padder, }: ConfigProps): react_jsx_runtime.JSX.Element;
+declare function Config({ children, base, baseline, guide, spacer, box, padder, }: ConfigProps): React.JSX.Element;
 
 /**
  * Common props shared across library components.
@@ -118,7 +125,7 @@ type BaselineProps = {
     color?: string;
     ssrMode?: boolean;
 } & ComponentsProps;
-declare const Baseline: React.NamedExoticComponent<BaselineProps>;
+declare const Baseline: React.MemoExoticComponent<({ className, debugging, style, variant: variantProp, height: heightProp, width: widthProp, base: baseProp, color: colorProp, ssrMode, ...spacingProps }: BaselineProps) => React.JSX.Element>;
 
 type GuideProps = {
     align?: React.CSSProperties['justifyContent'];
@@ -131,7 +138,7 @@ type GuideProps = {
     gap?: number;
     ssrMode?: boolean;
 } & ComponentsProps & Omit<GuideConfig, 'columns' | 'columnWidth' | 'gap'>;
-declare const Guide: React.NamedExoticComponent<GuideProps>;
+declare const Guide: React.MemoExoticComponent<({ className, debugging, style, variant: variantProp, align, gap: gapProp, height, width, columns, columnWidth, maxWidth, color, children, ssrMode, ...props }: GuideProps) => React.JSX.Element>;
 
 type BoxProps = {
     colSpan?: number;
@@ -167,7 +174,7 @@ type SpacerProps = {
     indicatorNode?: IndicatorNode;
     ssrMode?: boolean;
 } & ComponentsProps;
-declare const Spacer: React.NamedExoticComponent<SpacerProps>;
+declare const Spacer: React.MemoExoticComponent<({ height: heightProp, width: widthProp, indicatorNode, debugging: debuggingProp, variant: variantProp, base: baseProp, color: colorProp, className, style, children, ssrMode, ...props }: SpacerProps) => React.JSX.Element>;
 
 type PadderProps = {
     indicatorNode?: IndicatorNode;

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-C3TICsw6.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,9 +149,9 @@ 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", spacing: i = {} } = {}) {
 	if (t < 1) throw Error("Base must be >= 1 for baseline alignment.");
-	let { height: a } = O(e), s = p.useRef(null);
+	let { height: a } = A(e), s = p.useRef(null);
 	return p.useMemo(() => {
 		let e = r({ padding: i }), c = a % t === 0;
 		if (n === "none") return {
@@ -180,7 +184,7 @@ function j(e, { base: t = 8, snapping: n = "none", spacing: i = {} } = {}) {
 }
 //#endregion
 //#region packages/dom/src/viewport.ts
-function M() {
+function P() {
 	return typeof window > "u" ? {} : {
 		viewportWidth: window.innerWidth,
 		viewportHeight: window.innerHeight
@@ -188,24 +192,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 +217,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 +262,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 +303,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 +317,7 @@ var B = {
 			...u
 		})
 	});
-}), U = {
+}), G = {
 	gde: "gde_4PKz3",
 	v: "v_yAvN0",
 	h: "h_XcWcy",
@@ -321,10 +325,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 +337,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 +349,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 +368,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 +383,7 @@ var B = {
 		w,
 		d,
 		f
-	])), k = p.useMemo(() => c({
+	])), O = p.useMemo(() => c({
 		base: v.base,
 		colors: v.colors,
 		variant: C,
@@ -407,28 +411,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 +439,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 +464,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 +481,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 +494,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 +505,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 +518,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 +534,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,52 +543,54 @@ 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, {
+}, oe = 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 _ = I("box"), { isShown: v, debugging: y } = L(i, _.debugging), x = R(), S = p.useRef(null), { top: C, bottom: w, left: T, right: D } = r(h), O = N(S, {
 		base: _.base,
 		snapping: t,
 		spacing: {
 			top: C,
-			bottom: T,
-			left: E,
+			bottom: w,
+			left: T,
 			right: D
 		}
-	}), { padding: k } = J(x && !m, { padding: {
+	}), { padding: k } = q(x && !m, { padding: {
 		top: C || 0,
 		right: D || 0,
-		bottom: T || 0,
-		left: E || 0
+		bottom: w || 0,
+		left: T || 0
 	} }, O), A = p.useMemo(() => u({
 		base: _.base,
 		lineColor: _.colors.line,
@@ -603,13 +609,13 @@ var ee = {
 		o,
 		s,
 		v
-	]), M = p.useMemo(() => R(A.boxStyle, f), [A.boxStyle, f]);
+	]), j = p.useMemo(() => B(A.boxStyle, f), [A.boxStyle, f]);
 	return /* @__PURE__ */ b("div", {
-		ref: z(g, S),
+		ref: V(g, S),
 		"data-testid": "box",
-		className: n(...A.classTokens.map((e) => re[e]), a),
-		style: R(M, A.gridSpanStyle),
-		children: /* @__PURE__ */ b(w, {
+		className: n(...A.classTokens.map((e) => ae[e]), a),
+		style: B(j, A.gridSpanStyle),
+		children: /* @__PURE__ */ b(E, {
 			base: 1,
 			spacer: { variant: "flat" },
 			children: /* @__PURE__ */ b($, {
@@ -618,13 +624,13 @@ var ee = {
 				width: "fit-content",
 				height: d,
 				debugging: y,
-				ssrMode: m,
+				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