baseline-kit 2.0.1 → 2.1.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import * as f from "react";
-import oe, { useMemo as ot, useCallback as kt, useState as re, useLayoutEffect as Jt, useRef as se } from "react";
-var ut = { exports: {} }, at = {};
+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 ut = { exports: {} }, at = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var zt;
-function ae() {
-  if (zt) return at;
-  zt = 1;
+var Pe;
+function lt() {
+  if (Pe) return de;
+  Pe = 1;
   var e = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-  function o(a, s, r) {
+  function o(r, s, a) {
     var i = null;
-    if (r !== void 0 && (i = "" + r), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      r = {};
-      for (var d in s)
-        d !== "key" && (r[d] = s[d]);
-    } else r = s;
-    return s = r.ref, {
+    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: a,
+      type: r,
       key: i,
       ref: s !== void 0 ? s : null,
-      props: r
+      props: a
     };
   }
-  return at.Fragment = n, at.jsx = o, at.jsxs = o, at;
+  return de.Fragment = n, de.jsx = o, de.jsxs = o, de;
 }
-var it = {};
+var be = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,45 +42,45 @@ var it = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Ut;
-function ie() {
-  return Ut || (Ut = 1, process.env.NODE_ENV !== "production" && function() {
+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 === te ? null : t.displayName || t.name || null;
+        return t.$$typeof === J ? null : t.displayName || t.name || null;
       if (typeof t == "string") return t;
       switch (t) {
-        case V:
+        case G:
           return "Fragment";
-        case E:
+        case I:
           return "Portal";
-        case R:
+        case M:
           return "Profiler";
-        case O:
+        case p:
           return "StrictMode";
-        case T:
+        case z:
           return "Suspense";
-        case L:
+        case y:
           return "SuspenseList";
       }
       if (typeof t == "object")
         switch (typeof t.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), t.$$typeof) {
-          case j:
+          case E:
             return (t.displayName || "Context") + ".Provider";
-          case w:
+          case D:
             return (t._context.displayName || "Context") + ".Consumer";
-          case y:
-            var l = t.render;
-            return t = t.displayName, t || (t = l.displayName || l.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
+          case L:
+            var f = t.render;
+            return t = t.displayName, t || (t = f.displayName || f.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
           case B:
-            return l = t.displayName || null, l !== null ? l : e(t.type) || "Memo";
+            return f = t.displayName || null, f !== null ? f : e(t.type) || "Memo";
           case W:
-            l = t._payload, t = t._init;
+            f = t._payload, t = t._init;
             try {
-              return e(t(l));
+              return e(t(f));
             } catch {
             }
         }
@@ -92,29 +92,29 @@ function ie() {
     function o(t) {
       try {
         n(t);
-        var l = !1;
+        var f = !1;
       } catch {
-        l = !0;
+        f = !0;
       }
-      if (l) {
-        l = console;
-        var u = l.error, S = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
-        return u.call(
-          l,
+      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.",
-          S
+          C
         ), n(t);
       }
     }
-    function a() {
+    function r() {
     }
     function s() {
-      if (rt === 0) {
-        jt = console.log, Ot = console.info, Tt = console.warn, At = console.error, $t = console.group, Mt = console.groupCollapsed, Nt = console.groupEnd;
+      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: a,
+          value: r,
           writable: !0
         };
         Object.defineProperties(console, {
@@ -127,204 +127,204 @@ function ie() {
           groupEnd: t
         });
       }
-      rt++;
+      X++;
     }
-    function r() {
-      if (rt--, rt === 0) {
+    function a() {
+      if (X--, X === 0) {
         var t = { configurable: !0, enumerable: !0, writable: !0 };
         Object.defineProperties(console, {
-          log: K({}, t, { value: jt }),
-          info: K({}, t, { value: Ot }),
-          warn: K({}, t, { value: Tt }),
-          error: K({}, t, { value: At }),
-          group: K({}, t, { value: $t }),
-          groupCollapsed: K({}, t, { value: Mt }),
-          groupEnd: K({}, t, { value: Nt })
+          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 > rt && console.error(
+      0 > X && console.error(
         "disabledDepth fell below zero. This is a bug in React. Please file an issue."
       );
     }
     function i(t) {
-      if (ht === void 0)
+      if (ye === void 0)
         try {
           throw Error();
-        } catch (u) {
-          var l = u.stack.trim().match(/\n( *(at )?)/);
-          ht = l && l[1] || "", Vt = -1 < u.stack.indexOf(`
-    at`) ? " (<anonymous>)" : -1 < u.stack.indexOf("@") ? "@unknown:0:0" : "";
+        } 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 `
-` + ht + t + Vt;
+` + ye + t + He;
     }
-    function d(t, l) {
-      if (!t || pt) return "";
-      var u = vt.get(t);
-      if (u !== void 0) return u;
-      pt = !0, u = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
-      var S = null;
-      S = Z.H, Z.H = null, s();
+    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 z = {
+        var Y = {
           DetermineComponentFrameRoot: function() {
             try {
-              if (l) {
-                var q = function() {
+              if (f) {
+                var te = function() {
                   throw Error();
                 };
-                if (Object.defineProperty(q.prototype, "props", {
+                if (Object.defineProperty(te.prototype, "props", {
                   set: function() {
                     throw Error();
                   }
                 }), typeof Reflect == "object" && Reflect.construct) {
                   try {
-                    Reflect.construct(q, []);
-                  } catch (H) {
-                    var lt = H;
+                    Reflect.construct(te, []);
+                  } catch (ee) {
+                    var me = ee;
                   }
-                  Reflect.construct(t, [], q);
+                  Reflect.construct(t, [], te);
                 } else {
                   try {
-                    q.call();
-                  } catch (H) {
-                    lt = H;
+                    te.call();
+                  } catch (ee) {
+                    me = ee;
                   }
-                  t.call(q.prototype);
+                  t.call(te.prototype);
                 }
               } else {
                 try {
                   throw Error();
-                } catch (H) {
-                  lt = H;
+                } catch (ee) {
+                  me = ee;
                 }
-                (q = t()) && typeof q.catch == "function" && q.catch(function() {
+                (te = t()) && typeof te.catch == "function" && te.catch(function() {
                 });
               }
-            } catch (H) {
-              if (H && lt && typeof H.stack == "string")
-                return [H.stack, lt.stack];
+            } catch (ee) {
+              if (ee && me && typeof ee.stack == "string")
+                return [ee.stack, me.stack];
             }
             return [null, null];
           }
         };
-        z.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
-        var G = Object.getOwnPropertyDescriptor(
-          z.DetermineComponentFrameRoot,
+        Y.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
+        var N = Object.getOwnPropertyDescriptor(
+          Y.DetermineComponentFrameRoot,
           "name"
         );
-        G && G.configurable && Object.defineProperty(
-          z.DetermineComponentFrameRoot,
+        N && N.configurable && Object.defineProperty(
+          Y.DetermineComponentFrameRoot,
           "name",
           { value: "DetermineComponentFrameRoot" }
         );
-        var p = z.DetermineComponentFrameRoot(), F = p[0], et = p[1];
-        if (F && et) {
-          var Y = F.split(`
-`), Q = et.split(`
+        var v = Y.DetermineComponentFrameRoot(), Q = v[0], ce = v[1];
+        if (Q && ce) {
+          var F = Q.split(`
+`), ae = ce.split(`
 `);
-          for (p = G = 0; G < Y.length && !Y[G].includes(
+          for (v = N = 0; N < F.length && !F[N].includes(
             "DetermineComponentFrameRoot"
           ); )
-            G++;
-          for (; p < Q.length && !Q[p].includes(
+            N++;
+          for (; v < ae.length && !ae[v].includes(
             "DetermineComponentFrameRoot"
           ); )
-            p++;
-          if (G === Y.length || p === Q.length)
-            for (G = Y.length - 1, p = Q.length - 1; 1 <= G && 0 <= p && Y[G] !== Q[p]; )
-              p--;
-          for (; 1 <= G && 0 <= p; G--, p--)
-            if (Y[G] !== Q[p]) {
-              if (G !== 1 || p !== 1)
+            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 (G--, p--, 0 > p || Y[G] !== Q[p]) {
-                    var st = `
-` + Y[G].replace(
+                  if (N--, v--, 0 > v || F[N] !== ae[v]) {
+                    var fe = `
+` + F[N].replace(
                       " at new ",
                       " at "
                     );
-                    return t.displayName && st.includes("<anonymous>") && (st = st.replace("<anonymous>", t.displayName)), typeof t == "function" && vt.set(t, st), st;
+                    return t.displayName && fe.includes("<anonymous>") && (fe = fe.replace("<anonymous>", t.displayName)), typeof t == "function" && Se.set(t, fe), fe;
                   }
-                while (1 <= G && 0 <= p);
+                while (1 <= N && 0 <= v);
               break;
             }
         }
       } finally {
-        pt = !1, Z.H = S, r(), Error.prepareStackTrace = u;
+        xe = !1, _.H = C, a(), Error.prepareStackTrace = d;
       }
-      return Y = (Y = t ? t.displayName || t.name : "") ? i(Y) : "", typeof t == "function" && vt.set(t, Y), Y;
+      return F = (F = t ? t.displayName || t.name : "") ? i(F) : "", typeof t == "function" && Se.set(t, F), F;
     }
-    function g(t) {
+    function u(t) {
       if (t == null) return "";
       if (typeof t == "function") {
-        var l = t.prototype;
-        return d(
+        var f = t.prototype;
+        return l(
           t,
-          !(!l || !l.isReactComponent)
+          !(!f || !f.isReactComponent)
         );
       }
       if (typeof t == "string") return i(t);
       switch (t) {
-        case T:
+        case z:
           return i("Suspense");
-        case L:
+        case y:
           return i("SuspenseList");
       }
       if (typeof t == "object")
         switch (t.$$typeof) {
-          case y:
-            return t = d(t.render, !1), t;
+          case L:
+            return t = l(t.render, !1), t;
           case B:
-            return g(t.type);
+            return u(t.type);
           case W:
-            l = t._payload, t = t._init;
+            f = t._payload, t = t._init;
             try {
-              return g(t(l));
+              return u(t(f));
             } catch {
             }
         }
       return "";
     }
-    function c() {
-      var t = Z.A;
+    function m() {
+      var t = _.A;
       return t === null ? null : t.getOwner();
     }
-    function m(t) {
-      if (_t.call(t, "key")) {
-        var l = Object.getOwnPropertyDescriptor(t, "key").get;
-        if (l && l.isReactWarning) return !1;
+    function k(t) {
+      if (U.call(t, "key")) {
+        var f = Object.getOwnPropertyDescriptor(t, "key").get;
+        if (f && f.isReactWarning) return !1;
       }
       return t.key !== void 0;
     }
-    function x(t, l) {
-      function u() {
-        Gt || (Gt = !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)",
-          l
+          f
         ));
       }
-      u.isReactWarning = !0, Object.defineProperty(t, "key", {
-        get: u,
+      d.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: d,
         configurable: !0
       });
     }
-    function b() {
+    function O() {
       var t = e(this.type);
-      return Wt[t] || (Wt[t] = !0, console.error(
+      return ze[t] || (ze[t] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), t = this.props.ref, t !== void 0 ? t : null;
     }
-    function v(t, l, u, S, z, G) {
-      return u = G.ref, t = {
-        $$typeof: C,
+    function x(t, f, d, C, Y, N) {
+      return d = N.ref, t = {
+        $$typeof: R,
         type: t,
-        key: l,
-        props: G,
-        _owner: z
-      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(t, "ref", {
+        key: f,
+        props: N,
+        _owner: Y
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(t, "ref", {
         enumerable: !1,
-        get: b
+        get: O
       }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -337,126 +337,126 @@ function ie() {
         value: null
       }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
     }
-    function A(t, l, u, S, z, G) {
-      if (typeof t == "string" || typeof t == "function" || t === V || t === R || t === O || t === T || t === L || t === P || typeof t == "object" && t !== null && (t.$$typeof === W || t.$$typeof === B || t.$$typeof === j || t.$$typeof === w || t.$$typeof === y || t.$$typeof === ee || t.getModuleId !== void 0)) {
-        var p = l.children;
-        if (p !== void 0)
-          if (S)
-            if (gt(p)) {
-              for (S = 0; S < p.length; S++)
-                M(p[S], t);
-              Object.freeze && Object.freeze(p);
+    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 M(p, t);
+          else j(v, t);
       } else
-        p = "", (t === void 0 || typeof t == "object" && t !== null && Object.keys(t).length === 0) && (p += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), t === null ? S = "null" : gt(t) ? S = "array" : t !== void 0 && t.$$typeof === C ? (S = "<" + (e(t.type) || "Unknown") + " />", p = " Did you accidentally export a JSX literal instead of a component?") : S = typeof t, console.error(
+        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",
-          S,
-          p
+          C,
+          v
         );
-      if (_t.call(l, "key")) {
-        p = e(t);
-        var F = Object.keys(l).filter(function(Y) {
-          return Y !== "key";
+      if (U.call(f, "key")) {
+        v = e(t);
+        var Q = Object.keys(f).filter(function(F) {
+          return F !== "key";
         });
-        S = 0 < F.length ? "{key: someKey, " + F.join(": ..., ") + ": ...}" : "{key: someKey}", Bt[p + S] || (F = 0 < F.length ? "{" + F.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} />`,
-          S,
-          p,
-          F,
-          p
-        ), Bt[p + S] = !0);
+          C,
+          v,
+          Q,
+          v
+        ), Be[v + C] = !0);
       }
-      if (p = null, u !== void 0 && (o(u), p = "" + u), m(l) && (o(l.key), p = "" + l.key), "key" in l) {
-        u = {};
-        for (var et in l)
-          et !== "key" && (u[et] = l[et]);
-      } else u = l;
-      return p && x(
-        u,
+      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
-      ), v(t, p, G, z, c(), u);
+      ), x(t, v, N, Y, m(), d);
     }
-    function M(t, l) {
-      if (typeof t == "object" && t && t.$$typeof !== ne) {
-        if (gt(t))
-          for (var u = 0; u < t.length; u++) {
-            var S = t[u];
-            h(S) && $(S, l);
+    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 (h(t))
+        else if (T(t))
           t._store && (t._store.validated = 1);
-        else if (t === null || typeof t != "object" ? u = null : (u = ct && t[ct] || t["@@iterator"], u = typeof u == "function" ? u : null), typeof u == "function" && u !== t.entries && (u = u.call(t), u !== t))
-          for (; !(t = u.next()).done; )
-            h(t.value) && $(t.value, l);
+        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 h(t) {
-      return typeof t == "object" && t !== null && t.$$typeof === C;
+    function T(t) {
+      return typeof t == "object" && t !== null && t.$$typeof === R;
     }
-    function $(t, l) {
-      if (t._store && !t._store.validated && t.key == null && (t._store.validated = 1, l = N(l), !Lt[l])) {
-        Lt[l] = !0;
-        var u = "";
-        t && t._owner != null && t._owner !== c() && (u = null, typeof t._owner.tag == "number" ? u = e(t._owner.type) : typeof t._owner.name == "string" && (u = t._owner.name), u = " It was passed a child from " + u + ".");
-        var S = Z.getCurrentStack;
-        Z.getCurrentStack = function() {
-          var z = g(t.type);
-          return S && (z += S() || ""), z;
+    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.',
-          l,
-          u
-        ), Z.getCurrentStack = S;
+          f,
+          d
+        ), _.getCurrentStack = C;
       }
     }
-    function N(t) {
-      var l = "", u = c();
-      return u && (u = e(u.type)) && (l = `
+    function V(t) {
+      var f = "", d = m();
+      return d && (d = e(d.type)) && (f = `
 
-Check the render method of \`` + u + "`."), l || (t = e(t)) && (l = `
+Check the render method of \`` + d + "`."), f || (t = e(t)) && (f = `
 
-Check the top-level render call using <` + t + ">."), l;
+Check the top-level render call using <` + t + ">."), f;
     }
-    var k = oe, C = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), V = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), R = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), j = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), T = Symbol.for("react.suspense"), L = Symbol.for("react.suspense_list"), B = Symbol.for("react.memo"), W = Symbol.for("react.lazy"), P = Symbol.for("react.offscreen"), ct = Symbol.iterator, te = Symbol.for("react.client.reference"), Z = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _t = Object.prototype.hasOwnProperty, K = Object.assign, ee = Symbol.for("react.client.reference"), gt = Array.isArray, rt = 0, jt, Ot, Tt, At, $t, Mt, Nt;
-    a.__reactDisabledLog = !0;
-    var ht, Vt, pt = !1, vt = new (typeof WeakMap == "function" ? WeakMap : Map)(), ne = Symbol.for("react.client.reference"), Gt, Wt = {}, Bt = {}, Lt = {};
-    it.Fragment = V, it.jsx = function(t, l, u, S, z) {
-      return A(t, l, u, !1, S, z);
-    }, it.jsxs = function(t, l, u, S, z) {
-      return A(t, l, u, !0, S, z);
+    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);
     };
-  }()), it;
+  }()), be;
 }
-var Yt;
-function ce() {
-  return Yt || (Yt = 1, process.env.NODE_ENV === "production" ? ut.exports = ae() : ut.exports = ie()), ut.exports;
+var Fe;
+function ut() {
+  return Fe || (Fe = 1, process.env.NODE_ENV === "production" ? ge.exports = lt() : ge.exports = ct()), ge.exports;
 }
-var _ = ce();
-function le(e) {
+var S = ut();
+function ft(e) {
   const n = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
   if (!n) return null;
-  const o = parseFloat(n[1]), a = n[2];
-  return { value: o, unit: a };
+  const o = parseFloat(n[1]), r = n[2];
+  return { value: o, unit: r };
 }
-function U(e, n) {
+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 ue = {
+const dt = {
   parentSize: 0,
   viewportWidth: typeof window < "u" ? window.innerWidth : 1920,
   viewportHeight: typeof window < "u" ? window.innerHeight : 1080,
   rootFontSize: 16,
   parentFontSize: 16
-}, wt = {
+}, Ce = {
   px: 1,
   in: 96,
   // 1in = 96px
@@ -468,47 +468,47 @@ const ue = {
   // 1pt = 1.33px
   pc: 16
   // 1pc = 16px
-}, Xt = ["em", "rem", "vh", "vw", "vmin", "vmax", "%"];
-function yt(e, n) {
+}, Qe = ["em", "rem", "vh", "vw", "vmin", "vmax", "%"];
+function _e(e, n) {
   if (typeof e == "number") return e;
   if (typeof e != "string") return null;
-  const o = le(e);
+  const o = ft(e);
   if (!o) return null;
-  const { value: a, unit: s } = o;
-  if (s in wt)
-    return a * wt[s];
+  const { value: r, unit: s } = o;
+  if (s in Ce)
+    return r * Ce[s];
   if (s === "auto") return null;
-  if (Xt.includes(s)) {
-    const r = { ...ue, ...n };
+  if (Qe.includes(s)) {
+    const a = { ...dt, ...n };
     switch (s) {
       case "em":
-        return a * r.parentFontSize;
+        return r * a.parentFontSize;
       case "rem":
-        return a * r.rootFontSize;
+        return r * a.rootFontSize;
       case "vh":
-        return a / 100 * r.viewportHeight;
+        return r / 100 * a.viewportHeight;
       case "vw":
-        return a / 100 * r.viewportWidth;
+        return r / 100 * a.viewportWidth;
       case "vmin":
-        return a / 100 * Math.min(r.viewportWidth, r.viewportHeight);
+        return r / 100 * Math.min(a.viewportWidth, a.viewportHeight);
       case "vmax":
-        return a / 100 * Math.max(r.viewportWidth, r.viewportHeight);
+        return r / 100 * Math.max(a.viewportWidth, a.viewportHeight);
       case "%":
-        return a / 100 * r.parentSize;
+        return r / 100 * a.parentSize;
       default:
         return null;
     }
   }
   return null;
 }
-function Ke(e, n, o) {
-  const a = (o == null ? void 0 : o.round) ?? !0, s = e === void 0 ? 0 : typeof e == "number" ? e : yt(e) ?? 0;
-  return `${(a ? Math.round(s) : s) % n}px`;
+function 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 fe(e, n, o) {
+function bt(e, n, o) {
   return Math.min(Math.max(e, n), o);
 }
-function Qe(e, n = 0) {
+function xn(e, n = 0) {
   if (n >= 0)
     return Number((Math.round(e * 10 ** n) / 10 ** n).toFixed(n));
   {
@@ -516,41 +516,45 @@ function Qe(e, n = 0) {
     return Math.round(e / o) * o;
   }
 }
-function dt(e, 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: o = 8,
-    round: a = !0,
+    round: r = !0,
     clamp: s,
-    suppressWarnings: r = !1
+    suppressWarnings: a = !1
   } = n;
   if (e === "auto") return o;
   let i = null;
   if (typeof e == "number")
     i = e;
   else if (typeof e == "string") {
-    const c = yt(e);
-    c === null ? (r || console.error(
+    const m = _e(e);
+    m === null ? (a || console.error(
       `Failed to convert "${e}" to pixels. Falling back to base ${o}.`
-    ), i = o) : i = c;
+    ), i = o) : i = m;
   }
   i === null && (i = o);
-  const d = a ? Math.round(i / o) * o : i, g = s !== void 0 ? fe(
-    d,
+  const l = r ? Math.round(i / o) * o : i, u = s !== void 0 ? bt(
+    l,
     s.min ?? -1 / 0,
     s.max ?? 1 / 0
-  ) : d;
-  return !r && g !== i && console.warn(`Normalized ${i} to ${g} to match base ${o}px.`), g;
+  ) : l;
+  return !a && u !== i && console.warn(`Normalized ${i} to ${u} to match base ${o}px.`), u;
 }
-function Dt(e, n, o) {
+function et(e, n, o) {
   if (!e || e[0] === void 0 && e[1] === void 0)
     return n;
-  const a = e[0] !== void 0 ? dt(e[0], o) : n[0], s = e[1] !== void 0 ? dt(e[1], o) : n[1];
-  return [a, s];
+  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 D(e) {
+function ie(e) {
   if ("padding" in e && e.padding != null)
-    return de(e.padding);
-  const n = "block" in e && e.block != null ? be(e.block) : { top: 0, bottom: 0 }, o = "inline" in e && e.inline != null ? me(e.inline) : { left: 0, right: 0 };
+    return gt(e.padding);
+  const n = "block" in e && e.block != null ? ht(e.block) : { top: 0, bottom: 0 }, o = "inline" in e && e.inline != null ? kt(e.inline) : { left: 0, right: 0 };
   return {
     top: n.top,
     right: o.right,
@@ -558,7 +562,7 @@ function D(e) {
     left: o.left
   };
 }
-function de(e) {
+function gt(e) {
   if (typeof e == "number")
     return { top: e, right: e, bottom: e, left: e };
   if (Array.isArray(e)) {
@@ -567,22 +571,22 @@ function de(e) {
       return { top: n, right: o, bottom: n, left: o };
     }
     if (e.length >= 4) {
-      const [n, o, a, s] = e;
+      const [n, o, r, s] = e;
       return {
         top: n ?? 0,
         right: o ?? 0,
-        bottom: a ?? 0,
+        bottom: r ?? 0,
         left: s ?? 0
       };
     }
   }
   if (typeof e == "object" && !Array.isArray(e)) {
-    const n = e.top ?? 0, o = e.bottom ?? 0, a = e.left ?? 0, s = e.right ?? 0;
-    return { top: n, right: s, bottom: o, left: a };
+    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 be(e) {
+function ht(e) {
   if (typeof e == "number")
     return { top: e, bottom: e };
   if (Array.isArray(e)) {
@@ -597,7 +601,7 @@ function be(e) {
     bottom: e.end ?? 0
   } : { top: 0, bottom: 0 };
 }
-function me(e) {
+function kt(e) {
   if (typeof e == "number")
     return { left: e, right: e };
   if (Array.isArray(e)) {
@@ -612,23 +616,26 @@ function me(e) {
     right: e.end ?? 0
   } : { left: 0, right: 0 };
 }
-function ge(e, n, o, a) {
-  const s = D({ padding: o });
-  if (a === "none")
+function vt(e, n, o, r) {
+  const s = ie({ padding: o });
+  if (r === "none")
     return s;
-  if (a === "height") {
-    const r = e % n;
-    r !== 0 && (s.bottom += n - r);
+  if (r === "height") {
+    const a = e % n;
+    a !== 0 && (s.bottom += n - a);
   }
-  if (a === "clamp") {
+  if (r === "clamp") {
     s.top = s.top % n;
-    const r = e % n;
-    r !== 0 && (s.bottom += n - r), s.bottom = s.bottom % n;
+    const a = e % n;
+    a !== 0 && (s.bottom += n - a), s.bottom = s.bottom % n;
   }
   return s;
 }
-const J = (...e) => e.filter(Boolean).join(" ").trim(), I = (...e) => Object.assign({}, ...e.filter((n) => n !== void 0));
-function he(e, 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);
@@ -639,123 +646,151 @@ function he(e, n) {
         console.error("Error assigning ref:", o);
       }
 }
-function Zt(...e) {
+function tt(...e) {
   return (n) => {
     e.forEach((o) => {
-      he(o, n);
+      yt(o, n);
     });
   };
 }
-const tn = (e, 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 a = () => {
+  const r = () => {
     o && (clearTimeout(o), o = null);
   };
-  return [(...r) => {
-    a(), o = setTimeout(() => e(...r), n);
-  }, a];
-}, Kt = (e) => {
+  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 bt(e) {
-  const [n, o] = f.useState({ width: 0, height: 0 }), a = f.useCallback(() => {
+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 r = e.current.getBoundingClientRect(), i = {
-          width: r ? Math.round(r.width) : 0,
-          height: r ? Math.round(r.height) : 0
+        const a = e.current.getBoundingClientRect(), i = {
+          width: a ? Math.round(a.width) : 0,
+          height: a ? Math.round(a.height) : 0
         };
         o(
-          (d) => d.width === i.width && d.height === i.height ? d : i
+          (l) => l.width === i.width && l.height === i.height ? l : i
         );
       } catch {
         o({ width: 0, height: 0 });
       }
-  }, [e]), s = f.useMemo(() => Kt(a), [a]);
-  return f.useLayoutEffect(() => {
-    a();
-  }, [a]), f.useLayoutEffect(() => {
+  }, [e]), s = c.useMemo(() => nt(r), [r]);
+  return c.useLayoutEffect(() => {
+    r();
+  }, [r]), c.useLayoutEffect(() => {
     if (!e.current) return;
-    const r = new ResizeObserver(() => {
+    const a = new ResizeObserver(() => {
       s();
     });
-    return r.observe(e.current), () => {
-      r.disconnect();
+    return a.observe(e.current), () => {
+      a.disconnect();
     };
   }, [e, s]), { ...n, refresh: s };
 }
-function pe({
+function St({
   totalLines: e,
   lineHeight: n,
   containerRef: o,
-  buffer: a = 0
+  buffer: r = 0
 }) {
-  const s = ot(
-    () => typeof a == "number" ? a : parseInt(a, 10) || 0,
-    [a]
-  ), r = kt(() => {
-    const m = o.current;
-    if (!m) return { start: 0, end: e };
-    if (m.closest(".block"))
+  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 b = m.getBoundingClientRect().top + window.scrollY, v = Math.max(0, window.scrollY - b - s), A = v + window.innerHeight + s * 2, M = Math.max(0, Math.floor(v / n)), h = Math.min(e, Math.ceil(A / n));
-    return { start: M, end: h };
-  }, [e, n, o, s]), [i, d] = re(r);
-  ve(["scroll", "resize"], () => {
-    c();
+    const 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 g = kt(() => {
-    d((m) => {
-      const x = r();
-      return m.start !== x.start || m.end !== x.end ? x : m;
+  const u = Ee(() => {
+    l((k) => {
+      const b = a();
+      return k.start !== b.start || k.end !== b.end ? b : k;
     });
-  }, [r]), c = ot(() => Kt(g), [g]);
-  return Jt(() => {
-    const m = o.current;
-    if (!m) return;
-    const x = new IntersectionObserver(c, { threshold: 0 });
-    return x.observe(m), c(), () => {
-      x.disconnect();
+  }, [a]), m = ke(() => nt(u), [u]);
+  return Ke(() => {
+    const k = o.current;
+    if (!k) return;
+    const b = new IntersectionObserver(m, { threshold: 0 });
+    return b.observe(k), m(), () => {
+      b.disconnect();
     };
-  }, [o, r, c]), i;
+  }, [o, a, m]), i;
 }
-function ve(e, n) {
-  const o = kt(n, [n]);
-  Jt(() => {
-    const a = () => o();
-    return e.forEach((s) => window.addEventListener(s, a)), () => e.forEach((s) => window.removeEventListener(s, a));
+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 mt(e, {
+function pe(e, {
   base: n = 8,
   snapping: o = "none",
-  spacing: a = {},
+  spacing: r = {},
   warnOnMisalignment: s = !1
 } = {}) {
   if (n < 1)
     throw new Error("Base must be >= 1 for baseline alignment.");
-  const { height: r } = bt(e), i = se(!1);
-  return ot(() => {
-    const d = D({ padding: a }), g = r % n === 0;
-    if (!g && s && process.env.NODE_ENV === "development" && console.warn(
-      `[useBaseline] Element height (${r}px) is not aligned with base (${n}px).`
-    ), o === "none")
-      return { padding: d, isAligned: g, height: r };
+  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: d, isAligned: g, height: r };
-    const c = ge(r, n, d, o);
-    return i.current = !0, { padding: c, isAligned: g, height: r };
-  }, [n, o, a, s, r]);
+      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 xe(e, n) {
-  const { width: o } = bt(e);
-  return ot(() => {
-    const a = n.variant ?? "line", s = dt(n.gap ?? 0, { base: 1 });
+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",
@@ -764,76 +799,76 @@ function xe(e, n) {
         isValid: !1
       };
     try {
-      switch (a) {
+      switch (s) {
         case "line": {
-          const r = Math.max(1, Math.floor(o / (s + 1)) + 1);
+          const l = Math.max(1, Math.floor(o / (i + 1)) + 1);
           return {
-            template: `repeat(${r}, 1px)`,
-            columnsCount: r,
-            calculatedGap: s,
+            template: `repeat(${l}, 1px)`,
+            columnsCount: l,
+            calculatedGap: i,
             isValid: !0
           };
         }
         case "pattern": {
-          if (!qe(n.columns))
+          if (!bn(n.columns))
             throw new Error('Invalid "pattern" columns array');
-          const r = n.columns.map((i) => typeof i == "number" ? `${i}px` : i);
-          return r.some((i) => i === "0" || i === "0px") ? {
+          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: r.join(" "),
-            columnsCount: r.length,
-            calculatedGap: s,
+            template: l.join(" "),
+            columnsCount: l.length,
+            calculatedGap: i,
             isValid: !0
           };
         }
         case "fixed": {
-          const r = typeof n.columns == "number" ? n.columns : 0;
-          if (r < 1)
-            throw new Error(`Invalid columns count: ${r}`);
-          const i = n.columnWidth ? U(n.columnWidth) : "1fr";
+          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(${r}, ${i})`,
-            columnsCount: r,
-            calculatedGap: s,
+            template: `repeat(${l}, ${u})`,
+            columnsCount: l,
+            calculatedGap: i,
             isValid: !0
           };
         }
         case "auto": {
-          const r = n.columnWidth ?? "auto";
-          if (r === "auto")
+          const l = n.columnWidth ?? "auto";
+          if (l === "auto")
             return {
               template: "repeat(auto-fit, minmax(0, 1fr))",
               columnsCount: 1,
-              calculatedGap: s,
+              calculatedGap: i,
               isValid: !0
             };
-          const i = typeof r == "number" ? `${r}px` : r.toString(), d = yt(i) ?? 0, g = d > 0 ? Math.max(1, Math.floor((o + s) / (d + s))) : 1;
+          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(${i}, 1fr))`,
-            columnsCount: g,
-            calculatedGap: s,
+            template: `repeat(auto-fit, minmax(${u}, 1fr))`,
+            columnsCount: k,
+            calculatedGap: i,
             isValid: !0
           };
         }
         default: {
-          console.warn(
-            `[useGuide] Unknown variant "${a}". Falling back to "line".`
-          );
-          const r = Math.max(1, Math.floor(o / (s + 1)) + 1);
+          r.current || (console.warn(
+            `[useGuide] Unknown variant "${s}". Falling back to "line".`
+          ), r.current = !0);
+          const l = Math.max(1, Math.floor(o / (i + 1)) + 1);
           return {
-            template: `repeat(${r}, 1px)`,
-            columnsCount: r,
-            calculatedGap: s,
+            template: `repeat(${l}, 1px)`,
+            columnsCount: l,
+            calculatedGap: i,
             isValid: !0
           };
         }
       }
-    } catch (r) {
-      return console.warn("Error in useGuide:", r), {
+    } catch (l) {
+      return console.warn("Error in useGuide:", l), {
         template: "none",
         columnsCount: 0,
         calculatedGap: 0,
@@ -842,15 +877,15 @@ function xe(e, n) {
     }
   }, [n, o]);
 }
-function X(e) {
-  const n = Qt();
-  return ot(() => Object.assign(
+function se(e) {
+  const n = rt();
+  return ke(() => Object.assign(
     { base: n.base },
     n[e]
   ), [n, e]);
 }
-function tt(e, n) {
-  return ot(() => {
+function le(e, n) {
+  return ke(() => {
     const o = e ?? n;
     return {
       isShown: o === "visible",
@@ -860,7 +895,7 @@ function tt(e, n) {
     };
   }, [e, n]);
 }
-const ke = {
+const Ct = {
   /** Color for single-line guides */
   line: "var(--bk-guide-color-line-theme)",
   /** Color for pattern-based guides */
@@ -869,522 +904,685 @@ const ke = {
   auto: "var(--bk-guide-color-auto-theme)",
   /** Color for fixed-column guides */
   fixed: "var(--bk-guide-color-fixed-theme)"
-}, we = {
+}, Rt = {
   /** Color for line variant */
   line: "var(--bk-baseline-color-line-theme)",
   /** Color for flat/block variant */
   flat: "var(--bk-baseline-color-flat-theme)"
-}, ye = {
+}, _t = {
   /** Color for line-style spacers */
   line: "var(--bk-spacer-color-line-theme)",
   /** Color for flat/block spacers */
   flat: "var(--bk-spacer-color-flat-theme)",
   /** Color for measurement indicators */
   text: "var(--bk-spacer-color-text-theme)"
-}, Ee = {
+}, 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 */
   text: "var(--bk-box-color-text-theme)"
-}, Se = {
+}, 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 */
   text: "var(--bk-stack-color-text-theme)"
-}, Ce = {
+}, 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 */
   text: "var(--bk-layout-color-text-theme)"
-}, Re = "var(--bk-padder-color-theme)", _e = {
+}, 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: we
+    colors: Rt
   },
   /** Guide overlay configuration */
   guide: {
     variant: "line",
     debugging: "hidden",
-    colors: ke
+    colors: Ct
   },
   /** Spacer component configuration */
   spacer: {
     variant: "line",
     debugging: "hidden",
-    colors: ye
+    colors: _t
   },
   /** Box component configuration */
   box: {
     debugging: "hidden",
-    colors: Ee
+    colors: jt
   },
   /** Stack/Flex component configuration */
   stack: {
     debugging: "hidden",
-    colors: Se
+    colors: Mt
   },
   /** Layout component configuration */
   layout: {
     debugging: "hidden",
-    colors: Ce
+    colors: Ot
   },
   /** Padder component configuration */
   padder: {
     debugging: "hidden",
-    color: Re
+    color: Tt
   }
-}, Et = f.createContext(null);
-Et.displayName = "ConfigContext";
-const Qt = () => f.use(Et) ?? _e, je = ({
-  base: e,
-  baseline: n,
-  guide: o,
-  stack: a,
-  spacer: s,
-  layout: r,
-  box: i,
-  padder: d
-}) => ({
-  "--bkb": `${e}px`,
-  // Baseline Colors
-  "--bkbcl": n.colors.line,
-  "--bkbcf": n.colors.flat,
-  // Guide Colors
-  "--bkgcl": o.colors.line,
-  "--bkgcp": o.colors.pattern,
-  "--bkgca": o.colors.auto,
-  "--bkgcf": o.colors.fixed,
-  // Spacer Colors
-  "--bkscl": s.colors.line,
-  "--bkscf": s.colors.flat,
-  "--bksci": s.colors.text,
-  // Box Colors
-  "--bkxcl": i.colors.line,
-  "--bkxcf": i.colors.flat,
-  "--bkxci": i.colors.text,
-  // Flex Colors
-  "--bkkcl": a.colors.line,
-  "--bkkcf": a.colors.flat,
-  "--bkkci": a.colors.text,
-  // Layout Colors
-  "--bklcl": r.colors.line,
-  "--bklcf": r.colors.flat,
-  "--bklci": r.colors.text,
-  // Padder Color
-  "--bkpc": d.color
-});
-function St({
+}, 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: o,
-  baseline: a,
+  baseline: r,
   guide: s,
-  layout: r,
+  layout: a,
   spacer: i,
-  box: d,
-  padder: g
+  box: l,
+  padder: u
 }) {
-  const c = Qt(), m = f.useMemo(() => {
-    const x = {
-      base: n ?? c.base,
-      baseline: { ...c.baseline, ...a },
-      guide: { ...c.guide, ...s },
-      spacer: { ...c.spacer, ...i },
-      box: { ...c.box, ...d },
-      stack: { ...c.stack, ...o },
-      layout: { ...c.layout, ...r },
-      padder: { ...c.padder, ...g }
-    };
-    return {
-      ...x,
-      cssVariables: je(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,
-    c.base,
-    c.baseline,
-    c.guide,
-    c.spacer,
-    c.box,
-    c.stack,
-    c.layout,
-    c.padder,
-    a,
+    r,
     s,
     i,
-    d,
+    l,
     o,
-    r,
-    g
+    a,
+    u
   ]);
-  return /* @__PURE__ */ _.jsx(Et, { value: m, children: e });
+  return /* @__PURE__ */ S.jsx(je, { value: k, children: e });
 }
-const Oe = "spr_4aLVm", Te = "line_lUa33", Ae = "flat_zXVQF", Pt = {
-  spr: Oe,
-  line: Te,
-  flat: Ae
-}, $e = f.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: o,
-  indicatorNode: a,
+  indicatorNode: r,
   debugging: s,
-  variant: r,
+  variant: a,
   base: i,
-  color: d,
-  className: g,
-  style: c,
-  ...m
+  color: l,
+  className: u,
+  style: m,
+  children: k,
+  ssrMode: b = !1,
+  ...O
 }) {
-  const x = f.useRef(null), b = X("spacer"), { isShown: v } = tt(s, b.debugging), A = r ?? b.variant, M = i ?? b.base, [h, $] = Dt(
+  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: M, suppressWarnings: !0 }
-  ), N = f.useMemo(() => !v || !a ? null : [
-    $ !== 0 && /* @__PURE__ */ _.jsx("span", { children: a($, "height") }, "height"),
-    h !== 0 && /* @__PURE__ */ _.jsx("span", { children: a(h, "width") }, "width")
-  ].filter(Boolean), [v, a, $, h]), k = f.useMemo(() => ({
-    "--bksh": "100%",
-    "--bksw": "100%",
-    "--bksb": `${b.base}px`,
-    "--bksci": "var(--bk-spacer-color-text-theme)",
-    "--bkscl": "var(--bk-spacer-color-line-theme)",
-    "--bkscf": "var(--bk-spacer-color-flat-theme)"
-  }), [b.base]), C = f.useCallback(
-    (V, O) => (V === "--bksw" || V === "--bksh") && O === "100%" ? {} : O !== k[V] ? { [V]: O } : {},
-    [k]
-  ), E = f.useMemo(() => {
-    const V = U($ || "100%"), O = U(h || "100%"), R = `${i || b.base}px`, w = {
-      ...C("--bksh", V),
-      ...C("--bksw", O),
-      ...C("--bksb", R),
-      ...C(
-        "--bksci",
-        d ?? b.colors.text
-      ),
-      ...C(
-        "--bkscl",
-        d ?? b.colors.line
-      ),
-      ...C(
-        "--bkscf",
-        d ?? b.colors.flat
-      )
+    { 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 I(w, c);
+    return oe(B, m);
   }, [
-    C,
-    $,
-    h,
-    b.base,
-    d,
-    b.colors.text,
-    b.colors.line,
-    b.colors.flat,
-    c
+    R,
+    I,
+    l,
+    g,
+    h.colors,
+    M,
+    m
   ]);
-  return /* @__PURE__ */ _.jsx(
+  return /* @__PURE__ */ S.jsxs(
     "div",
     {
       ref: x,
       "data-testid": "spacer",
-      className: J(Pt.spr, v && Pt[A], g),
-      "data-variant": A,
-      style: E,
-      ...m,
-      children: N
+      className: ne(Ue.spr, j && Ue[T], u),
+      "data-variant": T,
+      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
     }
   );
-}), Me = "pad_I0i9S", Ne = "v_E0FRN", xt = {
-  pad: Me,
-  v: Ne
-}, Ct = f.memo(
-  f.forwardRef(function({
+  return a.displayName = "PadderSpacer", a;
+}, Oe = c.memo(
+  c.forwardRef(function({
     children: n,
     className: o,
-    debugging: a,
+    debugging: r,
     height: s,
-    indicatorNode: r,
+    indicatorNode: a,
     style: i,
-    width: d,
-    ...g
-  }, c) {
-    const m = X("padder"), { variant: x } = X("spacer"), b = f.useMemo(
-      () => D(g),
-      [g]
-    ), { isShown: v, isNone: A, debugging: M } = tt(
-      a,
-      m.debugging
-    ), h = !A, $ = f.useRef(null), {
-      padding: { top: N, left: k, bottom: C, right: E }
-    } = mt($, {
-      base: m.base,
+    width: 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: b,
-      warnOnMisalignment: !A
-    }), V = Zt(c, $), O = f.useMemo(() => {
-      const w = {};
-      return d !== "fit-content" && (w["--bkpw"] = U(d || "fit-content")), s !== "fit-content" && (w["--bkph"] = U(s || "fit-content")), m.base !== 8 && (w["--bkpb"] = `${m.base}px`), m.color !== "var(--bk-padder-color-theme)" && (w["--bkpc"] = m.color), h || ((N > 0 || C > 0) && (w.paddingBlock = `${N}px ${C}px`), (k > 0 || E > 0) && (w.paddingInline = `${k}px ${E}px`)), I(w, i);
+      spacing: x,
+      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
+      );
     }, [
-      d,
+      l,
       s,
-      m.base,
-      m.color,
-      h,
-      N,
-      E,
-      C,
-      k,
+      b.base,
+      b.color,
+      g,
+      p.top,
+      p.right,
+      p.bottom,
+      p.left,
       i
-    ]), R = (w, j) => /* @__PURE__ */ _.jsx(
-      $e,
-      {
-        variant: x,
-        debugging: M,
-        indicatorNode: r,
-        height: j !== "100%" ? j : void 0,
-        width: w !== "100%" ? w : void 0
-      }
+    ]), E = c.useMemo(
+      () => Pt(O, T, a),
+      [O, T, a]
     );
-    return h ? /* @__PURE__ */ _.jsxs(
+    return g ? /* @__PURE__ */ S.jsxs(
       "div",
       {
-        ref: V,
+        ref: M,
         "data-testid": "padder",
-        className: J(xt.pad, v && xt.v, o),
-        style: O,
+        className: ne(we.pad, h && we.v, o),
+        style: D,
         children: [
-          /* @__PURE__ */ _.jsxs(_.Fragment, { children: [
-            N > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridColumn: "1 / -1" }, children: R("100%", N) }),
-            k > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridRow: "2 / 3" }, children: R(k, "100%") })
+          /* @__PURE__ */ S.jsxs(S.Fragment, { children: [
+            p.top >= 0 && /* @__PURE__ */ S.jsx("div", { style: { gridColumn: "1 / -1" }, children: E("100%", p.top) }),
+            p.left >= 0 && /* @__PURE__ */ S.jsx("div", { style: { gridRow: "2 / 3" }, children: E(p.left, "100%") })
           ] }),
-          /* @__PURE__ */ _.jsx("div", { style: { gridRow: "2 / 3", gridColumn: "2 / 3" }, children: n }),
-          /* @__PURE__ */ _.jsxs(_.Fragment, { children: [
-            E > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridRow: "2 / 3" }, children: R(E, "100%") }),
-            C > 0 && /* @__PURE__ */ _.jsx("div", { style: { gridColumn: "1 / -1" }, children: R("100%", C) })
+          /* @__PURE__ */ 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__ */ _.jsx(
+    ) : /* @__PURE__ */ S.jsx(
       "div",
       {
-        ref: V,
+        ref: M,
         "data-testid": "padder",
-        className: J(xt.pad, o),
-        style: O,
+        className: ne(we.pad, o),
+        style: D,
         children: n
       }
     );
   })
-), Ve = "lay_yGGkG", Ge = "v_uVoBP", Ft = {
-  lay: Ve,
-  v: Ge
-};
-function Ht(e) {
-  return typeof e == "number" ? `repeat(${e}, 1fr)` : typeof e == "string" ? e : Array.isArray(e) ? e.map((n) => typeof n == "number" ? `${n}px` : n).join(" ") : "repeat(auto-fit, minmax(100px, 1fr))";
-}
-const en = f.memo(function({
-  children: n,
-  columns: o,
-  rows: a,
-  rowGap: s,
-  columnGap: r,
-  gap: i,
-  height: d,
-  width: g,
-  indicatorNode: c,
-  justifyItems: m,
-  alignItems: x,
+), 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,
-  alignContent: v,
-  className: A,
-  variant: M,
-  style: h,
-  debugging: $,
-  ...N
+  justifyItems: O,
+  rowGap: x,
+  rows: h,
+  style: j,
+  variant: T,
+  width: g,
+  ssrMode: V = !1,
+  ...$
 }) {
-  const k = X("layout"), { isShown: C } = tt($, k.debugging), E = f.useRef(null), V = f.useMemo(
-    () => D(N),
-    [N]
-  ), { padding: O } = mt(E, {
-    base: k.base,
+  const 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: V,
+    spacing: E,
     warnOnMisalignment: !0
-  }), R = f.useMemo(
-    () => Ht(o),
-    [o]
-  ), w = f.useMemo(
-    () => a ? Ht(a) : "auto",
+  }), 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]
-  ), j = f.useMemo(
-    () => ({
-      "--bklw": "auto",
-      "--bklh": "auto",
-      "--bklcl": k.colors.line,
-      "--bklcf": k.colors.flat,
-      "--bklci": k.colors.text
-    }),
-    [k.colors.line, k.colors.flat, k.colors.text]
-  ), y = f.useCallback(
-    (B, W) => (B === "--bklw" || B === "--bklh") && W === "auto" ? {} : W !== j[B] ? { [B]: W } : {},
-    [j]
-  ), T = f.useMemo(
-    () => ({
-      ...i !== void 0 && { gap: U(i) },
-      ...s !== void 0 && { rowGap: U(s) },
-      ...r !== void 0 && { columnGap: U(r) }
-    }),
-    [i, s, r]
-  ), L = f.useMemo(() => {
-    const B = U(g || "auto"), W = U(d || "auto");
-    return I(
+  ), 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(
       {
         // Theme overrides
-        ...y("--bklw", B),
-        ...y("--bklh", W),
-        ...y("--bklcl", k.colors.line),
-        ...y("--bklcf", k.colors.flat),
-        ...y("--bklci", k.colors.text),
+        ...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
-        ...R !== "repeat(auto-fit, minmax(100px, 1fr))" && {
-          "--bklgtc": R
-        },
-        ...w !== "auto" && { "--bklgtr": w },
-        ...m && { "--bklji": m },
-        ...x && { "--bklai": x },
+        ...B !== "repeat(auto-fit, minmax(100px, 1fr))" && { "--bklgtc": B },
+        ...W !== "auto" && { "--bklgtr": W },
+        ...O && { "--bklji": O },
+        ...o && { "--bklai": o },
         ...b && { "--bkljc": b },
-        ...v && { "--bklac": v },
+        ...n && { "--bklac": n },
         // Include gap styles
-        ...T
+        ...K
       },
-      h
+      j
     );
   }, [
-    R,
-    w,
-    m,
-    x,
+    B,
+    W,
+    O,
+    o,
     b,
-    v,
+    n,
     g,
-    d,
-    k.colors.line,
-    k.colors.flat,
-    k.colors.text,
-    y,
-    h,
-    T
+    m,
+    R.colors,
+    A,
+    j,
+    K
   ]);
-  return /* @__PURE__ */ _.jsx(
-    St,
+  return /* @__PURE__ */ S.jsx(
+    Me,
     {
-      spacer: { variant: M ?? "line" },
-      children: /* @__PURE__ */ _.jsx(
-        Ct,
+      spacer: { variant: T ?? "line" },
+      children: /* @__PURE__ */ S.jsx(
+        Oe,
         {
-          ref: E,
-          className: C ? Ft.v : "",
-          block: [O.top, O.bottom],
-          indicatorNode: c,
-          inline: [O.left, O.right],
-          debugging: $,
+          ref: D,
+          className: I ? qe.v : "",
+          block: [y.top, y.bottom],
+          ...k ? { indicatorNode: k } : {},
+          inline: [y.left, y.right],
+          debugging: G,
           width: g,
-          height: d,
-          children: /* @__PURE__ */ _.jsx(
+          height: m,
+          ssrMode: V,
+          children: /* @__PURE__ */ S.jsx(
             "div",
             {
               "data-testid": "layout",
-              className: J(A, Ft.lay),
-              style: L,
-              children: n
+              className: ne(s, qe.lay),
+              style: J,
+              ...$ && Object.keys($).length > 0 ? Object.fromEntries(
+                Object.entries($).filter(([_]) => _ !== "ssrMode")
+              ) : {},
+              children: r
             }
           )
         }
       )
     }
   );
-}), We = "box_LHy8B", Be = "v_q3Ozc", It = {
-  box: We,
-  v: Be
-}, nn = f.memo(
-  f.forwardRef(function({
+}), 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: o = "clamp",
-    debugging: a,
+    debugging: r,
     className: s,
-    colSpan: r,
+    colSpan: a,
     rowSpan: i,
-    span: d,
-    width: g,
-    height: c,
-    style: m,
-    ...x
-  }, b) {
-    const v = X("box"), { isShown: A, debugging: M } = tt(a, v.debugging), h = f.useRef(null), { top: $, bottom: N, left: k, right: C } = D(x), { padding: E } = mt(h, {
-      base: v.base,
+    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: o,
-      spacing: { top: $, bottom: N, left: k, right: C },
-      warnOnMisalignment: M !== "none"
-    }), V = f.useMemo(() => {
-      const j = {};
-      return d !== void 0 ? (j.gridColumn = `span ${d}`, j.gridRow = `span ${d}`) : (r !== void 0 && (j.gridColumn = `span ${r}`), i !== void 0 && (j.gridRow = `span ${i}`)), j;
-    }, [r, i, d]), O = f.useMemo(
-      () => ({
-        "--bkxw": "fit-content",
-        "--bkxh": "fit-content",
-        "--bkxb": `${v.base}px`,
-        "--bkxcl": v.colors.line
-      }),
-      [v.base, v.colors.line]
-    ), R = f.useCallback(
-      (j, y) => (j === "--bkxw" || j === "--bkxh") && y === "fit-content" ? {} : y !== O[j] ? { [j]: y } : {},
-      [O]
-    ), w = f.useMemo(() => {
-      const j = U(g || "fit-content"), y = U(c || "fit-content"), T = {
-        ...R("--bkxw", j),
-        ...R("--bkxh", y),
-        ...R("--bkxb", `${v.base}px`),
-        ...R("--bkxcl", v.colors.line)
-      };
-      return I(T, m);
-    }, [
-      v.base,
-      v.colors.line,
-      g,
-      c,
-      R,
-      m
-    ]);
-    return /* @__PURE__ */ _.jsx(
+      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__ */ S.jsx(
       "div",
       {
-        ref: Zt(b, h),
+        ref: tt(x, $),
         "data-testid": "box",
-        className: J(It.box, A && It.v, s),
-        style: I(w, V),
-        children: /* @__PURE__ */ _.jsx(
-          St,
+        className: ne(Je.box, j && Je.v, s),
+        style: oe(y, L),
+        children: /* @__PURE__ */ S.jsx(
+          Me,
           {
             base: 1,
             spacer: { variant: "flat" },
-            children: /* @__PURE__ */ _.jsx(
-              Ct,
+            children: /* @__PURE__ */ S.jsx(
+              Oe,
               {
                 block: [E.top, E.bottom],
                 inline: [E.left, E.right],
                 width: "fit-content",
-                height: c,
-                debugging: M,
+                height: m,
+                debugging: T,
+                ssrMode: b,
                 children: n
               }
             )
@@ -1393,107 +1591,146 @@ const en = f.memo(function({
       }
     );
   })
-), Le = "stk_4t2AU", ze = "v_Uwir6", qt = {
-  stk: Le,
-  v: ze
-}, on = f.memo(function({
+), 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: a,
+  className: r,
   columnGap: s,
-  debugging: r,
+  debugging: a,
   direction: i = "row",
-  gap: d,
-  height: g,
-  indicatorNode: c,
-  justify: m = "flex-start",
-  rowGap: x,
-  style: b,
-  variant: v,
-  width: A,
-  ...M
+  gap: l,
+  height: u,
+  indicatorNode: m,
+  justify: k = "flex-start",
+  rowGap: b,
+  style: O,
+  variant: x,
+  width: h,
+  ssrMode: j = !1,
+  ...T
 }) {
-  const h = X("stack"), { isShown: $, debugging: N } = tt(r, h.debugging), k = f.useRef(null), C = f.useMemo(
-    () => D(M),
-    [M]
-  ), { padding: E } = mt(k, {
-    base: h.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: C,
-    warnOnMisalignment: !0
-  }), V = f.useMemo(
-    () => ({
-      rowGap: x,
-      columnGap: s,
-      ...d !== void 0 && { gap: d }
-    }),
-    [x, s, d]
-  ), O = f.useMemo(
-    () => ({
-      "--bkkw": "auto",
-      "--bkkh": "auto",
-      "--bkkcl": h.colors.line,
-      "--bkkcf": h.colors.flat,
-      "--bkkci": h.colors.text
-    }),
-    [h.colors.line, h.colors.flat, h.colors.text]
-  ), R = f.useCallback(
-    (y, T) => y === "--bkkw" && T === "auto" ? {} : y === "--bkkh" && T === "auto" ? {} : T !== O[y] ? { [y]: T } : {},
-    [O]
-  ), w = f.useMemo(() => {
-    const y = U(A || "auto"), T = U(g || "auto"), L = {
-      ...R("--bkkw", y),
-      ...R("--bkkh", T),
-      ...R("--bkkcl", h.colors.line),
-      ...R("--bkkcf", h.colors.flat),
-      ...R("--bkkci", h.colors.text)
+    spacing: { top: 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 I({
-      flexDirection: i,
-      justifyContent: m,
+    return oe({
+      flexDirection: U,
+      justifyContent: k,
       alignItems: n,
-      width: A,
-      height: g
-    }, V, L, b);
+      width: h,
+      height: u
+    }, B, Z, O);
   }, [
     i,
-    m,
+    k,
     n,
-    A,
-    g,
-    h.colors.line,
-    h.colors.flat,
-    h.colors.text,
-    R,
-    V,
-    b
-  ]), j = N === "none" ? {
-    ...w,
-    paddingBlock: `${E.top}px ${E.bottom}px`,
-    paddingInline: `${E.left}px ${E.right}px`
-  } : w;
-  return /* @__PURE__ */ _.jsx(
-    St,
+    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,
     {
-      spacer: { variant: v ?? "line" },
-      children: /* @__PURE__ */ _.jsx(
-        Ct,
+      spacer: { variant: x ?? "line" },
+      children: /* @__PURE__ */ S.jsx(
+        Oe,
         {
-          ref: k,
-          className: $ ? qt.v : "",
-          block: [E.top, E.bottom],
-          inline: [E.left, E.right],
-          debugging: N,
-          indicatorNode: c,
-          width: A,
-          height: g,
-          children: /* @__PURE__ */ _.jsx(
+          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: J(a, qt.stk),
-              style: j,
-              ...M,
+              className: ne(r, Ze.stk),
+              style: K,
+              ...T,
               children: o
             }
           )
@@ -1501,248 +1738,420 @@ const en = f.memo(function({
       )
     }
   );
-}), Ue = "gde_eT-MH", Ye = "line_xcGxq", Pe = "cols_LoPVp", Fe = "col_ZgTMC", nt = {
-  gde: Ue,
-  line: Ye,
-  cols: Pe,
-  col: Fe
-}, rn = f.memo(function({
+}), 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: o,
-  style: a,
+  style: r,
   variant: s,
-  align: r = "start",
+  align: a = "start",
   gap: i,
-  height: d,
-  width: g,
-  columns: c,
-  columnWidth: m,
-  ...x
+  height: l,
+  width: u,
+  columns: m,
+  columnWidth: k,
+  gutterWidth: b,
+  maxWidth: O,
+  color: x,
+  children: h,
+  ssrMode: j = !1,
+  ...T
 }) {
-  const b = X("guide"), v = s ?? b.variant, { isShown: A } = tt(o, b.debugging), M = f.useRef(null), { width: h, height: $ } = bt(M), { top: N, right: k, bottom: C, left: E } = f.useMemo(() => D(x), [x]), V = f.useMemo(() => {
-    const W = dt(i);
-    return {
-      line: {
-        variant: "line",
-        gap: W - 1,
-        base: b.base
-      },
-      auto: m ? {
-        variant: "auto",
-        columnWidth: m,
-        gap: W,
-        base: b.base
-      } : null,
-      pattern: Array.isArray(c) ? {
-        variant: "pattern",
-        columns: c,
-        gap: W,
-        base: b.base
-      } : null,
-      fixed: typeof c == "number" ? {
-        variant: "fixed",
-        columns: c,
-        columnWidth: m,
-        gap: W,
-        base: b.base
-      } : null
-    }[v] ?? {
-      variant: "line",
-      gap: W - 1,
-      base: b.base
+  const g = se("guide"), V = s ?? g.variant, $ = typeof i == "number" ? i : g.base, [R, I] = c.useState(!1);
+  c.useEffect(() => {
+    I(!0);
+  }, []);
+  const G = c.useRef(null), p = ve(G), M = re(
+    R && !j,
+    { width: 1024, height: 768, refresh: () => {
+    } },
+    p
+  ), { width: D, height: E } = M, { isShown: L } = le(o, g.debugging), z = c.useMemo(() => cn({
+    variant: V,
+    base: g.base,
+    gap: $,
+    columns: m,
+    columnWidth: k
+  }), [V, g.base, $, m, k]), {
+    template: y,
+    columnsCount: B,
+    calculatedGap: W
+  } = Et(G, z), A = c.useMemo(
+    () => un(g.base, g.colors.line),
+    [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
     };
-  }, [i, b.base, m, c, v]), {
-    template: O,
-    columnsCount: R,
-    calculatedGap: w
-  } = xe(M, V), j = f.useMemo(() => ({
-    "--bkgg": `${w}px`,
-    "--bkgj": "start",
-    "--bkgcl": b.colors.line,
-    "--bkgcp": b.colors.pattern,
-    "--bkgw": "100vw",
-    "--bkgh": "100vh"
-  }), [w, b.colors.line, b.colors.pattern]), y = f.useCallback(
-    (W, P) => W === "--bkgw" && P === "100vw" || W === "--bkgh" && P === "100vh" ? {} : P !== j[W] ? { [W]: P } : {},
-    [j]
-  ), T = {
-    "--bkgg": `${w}px`,
-    "--bkgj": r,
-    "--bkgcl": b.colors.line,
-    "--bkgcp": b.colors.pattern,
-    "--bkgpb": `${N}px ${C}px`,
-    "--bkgpi": `${E}px ${k}px`,
-    "--bkgt": O,
-    "--bkgw": U(g ?? h, 0) || "100vw",
-    "--bkgh": U(d ?? $, 0) || "100vh"
-  }, L = {
-    ...y("--bkgw", T["--bkgw"]),
-    ...y("--bkgh", T["--bkgh"]),
-    ...y("--bkgj", r),
-    ...y("--bkgcl", b.colors.line),
-    ...y("--bkgcp", b.colors.pattern),
-    ...y("--bkgg", `${w}px`)
-  }, B = I(T, L, a);
-  return /* @__PURE__ */ _.jsx(
+    return oe(X, r);
+  }, [
+    u,
+    l,
+    O,
+    k,
+    b,
+    B,
+    x,
+    y,
+    W,
+    D,
+    E,
+    g.base,
+    g.colors.line,
+    A,
+    r,
+    a
+  ]);
+  return /* @__PURE__ */ S.jsxs(
     "div",
     {
-      ref: M,
+      ref: G,
       "data-testid": "guide",
-      className: J(
-        nt.gde,
+      className: ne(
+        ue.gde,
         n,
-        A ? nt.v : nt.h,
-        v === "line" && nt.line
+        L ? ue.v : ue.h,
+        V === "line" && ue.line
       ),
-      "data-variant": v,
-      style: B,
-      ...x,
-      children: A && /* @__PURE__ */ _.jsx("div", { className: nt.cols, "data-variant": v, children: Array.from({ length: R }, (W, P) => {
-        const ct = b.colors[v] ?? b.colors.line;
-        return /* @__PURE__ */ _.jsx(
-          "div",
-          {
-            className: nt.col,
-            "data-column-index": P,
-            "data-variant": v,
-            style: { backgroundColor: ct }
-          },
-          P
-        );
-      }) })
+      "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
+      ]
     }
   );
-}), He = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, Ie = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e != "string" ? !1 : e === "auto" || e === "100%" || He.test(e), qe = (e) => Array.isArray(e) && e.length > 0 && e.every(Ie), sn = (e) => {
-  const n = [...Object.keys(wt), ...Xt];
+}), 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));
-}, an = (e) => typeof e == "string" && De.includes(e), Rt = (e) => typeof e == "object" && e !== null, cn = (e) => Rt(e) && e.variant === "line", ln = (e) => Rt(e) && "columns" in e && !("variant" in e), un = (e) => Rt(e) && "columnWidth" in e && !("variant" in e) && !("columns" in e), Je = "bas_qAJSK", Xe = "row_y6My5", ft = {
-  bas: Je,
-  row: Xe
-}, fn = f.memo(function({
+}, 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: o,
-  style: a,
+  style: r,
   variant: s,
-  height: r,
+  height: a,
   width: i,
-  base: d,
-  ...g
+  base: l,
+  color: u,
+  ssrMode: m = !1,
+  ...k
 }) {
-  const c = X("baseline"), m = s ?? c.variant, x = d ?? c.base, { isShown: b } = tt(o, c.debugging), v = f.useRef(null), { width: A, height: M } = bt(v), [h, $] = f.useMemo(() => Dt(
-    [i, r],
-    [A, M]
-  ), [i, r, A, M]), { top: N, right: k, bottom: C, left: E } = f.useMemo(
-    () => D(g),
-    [g]
-  ), V = f.useMemo(() => {
-    const T = ($ ?? 0) - (N + C);
-    return Math.max(1, Math.floor(T / x));
-  }, [$, N, C, x]), { start: O, end: R } = pe({
-    totalLines: V,
+  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: v,
+    containerRef: j,
     buffer: 160
-  }), w = m === "line" ? c.colors.line : c.colors.flat, j = f.useMemo(() => {
-    const T = [N, k, C, E].map((L) => L ? `${L}px` : "0").join(" ");
-    return I(
+  }), 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(
       {
-        "--bkbw": i ? `${h}px` : "100%",
-        "--bkbh": r ? `${$}px` : "100%",
-        ...T !== "0 0 0 0" && { padding: T }
+        ...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 }
       },
-      a
+      r
     );
   }, [
-    N,
-    k,
-    C,
-    E,
     i,
-    h,
-    r,
-    $,
-    a
-  ]), y = f.useCallback(
-    (T) => {
-      const L = m === "line" ? "1px" : `${x}px`, B = m === "line" ? c.colors.line : c.colors.flat;
-      return I({
-        "--bkrt": `${T * x}px`,
-        ...L !== "1px" && { "--bkrh": L },
-        ...w !== B && { "--bkbcl": w }
-      });
-    },
-    [x, m, w, c.colors.line, c.colors.flat]
+    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, O, J, b.colors.line, b.colors.flat]
   );
-  return /* @__PURE__ */ _.jsx(
+  return /* @__PURE__ */ S.jsx(
     "div",
     {
-      ref: v,
+      ref: j,
       "data-testid": "baseline",
-      className: J(
-        ft.bas,
-        b ? ft.v : ft.h,
+      className: ne(
+        he.bas,
+        h ? he.v : he.h,
         n
       ),
-      style: j,
-      ...g,
-      children: b && Array.from({ length: R - O }, (T, L) => {
-        const B = L + O;
-        return /* @__PURE__ */ _.jsx(
+      style: U,
+      ...k,
+      children: h && Array.from({ length: K - A }, (Z, q) => {
+        const X = q + A;
+        return /* @__PURE__ */ S.jsx(
           "div",
           {
-            className: ft.row,
-            "data-row-index": B,
-            style: y(B)
+            className: he.row,
+            "data-row-index": X,
+            style: P(X)
           },
-          B
+          X
         );
       })
     }
   );
-}), De = ["start", "center", "end"], dn = ["line", "flat"];
+}), vn = ["start", "center", "end"], Vn = ["line", "flat"];
 export {
-  wt as ABSOLUTE_UNIT_CONVERSIONS,
-  fn as Baseline,
-  nn as Box,
-  St as Config,
-  _e as DEFAULT_CONFIG,
-  De as GRID_ALIGNMENTS,
-  rn as Guide,
-  en as Layout,
-  dn as PADD_VARIANTS,
-  Ct as Padder,
-  Xt as RELATIVE_UNITS,
-  $e as Spacer,
-  on as Stack,
-  ge as calculateSnappedSpacing,
-  fe as clamp,
-  yt as convertValue,
-  je as createCSSVariables,
-  tn as debounce,
-  U as formatValue,
-  un as isAutoCalculatedGuide,
-  an as isGuideAlignment,
-  ln as isGuideColumnConfig,
-  cn as isGuideLineConfig,
-  sn as isGuideValue,
-  Ie as isValidGuideColumnValue,
-  qe as isValidGuidePattern,
-  J as mergeClasses,
-  Zt as mergeRefs,
-  I as mergeStyles,
-  Ke as moduloize,
-  dt as normalizeValue,
-  Dt as normalizeValuePair,
-  D as parsePadding,
-  le as parseUnit,
-  Kt as rafThrottle,
-  Qe as round,
-  mt as useBaseline,
-  X as useConfig,
-  tt as useDebug,
-  Qt as useDefaultConfig,
-  xe as useGuide,
-  bt as useMeasure,
-  pe as useVirtual
+  Ce as ABSOLUTE_UNIT_CONVERSIONS,
+  Nn as Baseline,
+  Rn as Box,
+  Me as Config,
+  At as DEFAULT_CONFIG,
+  tn as DIRECTION_AXIS,
+  vn as GRID_ALIGNMENTS,
+  jn as Guide,
+  Cn as Layout,
+  Vn as PADD_VARIANTS,
+  Oe as Padder,
+  Qe as RELATIVE_UNITS,
+  xt as SSR_DIMENSIONS,
+  Ht as Spacer,
+  _n as Stack,
+  mt as calculateRowCount,
+  vt as calculateSnappedSpacing,
+  bt as clamp,
+  _e as convertValue,
+  kn as createBaselineRowStyle,
+  Kt as createBoxCustomStyles,
+  En as createCSSVariables,
+  hn as createDefaultBaselineStyles,
+  Zt as createDefaultBoxStyles,
+  un as createDefaultGuideStyles,
+  Ut as createDefaultLayoutStyles,
+  Dt as createDefaultSpacerStyles,
+  nn as createDefaultStackStyles,
+  Lt as createDirectPaddingStyles,
+  cn as createGridConfig,
+  qt as createGridGapStyles,
+  pt as createGridSpanStyles,
+  Bt as createPadderContainerStyles,
+  Pt as createRenderSpacerFn,
+  on as createStackGapStyles,
+  w as createStyleOverride,
+  Sn as debounce,
+  H as formatValue,
+  Wt as generateMeasurements,
+  Xe as getGridTemplate,
+  re as hydratedValue,
+  $n as isAutoCalculatedGuide,
+  On as isGuideAlignment,
+  An as isGuideColumnConfig,
+  Tn as isGuideLineConfig,
+  Mn as isGuideValue,
+  ot as isSSR,
+  dn as isValidGuideColumnValue,
+  bn as isValidGuidePattern,
+  ne as mergeClasses,
+  $t as mergeConfig,
+  tt as mergeRefs,
+  oe as mergeStyles,
+  yn as moduloize,
+  Re as normalizeValue,
+  et as normalizeValuePair,
+  ie as parsePadding,
+  ft as parseUnit,
+  nt as rafThrottle,
+  xn as round,
+  wn as safeClientValue,
+  pe as useBaseline,
+  se as useConfig,
+  le as useDebug,
+  rt as useDefaultConfig,
+  Et as useGuide,
+  ve as useMeasure,
+  St as useVirtual
 };
 //# sourceMappingURL=index.mjs.map