baseline-kit 2.0.1 → 3.0.0

package/dist/index.mjs

@@ -1,462 +1,154 @@
-import * as f from "react";
-import oe, { useMemo as ot, useCallback as kt, useState as re, useLayoutEffect as Jt, useRef as se } from "react";
-var ut = { exports: {} }, at = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var zt;
-function ae() {
-  if (zt) return at;
-  zt = 1;
-  var e = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-  function o(a, s, r) {
-    var i = null;
-    if (r !== void 0 && (i = "" + r), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      r = {};
-      for (var d in s)
-        d !== "key" && (r[d] = s[d]);
-    } else r = s;
-    return s = r.ref, {
-      $$typeof: e,
-      type: a,
-      key: i,
-      ref: s !== void 0 ? s : null,
-      props: r
-    };
+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
   }
-  return at.Fragment = n, at.jsx = o, at.jsxs = o, at;
-}
-var it = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Ut;
-function ie() {
-  return Ut || (Ut = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(t) {
-      if (t == null) return null;
-      if (typeof t == "function")
-        return t.$$typeof === te ? null : t.displayName || t.name || null;
-      if (typeof t == "string") return t;
-      switch (t) {
-        case V:
-          return "Fragment";
-        case E:
-          return "Portal";
-        case R:
-          return "Profiler";
-        case O:
-          return "StrictMode";
-        case T:
-          return "Suspense";
-        case L:
-          return "SuspenseList";
-      }
-      if (typeof t == "object")
-        switch (typeof t.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), t.$$typeof) {
-          case j:
-            return (t.displayName || "Context") + ".Provider";
-          case w:
-            return (t._context.displayName || "Context") + ".Consumer";
-          case y:
-            var l = t.render;
-            return t = t.displayName, t || (t = l.displayName || l.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
-          case B:
-            return l = t.displayName || null, l !== null ? l : e(t.type) || "Memo";
-          case W:
-            l = t._payload, t = t._init;
-            try {
-              return e(t(l));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function n(t) {
-      return "" + t;
-    }
-    function o(t) {
-      try {
-        n(t);
-        var l = !1;
-      } catch {
-        l = !0;
-      }
-      if (l) {
-        l = console;
-        var u = l.error, S = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
-        return u.call(
-          l,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          S
-        ), n(t);
-      }
-    }
-    function a() {
-    }
-    function s() {
-      if (rt === 0) {
-        jt = console.log, Ot = console.info, Tt = console.warn, At = console.error, $t = console.group, Mt = console.groupCollapsed, Nt = console.groupEnd;
-        var t = {
-          configurable: !0,
-          enumerable: !0,
-          value: a,
-          writable: !0
-        };
-        Object.defineProperties(console, {
-          info: t,
-          log: t,
-          warn: t,
-          error: t,
-          group: t,
-          groupCollapsed: t,
-          groupEnd: t
-        });
-      }
-      rt++;
-    }
-    function r() {
-      if (rt--, rt === 0) {
-        var t = { configurable: !0, enumerable: !0, writable: !0 };
-        Object.defineProperties(console, {
-          log: K({}, t, { value: jt }),
-          info: K({}, t, { value: Ot }),
-          warn: K({}, t, { value: Tt }),
-          error: K({}, t, { value: At }),
-          group: K({}, t, { value: $t }),
-          groupCollapsed: K({}, t, { value: Mt }),
-          groupEnd: K({}, t, { value: Nt })
-        });
-      }
-      0 > rt && console.error(
-        "disabledDepth fell below zero. This is a bug in React. Please file an issue."
-      );
-    }
-    function i(t) {
-      if (ht === void 0)
-        try {
-          throw Error();
-        } catch (u) {
-          var l = u.stack.trim().match(/\n( *(at )?)/);
-          ht = l && l[1] || "", Vt = -1 < u.stack.indexOf(`
-    at`) ? " (<anonymous>)" : -1 < u.stack.indexOf("@") ? "@unknown:0:0" : "";
-        }
-      return `
-` + ht + t + Vt;
-    }
-    function d(t, l) {
-      if (!t || pt) return "";
-      var u = vt.get(t);
-      if (u !== void 0) return u;
-      pt = !0, u = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
-      var S = null;
-      S = Z.H, Z.H = null, s();
-      try {
-        var z = {
-          DetermineComponentFrameRoot: function() {
-            try {
-              if (l) {
-                var q = function() {
-                  throw Error();
-                };
-                if (Object.defineProperty(q.prototype, "props", {
-                  set: function() {
-                    throw Error();
-                  }
-                }), typeof Reflect == "object" && Reflect.construct) {
-                  try {
-                    Reflect.construct(q, []);
-                  } catch (H) {
-                    var lt = H;
-                  }
-                  Reflect.construct(t, [], q);
-                } else {
-                  try {
-                    q.call();
-                  } catch (H) {
-                    lt = H;
-                  }
-                  t.call(q.prototype);
-                }
-              } else {
-                try {
-                  throw Error();
-                } catch (H) {
-                  lt = H;
-                }
-                (q = t()) && typeof q.catch == "function" && q.catch(function() {
-                });
-              }
-            } catch (H) {
-              if (H && lt && typeof H.stack == "string")
-                return [H.stack, lt.stack];
-            }
-            return [null, null];
-          }
-        };
-        z.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
-        var G = Object.getOwnPropertyDescriptor(
-          z.DetermineComponentFrameRoot,
-          "name"
-        );
-        G && G.configurable && Object.defineProperty(
-          z.DetermineComponentFrameRoot,
-          "name",
-          { value: "DetermineComponentFrameRoot" }
-        );
-        var p = z.DetermineComponentFrameRoot(), F = p[0], et = p[1];
-        if (F && et) {
-          var Y = F.split(`
-`), Q = et.split(`
-`);
-          for (p = G = 0; G < Y.length && !Y[G].includes(
-            "DetermineComponentFrameRoot"
-          ); )
-            G++;
-          for (; p < Q.length && !Q[p].includes(
-            "DetermineComponentFrameRoot"
-          ); )
-            p++;
-          if (G === Y.length || p === Q.length)
-            for (G = Y.length - 1, p = Q.length - 1; 1 <= G && 0 <= p && Y[G] !== Q[p]; )
-              p--;
-          for (; 1 <= G && 0 <= p; G--, p--)
-            if (Y[G] !== Q[p]) {
-              if (G !== 1 || p !== 1)
-                do
-                  if (G--, p--, 0 > p || Y[G] !== Q[p]) {
-                    var st = `
-` + Y[G].replace(
-                      " at new ",
-                      " at "
-                    );
-                    return t.displayName && st.includes("<anonymous>") && (st = st.replace("<anonymous>", t.displayName)), typeof t == "function" && vt.set(t, st), st;
-                  }
-                while (1 <= G && 0 <= p);
-              break;
-            }
-        }
-      } finally {
-        pt = !1, Z.H = S, r(), Error.prepareStackTrace = u;
-      }
-      return Y = (Y = t ? t.displayName || t.name : "") ? i(Y) : "", typeof t == "function" && vt.set(t, Y), Y;
-    }
-    function g(t) {
-      if (t == null) return "";
-      if (typeof t == "function") {
-        var l = t.prototype;
-        return d(
-          t,
-          !(!l || !l.isReactComponent)
-        );
-      }
-      if (typeof t == "string") return i(t);
-      switch (t) {
-        case T:
-          return i("Suspense");
-        case L:
-          return i("SuspenseList");
-      }
-      if (typeof t == "object")
-        switch (t.$$typeof) {
-          case y:
-            return t = d(t.render, !1), t;
-          case B:
-            return g(t.type);
-          case W:
-            l = t._payload, t = t._init;
-            try {
-              return g(t(l));
-            } catch {
-            }
-        }
-      return "";
-    }
-    function c() {
-      var t = Z.A;
-      return t === null ? null : t.getOwner();
-    }
-    function m(t) {
-      if (_t.call(t, "key")) {
-        var l = Object.getOwnPropertyDescriptor(t, "key").get;
-        if (l && l.isReactWarning) return !1;
-      }
-      return t.key !== void 0;
-    }
-    function x(t, l) {
-      function u() {
-        Gt || (Gt = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          l
-        ));
-      }
-      u.isReactWarning = !0, Object.defineProperty(t, "key", {
-        get: u,
-        configurable: !0
-      });
-    }
-    function b() {
-      var t = e(this.type);
-      return Wt[t] || (Wt[t] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), t = this.props.ref, t !== void 0 ? t : null;
-    }
-    function v(t, l, u, S, z, G) {
-      return u = G.ref, t = {
-        $$typeof: C,
-        type: t,
-        key: l,
-        props: G,
-        _owner: z
-      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(t, "ref", {
-        enumerable: !1,
-        get: b
-      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(t, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
-    }
-    function A(t, l, u, S, z, G) {
-      if (typeof t == "string" || typeof t == "function" || t === V || t === R || t === O || t === T || t === L || t === P || typeof t == "object" && t !== null && (t.$$typeof === W || t.$$typeof === B || t.$$typeof === j || t.$$typeof === w || t.$$typeof === y || t.$$typeof === ee || t.getModuleId !== void 0)) {
-        var p = l.children;
-        if (p !== void 0)
-          if (S)
-            if (gt(p)) {
-              for (S = 0; S < p.length; S++)
-                M(p[S], t);
-              Object.freeze && Object.freeze(p);
-            } else
-              console.error(
-                "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-              );
-          else M(p, t);
-      } else
-        p = "", (t === void 0 || typeof t == "object" && t !== null && Object.keys(t).length === 0) && (p += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), t === null ? S = "null" : gt(t) ? S = "array" : t !== void 0 && t.$$typeof === C ? (S = "<" + (e(t.type) || "Unknown") + " />", p = " Did you accidentally export a JSX literal instead of a component?") : S = typeof t, console.error(
-          "React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
-          S,
-          p
-        );
-      if (_t.call(l, "key")) {
-        p = e(t);
-        var F = Object.keys(l).filter(function(Y) {
-          return Y !== "key";
-        });
-        S = 0 < F.length ? "{key: someKey, " + F.join(": ..., ") + ": ...}" : "{key: someKey}", Bt[p + S] || (F = 0 < F.length ? "{" + F.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          S,
-          p,
-          F,
-          p
-        ), Bt[p + S] = !0);
-      }
-      if (p = null, u !== void 0 && (o(u), p = "" + u), m(l) && (o(l.key), p = "" + l.key), "key" in l) {
-        u = {};
-        for (var et in l)
-          et !== "key" && (u[et] = l[et]);
-      } else u = l;
-      return p && x(
-        u,
-        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
-      ), v(t, p, G, z, c(), u);
-    }
-    function M(t, l) {
-      if (typeof t == "object" && t && t.$$typeof !== ne) {
-        if (gt(t))
-          for (var u = 0; u < t.length; u++) {
-            var S = t[u];
-            h(S) && $(S, l);
-          }
-        else if (h(t))
-          t._store && (t._store.validated = 1);
-        else if (t === null || typeof t != "object" ? u = null : (u = ct && t[ct] || t["@@iterator"], u = typeof u == "function" ? u : null), typeof u == "function" && u !== t.entries && (u = u.call(t), u !== t))
-          for (; !(t = u.next()).done; )
-            h(t.value) && $(t.value, l);
-      }
-    }
-    function h(t) {
-      return typeof t == "object" && t !== null && t.$$typeof === C;
-    }
-    function $(t, l) {
-      if (t._store && !t._store.validated && t.key == null && (t._store.validated = 1, l = N(l), !Lt[l])) {
-        Lt[l] = !0;
-        var u = "";
-        t && t._owner != null && t._owner !== c() && (u = null, typeof t._owner.tag == "number" ? u = e(t._owner.type) : typeof t._owner.name == "string" && (u = t._owner.name), u = " It was passed a child from " + u + ".");
-        var S = Z.getCurrentStack;
-        Z.getCurrentStack = function() {
-          var z = g(t.type);
-          return S && (z += S() || ""), z;
-        }, console.error(
-          'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
-          l,
-          u
-        ), Z.getCurrentStack = S;
-      }
-    }
-    function N(t) {
-      var l = "", u = c();
-      return u && (u = e(u.type)) && (l = `
-
-Check the render method of \`` + u + "`."), l || (t = e(t)) && (l = `
-
-Check the top-level render call using <` + t + ">."), l;
-    }
-    var k = oe, C = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), V = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), R = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), j = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), T = Symbol.for("react.suspense"), L = Symbol.for("react.suspense_list"), B = Symbol.for("react.memo"), W = Symbol.for("react.lazy"), P = Symbol.for("react.offscreen"), ct = Symbol.iterator, te = Symbol.for("react.client.reference"), Z = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _t = Object.prototype.hasOwnProperty, K = Object.assign, ee = Symbol.for("react.client.reference"), gt = Array.isArray, rt = 0, jt, Ot, Tt, At, $t, Mt, Nt;
-    a.__reactDisabledLog = !0;
-    var ht, Vt, pt = !1, vt = new (typeof WeakMap == "function" ? WeakMap : Map)(), ne = Symbol.for("react.client.reference"), Gt, Wt = {}, Bt = {}, Lt = {};
-    it.Fragment = V, it.jsx = function(t, l, u, S, z) {
-      return A(t, l, u, !1, S, z);
-    }, it.jsxs = function(t, l, u, S, z) {
-      return A(t, l, u, !0, S, z);
-    };
-  }()), it;
-}
-var Yt;
-function ce() {
-  return Yt || (Yt = 1, process.env.NODE_ENV === "production" ? ut.exports = ae() : ut.exports = ie()), ut.exports;
+}, 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 });
 }
