@gearbox-protocol/ui-kit 3.14.0-next.3 → 3.14.0-next.30

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,36 @@
-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 { AppFooter as e, DEFAULT_APP_FOOTER_LINKS as t } from "./app-footer/app-footer.js";
+import { AppHeader as m } from "./app-header/app-header.js";
+import { AppLogo as f, AppLogoLink as a } from "./app-logo/app-logo.js";
+import { Block as L } from "./block/block.js";
+import { Col as A } from "./col/col.js";
+import { Container as l } from "./container/container.js";
+import { Footer as u, FooterLink as d, FooterLinkSection as g, GearboxFooter as k } from "./footer/footer.js";
+import { Grid as y } from "./grid/grid.js";
+import { Header as P, useMobileMenu as S } from "./header/header.js";
+import { Layout as b } from "./layout/layout.js";
+import { LegalDisclaimer as D } 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 { PageLayout as I } from "./page-layout/page-layout.js";
+import { SocialIcons as T } from "./social-icons/social-icons.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,
+  e as AppFooter,
+  m as AppHeader,
+  f as AppLogo,
+  a as AppLogoLink,
+  L as Block,
+  A as Col,
+  l as Container,
+  t as DEFAULT_APP_FOOTER_LINKS,
+  u as Footer,
+  d as FooterLink,
+  g as FooterLinkSection,
+  k as GearboxFooter,
+  y as Grid,
+  P as Header,
+  b as Layout,
+  D as LegalDisclaimer,
   G as MainAsideLayout,
-  B as PageLayout,
-  H as SocialIcons,
-  d as useMobileMenu
+  I as PageLayout,
+  T as SocialIcons,
+  S as useMobileMenu
 };

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

@@ -1,83 +1,106 @@
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import * as g from "react";
-import { cn as x } from "../../../utils/cn.js";
-const u = g.forwardRef(
+import { jsx as m, jsxs as o, Fragment as c } from "react/jsx-runtime";
+import * as E from "react";
+import { cn as n } from "../../../utils/cn.js";
+const _ = "56rem", I = "20rem", M = "1032px", T = E.forwardRef(
   ({
-    children: r,
-    aside: m,
-    asidePosition: e = "right",
-    asideClassName: n,
-    mainClassName: p,
-    mainRef: t,
-    variant: o = "default",
-    className: s,
-    ...w
-  }, f) => {
-    const l = o === "detail", a = m == null ? null : /* @__PURE__ */ i(
+    children: i,
+    aside: s,
+    asidePosition: x = "right",
+    asideClassName: w,
+    mainClassName: f,
+    mainRef: p,
+    variant: g = "default",
+    centeredMain: u = !1,
+    className: v,
+    ...d
+  }, N) => {
+    const e = g === "detail", t = x === "left", l = e && u, a = s == null ? null : /* @__PURE__ */ m(
       "aside",
       {
-        className: x(
+        className: n(
           "min-w-0 shrink-0",
-          l && [
+          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 min-[2450px]:right-32"
+            "min-[2450px]:fixed min-[2450px]:top-28",
+            // fixed anchor matches asidePosition
+            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",
+            // 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"
           ],
-          n
+          w
         ),
-        children: m
+        children: s
       }
-    );
-    return /* @__PURE__ */ c(
+    ), h = n(
+      // 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(${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))]",
+        t && "min-[2450px]:ml-[calc(460px+8rem)]"
+      ],
+      l && "flex-1 lg:max-w-none",
+      f
+    ), y = x === "left" ? /* @__PURE__ */ o(c, { children: [
+      a,
+      /* @__PURE__ */ m("div", { ref: p, className: r, children: i })
+    ] }) : /* @__PURE__ */ o(c, { children: [
+      /* @__PURE__ */ m("div", { ref: p, className: r, children: i }),
+      a
+    ] });
+    return /* @__PURE__ */ m(
       "div",
       {
-        ref: f,
-        className: x(
+        ref: N,
+        className: n(
           // base: mobile stack (column-reverse), desktop row
-          "flex w-full flex-col-reverse gap-6 lg:flex-row lg:items-start",
-          l && [
+          "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"
           ],
-          s
+          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"
+          ],
+          v
         ),
-        ...w,
-        children: [
-          e === "left" && a,
-          /* @__PURE__ */ i(
-            "div",
-            {
-              ref: t,
-              className: x(
-                "min-w-0 flex-1",
-                l && [
-                  "relative z-0 w-full",
-                  // at ≥2450px: stop growing and centre with explicit max-width
-                  // (leaves room for the fixed 460px aside + 8rem right offset)
-                  "min-[2450px]:mx-auto min-[2450px]:flex-none",
-                  "min-[2450px]:max-w-[min(80rem,calc(100vw-460px-8rem))]"
-                ],
-                p
-              ),
-              children: r
-            }
-          ),
-          e === "right" && a
-        ]
+        ...d,
+        children: l ? /* @__PURE__ */ m("div", { className: h, children: y }) : /* @__PURE__ */ o(c, { children: [
+          x === "left" && a,
+          /* @__PURE__ */ m("div", { ref: p, className: r, children: i }),
+          x === "right" && a
+        ] })
       }
     );
   }
 );
-u.displayName = "MainAsideLayout";
+T.displayName = "MainAsideLayout";
 export {
-  u as MainAsideLayout
+  T 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
+};