@gearbox-protocol/ui-kit 3.14.0-next.26 → 3.14.0-next.28

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,98 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import * as N from "react";
+import { AppBar as w, AppBarSidePanel as i, AppBarCenter as L, AppBarCenterContent as k } 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 v } from "../../../utils/cn.js";
+import { getStatic as e } from "../../../utils/static.js";
+function A({ 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 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/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 $ = N.forwardRef(
+  ({
+    homeHref: r = "/",
+    desktopLogo: s,
+    mobileLogo: m,
+    mobileMenu: t,
+    tabs: c,
+    actions: p,
+    wallet: g,
+    leftTestId: h,
+    centerTestId: d,
+    rightTestId: x,
+    className: f,
+    ..._
+  }, u) => /* @__PURE__ */ n(
+    w,
+    {
+      ref: u,
+      className: v("!h-14 md:px-4 lg:px-10", f),
+      ..._,
+      children: [
+        /* @__PURE__ */ n(i, { "data-testid": h, children: [
+          t && /* @__PURE__ */ o("div", { className: "block lg:hidden", children: t }),
+          /* @__PURE__ */ o("div", { className: "hidden lg:block", children: s ?? /* @__PURE__ */ o(A, { href: r }) }),
+          /* @__PURE__ */ o("div", { className: "block lg:hidden", children: m ?? /* @__PURE__ */ o(B, { href: r }) })
+        ] }),
+        /* @__PURE__ */ o(L, { "data-testid": d, className: "md:px-0 lg:px-3", children: /* @__PURE__ */ o(k, { className: "md:hidden lg:block", children: c }) }),
+        /* @__PURE__ */ n(i, { "data-testid": x, className: "ml-auto", children: [
+          p,
+          g
+        ] })
+      ]
+    }
+  )
+);
+$.displayName = "AppHeader";
+export {
+  $ 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/loader-guard/loader-guard.js

@@ -1,5 +1,7 @@
 import { jsx as m, jsxs as o } from "react/jsx-runtime";
 import { Guard as p } from "../guard/guard.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../base-link/base-link.js";
 import "react";
 import "@gearbox-protocol/sdk";
@@ -20,12 +22,12 @@ import "../buttons/back-button/back-button.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import { Skeleton as r } from "../skeleton/skeleton.js";
-function B({
+function E({
   showGuard: s,
   children: i,
-  loader: a
+  loader: t
 }) {
-  const t = /* @__PURE__ */ m(e, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
+  const a = /* @__PURE__ */ m(e, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
     /* @__PURE__ */ m(r, { className: "h-6 sm:h-8 w-48 sm:w-64" }),
     /* @__PURE__ */ o("div", { className: "space-y-2 mb-4", children: [
       /* @__PURE__ */ m(r, { className: "h-3 sm:h-4 w-full" }),
@@ -37,8 +39,8 @@ function B({
       /* @__PURE__ */ m(r, { className: "h-48 sm:h-64 md:h-72 md:w-1/3 w-full" })
     ] })
   ] }) }), l = s;
-  return /* @__PURE__ */ m(p, { showGuard: l, guard: l && (a || t), children: i });
+  return /* @__PURE__ */ m(p, { showGuard: l, guard: l && (t || a), children: i });
 }
 export {
-  B as LoaderGuard
+  E as LoaderGuard
 };

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -2,6 +2,8 @@ import { jsx as r } from "react/jsx-runtime";
 import { useEffect as y } from "react";
 import h from "react-markdown";
 import k from "remark-gfm";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../base-link/base-link.js";
 import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
@@ -182,7 +184,7 @@ function a(o) {
   }
   return { id: T(l), displayText: o };
 }
-function Ar({
+function zr({
   content: o,
   title: l,
   backButton: s,
@@ -394,5 +396,5 @@ function Ar({
   return c ? d : /* @__PURE__ */ r(w, { title: l || "", backButton: s, children: d });
 }
 export {
-  Ar as MarkdownViewer
+  zr as MarkdownViewer
 };

package/dist/esm/components/time-to-liquidation/time-to-liquidation.js

@@ -114,6 +114,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";

package/dist/esm/components/tokens-list-cell/tokens-list-cell.js

@@ -113,6 +113,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -161,7 +163,7 @@ import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
 import "../toggle/toggle.js";
 import "../with-filter-button/with-filter-button.js";
-function qr({
+function Br({
   balances: a,
   tokensList: l,
   maxAssets: p = 3,
@@ -224,5 +226,5 @@ function qr({
   ] });
 }
 export {
-  qr as TokensListCell
+  Br as TokensListCell
 };

package/dist/esm/components/with-copy/with-copy.js

@@ -113,6 +113,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -161,7 +163,7 @@ import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
 import "../toggle/toggle.js";
 import "../with-filter-button/with-filter-button.js";
-function Dr({
+function Kr({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -243,5 +245,5 @@ function Dr({
   return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
 }
 export {
-  Dr as WithCopy
+  Kr as WithCopy
 };