baseline-kit 3.0.2 → 5.1.0

package/dist/index.mjs

@@ -1,1763 +1,636 @@
-import { jsx as y, Fragment as K, jsxs as Z } from "react/jsx-runtime";
-import * as l from "react";
-import { useState as mt, useEffect as St, useMemo as Q, useCallback as ot, useLayoutEffect as ht } from "react";
-const Ct = {
-  /** Color for single-line guides */
-  line: "var(--bk-guide-color-line-theme)",
-  /** Color for pattern-based guides */
-  pattern: "var(--bk-guide-color-pattern-theme)",
-  /** Color for auto-calculated guides */
-  auto: "var(--bk-guide-color-auto-theme)",
-  /** Color for fixed-column guides */
-  fixed: "var(--bk-guide-color-fixed-theme)"
-}, Mt = {
-  /** Color for line variant */
-  line: "var(--bk-baseline-color-line-theme)",
-  /** Color for flat/block variant */
-  flat: "var(--bk-baseline-color-flat-theme)"
-}, $t = {
-  /** Color for line-style spacers */
-  line: "var(--bk-spacer-color-line-theme)",
-  /** Color for flat/block spacers */
-  flat: "var(--bk-spacer-color-flat-theme)",
-  /** Color for measurement indicators */
-  text: "var(--bk-spacer-color-text-theme)"
-}, Rt = {
-  /** Border color for debug outline */
-  line: "var(--bk-box-color-line-theme)",
-  /** Background color for debug mode */
-  flat: "var(--bk-box-color-flat-theme)",
-  /** Color for measurement indicators */
-  text: "var(--bk-box-color-text-theme)"
-}, Et = {
-  /** Border color for debug outline */
-  line: "var(--bk-stack-color-line-theme)",
-  /** Background color for debug mode */
-  flat: "var(--bk-stack-color-flat-theme)",
-  /** Color for measurement indicators */
-  text: "var(--bk-stack-color-text-theme)"
-}, Vt = {
-  /** Border color for debug outline */
-  line: "var(--bk-layout-color-line-theme)",
-  /** Background color for debug mode */
-  flat: "var(--bk-layout-color-flat-theme)",
-  /** Color for measurement indicators */
-  text: "var(--bk-layout-color-text-theme)"
-}, Gt = "var(--bk-padder-color-theme)", Ot = {
-  /** Base unit for spacing calculations (in pixels) */
-  base: 8,
-  /** Baseline grid configuration */
-  baseline: {
-    variant: "line",
-    debugging: "hidden",
-    colors: Mt
-  },
-  /** Guide overlay configuration */
-  guide: {
-    variant: "line",
-    debugging: "hidden",
-    colors: Ct
-  },
-  /** Spacer component configuration */
-  spacer: {
-    variant: "line",
-    debugging: "hidden",
-    colors: $t
-  },
-  /** Box component configuration */
-  box: {
-    debugging: "hidden",
-    colors: Rt
-  },
-  /** Stack/Flex component configuration */
-  stack: {
-    debugging: "hidden",
-    colors: Et
-  },
-  /** Layout component configuration */
-  layout: {
-    debugging: "hidden",
-    colors: Vt
-  },
-  /** Padder component configuration */
-  padder: {
-    debugging: "hidden",
-    color: Gt
-  }
-}, rt = l.createContext(Ot);
-rt.displayName = "ConfigContext";
-const gt = () => l.use(rt), Dt = (t) => {
-  const {
-    parentConfig: e,
-    base: n,
-    baseline: s,
-    guide: o,
-    spacer: r,
-    box: i,
-    stack: a,
-    layout: c,
-    padder: d
-  } = t;
-  return {
-    base: n ?? e.base,
-    baseline: { ...e.baseline, ...s },
-    guide: { ...e.guide, ...o },
-    spacer: { ...e.spacer, ...r },
-    box: { ...e.box, ...i },
-    stack: { ...e.stack, ...a },
-    layout: { ...e.layout, ...c },
-    padder: { ...e.padder, ...d }
-  };
-};
-function it({
-  children: t,
-  base: e,
-  stack: n,
-  baseline: s,
-  guide: o,
-  layout: r,
-  spacer: i,
-  box: a,
-  padder: c
-}) {
-  const d = gt(), f = l.useMemo(() => Dt({
-    parentConfig: d,
-    base: e,
-    baseline: s,
-    guide: o,
-    spacer: i,
-    box: a,
-    stack: n,
-    layout: r,
-    padder: c
-  }), [d, e, s, o, i, a, n, r, c]);
-  return /* @__PURE__ */ y(rt, { value: f, children: t });
-}
-function _t(t) {
-  const e = t.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
-  if (!e) return null;
-  const n = parseFloat(e[1]), s = e[2];
-  return { value: n, unit: s };
-}
-function O(t, e) {
-  return t === void 0 && e !== void 0 ? `${e}px` : t === "auto" || typeof t == "string" && /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(t) ? String(t) : typeof t == "number" ? `${t}px` : t ?? "";
-}
-const At = {
-  parentSize: 0,
-  viewportWidth: typeof window < "u" ? window.innerWidth : 1920,
-  viewportHeight: typeof window < "u" ? window.innerHeight : 1080,
-  rootFontSize: 16,
-  parentFontSize: 16
-}, lt = {
-  px: 1,
-  in: 96,
-  // 1in = 96px
-  cm: 37.8,
-  // 1cm = 37.8px
-  mm: 3.78,
-  // 1mm = 3.78px
-  pt: 1.33,
-  // 1pt = 1.33px
-  pc: 16
-  // 1pc = 16px
-}, It = [
-  "em",
-  "rem",
-  "vh",
-  "vw",
-  "vmin",
-  "vmax",
-  "%"
-];
-function pt(t, e) {
-  if (typeof t == "number") return t;
-  if (typeof t != "string") return null;
-  const n = _t(t);
-  if (!n) return null;
-  const { value: s, unit: o } = n;
-  if (o in lt)
-    return s * lt[o];
-  if (o === "auto") return null;
-  if (It.includes(o)) {
-    const r = { ...At, ...e };
-    switch (o) {
-      case "em":
-        return s * r.parentFontSize;
-      case "rem":
-        return s * r.rootFontSize;
-      case "vh":
-        return s / 100 * r.viewportHeight;
-      case "vw":
-        return s / 100 * r.viewportWidth;
-      case "vmin":
-        return s / 100 * Math.min(r.viewportWidth, r.viewportHeight);
-      case "vmax":
-        return s / 100 * Math.max(r.viewportWidth, r.viewportHeight);
-      case "%":
-        return s / 100 * r.parentSize;
-      default:
-        return null;
-    }
-  }
-  return null;
-}
-function Lt(t, e, n) {
-  return Math.min(Math.max(t, e), n);
-}
-function Nt(t) {
-  const { height: e, top: n, bottom: s, base: o } = t, r = (e ?? 0) - (n + s);
-  return Math.max(1, Math.floor(r / o));
-}
-function st(t, e = {}) {
-  const {
-    base: n = 8,
-    round: s = !0,
-    clamp: o,
-    suppressWarnings: r = !1
-  } = e;
-  if (t === "auto") return n;
-  let i = null;
-  if (typeof t == "number")
-    i = t;
-  else if (typeof t == "string") {
-    const d = pt(t);
-    d === null ? (r || console.error(
-      `Failed to convert "${t}" to pixels. Falling back to base ${n}.`
-    ), i = n) : i = d;
-  }
-  i === null && (i = n);
-  const a = s ? Math.round(i / n) * n : i, c = o !== void 0 ? Lt(
-    a,
-    o.min ?? -1 / 0,
-    o.max ?? 1 / 0
-  ) : a;
-  return !r && c !== i && console.warn(`Normalized ${i} to ${c} to match base ${n}px.`), c;
-}
-function kt(t, e, n) {
-  if (!t || t[0] === void 0 && t[1] === void 0)
-    return e;
-  const s = t[0] !== void 0 ? st(t[0], n) : e[0], o = t[1] !== void 0 ? st(t[1], n) : e[1];
-  return [s, o];
+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 = "__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
+	});
 }
