@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.2

package/dist/esm/components/layout/app-footer/app-footer.js

@@ -0,0 +1,54 @@
+import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
+import * as d from "react";
+import { BlockSyncPill as x } from "../../block-sync-pill/block-sync-pill.js";
+import { cn as h } from "../../../utils/cn.js";
+const u = [
+  { label: "Docs", href: "https://docs.gearbox.finance" },
+  { label: "Support", href: "https://discord.com/invite/gearbox" },
+  { label: "Terms", href: "https://gearbox.finance/terms" },
+  { label: "Privacy Policy", href: "https://gearbox.finance/privacy" }
+], g = d.forwardRef(
+  ({
+    links: o = u,
+    copyright: s,
+    year: l = (/* @__PURE__ */ new Date()).getFullYear(),
+    showStatus: c = !0,
+    statusLabel: m = "Status",
+    blockSyncProps: t,
+    className: n,
+    ...i
+  }, p) => /* @__PURE__ */ e(
+    "footer",
+    {
+      ref: p,
+      className: h(
+        "border-t border-border/60 px-4 sm:px-6 lg:px-8",
+        n
+      ),
+      ...i,
+      children: /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
+        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ a(f, { children: [
+          "© Gearbox Protocol, ",
+          l
+        ] }) }),
+        c && t ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: /* @__PURE__ */ e(x, { ...t, statusLabel: m }) }) : null,
+        /* @__PURE__ */ e("nav", { className: "order-3 flex w-full flex-wrap items-center justify-center gap-4 sm:order-2 sm:ml-auto sm:w-auto sm:justify-start", children: o.map((r) => /* @__PURE__ */ e(
+          "a",
+          {
+            href: r.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "transition-colors hover:text-foreground",
+            children: r.label
+          },
+          r.label
+        )) })
+      ] })
+    }
+  )
+);
+g.displayName = "AppFooter";
+export {
+  g as AppFooter,
+  u as DEFAULT_APP_FOOTER_LINKS
+};

package/dist/esm/components/layout/app-footer/index.js

@@ -0,0 +1,5 @@
+import { AppFooter as r, DEFAULT_APP_FOOTER_LINKS as A } from "./app-footer.js";
+export {
+  r as AppFooter,
+  A as DEFAULT_APP_FOOTER_LINKS
+};

package/dist/esm/components/layout/app-header/app-header.js

