baseline-kit 2.0.0 → 2.1.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
-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 = {};
+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
@@ -10,29 +10,29 @@ var ae = { exports: {} }, re = {};
  * 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
+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 re.Fragment = n, re.jsx = r, re.jsxs = r, re;
+  return de.Fragment = n, de.jsx = o, de.jsxs = o, de;
 }
-var oe = {};
+var be = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,421 +42,421 @@ var oe = {};
  * 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:
+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 w:
+        case I:
           return "Portal";
-        case A:
+        case M:
           return "Profiler";
-        case $:
+        case p:
           return "StrictMode";
-        case G:
+        case z:
           return "Suspense";
-        case F:
+        case y:
           return "SuspenseList";
       }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
+      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."
-        ), 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;
+        ), t.$$typeof) {
+          case E:
+            return (t.displayName || "Context") + ".Provider";
+          case D:
+            return (t._context.displayName || "Context") + ".Consumer";
           case L:
-            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
-          case de:
-            c = e._payload, e = e._init;
+            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 t(e(c));
+              return e(t(f));
             } catch {
             }
         }
       return null;
     }
-    function n(e) {
-      return "" + e;
+    function n(t) {
+      return "" + t;
     }
-    function r(e) {
+    function o(t) {
       try {
-        n(e);
-        var c = !1;
+        n(t);
+        var f = !1;
       } catch {
-        c = !0;
+        f = !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,
+      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.",
-          v
-        ), n(e);
+          C
+        ), n(t);
       }
     }
-    function s() {
+    function r() {
     }
-    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 = {
+    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: s,
+          value: r,
           writable: !0
         };
         Object.defineProperties(console, {
-          info: e,
-          log: e,
-          warn: e,
-          error: e,
-          group: e,
-          groupCollapsed: e,
-          groupEnd: e
+          info: t,
+          log: t,
+          warn: t,
+          error: t,
+          group: t,
+          groupCollapsed: t,
+          groupEnd: t
         });
       }
-      te++;
+      X++;
     }