-function Y(t) {
-  if ("padding" in t && t.padding != null)
-    return Bt(t.padding);
-  const e = "block" in t && t.block != null ? Wt(t.block) : { top: 0, bottom: 0 }, n = "inline" in t && t.inline != null ? zt(t.inline) : { left: 0, right: 0 };
-  return {
-    top: e.top,
-    right: n.right,
-    bottom: e.bottom,
-    left: n.left
-  };
-}
-function Bt(t) {
-  if (typeof t == "number")
-    return { top: t, right: t, bottom: t, left: t };
-  if (Array.isArray(t)) {
-    if (t.length === 2) {
-      const [e, n] = t;
-      return { top: e, right: n, bottom: e, left: n };
-    }
-    if (t.length >= 4) {
-      const [e, n, s, o] = t;
-      return {
-        top: e ?? 0,
-        right: n ?? 0,
-        bottom: s ?? 0,
-        left: o ?? 0
-      };
-    }
-  }
-  if (typeof t == "object" && !Array.isArray(t)) {
-    const e = t.top ?? 0, n = t.bottom ?? 0, s = t.left ?? 0, o = t.right ?? 0;
-    return { top: e, right: o, bottom: n, left: s };
-  }
-  return { top: 0, right: 0, bottom: 0, left: 0 };
-}
-function Wt(t) {
-  if (typeof t == "number")
-    return { top: t, bottom: t };
-  if (Array.isArray(t)) {
-    const [e, n] = t;
-    return {
-      top: e ?? 0,
-      bottom: n ?? 0
-    };
-  }
-  return typeof t == "object" ? {
-    top: t.start ?? 0,
-    bottom: t.end ?? 0
-  } : { top: 0, bottom: 0 };
-}
-function zt(t) {
-  if (typeof t == "number")
-    return { left: t, right: t };
-  if (Array.isArray(t)) {
-    const [e, n] = t;
-    return {
-      left: e ?? 0,
-      right: n ?? 0
-    };
-  }
-  return typeof t == "object" ? {
-    left: t.start ?? 0,
-    right: t.end ?? 0
-  } : { left: 0, right: 0 };
-}
-function Ht(t, e, n, s) {
-  const o = Y({ padding: n });
-  if (s === "none")
-    return o;
-  if (s === "height") {
-    const r = t % e;
-    r !== 0 && (o.bottom += e - r);
-  }
-  if (s === "clamp") {
-    o.top = o.top % e;
-    const r = t % e;
-    r !== 0 && (o.bottom += e - r), o.bottom = o.bottom % e;
-  }
-  return o;
+//#endregion
+//#region packages/dom/src/timing.ts
+var D = (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 O(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] = D(r);
+	r();
+	let o = new ResizeObserver(i);
+	return o.observe(e), {
+		refresh: i,
+		disconnect() {
+			o.disconnect(), a();
+		}
+	};
 }
-const Tt = (t, e, n) => {
-  const s = {};
-  return t !== void 0 ? (s.gridColumn = `span ${t}`, s.gridRow = `span ${t}`) : (e !== void 0 && (s.gridColumn = `span ${e}`), n !== void 0 && (s.gridRow = `span ${n}`)), s;
-}, z = (...t) => t.filter(Boolean).join(" ").trim(), q = (...t) => Object.assign(
-  {},
-  ...t.filter((e) => e !== void 0)
-);
-function Ft(t, e) {
-  if (t)
-    if (typeof t == "function")
-      t(e);
-    else
-      try {
-        Object.assign(t, { current: e });
-      } catch (n) {
-        console.error("Error assigning ref:", n);
-      }
+//#endregion
+//#region packages/react/src/hooks/useMeasure.ts
+var k = {
+	width: 0,
+	height: 0
+};
+function A(e) {
+	let [t, n] = p.useState(k), r = p.useRef(null);
+	p.useLayoutEffect(() => {
+		if (typeof window > "u" || !e.current) return;
+		let t = O(e.current, (e) => {
+			n((t) => t.width === e.width && t.height === e.height ? t : e);
+		});
+		return r.current = t, () => {
+			t.disconnect(), r.current = null;
+		};
+	}, [e]);
+	let i = p.useCallback(() => {
+		r.current?.refresh();
+	}, []);
+	return {
+		...t,
+		refresh: i
+	};
 }
-function yt(...t) {
-  return (e) => {
-    t.forEach((n) => {
-      Ft(n, e);
-    });
-  };
+//#endregion
+//#region packages/dom/src/virtual.ts
+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");
+	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] = D(() => {
+		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();
+		}
+	};
 }
-function k(t, e, n) {
-  var a, c, d;
-  const s = typeof t == "string" ? t : t.key, o = typeof t == "string" ? e : t.value, r = typeof t == "string" ? n : t.defaultStyles, i = typeof t == "object" ? t.skipDimensions : void 0;
-  if (i) {
-    if ((a = i.fitContent) != null && a.includes(s) && o === "fit-content")
-      return {};
-    if ((c = i.auto) != null && c.includes(s) && o === "auto")
-      return {};
-    if ((d = i.fullSize) != null && d.includes(s) && (o === "100%" || o === "100vh" || o === "100vw"))
-      return {};
-  }
-  return o !== r[s] ? { [s]: o } : {};
+//#endregion
+//#region packages/react/src/hooks/useVirtual.ts
+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
+	}), s = m((e) => {
+		o((t) => t.start === e.start && t.end === e.end ? t : e);
+	}, []);
+	return g(() => {
+		if (!n.current) return;
+		o((t) => t.start === 0 && t.end === e ? t : {
+			start: 0,
+			end: e
+		});
+		let r = j(n.current, {
+			totalItems: e,
+			itemHeight: t,
+			buffer: i
+		}, s);
+		return () => r.disconnect();
+	}, [
+		n,
+		e,
+		t,
+		i,
+		s
+	]), a;
 }
-const vt = (t) => {
-  let e = null, n = null;
-  return (...o) => {
-    n = o, e !== null && cancelAnimationFrame(e), e = requestAnimationFrame(() => {
-      t(...n), e = null, n = null;
-    });
-  };
-};
-function jt() {
-  const [t, e] = mt(!1);
-  return St(() => {
-    e(!0);
-  }, []), t;
+//#endregion
+//#region packages/react/src/hooks/useBaseline.ts
+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 } = A(e), s = p.useRef(null);
+	return p.useMemo(() => {
+		let e = r({ padding: i }), c = a % t === 0;
+		if (n === "none") return {
+			padding: e,
+			isAligned: c,
+			height: a
+		};
+		if (s.current) return {
+			padding: s.current,
+			isAligned: c,
+			height: a
+		};
+		if (a === 0) return {
+			padding: e,
+			isAligned: c,
+			height: a
+		};
+		let l = o(a, t, e, n);
+		return s.current = l, {
+			padding: l,
+			isAligned: c,
+			height: a
+		};
+	}, [
+		t,
+		n,
+		i,
+		a
+	]);
 }
