baseline-kit 2.1.0 → 3.0.0

package/dist/index.mjs

@@ -1,900 +1,6 @@
-import * as c from "react";
-import at, { useMemo as ke, useCallback as Ee, useState as it, useLayoutEffect as Ke } from "react";
-var ge = { exports: {} }, de = {};
-/**
- * @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 Pe;
-function lt() {
-  if (Pe) return de;
-  Pe = 1;
-  var e = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-  function o(r, s, a) {
-    var i = null;
-    if (a !== void 0 && (i = "" + a), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      a = {};
-      for (var l in s)
-        l !== "key" && (a[l] = s[l]);
-    } else a = s;
-    return s = a.ref, {
-      $$typeof: e,
-      type: r,
-      key: i,
-      ref: s !== void 0 ? s : null,
-      props: a
-    };
-  }
-  return de.Fragment = n, de.jsx = o, de.jsxs = o, de;
-}
-var be = {};
-/**
- * @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 Ye;
-function ct() {
-  return Ye || (Ye = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(t) {
-      if (t == null) return null;
-      if (typeof t == "function")
-        return t.$$typeof === J ? null : t.displayName || t.name || null;
-      if (typeof t == "string") return t;
-      switch (t) {
-        case G:
-          return "Fragment";
-        case I:
-          return "Portal";
-        case M:
-          return "Profiler";
-        case p:
-          return "StrictMode";
-        case z:
-          return "Suspense";
-        case y:
-          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 E:
-            return (t.displayName || "Context") + ".Provider";
-          case D:
-            return (t._context.displayName || "Context") + ".Consumer";
-          case L:
-            var f = t.render;
-            return t = t.displayName, t || (t = f.displayName || f.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
-          case B:
-            return f = t.displayName || null, f !== null ? f : e(t.type) || "Memo";
-          case W:
-            f = t._payload, t = t._init;
-            try {
-              return e(t(f));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function n(t) {
-      return "" + t;
-    }
-    function o(t) {
-      try {
-        n(t);
-        var f = !1;
-      } catch {
-        f = !0;
-      }
-      if (f) {
-        f = console;
-        var d = f.error, C = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
-        return d.call(
-          f,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          C
-        ), n(t);
-      }
-    }
-    function r() {
-    }
-    function s() {
-      if (X === 0) {
-        Ae = console.log, $e = console.info, Ne = console.warn, Ve = console.error, Ge = console.group, De = console.groupCollapsed, We = console.groupEnd;
-        var t = {
-          configurable: !0,
-          enumerable: !0,
-          value: r,
-          writable: !0
-        };
-        Object.defineProperties(console, {
-          info: t,
-          log: t,
-          warn: t,
-          error: t,
-          group: t,
-          groupCollapsed: t,
-          groupEnd: t
-        });
-      }
-      X++;
-    }
-    function a() {
-      if (X--, X === 0) {
-        var t = { configurable: !0, enumerable: !0, writable: !0 };
-        Object.defineProperties(console, {
-          log: P({}, t, { value: Ae }),
-          info: P({}, t, { value: $e }),
-          warn: P({}, t, { value: Ne }),
-          error: P({}, t, { value: Ve }),
-          group: P({}, t, { value: Ge }),
-          groupCollapsed: P({}, t, { value: De }),
-          groupEnd: P({}, t, { value: We })
-        });
-      }
-      0 > X && console.error(
-        "disabledDepth fell below zero. This is a bug in React. Please file an issue."
-      );
-    }
-    function i(t) {
-      if (ye === void 0)
-        try {
-          throw Error();
-        } catch (d) {
-          var f = d.stack.trim().match(/\n( *(at )?)/);
-          ye = f && f[1] || "", He = -1 < d.stack.indexOf(`
-    at`) ? " (<anonymous>)" : -1 < d.stack.indexOf("@") ? "@unknown:0:0" : "";
-        }
-      return `
-` + ye + t + He;
-    }
-    function l(t, f) {
-      if (!t || xe) return "";
-      var d = Se.get(t);
-      if (d !== void 0) return d;
-      xe = !0, d = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
-      var C = null;
-      C = _.H, _.H = null, s();
-      try {
-        var Y = {
-          DetermineComponentFrameRoot: function() {
-            try {
-              if (f) {
-                var te = function() {
-                  throw Error();
-                };
-                if (Object.defineProperty(te.prototype, "props", {
-                  set: function() {
-                    throw Error();
-                  }
-                }), typeof Reflect == "object" && Reflect.construct) {
-                  try {
-                    Reflect.construct(te, []);
-                  } catch (ee) {
-                    var me = ee;
-                  }
-                  Reflect.construct(t, [], te);
-                } else {
-                  try {
-                    te.call();
-                  } catch (ee) {
-                    me = ee;
-                  }
-                  t.call(te.prototype);
-                }
-              } else {
-                try {
-                  throw Error();
-                } catch (ee) {
-                  me = ee;
-                }
-                (te = t()) && typeof te.catch == "function" && te.catch(function() {
-                });
-              }
-            } catch (ee) {
-              if (ee && me && typeof ee.stack == "string")
-                return [ee.stack, me.stack];
-            }
-            return [null, null];
-          }
-        };
-        Y.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
-        var N = Object.getOwnPropertyDescriptor(
-          Y.DetermineComponentFrameRoot,
-          "name"
-        );
-        N && N.configurable && Object.defineProperty(
-          Y.DetermineComponentFrameRoot,
-          "name",
-          { value: "DetermineComponentFrameRoot" }
-        );
-        var v = Y.DetermineComponentFrameRoot(), Q = v[0], ce = v[1];
-        if (Q && ce) {
-          var F = Q.split(`
-`), ae = ce.split(`
-`);
-          for (v = N = 0; N < F.length && !F[N].includes(
-            "DetermineComponentFrameRoot"
-          ); )
-            N++;
-          for (; v < ae.length && !ae[v].includes(
-            "DetermineComponentFrameRoot"
-          ); )
-            v++;
-          if (N === F.length || v === ae.length)
-            for (N = F.length - 1, v = ae.length - 1; 1 <= N && 0 <= v && F[N] !== ae[v]; )
-              v--;
-          for (; 1 <= N && 0 <= v; N--, v--)
-            if (F[N] !== ae[v]) {
-              if (N !== 1 || v !== 1)
-                do
-                  if (N--, v--, 0 > v || F[N] !== ae[v]) {
-                    var fe = `
-` + F[N].replace(
-                      " at new ",
-                      " at "
-                    );
-                    return t.displayName && fe.includes("<anonymous>") && (fe = fe.replace("<anonymous>", t.displayName)), typeof t == "function" && Se.set(t, fe), fe;
-                  }
-                while (1 <= N && 0 <= v);
-              break;
-            }
-        }
-      } finally {
-        xe = !1, _.H = C, a(), Error.prepareStackTrace = d;
-      }
-      return F = (F = t ? t.displayName || t.name : "") ? i(F) : "", typeof t == "function" && Se.set(t, F), F;
-    }
-    function u(t) {
-      if (t == null) return "";
-      if (typeof t == "function") {
-        var f = t.prototype;
-        return l(
-          t,
-          !(!f || !f.isReactComponent)
-        );
-      }
-      if (typeof t == "string") return i(t);
-      switch (t) {
-        case z:
-          return i("Suspense");
-        case y:
-          return i("SuspenseList");
-      }
-      if (typeof t == "object")
-        switch (t.$$typeof) {
-          case L:
-            return t = l(t.render, !1), t;
-          case B:
-            return u(t.type);
-          case W:
-            f = t._payload, t = t._init;
-            try {
-              return u(t(f));
-            } catch {
-            }
-        }
-      return "";
-    }
-    function m() {
-      var t = _.A;
-      return t === null ? null : t.getOwner();
-    }
-    function k(t) {
-      if (U.call(t, "key")) {
-        var f = Object.getOwnPropertyDescriptor(t, "key").get;
-        if (f && f.isReactWarning) return !1;
-      }
-      return t.key !== void 0;
-    }
-    function b(t, f) {
-      function d() {
-        Ie || (Ie = !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)",
-          f
-        ));
-      }
-      d.isReactWarning = !0, Object.defineProperty(t, "key", {
-        get: d,
-        configurable: !0
-      });
-    }
-    function O() {
-      var t = e(this.type);
-      return ze[t] || (ze[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 x(t, f, d, C, Y, N) {
-      return d = N.ref, t = {
-        $$typeof: R,
-        type: t,
-        key: f,
-        props: N,
-        _owner: Y
-      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(t, "ref", {
-        enumerable: !1,
-        get: O
-      }) : 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 h(t, f, d, C, Y, N) {
-      if (typeof t == "string" || typeof t == "function" || t === G || t === M || t === p || t === z || t === y || t === A || typeof t == "object" && t !== null && (t.$$typeof === W || t.$$typeof === B || t.$$typeof === E || t.$$typeof === D || t.$$typeof === L || t.$$typeof === Z || t.getModuleId !== void 0)) {
-        var v = f.children;
-        if (v !== void 0)
-          if (C)
-            if (q(v)) {
-              for (C = 0; C < v.length; C++)
-                j(v[C], t);
-              Object.freeze && Object.freeze(v);
-            } 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 j(v, t);
-      } else
-        v = "", (t === void 0 || typeof t == "object" && t !== null && Object.keys(t).length === 0) && (v += " 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 ? C = "null" : q(t) ? C = "array" : t !== void 0 && t.$$typeof === R ? (C = "<" + (e(t.type) || "Unknown") + " />", v = " Did you accidentally export a JSX literal instead of a component?") : C = 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",
-          C,
-          v
-        );
-      if (U.call(f, "key")) {
-        v = e(t);
-        var Q = Object.keys(f).filter(function(F) {
-          return F !== "key";
-        });
-        C = 0 < Q.length ? "{key: someKey, " + Q.join(": ..., ") + ": ...}" : "{key: someKey}", Be[v + C] || (Q = 0 < Q.length ? "{" + Q.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} />`,
-          C,
-          v,
-          Q,
-          v
-        ), Be[v + C] = !0);
-      }
-      if (v = null, d !== void 0 && (o(d), v = "" + d), k(f) && (o(f.key), v = "" + f.key), "key" in f) {
-        d = {};
-        for (var ce in f)
-          ce !== "key" && (d[ce] = f[ce]);
-      } else d = f;
-      return v && b(
-        d,
-        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
-      ), x(t, v, N, Y, m(), d);
-    }
-    function j(t, f) {
-      if (typeof t == "object" && t && t.$$typeof !== st) {
-        if (q(t))
-          for (var d = 0; d < t.length; d++) {
-            var C = t[d];
-            T(C) && g(C, f);
-          }
-        else if (T(t))
-          t._store && (t._store.validated = 1);
-        else if (t === null || typeof t != "object" ? d = null : (d = K && t[K] || t["@@iterator"], d = typeof d == "function" ? d : null), typeof d == "function" && d !== t.entries && (d = d.call(t), d !== t))
-          for (; !(t = d.next()).done; )
-            T(t.value) && g(t.value, f);
-      }
-    }
-    function T(t) {
-      return typeof t == "object" && t !== null && t.$$typeof === R;
-    }
-    function g(t, f) {
-      if (t._store && !t._store.validated && t.key == null && (t._store.validated = 1, f = V(f), !Le[f])) {
-        Le[f] = !0;
-        var d = "";
-        t && t._owner != null && t._owner !== m() && (d = null, typeof t._owner.tag == "number" ? d = e(t._owner.type) : typeof t._owner.name == "string" && (d = t._owner.name), d = " It was passed a child from " + d + ".");
-        var C = _.getCurrentStack;
-        _.getCurrentStack = function() {
-          var Y = u(t.type);
-          return C && (Y += C() || ""), Y;
-        }, 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.',
-          f,
-          d
-        ), _.getCurrentStack = C;
-      }
-    }
-    function V(t) {
-      var f = "", d = m();
-      return d && (d = e(d.type)) && (f = `
-
-Check the render method of \`` + d + "`."), f || (t = e(t)) && (f = `
-
-Check the top-level render call using <` + t + ">."), f;
-    }
-    var $ = at, R = Symbol.for("react.transitional.element"), I = Symbol.for("react.portal"), G = Symbol.for("react.fragment"), p = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), E = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), y = Symbol.for("react.suspense_list"), B = Symbol.for("react.memo"), W = Symbol.for("react.lazy"), A = Symbol.for("react.offscreen"), K = Symbol.iterator, J = Symbol.for("react.client.reference"), _ = $.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, P = Object.assign, Z = Symbol.for("react.client.reference"), q = Array.isArray, X = 0, Ae, $e, Ne, Ve, Ge, De, We;
-    r.__reactDisabledLog = !0;
-    var ye, He, xe = !1, Se = new (typeof WeakMap == "function" ? WeakMap : Map)(), st = Symbol.for("react.client.reference"), Ie, ze = {}, Be = {}, Le = {};
-    be.Fragment = G, be.jsx = function(t, f, d, C, Y) {
-      return h(t, f, d, !1, C, Y);
-    }, be.jsxs = function(t, f, d, C, Y) {
-      return h(t, f, d, !0, C, Y);
-    };
-  }()), be;
-}
-var Fe;
-function ut() {
-  return Fe || (Fe = 1, process.env.NODE_ENV === "production" ? ge.exports = lt() : ge.exports = ct()), ge.exports;
-}
-var S = ut();
-function ft(e) {
-  const n = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
-  if (!n) return null;
-  const o = parseFloat(n[1]), r = n[2];
-  return { value: o, unit: r };
-}
-function H(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 ?? "";
-}
-const dt = {
-  parentSize: 0,
-  viewportWidth: typeof window < "u" ? window.innerWidth : 1920,
-  viewportHeight: typeof window < "u" ? window.innerHeight : 1080,
-  rootFontSize: 16,
-  parentFontSize: 16
-}, Ce = {
-  px: 1,
-  in: 96,
-  // 1in = 96px
-  cm: 37.8,
-  // 1cm = 37.8px
-  mm: 3.78,
-  // 1mm = 3.78px
-  pt: 1.33,
-  // 1pt = 1.33px
-  pc: 16
-  // 1pc = 16px
-}, Qe = ["em", "rem", "vh", "vw", "vmin", "vmax", "%"];
-function _e(e, n) {
-  if (typeof e == "number") return e;
-  if (typeof e != "string") return null;
-  const o = ft(e);
-  if (!o) return null;
-  const { value: r, unit: s } = o;
-  if (s in Ce)
-    return r * Ce[s];
-  if (s === "auto") return null;
-  if (Qe.includes(s)) {
-    const a = { ...dt, ...n };
-    switch (s) {
-      case "em":
-        return r * a.parentFontSize;
-      case "rem":
-        return r * a.rootFontSize;
-      case "vh":
-        return r / 100 * a.viewportHeight;
-      case "vw":
-        return r / 100 * a.viewportWidth;
-      case "vmin":
-        return r / 100 * Math.min(a.viewportWidth, a.viewportHeight);
-      case "vmax":
-        return r / 100 * Math.max(a.viewportWidth, a.viewportHeight);
-      case "%":
-        return r / 100 * a.parentSize;
-      default:
-        return null;
-    }
-  }
-  return null;
-}
-function yn(e, n, o) {
-  const r = (o == null ? void 0 : o.round) ?? !0, s = e === void 0 ? 0 : typeof e == "number" ? e : _e(e) ?? 0;
-  return `${(r ? Math.round(s) : s) % n}px`;
-}
-function bt(e, n, o) {
-  return Math.min(Math.max(e, n), o);
-}
-function xn(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 mt(e) {
-  const { height: n, top: o, bottom: r, base: s } = e, a = (n ?? 0) - (o + r);
-  return Math.max(1, Math.floor(a / s));
-}
-function Re(e, n = {}) {
-  const {
-    base: o = 8,
-    round: r = !0,
-    clamp: s,
-    suppressWarnings: a = !1
-  } = n;
-  if (e === "auto") return o;
-  let i = null;
-  if (typeof e == "number")
-    i = e;
-  else if (typeof e == "string") {
-    const m = _e(e);
-    m === null ? (a || console.error(
-      `Failed to convert "${e}" to pixels. Falling back to base ${o}.`
-    ), i = o) : i = m;
-  }
-  i === null && (i = o);
-  const l = r ? Math.round(i / o) * o : i, u = s !== void 0 ? bt(
-    l,
-    s.min ?? -1 / 0,
-    s.max ?? 1 / 0
-  ) : l;
-  return !a && u !== i && console.warn(`Normalized ${i} to ${u} to match base ${o}px.`), u;
-}
-function et(e, n, o) {
-  if (!e || e[0] === void 0 && e[1] === void 0)
-    return n;
-  const r = e[0] !== void 0 ? Re(e[0], o) : n[0], s = e[1] !== void 0 ? Re(e[1], o) : n[1];
-  return [r, s];
-}
-function ie(e) {
-  if ("padding" in e && e.padding != null)
-    return gt(e.padding);
-  const n = "block" in e && e.block != null ? ht(e.block) : { top: 0, bottom: 0 }, o = "inline" in e && e.inline != null ? kt(e.inline) : { left: 0, right: 0 };
-  return {
-    top: n.top,
-    right: o.right,
-    bottom: n.bottom,
-    left: o.left
-  };
-}
-function gt(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 };
-    }
-    if (e.length >= 4) {
-      const [n, o, r, s] = e;
-      return {
-        top: n ?? 0,
-        right: o ?? 0,
-        bottom: r ?? 0,
-        left: s ?? 0
-      };
-    }
-  }
-  if (typeof e == "object" && !Array.isArray(e)) {
-    const n = e.top ?? 0, o = e.bottom ?? 0, r = e.left ?? 0, s = e.right ?? 0;
-    return { top: n, right: s, bottom: o, left: r };
-  }
-  return { top: 0, right: 0, bottom: 0, left: 0 };
-}
-function ht(e) {
-  if (typeof e == "number")
-    return { top: e, bottom: e };
-  if (Array.isArray(e)) {
-    const [n, o] = e;
-    return {
-      top: n ?? 0,
-      bottom: o ?? 0
-    };
-  }
-  return typeof e == "object" ? {
-    top: e.start ?? 0,
-    bottom: e.end ?? 0
-  } : { top: 0, bottom: 0 };
-}
-function kt(e) {
-  if (typeof e == "number")
-    return { left: e, right: e };
-  if (Array.isArray(e)) {
-    const [n, o] = e;
-    return {
-      left: n ?? 0,
-      right: o ?? 0
-    };
-  }
-  return typeof e == "object" ? {
-    left: e.start ?? 0,
-    right: e.end ?? 0
-  } : { left: 0, right: 0 };
-}
-function vt(e, n, o, r) {
-  const s = ie({ padding: o });
-  if (r === "none")
-    return s;
-  if (r === "height") {
-    const a = e % n;
-    a !== 0 && (s.bottom += n - a);
-  }
-  if (r === "clamp") {
-    s.top = s.top % n;
-    const a = e % n;
-    a !== 0 && (s.bottom += n - a), s.bottom = s.bottom % n;
-  }
-  return s;
-}
-const pt = (e, n, o) => {
-  const r = {};
-  return e !== void 0 ? (r.gridColumn = `span ${e}`, r.gridRow = `span ${e}`) : (n !== void 0 && (r.gridColumn = `span ${n}`), o !== void 0 && (r.gridRow = `span ${o}`)), r;
-}, ne = (...e) => e.filter(Boolean).join(" ").trim(), oe = (...e) => Object.assign({}, ...e.filter((n) => n !== void 0));
-function yt(e, n) {
-  if (e)
-    if (typeof e == "function")
-      e(n);
-    else
-      try {
-        Object.assign(e, { current: n });
-      } catch (o) {
-        console.error("Error assigning ref:", o);
-      }
-}
-function tt(...e) {
-  return (n) => {
-    e.forEach((o) => {
-      yt(o, n);
-    });
-  };
-}
-function w(e, n, o) {
-  var l, u, m;
-  const r = typeof e == "string" ? e : e.key, s = typeof e == "string" ? n : e.value, a = typeof e == "string" ? o : e.defaultStyles, i = typeof e == "object" ? e.skipDimensions : void 0;
-  if (i) {
-    if ((l = i.fitContent) != null && l.includes(r) && s === "fit-content")
-      return {};
-    if ((u = i.auto) != null && u.includes(r) && s === "auto")
-      return {};
-    if ((m = i.fullSize) != null && m.includes(r) && (s === "100%" || s === "100vh" || s === "100vw"))
-      return {};
-  }
-  return s !== a[r] ? { [r]: s } : {};
-}
-const Sn = (e, n) => {
-  let o = null;
-  const r = () => {
-    o && (clearTimeout(o), o = null);
-  };
-  return [(...a) => {
-    r(), o = setTimeout(() => e(...a), n);
-  }, r];
-}, nt = (e) => {
-  let n = null, o = null;
-  return (...s) => {
-    o = s, n !== null && cancelAnimationFrame(n), n = requestAnimationFrame(() => {
-      e(...o), n = null, o = null;
-    });
-  };
-}, ot = typeof window > "u", xt = {
-  width: 1024,
-  height: 768
-};
-function wn(e, n) {
-  if (ot)
-    return n;
-  try {
-    return e();
-  } catch {
-    return n;
-  }
-}
-function re(e, n, o) {
-  return !e || ot ? n : o;
-}
-function ve(e) {
-  const [n, o] = c.useState({ width: 0, height: 0 }), r = c.useCallback(() => {
-    if (e.current)
-      try {
-        const a = e.current.getBoundingClientRect(), i = {
-          width: a ? Math.round(a.width) : 0,
-          height: a ? Math.round(a.height) : 0
-        };
-        o(
-          (l) => l.width === i.width && l.height === i.height ? l : i
-        );
-      } catch {
-        o({ width: 0, height: 0 });
-      }
-  }, [e]), s = c.useMemo(() => nt(r), [r]);
-  return c.useLayoutEffect(() => {
-    r();
-  }, [r]), c.useLayoutEffect(() => {
-    if (!e.current) return;
-    const a = new ResizeObserver(() => {
-      s();
-    });
-    return a.observe(e.current), () => {
-      a.disconnect();
-    };
-  }, [e, s]), { ...n, refresh: s };
-}
-function St({
-  totalLines: e,
-  lineHeight: n,
-  containerRef: o,
-  buffer: r = 0
-}) {
-  const s = ke(
-    () => typeof r == "number" ? r : parseInt(r, 10) || 0,
-    [r]
-  ), a = Ee(() => {
-    const k = o.current;
-    if (!k) return { start: 0, end: e };
-    if (k.closest(".block"))
-      return { start: 0, end: e };
-    const O = k.getBoundingClientRect().top + window.scrollY, x = Math.max(0, window.scrollY - O - s), h = x + window.innerHeight + s * 2, j = Math.max(0, Math.floor(x / n)), T = Math.min(e, Math.ceil(h / n));
-    return { start: j, end: T };
-  }, [e, n, o, s]), [i, l] = it(a);
-  wt(["scroll", "resize"], () => {
-    m();
-  });
-  const u = Ee(() => {
-    l((k) => {
-      const b = a();
-      return k.start !== b.start || k.end !== b.end ? b : k;
-    });
-  }, [a]), m = ke(() => nt(u), [u]);
-  return Ke(() => {
-    const k = o.current;
-    if (!k) return;
-    const b = new IntersectionObserver(m, { threshold: 0 });
-    return b.observe(k), m(), () => {
-      b.disconnect();
-    };
-  }, [o, a, m]), i;
-}
-function wt(e, n) {
-  const o = Ee(n, [n]);
-  Ke(() => {
-    const r = () => o();
-    return e.forEach((s) => window.addEventListener(s, r)), () => e.forEach((s) => window.removeEventListener(s, r));
-  }, [e, o]);
-}
-function pe(e, {
-  base: n = 8,
-  snapping: o = "none",
-  spacing: r = {},
-  warnOnMisalignment: s = !1
-} = {}) {
-  if (n < 1)
-    throw new Error("Base must be >= 1 for baseline alignment.");
-  const { height: a } = ve(e), i = c.useRef(!1), l = c.useRef(!1);
-  return c.useMemo(() => {
-    const u = ie({ padding: r }), m = a % n === 0;
-    if (!m && s && process.env.NODE_ENV === "development" && (l.current || (console.warn(
-      `[useBaseline] Element height (${a}px) is not aligned with base (${n}px).`
-    ), l.current = !0)), o === "none")
-      return { padding: u, isAligned: m, height: a };
-    if (i.current)
-      return { padding: u, isAligned: m, height: a };
-    const k = vt(a, n, u, o);
-    return i.current = !0, { padding: k, isAligned: m, height: a };
-  }, [n, o, r, s, a]);
-}
-function Et(e, n) {
-  const { width: o } = ve(e), r = c.useRef(!1);
-  return c.useMemo(() => {
-    const s = n.variant ?? "line", a = n.base ?? 8, i = Re(n.gap ?? 0, { base: a });
-    if (!o)
-      return {
-        template: "none",
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: !1
-      };
-    try {
-      switch (s) {
-        case "line": {
-          const l = Math.max(1, Math.floor(o / (i + 1)) + 1);
-          return {
-            template: `repeat(${l}, 1px)`,
-            columnsCount: l,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-        case "pattern": {
-          if (!bn(n.columns))
-            throw new Error('Invalid "pattern" columns array');
-          const l = n.columns.map((u) => typeof u == "number" ? `${u}px` : u);
-          return l.some((u) => u === "0" || u === "0px") ? {
-            template: "none",
-            columnsCount: 0,
-            calculatedGap: 0,
-            isValid: !1
-          } : {
-            template: l.join(" "),
-            columnsCount: l.length,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-        case "fixed": {
-          const l = typeof n.columns == "number" ? n.columns : 0;
-          if (l < 1)
-            throw new Error(`Invalid columns count: ${l}`);
-          const u = n.columnWidth ? H(n.columnWidth) : "1fr";
-          return {
-            template: `repeat(${l}, ${u})`,
-            columnsCount: l,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-        case "auto": {
-          const l = n.columnWidth ?? "auto";
-          if (l === "auto")
-            return {
-              template: "repeat(auto-fit, minmax(0, 1fr))",
-              columnsCount: 1,
-              calculatedGap: i,
-              isValid: !0
-            };
-          const u = typeof l == "number" ? `${l}px` : l.toString(), m = _e(u) ?? 0, k = m > 0 ? Math.max(1, Math.floor((o + i) / (m + i))) : 1;
-          return {
-            template: `repeat(auto-fit, minmax(${u}, 1fr))`,
-            columnsCount: k,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-        default: {
-          r.current || (console.warn(
-            `[useGuide] Unknown variant "${s}". Falling back to "line".`
-          ), r.current = !0);
-          const l = Math.max(1, Math.floor(o / (i + 1)) + 1);
-          return {
-            template: `repeat(${l}, 1px)`,
-            columnsCount: l,
-            calculatedGap: i,
-            isValid: !0
-          };
-        }
-      }
-    } catch (l) {
-      return console.warn("Error in useGuide:", l), {
-        template: "none",
-        columnsCount: 0,
-        calculatedGap: 0,
-        isValid: !1
-      };
-    }
-  }, [n, o]);
-}
-function se(e) {
-  const n = rt();
-  return ke(() => Object.assign(
-    { base: n.base },
-    n[e]
-  ), [n, e]);
-}
-function le(e, n) {
-  return ke(() => {
-    const o = e ?? n;
-    return {
-      isShown: o === "visible",
-      isHidden: o === "hidden",
-      isNone: o === "none",
-      debugging: o
-    };
-  }, [e, n]);
-}
+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)",
@@ -904,47 +10,47 @@ const Ct = {
   auto: "var(--bk-guide-color-auto-theme)",
   /** Color for fixed-column guides */
   fixed: "var(--bk-guide-color-fixed-theme)"