@@ -0,0 +1,100 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import * as w from "react";
+import { AppBar as L, AppBarSidePanel as i, AppBarCenter as k, AppBarCenterContent as v } from "../../app-bar/app-bar.js";
+import { BaseLink as a } from "../../base-link/base-link.js";
+import { NavBarLogo as l } from "../../navbar-logo/navbar-logo.js";
+import { cn as A } from "../../../utils/cn.js";
+import { getStatic as e } from "../../../utils/static.js";
+function B({ href: r }) {
+  return /* @__PURE__ */ o(
+    a,
+    {
+      size: "unset",
+      variant: "unset",
+      color: "main",
+      href: r,
+      className: "inline-flex",
+      children: /* @__PURE__ */ o(
+        l,
+        {
+          src: e("/logo/logo_monochrome_white.png"),
+          srcSet: `${e(
+            "/logo/logo_monochrome_white.png"
+          )} 1x, ${e(
+            "/logo/logo_monochrome_white@2x.png"
+          )} 2x, ${e("/logo/logo_monochrome_white@2x.png")} 3x`,
+          alt: "Logo",
+          style: { height: "32px" },
+          className: "w-auto cursor-pointer"
+        }
+      )
+    }
+  );
+}
+function $({ href: r }) {
+  return /* @__PURE__ */ o(
+    a,
+    {
+      size: "unset",
+      variant: "unset",
+      color: "main",
+      href: r,
+      className: "inline-flex",
+      children: /* @__PURE__ */ o(
+        l,
+        {
+          src: e("/logo/sign_monochrome_white.png"),
+          srcSet: `${e(
+            "/logo/sign_monochrome_white.png"
+          )} 1x, ${e(
+            "/logo/sign_monochrome_white@2x.png"
+          )} 2x, ${e("/logo/sign_monochrome_white@2x.png")} 3x`,
+          alt: "Logo",
+          style: { height: "34px", marginLeft: "4px", marginTop: "4px" },
+          className: "w-auto cursor-pointer"
+        }
+      )
+    }
+  );
+}
+const b = w.forwardRef(
+  ({
+    homeHref: r = "/",
+    desktopLogo: s,
+    mobileLogo: m,
+    mobileMenu: t,
+    tabs: c,
+    actions: p,
+    wallet: g,
+    extraMenu: h,
+    leftTestId: d,
+    centerTestId: x,
+    rightTestId: f,
+    className: _,
+    ...u
+  }, N) => /* @__PURE__ */ n(
+    L,
+    {
+      ref: N,
+      className: A("!h-14 md:px-4 lg:px-10", _),
+      ...u,
+      children: [
+        /* @__PURE__ */ n(i, { "data-testid": d, children: [
+          t && /* @__PURE__ */ o("div", { className: "block lg:hidden", children: t }),
+          /* @__PURE__ */ o("div", { className: "hidden lg:block", children: s ?? /* @__PURE__ */ o(B, { href: r }) }),
+          /* @__PURE__ */ o("div", { className: "block lg:hidden", children: m ?? /* @__PURE__ */ o($, { href: r }) })
+        ] }),
+        /* @__PURE__ */ o(k, { "data-testid": x, className: "md:px-0 lg:px-3", children: /* @__PURE__ */ o(v, { className: "md:hidden lg:block", children: c }) }),
+        /* @__PURE__ */ n(i, { "data-testid": f, className: "ml-auto", children: [
+          p,
+          g,
+          h
+        ] })
+      ]
+    }
+  )
+);
+b.displayName = "AppHeader";
+export {
+  b as AppHeader
+};

package/dist/esm/components/layout/app-header/index.js

@@ -0,0 +1,4 @@
+import { AppHeader as r } from "./app-header.js";
+export {
+  r as AppHeader
+};

package/dist/esm/components/layout/index.js

@@ -1,31 +1,17 @@
-import { AppLogo as e, AppLogoLink as t } from "./app-logo/app-logo.js";
-import { Block as m } from "./block/block.js";
-import { Col as f } from "./col/col.js";
-import { Container as a } from "./container/container.js";
-import { Footer as L, FooterLink as l, FooterLinkSection as c, GearboxFooter as u } from "./footer/footer.js";
-import { Grid as k } from "./grid/grid.js";
-import { Header as F, useMobileMenu as d } from "./header/header.js";
-import { Layout as A } from "./layout/layout.js";
-import { LegalDisclaimer as b } from "./legal-disclaimer/legal-disclaimer.js";
-import { MainAsideLayout as G } from "./main-aside-layout/main-aside-layout.js";
-import { PageLayout as B } from "./page-layout/page-layout.js";
-import { SocialIcons as H } from "./social-icons/social-icons.js";
+import { AppFooter as e, DEFAULT_APP_FOOTER_LINKS as p } from "./app-footer/app-footer.js";
+import { AppHeader as f } from "./app-header/app-header.js";
+import { Col as x } from "./col/col.js";
+import { Container as A } from "./container/container.js";
+import { Grid as L } from "./grid/grid.js";
+import { Layout as n } from "./layout/layout.js";
+import { MainAsideLayout as _ } from "./main-aside-layout/main-aside-layout.js";
 export {
-  e as AppLogo,
-  t as AppLogoLink,
-  m as Block,
-  f as Col,
-  a as Container,
-  L as Footer,
-  l as FooterLink,
-  c as FooterLinkSection,
-  u as GearboxFooter,
-  k as Grid,
-  F as Header,
-  A as Layout,
-  b as LegalDisclaimer,
-  G as MainAsideLayout,
-  B as PageLayout,
-  H as SocialIcons,
-  d as useMobileMenu
+  e as AppFooter,
+  f as AppHeader,
+  x as Col,
+  A as Container,
+  p as DEFAULT_APP_FOOTER_LINKS,
+  L as Grid,
+  n as Layout,
+  _ as MainAsideLayout
 };

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

