baseline-kit 2.0.0

package/dist/index.mjs

@@ -0,0 +1,1592 @@
+import * as E from "react";
+import st, { useState as Je, useRef as ie, useCallback as le, useLayoutEffect as ye, useMemo as P, memo as De } from "react";
+var ae = { exports: {} }, re = {};
+/**
+ * @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 Be;
+function at() {
+  if (Be) return re;
+  Be = 1;
+  var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function r(s, i, o) {
+    var a = null;
+    if (o !== void 0 && (a = "" + o), i.key !== void 0 && (a = "" + i.key), "key" in i) {
+      o = {};
+      for (var f in i)
+        f !== "key" && (o[f] = i[f]);
+    } else o = i;
+    return i = o.ref, {
+      $$typeof: t,
+      type: s,
+      key: a,
+      ref: i !== void 0 ? i : null,
+      props: o
+    };
+  }
+  return re.Fragment = n, re.jsx = r, re.jsxs = r, re;
+}
+var oe = {};
+/**
+ * @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 Ue;
+function lt() {
+  return Ue || (Ue = 1, process.env.NODE_ENV !== "production" && function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === rt ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case O:
+          return "Fragment";
+        case w:
+          return "Portal";
+        case A:
+          return "Profiler";
+        case $:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case F:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case z:
+            return (e.displayName || "Context") + ".Provider";
+          case W:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case N:
+            var c = e.render;
+            return e = e.displayName, e || (e = c.displayName || c.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case L:
+            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
+          case de:
+            c = e._payload, e = e._init;
+            try {
+              return t(e(c));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function n(e) {
+      return "" + e;
+    }
+    function r(e) {
+      try {
+        n(e);
+        var c = !1;
+      } catch {
+        c = !0;
+      }
+      if (c) {
+        c = console;
+        var u = c.error, v = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          c,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          v
+        ), n(e);
+      }
+    }
+    function s() {
+    }
+    function i() {
+      if (te === 0) {
+        Te = console.log, $e = console.info, je = console.warn, Ae = console.error, Oe = console.group, Ne = console.groupCollapsed, Me = console.groupEnd;
+        var e = {
+          configurable: !0,
+          enumerable: !0,
+          value: s,
+          writable: !0
+        };
+        Object.defineProperties(console, {
+          info: e,
+          log: e,
+          warn: e,
+          error: e,
+          group: e,
+          groupCollapsed: e,
+          groupEnd: e
+        });
+      }
+      te++;
+    }
+    function o() {
+      if (te--, te === 0) {
+        var e = { configurable: !0, enumerable: !0, writable: !0 };
+        Object.defineProperties(console, {
+          log: X({}, e, { value: Te }),
+          info: X({}, e, { value: $e }),
+          warn: X({}, e, { value: je }),
+          error: X({}, e, { value: Ae }),
+          group: X({}, e, { value: Oe }),
+          groupCollapsed: X({}, e, { value: Ne }),
+          groupEnd: X({}, e, { value: Me })
+        });
+      }
+      0 > te && console.error(
+        "disabledDepth fell below zero. This is a bug in React. Please file an issue."
+      );
+    }
+    function a(e) {
+      if (me === void 0)
+        try {
+          throw Error();
+        } catch (u) {
+          var c = u.stack.trim().match(/\n( *(at )?)/);
+          me = c && c[1] || "", Ve = -1 < u.stack.indexOf(`
+    at`) ? " (<anonymous>)" : -1 < u.stack.indexOf("@") ? "@unknown:0:0" : "";
+        }
+      return `
+` + me + e + Ve;
+    }
+    function f(e, c) {
+      if (!e || ge) return "";
+      var u = he.get(e);
+      if (u !== void 0) return u;
+      ge = !0, u = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
+      var v = null;
+      v = H.H, H.H = null, i();
+      try {
+        var M = {
+          DetermineComponentFrameRoot: function() {
+            try {
+              if (c) {
+                var I = function() {
+                  throw Error();
+                };
+                if (Object.defineProperty(I.prototype, "props", {
+                  set: function() {
+                    throw Error();
+                  }
+                }), typeof Reflect == "object" && Reflect.construct) {
+                  try {
+                    Reflect.construct(I, []);
+                  } catch (U) {
+                    var se = U;
+                  }
+                  Reflect.construct(e, [], I);
+                } else {
+                  try {
+                    I.call();
+                  } catch (U) {
+                    se = U;
+                  }
+                  e.call(I.prototype);
+                }
+              } else {
+                try {
+                  throw Error();
+                } catch (U) {
+                  se = U;
+                }
+                (I = e()) && typeof I.catch == "function" && I.catch(function() {
+                });
+              }
+            } catch (U) {
+              if (U && se && typeof U.stack == "string")
+                return [U.stack, se.stack];
+            }
+            return [null, null];
+          }
+        };
+        M.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
+        var j = Object.getOwnPropertyDescriptor(
+          M.DetermineComponentFrameRoot,
+          "name"
+        );
+        j && j.configurable && Object.defineProperty(
+          M.DetermineComponentFrameRoot,
+          "name",
+          { value: "DetermineComponentFrameRoot" }
+        );
+        var m = M.DetermineComponentFrameRoot(), B = m[0], K = m[1];
+        if (B && K) {
+          var V = B.split(`
+`), q = K.split(`
+`);
+          for (m = j = 0; j < V.length && !V[j].includes(
+            "DetermineComponentFrameRoot"
+          ); )
+            j++;
+          for (; m < q.length && !q[m].includes(
+            "DetermineComponentFrameRoot"
+          ); )
+            m++;
+          if (j === V.length || m === q.length)
+            for (j = V.length - 1, m = q.length - 1; 1 <= j && 0 <= m && V[j] !== q[m]; )
+              m--;
+          for (; 1 <= j && 0 <= m; j--, m--)
+            if (V[j] !== q[m]) {
+              if (j !== 1 || m !== 1)
+                do
+                  if (j--, m--, 0 > m || V[j] !== q[m]) {
+                    var ne = `
+` + V[j].replace(
+                      " at new ",
+                      " at "
+                    );
+                    return e.displayName && ne.includes("<anonymous>") && (ne = ne.replace("<anonymous>", e.displayName)), typeof e == "function" && he.set(e, ne), ne;
+                  }
+                while (1 <= j && 0 <= m);
+              break;
+            }
+        }
+      } finally {
+        ge = !1, H.H = v, o(), Error.prepareStackTrace = u;
+      }
+      return V = (V = e ? e.displayName || e.name : "") ? a(V) : "", typeof e == "function" && he.set(e, V), V;
+    }
+    function d(e) {
+      if (e == null) return "";
+      if (typeof e == "function") {
+        var c = e.prototype;
+        return f(
+          e,
+          !(!c || !c.isReactComponent)
+        );
+      }
+      if (typeof e == "string") return a(e);
+      switch (e) {
+        case G:
+          return a("Suspense");
+        case F:
+          return a("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case N:
+            return e = f(e.render, !1), e;
+          case L:
+            return d(e.type);
+          case de:
+            c = e._payload, e = e._init;
+            try {
+              return d(e(c));
+            } catch {
+            }
+        }
+      return "";
+    }
+    function l() {
+      var e = H.A;
+      return e === null ? null : e.getOwner();
+    }
+    function g(e) {
+      if (Re.call(e, "key")) {
+        var c = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (c && c.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function x(e, c) {
+      function u() {
+        We || (We = !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)",
+          c
+        ));
+      }
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
+        configurable: !0
+      });
+    }
+    function b() {
+      var e = t(this.type);
+      return Ge[e] || (Ge[e] = !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."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function h(e, c, u, v, M, j) {
+      return u = j.ref, e = {
+        $$typeof: _,
+        type: e,
+        key: c,
+        props: j,
+        _owner: M
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function T(e, c, u, v, M, j) {
+      if (typeof e == "string" || typeof e == "function" || e === O || e === A || e === $ || e === G || e === F || e === nt || typeof e == "object" && e !== null && (e.$$typeof === de || e.$$typeof === L || e.$$typeof === z || e.$$typeof === W || e.$$typeof === N || e.$$typeof === ot || e.getModuleId !== void 0)) {
+        var m = c.children;
+        if (m !== void 0)
+          if (v)
+            if (be(m)) {
+              for (v = 0; v < m.length; v++)
+                y(m[v], e);
+              Object.freeze && Object.freeze(m);
+            } 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 y(m, e);
+      } else
+        m = "", (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (m += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), e === null ? v = "null" : be(e) ? v = "array" : e !== void 0 && e.$$typeof === _ ? (v = "<" + (t(e.type) || "Unknown") + " />", m = " Did you accidentally export a JSX literal instead of a component?") : v = typeof e, 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",
+          v,
+          m
+        );
+      if (Re.call(c, "key")) {
+        m = t(e);
+        var B = Object.keys(c).filter(function(V) {
+          return V !== "key";
+        });
+        v = 0 < B.length ? "{key: someKey, " + B.join(": ..., ") + ": ...}" : "{key: someKey}", Pe[m + v] || (B = 0 < B.length ? "{" + B.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} />`,
+          v,
+          m,
+          B,
+          m
+        ), Pe[m + v] = !0);
+      }
+      if (m = null, u !== void 0 && (r(u), m = "" + u), g(c) && (r(c.key), m = "" + c.key), "key" in c) {
+        u = {};
+        for (var K in c)
+          K !== "key" && (u[K] = c[K]);
+      } else u = c;
+      return m && x(
+        u,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), h(e, m, j, M, l(), u);
+    }
+    function y(e, c) {
+      if (typeof e == "object" && e && e.$$typeof !== it) {
+        if (be(e))
+          for (var u = 0; u < e.length; u++) {
+            var v = e[u];
+            p(v) && S(v, c);
+          }
+        else if (p(e))
+          e._store && (e._store.validated = 1);
+        else if (e === null || typeof e != "object" ? u = null : (u = _e && e[_e] || e["@@iterator"], u = typeof u == "function" ? u : null), typeof u == "function" && u !== e.entries && (u = u.call(e), u !== e))
+          for (; !(e = u.next()).done; )
+            p(e.value) && S(e.value, c);
+      }
+    }
+    function p(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === _;
+    }
+    function S(e, c) {
+      if (e._store && !e._store.validated && e.key == null && (e._store.validated = 1, c = C(c), !Ye[c])) {
+        Ye[c] = !0;
+        var u = "";
+        e && e._owner != null && e._owner !== l() && (u = null, typeof e._owner.tag == "number" ? u = t(e._owner.type) : typeof e._owner.name == "string" && (u = e._owner.name), u = " It was passed a child from " + u + ".");
+        var v = H.getCurrentStack;
+        H.getCurrentStack = function() {
+          var M = d(e.type);
+          return v && (M += v() || ""), M;
+        }, 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.',
+          c,
+          u
+        ), H.getCurrentStack = v;
+      }
+    }
+    function C(e) {
+      var c = "", u = l();
+      return u && (u = t(u.type)) && (c = `
+
+Check the render method of \`` + u + "`."), c || (e = t(e)) && (c = `
+
+Check the top-level render call using <` + e + ">."), c;
+    }
+    var k = st, _ = Symbol.for("react.transitional.element"), w = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), W = Symbol.for("react.consumer"), z = Symbol.for("react.context"), N = Symbol.for("react.forward_ref"), G = Symbol.for("react.suspense"), F = Symbol.for("react.suspense_list"), L = Symbol.for("react.memo"), de = Symbol.for("react.lazy"), nt = Symbol.for("react.offscreen"), _e = Symbol.iterator, rt = Symbol.for("react.client.reference"), H = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Re = Object.prototype.hasOwnProperty, X = Object.assign, ot = Symbol.for("react.client.reference"), be = Array.isArray, te = 0, Te, $e, je, Ae, Oe, Ne, Me;
+    s.__reactDisabledLog = !0;
+    var me, Ve, ge = !1, he = new (typeof WeakMap == "function" ? WeakMap : Map)(), it = Symbol.for("react.client.reference"), We, Ge = {}, Pe = {}, Ye = {};
+    oe.Fragment = O, oe.jsx = function(e, c, u, v, M) {
+      return T(e, c, u, !1, v, M);
+    }, oe.jsxs = function(e, c, u, v, M) {
+      return T(e, c, u, !0, v, M);
+    };
+  }()), oe;
+}
+var ze;
+function ct() {
+  return ze || (ze = 1, process.env.NODE_ENV === "production" ? ae.exports = at() : ae.exports = lt()), ae.exports;
+}
+var R = ct();
+function ut(t) {
+  const n = t.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+  if (!n) return null;
+  const r = parseFloat(n[1]), s = n[2];
+  return { value: r, unit: s };
+}
+function ve(t, n) {
+  return t === void 0 && n !== void 0 ? `${n}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 ft = {
+  parentSize: 0,
+  viewportWidth: typeof window < "u" ? window.innerWidth : 1920,
+  viewportHeight: typeof window < "u" ? window.innerHeight : 1080,
+  rootFontSize: 16,
+  parentFontSize: 16
+}, xe = {
+  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 ke(t, n) {
+  if (typeof t == "number") return t;
+  if (typeof t != "string") return null;
+  const r = ut(t);
+  if (!r) return null;
+  const { value: s, unit: i } = r;
+  if (i in xe)
+    return s * xe[i];
+  if (i === "auto") return null;
+  if (Qe.includes(i)) {
+    const o = { ...ft, ...n };
+    switch (i) {
+      case "em":
+        return s * o.parentFontSize;
+      case "rem":
+        return s * o.rootFontSize;
+      case "vh":
+        return s / 100 * o.viewportHeight;
+      case "vw":
+        return s / 100 * o.viewportWidth;
+      case "vmin":
+        return s / 100 * Math.min(o.viewportWidth, o.viewportHeight);
+      case "vmax":
+        return s / 100 * Math.max(o.viewportWidth, o.viewportHeight);
+      case "%":
+        return s / 100 * o.parentSize;
+      default:
+        return null;
+    }
+  }
+  return null;
+}
+function Zt(t, n, r) {
+  const s = (r == null ? void 0 : r.round) ?? !0, i = t === void 0 ? 0 : typeof t == "number" ? t : ke(t) ?? 0;
+  return `${(s ? Math.round(i) : i) % n}px`;
+}
+function dt(t, n, r) {
+  return Math.min(Math.max(t, n), r);
+}
+function Kt(t, n = 0) {
+  if (n >= 0)
+    return Number((Math.round(t * 10 ** n) / 10 ** n).toFixed(n));
+  {
+    const r = 10 ** Math.abs(n);
+    return Math.round(t / r) * r;
+  }
+}
+function ce(t, n = {}) {
+  const {
+    base: r = 8,
+    round: s = !0,
+    clamp: i,
+    suppressWarnings: o = !1
+  } = n;
+  if (t === "auto") return r;
+  let a = null;
+  if (typeof t == "number")
+    a = t;
+  else if (typeof t == "string") {
+    const l = ke(t);
+    l === null ? (o || console.error(`Failed to convert "${t}" to pixels. Falling back to base ${r}.`), a = r) : a = l;
+  }
+  a === null && (a = r);
+  const f = s ? Math.round(a / r) * r : a, d = i !== void 0 ? dt(f, i.min ?? -1 / 0, i.max ?? 1 / 0) : f;
+  return !o && d !== a && console.warn(`Normalized ${a} to ${d} to match base ${r}px.`), d;
+}
+function Ze(t, n, r) {
+  if (!t) return n;
+  const s = t[0] !== void 0 ? ce(t[0], r) : n[0], i = t[1] !== void 0 ? ce(t[1], r) : n[1];
+  return [s, i];
+}
+function J(t) {
+  if ("padding" in t && t.padding != null)
+    return bt(t.padding);
+  const n = "block" in t && t.block != null ? mt(t.block) : { top: 0, bottom: 0 }, r = "inline" in t && t.inline != null ? gt(t.inline) : { left: 0, right: 0 };
+  return {
+    top: n.top,
+    right: r.right,
+    bottom: n.bottom,
+    left: r.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 [n, r] = t;
+      return { top: n, right: r, bottom: n, left: r };
+    }
+    if (t.length >= 4) {
+      const [n, r, s, i] = t;
+      return {
+        top: n ?? 0,
+        right: r ?? 0,
+        bottom: s ?? 0,
+        left: i ?? 0
+      };
+    }
+  }
+  if (typeof t == "object" && !Array.isArray(t)) {
+    const n = t.top ?? 0, r = t.bottom ?? 0, s = t.left ?? 0, i = t.right ?? 0;
+    return { top: n, right: i, bottom: r, left: s };
+  }
+  return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+function mt(t) {
+  if (typeof t == "number")
+    return { top: t, bottom: t };
+  if (Array.isArray(t)) {
+    const [n, r] = t;
+    return {
+      top: n ?? 0,
+      bottom: r ?? 0
+    };
+  }
+  return typeof t == "object" ? {
+    top: t.start ?? 0,
+    bottom: t.end ?? 0
+  } : { top: 0, bottom: 0 };
+}
+function gt(t) {
+  if (typeof t == "number")
+    return { left: t, right: t };
+  if (Array.isArray(t)) {
+    const [n, r] = t;
+    return {
+      left: n ?? 0,
+      right: r ?? 0
+    };
+  }
+  return typeof t == "object" ? {
+    left: t.start ?? 0,
+    right: t.end ?? 0
+  } : { left: 0, right: 0 };
+}
+function ht(t, n, r, s) {
+  const i = J({ padding: r });
+  if (s === "none")
+    return i;
+  if (s === "height") {
+    const o = t % n;
+    o !== 0 && (i.bottom += n - o);
+  }
+  if (s === "clamp") {
+    i.top = i.top % n;
+    const o = t % n;
+    o !== 0 && (i.bottom += n - o), i.bottom = i.bottom % n;
+  }
+  return i;
+}
+const D = (...t) => t.filter(Boolean).join(" ").trim(), Y = (...t) => Object.assign({}, ...t.filter((n) => n !== void 0));
+function pt(t, n) {
+  if (t)
+    if (typeof t == "function")
+      t(n);
+    else
+      try {
+        Object.assign(t, { current: n });
+      } catch (r) {
+        console.error("Error assigning ref:", r);
+      }
+}
+function Ke(...t) {
+  return (n) => {
+    t.forEach((r) => {
+      pt(r, n);
+    });
+  };
+}
+const en = (t, n) => {
+  let r = null;
+  return (...s) => {
+    r && clearTimeout(r), r = setTimeout(() => t(...s), n);
+  };
+}, et = (t) => {
+  let n = null;
+  return (...r) => {
+    n || (n = requestAnimationFrame(() => {
+      t(...r), n = null;
+    }));
+  };
+};
+function ue(t) {
+  const [n, r] = Je({ width: 0, height: 0 }), s = ie({ width: 0, height: 0 }), i = ie(!1), o = le(() => {
+    if (!(!t.current || i.current))
+      try {
+        const d = t.current.getBoundingClientRect(), l = {
+          width: Math.round(d.width),
+          height: Math.round(d.height)
+        };
+        (s.current.width !== l.width || s.current.height !== l.height) && (s.current = l, r(l));
+      } catch (d) {
+        i.current = !0, console.error("Error measuring element:", d), (n.width !== 0 || n.height !== 0) && r({ width: 0, height: 0 });
+      }
+  }, [t, n]), a = ie(et(o));
+  ye(() => {
+    if (typeof window > "u" || !t.current) return;
+    const d = new ResizeObserver(() => {
+      a.current();
+    });
+    return d.observe(t.current), o(), () => {
+      d.disconnect(), i.current = !1;
+    };
+  }, [t, o]);
+  const f = le(() => {
+    i.current = !1, o();
+  }, [o]);
+  return { ...n, refresh: f };
+}
+function vt({
+  totalLines: t,
+  lineHeight: n,
+  containerRef: r,
+  buffer: s = 0
+}) {
+  const i = typeof s == "number" ? s : parseInt(s, 10) || 0, o = le(() => {
+    const l = r.current;
+    if (!l) return { start: 0, end: t };
+    if (l.closest(".content-block"))
+      return { start: 0, end: t };
+    const x = l.getBoundingClientRect().top + window.scrollY, b = Math.max(0, window.scrollY - x - i), h = b + window.innerHeight + i * 2, T = Math.max(0, Math.floor(b / n)), y = Math.min(t, Math.ceil(h / n));
+    return { start: T, end: y };
+  }, [t, n, r, i]), [a, f] = Je(o);
+  xt(["scroll", "resize"], () => {
+    d();
+  });
+  const d = et(() => f(o()));
+  return ye(() => {
+    const l = r.current;
+    if (!l) return;
+    const g = new IntersectionObserver(d, { threshold: 0 });
+    return g.observe(l), d(), () => {
+      g.disconnect();
+    };
+  }, [r, o, d]), a;
+}
+function xt(t, n) {
+  ye(() => (t.forEach((r) => window.addEventListener(r, n, { passive: !0 })), () => {
+    t.forEach((r) => window.removeEventListener(r, n));
+  }), [t, n]);
+}
+function fe(t, {
+  base: n = 8,
+  snapping: r = "none",
+  spacing: s = {},
+  warnOnMisalignment: i = !1
+} = {}) {
+  if (n < 1)
+    throw new Error("Base must be >= 1 for baseline alignment.");
+  const { height: o } = ue(t);
+  return P(() => {
+    const a = typeof s == "number" ? { top: s, right: s, bottom: s, left: s } : {
+      top: s.top ?? 0,
+      right: s.right ?? 0,
+      bottom: s.bottom ?? 0,
+      left: s.left ?? 0
+    }, f = o % n === 0;
+    if (r === "none")
+      return !f && i && process.env.NODE_ENV === "development" && console.warn(`Element height (${o}px) is not a multiple of base (${n}px).`), { padding: a, isAligned: f, height: o };
+    const d = r === "height" || r === "clamp" ? ht(o, n, a, r) : a;
+    return !f && i && process.env.NODE_ENV === "development" && console.warn(`[useBaseline] Element height (${o}px) is not aligned with base (${n}px).`), { padding: d, isAligned: f, height: o };
+  }, [n, r, s, o, i]);
+}
+function yt(t, n) {
+  const { width: r } = ue(t);
+  return P(() => {
+    const s = n.variant ?? "line", i = ce(n.gap ?? 0, { base: 1 });
+    if (!r)
+      return {
+        template: "none",
+        columnsCount: 0,
+        calculatedGap: 0,
+        isValid: !1
+      };
+    try {
+      switch (s) {
+        case "line": {
+          const o = Math.max(1, Math.floor(r / (i + 1)) + 1);
+          return {
+            template: `repeat(${o}, 1px)`,
+            columnsCount: o,
+            calculatedGap: i,
+            isValid: !0
+          };
+        }
+        case "pattern": {
+          if (!qt(n.columns))
+            throw new Error('Invalid "pattern" columns array');
+          const o = n.columns.map((a) => typeof a == "number" ? `${a}px` : a);
+          return o.some((a) => a === "0" || a === "0px") ? {
+            template: "none",
+            columnsCount: 0,
+            calculatedGap: 0,
+            isValid: !1
+          } : {
+            template: o.join(" "),
+            columnsCount: o.length,
+            calculatedGap: i,
+            isValid: !0
+          };
+        }
+        case "fixed": {
+          const o = typeof n.columns == "number" ? n.columns : 0;
+          if (o < 1)
+            throw new Error(`Invalid columns count: ${o}`);
+          const a = n.columnWidth ? ve(n.columnWidth) : "1fr";
+          return {
+            template: `repeat(${o}, ${a})`,
+            columnsCount: o,
+            calculatedGap: i,
+            isValid: !0
+          };
+        }
+        case "auto": {
+          const o = n.columnWidth ?? "auto";
+          if (o === "auto")
+            return {
+              template: "repeat(auto-fit, minmax(0, 1fr))",
+              columnsCount: 1,
+              calculatedGap: i,
+              isValid: !0
+            };
+          const a = typeof o == "number" ? `${o}px` : o.toString(), f = ke(a) ?? 0, d = f > 0 ? Math.max(1, Math.floor((r + i) / (f + i))) : 1;
+          return {
+            template: `repeat(auto-fit, minmax(${a}, 1fr))`,
+            columnsCount: d,
+            calculatedGap: i,
+            isValid: !0
+          };
+        }
+        default: {
+          console.warn(
+            `[useGuide] Unknown variant "${s}". Falling back to "line".`
+          );
+          const o = Math.max(1, Math.floor(r / (i + 1)) + 1);
+          return {
+            template: `repeat(${o}, 1px)`,
+            columnsCount: o,
+            calculatedGap: i,
+            isValid: !0
+          };
+        }
+      }
+    } catch (o) {
+      return console.warn("Error in useGuide:", o), {
+        template: "none",
+        columnsCount: 0,
+        calculatedGap: 0,
+        isValid: !1
+      };
+    }
+  }, [n, r]);
+}
+function Q(t) {
+  const n = tt();
+  return P(() => Object.assign(
+    { base: n.base },
+    n[t]
+  ), [n, t]);
+}
+function Z(t, n) {
+  return P(() => {
+    const r = t ?? n;
+    return {
+      isShown: r === "visible",
+      isHidden: r === "hidden",
+      isNone: r === "none",
+      debugging: r
+    };
+  }, [t, n]);
+}
+const kt = {
+  /** Color for single-line guides */
+  line: "var(--bk-guide-color-line-theme)",
+  /** Color for pattern-based guides */
+  pattern: "var(--bk-guide-color-pattern-theme)",
+  /** Color for auto-calculated guides */
+  auto: "var(--bk-guide-color-auto-theme)",
+  /** Color for fixed-column guides */
+  fixed: "var(--bk-guide-color-fixed-theme)"
+}, Et = {
+  /** Color for line variant */
+  line: "var(--bk-baseline-color-line-theme)",
+  /** Color for flat/block variant */
+  flat: "var(--bk-baseline-color-flat-theme)"
+}, wt = {
+  /** 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 */
+  indice: "var(--bk-spacer-color-indice-theme)"
+}, St = {
+  /** 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 */
+  indice: "var(--bk-box-color-indice-theme)"
+}, Ct = {
+  /** 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 */
+  indice: "var(--bk-stack-color-indice-theme)"
+}, _t = {
+  /** 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 */
+  indice: "var(--bk-layout-color-indice-theme)"
+}, Rt = "var(--bk-padder-color-theme)", Tt = {
+  /** Base unit for spacing calculations (in pixels) */
+  base: 8,
+  /** Baseline grid configuration */
+  baseline: {
+    variant: "line",
+    debugging: "hidden",
+    colors: Et
+  },
+  /** Guide overlay configuration */
+  guide: {
+    variant: "line",
+    debugging: "hidden",
+    colors: kt
+  },
+  /** Spacer component configuration */
+  spacer: {
+    variant: "line",
+    debugging: "hidden",
+    colors: wt
+  },
+  /** Box component configuration */
+  box: {
+    debugging: "hidden",
+    colors: St
+  },
+  /** Stack/Flex component configuration */
+  stack: {
+    debugging: "hidden",
+    colors: Ct
+  },
+  /** Layout component configuration */
+  layout: {
+    debugging: "hidden",
+    colors: _t
+  },
+  /** Padder component configuration */
+  padder: {
+    debugging: "hidden",
+    color: Rt
+  }
+}, Ee = E.createContext(null);
+Ee.displayName = "ConfigContext";
+const tt = () => E.use(Ee) ?? Tt, $t = ({
+  base: t,
+  baseline: n,
+  guide: r,
+  stack: s,
+  spacer: i,
+  layout: o,
+  box: a,
+  padder: f
+}) => ({
+  "--bk-base": `${t}px`,
+  // Baseline Colors
+  "--bk-baseline-color-line": n.colors.line,
+  "--bk-baseline-color-flat": n.colors.flat,
+  // Guide Colors
+  "--bk-guide-color-line": r.colors.line,
+  "--bk-guide-color-pattern": r.colors.pattern,
+  "--bk-guide-color-auto": r.colors.auto,
+  "--bk-guide-color-fixed": r.colors.fixed,
+  // Spacer Colors
+  "--bk-spacer-color-line": i.colors.line,
+  "--bk-spacer-color-flat": i.colors.flat,
+  "--bk-spacer-color-indice": i.colors.indice,
+  // Box Colors
+  "--bk-box-color-line": a.colors.line,
+  "--bk-box-color-flat": a.colors.flat,
+  "--bk-box-color-indice": a.colors.indice,
+  // Flex Colors
+  "--bk-stack-color-line": s.colors.line,
+  "--bk-stack-color-flat": s.colors.flat,
+  "--bk-stack-color-indice": s.colors.indice,
+  // Layout Colors
+  "--bk-layout-color-line": o.colors.line,
+  "--bk-layout-color-flat": o.colors.flat,
+  "--bk-layout-color-indice": o.colors.indice,
+  // Padder Color
+  "--bk-padder-color": f.color
+});
+function we({
+  children: t,
+  base: n,
+  stack: r,
+  baseline: s,
+  guide: i,
+  layout: o,
+  spacer: a,
+  box: f,
+  padder: d
+}) {
+  const l = tt(), g = E.useMemo(() => {
+    const x = {
+      base: n ?? l.base,
+      baseline: { ...l.baseline, ...s },
+      guide: { ...l.guide, ...i },
+      spacer: { ...l.spacer, ...a },
+      box: { ...l.box, ...f },
+      stack: { ...l.stack, ...r },
+      layout: { ...l.layout, ...o },
+      padder: { ...l.padder, ...d }
+    };
+    return {
+      ...x,
+      cssVariables: $t(x)
+    };
+  }, [
+    n,
+    l.base,
+    l.baseline,
+    l.guide,
+    l.spacer,
+    l.box,
+    l.stack,
+    l.layout,
+    l.padder,
+    s,
+    i,
+    a,
+    f,
+    r,
+    o,
+    d
+  ]);
+  return /* @__PURE__ */ R.jsx(Ee, { value: g, children: t });
+}
+const jt = "spacer_Wdw6F", At = "line_lUa33", Ot = "flat_zXVQF", Ie = {
+  spacer: jt,
+  line: At,
+  flat: Ot
+}, Nt = E.memo(function({
+  height: n,
+  width: r,
+  indicatorNode: s,
+  debugging: i,
+  variant: o,
+  base: a,
+  color: f,
+  className: d,
+  style: l,
+  ...g
+}) {
+  const x = E.useRef(null), b = Q("spacer"), { isShown: h } = Z(i, b.debugging), T = o ?? b.variant, y = a ?? b.base, [p, S] = Ze(
+    [r, n],
+    [0, 0],
+    { base: y, suppressWarnings: !0 }
+  ), C = ve(p || "100%"), k = ve(S || "100%"), _ = E.useMemo(() => !h || !s ? null : [
+    S !== 0 && /* @__PURE__ */ R.jsx("span", { children: s(S, "height") }, "height"),
+    p !== 0 && /* @__PURE__ */ R.jsx("span", { children: s(p, "width") }, "width")
+  ].filter(Boolean), [h, s, S, p]), w = E.useMemo(() => {
+    const O = {
+      "--bk-spacer-height": k,
+      "--bk-spacer-width": C,
+      "--bk-spacer-base": `${y}px`,
+      "--bk-spacer-color-indice": f ?? b.colors.indice,
+      "--bk-spacer-color-line": f ?? b.colors.line,
+      "--bk-spacer-color-flat": f ?? b.colors.flat
+    };
+    return Y(O, l);
+  }, [k, C, y, f, b.colors, l]);
+  return /* @__PURE__ */ R.jsx(
+    "div",
+    {
+      ref: x,
+      className: D(
+        Ie.spacer,
+        h && Ie[T],
+        d
+      ),
+      "data-testid": "spacer",
+      "data-variant": T,
+      style: w,
+      ...g,
+      children: _
+    }
+  );
+}), Mt = "padder_HhtrA", Vt = "visible_PJmPU", Fe = {
+  padder: Mt,
+  visible: Vt
+}, Se = E.memo(
+  E.forwardRef(function({
+    children: n,
+    className: r,
+    debugging: s,
+    height: i,
+    indicatorNode: o,
+    style: a,
+    width: f,
+    ...d
+  }, l) {
+    const g = Q("padder"), x = E.useMemo(
+      () => J(d),
+      [d]
+    ), { isShown: b, isNone: h, debugging: T } = Z(s, g.debugging), y = !h, p = E.useRef(null), { padding: { top: S, left: C, bottom: k, right: _ } } = fe(p, {
+      base: g.base,
+      snapping: "height",
+      spacing: x,
+      warnOnMisalignment: !h
+    }), w = Ke(l, p), O = E.useMemo(
+      () => Y(
+        {
+          "--bk-padder-width": f ?? "fit-content",
+          "--bk-padder-height": i ?? "fit-content",
+          "--bk-padder-base": `${g.base}px`,
+          "--bk-padder-color": g.color,
+          ...y ? {} : {
+            paddingBlock: `${S}px ${k}px`,
+            paddingInline: `${C}px ${_}px`
+          }
+        },
+        a
+      ),
+      [f, i, g.base, g.color, y, S, _, k, C, a]
+    ), $ = (A, W) => /* @__PURE__ */ R.jsx(
+      Nt,
+      {
+        debugging: T,
+        indicatorNode: o,
+        height: W,
+        width: A
+      }
+    );
+    return /* @__PURE__ */ R.jsxs(
+      "div",
+      {
+        ref: w,
+        className: D(
+          Fe.padder,
+          b && Fe.visible,
+          r
+        ),
+        "data-testid": "padder",
+        style: O,
+        children: [
+          y && /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
+            S > 0 && $("100%", S),
+            C > 0 && $(C, "100%")
+          ] }),
+          n,
+          y && /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
+            k > 0 && $("100%", k),
+            _ > 0 && $(_, "100%")
+          ] })
+        ]
+      }
+    );
+  })
+), Wt = "layout_Re9ui", Gt = "visible_plo0X", Le = {
+  layout: Wt,
+  visible: Gt
+};
+function He(t) {
+  return typeof t == "number" ? `repeat(${t}, 1fr)` : typeof t == "string" ? t : Array.isArray(t) ? t.map((n) => typeof n == "number" ? `${n}px` : n).join(" ") : "repeat(auto-fit, minmax(100px, 1fr))";
+}
+const tn = E.memo(
+  function({
+    children: n,
+    columns: r,
+    rows: s,
+    rowGap: i,
+    columnGap: o,
+    gap: a,
+    height: f,
+    width: d,
+    indicatorNode: l,
+    justifyItems: g,
+    alignItems: x,
+    justifyContent: b,
+    alignContent: h,
+    className: T,
+    variant: y,
+    style: p,
+    debugging: S,
+    ...C
+  }) {
+    const k = Q("layout"), { isShown: _ } = Z(S, k.debugging), w = E.useRef(null), O = E.useMemo(
+      () => J(C),
+      [C]
+    ), { padding: $ } = fe(w, {
+      base: k.base,
+      snapping: "height",
+      spacing: O,
+      warnOnMisalignment: !0
+    }), A = E.useMemo(
+      () => He(r),
+      [r]
+    ), W = E.useMemo(
+      () => s ? He(s) : "auto",
+      [s]
+    ), z = E.useMemo(() => ({
+      rowGap: i,
+      columnGap: o,
+      ...a !== void 0 && { gap: a }
+    }), [i, o, a]), N = E.useMemo(() => Y(
+      {
+        display: "grid",
+        gridTemplateColumns: A,
+        gridTemplateRows: W,
+        rowGap: i,
+        columnGap: o,
+        justifyItems: g,
+        alignItems: x,
+        justifyContent: b,
+        alignContent: h,
+        width: d,
+        height: f,
+        "--bk-layout-color-line": k.colors.line,
+        "--bk-layout-color-flat": k.colors.flat,
+        "--bk-layout-color-indice": k.colors.indice
+      },
+      p
+    ), [A, W, i, o, g, x, b, h, d, f, k.colors.line, k.colors.flat, k.colors.indice, p]);
+    return /* @__PURE__ */ R.jsx(we, { spacer: { variant: y }, children: /* @__PURE__ */ R.jsx(
+      Se,
+      {
+        ref: w,
+        "data-testid": "layout",
+        block: [$.top, $.bottom],
+        indicatorNode: l,
+        inline: [$.left, $.right],
+        debugging: S,
+        width: d,
+        height: f,
+        children: /* @__PURE__ */ R.jsx(
+          "div",
+          {
+            className: D(
+              T,
+              Le.layout,
+              _ && Le.visible
+            ),
+            style: Y(N, z),
+            children: n
+          }
+        )
+      }
+    ) });
+  }
+), Pt = "box_LHy8B", Yt = "visible_VOFS8", Xe = {
+  box: Pt,
+  visible: Yt
+}, nn = E.memo(
+  E.forwardRef(function({
+    children: n,
+    snapping: r = "clamp",
+    debugging: s,
+    className: i,
+    colSpan: o,
+    rowSpan: a,
+    span: f,
+    width: d,
+    height: l,
+    style: g,
+    ...x
+  }, b) {
+    const h = Q("box"), { isShown: T, debugging: y } = Z(s, h.debugging), p = E.useRef(null), { top: S, bottom: C, left: k, right: _ } = J(x), { padding: w } = fe(p, {
+      base: h.base,
+      snapping: r,
+      spacing: { top: S, bottom: C, left: k, right: _ },
+      warnOnMisalignment: y !== "none"
+    }), O = E.useMemo(() => {
+      const A = {};
+      return f !== void 0 ? (A.gridColumn = `span ${f}`, A.gridRow = `span ${f}`) : (o !== void 0 && (A.gridColumn = `span ${o}`), a !== void 0 && (A.gridRow = `span ${a}`)), A;
+    }, [o, a, f]), $ = E.useMemo(
+      () => Y({
+        "--bk-box-width": d,
+        "--bk-box-height": l,
+        "--bk-box-base": `${h.base}px`,
+        "--bk-box-color-line": h.colors.line
+      }, g),
+      [h.base, h.colors.line, l, g, d]
+    );
+    return /* @__PURE__ */ R.jsx(
+      "div",
+      {
+        ref: Ke(b, p),
+        "data-testid": "box",
+        className: D(Xe.box, T && Xe.visible, i),
+        style: Y($, O),
+        children: /* @__PURE__ */ R.jsx(
+          we,
+          {
+            base: 1,
+            spacer: {
+              variant: "flat",
+              colors: {
+                flat: "var(--bk-box-color-flat-theme)",
+                line: "var(--bk-box-color-line-theme)",
+                indice: "var(--bk-box-color-indice-theme)"
+              }
+            },
+            children: /* @__PURE__ */ R.jsx(
+              Se,
+              {
+                block: [w.top, w.bottom],
+                inline: [w.left, w.right],
+                width: d,
+                height: l,
+                debugging: y,
+                children: n
+              }
+            )
+          }
+        )
+      }
+    );
+  })
+), Bt = "stack_sXiLu", Ut = "visible_0IBG0", qe = {
+  stack: Bt,
+  visible: Ut
+}, rn = E.memo(function({
+  align: n = "stretch",
+  children: r,
+  className: s,
+  columnGap: i,
+  debugging: o,
+  direction: a = "row",
+  gap: f,
+  height: d,
+  indicatorNode: l,
+  justify: g = "flex-start",
+  rowGap: x,
+  style: b,
+  variant: h,
+  width: T,
+  ...y
+}) {
+  const p = Q("stack"), { isShown: S, debugging: C } = Z(o, p.debugging), k = E.useRef(null), _ = E.useMemo(() => J(y), [y]), { padding: w } = fe(k, {
+    base: p.base,
+    snapping: "height",
+    spacing: _,
+    warnOnMisalignment: !0
+  }), O = E.useMemo(() => ({
+    rowGap: x,
+    columnGap: i,
+    ...f !== void 0 && { gap: f }
+  }), [x, i, f]), $ = E.useMemo(() => Y(
+    {
+      display: "flex",
+      flexDirection: a,
+      justifyContent: g,
+      alignItems: n,
+      width: T || "fit-content",
+      height: d || "fit-content",
+      "--bk-stack-color-line": p.colors.line,
+      "--bk-stack-color-flat": p.colors.flat,
+      "--bk-stack-color-indice": p.colors.indice
+    },
+    O,
+    b
+  ), [a, g, n, T, d, p.colors.line, p.colors.flat, p.colors.indice, O, b]), A = C === "none" ? {
+    ...$,
+    paddingBlock: `${w.top}px ${w.bottom}px`,
+    paddingInline: `${w.left}px ${w.right}px`
+  } : $;
+  return /* @__PURE__ */ R.jsx(we, { spacer: { variant: h }, children: /* @__PURE__ */ R.jsx(
+    Se,
+    {
+      ref: k,
+      "data-testid": "padder",
+      block: [w.top, w.bottom],
+      inline: [w.left, w.right],
+      debugging: C,
+      indicatorNode: l,
+      width: T,
+      height: d,
+      children: /* @__PURE__ */ R.jsx(
+        "div",
+        {
+          "data-testid": "stack",
+          className: D(
+            s,
+            qe.stack,
+            S && qe.visible
+          ),
+          style: A,
+          ...y,
+          children: r
+        }
+      )
+    }
+  ) });
+}), zt = "guide_gY3kY", It = "line_xcGxq", Ft = "columns_eQm6d", Lt = "column_mYoBn", ee = {
+  guide: zt,
+  line: It,
+  columns: Ft,
+  column: Lt
+}, on = De(function({
+  className: n,
+  debugging: r,
+  style: s,
+  variant: i,
+  align: o = "start",
+  gap: a,
+  height: f,
+  width: d,
+  columns: l,
+  columnWidth: g,
+  ...x
+}) {
+  const b = Q("guide"), h = i ?? b.variant, { isShown: T } = Z(r, b.debugging), y = ie(null), { width: p, height: S } = ue(y), { top: C, right: k, bottom: _, left: w } = P(() => J(x), [x]), O = P(() => {
+    const N = ce(a);
+    return {
+      line: {
+        variant: "line",
+        gap: N - 1,
+        base: b.base
+      },
+      auto: g ? {
+        variant: "auto",
+        columnWidth: g,
+        gap: N,
+        base: b.base
+      } : null,
+      pattern: Array.isArray(l) ? {
+        variant: "pattern",
+        columns: l,
+        gap: N,
+        base: b.base
+      } : null,
+      fixed: typeof l == "number" ? {
+        variant: "fixed",
+        columns: l,
+        columnWidth: g,
+        gap: N,
+        base: b.base
+      } : null
+    }[h] ?? {
+      variant: "line",
+      gap: N - 1,
+      base: b.base
+    };
+  }, [a, b.base, g, l, h]), {
+    template: $,
+    columnsCount: A,
+    calculatedGap: W
+  } = yt(y, O), z = P(() => {
+    const N = {
+      "--bk-guide-gap": `${W}px`,
+      "--bk-guide-justify": o,
+      "--bk-guide-color-line": b.colors.line,
+      "--bk-guide-color-pattern": b.colors.pattern,
+      "--bk-guide-padding-block": `${C}px ${_}px`,
+      "--bk-guide-padding-inline": `${w}px ${k}px`,
+      "--bk-guide-template": $,
+      "--bk-guide-width": (d ?? p) || "100vw",
+      "--bk-guide-height": (f ?? S) || "100vh"
+    };
+    return Y(N, s);
+  }, [
+    W,
+    o,
+    b.colors.line,
+    b.colors.pattern,
+    C,
+    _,
+    w,
+    k,
+    $,
+    d,
+    p,
+    f,
+    S,
+    s
+  ]);
+  return /* @__PURE__ */ R.jsx(
+    "div",
+    {
+      ref: y,
+      className: D(
+        ee.guide,
+        n,
+        T ? ee.visible : ee.hidden,
+        h === "line" && ee.line
+      ),
+      "data-testid": "guide",
+      "data-variant": h,
+      style: z,
+      ...x,
+      children: T && /* @__PURE__ */ R.jsx("div", { className: ee.columns, "data-variant": h, children: Array.from({ length: A }, (N, G) => {
+        const F = b.colors[h] ?? b.colors.line;
+        return /* @__PURE__ */ R.jsx(
+          "div",
+          {
+            className: ee.column,
+            "data-column-index": G,
+            "data-variant": h,
+            style: { backgroundColor: F }
+          },
+          G
+        );
+      }) })
+    }
+  );
+}), Ht = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, Xt = (t) => typeof t == "number" ? Number.isFinite(t) && t >= 0 : typeof t != "string" ? !1 : t === "auto" || t === "100%" || Ht.test(t), qt = (t) => Array.isArray(t) && t.length > 0 && t.every(Xt), sn = (t) => {
+  const n = [...Object.keys(xe), ...Qe];
+  return typeof t == "number" || typeof t == "string" && n.some((r) => t.endsWith(r));
+}, an = (t) => typeof t == "string" && Dt.includes(t), Ce = (t) => typeof t == "object" && t !== null, ln = (t) => Ce(t) && t.variant === "line", cn = (t) => Ce(t) && "columns" in t && !("variant" in t), un = (t) => Ce(t) && "columnWidth" in t && !("variant" in t) && !("columns" in t), Jt = "baseline_CUi4a", pe = {
+  baseline: Jt
+}, fn = De(function({
+  className: n,
+  debugging: r,
+  style: s,
+  variant: i,
+  height: o,
+  width: a,
+  base: f,
+  ...d
+}) {
+  const l = Q("baseline"), g = i ?? l.variant, x = f ?? l.base, { isShown: b } = Z(r, l.debugging), h = ie(null), { width: T, height: y } = ue(h), [p, S] = P(
+    () => Ze([a, o], [T, y]),
+    [a, o, T, y]
+  ), { top: C, right: k, bottom: _, left: w } = P(() => J(d), [d]), O = P(() => {
+    const G = (S ?? 0) - (C + _);
+    return Math.max(1, Math.floor(G / x));
+  }, [S, C, _, x]), { start: $, end: A } = vt({
+    totalLines: O,
+    lineHeight: x,
+    containerRef: h,
+    buffer: 160
+  }), W = g === "line" ? l.colors.line : l.colors.flat, z = P(
+    () => Y(
+      {
+        "--bk-baseline-width": p,
+        padding: `${C}px ${k}px ${_}px ${w}px`,
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "hidden",
+        height: `${S}px`
+      },
+      s
+    ),
+    [p, C, k, _, w, S, s]
+  ), N = le(
+    (G) => Y({
+      top: `${G * x}px`,
+      left: 0,
+      right: 0,
+      height: g === "line" ? "1px" : `${x}px`,
+      backgroundColor: W,
+      position: "absolute"
+    }),
+    [x, g, W]
+  );
+  return /* @__PURE__ */ R.jsx(
+    "div",
+    {
+      ref: h,
+      "data-testid": "baseline",
+      className: D(pe.baseline, b ? pe.visible : pe.hidden, n),
+      style: z,
+      ...d,
+      children: b && Array.from({ length: A - $ }, (G, F) => {
+        const L = F + $;
+        return /* @__PURE__ */ R.jsx("div", { "data-row-index": L, style: N(L) }, L);
+      })
+    }
+  );
+}), Dt = ["start", "center", "end"], dn = ["line", "flat"];
+export {
+  xe as ABSOLUTE_UNIT_CONVERSIONS,
+  fn as Baseline,
+  nn as Box,
+  we as Config,
+  Tt as DEFAULT_CONFIG,
+  Dt as GRID_ALIGNMENTS,
+  on as Guide,
+  tn as Layout,
+  dn as PADD_VARIANTS,
+  Se as Padder,
+  Qe as RELATIVE_UNITS,
+  Nt as Spacer,
+  rn as Stack,
+  ht as calculateSnappedSpacing,
+  dt as clamp,
+  ke as convertValue,
+  $t as createCSSVariables,
+  en as debounce,
+  ve as formatValue,
+  un as isAutoCalculatedGuide,
+  an as isGuideAlignment,
+  cn as isGuideColumnConfig,
+  ln as isGuideLineConfig,
+  sn as isGuideValue,
+  Xt as isValidGuideColumnValue,
+  qt as isValidGuidePattern,
+  D as mergeClasses,
+  Ke as mergeRefs,
+  Y as mergeStyles,
+  Zt as moduloize,
+  ce as normalizeValue,
+  Ze as normalizeValuePair,
+  J as parsePadding,
+  ut as parseUnit,
+  et as rafThrottle,
+  Kt as round,
+  fe as useBaseline,
+  Q as useConfig,
+  Z as useDebug,
+  tt as useDefaultConfig,
+  yt as useGuide,
+  ue as useMeasure,
+  vt as useVirtual
+};
+//# sourceMappingURL=index.mjs.map