-    function o() {
-      if (te--, te === 0) {
-        var e = { configurable: !0, enumerable: !0, writable: !0 };
+    function a() {
+      if (X--, X === 0) {
+        var t = { 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 })
+          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 > te && console.error(
+      0 > X && console.error(
         "disabledDepth fell below zero. This is a bug in React. Please file an issue."
       );
     }
-    function a(e) {
-      if (me === void 0)
+    function i(t) {
+      if (ye === 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" : "";
+        } 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 `
-` + me + e + Ve;
+` + ye + t + He;
     }
-    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();
+    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 M = {
+        var Y = {
           DetermineComponentFrameRoot: function() {
             try {
-              if (c) {
-                var I = function() {
+              if (f) {
+                var te = function() {
                   throw Error();
                 };
-                if (Object.defineProperty(I.prototype, "props", {
+                if (Object.defineProperty(te.prototype, "props", {
                   set: function() {
                     throw Error();
                   }
                 }), typeof Reflect == "object" && Reflect.construct) {
                   try {
-                    Reflect.construct(I, []);
-                  } catch (U) {
-                    var se = U;
+                    Reflect.construct(te, []);
+                  } catch (ee) {
+                    var me = ee;
                   }
-                  Reflect.construct(e, [], I);
+                  Reflect.construct(t, [], te);
                 } else {
                   try {
-                    I.call();
-                  } catch (U) {
-                    se = U;
+                    te.call();
+                  } catch (ee) {
+                    me = ee;
                   }
-                  e.call(I.prototype);
+                  t.call(te.prototype);
                 }
               } else {
                 try {
                   throw Error();
-                } catch (U) {
-                  se = U;
+                } catch (ee) {
+                  me = ee;
                 }
-                (I = e()) && typeof I.catch == "function" && I.catch(function() {
+                (te = t()) && typeof te.catch == "function" && te.catch(function() {
                 });
               }
-            } catch (U) {
-              if (U && se && typeof U.stack == "string")
-                return [U.stack, se.stack];
+            } catch (ee) {
+              if (ee && me && typeof ee.stack == "string")
+                return [ee.stack, me.stack];
             }
             return [null, null];
           }
         };
-        M.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
-        var j = Object.getOwnPropertyDescriptor(
-          M.DetermineComponentFrameRoot,
+        Y.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
+        var N = Object.getOwnPropertyDescriptor(
+          Y.DetermineComponentFrameRoot,
           "name"
         );
-        j && j.configurable && Object.defineProperty(
-          M.DetermineComponentFrameRoot,
+        N && N.configurable && Object.defineProperty(
+          Y.DetermineComponentFrameRoot,
           "name",
           { value: "DetermineComponentFrameRoot" }
         );
-        var m = M.DetermineComponentFrameRoot(), B = m[0], K = m[1];
-        if (B && K) {
-          var V = B.split(`
-`), q = K.split(`
+        var v = Y.DetermineComponentFrameRoot(), Q = v[0], ce = v[1];
+        if (Q && ce) {
+          var F = Q.split(`
+`), ae = ce.split(`
 `);
-          for (m = j = 0; j < V.length && !V[j].includes(
+          for (v = N = 0; N < F.length && !F[N].includes(
             "DetermineComponentFrameRoot"
           ); )
-            j++;
-          for (; m < q.length && !q[m].includes(
+            N++;
+          for (; v < ae.length && !ae[v].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)
+            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 (j--, m--, 0 > m || V[j] !== q[m]) {
-                    var ne = `
-` + V[j].replace(
+                  if (N--, v--, 0 > v || F[N] !== ae[v]) {
+                    var fe = `
+` + F[N].replace(
                       " at new ",
                       " at "
                     );
-                    return e.displayName && ne.includes("<anonymous>") && (ne = ne.replace("<anonymous>", e.displayName)), typeof e == "function" && he.set(e, ne), ne;
+                    return t.displayName && fe.includes("<anonymous>") && (fe = fe.replace("<anonymous>", t.displayName)), typeof t == "function" && Se.set(t, fe), fe;
                   }
-                while (1 <= j && 0 <= m);
+                while (1 <= N && 0 <= v);
               break;
             }
         }
       } finally {
-        ge = !1, H.H = v, o(), Error.prepareStackTrace = u;
+        xe = !1, _.H = C, a(), Error.prepareStackTrace = d;
       }
-      return V = (V = e ? e.displayName || e.name : "") ? a(V) : "", typeof e == "function" && he.set(e, V), V;
+      return F = (F = t ? t.displayName || t.name : "") ? i(F) : "", typeof t == "function" && Se.set(t, F), F;
     }
-    function d(e) {
-      if (e == null) return "";
-      if (typeof e == "function") {
-        var c = e.prototype;
-        return f(
-          e,
-          !(!c || !c.isReactComponent)
+    function u(t) {
+      if (t == null) return "";
+      if (typeof t == "function") {
+        var f = t.prototype;
+        return l(
+          t,
+          !(!f || !f.isReactComponent)
         );
       }
-      if (typeof e == "string") return a(e);
-      switch (e) {
-        case G:
-          return a("Suspense");
-        case F:
-          return a("SuspenseList");
+      if (typeof t == "string") return i(t);
+      switch (t) {
+        case z:
+          return i("Suspense");
+        case y:
+          return i("SuspenseList");
       }
-      if (typeof e == "object")
-        switch (e.$$typeof) {
-          case N:
-            return e = f(e.render, !1), e;
+      if (typeof t == "object")
+        switch (t.$$typeof) {
           case L:
-            return d(e.type);
-          case de:
-            c = e._payload, e = e._init;
+            return t = l(t.render, !1), t;
+          case B:
+            return u(t.type);
+          case W:
+            f = t._payload, t = t._init;
             try {
-              return d(e(c));
+              return u(t(f));
             } catch {
             }
         }
       return "";
     }
-    function l() {
-      var e = H.A;
-      return e === null ? null : e.getOwner();
+    function m() {
+      var t = _.A;
+      return t === null ? null : t.getOwner();
     }
-    function g(e) {
-      if (Re.call(e, "key")) {
-        var c = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (c && c.isReactWarning) return !1;
+    function k(t) {
+      if (U.call(t, "key")) {
+        var f = Object.getOwnPropertyDescriptor(t, "key").get;
+        if (f && f.isReactWarning) return !1;
       }
-      return e.key !== void 0;
+      return t.key !== void 0;
     }
-    function x(e, c) {
-      function u() {
-        We || (We = !0, console.error(
+    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)",
-          c
+          f
         ));
       }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
+      d.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: d,
         configurable: !0
       });
     }
-    function b() {
-      var e = t(this.type);
-      return Ge[e] || (Ge[e] = !0, console.error(
+    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."
-      )), e = this.props.ref, e !== void 0 ? e : null;
+      )), t = this.props.ref, t !== void 0 ? t : 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", {
+    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: b
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        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(e, "_debugInfo", {
+      }), Object.defineProperty(t, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
     }
-    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);
+    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 y(m, e);
+          else j(v, t);
       } 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(
+        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",
-          v,
-          m
+          C,
+          v
         );
-      if (Re.call(c, "key")) {
-        m = t(e);
-        var B = Object.keys(c).filter(function(V) {
-          return V !== "key";
+      if (U.call(f, "key")) {
+        v = e(t);
+        var Q = Object.keys(f).filter(function(F) {
+          return F !== "key";
         });
-        v = 0 < B.length ? "{key: someKey, " + B.join(": ..., ") + ": ...}" : "{key: someKey}", Pe[m + v] || (B = 0 < B.length ? "{" + B.join(": ..., ") + ": ...}" : "{}", console.error(
+        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,
-          m,
-          B,
-          m
-        ), Pe[m + v] = !0);
+          Q,
+          v
+        ), Be[v + C] = !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);
+      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 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);
+    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 (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);
+        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 p(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === _;
+    function T(t) {
+      return typeof t == "object" && t !== null && t.$$typeof === R;
     }
-    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;
+    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.',
-          c,
-          u
-        ), H.getCurrentStack = v;
+          f,
+          d
+        ), _.getCurrentStack = C;
       }
     }
-    function C(e) {
-      var c = "", u = l();
-      return u && (u = t(u.type)) && (c = `
+    function V(t) {
+      var f = "", d = m();
+      return d && (d = e(d.type)) && (f = `
 
-Check the render method of \`` + u + "`."), c || (e = t(e)) && (c = `
+Check the render method of \`` + d + "`."), f || (t = e(t)) && (f = `
 
-Check the top-level render call using <` + e + ">."), c;
+Check the top-level render call using <` + t + ">."), f;
     }
-    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);
+    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);
     };
-  }()), oe;
+  }()), be;
 }
-var ze;
-function ct() {
-  return ze || (ze = 1, process.env.NODE_ENV === "production" ? ae.exports = at() : ae.exports = lt()), ae.exports;
+var Fe;
+function ut() {
+  return Fe || (Fe = 1, process.env.NODE_ENV === "production" ? ge.exports = lt() : ge.exports = ct()), ge.exports;
 }
-var R = ct();
-function ut(t) {
-  const n = t.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+var S = ut();
+function ft(e) {
+  const n = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
   if (!n) return null;
-  const r = parseFloat(n[1]), s = n[2];
-  return { value: r, unit: s };
+  const o = parseFloat(n[1]), r = n[2];
+  return { value: o, unit: r };
 }
-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 ?? "";
+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 ft = {
+const dt = {
   parentSize: 0,
   viewportWidth: typeof window < "u" ? window.innerWidth : 1920,
   viewportHeight: typeof window < "u" ? window.innerHeight : 1080,
   rootFontSize: 16,
   parentFontSize: 16
-}, xe = {
+}, Ce = {
   px: 1,
   in: 96,
   // 1in = 96px
@@ -469,275 +469,329 @@ const ft = {
   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) {
+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 s * o.parentFontSize;
+        return r * a.parentFontSize;
       case "rem":
-        return s * o.rootFontSize;
+        return r * a.rootFontSize;
       case "vh":
-        return s / 100 * o.viewportHeight;
+        return r / 100 * a.viewportHeight;
       case "vw":
-        return s / 100 * o.viewportWidth;
+        return r / 100 * a.viewportWidth;
       case "vmin":
-        return s / 100 * Math.min(o.viewportWidth, o.viewportHeight);
+        return r / 100 * Math.min(a.viewportWidth, a.viewportHeight);
       case "vmax":
-        return s / 100 * Math.max(o.viewportWidth, o.viewportHeight);
+        return r / 100 * Math.max(a.viewportWidth, a.viewportHeight);
       case "%":
-        return s / 100 * o.parentSize;
+        return r / 100 * a.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 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 dt(t, n, r) {
-  return Math.min(Math.max(t, n), r);
+function bt(e, n, o) {
+  return Math.min(Math.max(e, n), o);
 }
-function Kt(t, n = 0) {
+function xn(e, n = 0) {
   if (n >= 0)
-    return Number((Math.round(t * 10 ** n) / 10 ** n).toFixed(n));
+    return Number((Math.round(e * 10 ** n) / 10 ** n).toFixed(n));
   {
-    const r = 10 ** Math.abs(n);
-    return Math.round(t / r) * r;
+    const o = 10 ** Math.abs(n);
+    return Math.round(e / o) * o;
   }
 }
-function ce(t, n = {}) {
+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: r = 8,
-    round: s = !0,
-    clamp: i,
-    suppressWarnings: o = !1
+    base: o = 8,
+    round: r = !0,
+    clamp: s,
+    suppressWarnings: a = !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;
+  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;
   }
-  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;
+  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 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 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 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 };
+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: r.right,
+    right: o.right,
     bottom: n.bottom,
-    left: r.left
+    left: o.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 };
+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 (t.length >= 4) {
-      const [n, r, s, i] = t;
+    if (e.length >= 4) {
+      const [n, o, r, s] = e;
       return {
         top: n ?? 0,
-        right: r ?? 0,
-        bottom: s ?? 0,
-        left: i ?? 0
+        right: o ?? 0,
+        bottom: r ?? 0,
+        left: s ?? 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 };
+  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 mt(t) {
-  if (typeof t == "number")
-    return { top: t, bottom: t };
-  if (Array.isArray(t)) {
-    const [n, r] = t;
+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: r ?? 0
+      bottom: o ?? 0
     };
   }
-  return typeof t == "object" ? {
-    top: t.start ?? 0,
-    bottom: t.end ?? 0
+  return typeof e == "object" ? {
+    top: e.start ?? 0,
+    bottom: e.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;
+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: r ?? 0
+      right: o ?? 0
     };
   }
-  return typeof t == "object" ? {
-    left: t.start ?? 0,
-    right: t.end ?? 0
+  return typeof e == "object" ? {
+    left: e.start ?? 0,
+    right: e.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);
+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 (s === "clamp") {
-    i.top = i.top % n;
-    const o = t % n;
-    o !== 0 && (i.bottom += n - o), i.bottom = i.bottom % n;
+  if (r === "clamp") {
+    s.top = s.top % n;
+    const a = e % n;
+    a !== 0 && (s.bottom += n - a), s.bottom = s.bottom % n;
   }
-  return i;
+  return s;
 }
-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);
+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(t, { current: n });
-      } catch (r) {
-        console.error("Error assigning ref:", r);
+        Object.assign(e, { current: n });
+      } catch (o) {
+        console.error("Error assigning ref:", o);
       }
 }
-function Ke(...t) {
+function tt(...e) {
   return (n) => {
-    t.forEach((r) => {
-      pt(r, n);
+    e.forEach((o) => {
+      yt(o, n);
     });
   };
 }
-const en = (t, n) => {
-  let r = null;
-  return (...s) => {
-    r && clearTimeout(r), r = setTimeout(() => t(...s), 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);
   };
-}, et = (t) => {
-  let n = null;
-  return (...r) => {
-    n || (n = requestAnimationFrame(() => {
-      t(...r), n = 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 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))
+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 d = t.current.getBoundingClientRect(), l = {
-          width: Math.round(d.width),
-          height: Math.round(d.height)
+        const a = e.current.getBoundingClientRect(), i = {
+          width: a ? Math.round(a.width) : 0,
+          height: a ? Math.round(a.height) : 0
         };
-        (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 });
+        o(
+          (l) => l.width === i.width && l.height === i.height ? l : i
+        );
+      } catch {
+        o({ width: 0, height: 0 });
       }
-  }, [t, n]), a = ie(et(o));
-  ye(() => {
-    if (typeof window > "u" || !t.current) return;
-    const d = new ResizeObserver(() => {
-      a.current();
+  }, [e]), s = c.useMemo(() => nt(r), [r]);
+  return c.useLayoutEffect(() => {
+    r();
+  }, [r]), c.useLayoutEffect(() => {
+    if (!e.current) return;
+    const a = new ResizeObserver(() => {
+      s();
     });
-    return d.observe(t.current), o(), () => {
-      d.disconnect(), i.current = !1;
+    return a.observe(e.current), () => {
+      a.disconnect();
     };
-  }, [t, o]);
-  const f = le(() => {
-    i.current = !1, o();
-  }, [o]);
-  return { ...n, refresh: f };
+  }, [e, s]), { ...n, refresh: s };
 }
-function vt({
-  totalLines: t,
+function St({
+  totalLines: e,
   lineHeight: n,
-  containerRef: r,
-  buffer: s = 0
+  containerRef: o,
+  buffer: r = 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 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 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();
+  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();
     };
-  }, [r, o, d]), a;
+  }, [o, a, m]), i;
 }
-function xt(t, n) {
-  ye(() => (t.forEach((r) => window.addEventListener(r, n, { passive: !0 })), () => {
-    t.forEach((r) => window.removeEventListener(r, n));
-  }), [t, n]);
+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 fe(t, {
+function pe(e, {
   base: n = 8,
-  snapping: r = "none",
-  spacing: s = {},
-  warnOnMisalignment: i = !1
+  snapping: o = "none",
+  spacing: r = {},
+  warnOnMisalignment: s = !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]);
+  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 yt(t, n) {
-  const { width: r } = ue(t);
-  return P(() => {
-    const s = n.variant ?? "line", i = ce(n.gap ?? 0, { base: 1 });
-    if (!r)
+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,
@@ -747,101 +801,101 @@ function yt(t, n) {
     try {
       switch (s) {
         case "line": {
-          const o = Math.max(1, Math.floor(r / (i + 1)) + 1);
+          const l = Math.max(1, Math.floor(o / (i + 1)) + 1);
           return {
-            template: `repeat(${o}, 1px)`,
-            columnsCount: o,
+            template: `repeat(${l}, 1px)`,
+            columnsCount: l,
             calculatedGap: i,
             isValid: !0
           };
         }
         case "pattern": {
-          if (!qt(n.columns))
+          if (!bn(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") ? {
+          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: o.join(" "),
-            columnsCount: o.length,
+            template: l.join(" "),
+            columnsCount: l.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";
+          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(${o}, ${a})`,
-            columnsCount: o,
+            template: `repeat(${l}, ${u})`,
+            columnsCount: l,
             calculatedGap: i,
             isValid: !0
           };
         }
         case "auto": {
-          const o = n.columnWidth ?? "auto";
-          if (o === "auto")
+          const l = n.columnWidth ?? "auto";
+          if (l === "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;
+          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(${a}, 1fr))`,
-            columnsCount: d,
+            template: `repeat(auto-fit, minmax(${u}, 1fr))`,
+            columnsCount: k,
             calculatedGap: i,
             isValid: !0
           };
         }
         default: {
-          console.warn(
+          r.current || (console.warn(
             `[useGuide] Unknown variant "${s}". Falling back to "line".`
-          );
-          const o = Math.max(1, Math.floor(r / (i + 1)) + 1);
+          ), r.current = !0);
+          const l = Math.max(1, Math.floor(o / (i + 1)) + 1);
           return {
-            template: `repeat(${o}, 1px)`,
-            columnsCount: o,
+            template: `repeat(${l}, 1px)`,
+            columnsCount: l,
             calculatedGap: i,
             isValid: !0
           };
         }
       }
-    } catch (o) {
-      return console.warn("Error in useGuide:", o), {
+    } catch (l) {
+      return console.warn("Error in useGuide:", l), {
         template: "none",
         columnsCount: 0,
         calculatedGap: 0,
         isValid: !1
       };
     }
-  }, [n, r]);
+  }, [n, o]);
 }
-function Q(t) {
-  const n = tt();
-  return P(() => Object.assign(
+function se(e) {
+  const n = rt();
+  return ke(() => Object.assign(
     { base: n.base },
-    n[t]
-  ), [n, t]);
+    n[e]
+  ), [n, e]);
 }
-function Z(t, n) {
-  return P(() => {
-    const r = t ?? n;
+function le(e, n) {
+  return ke(() => {
+    const o = e ?? n;
     return {
-      isShown: r === "visible",
-      isHidden: r === "hidden",
-      isNone: r === "none",
-      debugging: r
+      isShown: o === "visible",
+      isHidden: o === "hidden",
+      isNone: o === "none",
+      debugging: o
     };
-  }, [t, n]);
+  }, [e, n]);
 }
-const kt = {
+const Ct = {
   /** Color for single-line guides */
   line: "var(--bk-guide-color-line-theme)",
   /** Color for pattern-based guides */
@@ -850,439 +904,685 @@ const kt = {
   auto: "var(--bk-guide-color-auto-theme)",
   /** Color for fixed-column guides */
   fixed: "var(--bk-guide-color-fixed-theme)"
-}, Et = {
+}, Rt = {
   /** Color for line variant */
   line: "var(--bk-baseline-color-line-theme)",
   /** Color for flat/block variant */
   flat: "var(--bk-baseline-color-flat-theme)"
-}, wt = {
+}, _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 */
-  indice: "var(--bk-spacer-color-indice-theme)"
-}, St = {
+  text: "var(--bk-spacer-color-text-theme)"
+}, jt = {
   /** 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 = {
+  text: "var(--bk-box-color-text-theme)"
+}, Mt = {
   /** 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 = {
+  text: "var(--bk-stack-color-text-theme)"
+}, Ot = {
   /** 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 = {
+  text: "var(--bk-layout-color-text-theme)"
+}, Tt = "var(--bk-padder-color-theme)", At = {
   /** Base unit for spacing calculations (in pixels) */
   base: 8,
   /** Baseline grid configuration */
   baseline: {
     variant: "line",
     debugging: "hidden",
-    colors: Et
+    colors: Rt
   },
   /** Guide overlay configuration */
   guide: {
     variant: "line",
     debugging: "hidden",
-    colors: kt
+    colors: Ct
   },
   /** Spacer component configuration */
   spacer: {
     variant: "line",
     debugging: "hidden",
-    colors: wt
+    colors: _t
   },
   /** Box component configuration */
   box: {
     debugging: "hidden",
-    colors: St
+    colors: jt
   },
   /** Stack/Flex component configuration */
   stack: {
     debugging: "hidden",
-    colors: Ct
+    colors: Mt
   },
   /** Layout component configuration */
   layout: {
     debugging: "hidden",
-    colors: _t
+    colors: Ot
   },
   /** Padder component configuration */
   padder: {
     debugging: "hidden",
-    color: Rt
+    color: Tt
   }
-}, 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,
+}, je = c.createContext(At);
+je.displayName = "ConfigContext";
+const rt = () => c.use(je), En = (e) => {
+  const {
+    base: n,
+    baseline: o,
+    guide: r,
+    stack: s,
+    spacer: a,
+    layout: i,
+    box: l,
+    padder: u
+  } = e;
+  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
+  };
+}, $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 Me({
+  children: e,
   base: n,
-  stack: r,
-  baseline: s,
-  guide: i,
-  layout: o,
-  spacer: a,
-  box: f,
-  padder: d
+  stack: o,
+  baseline: r,
+  guide: s,
+  layout: a,
+  spacer: i,
+  box: l,
+  padder: u
 }) {
-  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)
-    };
-  }, [
+  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,
-    l.base,
-    l.baseline,
-    l.guide,
-    l.spacer,
-    l.box,
-    l.stack,
-    l.layout,
-    l.padder,
+    r,
     s,
     i,
-    a,
-    f,
-    r,
+    l,
     o,
-    d
+    a,
+    u
   ]);
-  return /* @__PURE__ */ R.jsx(Ee, { value: g, children: t });
+  return /* @__PURE__ */ S.jsx(je, { value: k, children: e });
 }
-const jt = "spacer_Wdw6F", At = "line_lUa33", Ot = "flat_zXVQF", Ie = {
-  spacer: jt,
-  line: At,
-  flat: Ot
-}, Nt = E.memo(function({
+const Nt = "spr_zbcF6", Vt = "line_qHW69", Gt = "flat_gqixr", Ue = {
+  spr: Nt,
+  line: Vt,
+  flat: Gt
+}, Dt = (e, n, o, r) => ({
+  "--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")
+  ] });
+}, Ht = c.memo(function({
   height: n,
-  width: r,
-  indicatorNode: s,
-  debugging: i,
-  variant: o,
-  base: a,
-  color: f,
-  className: d,
-  style: l,
-  ...g
+  width: o,
+  indicatorNode: r,
+  debugging: s,
+  variant: a,
+  base: i,
+  color: l,
+  className: u,
+  style: m,
+  children: k,
+  ssrMode: b = !1,
+  ...O
 }) {
-  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],
+  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 [R, I] = c.useMemo(() => et(
+    [o, 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
+    { base: g, suppressWarnings: !0 }
+  ), [o, n, g]), G = re(
+    V && !b,
+    !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
+    ),
+    [g, h.colors]
+  ), D = c.useMemo(() => {
+    const E = H(I || "100%"), L = H(R || "100%"), z = `${g}px`, y = ["--bksw", "--bksh"], B = {
+      ...w({
+        key: "--bksh",
+        value: E,
+        defaultStyles: M,
+        skipDimensions: { fullSize: y }
+      }),
+      ...w({
+        key: "--bksw",
+        value: L,
+        defaultStyles: M,
+        skipDimensions: { fullSize: y }
+      }),
+      // Explicitly set --bksb to ensure it is always applied
+      "--bksb": z,
+      ...w({
+        key: "--bksci",
+        value: l ?? h.colors.text,
+        defaultStyles: M
+      }),
+      ...w({
+        key: "--bkscl",
+        value: l ?? h.colors.line,
+        defaultStyles: M
+      }),
+      ...w({
+        key: "--bkscf",
+        value: l ?? h.colors.flat,
+        defaultStyles: M
+      })
     };
-    return Y(O, l);
-  }, [k, C, y, f, b.colors, l]);
-  return /* @__PURE__ */ R.jsx(
+    return oe(B, m);
+  }, [
+    R,
+    I,
+    l,
+    g,
+    h.colors,
+    M,
+    m
+  ]);
+  return /* @__PURE__ */ S.jsxs(
     "div",
     {
       ref: x,
-      className: D(
-        Ie.spacer,
-        h && Ie[T],
-        d
-      ),
       "data-testid": "spacer",
+      className: ne(Ue.spr, j && Ue[T], u),
       "data-variant": T,
-      style: w,
-      ...g,
-      children: _
+      style: D,
+      ...O,
+      children: [
+        p,
+        k
+      ]
+    }
+  );
+}), 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,
+    {
+      variant: r,
+      debugging: l === 0 || i === 0 ? "none" : s,
+      indicatorNode: o,
+      height: l !== "100%" ? l : void 0,
+      width: i !== "100%" ? i : void 0
     }
   );
-}), Mt = "padder_HhtrA", Vt = "visible_PJmPU", Fe = {
-  padder: Mt,
-  visible: Vt
-}, Se = E.memo(
-  E.forwardRef(function({
+  return a.displayName = "PadderSpacer", a;
+}, Oe = c.memo(
+  c.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,
+    className: o,
+    debugging: r,
+    height: s,
+    indicatorNode: a,
+    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);
+    }, []);
+    const R = c.useRef(null), I = pe(R, {
+      base: b.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
+      warnOnMisalignment: !j
+    }), G = {
+      padding: {
+        top: x.top || 0,
+        right: x.right || 0,
+        bottom: x.bottom || 0,
+        left: x.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 },
+        i
+      );
+    }, [
+      l,
+      s,
+      b.base,
+      b.color,
+      g,
+      p.top,
+      p.right,
+      p.bottom,
+      p.left,
+      i
+    ]), E = c.useMemo(
+      () => Pt(O, T, a),
+      [O, T, a]
     );
-    return /* @__PURE__ */ R.jsxs(
+    return g ? /* @__PURE__ */ S.jsxs(
       "div",
       {
-        ref: w,
-        className: D(
-          Fe.padder,
-          b && Fe.visible,
-          r
-        ),
+        ref: M,
         "data-testid": "padder",
-        style: O,
+        className: ne(we.pad, h && we.v, o),
+        style: D,
         children: [
-          y && /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
-            S > 0 && $("100%", S),
-            C > 0 && $(C, "100%")
+          /* @__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%") })
           ] }),
-          n,
-          y && /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
-            k > 0 && $("100%", k),
-            _ > 0 && $(_, "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__ */ S.jsx(
+      "div",
+      {
+        ref: M,
+        "data-testid": "padder",
+        className: ne(we.pad, o),
+        style: D,
+        children: n
+      }
     );
   })
-), 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(
+), Yt = "lay_5cMu5", Ft = "v_dprVE", qe = {
+  lay: Yt,
+  v: Ft
+}, Ut = (e) => ({
+  "--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))",
+  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,
+  ...$
+}) {
+  const R = se("layout"), { isShown: I, debugging: G } = le(l, R.debugging), [p, M] = c.useState(!1);
+  c.useEffect(() => {
+    M(!0);
+  }, []);
+  const D = c.useRef(null), E = c.useMemo(
+    () => ie($),
+    [$]
+  ), L = pe(D, {
+    base: R.base,
+    snapping: "height",
+    spacing: E,
+    warnOnMisalignment: !0
+  }), z = {
+    padding: {
+      top: E.top || 0,
+      right: E.right || 0,
+      bottom: E.bottom || 0,
+      left: E.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(
       {
-        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
+        // Theme overrides
+        ...w({
+          key: "--bklw",
+          value: _,
+          defaultStyles: A,
+          skipDimensions: { auto: P }
+        }),
+        ...w({
+          key: "--bklh",
+          value: U,
+          defaultStyles: A,
+          skipDimensions: { auto: P }
+        }),
+        ...w({
+          key: "--bklcl",
+          value: R.colors.line,
+          defaultStyles: A
+        }),
+        ...w({
+          key: "--bklcf",
+          value: R.colors.flat,
+          defaultStyles: A
+        }),
+        ...w({
+          key: "--bklci",
+          value: R.colors.text,
+          defaultStyles: A
+        }),
+        // 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 },
+        // Include gap styles
+        ...K
       },
-      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({
+      j
+    );
+  }, [
+    B,
+    W,
+    O,
+    o,
+    b,
+    n,
+    g,
+    m,
+    R.colors,
+    A,
+    j,
+    K
+  ]);
+  return /* @__PURE__ */ S.jsx(
+    Me,
+    {
+      spacer: { variant: T ?? "line" },
+      children: /* @__PURE__ */ S.jsx(
+        Oe,
+        {
+          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
+            }
+          )
+        }
+      )
+    }
+  );
+}), 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
+}) => {
+  const a = H(e || "fit-content"), i = H(n || "fit-content"), l = ["--bkxw", "--bkxh"];
+  return {
+    ...w({
+      key: "--bkxw",
+      value: a,
+      defaultStyles: s,
+      skipDimensions: { fitContent: l }
+    }),
+    ...w({
+      key: "--bkxh",
+      value: i,
+      defaultStyles: s,
+      skipDimensions: { fitContent: l }
+    }),
+    ...w({
+      key: "--bkxb",
+      value: `${o}px`,
+      defaultStyles: s
+    }),
+    ...w({
+      key: "--bkxcl",
+      value: r,
+      defaultStyles: s
+    })
+  };
+}, Rn = c.memo(
+  c.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, {
+    snapping: o = "clamp",
+    debugging: r,
+    className: s,
+    colSpan: a,
+    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);
+    }, []);
+    const $ = c.useRef(null), { top: R, bottom: I, left: G, right: p } = ie(O), M = pe($, {
       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]
+      snapping: o,
+      spacing: { top: R, bottom: I, left: G, right: p },
+      warnOnMisalignment: T !== "none"
+    }), D = {
+      padding: {
+        top: R || 0,
+        right: p || 0,
+        bottom: I || 0,
+        left: G || 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__ */ R.jsx(
+    return /* @__PURE__ */ S.jsx(
       "div",
       {
-        ref: Ke(b, p),
+        ref: tt(x, $),
         "data-testid": "box",
-        className: D(Xe.box, T && Xe.visible, i),
-        style: Y($, O),
-        children: /* @__PURE__ */ R.jsx(
-          we,
+        className: ne(Je.box, j && Je.v, s),
+        style: oe(y, L),
+        children: /* @__PURE__ */ S.jsx(
+          Me,
           {
             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,
+            spacer: { variant: "flat" },
+            children: /* @__PURE__ */ S.jsx(
+              Oe,
               {
-                block: [w.top, w.bottom],
-                inline: [w.left, w.right],
-                width: d,
-                height: l,
-                debugging: y,
+                block: [E.top, E.bottom],
+                inline: [E.left, E.right],
+                width: "fit-content",
+                height: m,
+                debugging: T,
+                ssrMode: b,
                 children: n
               }
             )
@@ -1291,302 +1591,567 @@ const tn = E.memo(
       }
     );
   })
-), 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
+), Qt = "stk_l-58l", en = "v_-k3qw", Ze = {
+  stk: Qt,
+  v: en
+}, tn = {
+  x: "row",
+  y: "column",
+  "-x": "row-reverse",
+  "-y": "column-reverse"
+}, nn = (e) => ({
+  "--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,
+  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
 }) {
-  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,
+  const g = se("stack"), { isShown: V, debugging: $ } = le(a, g.debugging), [R, I] = c.useState(!1);
+  c.useEffect(() => {
+    I(!0);
+  }, []);
+  const G = c.useRef(null), { top: p, right: M, bottom: D, left: E } = ie({
+    ...T
+  }), L = pe(G, {
+    base: g.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,
+    spacing: { top: p, right: M, bottom: D, left: E },
+    warnOnMisalignment: $ !== "none"
+  }), z = {
+    padding: {
+      top: p || 0,
+      right: M || 0,
+      bottom: D || 0,
+      left: E || 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({
+        key: "--bkkw",
+        value: J,
+        defaultStyles: W,
+        skipDimensions: { auto: P }
+      }),
+      ...w({
+        key: "--bkkh",
+        value: _,
+        defaultStyles: W,
+        skipDimensions: { auto: P }
+      }),
+      ...w({
+        key: "--bkkcl",
+        value: g.colors.line,
+        defaultStyles: W
+      }),
+      ...w({
+        key: "--bkkcf",
+        value: g.colors.flat,
+        defaultStyles: W
+      }),
+      ...w({
+        key: "--bkkci",
+        value: g.colors.text,
+        defaultStyles: W
+      })
+    };
+    return oe({
+      flexDirection: U,
+      justifyContent: k,
       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,
+      width: h,
+      height: u
+    }, B, Z, O);
+  }, [
+    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,
     {
-      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",
+      spacer: { variant: x ?? "line" },
+      children: /* @__PURE__ */ S.jsx(
+        Oe,
         {
-          "data-testid": "stack",
-          className: D(
-            s,
-            qe.stack,
-            S && qe.visible
-          ),
-          style: A,
-          ...y,
-          children: r
+          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
+            }
+          )
         }
       )
     }
-  ) });
-}), zt = "guide_gY3kY", It = "line_xcGxq", Ft = "columns_eQm6d", Lt = "column_mYoBn", ee = {
-  guide: zt,
-  line: It,
-  columns: Ft,
-  column: Lt
-}, on = De(function({
+  );
+}), 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;
+  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
+  };
+}, un = (e, n) => ({
+  "--bkgw": "auto",
+  "--bkgh": "auto",
+  "--bkgmw": "none",
+  "--bkgcw": "60px",
+  "--bkggw": "24px",
+  "--bkgc": "12",
+  "--bkgb": `${e}px`,
+  "--bkgcl": n
+}), jn = c.memo(function({
   className: n,
-  debugging: r,
-  style: s,
-  variant: i,
-  align: o = "start",
-  gap: a,
-  height: f,
-  width: d,
-  columns: l,
-  columnWidth: g,
-  ...x
+  debugging: o,
+  style: r,
+  variant: s,
+  align: a = "start",
+  gap: i,
+  height: l,
+  width: u,
+  columns: m,
+  columnWidth: k,
+  gutterWidth: b,
+  maxWidth: O,
+  color: x,
+  children: h,
+  ssrMode: j = !1,
+  ...T
 }) {
-  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,
+  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
-  } = 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"
+  } = Et(G, z), A = c.useMemo(
+    () => un(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({
+        key: "--bkgw",
+        value: J,
+        defaultStyles: A,
+        skipDimensions: { auto: q }
+      }),
+      ...w({
+        key: "--bkgh",
+        value: _,
+        defaultStyles: A,
+        skipDimensions: { auto: q }
+      }),
+      ...w({
+        key: "--bkgmw",
+        value: U,
+        defaultStyles: A
+      }),
+      ...w({
+        key: "--bkgcw",
+        value: P,
+        defaultStyles: A
+      }),
+      ...w({
+        key: "--bkggw",
+        value: Z,
+        defaultStyles: A
+      }),
+      ...w({
+        key: "--bkgc",
+        value: `${B}`,
+        defaultStyles: A
+      }),
+      ...w({
+        key: "--bkgb",
+        value: `${g.base}px`,
+        defaultStyles: A
+      }),
+      ...w({
+        key: "--bkgcl",
+        value: x ?? g.colors.line,
+        defaultStyles: A
+      }),
+      // Add the CSS variables expected by tests
+      "--bkgg": `${W}px`,
+      ...y && y !== "none" ? { "--bkgt": y } : {},
+      // 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
     };
-    return Y(N, s);
+    return oe(X, r);
   }, [
-    W,
-    o,
-    b.colors.line,
-    b.colors.pattern,
-    C,
-    _,
-    w,
+    u,
+    l,
+    O,
     k,
-    $,
-    d,
-    p,
-    f,
-    S,
-    s
+    b,
+    B,
+    x,
+    y,
+    W,
+    D,
+    E,
+    g.base,
+    g.colors.line,
+    A,
+    r,
+    a
   ]);
-  return /* @__PURE__ */ R.jsx(
+  return /* @__PURE__ */ S.jsxs(
     "div",
     {
-      ref: y,
-      className: D(
-        ee.guide,
+      ref: G,
+      "data-testid": "guide",
+      className: ne(
+        ue.gde,
         n,
-        T ? ee.visible : ee.hidden,
-        h === "line" && ee.line
+        L ? ue.v : ue.h,
+        V === "line" && ue.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
-        );
-      }) })
+      "data-variant": V,
+      style: K,
+      ...T,
+      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(
+            "div",
+            {
+              className: ue.col,
+              "data-column-index": _,
+              "data-variant": V,
+              style: { backgroundColor: U }
+            },
+            _
+          );
+        }) }),
+        h
+      ]
     }
   );
-}), 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({
+}), 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) => ({
+  "--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;
+  return {
+    "--bkrt": n === 0 ? "0px" : `${n * o}px`,
+    "--bkrh": r === "line" ? "1px" : `${o}px`,
+    "--bkbc": s || (r === "line" ? a : i)
+  };
+}, Nn = c.memo(function({
   className: n,
-  debugging: r,
-  style: s,
-  variant: i,
-  height: o,
-  width: a,
-  base: f,
-  ...d
+  debugging: o,
+  style: r,
+  variant: s,
+  height: a,
+  width: i,
+  base: l,
+  color: u,
+  ssrMode: m = !1,
+  ...k
 }) {
-  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,
+  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: h,
+    containerRef: j,
     buffer: 160
-  }), W = g === "line" ? l.colors.line : l.colors.flat, z = P(
-    () => Y(
+  }), 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
+    ),
+    [x, b.colors.line, b.colors.flat]
+  ), U = c.useMemo(() => {
+    const Z = H(i || "100%"), q = H(a || "100%"), X = ["--bkbw", "--bkbh"];
+    return oe(
       {
-        "--bk-baseline-width": p,
-        padding: `${C}px ${k}px ${_}px ${w}px`,
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "hidden",
-        height: `${S}px`
+        ...w({
+          key: "--bkbw",
+          value: Z,
+          defaultStyles: _,
+          skipDimensions: { fullSize: X }
+        }),
+        ...w({
+          key: "--bkbh",
+          value: q,
+          defaultStyles: _,
+          skipDimensions: { fullSize: X }
+        }),
+        ...w({
+          key: "--bkbb",
+          value: `${x}px`,
+          defaultStyles: _
+        }),
+        ...w({
+          key: "--bkbcl",
+          value: u || b.colors.line,
+          defaultStyles: _
+        }),
+        ...w({
+          key: "--bkbcf",
+          value: u || b.colors.flat,
+          defaultStyles: _
+        }),
+        ...z && { padding: z }
       },
-      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"
+      r
+    );
+  }, [
+    i,
+    a,
+    x,
+    u,
+    b.colors.line,
+    b.colors.flat,
+    z,
+    _,
+    r
+  ]), P = c.useCallback(
+    (Z) => kn({
+      index: Z,
+      base: x,
+      variant: O,
+      chosenColor: J,
+      lineColor: b.colors.line,
+      flatColor: b.colors.flat
     }),
-    [x, g, W]
+    [x, O, J, b.colors.line, b.colors.flat]
   );
-  return /* @__PURE__ */ R.jsx(
+  return /* @__PURE__ */ S.jsx(
     "div",
     {
-      ref: h,
+      ref: j,
       "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);
+      className: ne(
+        he.bas,
+        h ? he.v : he.h,
+        n
+      ),
+      style: U,
+      ...k,
+      children: h && Array.from({ length: K - A }, (Z, q) => {
+        const X = q + A;
+        return /* @__PURE__ */ S.jsx(
+          "div",
+          {
+            className: he.row,
+            "data-row-index": X,
+            style: P(X)
+          },
+          X
+        );
       })
     }
   );
-}), Dt = ["start", "center", "end"], dn = ["line", "flat"];
+}), vn = ["start", "center", "end"], Vn = ["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,
+  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,
-  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
+  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
 };
 //# sourceMappingURL=index.mjs.map