baseline-kit 3.0.2 → 5.1.0

package/dist/remix.mjs

@@ -0,0 +1,989 @@
+import { jsx as e } from "remix/ui/jsx-runtime";
+import { clientEntry as t, ref as n } from "remix/ui";
+//#region packages/core/src/config/defaults.ts
+var r = {
+	base: 8,
+	baseline: {
+		variant: "line",
+		debugging: "hidden",
+		colors: {
+			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, 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, 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, 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, hsla(270, 60%, 40%, 0.6))"
+	}
+}, i = [
+	"baseline",
+	"guide",
+	"spacer",
+	"box",
+	"padder"
+], a = (e) => {
+	let { parentConfig: t, base: n } = e, r = {};
+	for (let n of i) {
+		let i = e[n], a = t[n], o = {
+			...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
+	};
+};
+//#endregion
+//#region packages/core/src/utils/parse.ts
+function o(e) {
+	let t = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+	return t ? {
+		value: parseFloat(t[1]),
+		unit: t[2]
+	} : null;
+}
+function s(e, t) {
+	return e === void 0 && t !== void 0 ? `${t}px` : e === "auto" || typeof e == "string" && /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(e) ? String(e) : typeof e == "number" ? `${e}px` : e ?? "";
+}
+//#endregion
+//#region packages/core/src/utils/convert.ts
+var c = {
+	parentSize: 0,
+	viewportWidth: 1920,
+	viewportHeight: 1080,
+	rootFontSize: 16,
+	parentFontSize: 16
+}, l = {
+	px: 1,
+	in: 96,
+	cm: 37.8,
+	mm: 3.78,
+	pt: 1.33,
+	pc: 16
+}, u = {
+	em: (e) => e.parentFontSize,
+	rem: (e) => e.rootFontSize,
+	vh: (e) => e.viewportHeight / 100,
+	vw: (e) => e.viewportWidth / 100,
+	vmin: (e) => Math.min(e.viewportWidth, e.viewportHeight) / 100,
+	vmax: (e) => Math.max(e.viewportWidth, e.viewportHeight) / 100,
+	"%": (e) => e.parentSize / 100
+};
+function d(e, t) {
+	if (typeof e == "number") return e;
+	if (typeof e != "string") return null;
+	let n = o(e);
+	if (!n) return null;
+	let { value: r, unit: i } = n;
+	if (i in l) return r * l[i];
+	if (i === "auto") return null;
+	let a = u[i];
+	return a ? r * a({
+		...c,
+		...t
+	}) : null;
+}
+//#endregion
+//#region packages/core/src/utils/math.ts
+function f(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function p(e) {
+	let { height: t, top: n, bottom: r, base: i } = e, a = (t ?? 0) - (n + r);
+	return Math.max(1, Math.floor(a / i));
+}
+//#endregion
+//#region packages/core/src/utils/normalize.ts
+function m(e, t = {}) {
+	let { base: n = 8, round: r = !0, clamp: i, context: a } = t;
+	if (e === "auto") return n;
+	let o = null;
+	if (typeof e == "number" ? o = e : typeof e == "string" && (o = d(e, a) ?? n), o === null && (o = n), n <= 0) return o;
+	let s = r ? Math.round(o / n) * n : o;
+	return i === void 0 ? s : f(s, i.min ?? -Infinity, i.max ?? Infinity);
+}
+function h(e, t, n) {
+	return !e || e[0] === void 0 && e[1] === void 0 ? t : [e[0] === void 0 ? t[0] : m(e[0], n), e[1] === void 0 ? t[1] : m(e[1], n)];
+}
+//#endregion
+//#region packages/core/src/utils/padding.ts
+function g(e) {
+	if ("padding" in e && e.padding != null) return _(e.padding);
+	let t = "block" in e && e.block != null ? v(e.block) : {
+		top: 0,
+		bottom: 0
+	}, n = "inline" in e && e.inline != null ? y(e.inline) : {
+		left: 0,
+		right: 0
+	};
+	return {
+		top: t.top,
+		right: n.right,
+		bottom: t.bottom,
+		left: n.left
+	};
+}
+function _(e) {
+	if (typeof e == "number") return {
+		top: e,
+		right: e,
+		bottom: e,
+		left: e
+	};
+	if (Array.isArray(e)) {
+		let [t = 0, n = 0, r, i] = e;
+		return {
+			top: t,
+			right: n,
+			bottom: r ?? t,
+			left: i ?? n
+		};
+	}
+	return typeof e == "object" ? {
+		top: e.top ?? 0,
+		right: e.right ?? 0,
+		bottom: e.bottom ?? 0,
+		left: e.left ?? 0
+	} : {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+}
+function v(e) {
+	if (typeof e == "number") return {
+		top: e,
+		bottom: e
+	};
+	if (Array.isArray(e)) {
+		let [t, n] = e;
+		return {
+			top: t ?? 0,
+			bottom: n ?? 0
+		};
+	}
+	return typeof e == "object" ? {
+		top: e.start ?? 0,
+		bottom: e.end ?? 0
+	} : {
+		top: 0,
+		bottom: 0
+	};
+}
+function y(e) {
+	if (typeof e == "number") return {
+		left: e,
+		right: e
+	};
+	if (Array.isArray(e)) {
+		let [t, n] = e;
+		return {
+			left: t ?? 0,
+			right: n ?? 0
+		};
+	}
+	return typeof e == "object" ? {
+		left: e.start ?? 0,
+		right: e.end ?? 0
+	} : {
+		left: 0,
+		right: 0
+	};
+}
+//#endregion
+//#region packages/core/src/utils/snapping.ts
+function b(e, t, n, r) {
+	let i = g({ padding: n });
+	if (r === "none") return i;
+	if (r === "height") {
+		let n = e % t;
+		n !== 0 && (i.bottom += t - n);
+	}
+	if (r === "clamp") {
+		i.top %= t;
+		let n = e % t;
+		n !== 0 && (i.bottom += t - n), i.bottom %= t;
+	}
+	return i;
+}
+//#endregion
+//#region packages/core/src/utils/merge.ts
+function x(e, t, n) {
+	let r = typeof e == "string" ? e : e.key, i = typeof e == "string" ? t : e.value, a = typeof e == "string" ? n : e.defaultStyles, o = typeof e == "object" ? e.skipDimensions : void 0;
+	return o && (o.fitContent?.includes(r) && i === "fit-content" || o.auto?.includes(r) && i === "auto" || o.fullSize?.includes(r) && (i === "100%" || i === "100vh" || i === "100vw")) || i === a[r] ? {} : { [r]: i };
+}
+//#endregion
+//#region packages/core/src/validation/guide.ts
+var ee = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, S = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || ee.test(e) : !1, te = (e) => Array.isArray(e) && e.length > 0 && e.every(S), C = {
+	template: "none",
+	columnsCount: 0,
+	calculatedGap: 0,
+	isValid: !1
+};
+function ne(e, t, n) {
+	let r = t.variant ?? "line", i = t.base ?? 8, a = m(t.gap ?? 0, {
+		base: i,
+		context: n
+	});
+	if (!e) return C;
+	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);
+			return {
+				template: `repeat(${r}, 1px)`,
+				columnsCount: r,
+				calculatedGap: a > 0 ? a - 1 : a,
+				isValid: !0
+			};
+		}
+		case "pattern": {
+			if (!t.columns || !Array.isArray(t.columns) || !te(t.columns)) return C;
+			let e = t.columns.map((e) => typeof e == "number" ? `${e}px` : e);
+			return e.some((e) => e === "0" || e === "0px") ? C : {
+				template: e.join(" "),
+				columnsCount: e.length,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		case "fixed": {
+			let e = typeof t.columns == "number" ? t.columns : 0;
+			return e < 1 ? C : {
+				template: `repeat(${e}, ${t.columnWidth ? s(t.columnWidth) : "1fr"})`,
+				columnsCount: e,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		case "auto": {
+			let r = t.columnWidth ?? "auto";
+			if (r === "auto") return {
+				template: "repeat(auto-fill, minmax(0, 1fr))",
+				columnsCount: 1,
+				calculatedGap: a,
+				isValid: !0
+			};
+			let i = typeof r == "number" ? `${r}px` : r.toString(), o = d(i, n) ?? 0, s = o > 0 ? Math.max(1, Math.floor((e + a) / (o + a))) : 1;
+			return {
+				template: `repeat(auto-fill, ${i})`,
+				columnsCount: s,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		default: {
+			let t = Math.max(1, Math.floor(e / (a + 1)) + 1);
+			return {
+				template: `repeat(${t}, 1px)`,
+				columnsCount: t,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+	}
+}
+var w = (e, t, n) => {
+	let r = {};
+	return e === void 0 ? (t !== void 0 && (r.gridColumn = `span ${t}`), n !== void 0 && (r.gridRow = `span ${n}`)) : (r.gridColumn = `span ${e}`, r.gridRow = `span ${e}`), r;
+};
+//#endregion
+//#region packages/core/src/descriptors/guide.ts
+function T({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
+	switch (e) {
+		case "line": return {
+			variant: "line",
+			gap: n,
+			base: t
+		};
+		case "pattern":
+			if (r && Array.isArray(r)) return {
+				variant: "pattern",
+				columns: r,
+				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",
+		columnWidth: i || "1fr",
+		gap: n,
+		base: t
+	};
+}
+var E = (e, t) => ({
+	"--bkgd-w": "100%",
+	"--bkgd-h": "100%",
+	"--bkgd-mw": "none",
+	"--bkgd-cw": "60px",
+	"--bkgd-gw": "24px",
+	"--bkgd-n": "12",
+	"--bkgd-b": `${e}px`,
+	"--bkgd-cl": t,
+	"--bkgd-g": "0"
+});
+function D(e) {
+	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: c, maxWidth: l, color: u, template: d, columnsCount: f, calculatedGap: p, isVisible: m } = e, h = E(t, n.line), g = {
+		"--bkgd-cl": u ?? n.line,
+		"--bkgd-cp": u ?? n.pattern,
+		"--bkgd-ca": u ?? n.auto,
+		"--bkgd-cf": u ?? n.fixed,
+		"--bkgd-w": s(a ?? "100%"),
+		"--bkgd-h": s(o ?? "100%"),
+		...x({
+			key: "--bkgd-mw",
+			value: s(l || "none"),
+			defaultStyles: h
+		}),
+		...x({
+			key: "--bkgd-cw",
+			value: s(c || "60px"),
+			defaultStyles: h
+		}),
+		...x({
+			key: "--bkgd-n",
+			value: `${f}`,
+			defaultStyles: h
+		}),
+		...x({
+			key: "--bkgd-b",
+			value: "0",
+			defaultStyles: h
+		}),
+		...x({
+			key: "--bkgd-cl",
+			value: u ?? n.line,
+			defaultStyles: h
+		}),
+		...x({
+			key: "--bkgd-g",
+			value: `${p}px`,
+			defaultStyles: h
+		}),
+		...x({
+			key: "--bkgd-j",
+			value: i || "center",
+			defaultStyles: h
+		}),
+		...d && d !== "none" ? { "--bkgd-t": d } : {}
+	}, _ = u ?? (r && r in n ? n[r] : void 0) ?? n.line, v = r === "line", y = ["gde", m ? "v" : "h"];
+	return v && y.push("line"), v && (g["--bkgd-line-color"] = "var(--bkgd-cl)", g["--bkgd-line-period"] = `${p + 1}px`), {
+		containerStyle: g,
+		columnColor: _,
+		columnsCount: f,
+		calculatedGap: p,
+		template: d,
+		isVisible: m,
+		isLineVariant: v,
+		classTokens: y
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/baseline.ts
+function O(e) {
+	let { base: t, colors: n, variant: r, width: i, height: a, color: o, containerWidth: c, containerHeight: l, spacing: u, isVisible: d } = e, { top: f, right: m, bottom: _, left: v } = g(u), y = [
+		f,
+		m,
+		_,
+		v
+	].map((e) => e ? `${e}px` : "0").join(" "), b = y === "0 0 0 0" ? void 0 : y, x = p({
+		height: l > 0 ? l : h([void 0, a], [c, 0])[1],
+		top: f,
+		bottom: _,
+		base: t
+	});
+	return {
+		containerStyle: {
+			...i === void 0 ? {} : { "--bkbl-w": s(i) },
+			...a === void 0 ? {} : { "--bkbl-h": s(a) },
+			"--bkbl-cl": o ?? n.line,
+			"--bkbl-cf": o ?? n.flat,
+			"--bkbl-c": r === "line" ? "var(--bkbl-cl)" : "var(--bkbl-cf)",
+			...b ? { padding: b } : {}
+		},
+		rowCount: x,
+		getRowStyle: (e) => ({
+			"--bkbl-rt": e === 0 ? "0px" : `${e * t}px`,
+			"--bkbl-rh": r === "line" ? "1px" : `${t}px`
+		}),
+		padding: b,
+		isVisible: d,
+		classTokens: ["bas", d ? "v" : "h"]
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/box.ts
+function k(e) {
+	let { lineColor: t, width: n, height: r, span: i, colSpan: a, rowSpan: o, isVisible: c } = e, l = {
+		...n === void 0 ? {} : { "--bkbx-w": s(n) },
+		...r === void 0 ? {} : { "--bkbx-h": s(r) },
+		"--bkbx-cl": t
+	}, u = w(i, a, o), d = ["box"];
+	return c && d.push("v"), {
+		boxStyle: l,
+		gridSpanStyle: u,
+		classTokens: d
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/spacer.ts
+function A(e) {
+	let { base: t, colors: n, width: r, height: i, color: a, variant: o, isVisible: c } = e, [l, u] = h([r, i], [0, 0], {
+		base: t,
+		suppressWarnings: !0
+	}), d = {
+		...i === void 0 ? {} : { "--bksp-h": s(u) },
+		...r === void 0 ? {} : { "--bksp-w": s(l) },
+		"--bksp-b": `${t}px`,
+		"--bksp-ct": a ?? n.text,
+		"--bksp-cl": a ?? n.line,
+		"--bksp-cf": a ?? n.flat
+	}, f = ["spr"];
+	return c && f.push(o), {
+		style: d,
+		normWidth: l,
+		normHeight: u,
+		classTokens: f
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/padder.ts
+function j(e) {
+	let { base: t, color: n, width: r, height: i, padding: a, enableSpacers: o, isVisible: c } = e, l = {};
+	if (r !== void 0 && r !== "fit-content" && (l["--bkpd-w"] = s(r)), i !== void 0 && i !== "fit-content" && (l["--bkpd-h"] = s(i)), l["--bkpd-b"] = `${t}px`, l["--bkpd-c"] = n, !o) {
+		let { top: e, right: t, bottom: n, left: r } = a;
+		(e > 0 || n > 0) && (l.paddingBlock = `${e}px ${n}px`), (r > 0 || t > 0) && (l.paddingInline = `${r}px ${t}px`);
+	}
+	let u = ["pad"];
+	return c && o && u.push("v"), {
+		containerStyle: l,
+		classTokens: u
+	};
+}
+//#endregion
+//#region packages/remix/src/Config.ts
+function M(e) {
+	return () => {
+		let t = a({
+			parentConfig: e.props.__baselineConfig ?? e.context.get(N) ?? r,
+			base: e.props.base,
+			baseline: e.props.baseline,
+			guide: e.props.guide,
+			spacer: e.props.spacer,
+			box: e.props.box,
+			padder: e.props.padder
+		});
+		return e.context.set(t), e.props.children ?? null;
+	};
+}
+var N = M, P = (e) => {
+	let t = null, n = null;
+	return [(...r) => {
+		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
+			e(...n), t = null, n = null;
+		});
+	}, () => {
+		t !== null && (cancelAnimationFrame(t), t = null, n = null);
+	}];
+};
+//#endregion
+//#region packages/dom/src/measure.ts
+function re(e, t) {
+	let n = {
+		width: 0,
+		height: 0
+	}, r = () => {
+		try {
+			let r = e.getBoundingClientRect(), i = {
+				width: Math.round(r.width),
+				height: Math.round(r.height)
+			};
+			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
+		} catch {}
+	}, [i, a] = P(r);
+	r();
+	let o = new ResizeObserver(i);
+	return o.observe(e), {
+		refresh: i,
+		disconnect() {
+			o.disconnect(), a();
+		}
+	};
+}
+//#endregion
+//#region packages/dom/src/virtual.ts
+function ie(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");
+	let o = () => {
+		let t = e.getBoundingClientRect().top + window.scrollY, n = Math.max(0, window.scrollY - t - a), o = n + window.innerHeight + a * 2;
+		return {
+			start: Math.max(0, Math.floor(n / i)),
+			end: Math.min(r, Math.ceil(o / i))
+		};
+	}, s = {
+		start: 0,
+		end: r
+	}, [c, l] = P(() => {
+		let e = o();
+		(e.start !== s.start || e.end !== s.end) && (s = e, n(e));
+	}), u = { passive: !0 };
+	window.addEventListener("scroll", c, u), window.addEventListener("resize", c, u);
+	let d = new IntersectionObserver(c, { threshold: 0 });
+	return d.observe(e), c(), {
+		refresh: c,
+		disconnect() {
+			window.removeEventListener("scroll", c, u), window.removeEventListener("resize", c, u), d.disconnect(), l();
+		}
+	};
+}
+//#endregion
+//#region packages/remix/src/shared.ts
+function F(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function I(...e) {
+	let t = {};
+	for (let n of e) if (n) {
+		if (typeof n == "string") {
+			t.cssText = n;
+			continue;
+		}
+		Object.assign(t, n);
+	}
+	return t;
+}
+function L(e, t, n) {
+	return e.context.get(t) ?? n;
+}
+function R(e, t) {
+	let n = e ?? t;
+	return {
+		isShown: n === "visible",
+		isNone: n === "none",
+		debugging: n
+	};
+}
+var z = 40, B = /* @__PURE__ */ new WeakSet(), V = [], H = !1;
+function U() {
+	H = !1;
+	let e = V.splice(0, z);
+	for (let t of e) {
+		if (t.signal.aborted) {
+			B.delete(t);
+			continue;
+		}
+		try {
+			t.update().catch(() => void 0).finally(() => B.delete(t));
+		} catch {
+			B.delete(t);
+		}
+	}
+	V.length > 0 && W();
+}
+function W() {
+	H || (H = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(U) : () => setTimeout(U, 0), 0));
+}
+function G(e) {
+	e.signal.aborted || B.has(e) || (B.add(e), V.push(e), W());
+}
+function K(n, i) {
+	let a = t(n, i);
+	return ((t) => () => {
+		let n = t.context.get(N), i = t.props.__baselineConfig ?? n ?? r;
+		return e(a, {
+			...t.props,
+			__baselineConfig: i
+		});
+	});
+}
+function q(e) {
+	let t = null, r, i = !1, a = 0, o = (e) => {
+		e.aborted || i || a >= 10 || (a += 1, r?.refresh(), requestAnimationFrame(() => o(e)));
+	};
+	return {
+		attach: n((n, s) => {
+			t = n, typeof ResizeObserver < "u" && (r = re(n, (t) => {
+				i = t.width > 0 || t.height > 0;
+				let n = () => {
+					s.aborted || e(t);
+				};
+				typeof requestAnimationFrame == "function" ? requestAnimationFrame(n) : queueMicrotask(n);
+			}), queueMicrotask(() => {
+				s.aborted || (r?.refresh(), requestAnimationFrame(() => o(s)));
+			})), s.addEventListener("abort", () => {
+				r?.disconnect(), r = void 0, i = !1, a = 0, t = null;
+			}, { once: !0 });
+		}),
+		getElement: () => t
+	};
+}
+function J(e, t, n, r = 160) {
+	let i, a = "", o = 0, s = {
+		start: 0,
+		end: 0
+	}, c = () => {
+		i?.disconnect(), i = void 0, a = "";
+	};
+	return e.signal.addEventListener("abort", c, { once: !0 }), {
+		setConfig: (e, l) => {
+			let u = t();
+			if (!u || typeof IntersectionObserver > "u") return;
+			let d = `${e}:${l}:${r}`;
+			d !== a && (c(), a = d, o = e, s = {
+				start: 0,
+				end: e
+			}, n(s), i = ie(u, {
+				totalItems: e,
+				itemHeight: l,
+				buffer: r
+			}, (e) => {
+				s = e, n(e);
+			}));
+		},
+		getRange(e) {
+			return {
+				start: Math.min(Math.max(s.start, 0), e),
+				end: Math.min(Math.max(e === o && s.end || e, 0), e)
+			};
+		},
+		dispose: c
+	};
+}
+//#endregion
+//#region packages/remix/src/Baseline.ts
+function ae(t) {
+	let n = {
+		width: 0,
+		height: 0
+	}, i = () => {
+		G(t);
+	}, a = q((e) => {
+		(e.width !== n.width || e.height !== n.height) && (n = e, i());
+	}), o = J(t, a.getElement, i);
+	return () => {
+		let i = t.props, c = i.__baselineConfig ?? L(t, N, r), l = i.base ?? c.base, u = i.variant ?? c.baseline.variant, d = R(i.debugging, c.baseline.debugging), f = O({
+			base: l,
+			colors: c.baseline.colors,
+			variant: u,
+			width: i.width,
+			height: i.height,
+			color: i.color,
+			containerWidth: n.width,
+			containerHeight: n.height,
+			spacing: {
+				padding: i.padding,
+				block: i.block,
+				inline: i.inline
+			},
+			isVisible: d.isShown
+		});
+		if (i.ssrMode) return e("div", {
+			className: F("bk-bas", "bk-h", "bk-ssr", i.className),
+			"data-testid": "baseline",
+			"aria-hidden": !0,
+			style: I(f.containerStyle, {
+				width: s(i.width ?? "100%"),
+				height: s(i.height ?? "100%")
+			}, i.style)
+		});
+		d.isShown && t.queueTask(() => o.setConfig(f.rowCount, l));
+		let p = o.getRange(f.rowCount), m = d.isShown ? Array.from({ length: Math.max(0, p.end - p.start) }, (t, n) => {
+			let r = p.start + n;
+			return e("div", {
+				className: "bk-row",
+				key: r,
+				"data-row-index": r,
+				style: f.getRowStyle(r)
+			});
+		}) : [];
+		return e("div", {
+			className: F(...f.classTokens.map((e) => `bk-${e}`), i.className),
+			"data-testid": "baseline",
+			"aria-hidden": !0,
+			style: I(f.containerStyle, {
+				width: s(i.width ?? "100%"),
+				height: s(i.height ?? "100%")
+			}, i.style),
+			mix: typeof window > "u" || i.ssrMode ? void 0 : a.attach,
+			children: m
+		});
+	};
+}
+var oe = K(`${import.meta.url}#Baseline`, ae);
+//#endregion
+//#region packages/remix/src/Guide.ts
+function se(t) {
+	let n = {
+		width: 0,
+		height: 0
+	}, i = () => {
+		G(t);
+	}, a = q((e) => {
+		(e.width !== n.width || e.height !== n.height) && (n = e, i());
+	});
+	return () => {
+		let i = t.props, o = i.__baselineConfig ?? L(t, N, r), s = i.variant ?? o.guide.variant, c = R(i.debugging, o.guide.debugging), l = T({
+			variant: s,
+			base: o.base,
+			gap: i.gap ?? 0,
+			columns: i.columns,
+			columnWidth: i.columnWidth
+		}), u = ne(n.width, l, {
+			viewportWidth: typeof window > "u" ? void 0 : window.innerWidth,
+			viewportHeight: typeof window > "u" ? void 0 : window.innerHeight
+		}), d = D({
+			base: o.base,
+			colors: o.guide.colors,
+			variant: s,
+			align: i.align ?? "center",
+			width: i.width,
+			height: i.height,
+			columnWidth: i.columnWidth,
+			maxWidth: i.maxWidth,
+			color: i.color,
+			template: u.template,
+			columnsCount: u.columnsCount,
+			calculatedGap: u.calculatedGap,
+			isVisible: c.isShown
+		});
+		if (i.ssrMode) return e("div", {
+			className: F("bk-gde", "bk-h", "bk-ssr", i.className),
+			"data-testid": "guide",
+			"data-variant": s,
+			"aria-hidden": !0,
+			style: I({
+				width: i.width ?? "100%",
+				height: i.height ?? "100%",
+				maxWidth: i.maxWidth ?? "none"
+			}, i.style),
+			children: i.children
+		});
+		let f = !d.isLineVariant && c.isShown ? Array.from({ length: d.columnsCount }, (t, n) => e("div", {
+			key: n,
+			className: "bk-col",
+			"data-column-index": n,
+			"data-variant": s
+		})) : null, p = c.isShown ? e("div", {
+			className: "bk-cols",
+			"data-variant": s,
+			children: f
+		}) : null;
+		return e("div", {
+			className: F(...d.classTokens.map((e) => `bk-${e}`), i.className),
+			"data-testid": "guide",
+			"data-variant": s,
+			"aria-hidden": !0,
+			style: I(d.containerStyle, i.style),
+			mix: typeof window > "u" || i.ssrMode ? void 0 : a.attach,
+			children: [p, i.children]
+		});
+	};
+}
+var ce = K(`${import.meta.url}#Guide`, se);
+//#endregion
+//#region packages/remix/src/Spacer.ts
+function le(t) {
+	return () => {
+		let n = t.props, i = n.__baselineConfig ?? L(t, N, r), a = n.base ?? i.base, o = n.variant ?? i.spacer.variant, s = R(n.debugging, i.spacer.debugging), c = A({
+			base: a,
+			colors: i.spacer.colors,
+			width: n.width,
+			height: n.height,
+			color: n.color,
+			variant: o,
+			isVisible: s.isShown
+		}), l = s.isShown && n.indicatorNode ? [c.normHeight === 0 ? null : e("span", {
+			key: "height",
+			className: "bk-indicator",
+			"aria-hidden": !0,
+			children: n.indicatorNode(c.normHeight, "height")
+		}), c.normWidth === 0 ? null : e("span", {
+			key: "width",
+			className: "bk-indicator",
+			"aria-hidden": !0,
+			children: n.indicatorNode(c.normWidth, "width")
+		})] : null;
+		return e("div", {
+			className: F(...c.classTokens.map((e) => `bk-${e}`), n.className),
+			"data-testid": "spacer",
+			"data-variant": o,
+			"data-height": `${c.normHeight}px`,
+			style: I(c.style, n.style),
+			children: [l, n.children]
+		});
+	};
+}
+var Y = K(`${import.meta.url}#Spacer`, le), X = { gridColumn: "1 / -1" }, Z = { gridRow: "2 / 3" }, ue = {
+	gridRow: "2 / 3",
+	gridColumn: "2 / 3"
+};
+function Q(t) {
+	let n = r.base, i = g({}), a = null, o = q(({ height: e }) => {
+		t.props.ssrMode || a || e === 0 || (a = b(e, n, i, "height"), G(t));
+	});
+	return () => {
+		let s = t.props, c = s.__baselineConfig ?? L(t, N, r), l = R(s.debugging, c.padder.debugging);
+		n = c.base, i = g({
+			padding: s.padding,
+			block: s.block,
+			inline: s.inline
+		});
+		let u = s.ssrMode ? i : a ?? i, d = typeof window > "u" || s.ssrMode ? void 0 : o.attach, f = j({
+			base: c.base,
+			color: c.padder.color,
+			width: s.width,
+			height: s.height,
+			padding: u,
+			enableSpacers: !l.isNone,
+			isVisible: l.isShown
+		});
+		if (l.isNone) return e("div", {
+			className: F(...f.classTokens.map((e) => `bk-${e}`), s.className),
+			"data-testid": "padder",
+			mix: d,
+			style: I(f.containerStyle, s.style),
+			children: s.children
+		});
+		let p = c.spacer.variant, m = (t, n) => e(Y, {
+			__baselineConfig: c,
+			width: t === "100%" ? void 0 : t,
+			height: n === "100%" ? void 0 : n,
+			variant: p,
+			debugging: l.debugging,
+			indicatorNode: s.indicatorNode
+		}), h = [
+			u.top >= 0 ? e("div", {
+				key: "top",
+				style: X,
+				children: m("100%", u.top)
+			}) : null,
+			u.left >= 0 ? e("div", {
+				key: "left",
+				style: Z,
+				children: m(u.left, "100%")
+			}) : null,
+			e("div", {
+				key: "content",
+				className: "bk-pad-content",
+				"data-testid": "padder-content",
+				style: ue,
+				children: s.children
+			}),
+			u.right >= 0 ? e("div", {
+				key: "right",
+				style: Z,
+				children: m(u.right, "100%")
+			}) : null,
+			u.bottom >= 0 ? e("div", {
+				key: "bottom",
+				style: X,
+				children: m("100%", u.bottom)
+			}) : null
+		];
+		return e("div", {
+			className: F(...f.classTokens.map((e) => `bk-${e}`), s.className),
+			"data-testid": "padder",
+			mix: d,
+			style: I(f.containerStyle, s.style),
+			children: h
+		});
+	};
+}
+var $ = K(`${import.meta.url}#Padder`, Q);
+//#endregion
+//#region packages/remix/src/Box.ts
+function de(t) {
+	let n = r.base, i = "clamp", a = g({}), o = null, s = () => {
+		G(t);
+	}, c = q((e) => {
+		i === "none" || o || e.height === 0 || (o = b(e.height, n, a, i), s());
+	});
+	return () => {
+		let s = t.props, l = s.__baselineConfig ?? L(t, N, r), u = s.snapping ?? "clamp", d = R(s.debugging, l.box.debugging), f = g({
+			padding: s.padding,
+			block: s.block,
+			inline: s.inline
+		});
+		n = l.base, i = u, a = f;
+		let p = u === "none" ? f : o ?? f, m = k({
+			base: l.base,
+			lineColor: l.box.colors.line,
+			width: s.width,
+			height: s.height,
+			span: s.span,
+			colSpan: s.colSpan,
+			rowSpan: s.rowSpan,
+			isVisible: d.isShown
+		}), h = e($, {
+			block: [p.top, p.bottom],
+			inline: [p.left, p.right],
+			width: "fit-content",
+			height: s.height,
+			debugging: d.debugging,
+			ssrMode: !0,
+			children: s.children
+		});
+		return e("div", {
+			className: F(...m.classTokens.map((e) => `bk-${e}`), s.className),
+			"data-testid": "box",
+			style: I(m.boxStyle, m.gridSpanStyle, s.style),
+			mix: typeof window > "u" || s.ssrMode || u === "none" ? void 0 : c.attach,
+			children: e(N, {
+				__baselineConfig: l,
+				base: 1,
+				spacer: { variant: "flat" },
+				children: h
+			})
+		});
+	};
+}
+var fe = K(`${import.meta.url}#Box`, de);
+//#endregion
+export { oe as Baseline, fe as Box, N as Config, ce as Guide, $ as Padder, Y as Spacer };
+
+//# sourceMappingURL=remix.mjs.map