-const xt = typeof window > "u";
-function Be(t, e) {
-  if (xt)
-    return e;
-  try {
-    return t();
-  } catch {
-    return e;
-  }
+//#endregion
+//#region packages/dom/src/viewport.ts
+function P() {
+	return typeof window > "u" ? {} : {
+		viewportWidth: window.innerWidth,
+		viewportHeight: window.innerHeight
+	};
 }
-function J(t, e, n) {
-  return !t || xt ? e : n;
+//#endregion
+//#region packages/react/src/hooks/useGuide.ts
+function F(e, t) {
+	let { width: n } = A(e);
+	return p.useMemo(() => d(n, t, P()), [t, n]);
 }
-function wt({ children: t, fallback: e = null }) {
-  return jt() ? /* @__PURE__ */ y(K, { children: t }) : /* @__PURE__ */ y(K, { children: e });
+//#endregion
+//#region packages/react/src/hooks/useConfig.ts
+function I(e) {
+	let t = T();
+	return _(() => Object.assign({ base: t.base }, t[e]), [t, e]);
 }
-function P(t) {
-  const [e, n] = l.useState({ width: 0, height: 0 }), s = l.useCallback(() => {
-    if (t.current)
-      try {
-        const r = t.current.getBoundingClientRect(), i = {
-          width: r ? Math.round(r.width) : 0,
-          height: r ? Math.round(r.height) : 0
-        };
-        n(
-          (a) => a.width === i.width && a.height === i.height ? a : i
-        );
-      } catch {
-        n({ width: 0, height: 0 });
-      }
-  }, [t]), o = l.useMemo(() => vt(s), [s]);
-  return l.useLayoutEffect(() => {
-    typeof window > "u" || s();
-  }, [s]), l.useLayoutEffect(() => {
-    if (typeof window > "u" || !t.current) return;
-    const r = new ResizeObserver(() => {
-      o();
-    });
-    return r.observe(t.current), () => {
-      r.disconnect();
-    };
-  }, [t, o]), { ...e, refresh: o };
+//#endregion
+//#region packages/react/src/hooks/useDebug.ts
+function L(e, t) {
+	return _(() => l(e, t), [e, t]);
 }
-function Ut({
-  totalLines: t,
-  lineHeight: e,
-  containerRef: n,
-  buffer: s = 0
-}) {
-  const o = Q(
-    () => typeof s == "number" ? s : parseInt(s, 10) || 0,
-    [s]
-  ), r = ot(() => {
-    const f = n.current;
-    if (!f) return { start: 0, end: t };
-    if (f.closest(".block"))
-      return { start: 0, end: t };
-    const M = f.getBoundingClientRect().top + window.scrollY, v = Math.max(0, window.scrollY - M - o), b = v + window.innerHeight + o * 2, w = Math.max(0, Math.floor(v / e)), g = Math.min(t, Math.ceil(b / e));
-    return { start: w, end: g };
-  }, [t, e, n, o]), [i, a] = mt(r);
-  qt(["scroll", "resize"], () => {
-    d();
-  });
-  const c = ot(() => {
-    a((f) => {
-      const u = r();
-      return f.start !== u.start || f.end !== u.end ? u : f;
-    });
-  }, [r]), d = Q(
-    () => vt(c),
-    [c]
-  );
-  return ht(() => {
-    const f = n.current;
-    if (!f) return;
-    const u = new IntersectionObserver(d, {
-      threshold: 0
-    });
-    return u.observe(f), d(), () => {
-      u.disconnect();
-    };
-  }, [n, r, d]), i;
+//#endregion
+//#region packages/react/src/hooks/useIsClient.ts
+function R() {
+	let [e, t] = v(!1);
+	return h(() => {
+		t(!0);
+	}, []), e;
 }
-function qt(t, e) {
-  const n = ot(e, [e]);
-  ht(() => {
-    const s = () => n();
-    return t.forEach((o) => window.addEventListener(o, s)), () => t.forEach((o) => window.removeEventListener(o, s));
-  }, [t, n]);
+//#endregion
+//#region packages/react/src/utils/ssr.tsx
+function z({ children: e, fallback: t = null }) {
+	return R() ? /* @__PURE__ */ b(y, { children: e }) : /* @__PURE__ */ b(y, { children: t });
 }
-function tt(t, {
-  base: e = 8,
-  snapping: n = "none",
-  spacing: s = {},
-  warnOnMisalignment: o = !1
-} = {}) {
-  if (e < 1)
-    throw new Error("Base must be >= 1 for baseline alignment.");
-  const { height: r } = P(t), i = l.useRef(!1), a = l.useRef(!1);
-  return l.useMemo(() => {
-    const c = Y({ padding: s }), d = r % e === 0;
-    if (!d && o && process.env.NODE_ENV === "development" && (a.current || (console.warn(
-      `[useBaseline] Element height (${r}px) is not aligned with base (${e}px).`
-    ), a.current = !0)), n === "none")
-      return { padding: c, isAligned: d, height: r };
-    if (i.current)
-      return { padding: c, isAligned: d, height: r };
-    const f = Ht(
-      r,
-      e,
-      c,
-      n
-    );
-    return i.current = !0, { padding: f, isAligned: d, height: r };
-  }, [e, n, s, o, r]);
+//#endregion
+//#region packages/react/src/utils/merge.ts
+function B(...e) {
+	return Object.assign({}, ...e.filter(Boolean));
 }
-const Xt = "spr_zbcF6", Yt = "line_qHW69", Zt = "flat_gqixr", ct = {
-  spr: Xt,
-  line: Yt,
-  flat: Zt
-}, Kt = (t, e, n, s) => ({
-  "--bksw": "100%",
-  "--bksh": "100%",
-  "--bksb": `${t}px`,
-  "--bksct": e,
-  "--bkscf": n,
-  "--bkscl": s
-}), Jt = (t, e, n, s) => {
-  if (!t || !e) return null;
-  const o = typeof n == "number" ? n : 0, r = typeof s == "number" ? s : 0;
-  return /* @__PURE__ */ Z(K, { children: [
-    r !== 0 && /* @__PURE__ */ y("span", { children: e(r, "height") }, "height"),
-    o !== 0 && /* @__PURE__ */ y("span", { children: e(o, "width") }, "width")
-  ] });
-}, Qt = l.memo(function({
-  height: e,
-  width: n,
-  indicatorNode: s,
-  debugging: o,
-  variant: r,
-  base: i,
-  color: a,
-  className: c,
-  style: d,
-  children: f,
-  ssrMode: u = !1,
-  ...M
-}) {
-  const v = l.useRef(null), b = T("spacer"), { isShown: w } = j(o, b.debugging), g = r ?? b.variant, h = i ?? b.base, [D, S] = l.useState(!1);
-  l.useEffect(() => {
-    S(!0);
-  }, []);
-  const [x, $] = l.useMemo(() => kt([n, e], [0, 0], {
-    base: h,
-    suppressWarnings: !0
-  }), [n, e, h]), I = J(
-    D && !u,
-    !1,
-    // Don't show measurements during SSR
-    w && s !== void 0
-  ), m = l.useMemo(() => I ? Jt(w, s, x, $) : null, [I, w, s, x, $]), G = l.useMemo(
-    () => Kt(
-      h,
-      b.colors.text,
-      b.colors.flat,
-      b.colors.line
-    ),
-    [h, b.colors]
-  ), A = l.useMemo(() => {
-    const p = O($ || "100%"), B = O(x || "100%"), _ = `${h}px`, V = ["--bksw", "--bksh"], L = {
-      ...k({
-        key: "--bksh",
-        value: p,
-        defaultStyles: G,
-        skipDimensions: { fullSize: V }
-      }),
-      ...k({
-        key: "--bksw",
-        value: B,
-        defaultStyles: G,
-        skipDimensions: { fullSize: V }
-      }),
-      // Explicitly set --bksb to ensure it is always applied
-      "--bksb": _,
-      ...k({
-        key: "--bksct",
-        value: a ?? b.colors.text,
-        defaultStyles: G
-      }),
-      ...k({
-        key: "--bkscl",
-        value: a ?? b.colors.line,
-        defaultStyles: G
-      }),
-      ...k({
-        key: "--bkscf",
-        value: a ?? b.colors.flat,
-        defaultStyles: G
-      })
-    };
-    return q(L, d);
-  }, [
-    x,
-    $,
-    a,
-    h,
-    b.colors,
-    G,
-    d
-  ]);
-  return /* @__PURE__ */ Z(
-    "div",
-    {
-      ref: v,
-      "data-testid": "spacer",
-      className: z(
-        ct.spr,
-        w && ct[g],
-        c
-      ),
-      "data-variant": g,
-      "data-height": typeof $ == "number" ? `${$}px` : $,
-      style: A,
-      ...M,
-      children: [
-        m,
-        f
-      ]
-    }
-  );
-}), Pt = "pad_w2-sL", te = "v_lhGBy", nt = {
-  pad: Pt,
-  v: te
-}, ee = (t, e, n, s) => {
-  const o = {};
-  return t !== "fit-content" && (o["--bkpw"] = O(t || "fit-content")), e !== "fit-content" && (o["--bkph"] = O(e || "fit-content")), o["--bkpb"] = `${n}px`, o["--bkpc"] = s, o;
-}, ne = (t, e) => {
-  const { top: n, right: s, bottom: o, left: r } = e, i = {};
-  return t || ((n > 0 || o > 0) && (i.paddingBlock = `${n}px ${o}px`), (r > 0 || s > 0) && (i.paddingInline = `${r}px ${s}px`)), i;
-}, oe = (t, e, n) => {
-  const s = t || "line", o = e || "none", r = (i, a) => /* @__PURE__ */ y(
-    Qt,
-    {
-      variant: s,
-      debugging: a === 0 || i === 0 ? "none" : o,
-      indicatorNode: n,
-      height: a !== "100%" ? a : void 0,
-      width: i !== "100%" ? i : void 0
-    }
-  );
-  return r.displayName = "PadderSpacer", r;
-}, at = l.memo(
-  l.forwardRef(function({
-    children: e,
-    className: n,
-    debugging: s,
-    height: o,
-    indicatorNode: r,
-    style: i,
-    width: a,
-    ssrMode: c = !1,
-    ...d
-  }, f) {
-    const u = T("padder"), { variant: M } = T("spacer"), v = l.useMemo(
-      () => Y(d),
-      [d]
-    ), { isShown: b, isNone: w, debugging: g } = j(
-      s,
-      u.debugging
-    ), h = !w, [D, S] = l.useState(!1);
-    l.useEffect(() => {
-      S(!0);
-    }, []);
-    const x = l.useRef(null), $ = tt(x, {
-      base: u.base,
-      snapping: "height",
-      spacing: v,
-      warnOnMisalignment: !w
-    }), I = {
-      padding: {
-        top: v.top || 0,
-        right: v.right || 0,
-        bottom: v.bottom || 0,
-        left: v.left || 0
-      }
-    }, { padding: m } = J(
-      D && !c,
-      I,
-      $
-    ), G = yt(f, x), A = l.useMemo(() => {
-      const B = ee(
-        a,
-        o,
-        u.base,
-        u.color
-      ), _ = ne(h, {
-        top: m.top,
-        right: m.right,
-        bottom: m.bottom,
-        left: m.left
-      });
-      return q(
-        { ...B, ..._ },
-        i
-      );
-    }, [
-      a,
-      o,
-      u.base,
-      u.color,
-      h,
-      m.top,
-      m.right,
-      m.bottom,
-      m.left,
-      i
-    ]), p = l.useMemo(
-      () => oe(M, g, r),
-      [M, g, r]
-    );
-    return h ? /* @__PURE__ */ Z(
-      "div",
-      {
-        ref: G,
-        "data-testid": "padder",
-        className: z(nt.pad, b && nt.v, n),
-        style: A,
-        children: [
-          /* @__PURE__ */ Z(K, { children: [
-            m.top >= 0 && /* @__PURE__ */ y("div", { style: { gridColumn: "1 / -1" }, children: p("100%", m.top) }),
-            m.left >= 0 && /* @__PURE__ */ y("div", { style: { gridRow: "2 / 3" }, children: p(m.left, "100%") })
-          ] }),
-          /* @__PURE__ */ y("div", { style: { gridRow: "2 / 3", gridColumn: "2 / 3" }, children: e }),
-          /* @__PURE__ */ Z(K, { children: [
-            m.right >= 0 && /* @__PURE__ */ y("div", { style: { gridRow: "2 / 3" }, children: p(m.right, "100%") }),
-            m.bottom >= 0 && /* @__PURE__ */ y("div", { style: { gridColumn: "1 / -1" }, children: p("100%", m.bottom) })
-          ] })
-        ]
-      }
-    ) : /* @__PURE__ */ y(
-      "div",
-      {
-        ref: G,
-        "data-testid": "padder",
-        className: z(nt.pad, n),
-        style: A,
-        children: e
-      }
-    );
-  })
-), se = "lay_5cMu5", re = "v_dprVE", ut = {
-  lay: se,
-  v: re
-}, ie = (t) => ({
-  "--bklw": "auto",
-  "--bklh": "auto",
-  "--bklcl": t.line,
-  "--bklcf": t.flat,
-  "--bklci": t.text
-}), dt = (t) => typeof t == "number" ? `repeat(${t}, 1fr)` : typeof t == "string" ? t : Array.isArray(t) ? t.map((e) => typeof e == "number" ? `${e}px` : e).join(" ") : "repeat(auto-fill, minmax(100px, 1fr))", ae = (t, e, n) => {
-  const s = {};
-  return t !== void 0 && (s.gap = O(t)), e !== void 0 && (s.rowGap = O(e)), n !== void 0 && (s.columnGap = O(n)), s;
-}, We = l.memo(function({
-  alignContent: e,
-  alignItems: n,
-  children: s,
-  className: o,
-  columns: r = "repeat(auto-fill, minmax(100px, 1fr))",
-  columnGap: i,
-  debugging: a,
-  gap: c,
-  height: d,
-  indicatorNode: f,
-  justifyContent: u,
-  justifyItems: M,
-  rowGap: v,
-  rows: b,
-  style: w,
-  variant: g,
-  width: h,
-  ssrMode: D = !1,
-  ...S
-}) {
-  const x = T("layout"), { isShown: $, debugging: I } = j(a, x.debugging), [m, G] = l.useState(!1);
-  l.useEffect(() => {
-    G(!0);
-  }, []);
-  const A = l.useRef(null), p = l.useMemo(
-    () => Y(S),
-    [S]
-  ), B = tt(A, {
-    base: x.base,
-    snapping: "height",
-    spacing: p,
-    warnOnMisalignment: !0
-  }), _ = {
-    padding: {
-      top: p.top || 0,
-      right: p.right || 0,
-      bottom: p.bottom || 0,
-      left: p.left || 0
-    }
-  }, { padding: V } = J(
-    m && !D,
-    _,
-    B
-  ), L = l.useMemo(
-    () => dt(r),
-    [r]
-  ), C = l.useMemo(
-    () => b ? dt(b) : "auto",
-    [b]
-  ), E = l.useMemo(
-    () => ie(x.colors),
-    [x.colors]
-  ), R = l.useMemo(
-    () => ae(c, v, i),
-    [c, v, i]
-  ), N = l.useMemo(() => {
-    const W = O(h || "auto"), X = O(d || "auto"), U = ["--bklw", "--bklh"];
-    return q(
-      {
-        // Theme overrides
-        ...k({
-          key: "--bklw",
-          value: W,
-          defaultStyles: E,
-          skipDimensions: { auto: U }
-        }),
-        ...k({
-          key: "--bklh",
-          value: X,
-          defaultStyles: E,
-          skipDimensions: { auto: U }
-        }),
-        ...k({
-          key: "--bklcl",
-          value: x.colors.line,
-          defaultStyles: E
-        }),
-        ...k({
-          key: "--bklcf",
-          value: x.colors.flat,
-          defaultStyles: E
-        }),
-        ...k({
-          key: "--bklci",
-          value: x.colors.text,
-          defaultStyles: E
-        }),
-        // Grid properties - only inject if different from defaults
-        ...L !== "repeat(auto-fill, minmax(100px, 1fr))" && {
-          "--bklgtc": L
-        },
-        ...C !== "auto" && { "--bklgtr": C },
-        ...M && { "--bklji": M },
-        ...n && { "--bklai": n },
-        ...u && { "--bkljc": u },
-        ...e && { "--bklac": e },
-        // Include gap styles
-        ...R
-      },
-      w
-    );
-  }, [
-    L,
-    C,
-    M,
-    n,
-    u,
-    e,
-    h,
-    d,
-    x.colors,
-    E,
-    w,
-    R
-  ]);
-  return /* @__PURE__ */ y(it, { spacer: { variant: g ?? "line" }, children: /* @__PURE__ */ y(
-    at,
-    {
-      ref: A,
-      className: $ ? ut.v : "",
-      block: [V.top, V.bottom],
-      ...f ? { indicatorNode: f } : {},
-      inline: [V.left, V.right],
-      debugging: I,
-      width: h,
-      height: d,
-      ssrMode: D,
-      children: /* @__PURE__ */ y(
-        "div",
-        {
-          "data-testid": "layout",
-          className: z(o, ut.lay),
-          style: N,
-          ...S && Object.keys(S).length > 0 ? Object.fromEntries(
-            Object.entries(S).filter(
-              ([W]) => W !== "ssrMode"
-            )
-          ) : {},
-          children: s
-        }
-      )
-    }
-  ) });
-}), le = "box_rDCRX", ce = "v_0MMHD", ft = {
-  box: le,
-  v: ce
-}, ue = (t, e) => ({
-  "--bkboxw": "auto",
-  "--bkboxh": "auto",
-  "--bkboxc": e,
-  "--bkboxb": `${t}px`
-}), de = ({
-  width: t,
-  height: e,
-  base: n,
-  lineColor: s,
-  defaultStyles: o
-}) => {
-  const r = O(t || "fit-content"), i = O(e || "fit-content"), a = ["--bkboxw", "--bkboxh"];
-  return {
-    ...k({
-      key: "--bkboxw",
-      value: r,
-      defaultStyles: o,
-      skipDimensions: { fitContent: a }
-    }),
-    ...k({
-      key: "--bkboxh",
-      value: i,
-      defaultStyles: o,
-      skipDimensions: { fitContent: a }
-    }),
-    ...k({
-      key: "--bkboxb",
-      value: `${n}px`,
-      defaultStyles: o
-    }),
-    ...k({
-      key: "--bkboxc",
-      value: s,
-      defaultStyles: o
-    })
-  };
-}, ze = l.memo(
-  l.forwardRef(function({
-    children: e,
-    snapping: n = "clamp",
-    debugging: s,
-    className: o,
-    colSpan: r,
-    rowSpan: i,
-    span: a,
-    width: c,
-    height: d,
-    style: f,
-    ssrMode: u = !1,
-    ...M
-  }, v) {
-    const b = T("box"), { isShown: w, debugging: g } = j(s, b.debugging), [h, D] = l.useState(!1);
-    l.useEffect(() => {
-      D(!0);
-    }, []);
-    const S = l.useRef(null), { top: x, bottom: $, left: I, right: m } = Y(M), G = tt(S, {
-      base: b.base,
-      snapping: n,
-      spacing: { top: x, bottom: $, left: I, right: m },
-      warnOnMisalignment: g !== "none"
-    }), A = {
-      padding: {
-        top: x || 0,
-        right: m || 0,
-        bottom: $ || 0,
-        left: I || 0
-      }
-    }, { padding: p } = J(
-      h && !u,
-      A,
-      G
-    ), B = l.useMemo(
-      () => Tt(a, r, i),
-      [r, i, a]
-    ), _ = l.useMemo(
-      () => ue(b.base, b.colors.line),
-      [b.base, b.colors.line]
-    ), V = l.useMemo(() => {
-      const L = de({
-        width: c,
-        height: d,
-        base: b.base,
-        lineColor: b.colors.line,
-        defaultStyles: _
-      });
-      return q(L, f);
-    }, [
-      b.base,
-      b.colors.line,
-      c,
-      d,
-      _,
-      f
-    ]);
-    return /* @__PURE__ */ y(
-      "div",
-      {
-        ref: yt(v, S),
-        "data-testid": "box",
-        className: z(ft.box, w && ft.v, o),
-        style: q(V, B),
-        children: /* @__PURE__ */ y(it, { base: 1, spacer: { variant: "flat" }, children: /* @__PURE__ */ y(
-          at,
-          {
-            block: [p.top, p.bottom],
-            inline: [p.left, p.right],
-            width: "fit-content",
-            height: d,
-            debugging: g,
-            ssrMode: u,
-            children: e
-          }
-        ) })
-      }
-    );
-  })
-), fe = "stk_l-58l", be = "v_-k3qw", bt = {
-  stk: fe,
-  v: be
-}, me = {
-  x: "row",
-  y: "column",
-  "-x": "row-reverse",
-  "-y": "column-reverse"
-}, he = (t) => ({
-  "--bkkw": "auto",
-  "--bkkh": "auto",
-  "--bkkcl": t.line,
-  "--bkkcf": t.flat,
-  "--bkkci": t.text
-}), ge = (t, e, n) => ({
-  rowGap: n !== void 0 ? n : t,
-  columnGap: n !== void 0 ? n : e
-}), He = l.memo(function({
-  align: e = "flex-start",
-  children: n,
-  className: s,
-  columnGap: o,
-  debugging: r,
-  direction: i = "row",
-  gap: a,
-  height: c,
-  indicatorNode: d,
-  justify: f = "flex-start",
-  rowGap: u,
-  style: M,
-  variant: v,
-  width: b,
-  ssrMode: w = !1,
-  ...g
-}) {
-  const h = T("stack"), { isShown: D, debugging: S } = j(r, h.debugging), [x, $] = l.useState(!1);
-  l.useEffect(() => {
-    $(!0);
-  }, []);
-  const I = l.useRef(null), { top: m, right: G, bottom: A, left: p } = Y({
-    ...g
-  }), B = tt(I, {
-    base: h.base,
-    snapping: "height",
-    spacing: { top: m, right: G, bottom: A, left: p },
-    warnOnMisalignment: S !== "none"
-  }), _ = {
-    padding: {
-      top: m || 0,
-      right: G || 0,
-      bottom: A || 0,
-      left: p || 0
-    }
-  }, { padding: V } = J(
-    x && !w,
-    _,
-    B
-  ), L = l.useMemo(() => {
-    const N = u !== void 0 ? Number(u) : void 0, W = o !== void 0 ? Number(o) : void 0, X = a !== void 0 ? Number(a) : void 0;
-    return ge(
-      N,
-      W,
-      X
-    );
-  }, [u, o, a]), C = l.useMemo(
-    () => he(h.colors),
-    [h.colors]
-  ), E = l.useMemo(() => {
-    const N = O(b || "auto"), W = O(c || "auto"), X = me[i] || i, U = ["--bkkw", "--bkkh"], et = {
-      ...k({
-        key: "--bkkw",
-        value: N,
-        defaultStyles: C,
-        skipDimensions: { auto: U }
-      }),
-      ...k({
-        key: "--bkkh",
-        value: W,
-        defaultStyles: C,
-        skipDimensions: { auto: U }
-      }),
-      ...k({
-        key: "--bkkcl",
-        value: h.colors.line,
-        defaultStyles: C
-      }),
-      ...k({
-        key: "--bkkcf",
-        value: h.colors.flat,
-        defaultStyles: C
-      }),
-      ...k({
-        key: "--bkkci",
-        value: h.colors.text,
-        defaultStyles: C
-      })
-    };
-    return q({
-      flexDirection: X,
-      justifyContent: f,
-      alignItems: e,
-      width: b,
-      height: c
-    }, L, et, M);
-  }, [
-    i,
-    f,
-    e,
-    b,
-    c,
-    h.colors.line,
-    h.colors.flat,
-    h.colors.text,
-    C,
-    L,
-    M
-  ]), R = S === "none" ? {
-    ...E,
-    paddingBlock: `${V.top}px ${V.bottom}px`,
-    paddingInline: `${V.left}px ${V.right}px`
-  } : E;
-  return /* @__PURE__ */ y(it, { spacer: { variant: v ?? "line" }, children: /* @__PURE__ */ y(
-    at,
-    {
-      ref: I,
-      block: [V.top, V.bottom],
-      inline: [V.left, V.right],
-      debugging: S,
-      indicatorNode: d,
-      width: b,
-      height: c,
-      ssrMode: w,
-      children: /* @__PURE__ */ y(
-        "div",
-        {
-          "data-testid": "stack",
-          className: z(s, bt.stk, D && bt.v),
-          style: R,
-          ...g,
-          children: n
-        }
-      )
-    }
-  ) });
-}), pe = "gde_-Naxo", ke = "line_-VS-e", ye = "cols_8lD6D", ve = "col_rlbsL", xe = "ssr_VGvpO", H = {
-  gde: pe,
-  line: ke,
-  cols: ye,
-  col: ve,
-  ssr: xe
-}, we = (t) => {
-  const { variant: e, base: n, gap: s, columns: o, columnWidth: r } = t;
-  switch (e) {
-    case "line":
-      return {
-        variant: "line",
-        gap: s,
-        base: n
-      };
-    case "pattern":
-      if (o && Array.isArray(o))
-        return {
-          variant: "pattern",
-          columns: o,
-          gap: s,
-          base: n
-        };
-      break;
-    case "fixed":
-      if (o !== void 0) {
-        const i = typeof o == "number" ? o : parseInt(String(o), 10);
-        return {
-          variant: "fixed",
-          columns: isNaN(i) ? 12 : i,
-          columnWidth: r || "60px",
-          gap: s,
-          base: n
-        };
-      }
-      break;
-  }
-  return {
-    variant: "auto",
-    columnWidth: r || "1fr",
-    gap: s,
-    base: n
-  };
-}, Se = (t, e) => ({
-  "--bkgw": "auto",
-  "--bkgh": "auto",
-  "--bkgmw": "none",
-  "--bkgcw": "60px",
-  "--bkggw": "24px",
-  "--bkgc": "12",
-  "--bkgb": `${t}px`,
-  "--bkgcl": e,
-  "--bkgg": "0"
-}), Te = l.memo(function({
-  className: e,
-  debugging: n,
-  style: s,
-  variant: o,
-  align: r = "center",
-  gap: i,
-  height: a,
-  width: c,
-  columns: d,
-  columnWidth: f,
-  maxWidth: u,
-  color: M,
-  children: v,
-  ssrMode: b = !1,
-  ...w
-}) {
-  const g = T("guide"), h = o ?? g.variant, D = typeof i == "number" ? i : 0, { isShown: S } = j(n, g.debugging);
-  if (!S)
-    return /* @__PURE__ */ y(
-      "div",
-      {
-        className: z(H.g, H.h, e),
-        style: s,
-        "data-testid": "guide",
-        "data-variant": h,
-        ...w,
-        children: v
-      }
-    );
-  const x = /* @__PURE__ */ y(
-    "div",
-    {
-      className: z(H.g, H.h, H.ssr, e),
-      style: {
-        width: c || "100%",
-        height: a || "100%",
-        maxWidth: u || "none",
-        ...s
-      },
-      "data-testid": "guide",
-      "data-variant": h,
-      children: v
-    }
-  );
-  return /* @__PURE__ */ y(wt, { fallback: x, children: /* @__PURE__ */ y(
-    Ce,
-    {
-      className: e,
-      debugging: n,
-      style: s,
-      variant: h,
-      align: r,
-      gap: D,
-      height: a,
-      width: c,
-      columns: d,
-      columnWidth: f,
-      maxWidth: u,
-      color: M,
-      ssrMode: b,
-      ...w,
-      children: v
-    }
-  ) });
-}), Ce = l.memo(function({
-  className: e,
-  debugging: n,
-  style: s,
-  variant: o,
-  align: r = "center",
-  gap: i,
-  height: a,
-  width: c,
-  columns: d,
-  columnWidth: f,
-  maxWidth: u,
-  color: M,
-  children: v,
-  ssrMode: b = !1,
-  ...w
-}) {
-  const g = T("guide"), { isShown: h } = j(n, g.debugging), D = l.useRef(null), {
-    width: S,
-    height: x,
-    refresh: $
-    // Keep the refresh function available for dynamic updates
-  } = P(D);
-  l.useEffect(() => {
-    const R = () => {
-      $();
-    };
-    return window.addEventListener("resize", R), () => {
-      window.removeEventListener("resize", R);
-    };
-  }, [$]);
-  const I = l.useMemo(() => {
-    const R = o, N = typeof i == "number" ? i : 0;
-    return we({
-      variant: R,
-      base: g.base,
-      gap: N,
-      columns: d,
-      columnWidth: f
-    });
-  }, [o, g.base, i, d, f]), { template: m, columnsCount: G, calculatedGap: A } = Ee(
-    D,
-    I
-  ), p = l.useMemo(
-    () => Se(g.base, g.colors.line),
-    [g.base, g.colors.line]
-  ), B = l.useMemo(() => {
-    const R = O(c || S || "auto"), N = O(a || x || "auto"), W = O(u || "none"), X = O(f || "60px"), U = ["--bkgw", "--bkgh"], et = {
-      ...k({
-        key: "--bkgw",
-        value: R,
-        defaultStyles: p,
-        skipDimensions: { auto: U }
-      }),
-      ...k({
-        key: "--bkgh",
-        value: N,
-        defaultStyles: p,
-        skipDimensions: { auto: U }
-      }),
-      ...k({
-        key: "--bkgmw",
-        value: W,
-        defaultStyles: p
-      }),
-      ...k({
-        key: "--bkgcw",
-        value: X,
-        defaultStyles: p
-      }),
-      ...k({
-        key: "--bkgc",
-        value: `${G}`,
-        defaultStyles: p
-      }),
-      ...k({
-        key: "--bkgb",
-        value: "0",
-        defaultStyles: p
-      }),
-      ...k({
-        key: "--bkgcl",
-        value: M ?? g.colors.line,
-        defaultStyles: p
-      }),
-      ...k({
-        key: "--bkgg",
-        value: `${A}px`,
-        defaultStyles: p
-      }),
-      ...k({
-        key: "--bkgj",
-        value: r || "center",
-        defaultStyles: p
-      }),
-      ...m && m !== "none" ? { "--bkgt": m } : {},
-      // Add grid template if available
-      ...m && m !== "none" ? { gridTemplateColumns: m } : {}
-    };
-    return q(et, s);
-  }, [
-    c,
-    a,
-    u,
-    f,
-    G,
-    M,
-    m,
-    A,
-    S,
-    x,
-    g.colors.line,
-    p,
-    s,
-    r
-  ]), _ = () => {
-    const R = typeof i == "number" ? i : 0, N = R === 0 ? 0 : R - 1, W = N + 1;
-    return { finalGap: N, actualGapWithLine: W };
-  }, { finalGap: V, actualGapWithLine: L } = _(), C = typeof c == "number" ? c : S || 1024;
-  let E;
-  return V === 0 ? E = Math.floor(C) + 1 : o === "line" ? E = Math.max(
-    1,
-    Math.floor((C + 1) / L) + 1
-  ) : E = Math.max(
-    1,
-    Math.floor(C / L) + 1
-  ), /* @__PURE__ */ Z(
-    "div",
-    {
-      ref: D,
-      "data-testid": "guide",
-      className: z(
-        H.gde,
-        e,
-        h ? H.v : H.h,
-        o === "line" && H.line
-      ),
-      "data-variant": o,
-      style: B,
-      ...w,
-      children: [
-        h && /* @__PURE__ */ y("div", { className: H.cols, "data-variant": o, children: Array.from({ length: E }, (R, N) => {
-          const W = g.colors[o] ?? g.colors.line;
-          return /* @__PURE__ */ y(
-            "div",
-            {
-              className: H.col,
-              "data-column-index": N,
-              "data-variant": o,
-              style: { backgroundColor: W }
-            },
-            N
-          );
-        }) }),
-        v
-      ]
-    }
-  );
-}), Me = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, $e = (t) => typeof t == "number" ? Number.isFinite(t) && t >= 0 : typeof t != "string" ? !1 : t === "auto" || t === "100%" || Me.test(t), Re = (t) => Array.isArray(t) && t.length > 0 && t.every($e);
-function Ee(t, e) {
-  const { width: n } = P(t), s = l.useRef(!1);
-  return l.useMemo(() => {
-    const o = e.variant ?? "line", r = e.base ?? 8, i = st(e.gap ?? 0, { base: r });
-    if (!n)
-      return {
-        template: "none",
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: !1
-      };
-    try {
-      switch (o) {
-        case "line": {
-          const a = i === 0 ? 0 : i - 1, c = a + 1;
-          let d;
-          return a === 0 ? d = Math.max(1, Math.floor(n) + 1) : d = Math.max(
-            1,
-            Math.floor((n + 1) / c) + 1
-          ), {
-            template: `repeat(${d}, 1px)`,
-            columnsCount: d,
-            calculatedGap: i > 0 ? i - 1 : i,
-            isValid: !0
-          };
-        }
-        case "pattern": {
-          if (!e.columns || !Array.isArray(e.columns))
-            throw new Error("Missing or invalid pattern columns");
-          if (!Re(e.columns))
-            throw new Error('Invalid "pattern" columns array');
-          const a = e.columns.map(
-            (c) => typeof c == "number" ? `${c}px` : c
-          );
-          return a.some((c) => c === "0" || c === "0px") ? {
-            template: "none",
-            columnsCount: 0,
-            calculatedGap: 0,
-            isValid: !1
-          } : {
-            template: a.join(" "),
-            columnsCount: a.length,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-        case "fixed": {
-          const a = typeof e.columns == "number" ? e.columns : 0;
-          if (a < 1)
-            throw new Error(`Invalid columns count: ${a}`);
-          const c = e.columnWidth ? O(e.columnWidth) : "1fr";
-          return {
-            template: `repeat(${a}, ${c})`,
-            columnsCount: a,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-        case "auto": {
-          const a = e.columnWidth ?? "auto";
-          if (a === "auto")
-            return {
-              template: "repeat(auto-fill, minmax(0, 1fr))",
-              columnsCount: 1,
-              calculatedGap: i,
-              isValid: !0
-            };
-          const c = typeof a == "number" ? `${a}px` : a.toString(), d = pt(c) ?? 0, f = d > 0 ? Math.max(1, Math.floor((n + i) / (d + i))) : 1;
-          return {
-            template: `repeat(auto-fill, ${c})`,
-            columnsCount: f,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-        default: {
-          s.current || (console.warn(
-            `[useGuide] Unknown variant "${o}". Falling back to "line".`
-          ), s.current = !0);
-          const a = Math.max(1, Math.floor(n / (i + 1)) + 1);
-          return {
-            template: `repeat(${a}, 1px)`,
-            columnsCount: a,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-      }
-    } catch (a) {
-      return console.warn("Error in useGuide:", a), {
-        template: "none",
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: !1
-      };
-    }
-  }, [e, n]);
+function V(...e) {
+	return (t) => {
+		e.forEach((e) => {
+			e && (typeof e == "function" ? e(t) : Object.assign(e, { current: t }));
+		});
+	};
 }
-function T(t) {
-  const e = gt();
-  return Q(() => Object.assign(
-    { base: e.base },
-    e[t]
-  ), [e, t]);
+var H = {
+	bas: "bas_4Emvv",
+	v: "v_lNfeX",
+	h: "h_PbNDU",
+	row: "row_J1Wva",
+	ssr: "ssr_PQAP-"
+}, 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,
+		width: s,
+		height: o,
+		color: l,
+		containerWidth: h,
+		containerHeight: g,
+		spacing: u,
+		isVisible: f
+	}), [
+		_,
+		d.colors,
+		d.variant,
+		a,
+		s,
+		o,
+		l,
+		h,
+		g,
+		u,
+		f
+	]), { start: y, end: x } = M({
+		totalLines: v.rowCount,
+		lineHeight: _,
+		containerRef: m,
+		buffer: 160
+	}), 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) => H[e]), e),
+		style: S,
+		...u,
+		children: f && Array.from({ length: x - y }, (e, t) => {
+			let n = t + y;
+			return /* @__PURE__ */ b("div", {
+				className: H.row,
+				"data-row-index": n,
+				style: v.getRowStyle(n)
+			}, n);
+		})
+	});
+}), 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(H.bas, H.h, e),
+		style: r,
+		"data-testid": "baseline",
+		"aria-hidden": "true",
+		...u
+	});
+	let h = /* @__PURE__ */ b("div", {
+		className: n(H.bas, H.h, H.ssr, e),
+		style: {
+			width: o ?? "100%",
+			height: a ?? "100%",
+			...r
+		},
+		"data-testid": "baseline",
+		"aria-hidden": "true"
+	});
+	return l ? h : /* @__PURE__ */ b(z, {
+		fallback: h,
+		children: /* @__PURE__ */ b(U, {
+			className: e,
+			debugging: t,
+			style: r,
+			variant: f,
+			height: a,
+			width: o,
+			base: p,
+			color: c,
+			...u
+		})
+	});
+}), G = {
+	gde: "gde_4PKz3",
+	v: "v_yAvN0",
+	h: "h_XcWcy",
+	line: "line_UaLjW",
+	cols: "cols_ibtT4",
+	col: "col_QPSDI",
+	ssr: "ssr_4UN4k"
+}, 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(G.gde, G.h, e),
+		style: r,
+		"data-testid": "guide",
+		"data-variant": _,
+		"aria-hidden": "true",
+		...h,
+		children: p
+	});
+	let x = /* @__PURE__ */ b("div", {
+		className: n(G.gde, G.h, G.ssr, e),
+		style: {
+			width: c ?? "100%",
+			height: s ?? "100%",
+			maxWidth: d ?? "none",
+			...r
+		},
+		"data-testid": "guide",
+		"data-variant": _,
+		"aria-hidden": "true",
+		children: p
+	});
+	return m ? x : /* @__PURE__ */ b(z, {
+		fallback: x,
+		children: /* @__PURE__ */ b(te, {
+			className: e,
+			debugging: t,
+			style: r,
+			variant: _,
+			align: a,
+			gap: v,
+			height: s,
+			width: c,
+			columns: l,
+			columnWidth: u,
+			maxWidth: d,
+			color: f,
+			...h,
+			children: p
+		})
+	});
+}), 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,
+		columns: d,
+		columnWidth: f
+	}), [
+		C,
+		v.base,
+		w,
+		d,
+		f
+	])), O = p.useMemo(() => c({
+		base: v.base,
+		colors: v.colors,
+		variant: C,
+		align: o || "center",
+		width: u,
+		height: l,
+		columnWidth: f,
+		maxWidth: m,
+		color: h,
+		template: T,
+		columnsCount: E,
+		calculatedGap: D,
+		isVisible: y
+	}), [
+		v.base,
+		v.colors,
+		C,
+		o,
+		u,
+		l,
+		f,
+		m,
+		h,
+		T,
+		E,
+		D,
+		y
+	]), k = p.useMemo(() => B(O.containerStyle, i), [O.containerStyle, i]);
+	return /* @__PURE__ */ x("div", {
+		ref: S,
+		"data-testid": "guide",
+		"aria-hidden": "true",
+		className: n(...O.classTokens.map((e) => G[e]), e),
+		"data-variant": a,
+		style: k,
+		..._,
+		children: [y && /* @__PURE__ */ b("div", {
+			className: G.cols,
+			"data-variant": a,
+			children: !O.isLineVariant && Array.from({ length: O.columnsCount }, (e, t) => /* @__PURE__ */ b("div", {
+				className: G.col,
+				"data-column-index": t,
+				"data-variant": a
+			}, t))
+		}), g]
+	});
+}), K = typeof window > "u";
+function ne(e, t) {
+	if (K) return t;
+	try {
+		return e();
+	} catch {
+		return t;
+	}
 }
