baseline-kit 5.0.0 → 5.2.0

package/dist/guide.mjs

@@ -8,40 +8,40 @@ var s = {
 		variant: "line",
 		debugging: "hidden",
 		colors: {
-			line: "var(--bk-baseline-color-line-theme)",
-			flat: "var(--bk-baseline-color-flat-theme)"
+			line: "var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15))",
+			flat: "var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2))"
 		}
 	},
 	guide: {
 		variant: "line",
 		debugging: "hidden",
 		colors: {
-			line: "var(--bk-guide-color-line-theme)",
-			pattern: "var(--bk-guide-color-pattern-theme)",
-			auto: "var(--bk-guide-color-auto-theme)",
-			fixed: "var(--bk-guide-color-fixed-theme)"
+			line: "var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15))",
+			pattern: "var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2))",
+			auto: "var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15))",
+			fixed: "var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15))"
 		}
 	},
 	spacer: {
 		variant: "line",
 		debugging: "hidden",
 		colors: {
-			line: "var(--bk-spacer-color-line-theme)",
-			flat: "var(--bk-spacer-color-flat-theme)",
-			text: "var(--bk-spacer-color-text-theme)"
+			line: "var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6))",
+			flat: "var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2))",
+			text: "var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))"
 		}
 	},
 	box: {
 		debugging: "hidden",
 		colors: {
-			line: "var(--bk-box-color-line-theme)",
-			flat: "var(--bk-box-color-flat-theme)",
-			text: "var(--bk-box-color-text-theme)"
+			line: "var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6))",
+			flat: "var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2))",
+			text: "var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9))"
 		}
 	},
 	padder: {
 		debugging: "hidden",
-		color: "var(--bk-padder-color-theme)"
+		color: "var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6))"
 	}
 }, c = [
 	"baseline",
@@ -51,10 +51,16 @@ var s = {
 	"padder"
 ], l = (e) => {
 	let { parentConfig: t, base: n } = e, r = {};
-	for (let n of c) r[n] = {
-		...t[n],
-		...e[n]
-	};
+	for (let n of c) {
+		let i = e[n], a = t[n], o = {
+			...a,
+			...i
+		};
+		i && "colors" in i && i.colors && "colors" in a && (o.colors = {
+			...a.colors,
+			...i.colors
+		}), r[n] = o;
+	}
 	return {
 		base: n ?? t.base,
 		...r
@@ -77,60 +83,60 @@ var s = {
 		"--bkbx-ct": a.colors.text,
 		"--bkpd-c": o.color
 	};
-}, d = e.createContext(s);
-d.displayName = "ConfigContext";
-var f = () => e.use(d);
-function p({ children: t, base: n, baseline: r, guide: i, spacer: o, box: s, padder: c }) {
-	let u = f();
-	return /* @__PURE__ */ a(d, {
-		value: e.useMemo(() => l({
-			parentConfig: u,
-			base: n,
-			baseline: r,
-			guide: i,
-			spacer: o,
-			box: s,
-			padder: c
-		}), [
-			u,
-			n,
-			r,
-			i,
-			o,
-			s,
-			c
-		]),
+}, d = "__baseline_kit_config_context__", f = globalThis, p = f[d] ?? (f[d] = e.createContext(s));
+p.displayName = "ConfigContext";
+var m = () => e.use(p);
+function h({ children: t, base: n, baseline: r, guide: i, spacer: o, box: s, padder: c }) {
+	let u = m(), d = e.useMemo(() => l({
+		parentConfig: u,
+		base: n,
+		baseline: r,
+		guide: i,
+		spacer: o,
+		box: s,
+		padder: c
+	}), [
+		u,
+		n,
+		r,
+		i,
+		o,
+		s,
+		c
+	]);
+	return /* @__PURE__ */ a(p, {
+		value: d,
 		children: t
 	});
 }
 //#endregion
 //#region packages/core/src/utils/parse.ts
-function m(e) {
+function g(e) {
 	let t = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
 	return t ? {
 		value: parseFloat(t[1]),
 		unit: t[2]
 	} : null;
 }
-function h(e, t) {
+function _(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 g = {
+var v = {
 	parentSize: 0,
 	viewportWidth: 1920,
 	viewportHeight: 1080,
 	rootFontSize: 16,
 	parentFontSize: 16
-}, _ = {
+}, y = {
 	px: 1,
 	in: 96,
 	cm: 37.8,
 	mm: 3.78,
 	pt: 1.33,
 	pc: 16
-}, v = {
+}, b = {
 	em: (e) => e.parentFontSize,
 	rem: (e) => e.rootFontSize,
 	vh: (e) => e.viewportHeight / 100,
@@ -139,39 +145,39 @@ var g = {
 	vmax: (e) => Math.max(e.viewportWidth, e.viewportHeight) / 100,
 	"%": (e) => e.parentSize / 100
 };
-function y(e, t) {
+function x(e, t) {
 	if (typeof e == "number") return e;
 	if (typeof e != "string") return null;
-	let n = m(e);
+	let n = g(e);
 	if (!n) return null;
 	let { value: r, unit: i } = n;
-	if (i in _) return r * _[i];
+	if (i in y) return r * y[i];
 	if (i === "auto") return null;
-	let a = v[i];
+	let a = b[i];
 	return a ? r * a({
-		...g,
+		...v,
 		...t
 	}) : null;
 }
 //#endregion
 //#region packages/core/src/utils/math.ts
-function b(e, t, n) {
+function S(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
 //#endregion
 //#region packages/core/src/utils/normalize.ts
-function x(e, t = {}) {
+function C(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 = y(e, a) ?? n), o === null && (o = n), n <= 0) return o;
+	if (typeof e == "number" ? o = e : typeof e == "string" && (o = x(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 : b(s, i.min ?? -Infinity, i.max ?? Infinity);
+	return i === void 0 ? s : S(s, i.min ?? -Infinity, i.max ?? Infinity);
 }
 //#endregion
 //#region packages/core/src/utils/merge.ts
-var S = (...e) => e.filter(Boolean).join(" ").trim();
-function C(e, t) {
+var w = (...e) => e.filter(Boolean).join(" ").trim();
+function T(e, t) {
 	let n = e ?? t;
 	return {
 		isShown: n === "visible",
@@ -180,24 +186,24 @@ function C(e, t) {
 		debugging: n
 	};
 }
-function w(e, t, n) {
+function E(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 T = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, E = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || T.test(e) : !1, D = (e) => Array.isArray(e) && e.length > 0 && e.every(E), O = {
+var D = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, O = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || D.test(e) : !1, k = (e) => Array.isArray(e) && e.length > 0 && e.every(O), A = {
 	template: "none",
 	columnsCount: 0,
 	calculatedGap: 0,
 	isValid: !1
 };
-function k(e, t, n) {
-	let r = t.variant ?? "line", i = t.base ?? 8, a = x(t.gap ?? 0, {
+function j(e, t, n) {
+	let r = t.variant ?? "line", i = t.base ?? 8, a = C(t.gap ?? 0, {
 		base: i,
 		context: n
 	});
-	if (!e) return O;
+	if (!e) return A;
 	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);
@@ -209,9 +215,9 @@ function k(e, t, n) {
 			};
 		}
 		case "pattern": {
-			if (!t.columns || !Array.isArray(t.columns) || !D(t.columns)) return O;
+			if (!t.columns || !Array.isArray(t.columns) || !k(t.columns)) return A;
 			let e = t.columns.map((e) => typeof e == "number" ? `${e}px` : e);
-			return e.some((e) => e === "0" || e === "0px") ? O : {
+			return e.some((e) => e === "0" || e === "0px") ? A : {
 				template: e.join(" "),
 				columnsCount: e.length,
 				calculatedGap: a,
@@ -220,8 +226,8 @@ function k(e, t, n) {
 		}
 		case "fixed": {
 			let e = typeof t.columns == "number" ? t.columns : 0;
-			return e < 1 ? O : {
-				template: `repeat(${e}, ${t.columnWidth ? h(t.columnWidth) : "1fr"})`,
+			return e < 1 ? A : {
+				template: `repeat(${e}, ${t.columnWidth ? _(t.columnWidth) : "1fr"})`,
 				columnsCount: e,
 				calculatedGap: a,
 				isValid: !0
@@ -235,7 +241,7 @@ function k(e, t, n) {
 				calculatedGap: a,
 				isValid: !0
 			};
-			let i = typeof r == "number" ? `${r}px` : r.toString(), o = y(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 = x(i, n) ?? 0, s = o > 0 ? Math.max(1, Math.floor((e + a) / (o + a))) : 1;
 			return {
 				template: `repeat(auto-fill, ${i})`,
 				columnsCount: s,
@@ -256,7 +262,7 @@ function k(e, t, n) {
 }
 //#endregion
 //#region packages/core/src/descriptors/guide.ts
-function A({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
+function M({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 	switch (e) {
 		case "line": return {
 			variant: "line",
@@ -271,18 +277,16 @@ function A({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 				base: t
 			};
 			break;
-		case "fixed":
-			if (r !== void 0) {
-				let e = typeof r == "number" ? r : parseInt(String(r), 10);
-				return {
-					variant: "fixed",
-					columns: isNaN(e) ? 12 : e,
-					columnWidth: i || "60px",
-					gap: n,
-					base: t
-				};
-			}
-			break;
+		case "fixed": if (r !== void 0) {
+			let e = typeof r == "number" ? r : parseInt(String(r), 10);
+			return {
+				variant: "fixed",
+				columns: isNaN(e) ? 12 : e,
+				columnWidth: i || "60px",
+				gap: n,
+				base: t
+			};
+		}
 	}
 	return {
 		variant: "auto",
@@ -291,7 +295,7 @@ function A({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 		base: t
 	};
 }
-var j = (e, t) => ({
+var N = (e, t) => ({
 	"--bkgd-w": "100%",
 	"--bkgd-h": "100%",
 	"--bkgd-mw": "none",
@@ -302,82 +306,76 @@ var j = (e, t) => ({
 	"--bkgd-cl": t,
 	"--bkgd-g": "0"
 });
-function M(e) {
-	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: s, maxWidth: c, color: l, template: u, columnsCount: d, calculatedGap: f, isVisible: p } = e, m = j(t, n.line), g = ["--bkgd-w", "--bkgd-h"], _ = h(a ?? "100%"), v = h(o ?? "100%"), y = {
-		...w({
-			key: "--bkgd-w",
-			value: _,
-			defaultStyles: m,
-			skipDimensions: { fullSize: g }
-		}),
-		...w({
-			key: "--bkgd-h",
-			value: v,
-			defaultStyles: m,
-			skipDimensions: { fullSize: g }
-		}),
-		...w({
+function P(e) {
+	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: s, maxWidth: c, color: l, template: u, columnsCount: d, calculatedGap: f, isVisible: p } = e, m = N(t, n.line), h = {
+		"--bkgd-cl": l ?? n.line,
+		"--bkgd-cp": l ?? n.pattern,
+		"--bkgd-ca": l ?? n.auto,
+		"--bkgd-cf": l ?? n.fixed,
+		"--bkgd-w": _(a ?? "100%"),
+		"--bkgd-h": _(o ?? "100%"),
+		...E({
 			key: "--bkgd-mw",
-			value: h(c || "none"),
+			value: _(c || "none"),
 			defaultStyles: m
 		}),
-		...w({
+		...E({
 			key: "--bkgd-cw",
-			value: h(s || "60px"),
+			value: _(s || "60px"),
 			defaultStyles: m
 		}),
-		...w({
+		...E({
 			key: "--bkgd-n",
 			value: `${d}`,
 			defaultStyles: m
 		}),
-		...w({
+		...E({
 			key: "--bkgd-b",
 			value: "0",
 			defaultStyles: m
 		}),
-		...w({
+		...E({
 			key: "--bkgd-cl",
 			value: l ?? n.line,
 			defaultStyles: m
 		}),
-		...w({
+		...E({
 			key: "--bkgd-g",
 			value: `${f}px`,
 			defaultStyles: m
 		}),
-		...w({
+		...E({
 			key: "--bkgd-j",
 			value: i || "center",
 			defaultStyles: m
 		}),
 		...u && u !== "none" ? { "--bkgd-t": u } : {}
-	}, b = (r && r in n ? n[r] : void 0) ?? n.line, x = r === "line", S = ["gde", p ? "v" : "h"];
-	return x && S.push("line"), x && (y["--bkgd-line-color"] = l ?? n.line, y["--bkgd-line-period"] = `${f + 1}px`), {
-		containerStyle: y,
-		columnColor: b,
+	}, g = l ?? (r && r in n ? n[r] : void 0) ?? n.line, v = r === "line", y = ["gde", p ? "v" : "h"];
+	return v && y.push("line"), v && (h["--bkgd-line-color"] = "var(--bkgd-cl)", h["--bkgd-line-period"] = `${f + 1}px`), {
+		containerStyle: h,
+		columnColor: g,
 		columnsCount: d,
 		calculatedGap: f,
 		template: u,
 		isVisible: p,
-		isLineVariant: x,
-		classTokens: S
+		isLineVariant: v,
+		classTokens: y
 	};
 }
 //#endregion
 //#region packages/react/src/hooks/useConfig.ts
-function N(e) {
-	let t = f();
+function F(e) {
+	let t = m();
 	return n(() => Object.assign({ base: t.base }, t[e]), [t, e]);
 }
 //#endregion
 //#region packages/react/src/hooks/useDebug.ts
-function P(e, t) {
-	return n(() => C(e, t), [e, t]);
+function I(e, t) {
+	return n(() => T(e, t), [e, t]);
 }
 //#endregion
 //#region packages/dom/src/timing.ts
-var F = (e) => {
+var L = (e) => {
 	let t = null, n = null;
 	return [(...r) => {
 		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
@@ -389,7 +387,7 @@ var F = (e) => {
 };
 //#endregion
 //#region packages/dom/src/measure.ts
-function I(e, t) {
+function R(e, t) {
 	let n = {
 		width: 0,
 		height: 0
@@ -401,7 +399,7 @@ function I(e, t) {
 			};
 			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
 		} catch {}
-	}, [i, a] = F(r);
+	}, [i, a] = L(r);
 	r();
 	let o = new ResizeObserver(i);
 	return o.observe(e), {
@@ -413,15 +411,15 @@ function I(e, t) {
 }
 //#endregion
 //#region packages/react/src/hooks/useMeasure.ts
-var L = {
+var z = {
 	width: 0,
 	height: 0
 };
-function R(t) {
-	let [n, r] = e.useState(L), i = e.useRef(null);
+function B(t) {
+	let [n, r] = e.useState(z), i = e.useRef(null);
 	e.useLayoutEffect(() => {
 		if (typeof window > "u" || !t.current) return;
-		let e = I(t.current, (e) => {
+		let e = R(t.current, (e) => {
 			r((t) => t.width === e.width && t.height === e.height ? t : e);
 		});
 		return i.current = e, () => {
@@ -438,7 +436,7 @@ function R(t) {
 }
 //#endregion
 //#region packages/dom/src/viewport.ts
-function z() {
+function V() {
 	return typeof window > "u" ? {} : {
 		viewportWidth: window.innerWidth,
 		viewportHeight: window.innerHeight
@@ -446,13 +444,13 @@ function z() {
 }
 //#endregion
 //#region packages/react/src/hooks/useGuide.ts
-function B(t, n) {
-	let { width: r } = R(t);
-	return e.useMemo(() => k(r, n, z()), [n, r]);
+function H(t, n) {
+	let { width: r } = B(t);
+	return e.useMemo(() => j(r, n, V()), [n, r]);
 }
 //#endregion
 //#region packages/react/src/hooks/useIsClient.ts
-function V() {
+function U() {
 	let [e, n] = r(!1);
 	return t(() => {
 		n(!0);
@@ -460,15 +458,15 @@ function V() {
 }
 //#endregion
 //#region packages/react/src/utils/ssr.tsx
-function H({ children: e, fallback: t = null }) {
-	return V() ? /* @__PURE__ */ a(i, { children: e }) : /* @__PURE__ */ a(i, { children: t });
+function W({ children: e, fallback: t = null }) {
+	return U() ? /* @__PURE__ */ a(i, { children: e }) : /* @__PURE__ */ a(i, { children: t });
 }
 //#endregion
 //#region packages/react/src/utils/merge.ts
-function U(...e) {
+function G(...e) {
 	return Object.assign({}, ...e.filter(Boolean));
 }
-var W = {
+var K = {
 	gde: "gde_4PKz3",
 	v: "v_yAvN0",
 	h: "h_XcWcy",
@@ -476,10 +474,10 @@ var W = {
 	cols: "cols_ibtT4",
 	col: "col_QPSDI",
 	ssr: "ssr_4UN4k"
-}, G = e.memo(function({ className: e, debugging: t, style: n, variant: r, align: i = "center", gap: o, height: s, width: c, columns: l, columnWidth: u, maxWidth: d, color: f, children: p, ssrMode: m = !1, ...h }) {
-	let g = N("guide"), _ = r ?? g.variant, v = typeof o == "number" ? o : 0, { isShown: y } = P(t, g.debugging);
+}, q = e.memo(function({ className: e, debugging: t, style: n, variant: r, align: i = "center", gap: o, height: s, width: c, columns: l, columnWidth: u, maxWidth: d, color: f, children: p, ssrMode: m = !1, ...h }) {
+	let g = F("guide"), _ = r ?? g.variant, v = typeof o == "number" ? o : 0, { isShown: y } = I(t, g.debugging);
 	if (!y) return /* @__PURE__ */ a("div", {
-		className: S(W.gde, W.h, e),
+		className: w(K.gde, K.h, e),
 		style: n,
 		"data-testid": "guide",
 		"data-variant": _,
@@ -488,7 +486,7 @@ var W = {
 		children: p
 	});
 	let b = /* @__PURE__ */ a("div", {
-		className: S(W.gde, W.h, W.ssr, e),
+		className: w(K.gde, K.h, K.ssr, e),
 		style: {
 			width: c ?? "100%",
 			height: s ?? "100%",
@@ -500,9 +498,9 @@ var W = {
 		"aria-hidden": "true",
 		children: p
 	});
-	return m ? b : /* @__PURE__ */ a(H, {
+	return m ? b : /* @__PURE__ */ a(W, {
 		fallback: b,
-		children: /* @__PURE__ */ a(K, {
+		children: /* @__PURE__ */ a(J, {
 			className: e,
 			debugging: t,
 			style: n,
@@ -519,10 +517,10 @@ var W = {
 			children: p
 		})
 	});
-}), K = e.memo(function({ className: t, debugging: n, style: r, variant: i, align: s = "center", gap: c, height: l, width: u, columns: d, columnWidth: f, maxWidth: p, color: m, children: h, ...g }) {
-	let _ = N("guide"), { isShown: v } = P(n, _.debugging), y = e.useRef(null);
-	R(y);
-	let b = i ?? _.variant, x = typeof c == "number" ? c : 0, { template: C, columnsCount: w, calculatedGap: T } = B(y, e.useMemo(() => A({
+}), J = e.memo(function({ className: t, debugging: n, style: r, variant: i, align: s = "center", gap: c, height: l, width: u, columns: d, columnWidth: f, maxWidth: p, color: m, children: h, ...g }) {
+	let _ = F("guide"), { isShown: v } = I(n, _.debugging), y = e.useRef(null);
+	B(y);
+	let b = i ?? _.variant, x = typeof c == "number" ? c : 0, { template: S, columnsCount: C, calculatedGap: T } = H(y, e.useMemo(() => M({
 		variant: b,
 		base: _.base,
 		gap: x,
@@ -534,7 +532,7 @@ var W = {
 		x,
 		d,
 		f
-	])), E = e.useMemo(() => M({
+	])), E = e.useMemo(() => P({
 		base: _.base,
 		colors: _.colors,
 		variant: b,
@@ -544,8 +542,8 @@ var W = {
 		columnWidth: f,
 		maxWidth: p,
 		color: m,
-		template: C,
-		columnsCount: w,
+		template: S,
+		columnsCount: C,
 		calculatedGap: T,
 		isVisible: v
 	}), [
@@ -558,32 +556,31 @@ var W = {
 		f,
 		p,
 		m,
+		S,
 		C,
-		w,
 		T,
 		v
-	]), D = e.useMemo(() => U(E.containerStyle, r), [E.containerStyle, r]);
+	]), D = e.useMemo(() => G(E.containerStyle, r), [E.containerStyle, r]);
 	return /* @__PURE__ */ o("div", {
 		ref: y,
 		"data-testid": "guide",
 		"aria-hidden": "true",
-		className: S(...E.classTokens.map((e) => W[e]), t),
+		className: w(...E.classTokens.map((e) => K[e]), t),
 		"data-variant": i,
 		style: D,
 		...g,
 		children: [v && /* @__PURE__ */ a("div", {
-			className: W.cols,
+			className: K.cols,
 			"data-variant": i,
 			children: !E.isLineVariant && Array.from({ length: E.columnsCount }, (e, t) => /* @__PURE__ */ a("div", {
-				className: W.col,
+				className: K.col,
 				"data-column-index": t,
-				"data-variant": i,
-				style: { backgroundColor: E.columnColor }
+				"data-variant": i
 			}, t))
 		}), h]
 	});
 });
 //#endregion
-export { p as Config, G as Guide, u as createCSSVariables, l as mergeConfig };
+export { h as Config, q as Guide, u as createCSSVariables, l as mergeConfig };
 
 //# sourceMappingURL=guide.mjs.map