baseline-kit 5.0.0 → 5.2.0

package/dist/remix.mjs

@@ -0,0 +1,984 @@
+import { clientEntry as e, ref as t } from "remix/ui";
+import { jsx as n, jsxs as r } from "remix/ui/jsx-runtime";
+//#region packages/core/src/config/defaults.ts
+var i = {
+	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))"
+	}
+}, a = [
+	"baseline",
+	"guide",
+	"spacer",
+	"box",
+	"padder"
+], o = (e) => {
+	let { parentConfig: t, base: n } = e, r = {};
+	for (let n of a) {
+		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 s(e) {
+	let t = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+	return t ? {
+		value: parseFloat(t[1]),
+		unit: t[2]
+	} : null;
+}
+function c(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 l = {
+	parentSize: 0,
+	viewportWidth: 1920,
+	viewportHeight: 1080,
+	rootFontSize: 16,
+	parentFontSize: 16
+}, u = {
+	px: 1,
+	in: 96,
+	cm: 37.8,
+	mm: 3.78,
+	pt: 1.33,
+	pc: 16
+}, d = {
+	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 f(e, t) {
+	if (typeof e == "number") return e;
+	if (typeof e != "string") return null;
+	let n = s(e);
+	if (!n) return null;
+	let { value: r, unit: i } = n;
+	if (i in u) return r * u[i];
+	if (i === "auto") return null;
+	let a = d[i];
+	return a ? r * a({
+		...l,
+		...t
+	}) : null;
+}
+//#endregion
+//#region packages/core/src/utils/math.ts
+function p(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function m(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 h(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 = f(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 : p(s, i.min ?? -Infinity, i.max ?? Infinity);
+}
+function g(e, t, n) {
+	return !e || e[0] === void 0 && e[1] === void 0 ? t : [e[0] === void 0 ? t[0] : h(e[0], n), e[1] === void 0 ? t[1] : h(e[1], n)];
+}
+//#endregion
+//#region packages/core/src/utils/padding.ts
+function _(e) {
+	if ("padding" in e && e.padding != null) return v(e.padding);
+	let t = "block" in e && e.block != null ? y(e.block) : {
+		top: 0,
+		bottom: 0
+	}, n = "inline" in e && e.inline != null ? b(e.inline) : {
+		left: 0,
+		right: 0
+	};
+	return {
+		top: t.top,
+		right: n.right,
+		bottom: t.bottom,
+		left: n.left
+	};
+}
+function v(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 y(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 b(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 x(e, t, n, r) {
+	let i = _({ padding: n }), a = typeof r == "string" ? r : r.mode, o = typeof r == "string" ? "bottom" : r.snapEdge ?? "bottom";
+	if (a === "none") return i;
+	if (a === "height") {
+		let n = e % t;
+		if (n !== 0) {
+			let e = t - n;
+			o === "top" ? i.top += e : i.bottom += e;
+		}
+	}
+	if (a === "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 S(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)$/, C = (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(C), w = {
+	template: "none",
+	columnsCount: 0,
+	calculatedGap: 0,
+	isValid: !1
+};
+function ne(e, t, n) {
+	let r = t.variant ?? "line", i = t.base ?? 8, a = h(t.gap ?? 0, {
+		base: i,
+		context: n
+	});
+	if (!e) return w;
+	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 w;
+			let e = t.columns.map((e) => typeof e == "number" ? `${e}px` : e);
+			return e.some((e) => e === "0" || e === "0px") ? w : {
+				template: e.join(" "),
+				columnsCount: e.length,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		case "fixed": {
+			let e = typeof t.columns == "number" ? t.columns : 0;
+			return e < 1 ? w : {
+				template: `repeat(${e}, ${t.columnWidth ? c(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 = f(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 T = (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 E({ 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 D = (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 O(e) {
+	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: s, maxWidth: l, color: u, template: d, columnsCount: f, calculatedGap: p, isVisible: m } = e, h = D(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": c(a ?? "100%"),
+		"--bkgd-h": c(o ?? "100%"),
+		...S({
+			key: "--bkgd-mw",
+			value: c(l || "none"),
+			defaultStyles: h
+		}),
+		...S({
+			key: "--bkgd-cw",
+			value: c(s || "60px"),
+			defaultStyles: h
+		}),
+		...S({
+			key: "--bkgd-n",
+			value: `${f}`,
+			defaultStyles: h
+		}),
+		...S({
+			key: "--bkgd-b",
+			value: "0",
+			defaultStyles: h
+		}),
+		...S({
+			key: "--bkgd-cl",
+			value: u ?? n.line,
+			defaultStyles: h
+		}),
+		...S({
+			key: "--bkgd-g",
+			value: `${p}px`,
+			defaultStyles: h
+		}),
+		...S({
+			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 k(e) {
+	let { base: t, colors: n, variant: r, width: i, height: a, color: o, containerWidth: s, containerHeight: l, spacing: u, isVisible: d } = e, { top: f, right: p, bottom: h, left: v } = _(u), y = [
+		f,
+		p,
+		h,
+		v
+	].map((e) => e ? `${e}px` : "0").join(" "), b = y === "0 0 0 0" ? void 0 : y, x = m({
+		height: l > 0 ? l : g([void 0, a], [s, 0])[1],
+		top: f,
+		bottom: h,
+		base: t
+	});
+	return {
+		containerStyle: {
+			...i === void 0 ? {} : { "--bkbl-w": c(i) },
+			...a === void 0 ? {} : { "--bkbl-h": c(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 A(e) {
+	let { lineColor: t, width: n, height: r, span: i, colSpan: a, rowSpan: o, isVisible: s } = e, l = {
+		...n === void 0 ? {} : { "--bkbx-w": c(n) },
+		...r === void 0 ? {} : { "--bkbx-h": c(r) },
+		"--bkbx-cl": t
+	}, u = T(i, a, o), d = ["box"];
+	return s && d.push("v"), {
+		boxStyle: l,
+		gridSpanStyle: u,
+		classTokens: d
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/spacer.ts
+function j(e) {
+	let { base: t, colors: n, width: r, height: i, color: a, variant: o, isVisible: s } = e, [l, u] = g([r, i], [0, 0], {
+		base: t,
+		suppressWarnings: !0
+	}), d = {
+		...i === void 0 ? {} : { "--bksp-h": c(u) },
+		...r === void 0 ? {} : { "--bksp-w": c(l) },
+		"--bksp-b": `${t}px`,
+		"--bksp-ct": a ?? n.text,
+		"--bksp-cl": a ?? n.line,
+		"--bksp-cf": a ?? n.flat
+	}, f = ["spr"];
+	return s && f.push(o), {
+		style: d,
+		normWidth: l,
+		normHeight: u,
+		classTokens: f
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/padder.ts
+function re(e) {
+	let { base: t, color: n, width: r, height: i, padding: a, enableSpacers: o, isVisible: s } = e, l = {};
+	if (r !== void 0 && r !== "fit-content" && (l["--bkpd-w"] = c(r)), i !== void 0 && i !== "fit-content" && (l["--bkpd-h"] = c(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 s && o && u.push("v"), {
+		containerStyle: l,
+		classTokens: u
+	};
+}
+//#endregion
+//#region packages/remix/src/Config.ts
+function M(e) {
+	return () => {
+		let t = o({
+			parentConfig: e.props.__baselineConfig ?? e.context.get(N) ?? i,
+			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 F(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 I(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.tsx
+function L(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function R(...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 z(e, t, n) {
+	return e.context.get(t) ?? n;
+}
+function B(e, t) {
+	let n = e ?? t;
+	return {
+		isShown: n === "visible",
+		isNone: n === "none",
+		debugging: n
+	};
+}
+var V = 40, H = /* @__PURE__ */ new WeakSet(), U = [], W = !1;
+function G() {
+	W = !1;
+	let e = U.splice(0, V);
+	for (let t of e) {
+		if (t.signal.aborted) {
+			H.delete(t);
+			continue;
+		}
+		try {
+			t.update().catch(() => void 0).finally(() => H.delete(t));
+		} catch {
+			H.delete(t);
+		}
+	}
+	U.length > 0 && K();
+}
+function K() {
+	W || (W = !0, setTimeout(typeof requestAnimationFrame == "function" ? () => requestAnimationFrame(G) : () => setTimeout(G, 0), 0));
+}
+function q(e) {
+	e.signal.aborted || H.has(e) || (H.add(e), U.push(e), K());
+}
+function J(t, r) {
+	let a = e(t, r);
+	return ((e) => () => {
+		let t = e.context.get(N), r = e.props.__baselineConfig ?? t ?? i;
+		return /* @__PURE__ */ n(a, {
+			...e.props,
+			__baselineConfig: r
+		});
+	});
+}
+function Y(e) {
+	let n = null, r, i = !1, a = 0, o = (e) => {
+		e.aborted || i || a >= 10 || (a += 1, r?.refresh(), requestAnimationFrame(() => o(e)));
+	};
+	return {
+		attach: t((t, s) => {
+			n = t, typeof ResizeObserver < "u" && (r = F(t, (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, n = null;
+			}, { once: !0 });
+		}),
+		getElement: () => n
+	};
+}
+function ie(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 = I(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.tsx
+function ae(e) {
+	let t = {
+		width: 0,
+		height: 0
+	}, r = () => {
+		q(e);
+	}, a = Y((e) => {
+		(e.width !== t.width || e.height !== t.height) && (t = e, r());
+	}), o = ie(e, a.getElement, r);
+	return () => {
+		let r = e.props, s = r.__baselineConfig ?? z(e, N, i), l = r.base ?? s.base, u = r.variant ?? s.baseline.variant, d = B(r.debugging, s.baseline.debugging), f = k({
+			base: l,
+			colors: s.baseline.colors,
+			variant: u,
+			width: r.width,
+			height: r.height,
+			color: r.color,
+			containerWidth: t.width,
+			containerHeight: t.height,
+			spacing: {
+				padding: r.padding,
+				block: r.block,
+				inline: r.inline
+			},
+			isVisible: d.isShown
+		});
+		if (r.ssrMode) return /* @__PURE__ */ n("div", {
+			className: L("bk-bas", "bk-h", "bk-ssr", r.className),
+			"data-testid": "baseline",
+			"aria-hidden": !0,
+			style: R(f.containerStyle, {
+				width: c(r.width ?? "100%"),
+				height: c(r.height ?? "100%")
+			}, r.style)
+		});
+		d.isShown && e.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) }, (e, t) => {
+			let r = p.start + t;
+			return /* @__PURE__ */ n("div", {
+				className: "bk-row",
+				"data-row-index": r,
+				style: f.getRowStyle(r)
+			}, r);
+		}) : [];
+		return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), r.className),
+			"data-testid": "baseline",
+			"aria-hidden": !0,
+			style: R(f.containerStyle, {
+				width: c(r.width ?? "100%"),
+				height: c(r.height ?? "100%")
+			}, r.style),
+			mix: typeof window > "u" || r.ssrMode ? void 0 : a.attach,
+			children: m
+		});
+	};
+}
+var oe = J(`${import.meta.url}#Baseline`, ae);
+//#endregion
+//#region packages/remix/src/Guide.tsx
+function se(e) {
+	let t = {
+		width: 0,
+		height: 0
+	}, a = () => {
+		q(e);
+	}, o = Y((e) => {
+		(e.width !== t.width || e.height !== t.height) && (t = e, a());
+	});
+	return () => {
+		let a = e.props, s = a.__baselineConfig ?? z(e, N, i), c = a.variant ?? s.guide.variant, l = B(a.debugging, s.guide.debugging), u = E({
+			variant: c,
+			base: s.base,
+			gap: a.gap ?? 0,
+			columns: a.columns,
+			columnWidth: a.columnWidth
+		}), d = ne(t.width, u, {
+			viewportWidth: typeof window > "u" ? void 0 : window.innerWidth,
+			viewportHeight: typeof window > "u" ? void 0 : window.innerHeight
+		}), f = O({
+			base: s.base,
+			colors: s.guide.colors,
+			variant: c,
+			align: a.align ?? "center",
+			width: a.width,
+			height: a.height,
+			columnWidth: a.columnWidth,
+			maxWidth: a.maxWidth,
+			color: a.color,
+			template: d.template,
+			columnsCount: d.columnsCount,
+			calculatedGap: d.calculatedGap,
+			isVisible: l.isShown
+		});
+		if (a.ssrMode) return /* @__PURE__ */ n("div", {
+			className: L("bk-gde", "bk-h", "bk-ssr", a.className),
+			"data-testid": "guide",
+			"data-variant": c,
+			"aria-hidden": !0,
+			style: R({
+				width: a.width ?? "100%",
+				height: a.height ?? "100%",
+				maxWidth: a.maxWidth ?? "none"
+			}, a.style),
+			children: a.children
+		});
+		let p = !f.isLineVariant && l.isShown ? Array.from({ length: f.columnsCount }, (e, t) => /* @__PURE__ */ n("div", {
+			className: "bk-col",
+			"data-column-index": t,
+			"data-variant": c
+		}, t)) : null, m = l.isShown ? /* @__PURE__ */ n("div", {
+			className: "bk-cols",
+			"data-variant": c,
+			children: p
+		}) : null;
+		return /* @__PURE__ */ r("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), a.className),
+			"data-testid": "guide",
+			"data-variant": c,
+			"aria-hidden": !0,
+			style: R(f.containerStyle, a.style),
+			mix: typeof window > "u" || a.ssrMode ? void 0 : o.attach,
+			children: [m, a.children]
+		});
+	};
+}
+var ce = J(`${import.meta.url}#Guide`, se);
+//#endregion
+//#region packages/remix/src/Spacer.tsx
+function le(e) {
+	return () => {
+		let t = e.props, a = t.__baselineConfig ?? z(e, N, i), o = t.base ?? a.base, s = t.variant ?? a.spacer.variant, c = B(t.debugging, a.spacer.debugging), l = j({
+			base: o,
+			colors: a.spacer.colors,
+			width: t.width,
+			height: t.height,
+			color: t.color,
+			variant: s,
+			isVisible: c.isShown
+		}), u = c.isShown && t.indicatorNode ? [l.normHeight === 0 ? null : /* @__PURE__ */ n("span", {
+			className: "bk-indicator",
+			"aria-hidden": !0,
+			children: t.indicatorNode(l.normHeight, "height")
+		}, "height"), l.normWidth === 0 ? null : /* @__PURE__ */ n("span", {
+			className: "bk-indicator",
+			"aria-hidden": !0,
+			children: t.indicatorNode(l.normWidth, "width")
+		}, "width")] : null;
+		return /* @__PURE__ */ r("div", {
+			className: L(...l.classTokens.map((e) => `bk-${e}`), t.className),
+			"data-testid": "spacer",
+			"data-variant": s,
+			"data-height": `${l.normHeight}px`,
+			style: R(l.style, t.style),
+			children: [u, t.children]
+		});
+	};
+}
+var X = J(`${import.meta.url}#Spacer`, le), ue = X, Z = { gridColumn: "1 / -1" }, Q = { gridRow: "2 / 3" }, de = {
+	gridRow: "2 / 3",
+	gridColumn: "2 / 3"
+};
+function fe(e) {
+	let t = i.base, r = _({}), a = null, o = Y(({ height: n }) => {
+		e.props.ssrMode || a || n === 0 || (a = x(n, t, r, "height"), q(e));
+	});
+	return () => {
+		let s = e.props, c = s.__baselineConfig ?? z(e, N, i), l = B(s.debugging, c.padder.debugging);
+		t = c.base, r = _({
+			padding: s.padding,
+			block: s.block,
+			inline: s.inline
+		});
+		let u = s.ssrMode ? r : a ?? r, d = typeof window > "u" || s.ssrMode ? void 0 : o.attach, f = re({
+			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 /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
+			"data-testid": "padder",
+			mix: d,
+			style: R(f.containerStyle, s.style),
+			children: s.children
+		});
+		let p = c.spacer.variant, m = (e, t) => /* @__PURE__ */ n(ue, {
+			__baselineConfig: c,
+			width: e === "100%" ? void 0 : e,
+			height: t === "100%" ? void 0 : t,
+			variant: p,
+			debugging: l.debugging,
+			indicatorNode: s.indicatorNode
+		}), h = [
+			u.top >= 0 ? /* @__PURE__ */ n("div", {
+				style: Z,
+				children: m("100%", u.top)
+			}, "top") : null,
+			u.left >= 0 ? /* @__PURE__ */ n("div", {
+				style: Q,
+				children: m(u.left, "100%")
+			}, "left") : null,
+			/* @__PURE__ */ n("div", {
+				className: "bk-pad-content",
+				"data-testid": "padder-content",
+				style: de,
+				children: s.children
+			}, "content"),
+			u.right >= 0 ? /* @__PURE__ */ n("div", {
+				style: Q,
+				children: m(u.right, "100%")
+			}, "right") : null,
+			u.bottom >= 0 ? /* @__PURE__ */ n("div", {
+				style: Z,
+				children: m("100%", u.bottom)
+			}, "bottom") : null
+		];
+		return /* @__PURE__ */ n("div", {
+			className: L(...f.classTokens.map((e) => `bk-${e}`), s.className),
+			"data-testid": "padder",
+			mix: d,
+			style: R(f.containerStyle, s.style),
+			children: h
+		});
+	};
+}
+var $ = J(`${import.meta.url}#Padder`, fe), pe = N;
+function me(e) {
+	let t = i.base, r = "clamp", a = "bottom", o = _({}), s = null, c = () => {
+		q(e);
+	}, l = Y((e) => {
+		r === "none" || s || e.height === 0 || (s = x(e.height, t, o, {
+			mode: r,
+			snapEdge: a
+		}), c());
+	});
+	return () => {
+		let c = e.props, u = c.__baselineConfig ?? z(e, N, i), d = c.snapping ?? "clamp", f = c.snapEdge ?? "bottom", p = B(c.debugging, u.box.debugging), m = _({
+			padding: c.padding,
+			block: c.block,
+			inline: c.inline
+		});
+		t = u.base, r = d, a = f, o = m;
+		let h = d === "none" ? m : s ?? m, g = A({
+			base: u.base,
+			lineColor: u.box.colors.line,
+			width: c.width,
+			height: c.height,
+			span: c.span,
+			colSpan: c.colSpan,
+			rowSpan: c.rowSpan,
+			isVisible: p.isShown
+		}), v = /* @__PURE__ */ n($, {
+			block: [h.top, h.bottom],
+			inline: [h.left, h.right],
+			width: "fit-content",
+			height: c.height,
+			debugging: p.debugging,
+			ssrMode: !0,
+			children: c.children
+		});
+		return /* @__PURE__ */ n("div", {
+			className: L(...g.classTokens.map((e) => `bk-${e}`), c.className),
+			"data-testid": "box",
+			style: R(g.boxStyle, g.gridSpanStyle, c.style),
+			mix: typeof window > "u" || c.ssrMode || d === "none" ? void 0 : l.attach,
+			children: /* @__PURE__ */ n(pe, {
+				__baselineConfig: u,
+				base: 1,
+				spacer: { variant: "flat" },
+				children: v
+			})
+		});
+	};
+}
+var he = J(`${import.meta.url}#Box`, me);
+//#endregion
+export { oe as Baseline, he as Box, N as Config, ce as Guide, $ as Padder, X as Spacer };
+
+//# sourceMappingURL=remix.mjs.map