@gearbox-protocol/ui-kit 3.14.0-next.11 → 3.14.0-next.13

package/dist/esm/components/layout/main-aside-layout/main-aside-layout.js

@@ -1,9 +1,9 @@
 import { jsx as m, jsxs as o, Fragment as c } from "react/jsx-runtime";
-import * as b from "react";
-import { cn as i } from "../../../utils/cn.js";
-const k = b.forwardRef(
+import * as E from "react";
+import { cn as n } from "../../../utils/cn.js";
+const _ = "56rem", I = "20rem", M = "1032px", T = E.forwardRef(
   ({
-    children: n,
+    children: i,
     aside: s,
     asidePosition: x = "right",
     asideClassName: w,
@@ -13,11 +13,11 @@ const k = b.forwardRef(
     centeredMain: u = !1,
     className: v,
     ...d
-  }, h) => {
-    const e = g === "detail", r = x === "left", l = e && u, a = s == null ? null : /* @__PURE__ */ m(
+  }, N) => {
+    const e = g === "detail", t = x === "left", l = e && u, a = s == null ? null : /* @__PURE__ */ m(
       "aside",
       {
-        className: i(
+        className: n(
           "min-w-0 shrink-0",
           e && !l && [
             "w-full",
@@ -28,52 +28,52 @@ const k = b.forwardRef(
             "lg:max-[2449px]:sticky lg:max-[2449px]:top-4",
             "min-[2450px]:fixed min-[2450px]:top-28",
             // fixed anchor matches asidePosition
-            r ? "min-[2450px]:left-32" : "min-[2450px]:right-32"
+            t ? "min-[2450px]:left-32" : "min-[2450px]:right-32"
           ],
           l && [
             "w-full",
             "z-30 lg:w-[420px] lg:min-w-[420px] lg:max-w-[420px]",
             "xl:w-[460px] xl:min-w-[460px] xl:max-w-[460px]",
             "overflow-y-visible lg:max-h-[100vh] lg:overflow-y-auto",
-            // sticky in the LP-style fill range (lg…1799px)
-            "lg:max-[1799px]:sticky lg:max-[1799px]:top-4",
-            // ≥1800px: gutter beside the viewport-centred main column
-            "min-[1800px]:absolute min-[1800px]:top-0",
-            r ? "min-[1800px]:right-full min-[1800px]:mr-6" : "min-[1800px]:left-full min-[1800px]:ml-6"
+            // LP-style in-flow fallback (lg…1519)
+            "lg:max-[1519px]:sticky lg:max-[1519px]:top-4",
+            // Gutter beside the viewport-centred shell (≥1520)
+            "min-[1520px]:absolute min-[1520px]:top-0",
+            t ? "min-[1520px]:right-full min-[1520px]:mr-6" : "min-[1520px]:left-full min-[1520px]:ml-6"
           ],
           w
         ),
         children: s
       }
-    ), y = i(
-      // lg…1799: children participate in the outer flex row (LP-style fill)
+    ), h = n(
+      // lg…1519: children join the outer LP-style flex row
       "lg:contents",
-      // ≥1800: viewport-centred shell; aside is absolute in the gutter
-      "min-[1800px]:block min-[1800px]:relative min-[1800px]:mx-auto min-[1800px]:w-full",
-      "min-[1800px]:max-w-[min(80rem,calc(100vw-460px-1.5rem-4rem))]"
-    ), t = i(
+      // ≥1520: viewport-centred shell; aside hangs in the gutter
+      "min-[1520px]:block min-[1520px]:relative min-[1520px]:mx-auto min-[1520px]:w-full",
+      `min-[1520px]:max-w-[max(${I},min(${_},calc(100vw-${M})))]`
+    ), r = n(
       "relative z-0 min-w-0 w-full",
       !l && "flex-1",
       e && !l && [
         "relative z-0 w-full",
         "min-[2450px]:mx-auto min-[2450px]:flex-none",
         "min-[2450px]:max-w-[min(80rem,calc(100vw-460px-8rem))]",
-        r && "min-[2450px]:ml-[calc(460px+8rem)]"
+        t && "min-[2450px]:ml-[calc(460px+8rem)]"
       ],
       l && "flex-1 lg:max-w-none",
       f
-    ), N = x === "left" ? /* @__PURE__ */ o(c, { children: [
+    ), y = x === "left" ? /* @__PURE__ */ o(c, { children: [
       a,
-      /* @__PURE__ */ m("div", { ref: p, className: t, children: n })
+      /* @__PURE__ */ m("div", { ref: p, className: r, children: i })
     ] }) : /* @__PURE__ */ o(c, { children: [
-      /* @__PURE__ */ m("div", { ref: p, className: t, children: n }),
+      /* @__PURE__ */ m("div", { ref: p, className: r, children: i }),
       a
     ] });
     return /* @__PURE__ */ m(
       "div",
       {
-        ref: h,
-        className: i(
+        ref: N,
+        className: n(
           // base: mobile stack (column-reverse), desktop row
           "flex w-full flex-col-reverse gap-6 lg:items-start",
           !l && "lg:flex-row",
@@ -86,21 +86,21 @@ const k = b.forwardRef(
           l && [
             "relative mx-auto min-w-0 lg:flex-row",
             "max-w-[calc(80rem+420px+1.5rem)] xl:max-w-[calc(80rem+460px+1.5rem)]",
-            "min-[1800px]:block min-[1800px]:max-w-none"
+            "min-[1520px]:block min-[1520px]:max-w-none"
           ],
           v
         ),
         ...d,
-        children: l ? /* @__PURE__ */ m("div", { className: y, children: N }) : /* @__PURE__ */ o(c, { children: [
+        children: l ? /* @__PURE__ */ m("div", { className: h, children: y }) : /* @__PURE__ */ o(c, { children: [
           x === "left" && a,
-          /* @__PURE__ */ m("div", { ref: p, className: t, children: n }),
+          /* @__PURE__ */ m("div", { ref: p, className: r, children: i }),
           x === "right" && a
         ] })
       }
     );
   }
 );
-k.displayName = "MainAsideLayout";
+T.displayName = "MainAsideLayout";
 export {
-  k as MainAsideLayout
+  T as MainAsideLayout
 };