-}, Rt = {
+}, 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 = {
+}, $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)"
-}, jt = {
+}, 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)"
-}, Mt = {
+}, 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)"
-}, Ot = {
+}, 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)"
-}, Tt = "var(--bk-padder-color-theme)", At = {
+}, 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: Rt
+    colors: Mt
   },
   /** Guide overlay configuration */
   guide: {
@@ -956,1202 +62,1702 @@ const Ct = {
   spacer: {
     variant: "line",
     debugging: "hidden",
-    colors: _t
+    colors: $t
   },
   /** Box component configuration */
   box: {
     debugging: "hidden",
-    colors: jt
+    colors: Rt
   },
   /** Stack/Flex component configuration */
   stack: {
     debugging: "hidden",
-    colors: Mt
+    colors: Et
   },
   /** Layout component configuration */
   layout: {
     debugging: "hidden",
-    colors: Ot
+    colors: Vt
   },
   /** Padder component configuration */
   padder: {
     debugging: "hidden",
-    color: Tt
+    color: Gt
   }
-}, je = c.createContext(At);
-je.displayName = "ConfigContext";
-const rt = () => c.use(je), En = (e) => {
+}, rt = l.createContext(Ot);
+rt.displayName = "ConfigContext";
+const gt = () => l.use(rt), Dt = (t) => {
   const {
+    parentConfig: e,
     base: n,
-    baseline: o,
-    guide: r,
-    stack: s,
-    spacer: a,
-    layout: i,
-    box: l,
-    padder: u
+    baseline: s,
+    guide: o,
+    spacer: r,
+    box: i,
+    stack: a,
+    layout: c,
+    padder: d
+  } = t;
+  return {
+    base: n ?? e.base,
+    baseline: { ...e.baseline, ...s },
+    guide: { ...e.guide, ...o },
+    spacer: { ...e.spacer, ...r },
+    box: { ...e.box, ...i },
+    stack: { ...e.stack, ...a },
+    layout: { ...e.layout, ...c },
+    padder: { ...e.padder, ...d }
+  };
+};
+function it({
+  children: t,
+  base: e,
+  stack: n,
+  baseline: s,
+  guide: o,
+  layout: r,
+  spacer: i,
+  box: a,
+  padder: c
+}) {
+  const d = gt(), f = l.useMemo(() => Dt({
+    parentConfig: d,
+    base: e,
+    baseline: s,
+    guide: o,
+    spacer: i,
+    box: a,
+    stack: n,
+    layout: r,
+    padder: c
+  }), [d, e, s, o, i, a, n, r, c]);
+  return /* @__PURE__ */ y(rt, { value: f, children: t });
+}
+function _t(t) {
+  const e = t.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+  if (!e) return null;
+  const n = parseFloat(e[1]), s = e[2];
+  return { value: n, unit: s };
+}
+function O(t, e) {
+  return t === void 0 && e !== void 0 ? `${e}px` : t === "auto" || typeof t == "string" && /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(t) ? String(t) : typeof t == "number" ? `${t}px` : t ?? "";
+}
+const At = {
+  parentSize: 0,
+  viewportWidth: typeof window < "u" ? window.innerWidth : 1920,
+  viewportHeight: typeof window < "u" ? window.innerHeight : 1080,
+  rootFontSize: 16,
+  parentFontSize: 16
+}, lt = {
+  px: 1,
+  in: 96,
+  // 1in = 96px
+  cm: 37.8,
+  // 1cm = 37.8px
+  mm: 3.78,
+  // 1mm = 3.78px
+  pt: 1.33,
+  // 1pt = 1.33px
+  pc: 16
+  // 1pc = 16px
+}, It = [
+  "em",
+  "rem",
+  "vh",
+  "vw",
+  "vmin",
+  "vmax",
+  "%"
+];
+function pt(t, e) {
+  if (typeof t == "number") return t;
+  if (typeof t != "string") return null;
+  const n = _t(t);
+  if (!n) return null;
+  const { value: s, unit: o } = n;
+  if (o in lt)
+    return s * lt[o];
+  if (o === "auto") return null;
+  if (It.includes(o)) {
+    const r = { ...At, ...e };
+    switch (o) {
+      case "em":
+        return s * r.parentFontSize;
+      case "rem":
+        return s * r.rootFontSize;
+      case "vh":
+        return s / 100 * r.viewportHeight;
+      case "vw":
+        return s / 100 * r.viewportWidth;
+      case "vmin":
+        return s / 100 * Math.min(r.viewportWidth, r.viewportHeight);
+      case "vmax":
+        return s / 100 * Math.max(r.viewportWidth, r.viewportHeight);
+      case "%":
+        return s / 100 * r.parentSize;
+      default:
+        return null;
+    }
+  }
+  return null;
+}
+function Lt(t, e, n) {
+  return Math.min(Math.max(t, e), n);
+}
+function Nt(t) {
+  const { height: e, top: n, bottom: s, base: o } = t, r = (e ?? 0) - (n + s);
+  return Math.max(1, Math.floor(r / o));
+}
+function st(t, e = {}) {
+  const {
+    base: n = 8,
+    round: s = !0,
+    clamp: o,
+    suppressWarnings: r = !1
   } = e;
+  if (t === "auto") return n;
+  let i = null;
+  if (typeof t == "number")
+    i = t;
+  else if (typeof t == "string") {
+    const d = pt(t);
+    d === null ? (r || console.error(
+      `Failed to convert "${t}" to pixels. Falling back to base ${n}.`
+    ), i = n) : i = d;
+  }
+  i === null && (i = n);
+  const a = s ? Math.round(i / n) * n : i, c = o !== void 0 ? Lt(
+    a,
+    o.min ?? -1 / 0,
+    o.max ?? 1 / 0
+  ) : a;
+  return !r && c !== i && console.warn(`Normalized ${i} to ${c} to match base ${n}px.`), c;
+}
+function kt(t, e, n) {
+  if (!t || t[0] === void 0 && t[1] === void 0)
+    return e;
+  const s = t[0] !== void 0 ? st(t[0], n) : e[0], o = t[1] !== void 0 ? st(t[1], n) : e[1];
+  return [s, o];
+}
+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 {
-    "--bkb": `${n}px`,
-    // Baseline Colors
-    "--bkbcl": o.colors.line,
-    "--bkbcf": o.colors.flat,
-    // Guide Colors
-    "--bkgcl": r.colors.line,
-    "--bkgcp": r.colors.pattern,
-    "--bkgca": r.colors.auto,
-    "--bkgcf": r.colors.fixed,
-    // Spacer Colors
-    "--bkscl": a.colors.line,
-    "--bkscf": a.colors.flat,
-    "--bksci": a.colors.text,
-    // Box Colors
-    "--bkxcl": l.colors.line,
-    "--bkxcf": l.colors.flat,
-    "--bkxci": l.colors.text,
-    // Flex Colors
-    "--bkkcl": s.colors.line,
-    "--bkkcf": s.colors.flat,
-    "--bkkci": s.colors.text,
-    // Layout Colors
-    "--bklcl": i.colors.line,
-    "--bklcf": i.colors.flat,
-    "--bklci": i.colors.text,
-    // Padder Color
-    "--bkpc": u.color
+    top: e.top,
+    right: n.right,
+    bottom: e.bottom,
+    left: n.left
+  };
+}
+function Bt(t) {
+  if (typeof t == "number")
+    return { top: t, right: t, bottom: t, left: t };
+  if (Array.isArray(t)) {
+    if (t.length === 2) {
+      const [e, n] = t;
+      return { top: e, right: n, bottom: e, left: n };
+    }
+    if (t.length >= 4) {
+      const [e, n, s, o] = t;
+      return {
+        top: e ?? 0,
+        right: n ?? 0,
+        bottom: s ?? 0,
+        left: o ?? 0
+      };
+    }
+  }
+  if (typeof t == "object" && !Array.isArray(t)) {
+    const e = t.top ?? 0, n = t.bottom ?? 0, s = t.left ?? 0, o = t.right ?? 0;
+    return { top: e, right: o, bottom: n, left: s };
+  }
+  return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+function Wt(t) {
+  if (typeof t == "number")
+    return { top: t, bottom: t };
+  if (Array.isArray(t)) {
+    const [e, n] = t;
+    return {
+      top: e ?? 0,
+      bottom: n ?? 0
+    };
+  }
+  return typeof t == "object" ? {
+    top: t.start ?? 0,
+    bottom: t.end ?? 0
+  } : { top: 0, bottom: 0 };
+}
+function zt(t) {
+  if (typeof t == "number")
+    return { left: t, right: t };
+  if (Array.isArray(t)) {
+    const [e, n] = t;
+    return {
+      left: e ?? 0,
+      right: n ?? 0
+    };
+  }
+  return typeof t == "object" ? {
+    left: t.start ?? 0,
+    right: t.end ?? 0
+  } : { left: 0, right: 0 };
+}
+function Ht(t, e, n, s) {
+  const o = Y({ padding: n });
+  if (s === "none")
+    return o;
+  if (s === "height") {
+    const r = t % e;
+    r !== 0 && (o.bottom += e - r);
+  }
+  if (s === "clamp") {
+    o.top = o.top % e;
+    const r = t % e;
+    r !== 0 && (o.bottom += e - r), o.bottom = o.bottom % e;
+  }
+  return o;
+}
+const Tt = (t, e, n) => {
+  const s = {};
+  return t !== void 0 ? (s.gridColumn = `span ${t}`, s.gridRow = `span ${t}`) : (e !== void 0 && (s.gridColumn = `span ${e}`), n !== void 0 && (s.gridRow = `span ${n}`)), s;
+}, z = (...t) => t.filter(Boolean).join(" ").trim(), q = (...t) => Object.assign(
+  {},
+  ...t.filter((e) => e !== void 0)
+);
+function Ft(t, e) {
+  if (t)
+    if (typeof t == "function")
+      t(e);
+    else
+      try {
+        Object.assign(t, { current: e });
+      } catch (n) {
+        console.error("Error assigning ref:", n);
+      }
+}
+function yt(...t) {
+  return (e) => {
+    t.forEach((n) => {
+      Ft(n, e);
+    });
   };
-}, $t = (e) => {
-  const {
-    parentConfig: n,
-    base: o,
-    baseline: r,
-    guide: s,
-    spacer: a,
-    box: i,
-    stack: l,
-    layout: u,
-    padder: m
-  } = e;
-  return {
-    base: o ?? n.base,
-    baseline: { ...n.baseline, ...r },
-    guide: { ...n.guide, ...s },
-    spacer: { ...n.spacer, ...a },
-    box: { ...n.box, ...i },
-    stack: { ...n.stack, ...l },
-    layout: { ...n.layout, ...u },
-    padder: { ...n.padder, ...m }
+}
+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 Me({
-  children: e,
-  base: n,
-  stack: o,
-  baseline: r,
-  guide: s,
-  layout: a,
-  spacer: i,
-  box: l,
-  padder: u
+function jt() {
+  const [t, e] = mt(!1);
+  return St(() => {
+    e(!0);
+  }, []), t;
+}
+const xt = typeof window > "u";
+function Be(t, e) {
+  if (xt)
+    return e;
+  try {
+    return t();
+  } catch {
+    return e;
+  }
+}
+function J(t, e, n) {
+  return !t || xt ? e : n;
+}
+function wt({ children: t, fallback: e = null }) {
+  return jt() ? /* @__PURE__ */ y(K, { children: t }) : /* @__PURE__ */ y(K, { children: e });
+}
+function P(t) {
+  const [e, n] = l.useState({ width: 0, height: 0 }), s = l.useCallback(() => {
+    if (t.current)
+      try {
+        const r = t.current.getBoundingClientRect(), i = {
+          width: r ? Math.round(r.width) : 0,
+          height: r ? Math.round(r.height) : 0
+        };
+        n(
+          (a) => a.width === i.width && a.height === i.height ? a : i
+        );
+      } catch {
+        n({ width: 0, height: 0 });
+      }
+  }, [t]), o = l.useMemo(() => vt(s), [s]);
+  return l.useLayoutEffect(() => {
+    typeof window > "u" || s();
+  }, [s]), l.useLayoutEffect(() => {
+    if (typeof window > "u" || !t.current) return;
+    const r = new ResizeObserver(() => {
+      o();
+    });
+    return r.observe(t.current), () => {
+      r.disconnect();
+    };
+  }, [t, o]), { ...e, refresh: o };
+}
+function Ut({
+  totalLines: t,
+  lineHeight: e,
+  containerRef: n,
+  buffer: s = 0
 }) {
-  const m = rt(), k = c.useMemo(() => $t({
-    parentConfig: m,
-    base: n,
-    baseline: r,
-    guide: s,
-    spacer: i,
-    box: l,
-    stack: o,
-    layout: a,
-    padder: u
-  }), [
-    m,
-    n,
-    r,
-    s,
-    i,
-    l,
-    o,
-    a,
-    u
-  ]);
-  return /* @__PURE__ */ S.jsx(je, { value: k, children: e });
+  const o = Q(
+    () => typeof s == "number" ? s : parseInt(s, 10) || 0,
+    [s]
+  ), r = ot(() => {
+    const f = n.current;
+    if (!f) return { start: 0, end: t };
+    if (f.closest(".block"))
+      return { start: 0, end: t };
+    const M = f.getBoundingClientRect().top + window.scrollY, v = Math.max(0, window.scrollY - M - o), b = v + window.innerHeight + o * 2, w = Math.max(0, Math.floor(v / e)), g = Math.min(t, Math.ceil(b / e));
+    return { start: w, end: g };
+  }, [t, e, n, o]), [i, a] = mt(r);
+  qt(["scroll", "resize"], () => {
+    d();
+  });
+  const c = ot(() => {
+    a((f) => {
+      const u = r();
+      return f.start !== u.start || f.end !== u.end ? u : f;
+    });
+  }, [r]), d = Q(
+    () => vt(c),
+    [c]
+  );
+  return ht(() => {
+    const f = n.current;
+    if (!f) return;
+    const u = new IntersectionObserver(d, {
+      threshold: 0
+    });
+    return u.observe(f), d(), () => {
+      u.disconnect();
+    };
+  }, [n, r, d]), i;
+}
+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 Nt = "spr_zbcF6", Vt = "line_qHW69", Gt = "flat_gqixr", Ue = {
-  spr: Nt,
-  line: Vt,
-  flat: Gt
-}, Dt = (e, n, o, r) => ({
+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": `${e}px`,
-  "--bksci": n,
-  "--bkscl": r,
-  "--bkscf": o
-}), Wt = (e, n, o, r) => {
-  if (!e || !n) return null;
-  const s = typeof o == "number" ? o : 0, a = typeof r == "number" ? r : 0;
-  return /* @__PURE__ */ S.jsxs(S.Fragment, { children: [
-    a !== 0 && /* @__PURE__ */ S.jsx("span", { children: n(a, "height") }, "height"),
-    s !== 0 && /* @__PURE__ */ S.jsx("span", { children: n(s, "width") }, "width")
+  "--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")
   ] });
-}, Ht = c.memo(function({
-  height: n,
-  width: o,
-  indicatorNode: r,
-  debugging: s,
-  variant: a,
+}, Qt = l.memo(function({
+  height: e,
+  width: n,
+  indicatorNode: s,
+  debugging: o,
+  variant: r,
   base: i,
-  color: l,
-  className: u,
-  style: m,
-  children: k,
-  ssrMode: b = !1,
-  ...O
+  color: a,
+  className: c,
+  style: d,
+  children: f,
+  ssrMode: u = !1,
+  ...M
 }) {
-  const x = c.useRef(null), h = se("spacer"), { isShown: j } = le(s, h.debugging), T = a ?? h.variant, g = i ?? h.base, [V, $] = c.useState(!1);
-  c.useEffect(() => {
-    $(!0);
+  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 [R, I] = c.useMemo(() => et(
-    [o, n],
-    [0, 0],
-    { base: g, suppressWarnings: !0 }
-  ), [o, n, g]), G = re(
-    V && !b,
+  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
-    j && r !== void 0
-  ), p = c.useMemo(() => G ? Wt(
-    j,
-    r,
-    R,
-    I
-  ) : null, [G, j, r, R, I]), M = c.useMemo(
-    () => Dt(
-      g,
-      h.colors.text,
-      h.colors.flat,
-      h.colors.line
+    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
     ),
-    [g, h.colors]
-  ), D = c.useMemo(() => {
-    const E = H(I || "100%"), L = H(R || "100%"), z = `${g}px`, y = ["--bksw", "--bksh"], B = {
-      ...w({
+    [h, b.colors]
+  ), A = l.useMemo(() => {
+    const p = O($ || "100%"), B = O(x || "100%"), _ = `${h}px`, V = ["--bksw", "--bksh"], L = {
+      ...k({
         key: "--bksh",
-        value: E,
-        defaultStyles: M,
-        skipDimensions: { fullSize: y }
+        value: p,
+        defaultStyles: G,
+        skipDimensions: { fullSize: V }
       }),
-      ...w({
+      ...k({
         key: "--bksw",
-        value: L,
-        defaultStyles: M,
-        skipDimensions: { fullSize: y }
+        value: B,
+        defaultStyles: G,
+        skipDimensions: { fullSize: V }
       }),
       // Explicitly set --bksb to ensure it is always applied
-      "--bksb": z,
-      ...w({
-        key: "--bksci",
-        value: l ?? h.colors.text,
-        defaultStyles: M
+      "--bksb": _,
+      ...k({
+        key: "--bksct",
+        value: a ?? b.colors.text,
+        defaultStyles: G
       }),
-      ...w({
+      ...k({
         key: "--bkscl",
-        value: l ?? h.colors.line,
-        defaultStyles: M
+        value: a ?? b.colors.line,
+        defaultStyles: G
       }),
-      ...w({
+      ...k({
         key: "--bkscf",
-        value: l ?? h.colors.flat,
-        defaultStyles: M
+        value: a ?? b.colors.flat,
+        defaultStyles: G
       })
     };
-    return oe(B, m);
+    return q(L, d);
   }, [
-    R,
-    I,
-    l,
-    g,
-    h.colors,
-    M,
-    m
+    x,
+    $,
+    a,
+    h,
+    b.colors,
+    G,
+    d
   ]);
-  return /* @__PURE__ */ S.jsxs(
+  return /* @__PURE__ */ Z(
     "div",
     {
-      ref: x,
+      ref: v,
       "data-testid": "spacer",
-      className: ne(Ue.spr, j && Ue[T], u),
-      "data-variant": T,
-      style: D,
-      ...O,
+      className: z(
+        ct.spr,
+        w && ct[g],
+        c
+      ),
+      "data-variant": g,
+      "data-height": typeof $ == "number" ? `${$}px` : $,
+      style: A,
+      ...M,
       children: [
-        p,
-        k
+        m,
+        f
       ]
     }
   );
-}), It = "pad_w2-sL", zt = "v_lhGBy", we = {
-  pad: It,
-  v: zt
-}, Bt = (e, n, o, r) => {
-  const s = {};
-  return e !== "fit-content" && (s["--bkpw"] = H(e || "fit-content")), n !== "fit-content" && (s["--bkph"] = H(n || "fit-content")), o !== 8 && (s["--bkpb"] = `${o}px`), r !== "var(--bk-padder-color-theme)" && (s["--bkpc"] = r), s;
-}, Lt = (e, n) => {
-  const { top: o, right: r, bottom: s, left: a } = n, i = {};
-  return e || ((o > 0 || s > 0) && (i.paddingBlock = `${o}px ${s}px`), (a > 0 || r > 0) && (i.paddingInline = `${a}px ${r}px`)), i;
-}, Pt = (e, n, o) => {
-  const r = e || "line", s = n || "none", a = (i, l) => /* @__PURE__ */ S.jsx(
-    Ht,
+}), 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: r,
-      debugging: l === 0 || i === 0 ? "none" : s,
-      indicatorNode: o,
-      height: l !== "100%" ? l : void 0,
+      variant: s,
+      debugging: a === 0 || i === 0 ? "none" : o,
+      indicatorNode: n,
+      height: a !== "100%" ? a : void 0,
       width: i !== "100%" ? i : void 0
     }
   );
-  return a.displayName = "PadderSpacer", a;
-}, Oe = c.memo(
-  c.forwardRef(function({
-    children: n,
-    className: o,
-    debugging: r,
-    height: s,
-    indicatorNode: a,
+  return r.displayName = "PadderSpacer", r;
+}, at = l.memo(
+  l.forwardRef(function({
+    children: e,
+    className: n,
+    debugging: s,
+    height: o,
+    indicatorNode: r,
     style: i,
-    width: l,
-    ssrMode: u = !1,
-    ...m
-  }, k) {
-    const b = se("padder"), { variant: O } = se("spacer"), x = c.useMemo(
-      () => ie(m),
-      [m]
-    ), { isShown: h, isNone: j, debugging: T } = le(
-      r,
-      b.debugging
-    ), g = !j, [V, $] = c.useState(!1);
-    c.useEffect(() => {
-      $(!0);
+    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 R = c.useRef(null), I = pe(R, {
-      base: b.base,
+    const x = l.useRef(null), $ = tt(x, {
+      base: u.base,
       snapping: "height",
-      spacing: x,
-      warnOnMisalignment: !j
-    }), G = {
+      spacing: v,
+      warnOnMisalignment: !w
+    }), I = {
       padding: {
-        top: x.top || 0,
-        right: x.right || 0,
-        bottom: x.bottom || 0,
-        left: x.left || 0
+        top: v.top || 0,
+        right: v.right || 0,
+        bottom: v.bottom || 0,
+        left: v.left || 0
       }
-    }, { padding: p } = re(
-      V && !u,
-      G,
-      I
-    ), M = tt(k, R), D = c.useMemo(() => {
-      const L = Bt(
-        l,
-        s,
-        b.base,
-        b.color
-      ), z = Lt(
-        g,
-        { top: p.top, right: p.right, bottom: p.bottom, left: p.left }
-      );
-      return oe(
-        { ...L, ...z },
+    }, { 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
       );
     }, [
-      l,
-      s,
-      b.base,
-      b.color,
-      g,
-      p.top,
-      p.right,
-      p.bottom,
-      p.left,
+      a,
+      o,
+      u.base,
+      u.color,
+      h,
+      m.top,
+      m.right,
+      m.bottom,
+      m.left,
       i
-    ]), E = c.useMemo(
-      () => Pt(O, T, a),
-      [O, T, a]
+    ]), p = l.useMemo(
+      () => oe(M, g, r),
+      [M, g, r]
     );
-    return g ? /* @__PURE__ */ S.jsxs(
+    return h ? /* @__PURE__ */ Z(
       "div",
       {
-        ref: M,
+        ref: G,
         "data-testid": "padder",
-        className: ne(we.pad, h && we.v, o),
-        style: D,
+        className: z(nt.pad, b && nt.v, n),
+        style: A,
         children: [
-          /* @__PURE__ */ S.jsxs(S.Fragment, { children: [
-            p.top >= 0 && /* @__PURE__ */ S.jsx("div", { style: { gridColumn: "1 / -1" }, children: E("100%", p.top) }),
-            p.left >= 0 && /* @__PURE__ */ S.jsx("div", { style: { gridRow: "2 / 3" }, children: E(p.left, "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__ */ S.jsx("div", { style: { gridRow: "2 / 3", gridColumn: "2 / 3" }, children: n }),
-          /* @__PURE__ */ S.jsxs(S.Fragment, { children: [
-            p.right >= 0 && /* @__PURE__ */ S.jsx("div", { style: { gridRow: "2 / 3" }, children: E(p.right, "100%") }),
-            p.bottom >= 0 && /* @__PURE__ */ S.jsx("div", { style: { gridColumn: "1 / -1" }, children: E("100%", p.bottom) })
+          /* @__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__ */ S.jsx(
+    ) : /* @__PURE__ */ y(
       "div",
       {
-        ref: M,
+        ref: G,
         "data-testid": "padder",
-        className: ne(we.pad, o),
-        style: D,
-        children: n
+        className: z(nt.pad, n),
+        style: A,
+        children: e
       }
     );
   })
-), Yt = "lay_5cMu5", Ft = "v_dprVE", qe = {
-  lay: Yt,
-  v: Ft
-}, Ut = (e) => ({
+), se = "lay_5cMu5", re = "v_dprVE", ut = {
+  lay: se,
+  v: re
+}, ie = (t) => ({
   "--bklw": "auto",
   "--bklh": "auto",
-  "--bklcl": e.line,
-  "--bklcf": e.flat,
-  "--bklci": e.text
-}), Xe = (e) => 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))", qt = (e, n, o) => {
-  const r = {};
-  return e !== void 0 && (r.gap = H(e)), n !== void 0 && (r.rowGap = H(n)), o !== void 0 && (r.columnGap = H(o)), r;
-}, Cn = c.memo(function({
-  alignContent: n,
-  alignItems: o,
-  children: r,
-  className: s,
-  columns: a = "repeat(auto-fit, minmax(100px, 1fr))",
+  "--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: l,
-  gap: u,
-  height: m,
-  indicatorNode: k,
-  justifyContent: b,
-  justifyItems: O,
-  rowGap: x,
-  rows: h,
-  style: j,
-  variant: T,
-  width: g,
-  ssrMode: V = !1,
-  ...$
+  debugging: a,
+  gap: c,
+  height: d,
+  indicatorNode: f,
+  justifyContent: u,
+  justifyItems: M,
+  rowGap: v,
+  rows: b,
+  style: w,
+  variant: g,
+  width: h,
+  ssrMode: D = !1,
+  ...S
 }) {
-  const R = se("layout"), { isShown: I, debugging: G } = le(l, R.debugging), [p, M] = c.useState(!1);
-  c.useEffect(() => {
-    M(!0);
+  const x = T("layout"), { isShown: $, debugging: I } = j(a, x.debugging), [m, G] = l.useState(!1);
+  l.useEffect(() => {
+    G(!0);
   }, []);
-  const D = c.useRef(null), E = c.useMemo(
-    () => ie($),
-    [$]
-  ), L = pe(D, {
-    base: R.base,
+  const A = l.useRef(null), p = l.useMemo(
+    () => Y(S),
+    [S]
+  ), B = tt(A, {
+    base: x.base,
     snapping: "height",
-    spacing: E,
+    spacing: p,
     warnOnMisalignment: !0
-  }), z = {
+  }), _ = {
     padding: {
-      top: E.top || 0,
-      right: E.right || 0,
-      bottom: E.bottom || 0,
-      left: E.left || 0
+      top: p.top || 0,
+      right: p.right || 0,
+      bottom: p.bottom || 0,
+      left: p.left || 0
     }
-  }, { padding: y } = re(
-    p && !V,
-    z,
-    L
-  ), B = c.useMemo(
-    () => Xe(a),
-    [a]
-  ), W = c.useMemo(
-    () => h ? Xe(h) : "auto",
-    [h]
-  ), A = c.useMemo(
-    () => Ut(R.colors),
-    [R.colors]
-  ), K = c.useMemo(
-    () => qt(u, x, i),
-    [u, x, i]
-  ), J = c.useMemo(() => {
-    const _ = H(g || "auto"), U = H(m || "auto"), P = ["--bklw", "--bklh"];
-    return oe(
+  }, { 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
-        ...w({
+        ...k({
           key: "--bklw",
-          value: _,
-          defaultStyles: A,
-          skipDimensions: { auto: P }
+          value: W,
+          defaultStyles: E,
+          skipDimensions: { auto: U }
         }),
-        ...w({
+        ...k({
           key: "--bklh",
-          value: U,
-          defaultStyles: A,
-          skipDimensions: { auto: P }
+          value: X,
+          defaultStyles: E,
+          skipDimensions: { auto: U }
         }),
-        ...w({
+        ...k({
           key: "--bklcl",
-          value: R.colors.line,
-          defaultStyles: A
+          value: x.colors.line,
+          defaultStyles: E
         }),
-        ...w({
+        ...k({
           key: "--bklcf",
-          value: R.colors.flat,
-          defaultStyles: A
+          value: x.colors.flat,
+          defaultStyles: E
         }),
-        ...w({
+        ...k({
           key: "--bklci",
-          value: R.colors.text,
-          defaultStyles: A
+          value: x.colors.text,
+          defaultStyles: E
         }),
         // Grid properties - only inject if different from defaults
-        ...B !== "repeat(auto-fit, minmax(100px, 1fr))" && { "--bklgtc": B },
-        ...W !== "auto" && { "--bklgtr": W },
-        ...O && { "--bklji": O },
-        ...o && { "--bklai": o },
-        ...b && { "--bkljc": b },
-        ...n && { "--bklac": n },
+        ...L !== "repeat(auto-fill, minmax(100px, 1fr))" && {
+          "--bklgtc": L
+        },
+        ...C !== "auto" && { "--bklgtr": C },
+        ...M && { "--bklji": M },
+        ...n && { "--bklai": n },
+        ...u && { "--bkljc": u },
+        ...e && { "--bklac": e },
         // Include gap styles
-        ...K
+        ...R
       },
-      j
+      w
     );
   }, [
-    B,
-    W,
-    O,
-    o,
-    b,
+    L,
+    C,
+    M,
     n,
-    g,
-    m,
-    R.colors,
-    A,
-    j,
-    K
+    u,
+    e,
+    h,
+    d,
+    x.colors,
+    E,
+    w,
+    R
   ]);
-  return /* @__PURE__ */ S.jsx(
-    Me,
+  return /* @__PURE__ */ y(it, { spacer: { variant: g ?? "line" }, children: /* @__PURE__ */ y(
+    at,
     {
-      spacer: { variant: T ?? "line" },
-      children: /* @__PURE__ */ S.jsx(
-        Oe,
+      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: D,
-          className: I ? qe.v : "",
-          block: [y.top, y.bottom],
-          ...k ? { indicatorNode: k } : {},
-          inline: [y.left, y.right],
-          debugging: G,
-          width: g,
-          height: m,
-          ssrMode: V,
-          children: /* @__PURE__ */ S.jsx(
-            "div",
-            {
-              "data-testid": "layout",
-              className: ne(s, qe.lay),
-              style: J,
-              ...$ && Object.keys($).length > 0 ? Object.fromEntries(
-                Object.entries($).filter(([_]) => _ !== "ssrMode")
-              ) : {},
-              children: r
-            }
-          )
+          "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
         }
       )
     }
-  );
-}), Xt = "box_rDCRX", Jt = "v_0MMHD", Je = {
-  box: Xt,
-  v: Jt
-}, Zt = (e, n) => ({
-  "--bkxw": "fit-content",
-  "--bkxh": "fit-content",
-  "--bkxb": `${e}px`,
-  "--bkxcl": n
-}), Kt = ({
-  width: e,
-  height: n,
-  base: o,
-  lineColor: r,
-  defaultStyles: 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 a = H(e || "fit-content"), i = H(n || "fit-content"), l = ["--bkxw", "--bkxh"];
+  const r = O(t || "fit-content"), i = O(e || "fit-content"), a = ["--bkboxw", "--bkboxh"];
   return {
-    ...w({
-      key: "--bkxw",
-      value: a,
-      defaultStyles: s,
-      skipDimensions: { fitContent: l }
+    ...k({
+      key: "--bkboxw",
+      value: r,
+      defaultStyles: o,
+      skipDimensions: { fitContent: a }
     }),
-    ...w({
-      key: "--bkxh",
+    ...k({
+      key: "--bkboxh",
       value: i,
-      defaultStyles: s,
-      skipDimensions: { fitContent: l }
+      defaultStyles: o,
+      skipDimensions: { fitContent: a }
     }),
-    ...w({
-      key: "--bkxb",
-      value: `${o}px`,
-      defaultStyles: s
+    ...k({
+      key: "--bkboxb",
+      value: `${n}px`,
+      defaultStyles: o
     }),
-    ...w({
-      key: "--bkxcl",
-      value: r,
-      defaultStyles: s
+    ...k({
+      key: "--bkboxc",
+      value: s,
+      defaultStyles: o
     })
   };
-}, Rn = c.memo(
-  c.forwardRef(function({
-    children: n,
-    snapping: o = "clamp",
-    debugging: r,
-    className: s,
-    colSpan: a,
+}, ze = l.memo(
+  l.forwardRef(function({
+    children: e,
+    snapping: n = "clamp",
+    debugging: s,
+    className: o,
+    colSpan: r,
     rowSpan: i,
-    span: l,
-    width: u,
-    height: m,
-    style: k,
-    ssrMode: b = !1,
-    ...O
-  }, x) {
-    const h = se("box"), { isShown: j, debugging: T } = le(r, h.debugging), [g, V] = c.useState(!1);
-    c.useEffect(() => {
-      V(!0);
+    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 $ = c.useRef(null), { top: R, bottom: I, left: G, right: p } = ie(O), M = pe($, {
-      base: h.base,
-      snapping: o,
-      spacing: { top: R, bottom: I, left: G, right: p },
-      warnOnMisalignment: T !== "none"
-    }), D = {
+    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: R || 0,
-        right: p || 0,
-        bottom: I || 0,
-        left: G || 0
+        top: x || 0,
+        right: m || 0,
+        bottom: $ || 0,
+        left: I || 0
       }
-    }, { padding: E } = re(
-      g && !b,
-      D,
-      M
-    ), L = c.useMemo(
-      () => pt(l, a, i),
-      [a, i, l]
-    ), z = c.useMemo(
-      () => Zt(h.base, h.colors.line),
-      [h.base, h.colors.line]
-    ), y = c.useMemo(
-      () => {
-        const B = Kt({
-          width: u,
-          height: m,
-          base: h.base,
-          lineColor: h.colors.line,
-          defaultStyles: z
-        });
-        return oe(B, k);
-      },
-      [h.base, h.colors.line, u, m, z, k]
-    );
-    return /* @__PURE__ */ S.jsx(
+    }, { padding: p } = J(
+      h && !u,
+      A,
+      G
+    ), B = l.useMemo(
+      () => Tt(a, r, i),
+      [r, i, a]
+    ), _ = l.useMemo(
+      () => ue(b.base, b.colors.line),
+      [b.base, b.colors.line]
+    ), V = l.useMemo(() => {
+      const L = de({
+        width: c,
+        height: d,
+        base: b.base,
+        lineColor: b.colors.line,
+        defaultStyles: _
+      });
+      return q(L, f);
+    }, [
+      b.base,
+      b.colors.line,
+      c,
+      d,
+      _,
+      f
+    ]);
+    return /* @__PURE__ */ y(
       "div",
       {
-        ref: tt(x, $),
+        ref: yt(v, S),
         "data-testid": "box",
-        className: ne(Je.box, j && Je.v, s),
-        style: oe(y, L),
-        children: /* @__PURE__ */ S.jsx(
-          Me,
+        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__ */ S.jsx(
-              Oe,
-              {
-                block: [E.top, E.bottom],
-                inline: [E.left, E.right],
-                width: "fit-content",
-                height: m,
-                debugging: T,
-                ssrMode: b,
-                children: n
-              }
-            )
+            block: [p.top, p.bottom],
+            inline: [p.left, p.right],
+            width: "fit-content",
+            height: d,
+            debugging: g,
+            ssrMode: u,
+            children: e
           }
-        )
+        ) })
       }
     );
   })
-), Qt = "stk_l-58l", en = "v_-k3qw", Ze = {
-  stk: Qt,
-  v: en
-}, tn = {
+), fe = "stk_l-58l", be = "v_-k3qw", bt = {
+  stk: fe,
+  v: be
+}, me = {
   x: "row",
   y: "column",
   "-x": "row-reverse",
   "-y": "column-reverse"
-}, nn = (e) => ({
+}, he = (t) => ({
   "--bkkw": "auto",
   "--bkkh": "auto",
-  "--bkkcl": e.line,
-  "--bkkcf": e.flat,
-  "--bkkci": e.text
-}), on = (e, n, o) => ({
-  rowGap: o !== void 0 ? o : e,
-  columnGap: o !== void 0 ? o : n
-}), _n = c.memo(function({
-  align: n = "flex-start",
-  children: o,
-  className: r,
-  columnGap: s,
-  debugging: a,
+  "--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: l,
-  height: u,
-  indicatorNode: m,
-  justify: k = "flex-start",
-  rowGap: b,
-  style: O,
-  variant: x,
-  width: h,
-  ssrMode: j = !1,
-  ...T
+  gap: a,
+  height: c,
+  indicatorNode: d,
+  justify: f = "flex-start",
+  rowGap: u,
+  style: M,
+  variant: v,
+  width: b,
+  ssrMode: w = !1,
+  ...g
 }) {
-  const g = se("stack"), { isShown: V, debugging: $ } = le(a, g.debugging), [R, I] = c.useState(!1);
-  c.useEffect(() => {
-    I(!0);
+  const h = T("stack"), { isShown: D, debugging: S } = j(r, h.debugging), [x, $] = l.useState(!1);
+  l.useEffect(() => {
+    $(!0);
   }, []);
-  const G = c.useRef(null), { top: p, right: M, bottom: D, left: E } = ie({
-    ...T
-  }), L = pe(G, {
-    base: g.base,
+  const I = l.useRef(null), { top: m, right: G, bottom: A, left: p } = Y({
+    ...g
+  }), B = tt(I, {
+    base: h.base,
     snapping: "height",
-    spacing: { top: p, right: M, bottom: D, left: E },
-    warnOnMisalignment: $ !== "none"
-  }), z = {
+    spacing: { top: m, right: G, bottom: A, left: p },
+    warnOnMisalignment: S !== "none"
+  }), _ = {
     padding: {
-      top: p || 0,
-      right: M || 0,
-      bottom: D || 0,
-      left: E || 0
+      top: m || 0,
+      right: G || 0,
+      bottom: A || 0,
+      left: p || 0
     }
-  }, { padding: y } = re(
-    R && !j,
-    z,
-    L
-  ), B = c.useMemo(() => {
-    const J = b !== void 0 ? Number(b) : void 0, _ = s !== void 0 ? Number(s) : void 0, U = l !== void 0 ? Number(l) : void 0;
-    return on(J, _, U);
-  }, [b, s, l]), W = c.useMemo(
-    () => nn(g.colors),
-    [g.colors]
-  ), A = c.useMemo(() => {
-    const J = H(h || "auto"), _ = H(u || "auto"), U = tn[i] || i, P = ["--bkkw", "--bkkh"], Z = {
-      ...w({
+  }, { 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: J,
-        defaultStyles: W,
-        skipDimensions: { auto: P }
+        value: N,
+        defaultStyles: C,
+        skipDimensions: { auto: U }
       }),
-      ...w({
+      ...k({
         key: "--bkkh",
-        value: _,
-        defaultStyles: W,
-        skipDimensions: { auto: P }
+        value: W,
+        defaultStyles: C,
+        skipDimensions: { auto: U }
       }),
-      ...w({
+      ...k({
         key: "--bkkcl",
-        value: g.colors.line,
-        defaultStyles: W
+        value: h.colors.line,
+        defaultStyles: C
       }),
-      ...w({
+      ...k({
         key: "--bkkcf",
-        value: g.colors.flat,
-        defaultStyles: W
+        value: h.colors.flat,
+        defaultStyles: C
       }),
-      ...w({
+      ...k({
         key: "--bkkci",
-        value: g.colors.text,
-        defaultStyles: W
+        value: h.colors.text,
+        defaultStyles: C
       })
     };
-    return oe({
-      flexDirection: U,
-      justifyContent: k,
-      alignItems: n,
-      width: h,
-      height: u
-    }, B, Z, O);
+    return q({
+      flexDirection: X,
+      justifyContent: f,
+      alignItems: e,
+      width: b,
+      height: c
+    }, L, et, M);
   }, [
     i,
-    k,
-    n,
-    h,
-    u,
-    g.colors.line,
-    g.colors.flat,
-    g.colors.text,
-    W,
-    B,
-    O
-  ]), K = $ === "none" ? {
-    ...A,
-    paddingBlock: `${y.top}px ${y.bottom}px`,
-    paddingInline: `${y.left}px ${y.right}px`
-  } : A;
-  return /* @__PURE__ */ S.jsx(
-    Me,
+    f,
+    e,
+    b,
+    c,
+    h.colors.line,
+    h.colors.flat,
+    h.colors.text,
+    C,
+    L,
+    M
+  ]), R = S === "none" ? {
+    ...E,
+    paddingBlock: `${V.top}px ${V.bottom}px`,
+    paddingInline: `${V.left}px ${V.right}px`
+  } : E;
+  return /* @__PURE__ */ y(it, { spacer: { variant: v ?? "line" }, children: /* @__PURE__ */ y(
+    at,
     {
-      spacer: { variant: x ?? "line" },
-      children: /* @__PURE__ */ S.jsx(
-        Oe,
+      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: G,
-          className: V ? Ze.v : "",
-          block: [y.top, y.bottom],
-          inline: [y.left, y.right],
-          debugging: $,
-          indicatorNode: m,
-          width: h,
-          height: u,
-          ssrMode: j,
-          children: /* @__PURE__ */ S.jsx(
-            "div",
-            {
-              "data-testid": "stack",
-              className: ne(r, Ze.stk),
-              style: K,
-              ...T,
-              children: o
-            }
-          )
+          "data-testid": "stack",
+          className: z(s, bt.stk, D && bt.v),
+          style: R,
+          ...g,
+          children: n
         }
       )
     }
-  );
-}), rn = "gde_-Naxo", sn = "line_-VS-e", an = "cols_8lD6D", ln = "col_rlbsL", ue = {
-  gde: rn,
-  line: sn,
-  cols: an,
-  col: ln
-}, cn = (e) => {
-  const { variant: n, base: o, gap: r, columns: s, columnWidth: a } = e;
+  ) });
+}), 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 {
-    line: {
-      variant: "line",
-      gap: r - 1,
-      base: o
-    },
-    auto: a ? {
-      variant: "auto",
-      columnWidth: a,
-      gap: r,
-      base: o
-    } : null,
-    pattern: Array.isArray(s) ? {
-      variant: "pattern",
-      columns: s,
-      gap: r,
-      base: o
-    } : null,
-    fixed: typeof s == "number" ? {
-      variant: "fixed",
-      columns: s,
-      columnWidth: a,
-      gap: r,
-      base: o
-    } : null
-  }[n] ?? {
-    variant: "line",
-    gap: r - 1,
-    base: o
+    variant: "auto",
+    columnWidth: r || "1fr",
+    gap: s,
+    base: n
   };
-}, un = (e, n) => ({
+}, Se = (t, e) => ({
   "--bkgw": "auto",
   "--bkgh": "auto",
   "--bkgmw": "none",
   "--bkgcw": "60px",
   "--bkggw": "24px",
   "--bkgc": "12",
-  "--bkgb": `${e}px`,
-  "--bkgcl": n
-}), jn = c.memo(function({
-  className: n,
-  debugging: o,
-  style: r,
-  variant: s,
-  align: a = "start",
+  "--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: l,
-  width: u,
-  columns: m,
-  columnWidth: k,
-  gutterWidth: b,
-  maxWidth: O,
-  color: x,
-  children: h,
-  ssrMode: j = !1,
-  ...T
+  height: a,
+  width: c,
+  columns: d,
+  columnWidth: f,
+  maxWidth: u,
+  color: M,
+  children: v,
+  ssrMode: b = !1,
+  ...w
 }) {
-  const g = se("guide"), V = s ?? g.variant, $ = typeof i == "number" ? i : g.base, [R, I] = c.useState(!1);
-  c.useEffect(() => {
-    I(!0);
-  }, []);
-  const G = c.useRef(null), p = ve(G), M = re(
-    R && !j,
-    { width: 1024, height: 768, refresh: () => {
-    } },
-    p
-  ), { width: D, height: E } = M, { isShown: L } = le(o, g.debugging), z = c.useMemo(() => cn({
-    variant: V,
-    base: g.base,
-    gap: $,
-    columns: m,
-    columnWidth: k
-  }), [V, g.base, $, m, k]), {
-    template: y,
-    columnsCount: B,
-    calculatedGap: W
-  } = Et(G, z), A = c.useMemo(
-    () => un(g.base, g.colors.line),
+  const g = T("guide"), h = o ?? g.variant, D = typeof i == "number" ? i : 0, { isShown: S } = j(n, g.debugging);
+  if (!S)
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        className: z(H.g, H.h, e),
+        style: s,
+        "data-testid": "guide",
+        "data-variant": h,
+        ...w,
+        children: v
+      }
+    );
+  const x = /* @__PURE__ */ y(
+    "div",
+    {
+      className: z(H.g, H.h, H.ssr, e),
+      style: {
+        width: c || "100%",
+        height: a || "100%",
+        maxWidth: u || "none",
+        ...s
+      },
+      "data-testid": "guide",
+      "data-variant": h,
+      children: v
+    }
+  );
+  return /* @__PURE__ */ y(wt, { fallback: x, children: /* @__PURE__ */ y(
+    Ce,
+    {
+      className: e,
+      debugging: n,
+      style: s,
+      variant: h,
+      align: r,
+      gap: D,
+      height: a,
+      width: c,
+      columns: d,
+      columnWidth: f,
+      maxWidth: u,
+      color: M,
+      ssrMode: b,
+      ...w,
+      children: v
+    }
+  ) });
+}), Ce = l.memo(function({
+  className: e,
+  debugging: n,
+  style: s,
+  variant: o,
+  align: r = "center",
+  gap: i,
+  height: a,
+  width: c,
+  columns: d,
+  columnWidth: f,
+  maxWidth: u,
+  color: M,
+  children: v,
+  ssrMode: b = !1,
+  ...w
+}) {
+  const g = T("guide"), { isShown: h } = j(n, g.debugging), D = l.useRef(null), {
+    width: S,
+    height: x,
+    refresh: $
+    // Keep the refresh function available for dynamic updates
+  } = P(D);
+  l.useEffect(() => {
+    const R = () => {
+      $();
+    };
+    return window.addEventListener("resize", R), () => {
+      window.removeEventListener("resize", R);
+    };
+  }, [$]);
+  const I = l.useMemo(() => {
+    const R = o, N = typeof i == "number" ? i : 0;
+    return we({
+      variant: R,
+      base: g.base,
+      gap: N,
+      columns: d,
+      columnWidth: f
+    });
+  }, [o, g.base, i, d, f]), { template: m, columnsCount: G, calculatedGap: A } = Ee(
+    D,
+    I
+  ), p = l.useMemo(
+    () => Se(g.base, g.colors.line),
     [g.base, g.colors.line]
-  ), K = c.useMemo(() => {
-    const J = H(u || D || "auto"), _ = H(l || E || "auto"), U = H(O || "none"), P = H(k || "60px"), Z = H(b || "24px"), q = ["--bkgw", "--bkgh"], X = {
-      ...w({
+  ), 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: J,
-        defaultStyles: A,
-        skipDimensions: { auto: q }
+        value: R,
+        defaultStyles: p,
+        skipDimensions: { auto: U }
       }),
-      ...w({
+      ...k({
         key: "--bkgh",
-        value: _,
-        defaultStyles: A,
-        skipDimensions: { auto: q }
+        value: N,
+        defaultStyles: p,
+        skipDimensions: { auto: U }
       }),
-      ...w({
+      ...k({
         key: "--bkgmw",
-        value: U,
-        defaultStyles: A
+        value: W,
+        defaultStyles: p
       }),
-      ...w({
+      ...k({
         key: "--bkgcw",
-        value: P,
-        defaultStyles: A
-      }),
-      ...w({
-        key: "--bkggw",
-        value: Z,
-        defaultStyles: A
+        value: X,
+        defaultStyles: p
       }),
-      ...w({
+      ...k({
         key: "--bkgc",
-        value: `${B}`,
-        defaultStyles: A
+        value: `${G}`,
+        defaultStyles: p
       }),
-      ...w({
+      ...k({
         key: "--bkgb",
-        value: `${g.base}px`,
-        defaultStyles: A
+        value: "0",
+        defaultStyles: p
       }),
-      ...w({
+      ...k({
         key: "--bkgcl",
-        value: x ?? g.colors.line,
-        defaultStyles: A
+        value: M ?? g.colors.line,
+        defaultStyles: p
+      }),
+      ...k({
+        key: "--bkgg",
+        value: `${A}px`,
+        defaultStyles: p
+      }),
+      ...k({
+        key: "--bkgj",
+        value: r || "center",
+        defaultStyles: p
       }),
-      // Add the CSS variables expected by tests
-      "--bkgg": `${W}px`,
-      ...y && y !== "none" ? { "--bkgt": y } : {},
+      ...m && m !== "none" ? { "--bkgt": m } : {},
       // Add grid template if available
-      ...y && y !== "none" ? { gridTemplateColumns: y } : {},
-      // Add gap if calculated
-      ...W ? { gap: `${W}px` } : {},
-      // Add justifyContent based on align
-      justifyContent: a
+      ...m && m !== "none" ? { gridTemplateColumns: m } : {}
     };
-    return oe(X, r);
+    return q(et, s);
   }, [
+    c,
+    a,
     u,
-    l,
-    O,
-    k,
-    b,
-    B,
+    f,
+    G,
+    M,
+    m,
+    A,
+    S,
     x,
-    y,
-    W,
-    D,
-    E,
-    g.base,
     g.colors.line,
-    A,
-    r,
-    a
-  ]);
-  return /* @__PURE__ */ S.jsxs(
+    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: G,
+      ref: D,
       "data-testid": "guide",
-      className: ne(
-        ue.gde,
-        n,
-        L ? ue.v : ue.h,
-        V === "line" && ue.line
+      className: z(
+        H.gde,
+        e,
+        h ? H.v : H.h,
+        o === "line" && H.line
       ),
-      "data-variant": V,
-      style: K,
-      ...T,
+      "data-variant": o,
+      style: B,
+      ...w,
       children: [
-        L && /* @__PURE__ */ S.jsx("div", { className: ue.cols, "data-variant": V, children: Array.from({ length: B }, (J, _) => {
-          const U = g.colors[V] ?? g.colors.line;
-          return /* @__PURE__ */ S.jsx(
+        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: ue.col,
-              "data-column-index": _,
-              "data-variant": V,
-              style: { backgroundColor: U }
+              className: H.col,
+              "data-column-index": N,
+              "data-variant": o,
+              style: { backgroundColor: W }
             },
-            _
+            N
           );
         }) }),
-        h
+        v
       ]
     }
   );
-}), fn = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, dn = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e != "string" ? !1 : e === "auto" || e === "100%" || fn.test(e), bn = (e) => Array.isArray(e) && e.length > 0 && e.every(dn), Mn = (e) => {
-  const n = [...Object.keys(Ce), ...Qe];
-  return typeof e == "number" || typeof e == "string" && n.some((o) => e.endsWith(o));
-}, On = (e) => typeof e == "string" && vn.includes(e), Te = (e) => typeof e == "object" && e !== null, Tn = (e) => Te(e) && e.variant === "line", An = (e) => Te(e) && "columns" in e && !("variant" in e), $n = (e) => Te(e) && "columnWidth" in e && !("variant" in e) && !("columns" in e), mn = "bas_e-SXr", gn = "row_q-FZb", he = {
-  bas: mn,
-  row: gn
-}, hn = (e, n, o) => ({
+}), 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": `${e}px`,
-  "--bkbcl": n,
-  "--bkbcf": o
-}), kn = (e) => {
-  const { index: n, base: o, variant: r, chosenColor: s, lineColor: a, flatColor: i } = e;
+  "--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": n === 0 ? "0px" : `${n * o}px`,
-    "--bkrh": r === "line" ? "1px" : `${o}px`,
-    "--bkbc": s || (r === "line" ? a : i)
+    "--bkrt": e === 0 ? "0px" : `${e * n}px`,
+    "--bkrh": s === "line" ? "1px" : `${n}px`,
+    "--bkbc": o || (s === "line" ? r : i)
   };
-}, Nn = c.memo(function({
-  className: n,
-  debugging: o,
-  style: r,
-  variant: s,
-  height: a,
+}, Ae = l.memo(function({
+  className: e,
+  debugging: n,
+  style: s,
+  variant: o,
+  height: r,
   width: i,
-  base: l,
-  color: u,
-  ssrMode: m = !1,
-  ...k
+  base: a,
+  color: c,
+  ssrMode: d = !1,
+  ...f
 }) {
-  const b = se("baseline"), O = s ?? b.variant, x = l ?? b.base, { isShown: h } = le(o, b.debugging), j = c.useRef(null), [T, g] = c.useState(!1), V = ve(j);
-  c.useEffect(() => {
-    g(!0);
-  }, []);
-  const $ = re(
-    T,
-    xt,
-    V
-  ), { width: R, height: I } = $, [G, p] = c.useMemo(() => et(
-    [i, a],
-    [R, I]
-  ), [i, a, R, I]), { top: M, right: D, bottom: E, left: L } = c.useMemo(
-    () => ie(k),
-    [k]
-  ), z = c.useMemo(() => {
-    const Z = [M, D, E, L].map((q) => q ? `${q}px` : "0").join(" ");
-    return Z !== "0 0 0 0" ? Z : void 0;
-  }, [M, D, E, L]), y = c.useMemo(() => mt({
-    height: p,
-    top: M,
-    bottom: E,
-    base: x
-  }), [p, M, E, x]), B = St({
-    totalLines: y,
-    lineHeight: x,
-    containerRef: j,
+  const u = T("baseline"), { isShown: M } = j(n, u.debugging), v = l.useRef(null), {
+    width: b,
+    height: w,
+    refresh: g
+  } = P(v);
+  l.useEffect(() => {
+    const C = () => {
+      g();
+    };
+    return window.addEventListener("resize", C), () => {
+      window.removeEventListener("resize", C);
+    };
+  }, [g]);
+  const [h, D] = l.useMemo(() => kt(
+    [i, r],
+    [b, w]
+  ), [i, r, b, w]), { top: S, right: x, bottom: $, left: I } = l.useMemo(
+    () => Y(f),
+    [f]
+  ), m = l.useMemo(() => {
+    const C = [S, x, $, I].map((E) => E ? `${E}px` : "0").join(" ");
+    return C !== "0 0 0 0" ? C : void 0;
+  }, [S, x, $, I]), G = l.useMemo(() => {
+    const C = a || u.base;
+    return Nt({
+      height: D,
+      top: S,
+      bottom: $,
+      base: C
+    });
+  }, [D, S, $, a, u.base]), { start: A, end: p } = Ut({
+    totalLines: G,
+    lineHeight: a || u.base,
+    containerRef: v,
     buffer: 160
-  }), W = {
-    start: 0,
-    end: Math.min(10, y)
-  }, { start: A, end: K } = re(
-    T && !m,
-    W,
-    B
-  ), J = u || (O === "line" ? b.colors.line : b.colors.flat), _ = c.useMemo(
-    () => hn(
-      x,
-      b.colors.line,
-      b.colors.flat
+  }), B = c || (o === "line" ? u.colors.line : u.colors.flat), _ = l.useMemo(
+    () => De(
+      a || u.base,
+      u.colors.line,
+      u.colors.flat
     ),
-    [x, b.colors.line, b.colors.flat]
-  ), U = c.useMemo(() => {
-    const Z = H(i || "100%"), q = H(a || "100%"), X = ["--bkbw", "--bkbh"];
-    return oe(
+    [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(
       {
-        ...w({
+        ...k({
           key: "--bkbw",
-          value: Z,
+          value: C,
           defaultStyles: _,
-          skipDimensions: { fullSize: X }
+          skipDimensions: { fullSize: R }
         }),
-        ...w({
+        ...k({
           key: "--bkbh",
-          value: q,
+          value: E,
           defaultStyles: _,
-          skipDimensions: { fullSize: X }
+          skipDimensions: { fullSize: R }
         }),
-        ...w({
+        ...k({
           key: "--bkbb",
-          value: `${x}px`,
+          value: `${a}px`,
           defaultStyles: _
         }),
-        ...w({
+        ...k({
           key: "--bkbcl",
-          value: u || b.colors.line,
+          value: c || u.colors.line,
           defaultStyles: _
         }),
-        ...w({
+        ...k({
           key: "--bkbcf",
-          value: u || b.colors.flat,
+          value: c || u.colors.flat,
           defaultStyles: _
         }),
-        ...z && { padding: z }
+        ...m && { padding: m }
       },
-      r
+      s
     );
   }, [
     i,
+    r,
     a,
-    x,
-    u,
-    b.colors.line,
-    b.colors.flat,
-    z,
+    c,
+    u.colors.line,
+    u.colors.flat,
+    m,
     _,
-    r
-  ]), P = c.useCallback(
-    (Z) => kn({
-      index: Z,
-      base: x,
-      variant: O,
-      chosenColor: J,
-      lineColor: b.colors.line,
-      flatColor: b.colors.flat
-    }),
-    [x, O, J, b.colors.line, b.colors.flat]
+    s
+  ]), L = l.useCallback(
+    (C) => {
+      const E = o, R = a || u.base;
+      return _e({
+        index: C,
+        base: R,
+        variant: E,
+        chosenColor: B,
+        lineColor: u.colors.line,
+        flatColor: u.colors.flat
+      });
+    },
+    [
+      a,
+      o,
+      B,
+      u.colors.line,
+      u.colors.flat,
+      u.base
+    ]
   );
-  return /* @__PURE__ */ S.jsx(
+  return /* @__PURE__ */ y(
     "div",
     {
-      ref: j,
+      ref: v,
       "data-testid": "baseline",
-      className: ne(
-        he.bas,
-        h ? he.v : he.h,
-        n
+      className: z(
+        F.bas,
+        M ? F.v : F.h,
+        e
       ),
-      style: U,
-      ...k,
-      children: h && Array.from({ length: K - A }, (Z, q) => {
-        const X = q + A;
-        return /* @__PURE__ */ S.jsx(
+      style: V,
+      ...f,
+      children: M && Array.from({ length: p - A }, (C, E) => {
+        const R = E + A;
+        return /* @__PURE__ */ y(
           "div",
           {
-            className: he.row,
-            "data-row-index": X,
-            style: P(X)
+            className: F.row,
+            "data-row-index": R,
+            style: L(R)
           },
-          X
+          R
         );
       })
     }
   );
-}), vn = ["start", "center", "end"], Vn = ["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 {
-  Ce as ABSOLUTE_UNIT_CONVERSIONS,
-  Nn as Baseline,
-  Rn as Box,
-  Me as Config,
-  At as DEFAULT_CONFIG,
-  tn as DIRECTION_AXIS,
-  vn as GRID_ALIGNMENTS,
-  jn as Guide,
-  Cn as Layout,
-  Vn as PADD_VARIANTS,
-  Oe as Padder,
-  Qe as RELATIVE_UNITS,
-  xt as SSR_DIMENSIONS,
-  Ht as Spacer,
-  _n as Stack,
-  mt as calculateRowCount,
-  vt as calculateSnappedSpacing,
-  bt as clamp,
-  _e as convertValue,
-  kn as createBaselineRowStyle,
-  Kt as createBoxCustomStyles,
-  En as createCSSVariables,
-  hn as createDefaultBaselineStyles,
-  Zt as createDefaultBoxStyles,
-  un as createDefaultGuideStyles,
-  Ut as createDefaultLayoutStyles,
-  Dt as createDefaultSpacerStyles,
-  nn as createDefaultStackStyles,
-  Lt as createDirectPaddingStyles,
-  cn as createGridConfig,
-  qt as createGridGapStyles,
-  pt as createGridSpanStyles,
-  Bt as createPadderContainerStyles,
-  Pt as createRenderSpacerFn,
-  on as createStackGapStyles,
-  w as createStyleOverride,
-  Sn as debounce,
-  H as formatValue,
-  Wt as generateMeasurements,
-  Xe as getGridTemplate,
-  re as hydratedValue,
-  $n as isAutoCalculatedGuide,
-  On as isGuideAlignment,
-  An as isGuideColumnConfig,
-  Tn as isGuideLineConfig,
-  Mn as isGuideValue,
-  ot as isSSR,
-  dn as isValidGuideColumnValue,
-  bn as isValidGuidePattern,
-  ne as mergeClasses,
-  $t as mergeConfig,
-  tt as mergeRefs,
-  oe as mergeStyles,
-  yn as moduloize,
-  Re as normalizeValue,
-  et as normalizeValuePair,
-  ie as parsePadding,
-  ft as parseUnit,
-  nt as rafThrottle,
-  xn as round,
-  wn as safeClientValue,
-  pe as useBaseline,
-  se as useConfig,
-  le as useDebug,
-  rt as useDefaultConfig,
-  Et as useGuide,
-  ve as useMeasure,
-  St 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