-var _ = ce();
-function le(e) {
-  const n = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
-  if (!n) return null;
-  const o = parseFloat(n[1]), a = n[2];
-  return { value: o, unit: a };
+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 U(e, n) {
-  return e === void 0 && n !== void 0 ? `${n}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 ?? "";
+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 ue = {
+const At = {
   parentSize: 0,
   viewportWidth: typeof window < "u" ? window.innerWidth : 1920,
   viewportHeight: typeof window < "u" ? window.innerHeight : 1080,
   rootFontSize: 16,
   parentFontSize: 16
-}, wt = {
+}, lt = {
   px: 1,
   in: 96,
   // 1in = 96px
@@ -468,1281 +160,1604 @@ const ue = {
   // 1pt = 1.33px
   pc: 16
   // 1pc = 16px
-}, Xt = ["em", "rem", "vh", "vw", "vmin", "vmax", "%"];
-function yt(e, n) {
-  if (typeof e == "number") return e;
-  if (typeof e != "string") return null;
-  const o = le(e);
-  if (!o) return null;
-  const { value: a, unit: s } = o;
-  if (s in wt)
-    return a * wt[s];
-  if (s === "auto") return null;
-  if (Xt.includes(s)) {
-    const r = { ...ue, ...n };
-    switch (s) {
+}, 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 a * r.parentFontSize;
+        return s * r.parentFontSize;
       case "rem":
-        return a * r.rootFontSize;
+        return s * r.rootFontSize;
       case "vh":
-        return a / 100 * r.viewportHeight;
+        return s / 100 * r.viewportHeight;
       case "vw":
-        return a / 100 * r.viewportWidth;
+        return s / 100 * r.viewportWidth;
       case "vmin":
-        return a / 100 * Math.min(r.viewportWidth, r.viewportHeight);
+        return s / 100 * Math.min(r.viewportWidth, r.viewportHeight);
       case "vmax":
-        return a / 100 * Math.max(r.viewportWidth, r.viewportHeight);
+        return s / 100 * Math.max(r.viewportWidth, r.viewportHeight);
       case "%":
-        return a / 100 * r.parentSize;
+        return s / 100 * r.parentSize;
       default:
         return null;
     }
   }
   return null;
 }
-function Ke(e, n, o) {
-  const a = (o == null ? void 0 : o.round) ?? !0, s = e === void 0 ? 0 : typeof e == "number" ? e : yt(e) ?? 0;
-  return `${(a ? Math.round(s) : s) % n}px`;
+function Lt(t, e, n) {
+  return Math.min(Math.max(t, e), n);
 }
-function fe(e, n, o) {
-  return Math.min(Math.max(e, n), o);
+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 Qe(e, n = 0) {
-  if (n >= 0)
-    return Number((Math.round(e * 10 ** n) / 10 ** n).toFixed(n));
-  {
-    const o = 10 ** Math.abs(n);
-    return Math.round(e / o) * o;
-  }
-}
-function dt(e, n = {}) {
+function st(t, e = {}) {
   const {
-    base: o = 8,
-    round: a = !0,
-    clamp: s,
+    base: n = 8,
+    round: s = !0,
+    clamp: o,
     suppressWarnings: r = !1
-  } = n;
-  if (e === "auto") return o;
+  } = e;
+  if (t === "auto") return n;
   let i = null;
-  if (typeof e == "number")
-    i = e;
-  else if (typeof e == "string") {
-    const c = yt(e);
-    c === null ? (r || console.error(
-      `Failed to convert "${e}" to pixels. Falling back to base ${o}.`
-    ), i = o) : i = c;
+  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 = o);
-  const d = a ? Math.round(i / o) * o : i, g = s !== void 0 ? fe(
-    d,
-    s.min ?? -1 / 0,
-    s.max ?? 1 / 0
-  ) : d;
-  return !r && g !== i && console.warn(`Normalized ${i} to ${g} to match base ${o}px.`), g;
+  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 Dt(e, n, o) {
-  if (!e || e[0] === void 0 && e[1] === void 0)
-    return n;
-  const a = e[0] !== void 0 ? dt(e[0], o) : n[0], s = e[1] !== void 0 ? dt(e[1], o) : n[1];
-  return [a, s];
+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];
 }
-function D(e) {
-  if ("padding" in e && e.padding != null)
-    return de(e.padding);
-  const n = "block" in e && e.block != null ? be(e.block) : { top: 0, bottom: 0 }, o = "inline" in e && e.inline != null ? me(e.inline) : { left: 0, right: 0 };
+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: n.top,
-    right: o.right,
-    bottom: n.bottom,
-    left: o.left
+    top: e.top,
+    right: n.right,
+    bottom: e.bottom,
+    left: n.left
   };
 }
-function de(e) {
-  if (typeof e == "number")
-    return { top: e, right: e, bottom: e, left: e };
-  if (Array.isArray(e)) {
-    if (e.length === 2) {
-      const [n, o] = e;
-      return { top: n, right: o, bottom: n, left: o };
+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 (e.length >= 4) {
-      const [n, o, a, s] = e;
+    if (t.length >= 4) {
+      const [e, n, s, o] = t;
       return {
-        top: n ?? 0,
-        right: o ?? 0,
-        bottom: a ?? 0,
-        left: s ?? 0
+        top: e ?? 0,
+        right: n ?? 0,
+        bottom: s ?? 0,
+        left: o ?? 0
       };
     }
   }
-  if (typeof e == "object" && !Array.isArray(e)) {
-    const n = e.top ?? 0, o = e.bottom ?? 0, a = e.left ?? 0, s = e.right ?? 0;
-    return { top: n, right: s, bottom: o, left: a };
+  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 be(e) {
-  if (typeof e == "number")
-    return { top: e, bottom: e };
-  if (Array.isArray(e)) {
-    const [n, o] = e;
+function Wt(t) {
+  if (typeof t == "number")
+    return { top: t, bottom: t };
+  if (Array.isArray(t)) {
+    const [e, n] = t;
     return {
-      top: n ?? 0,
-      bottom: o ?? 0
+      top: e ?? 0,
+      bottom: n ?? 0
     };
   }
-  return typeof e == "object" ? {
-    top: e.start ?? 0,
-    bottom: e.end ?? 0
+  return typeof t == "object" ? {
+    top: t.start ?? 0,
+    bottom: t.end ?? 0
   } : { top: 0, bottom: 0 };
 }
-function me(e) {
-  if (typeof e == "number")
-    return { left: e, right: e };
-  if (Array.isArray(e)) {
-    const [n, o] = e;
+function zt(t) {
+  if (typeof t == "number")
+    return { left: t, right: t };
+  if (Array.isArray(t)) {
+    const [e, n] = t;
     return {
-      left: n ?? 0,
-      right: o ?? 0
+      left: e ?? 0,
+      right: n ?? 0
     };
   }
-  return typeof e == "object" ? {
-    left: e.start ?? 0,
-    right: e.end ?? 0
+  return typeof t == "object" ? {
+    left: t.start ?? 0,
+    right: t.end ?? 0
   } : { left: 0, right: 0 };
 }
-function ge(e, n, o, a) {
-  const s = D({ padding: o });
-  if (a === "none")
-    return s;
-  if (a === "height") {
-    const r = e % n;
-    r !== 0 && (s.bottom += n - r);
+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 (a === "clamp") {
-    s.top = s.top % n;
-    const r = e % n;
-    r !== 0 && (s.bottom += n - r), s.bottom = s.bottom % n;
+  if (s === "clamp") {
+    o.top = o.top % e;
+    const r = t % e;
+    r !== 0 && (o.bottom += e - r), o.bottom = o.bottom % e;
   }
-  return s;
+  return o;
 }
-const J = (...e) => e.filter(Boolean).join(" ").trim(), I = (...e) => Object.assign({}, ...e.filter((n) => n !== void 0));
-function he(e, n) {
-  if (e)
-    if (typeof e == "function")
-      e(n);
+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(e, { current: n });
-      } catch (o) {
-        console.error("Error assigning ref:", o);
+        Object.assign(t, { current: e });
+      } catch (n) {
+        console.error("Error assigning ref:", n);
       }
 }
-function Zt(...e) {
-  return (n) => {
-    e.forEach((o) => {
-      he(o, n);
+function yt(...t) {
+  return (e) => {
+    t.forEach((n) => {
+      Ft(n, e);
     });
   };
 }
-const tn = (e, n) => {
-  let o = null;
-  const a = () => {
-    o && (clearTimeout(o), o = null);
-  };
-  return [(...r) => {
-    a(), o = setTimeout(() => e(...r), n);
-  }, a];
-}, Kt = (e) => {
-  let n = null, o = null;
-  return (...s) => {
-    o = s, n !== null && cancelAnimationFrame(n), n = requestAnimationFrame(() => {
-      e(...o), n = null, o = null;
+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 } : {};
+}
+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 bt(e) {
-  const [n, o] = f.useState({ width: 0, height: 0 }), a = f.useCallback(() => {
-    if (e.current)
-      try {
-        const r = e.current.getBoundingClientRect(), i = {
-          width: r ? Math.round(r.width) : 0,
-          height: r ? Math.round(r.height) : 0
-        };
-        o(
-          (d) => d.width === i.width && d.height === i.height ? d : i
-        );
-      } catch {
-        o({ width: 0, height: 0 });
-      }
-  }, [e]), s = f.useMemo(() => Kt(a), [a]);
-  return f.useLayoutEffect(() => {
-    a();
-  }, [a]), f.useLayoutEffect(() => {
-    if (!e.current) return;
-    const r = new ResizeObserver(() => {
-      s();
-    });
-    return r.observe(e.current), () => {
-      r.disconnect();
-    };
-  }, [e, s]), { ...n, refresh: s };
-}
-function pe({
-  totalLines: e,
-  lineHeight: n,
-  containerRef: o,
-  buffer: a = 0
-}) {
-  const s = ot(
-    () => typeof a == "number" ? a : parseInt(a, 10) || 0,
-    [a]
-  ), r = kt(() => {
-    const m = o.current;
-    if (!m) return { start: 0, end: e };
-    if (m.closest(".block"))
-      return { start: 0, end: e };
-    const b = m.getBoundingClientRect().top + window.scrollY, v = Math.max(0, window.scrollY - b - s), A = v + window.innerHeight + s * 2, M = Math.max(0, Math.floor(v / n)), h = Math.min(e, Math.ceil(A / n));
-    return { start: M, end: h };
-  }, [e, n, o, s]), [i, d] = re(r);
-  ve(["scroll", "resize"], () => {
-    c();
-  });
-  const g = kt(() => {
-    d((m) => {
-      const x = r();
-      return m.start !== x.start || m.end !== x.end ? x : m;
-    });
-  }, [r]), c = ot(() => Kt(g), [g]);
-  return Jt(() => {
-    const m = o.current;
-    if (!m) return;
-    const x = new IntersectionObserver(c, { threshold: 0 });
-    return x.observe(m), c(), () => {
-      x.disconnect();
-    };
-  }, [o, r, c]), i;
+function jt() {
+  const [t, e] = mt(!1);
+  return St(() => {
+    e(!0);
+  }, []), t;
 }
-function ve(e, n) {
-  const o = kt(n, [n]);
-  Jt(() => {
-    const a = () => o();
-    return e.forEach((s) => window.addEventListener(s, a)), () => e.forEach((s) => window.removeEventListener(s, a));
-  }, [e, o]);
-}
-function mt(e, {
-  base: n = 8,
-  snapping: o = "none",
-  spacing: a = {},
-  warnOnMisalignment: s = !1
-} = {}) {
-  if (n < 1)
-    throw new Error("Base must be >= 1 for baseline alignment.");
-  const { height: r } = bt(e), i = se(!1);
-  return ot(() => {
-    const d = D({ padding: a }), g = r % n === 0;
-    if (!g && s && process.env.NODE_ENV === "development" && console.warn(
-      `[useBaseline] Element height (${r}px) is not aligned with base (${n}px).`
-    ), o === "none")
-      return { padding: d, isAligned: g, height: r };
-    if (i.current)
-      return { padding: d, isAligned: g, height: r };
-    const c = ge(r, n, d, o);
-    return i.current = !0, { padding: c, isAligned: g, height: r };
-  }, [n, o, a, s, r]);
-}
-function xe(e, n) {
-  const { width: o } = bt(e);
-  return ot(() => {
-    const a = n.variant ?? "line", s = dt(n.gap ?? 0, { base: 1 });
-    if (!o)
-      return {
-        template: "none",
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: !1
-      };
-    try {
-      switch (a) {
-        case "line": {
-          const r = Math.max(1, Math.floor(o / (s + 1)) + 1);
-          return {
-            template: `repeat(${r}, 1px)`,
-            columnsCount: r,
-            calculatedGap: s,
-            isValid: !0
-          };
-        }
-        case "pattern": {
-          if (!qe(n.columns))
-            throw new Error('Invalid "pattern" columns array');
-          const r = n.columns.map((i) => typeof i == "number" ? `${i}px` : i);
-          return r.some((i) => i === "0" || i === "0px") ? {
-            template: "none",
-            columnsCount: 0,
-            calculatedGap: 0,
-            isValid: !1
-          } : {
-            template: r.join(" "),
-            columnsCount: r.length,
-            calculatedGap: s,
-            isValid: !0
-          };
-        }
-        case "fixed": {
-          const r = typeof n.columns == "number" ? n.columns : 0;
-          if (r < 1)
-            throw new Error(`Invalid columns count: ${r}`);
-          const i = n.columnWidth ? U(n.columnWidth) : "1fr";
-          return {
-            template: `repeat(${r}, ${i})`,
-            columnsCount: r,
-            calculatedGap: s,
-            isValid: !0
-          };
-        }
-        case "auto": {
-          const r = n.columnWidth ?? "auto";
-          if (r === "auto")
-            return {
-              template: "repeat(auto-fit, minmax(0, 1fr))",
-              columnsCount: 1,
-              calculatedGap: s,
-              isValid: !0
-            };
-          const i = typeof r == "number" ? `${r}px` : r.toString(), d = yt(i) ?? 0, g = d > 0 ? Math.max(1, Math.floor((o + s) / (d + s))) : 1;
-          return {
-            template: `repeat(auto-fit, minmax(${i}, 1fr))`,
-            columnsCount: g,
-            calculatedGap: s,
-            isValid: !0
-          };
-        }
-        default: {
-          console.warn(
-            `[useGuide] Unknown variant "${a}". Falling back to "line".`
-          );
-          const r = Math.max(1, Math.floor(o / (s + 1)) + 1);
-          return {
-            template: `repeat(${r}, 1px)`,
-            columnsCount: r,
-            calculatedGap: s,
-            isValid: !0
-          };
-        }
-      }
-    } catch (r) {
-      return console.warn("Error in useGuide:", r), {
-        template: "none",
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: !1
-      };
-    }
-  }, [n, o]);
+const xt = typeof window > "u";
+function Be(t, e) {
+  if (xt)
+    return e;
+  try {
+    return t();
+  } catch {
+    return e;
+  }
 }
-function X(e) {
-  const n = Qt();
-  return ot(() => Object.assign(
-    { base: n.base },
-    n[e]
-  ), [n, e]);
+function J(t, e, n) {
+  return !t || xt ? e : n;
 }
-function tt(e, n) {
-  return ot(() => {
-    const o = e ?? n;
-    return {
-      isShown: o === "visible",
-      isHidden: o === "hidden",
-      isNone: o === "none",
-      debugging: o
-    };
-  }, [e, n]);
+function wt({ children: t, fallback: e = null }) {
+  return jt() ? /* @__PURE__ */ y(K, { children: t }) : /* @__PURE__ */ y(K, { children: e });
 }
-const ke = {
-  /** 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)"
-}, we = {
-  /** Color for line variant */
-  line: "var(--bk-baseline-color-line-theme)",
-  /** Color for flat/block variant */
-  flat: "var(--bk-baseline-color-flat-theme)"
-}, ye = {
-  /** 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)"
-}, Ee = {
-  /** 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)"
-}, Se = {
-  /** 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)"
-}, Ce = {
-  /** 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)"
-}, Re = "var(--bk-padder-color-theme)", _e = {
-  /** Base unit for spacing calculations (in pixels) */
-  base: 8,
-  /** Baseline grid configuration */
-  baseline: {
-    variant: "line",
-    debugging: "hidden",
-    colors: we
-  },
-  /** Guide overlay configuration */
-  guide: {
-    variant: "line",
-    debugging: "hidden",
-    colors: ke
-  },
-  /** Spacer component configuration */
-  spacer: {
-    variant: "line",
-    debugging: "hidden",
-    colors: ye
-  },
-  /** Box component configuration */
-  box: {
-    debugging: "hidden",
-    colors: Ee
-  },
-  /** Stack/Flex component configuration */
-  stack: {
-    debugging: "hidden",
-    colors: Se
-  },
-  /** Layout component configuration */
-  layout: {
-    debugging: "hidden",
-    colors: Ce
-  },
-  /** Padder component configuration */
-  padder: {
-    debugging: "hidden",
-    color: Re
-  }
-}, Et = f.createContext(null);
-Et.displayName = "ConfigContext";
-const Qt = () => f.use(Et) ?? _e, je = ({
-  base: e,
-  baseline: n,
-  guide: o,
-  stack: a,
-  spacer: s,
-  layout: r,
-  box: i,
-  padder: d
-}) => ({
-  "--bkb": `${e}px`,
-  // Baseline Colors
-  "--bkbcl": n.colors.line,
-  "--bkbcf": n.colors.flat,
-  // Guide Colors
-  "--bkgcl": o.colors.line,
-  "--bkgcp": o.colors.pattern,
-  "--bkgca": o.colors.auto,
-  "--bkgcf": o.colors.fixed,
-  // Spacer Colors
-  "--bkscl": s.colors.line,
-  "--bkscf": s.colors.flat,
-  "--bksci": s.colors.text,
-  // Box Colors
-  "--bkxcl": i.colors.line,
-  "--bkxcf": i.colors.flat,
-  "--bkxci": i.colors.text,
-  // Flex Colors
-  "--bkkcl": a.colors.line,
-  "--bkkcf": a.colors.flat,
-  "--bkkci": a.colors.text,
-  // Layout Colors
-  "--bklcl": r.colors.line,
-  "--bklcf": r.colors.flat,
-  "--bklci": r.colors.text,
-  // Padder Color
-  "--bkpc": d.color
-});
-function St({
-  children: e,
-  base: n,
-  stack: o,
-  baseline: a,
-  guide: s,
-  layout: r,
-  spacer: i,
-  box: d,
-  padder: g
-}) {
-  const c = Qt(), m = f.useMemo(() => {
-    const x = {
-      base: n ?? c.base,
-      baseline: { ...c.baseline, ...a },
-      guide: { ...c.guide, ...s },
-      spacer: { ...c.spacer, ...i },
-      box: { ...c.box, ...d },
-      stack: { ...c.stack, ...o },
-      layout: { ...c.layout, ...r },
-      padder: { ...c.padder, ...g }
+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();
     };
-    return {
-      ...x,
-      cssVariables: je(x)
+  }, [t, o]), { ...e, refresh: o };
+}
+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,
-    c.base,
-    c.baseline,
-    c.guide,
-    c.spacer,
-    c.box,
-    c.stack,
-    c.layout,
-    c.padder,
-    a,
-    s,
-    i,
-    d,
-    o,
-    r,
-    g
-  ]);
-  return /* @__PURE__ */ _.jsx(Et, { value: m, children: e });
+  }, [n, r, d]), i;
+}
+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]);
+}
+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]);
 }
-const Oe = "spr_4aLVm", Te = "line_lUa33", Ae = "flat_zXVQF", Pt = {
-  spr: Oe,
-  line: Te,
-  flat: Ae
-}, $e = f.memo(function({
-  height: n,
-  width: o,
-  indicatorNode: a,
-  debugging: s,
+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: d,
-  className: g,
-  style: c,
-  ...m
+  color: a,
+  className: c,
+  style: d,
+  children: f,
+  ssrMode: u = !1,
+  ...M
 }) {
-  const x = f.useRef(null), b = X("spacer"), { isShown: v } = tt(s, b.debugging), A = r ?? b.variant, M = i ?? b.base, [h, $] = Dt(
-    [o, n],
-    [0, 0],
-    { base: M, suppressWarnings: !0 }
-  ), N = f.useMemo(() => !v || !a ? null : [
-    $ !== 0 && /* @__PURE__ */ _.jsx("span", { children: a($, "height") }, "height"),
-    h !== 0 && /* @__PURE__ */ _.jsx("span", { children: a(h, "width") }, "width")
-  ].filter(Boolean), [v, a, $, h]), k = f.useMemo(() => ({
-    "--bksh": "100%",
-    "--bksw": "100%",
-    "--bksb": `${b.base}px`,
-    "--bksci": "var(--bk-spacer-color-text-theme)",
-    "--bkscl": "var(--bk-spacer-color-line-theme)",
-    "--bkscf": "var(--bk-spacer-color-flat-theme)"
-  }), [b.base]), C = f.useCallback(
-    (V, O) => (V === "--bksw" || V === "--bksh") && O === "100%" ? {} : O !== k[V] ? { [V]: O } : {},
-    [k]
-  ), E = f.useMemo(() => {
-    const V = U($ || "100%"), O = U(h || "100%"), R = `${i || b.base}px`, w = {
-      ...C("--bksh", V),
-      ...C("--bksw", O),
-      ...C("--bksb", R),
-      ...C(
-        "--bksci",
-        d ?? b.colors.text
-      ),
-      ...C(
-        "--bkscl",
-        d ?? b.colors.line
-      ),
-      ...C(
-        "--bkscf",
-        d ?? b.colors.flat
-      )
+  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 I(w, c);
+    return q(L, d);
   }, [
-    C,
+    x,
     $,
+    a,
     h,
-    b.base,
-    d,
-    b.colors.text,
-    b.colors.line,
-    b.colors.flat,
-    c
+    b.colors,
+    G,
+    d
   ]);
-  return /* @__PURE__ */ _.jsx(
+  return /* @__PURE__ */ Z(
     "div",
     {
-      ref: x,
+      ref: v,
       "data-testid": "spacer",
-      className: J(Pt.spr, v && Pt[A], g),
-      "data-variant": A,
-      style: E,
-      ...m,
-      children: N
+      className: z(
+        ct.spr,
+        w && ct[g],
+        c
+      ),
+      "data-variant": g,
+      "data-height": typeof $ == "number" ? `${$}px` : $,
+      style: A,
+      ...M,
+      children: [
+        m,
+        f
+      ]
     }
   );
-}), Me = "pad_I0i9S", Ne = "v_E0FRN", xt = {
-  pad: Me,
-  v: Ne
-}, Ct = f.memo(
-  f.forwardRef(function({
-    children: n,
-    className: o,
-    debugging: a,
-    height: s,
+}), 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: d,
-    ...g
-  }, c) {
-    const m = X("padder"), { variant: x } = X("spacer"), b = f.useMemo(
-      () => D(g),
-      [g]
-    ), { isShown: v, isNone: A, debugging: M } = tt(
-      a,
-      m.debugging
-    ), h = !A, $ = f.useRef(null), {
-      padding: { top: N, left: k, bottom: C, right: E }
-    } = mt($, {
-      base: m.base,
+    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: b,
-      warnOnMisalignment: !A
-    }), V = Zt(c, $), O = f.useMemo(() => {
-      const w = {};
-      return d !== "fit-content" && (w["--bkpw"] = U(d || "fit-content")), s !== "fit-content" && (w["--bkph"] = U(s || "fit-content")), m.base !== 8 && (w["--bkpb"] = `${m.base}px`), m.color !== "var(--bk-padder-color-theme)" && (w["--bkpc"] = m.color), h || ((N > 0 || C > 0) && (w.paddingBlock = `${N}px ${C}px`), (k > 0 || E > 0) && (w.paddingInline = `${k}px ${E}px`)), I(w, i);
+      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
+      );
     }, [
-      d,
-      s,
-      m.base,
-      m.color,
+      a,
+      o,
+      u.base,
+      u.color,
       h,
-      N,
-      E,
-      C,
-      k,
+      m.top,
+      m.right,
+      m.bottom,
+      m.left,
       i
-    ]), R = (w, j) => /* @__PURE__ */ _.jsx(
-      $e,
-      {
-        variant: x,
-        debugging: M,
-        indicatorNode: r,
-        height: j !== "100%" ? j : void 0,
-        width: w !== "100%" ? w : void 0
-      }
+    ]), p = l.useMemo(
+      () => oe(M, g, r),
+      [M, g, r]
     );
-    return h ? /* @__PURE__ */ _.jsxs(
+    return h ? /* @__PURE__ */ Z(
       "div",
       {
-        ref: V,
+        ref: G,
         "data-testid": "padder",
-        className: J(xt.pad, v && xt.v, o),
-        style: O,
+        className: z(nt.pad, b && nt.v, n),
+        style: A,
         children: [
-          /* @__PURE__ */ _.jsxs(_.Fragment, { children: [
-            N > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridColumn: "1 / -1" }, children: R("100%", N) }),
-            k > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridRow: "2 / 3" }, children: R(k, "100%") })
+          /* @__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__ */ _.jsx("div", { style: { gridRow: "2 / 3", gridColumn: "2 / 3" }, children: n }),
-          /* @__PURE__ */ _.jsxs(_.Fragment, { children: [
-            E > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridRow: "2 / 3" }, children: R(E, "100%") }),
-            C > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridColumn: "1 / -1" }, children: R("100%", C) })
+          /* @__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__ */ _.jsx(
+    ) : /* @__PURE__ */ y(
       "div",
       {
-        ref: V,
+        ref: G,
         "data-testid": "padder",
-        className: J(xt.pad, o),
-        style: O,
-        children: n
+        className: z(nt.pad, n),
+        style: A,
+        children: e
       }
     );
   })
-), Ve = "lay_yGGkG", Ge = "v_uVoBP", Ft = {
-  lay: Ve,
-  v: Ge
-};
-function Ht(e) {
-  return typeof e == "number" ? `repeat(${e}, 1fr)` : typeof e == "string" ? e : Array.isArray(e) ? e.map((n) => typeof n == "number" ? `${n}px` : n).join(" ") : "repeat(auto-fit, minmax(100px, 1fr))";
-}
-const en = f.memo(function({
-  children: n,
-  columns: o,
-  rows: a,
-  rowGap: s,
-  columnGap: r,
-  gap: i,
+), 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,
-  width: g,
-  indicatorNode: c,
-  justifyItems: m,
-  alignItems: x,
-  justifyContent: b,
-  alignContent: v,
-  className: A,
-  variant: M,
-  style: h,
-  debugging: $,
-  ...N
+  indicatorNode: f,
+  justifyContent: u,
+  justifyItems: M,
+  rowGap: v,
+  rows: b,
+  style: w,
+  variant: g,
+  width: h,
+  ssrMode: D = !1,
+  ...S
 }) {
-  const k = X("layout"), { isShown: C } = tt($, k.debugging), E = f.useRef(null), V = f.useMemo(
-    () => D(N),
-    [N]
-  ), { padding: O } = mt(E, {
-    base: k.base,
+  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: V,
+    spacing: p,
     warnOnMisalignment: !0
-  }), R = f.useMemo(
-    () => Ht(o),
-    [o]
-  ), w = f.useMemo(
-    () => a ? Ht(a) : "auto",
-    [a]
-  ), j = f.useMemo(
-    () => ({
-      "--bklw": "auto",
-      "--bklh": "auto",
-      "--bklcl": k.colors.line,
-      "--bklcf": k.colors.flat,
-      "--bklci": k.colors.text
-    }),
-    [k.colors.line, k.colors.flat, k.colors.text]
-  ), y = f.useCallback(
-    (B, W) => (B === "--bklw" || B === "--bklh") && W === "auto" ? {} : W !== j[B] ? { [B]: W } : {},
-    [j]
-  ), T = f.useMemo(
-    () => ({
-      ...i !== void 0 && { gap: U(i) },
-      ...s !== void 0 && { rowGap: U(s) },
-      ...r !== void 0 && { columnGap: U(r) }
-    }),
-    [i, s, r]
-  ), L = f.useMemo(() => {
-    const B = U(g || "auto"), W = U(d || "auto");
-    return I(
+  }), _ = {
+    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
-        ...y("--bklw", B),
-        ...y("--bklh", W),
-        ...y("--bklcl", k.colors.line),
-        ...y("--bklcf", k.colors.flat),
-        ...y("--bklci", k.colors.text),
+        ...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
-        ...R !== "repeat(auto-fit, minmax(100px, 1fr))" && {
-          "--bklgtc": R
+        ...L !== "repeat(auto-fill, minmax(100px, 1fr))" && {
+          "--bklgtc": L
         },
-        ...w !== "auto" && { "--bklgtr": w },
-        ...m && { "--bklji": m },
-        ...x && { "--bklai": x },
-        ...b && { "--bkljc": b },
-        ...v && { "--bklac": v },
+        ...C !== "auto" && { "--bklgtr": C },
+        ...M && { "--bklji": M },
+        ...n && { "--bklai": n },
+        ...u && { "--bkljc": u },
+        ...e && { "--bklac": e },
         // Include gap styles
-        ...T
+        ...R
       },
-      h
+      w
     );
   }, [
-    R,
-    w,
-    m,
-    x,
-    b,
-    v,
-    g,
-    d,
-    k.colors.line,
-    k.colors.flat,
-    k.colors.text,
-    y,
+    L,
+    C,
+    M,
+    n,
+    u,
+    e,
     h,
-    T
+    d,
+    x.colors,
+    E,
+    w,
+    R
   ]);
-  return /* @__PURE__ */ _.jsx(
-    St,
+  return /* @__PURE__ */ y(it, { spacer: { variant: g ?? "line" }, children: /* @__PURE__ */ y(
+    at,
     {
-      spacer: { variant: M ?? "line" },
-      children: /* @__PURE__ */ _.jsx(
-        Ct,
+      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",
         {
-          ref: E,
-          className: C ? Ft.v : "",
-          block: [O.top, O.bottom],
-          indicatorNode: c,
-          inline: [O.left, O.right],
-          debugging: $,
-          width: g,
-          height: d,
-          children: /* @__PURE__ */ _.jsx(
-            "div",
-            {
-              "data-testid": "layout",
-              className: J(A, Ft.lay),
-              style: L,
-              children: n
-            }
-          )
+          "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
         }
       )
     }
-  );
-}), We = "box_LHy8B", Be = "v_q3Ozc", It = {
-  box: We,
-  v: Be
-}, nn = f.memo(
-  f.forwardRef(function({
-    children: n,
-    snapping: o = "clamp",
-    debugging: a,
-    className: 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: d,
-    width: g,
-    height: c,
-    style: m,
-    ...x
-  }, b) {
-    const v = X("box"), { isShown: A, debugging: M } = tt(a, v.debugging), h = f.useRef(null), { top: $, bottom: N, left: k, right: C } = D(x), { padding: E } = mt(h, {
-      base: v.base,
-      snapping: o,
-      spacing: { top: $, bottom: N, left: k, right: C },
-      warnOnMisalignment: M !== "none"
-    }), V = f.useMemo(() => {
-      const j = {};
-      return d !== void 0 ? (j.gridColumn = `span ${d}`, j.gridRow = `span ${d}`) : (r !== void 0 && (j.gridColumn = `span ${r}`), i !== void 0 && (j.gridRow = `span ${i}`)), j;
-    }, [r, i, d]), O = f.useMemo(
-      () => ({
-        "--bkxw": "fit-content",
-        "--bkxh": "fit-content",
-        "--bkxb": `${v.base}px`,
-        "--bkxcl": v.colors.line
-      }),
-      [v.base, v.colors.line]
-    ), R = f.useCallback(
-      (j, y) => (j === "--bkxw" || j === "--bkxh") && y === "fit-content" ? {} : y !== O[j] ? { [j]: y } : {},
-      [O]
-    ), w = f.useMemo(() => {
-      const j = U(g || "fit-content"), y = U(c || "fit-content"), T = {
-        ...R("--bkxw", j),
-        ...R("--bkxh", y),
-        ...R("--bkxb", `${v.base}px`),
-        ...R("--bkxcl", v.colors.line)
-      };
-      return I(T, m);
+    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);
     }, [
-      v.base,
-      v.colors.line,
-      g,
+      b.base,
+      b.colors.line,
       c,
-      R,
-      m
+      d,
+      _,
+      f
     ]);
-    return /* @__PURE__ */ _.jsx(
+    return /* @__PURE__ */ y(
       "div",
       {
-        ref: Zt(b, h),
+        ref: yt(v, S),
         "data-testid": "box",
-        className: J(It.box, A && It.v, s),
-        style: I(w, V),
-        children: /* @__PURE__ */ _.jsx(
-          St,
+        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,
           {
-            base: 1,
-            spacer: { variant: "flat" },
-            children: /* @__PURE__ */ _.jsx(
-              Ct,
-              {
-                block: [E.top, E.bottom],
-                inline: [E.left, E.right],
-                width: "fit-content",
-                height: c,
-                debugging: M,
-                children: n
-              }
-            )
+            block: [p.top, p.bottom],
+            inline: [p.left, p.right],
+            width: "fit-content",
+            height: d,
+            debugging: g,
+            ssrMode: u,
+            children: e
           }
-        )
+        ) })
       }
     );
   })
-), Le = "stk_4t2AU", ze = "v_Uwir6", qt = {
-  stk: Le,
-  v: ze
-}, on = f.memo(function({
-  align: n = "flex-start",
-  children: o,
-  className: a,
-  columnGap: s,
+), 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: d,
-  height: g,
-  indicatorNode: c,
-  justify: m = "flex-start",
-  rowGap: x,
-  style: b,
+  gap: a,
+  height: c,
+  indicatorNode: d,
+  justify: f = "flex-start",
+  rowGap: u,
+  style: M,
   variant: v,
-  width: A,
-  ...M
+  width: b,
+  ssrMode: w = !1,
+  ...g
 }) {
-  const h = X("stack"), { isShown: $, debugging: N } = tt(r, h.debugging), k = f.useRef(null), C = f.useMemo(
-    () => D(M),
-    [M]
-  ), { padding: E } = mt(k, {
+  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: C,
-    warnOnMisalignment: !0
-  }), V = f.useMemo(
-    () => ({
-      rowGap: x,
-      columnGap: s,
-      ...d !== void 0 && { gap: d }
-    }),
-    [x, s, d]
-  ), O = f.useMemo(
-    () => ({
-      "--bkkw": "auto",
-      "--bkkh": "auto",
-      "--bkkcl": h.colors.line,
-      "--bkkcf": h.colors.flat,
-      "--bkkci": h.colors.text
-    }),
-    [h.colors.line, h.colors.flat, h.colors.text]
-  ), R = f.useCallback(
-    (y, T) => y === "--bkkw" && T === "auto" ? {} : y === "--bkkh" && T === "auto" ? {} : T !== O[y] ? { [y]: T } : {},
-    [O]
-  ), w = f.useMemo(() => {
-    const y = U(A || "auto"), T = U(g || "auto"), L = {
-      ...R("--bkkw", y),
-      ...R("--bkkh", T),
-      ...R("--bkkcl", h.colors.line),
-      ...R("--bkkcf", h.colors.flat),
-      ...R("--bkkci", h.colors.text)
+    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 I({
-      flexDirection: i,
-      justifyContent: m,
-      alignItems: n,
-      width: A,
-      height: g
-    }, V, L, b);
+    return q({
+      flexDirection: X,
+      justifyContent: f,
+      alignItems: e,
+      width: b,
+      height: c
+    }, L, et, M);
   }, [
     i,
-    m,
-    n,
-    A,
-    g,
+    f,
+    e,
+    b,
+    c,
     h.colors.line,
     h.colors.flat,
     h.colors.text,
-    R,
-    V,
-    b
-  ]), j = N === "none" ? {
-    ...w,
-    paddingBlock: `${E.top}px ${E.bottom}px`,
-    paddingInline: `${E.left}px ${E.right}px`
-  } : w;
-  return /* @__PURE__ */ _.jsx(
-    St,
+    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,
     {
-      spacer: { variant: v ?? "line" },
-      children: /* @__PURE__ */ _.jsx(
-        Ct,
+      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",
         {
-          ref: k,
-          className: $ ? qt.v : "",
-          block: [E.top, E.bottom],
-          inline: [E.left, E.right],
-          debugging: N,
-          indicatorNode: c,
-          width: A,
-          height: g,
-          children: /* @__PURE__ */ _.jsx(
-            "div",
-            {
-              "data-testid": "stack",
-              className: J(a, qt.stk),
-              style: j,
-              ...M,
-              children: o
-            }
-          )
+          "data-testid": "stack",
+          className: z(s, bt.stk, D && bt.v),
+          style: R,
+          ...g,
+          children: n
         }
       )
     }
-  );
-}), Ue = "gde_eT-MH", Ye = "line_xcGxq", Pe = "cols_LoPVp", Fe = "col_ZgTMC", nt = {
-  gde: Ue,
-  line: Ye,
-  cols: Pe,
-  col: Fe
-}, rn = f.memo(function({
-  className: n,
-  debugging: o,
-  style: a,
-  variant: s,
-  align: r = "start",
+  ) });
+}), 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: d,
-  width: g,
-  columns: c,
-  columnWidth: m,
-  ...x
+  height: a,
+  width: c,
+  columns: d,
+  columnWidth: f,
+  maxWidth: u,
+  color: M,
+  children: v,
+  ssrMode: b = !1,
+  ...w
 }) {
-  const b = X("guide"), v = s ?? b.variant, { isShown: A } = tt(o, b.debugging), M = f.useRef(null), { width: h, height: $ } = bt(M), { top: N, right: k, bottom: C, left: E } = f.useMemo(() => D(x), [x]), V = f.useMemo(() => {
-    const W = dt(i);
-    return {
-      line: {
-        variant: "line",
-        gap: W - 1,
-        base: b.base
+  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
       },
-      auto: m ? {
-        variant: "auto",
-        columnWidth: m,
-        gap: W,
-        base: b.base
-      } : null,
-      pattern: Array.isArray(c) ? {
-        variant: "pattern",
-        columns: c,
-        gap: W,
-        base: b.base
-      } : null,
-      fixed: typeof c == "number" ? {
-        variant: "fixed",
-        columns: c,
-        columnWidth: m,
-        gap: W,
-        base: b.base
-      } : null
-    }[v] ?? {
-      variant: "line",
-      gap: W - 1,
-      base: b.base
+      "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 } : {}
     };
-  }, [i, b.base, m, c, v]), {
-    template: O,
-    columnsCount: R,
-    calculatedGap: w
-  } = xe(M, V), j = f.useMemo(() => ({
-    "--bkgg": `${w}px`,
-    "--bkgj": "start",
-    "--bkgcl": b.colors.line,
-    "--bkgcp": b.colors.pattern,
-    "--bkgw": "100vw",
-    "--bkgh": "100vh"
-  }), [w, b.colors.line, b.colors.pattern]), y = f.useCallback(
-    (W, P) => W === "--bkgw" && P === "100vw" || W === "--bkgh" && P === "100vh" ? {} : P !== j[W] ? { [W]: P } : {},
-    [j]
-  ), T = {
-    "--bkgg": `${w}px`,
-    "--bkgj": r,
-    "--bkgcl": b.colors.line,
-    "--bkgcp": b.colors.pattern,
-    "--bkgpb": `${N}px ${C}px`,
-    "--bkgpi": `${E}px ${k}px`,
-    "--bkgt": O,
-    "--bkgw": U(g ?? h, 0) || "100vw",
-    "--bkgh": U(d ?? $, 0) || "100vh"
-  }, L = {
-    ...y("--bkgw", T["--bkgw"]),
-    ...y("--bkgh", T["--bkgh"]),
-    ...y("--bkgj", r),
-    ...y("--bkgcl", b.colors.line),
-    ...y("--bkgcp", b.colors.pattern),
-    ...y("--bkgg", `${w}px`)
-  }, B = I(T, L, a);
-  return /* @__PURE__ */ _.jsx(
+    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: M,
+      ref: D,
       "data-testid": "guide",
-      className: J(
-        nt.gde,
-        n,
-        A ? nt.v : nt.h,
-        v === "line" && nt.line
+      className: z(
+        H.gde,
+        e,
+        h ? H.v : H.h,
+        o === "line" && H.line
       ),
-      "data-variant": v,
+      "data-variant": o,
       style: B,
-      ...x,
-      children: A && /* @__PURE__ */ _.jsx("div", { className: nt.cols, "data-variant": v, children: Array.from({ length: R }, (W, P) => {
-        const ct = b.colors[v] ?? b.colors.line;
-        return /* @__PURE__ */ _.jsx(
-          "div",
-          {
-            className: nt.col,
-            "data-column-index": P,
-            "data-variant": v,
-            style: { backgroundColor: ct }
-          },
-          P
-        );
-      }) })
+      ...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
+      ]
     }
   );
-}), He = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, Ie = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e != "string" ? !1 : e === "auto" || e === "100%" || He.test(e), qe = (e) => Array.isArray(e) && e.length > 0 && e.every(Ie), sn = (e) => {
-  const n = [...Object.keys(wt), ...Xt];
-  return typeof e == "number" || typeof e == "string" && n.some((o) => e.endsWith(o));
-}, an = (e) => typeof e == "string" && De.includes(e), Rt = (e) => typeof e == "object" && e !== null, cn = (e) => Rt(e) && e.variant === "line", ln = (e) => Rt(e) && "columns" in e && !("variant" in e), un = (e) => Rt(e) && "columnWidth" in e && !("variant" in e) && !("columns" in e), Je = "bas_qAJSK", Xe = "row_y6My5", ft = {
-  bas: Je,
-  row: Xe
-}, fn = f.memo(function({
-  className: n,
-  debugging: o,
-  style: a,
-  variant: s,
+}), 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 T(t) {
+  const e = gt();
+  return Q(() => Object.assign(
+    { base: e.base },
+    e[t]
+  ), [e, 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]);
+}
+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: d,
-  ...g
+  base: a,
+  color: c,
+  ssrMode: d = !1,
+  ...f
 }) {
-  const c = X("baseline"), m = s ?? c.variant, x = d ?? c.base, { isShown: b } = tt(o, c.debugging), v = f.useRef(null), { width: A, height: M } = bt(v), [h, $] = f.useMemo(() => Dt(
+  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],
-    [A, M]
-  ), [i, r, A, M]), { top: N, right: k, bottom: C, left: E } = f.useMemo(
-    () => D(g),
-    [g]
-  ), V = f.useMemo(() => {
-    const T = ($ ?? 0) - (N + C);
-    return Math.max(1, Math.floor(T / x));
-  }, [$, N, C, x]), { start: O, end: R } = pe({
-    totalLines: V,
-    lineHeight: x,
+    [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
-  }), w = m === "line" ? c.colors.line : c.colors.flat, j = f.useMemo(() => {
-    const T = [N, k, C, E].map((L) => L ? `${L}px` : "0").join(" ");
-    return I(
+  }), 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(
       {
-        "--bkbw": i ? `${h}px` : "100%",
-        "--bkbh": r ? `${$}px` : "100%",
-        ...T !== "0 0 0 0" && { padding: T }
+        ...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 }
       },
-      a
+      s
     );
   }, [
-    N,
-    k,
-    C,
-    E,
     i,
-    h,
     r,
-    $,
-    a
-  ]), y = f.useCallback(
-    (T) => {
-      const L = m === "line" ? "1px" : `${x}px`, B = m === "line" ? c.colors.line : c.colors.flat;
-      return I({
-        "--bkrt": `${T * x}px`,
-        ...L !== "1px" && { "--bkrh": L },
-        ...w !== B && { "--bkbcl": w }
+    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
       });
     },
-    [x, m, w, c.colors.line, c.colors.flat]
+    [
+      a,
+      o,
+      B,
+      u.colors.line,
+      u.colors.flat,
+      u.base
+    ]
   );
-  return /* @__PURE__ */ _.jsx(
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: v,
       "data-testid": "baseline",
-      className: J(
-        ft.bas,
-        b ? ft.v : ft.h,
-        n
+      className: z(
+        F.bas,
+        M ? F.v : F.h,
+        e
       ),
-      style: j,
-      ...g,
-      children: b && Array.from({ length: R - O }, (T, L) => {
-        const B = L + O;
-        return /* @__PURE__ */ _.jsx(
+      style: V,
+      ...f,
+      children: M && Array.from({ length: p - A }, (C, E) => {
+        const R = E + A;
+        return /* @__PURE__ */ y(
           "div",
           {
-            className: ft.row,
-            "data-row-index": B,
-            style: y(B)
+            className: F.row,
+            "data-row-index": R,
+            style: L(R)
           },
-          B
+          R
         );
       })
     }
   );
-}), De = ["start", "center", "end"], dn = ["line", "flat"];
+}), 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 {
-  wt as ABSOLUTE_UNIT_CONVERSIONS,
-  fn as Baseline,
-  nn as Box,
-  St as Config,
-  _e as DEFAULT_CONFIG,
-  De as GRID_ALIGNMENTS,
-  rn as Guide,
-  en as Layout,
-  dn as PADD_VARIANTS,
-  Ct as Padder,
-  Xt as RELATIVE_UNITS,
-  $e as Spacer,
-  on as Stack,
-  ge as calculateSnappedSpacing,
-  fe as clamp,
-  yt as convertValue,
-  je as createCSSVariables,
-  tn as debounce,
-  U as formatValue,
-  un as isAutoCalculatedGuide,
-  an as isGuideAlignment,
-  ln as isGuideColumnConfig,
-  cn as isGuideLineConfig,
-  sn as isGuideValue,
-  Ie as isValidGuideColumnValue,
-  qe as isValidGuidePattern,
-  J as mergeClasses,
-  Zt as mergeRefs,
-  I as mergeStyles,
-  Ke as moduloize,
-  dt as normalizeValue,
-  Dt as normalizeValuePair,
-  D as parsePadding,
-  le as parseUnit,
-  Kt as rafThrottle,
-  Qe as round,
-  mt as useBaseline,
-  X as useConfig,
-  tt as useDebug,
-  Qt as useDefaultConfig,
-  xe as useGuide,
-  bt as useMeasure,
-  pe as useVirtual
+  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