-function j(t, e) {
-  return Q(() => {
-    const n = t ?? e;
-    return {
-      isShown: n === "visible",
-      isHidden: n === "hidden",
-      isNone: n === "none",
-      debugging: n
-    };
-  }, [t, e]);
+function q(e, t, n) {
+	return !e || K ? t : n;
 }
-const Ve = "bas_e-SXr", Ge = "row_q-FZb", Oe = "ssr_W1N5g", F = {
-  bas: Ve,
-  row: Ge,
-  ssr: Oe
-}, De = (t, e, n) => ({
-  "--bkbw": "100%",
-  "--bkbh": "100%",
-  "--bkbb": `${t}px`,
-  "--bkbcl": e,
-  "--bkbcf": n
-}), _e = (t) => {
-  const { index: e, base: n, variant: s, chosenColor: o, lineColor: r, flatColor: i } = t;
-  return {
-    "--bkrt": e === 0 ? "0px" : `${e * n}px`,
-    "--bkrh": s === "line" ? "1px" : `${n}px`,
-    "--bkbc": o || (s === "line" ? r : i)
-  };
-}, Ae = l.memo(function({
-  className: e,
-  debugging: n,
-  style: s,
-  variant: o,
-  height: r,
-  width: i,
-  base: a,
-  color: c,
-  ssrMode: d = !1,
-  ...f
-}) {
-  const u = T("baseline"), { isShown: M } = j(n, u.debugging), v = l.useRef(null), {
-    width: b,
-    height: w,
-    refresh: g
-  } = P(v);
-  l.useEffect(() => {
-    const C = () => {
-      g();
-    };
-    return window.addEventListener("resize", C), () => {
-      window.removeEventListener("resize", C);
-    };
-  }, [g]);
-  const [h, D] = l.useMemo(() => kt(
-    [i, r],
-    [b, w]
-  ), [i, r, b, w]), { top: S, right: x, bottom: $, left: I } = l.useMemo(
-    () => Y(f),
-    [f]
-  ), m = l.useMemo(() => {
-    const C = [S, x, $, I].map((E) => E ? `${E}px` : "0").join(" ");
-    return C !== "0 0 0 0" ? C : void 0;
-  }, [S, x, $, I]), G = l.useMemo(() => {
-    const C = a || u.base;
-    return Nt({
-      height: D,
-      top: S,
-      bottom: $,
-      base: C
-    });
-  }, [D, S, $, a, u.base]), { start: A, end: p } = Ut({
-    totalLines: G,
-    lineHeight: a || u.base,
-    containerRef: v,
-    buffer: 160
-  }), B = c || (o === "line" ? u.colors.line : u.colors.flat), _ = l.useMemo(
-    () => De(
-      a || u.base,
-      u.colors.line,
-      u.colors.flat
-    ),
-    [a, u.colors.line, u.colors.flat, u.base]
-  ), V = l.useMemo(() => {
-    const C = O(i || "100%"), E = O(r || "100%"), R = ["--bkbw", "--bkbh"];
-    return q(
-      {
-        ...k({
-          key: "--bkbw",
-          value: C,
-          defaultStyles: _,
-          skipDimensions: { fullSize: R }
-        }),
-        ...k({
-          key: "--bkbh",
-          value: E,
-          defaultStyles: _,
-          skipDimensions: { fullSize: R }
-        }),
-        ...k({
-          key: "--bkbb",
-          value: `${a}px`,
-          defaultStyles: _
-        }),
-        ...k({
-          key: "--bkbcl",
-          value: c || u.colors.line,
-          defaultStyles: _
-        }),
-        ...k({
-          key: "--bkbcf",
-          value: c || u.colors.flat,
-          defaultStyles: _
-        }),
-        ...m && { padding: m }
-      },
-      s
-    );
-  }, [
-    i,
-    r,
-    a,
-    c,
-    u.colors.line,
-    u.colors.flat,
-    m,
-    _,
-    s
-  ]), L = l.useCallback(
-    (C) => {
-      const E = o, R = a || u.base;
-      return _e({
-        index: C,
-        base: R,
-        variant: E,
-        chosenColor: B,
-        lineColor: u.colors.line,
-        flatColor: u.colors.flat
-      });
-    },
-    [
-      a,
-      o,
-      B,
-      u.colors.line,
-      u.colors.flat,
-      u.base
-    ]
-  );
-  return /* @__PURE__ */ y(
-    "div",
-    {
-      ref: v,
-      "data-testid": "baseline",
-      className: z(
-        F.bas,
-        M ? F.v : F.h,
-        e
-      ),
-      style: V,
-      ...f,
-      children: M && Array.from({ length: p - A }, (C, E) => {
-        const R = E + A;
-        return /* @__PURE__ */ y(
-          "div",
-          {
-            className: F.row,
-            "data-row-index": R,
-            style: L(R)
-          },
-          R
-        );
-      })
-    }
-  );
-}), Fe = l.memo(function({
-  className: e,
-  debugging: n,
-  style: s,
-  variant: o,
-  height: r,
-  width: i,
-  base: a,
-  color: c,
-  ssrMode: d = !1,
-  ...f
-}) {
-  const u = T("baseline"), M = o ?? u.variant, v = a ?? u.base, { isShown: b } = j(n, u.debugging);
-  if (!b)
-    return /* @__PURE__ */ y(
-      "div",
-      {
-        className: z(F.b, F.h, e),
-        style: s,
-        "data-testid": "baseline",
-        ...f
-      }
-    );
-  const w = /* @__PURE__ */ y(
-    "div",
-    {
-      className: z(F.b, F.h, F.ssr, e),
-      style: {
-        width: i || "100%",
-        height: r || "100%",
-        ...s
-      },
-      "data-testid": "baseline"
-    }
-  );
-  return /* @__PURE__ */ y(wt, { fallback: w, children: /* @__PURE__ */ y(
-    Ae,
-    {
-      className: e,
-      debugging: n,
-      style: s,
-      variant: M,
-      height: r,
-      width: i,
-      base: v,
-      color: c,
-      ssrMode: d,
-      ...f
-    }
-  ) });
-});
-export {
-  Fe as Baseline,
-  ze as Box,
-  it as Config,
-  Te as Guide,
-  We as Layout,
-  at as Padder,
-  Qt as Spacer,
-  He as Stack,
-  xt as isSSR,
-  Be as safeClientValue
-};
-//# sourceMappingURL=index.mjs.map
+var J = {
+	spr: "spr_syfhf",
+	line: "line_nzGsp",
+	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 = 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,
+		height: e,
+		color: c,
+		variant: v,
+		isVisible: _
+	}), [
+		S,
+		g.colors,
+		t,
+		e,
+		c,
+		v,
+		_
+	]), 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")] });
+	}, [
+		T,
+		r,
+		w.normWidth,
+		w.normHeight
+	]), 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) => J[e]), l),
+		"data-variant": v,
+		"data-height": typeof w.normHeight == "number" ? `${w.normHeight}px` : w.normHeight,
+		style: D,
+		...m,
+		children: [E, d]
+	});
+}), X = {
+	pad: "pad_NizuS",
+	content: "content_xFX0U",
+	v: "v_dowAz"
+}, 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,
+		indicatorNode: n,
+		height: t === "100%" ? void 0 : t,
+		width: e === "100%" ? void 0 : e
+	});
+	return a.displayName = "PadderSpacer", a;
+}, 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 = 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
+	}), D = { padding: {
+		top: g.top || 0,
+		right: g.right || 0,
+		bottom: g.bottom || 0,
+		left: g.left || 0
+	} }, { padding: O } = q(w && !l, D, E), k = V(d, T), A = p.useMemo(() => f({
+		base: m.base,
+		color: m.color,
+		width: c,
+		height: a,
+		padding: O,
+		enableSpacers: C,
+		isVisible: _
+	}), [
+		m.base,
+		m.color,
+		c,
+		a,
+		O,
+		C,
+		_
+	]), j = p.useMemo(() => B(A.containerStyle, s), [A.containerStyle, s]), M = p.useMemo(() => re(h, S, o), [
+		h,
+		S,
+		o
+	]);
+	return C ? /* @__PURE__ */ x("div", {
+		ref: k,
+		"data-testid": "padder",
+		className: n(...A.classTokens.map((e) => X[e]), t),
+		style: j,
+		children: [
+			/* @__PURE__ */ x(y, { children: [O.top >= 0 && /* @__PURE__ */ b("div", {
+				style: Z,
+				children: M("100%", O.top)
+			}), O.left >= 0 && /* @__PURE__ */ b("div", {
+				style: Q,
+				children: M(O.left, "100%")
+			})] }),
+			/* @__PURE__ */ b("div", {
+				"data-testid": "padder-content",
+				className: X.content,
+				style: ie,
+				children: e
+			}),
+			/* @__PURE__ */ x(y, { children: [O.right >= 0 && /* @__PURE__ */ b("div", {
+				style: Q,
+				children: M(O.right, "100%")
+			}), O.bottom >= 0 && /* @__PURE__ */ b("div", {
+				style: Z,
+				children: M("100%", O.bottom)
+			})] })
+		]
+	}) : /* @__PURE__ */ b("div", {
+		ref: k,
+		"data-testid": "padder",
+		className: n(...A.classTokens.map((e) => X[e]), t),
+		style: j,
+		children: e
+	});
+})), ae = {
+	box: "box_sPqFs",
+	v: "v_ZrZ5j"
+}, 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: w,
+			left: T,
+			right: D
+		}
+	}), { padding: k } = q(x && !m, { padding: {
+		top: C || 0,
+		right: D || 0,
+		bottom: w || 0,
+		left: T || 0
+	} }, O), A = p.useMemo(() => u({
+		base: _.base,
+		lineColor: _.colors.line,
+		width: l,
+		height: d,
+		span: c,
+		colSpan: o,
+		rowSpan: s,
+		isVisible: v
+	}), [
+		_.base,
+		_.colors.line,
+		l,
+		d,
+		c,
+		o,
+		s,
+		v
+	]), j = p.useMemo(() => B(A.boxStyle, f), [A.boxStyle, f]);
+	return /* @__PURE__ */ b("div", {
+		ref: V(g, S),
+		"data-testid": "box",
+		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($, {
+				block: [k.top, k.bottom],
+				inline: [k.left, k.right],
+				width: "fit-content",
+				height: d,
+				debugging: y,
+				ssrMode: !0,
+				children: e
+			})
+		})
+	});
+}));
+//#endregion
+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