@@ -1,87 +1,132 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import * as u from "react";
-import { cn as x } from "../../../utils/cn.js";
-const d = u.forwardRef(
+import { jsx as m, jsxs as c, Fragment as w } from "react/jsx-runtime";
+import * as y from "react";
+import { cn as i } from "../../../utils/cn.js";
+const I = "56rem", M = "20rem", T = "1032px", C = y.forwardRef(
   ({
-    children: n,
-    aside: e,
-    asidePosition: l = "right",
-    asideClassName: p,
-    mainClassName: t,
-    mainRef: o,
-    variant: f = "default",
-    className: c,
-    ...s
-  }, w) => {
-    const m = f === "detail", a = l === "left", i = e == null ? null : /* @__PURE__ */ r(
+    children: p,
+    aside: s,
+    asidePosition: x = "right",
+    asideClassName: f,
+    mainClassName: g,
+    mainRef: r,
+    variant: u = "default",
+    centeredMain: v = !1,
+    stickyAside: t = !0,
+    className: N,
+    ...d
+  }, h) => {
+    const e = u === "detail", n = x === "left", l = e && v, a = s == null ? null : /* @__PURE__ */ m(
       "aside",
       {
-        className: x(
+        className: i(
           "min-w-0 shrink-0",
-          m && [
+          e && !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]",
-            "max-h-full lg:max-h-[100vh] overflow-y-visible lg:overflow-y-auto",
-            // sticky below 2450px, fixed at ≥2450px
-            "lg:max-[2449px]:sticky lg:max-[2449px]:top-4",
-            "min-[2450px]:fixed min-[2450px]:top-28",
-            // fixed anchor matches asidePosition
-            a ? "min-[2450px]:left-32" : "min-[2450px]:right-32"
+            // ui-kit-owned sticky/scroll; skipped when the consumer manages
+            // stickiness itself (single page scroll, no nested scroll area).
+            t ? [
+              "max-h-full lg:max-h-[100vh] overflow-y-visible lg:overflow-y-auto",
+              // sticky below 2450px, fixed at ≥2450px
+              "lg:max-[2449px]:sticky lg:max-[2449px]:top-4",
+              "min-[2450px]:fixed min-[2450px]:top-28",
+              // fixed anchor matches asidePosition
+              n ? "min-[2450px]:left-32" : "min-[2450px]:right-32"
+            ] : (
+              // Consumer-managed sticky (single page scroll). The aside
+              // stays in normal flow at all widths so its own controller
+              // can pin it. At ≥2450px the main column is centred on the
+              // viewport and the (still in-flow) aside is pulled into the
+              // gutter via a negative margin (= aside 460px + gap 24px),
+              // keeping the form beside the centred content without `fixed`.
+              n ? "min-[2450px]:-ml-[484px]" : "min-[2450px]:-mr-[484px]"
+            )
           ],
-          p
+          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",
+            // 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",
+            n ? "min-[1520px]:right-full min-[1520px]:mr-6" : "min-[1520px]:left-full min-[1520px]:ml-6"
+          ],
+          f
         ),
-        children: e
+        children: s
       }
-    );
-    return /* @__PURE__ */ g(
+    ), E = i(
+      // lg…1519: children join the outer LP-style flex row
+      "lg:contents",
+      // ≥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(${M},min(${I},calc(100vw-${T})))]`
+    ), o = i(
+      "relative z-0 min-w-0 w-full",
+      !l && "flex-1",
+      e && !l && (t ? [
+        "relative z-0 w-full",
+        // ≥2450px: centred main beside the `fixed` aside.
+        "min-[2450px]:mx-auto min-[2450px]:flex-none",
+        "min-[2450px]:max-w-[min(80rem,calc(100vw-460px-8rem))]",
+        n && "min-[2450px]:ml-[calc(460px+8rem)]"
+      ] : [
+        "relative z-0 w-full",
+        // ≥2450px: fixed 80rem main, viewport-centred by the row's
+        // `justify-center`; the in-flow aside hangs into the gutter.
+        "min-[2450px]:flex-none min-[2450px]:w-[80rem] min-[2450px]:max-w-[80rem]"
+      ]),
+      l && "flex-1 lg:max-w-none",
+      g
+    ), _ = x === "left" ? /* @__PURE__ */ c(w, { children: [
+      a,
+      /* @__PURE__ */ m("div", { ref: r, className: o, children: p })
+    ] }) : /* @__PURE__ */ c(w, { children: [
+      /* @__PURE__ */ m("div", { ref: r, className: o, children: p }),
+      a
+    ] });
+    return /* @__PURE__ */ m(
       "div",
       {
-        ref: w,
-        className: x(
+        ref: h,
+        className: i(
           // base: mobile stack (column-reverse), desktop row
-          "flex w-full flex-col-reverse gap-6 lg:flex-row lg:items-start",
-          m && [
+          "flex w-full flex-col-reverse gap-6 lg:items-start",
+          !l && "lg:flex-row",
+          e && !l && [
             "relative mx-auto min-w-0",
-            // cap width so aside doesn't overflow on medium-wide screens
             "max-w-[calc(80rem+420px+1.5rem)]",
             "xl:max-w-[calc(80rem+460px+1.5rem)]",
-            // at ≥2450px aside is fixed → switch wrapper to block so main can
-            // centre independently
-            "min-[2450px]:block min-[2450px]:max-w-none min-[2450px]:gap-0"
+            t ? (
+              // ui-kit owns sticky: ≥2450px switches to block + fixed aside.
+              "min-[2450px]:block min-[2450px]:max-w-none min-[2450px]:gap-0"
+            ) : (
+              // Consumer owns sticky: stay a flex row and centre the main
+              // column on the viewport at ≥2450px (aside hangs in the gutter).
+              "min-[2450px]:max-w-none min-[2450px]:justify-center"
+            )
+          ],
+          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-[1520px]:block min-[1520px]:max-w-none"
           ],
-          c
+          N
         ),
-        ...s,
-        children: [
-          l === "left" && i,
-          /* @__PURE__ */ r(
-            "div",
-            {
-              ref: o,
-              className: x(
-                "min-w-0 flex-1",
-                m && [
-                  "relative z-0 w-full",
-                  // at ≥2450px: stop growing and centre with explicit max-width
-                  // (leaves room for the fixed 460px aside + 8rem inset offset)
-                  "min-[2450px]:mx-auto min-[2450px]:flex-none",
-                  "min-[2450px]:max-w-[min(80rem,calc(100vw-460px-8rem))]",
-                  // when aside is on the left, push main column off the fixed aside
-                  a && "min-[2450px]:ml-[calc(460px+8rem)]"
-                ],
-                t
-              ),
-              children: n
-            }
-          ),
-          l === "right" && i
-        ]
+        ...d,
+        children: l ? /* @__PURE__ */ m("div", { className: E, children: _ }) : /* @__PURE__ */ c(w, { children: [
+          x === "left" && a,
+          /* @__PURE__ */ m("div", { ref: r, className: o, children: p }),
+          x === "right" && a
+        ] })
       }
     );
   }
 );
-d.displayName = "MainAsideLayout";
+C.displayName = "MainAsideLayout";
 export {
-  d as MainAsideLayout
+  C as MainAsideLayout
 };

package/dist/esm/components/legal-agreement/index.js

@@ -1,9 +1,25 @@
-import { BlockedRegionDialog as r, LegalAgreementDialog as a, createGearboxAppConfig as g, createLegalAgreementConfig as i, createPermissionlessInterfaceConfig as n, createPermissionlessSafeConfig as s } from "./legal-agreement-dialog.js";
+import { LegalAgreementAwaitingPanel as n, LegalAgreementAwaitingPanelTest as t } from "./legal-agreement-awaiting-panel.js";
+import { BlockedRegionDialog as g, LegalAgreementDialog as r } from "./legal-agreement-dialog.js";
+import { LegalAgreementLink as o } from "./legal-agreement-link.js";
+import { LegalAgreementPanel as A, LegalAgreementPanelTest as s } from "./legal-agreement-panel.js";
+import { legalAgreementAwaitingDescriptionVariants as L, legalAgreementAwaitingRootVariants as P, legalAgreementAwaitingTitleVariants as x, legalAgreementLinkVariants as c, legalAgreementPanelCheckboxLabelVariants as k, legalAgreementPanelCheckboxListTitleVariants as f, legalAgreementPanelCheckboxListVariants as p, legalAgreementPanelCheckboxRowVariants as w, legalAgreementPanelNotificationVariants as b, legalAgreementPanelRootVariants as h, legalAgreementPanelV2BannerVariants as C } from "./legal-agreement-theme.js";
 export {
-  r as BlockedRegionDialog,
-  a as LegalAgreementDialog,
-  g as createGearboxAppConfig,
-  i as createLegalAgreementConfig,
-  n as createPermissionlessInterfaceConfig,
-  s as createPermissionlessSafeConfig
+  g as BlockedRegionDialog,
+  n as LegalAgreementAwaitingPanel,
+  t as LegalAgreementAwaitingPanelTest,
+  r as LegalAgreementDialog,
+  o as LegalAgreementLink,
+  A as LegalAgreementPanel,
+  s as LegalAgreementPanelTest,
+  L as legalAgreementAwaitingDescriptionVariants,
+  P as legalAgreementAwaitingRootVariants,
+  x as legalAgreementAwaitingTitleVariants,
+  c as legalAgreementLinkVariants,
+  k as legalAgreementPanelCheckboxLabelVariants,
+  f as legalAgreementPanelCheckboxListTitleVariants,
+  p as legalAgreementPanelCheckboxListVariants,
+  w as legalAgreementPanelCheckboxRowVariants,
+  b as legalAgreementPanelNotificationVariants,
+  h as legalAgreementPanelRootVariants,
+  C as legalAgreementPanelV2BannerVariants
 };

package/dist/esm/components/legal-agreement/legal-agreement-awaiting-panel.js

@@ -0,0 +1,29 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { IconPending as n } from "@gearbox-protocol/static";
+import { legalAgreementAwaitingRootVariants as r, legalAgreementAwaitingTitleVariants as s, legalAgreementAwaitingDescriptionVariants as l } from "./legal-agreement-theme.js";
+class g {
+  static root = "legal-agreement-awaiting-panel-root";
+}
+function A({
+  waitingForSignatureText: a = "Please sign the message in your wallet to agree to the Terms of Service.",
+  theme: e = "default"
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: r({ theme: e }),
+      "data-testid": g.root,
+      children: [
+        /* @__PURE__ */ t("div", { className: s({ theme: e }), children: [
+          /* @__PURE__ */ i(n, { size: 20, className: "animate-spin" }),
+          "Waiting for Signature"
+        ] }),
+        /* @__PURE__ */ i("p", { className: l({ theme: e }), children: a })
+      ]
+    }
+  );
+}
+export {
+  A as LegalAgreementAwaitingPanel,
+  g as LegalAgreementAwaitingPanelTest
+};