@gearbox-protocol/permissionless-ui 1.17.9 → 1.19.0

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

@@ -1,4 +1,4 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import S from "react";
 import { cn as f } from "../../../utils/cn.js";
 const C = {
@@ -76,7 +76,7 @@ const C = {
   12: "xl:col-span-12",
   full: "xl:col-span-full",
   auto: "xl:col-auto"
-}, s = (l, o) => l ? o === "sm" ? g[l] || "" : o === "md" ? _[l] || "" : o === "lg" ? x[l] || "" : o === "xl" ? L[l] || "" : C[l] || "" : "", A = {
+}, s = (l, o) => !l || l === 1 && !o ? "" : o === "sm" ? g[l] || "" : o === "md" ? _[l] || "" : o === "lg" ? x[l] || "" : o === "xl" ? L[l] || "" : C[l] || "", A = {
   1: "col-start-1",
   2: "col-start-2",
   3: "col-start-3",
@@ -108,10 +108,10 @@ const C = {
   last: "order-last",
   none: "order-none"
 }, E = (l) => l && A[l] || "", O = (l) => l && i[l] || "", N = S.forwardRef(
-  ({ span: l = 12, sm: o, md: c, lg: a, xl: n, start: r, order: t, className: p, children: m, ...d }, e) => /* @__PURE__ */ u(
+  ({ span: l = 1, sm: o, md: c, lg: a, xl: n, start: r, order: t, className: p, children: m, ...d }, u) => /* @__PURE__ */ e(
     "div",
     {
-      ref: e,
+      ref: u,
       className: f(
         s(l),
         s(o, "sm"),

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

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useEffect as d } from "react";
-import p from "react-markdown";
-import f from "remark-gfm";
+import { jsx as o } from "react/jsx-runtime";
+import { useEffect as f } from "react";
+import x from "react-markdown";
+import g from "remark-gfm";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
@@ -13,165 +13,168 @@ import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
 import "../base-link/base-link.js";
-import { PageLayout as x } from "../layout/page-layout/page-layout.js";
-function g(e) {
+import { PageLayout as b } from "../layout/page-layout/page-layout.js";
+function y(e) {
   return e.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
 }
-function m(e) {
-  return typeof e == "string" ? e : typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(m).join("") : e && typeof e == "object" && "props" in e && typeof e.props == "object" && e.props !== null && "children" in e.props ? m(
+function u(e) {
+  return typeof e == "string" ? e : typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(u).join("") : e && typeof e == "object" && "props" in e && typeof e.props == "object" && e.props !== null && "children" in e.props ? u(
     e.props.children
   ) : "";
 }
-function a(e) {
-  const i = m(e), l = i.match(/\{#([a-z0-9-]+)\}\s*$/i);
+function c(e) {
+  const i = u(e), l = i.match(/\{#([a-z0-9-]+)\}\s*$/i);
   if (l) {
-    const t = l[1];
+    const a = l[1];
     if (typeof e == "string") {
-      const o = i.replace(/\s*\{#[a-z0-9-]+\}\s*$/i, "").trim();
-      return { id: t, displayText: o };
+      const m = i.replace(/\s*\{#[a-z0-9-]+\}\s*$/i, "").trim();
+      return { id: a, displayText: m };
     }
-    return { id: t, displayText: e };
+    return { id: a, displayText: e };
   }
-  return { id: g(i), displayText: e };
+  return { id: y(i), displayText: e };
 }
-function q({
+function B({
   content: e,
   title: i,
-  backButton: l
+  backButton: l,
+  bare: a = !1
 }) {
-  return d(() => {
+  f(() => {
     const t = window.location.hash;
     t && setTimeout(() => {
-      const o = document.getElementById(t.slice(1));
-      o && o.scrollIntoView({ behavior: "smooth", block: "start" });
+      const r = document.getElementById(t.slice(1));
+      r && r.scrollIntoView({ behavior: "smooth", block: "start" });
     }, 100);
-  }, []), /* @__PURE__ */ r(x, { title: i || "", backButton: l, children: /* @__PURE__ */ r("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ r(
-    p,
+  }, []);
+  const m = /* @__PURE__ */ o("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ o(
+    x,
     {
-      remarkPlugins: [f],
+      remarkPlugins: [g],
       components: {
-        h1: ({ children: t, ...o }) => {
-          const { id: s, displayText: n } = a(t);
-          return /* @__PURE__ */ r(
+        h1: ({ children: t, ...r }) => {
+          const { id: n, displayText: s } = c(t);
+          return /* @__PURE__ */ o(
             "h1",
             {
-              id: s,
+              id: n,
               className: "text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-24",
-              ...o,
-              children: n
+              ...r,
+              children: s
             }
           );
         },
-        h2: ({ children: t, ...o }) => {
-          const { id: s, displayText: n } = a(t);
-          return /* @__PURE__ */ r(
+        h2: ({ children: t, ...r }) => {
+          const { id: n, displayText: s } = c(t);
+          return /* @__PURE__ */ o(
             "h2",
             {
-              id: s,
+              id: n,
               className: "text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-24",
-              ...o,
-              children: n
+              ...r,
+              children: s
             }
           );
         },
-        h3: ({ children: t, ...o }) => {
-          const { id: s, displayText: n } = a(t);
-          return /* @__PURE__ */ r(
+        h3: ({ children: t, ...r }) => {
+          const { id: n, displayText: s } = c(t);
+          return /* @__PURE__ */ o(
             "h3",
             {
-              id: s,
+              id: n,
               className: "text-xl font-semibold text-foreground mt-5 mb-2 scroll-mt-24",
-              ...o,
-              children: n
+              ...r,
+              children: s
             }
           );
         },
-        h4: ({ children: t, ...o }) => {
-          const { id: s, displayText: n } = a(t);
-          return /* @__PURE__ */ r(
+        h4: ({ children: t, ...r }) => {
+          const { id: n, displayText: s } = c(t);
+          return /* @__PURE__ */ o(
             "h4",
             {
-              id: s,
+              id: n,
               className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
-              ...o,
-              children: n
+              ...r,
+              children: s
             }
           );
         },
-        p: ({ ...t }) => /* @__PURE__ */ r(
+        p: ({ ...t }) => /* @__PURE__ */ o(
           "p",
           {
             className: "text-muted-foreground mb-4 leading-relaxed",
             ...t
           }
         ),
-        a: ({ href: t, ...o }) => t?.startsWith("#") && t ? /* @__PURE__ */ r(
+        a: ({ href: t, ...r }) => t?.startsWith("#") && t ? /* @__PURE__ */ o(
           "a",
           {
             href: t,
             className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
-            onClick: (n) => {
-              n.preventDefault();
-              const u = t.slice(1), c = document.getElementById(u);
-              c && (c.scrollIntoView({
+            onClick: (s) => {
+              s.preventDefault();
+              const p = t.slice(1), d = document.getElementById(p);
+              d && (d.scrollIntoView({
                 behavior: "smooth",
                 block: "start"
               }), window.history.pushState(null, "", t));
             },
-            ...o
+            ...r
           }
-        ) : /* @__PURE__ */ r(
+        ) : /* @__PURE__ */ o(
           "a",
           {
             href: t,
             className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
             target: "_blank",
             rel: "noopener noreferrer",
-            ...o
+            ...r
           }
         ),
-        ul: ({ ...t }) => /* @__PURE__ */ r(
+        ul: ({ ...t }) => /* @__PURE__ */ o(
           "ul",
           {
             className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
             ...t
           }
         ),
-        ol: ({ ...t }) => /* @__PURE__ */ r(
+        ol: ({ ...t }) => /* @__PURE__ */ o(
           "ol",
           {
             className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
             ...t
           }
         ),
-        li: ({ ...t }) => /* @__PURE__ */ r("li", { className: "ml-4 text-muted-foreground", ...t }),
-        blockquote: ({ ...t }) => /* @__PURE__ */ r(
+        li: ({ ...t }) => /* @__PURE__ */ o("li", { className: "ml-4 text-muted-foreground", ...t }),
+        blockquote: ({ ...t }) => /* @__PURE__ */ o(
           "blockquote",
           {
             className: "border-l-4 border-gray-700 pl-4 my-4 italic text-muted-foreground",
             ...t
           }
         ),
-        code: ({ className: t, ...o }) => !t?.includes("language-") ? /* @__PURE__ */ r(
+        code: ({ className: t, ...r }) => !t?.includes("language-") ? /* @__PURE__ */ o(
           "code",
           {
             className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
-            ...o
+            ...r
           }
-        ) : /* @__PURE__ */ r(
+        ) : /* @__PURE__ */ o(
           "code",
           {
             className: "block bg-gray-800 text-gray-200 p-4 rounded-lg my-4 font-mono text-sm overflow-x-auto",
-            ...o
+            ...r
           }
         ),
-        strong: ({ ...t }) => /* @__PURE__ */ r("strong", { className: "font-bold text-foreground", ...t }),
-        em: ({ ...t }) => /* @__PURE__ */ r("em", { className: "italic text-foreground", ...t })
+        strong: ({ ...t }) => /* @__PURE__ */ o("strong", { className: "font-bold text-foreground", ...t }),
+        em: ({ ...t }) => /* @__PURE__ */ o("em", { className: "italic text-foreground", ...t })
       },
       children: e
     }
-  ) }) });
+  ) });
+  return a ? m : /* @__PURE__ */ o(b, { title: i || "", backButton: l, children: m });
 }
 export {
-  q as MarkdownViewer
+  B as MarkdownViewer
 };

package/dist/esm/components/navbar-logo/index.js

@@ -0,0 +1,4 @@
+import { NavBarLogo as a } from "./navbar-logo.js";
+export {
+  a as NavBarLogo
+};

package/dist/esm/components/navbar-logo/navbar-logo.js

@@ -0,0 +1,30 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function s({
+  size: o,
+  className: t,
+  style: i,
+  ...r
+}) {
+  const n = o ? { width: o, height: o } : {};
+  return (
+    // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
+    /* @__PURE__ */ a(
+      "img",
+      {
+        alt: "Logo",
+        className: m("object-contain", t),
+        style: { ...n, ...i },
+        loading: "lazy",
+        decoding: "async",
+        ...r
+      }
+    )
+  );
+}
+export {
+  s as NavBarLogo
+};

package/dist/esm/components/network-icon/index.js

@@ -0,0 +1,4 @@
+import { NetworkIcon as e } from "./network-icon.js";
+export {
+  e as NetworkIcon
+};

package/dist/esm/components/network-icon/network-icon.js

@@ -0,0 +1,48 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useState as i, useRef as L, useEffect as p } from "react";
+import { cn as w } from "../../utils/cn.js";
+const l = "https://static.gearbox.finance", o = `${l}/chains/allnetworks.svg`, d = /* @__PURE__ */ new Set();
+function f(t) {
+  if (!t) return o;
+  const r = t.toLowerCase(), e = `${l}/chains/${r}.svg`;
+  return d.has(e) ? o : e;
+}
+function N({
+  network: t,
+  size: r = 20,
+  className: e
+}) {
+  const u = f(t), [s, c] = i(u), [h, a] = i(!1), n = L(!1);
+  p(() => {
+    const S = f(t);
+    c(S), a(!1), n.current = !1;
+  }, [t]);
+  const g = () => {
+    n.current || (n.current = !0, d.add(s), c(o));
+  }, m = () => {
+    a(!0);
+  };
+  return (
+    // biome-ignore lint/performance/noImgElement: Simple img for CDN icons with browser caching
+    /* @__PURE__ */ E(
+      "img",
+      {
+        src: s,
+        alt: "",
+        width: r,
+        height: r,
+        className: w(
+          "object-contain shrink-0",
+          !h && "bg-gray-200 dark:bg-gray-700 rounded-full",
+          e
+        ),
+        style: { width: r, height: r },
+        onError: g,
+        onLoad: m
+      }
+    )
+  );
+}
+export {
+  N as NetworkIcon
+};

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

@@ -0,0 +1,5 @@
+import { Overflow as e, OverflowWrap as f } from "./overflow.js";
+export {
+  e as Overflow,
+  f as OverflowWrap
+};

package/dist/esm/components/overflow/overflow.js

@@ -0,0 +1,20 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function c({ children: r, className: o, ...e }) {
+  return /* @__PURE__ */ i("div", { className: t("overflow-hidden", o), ...e, children: r });
+}
+function d({
+  children: r,
+  className: o,
+  size: e,
+  ...m
+}) {
+  return /* @__PURE__ */ i("div", { className: t("break-words", o), ...m, children: r });
+}
+export {
+  c as Overflow,
+  d as OverflowWrap
+};

package/dist/esm/components/overflow-container/index.js

@@ -0,0 +1,4 @@
+import { OverflowContainer as e } from "./overflow-container.js";
+export {
+  e as OverflowContainer
+};

package/dist/esm/components/overflow-container/overflow-container.js

@@ -0,0 +1,38 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+const i = {
+  default: "rounded-lg",
+  small: "rounded-md"
+}, f = {
+  default: "border border-border",
+  light: "border border-border/50",
+  none: ""
+};
+function v({
+  children: o,
+  maxHeight: e,
+  minHeight: l = e,
+  size: t = "default",
+  borderColor: s = "default",
+  innerPadding: d = "0 22px 0 16px",
+  className: n
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: a(
+        "overflow-hidden",
+        i[t],
+        f[s],
+        n
+      ),
+      children: /* @__PURE__ */ r("div", { className: "overflow-auto", style: { maxHeight: e, minHeight: l }, children: d !== null ? /* @__PURE__ */ r("div", { style: { padding: d }, children: o }) : o })
+    }
+  );
+}
+export {
+  v as OverflowContainer
+};

package/dist/esm/components/page-title/page-title.js

@@ -1,10 +1,10 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { cva as m } from "class-variance-authority";
+import { cva as d } from "class-variance-authority";
 import * as u from "react";
-import { cn as a } from "../../utils/cn.js";
+import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const h = m(
+const v = d(
   "font-semibold leading-tight tracking-tight flex items-center gap-2",
   {
     variants: {
@@ -26,7 +26,7 @@ const h = m(
       variant: "default"
     }
   }
-), v = m(
+), N = d(
   "flex flex-col md:flex-row items-start md:items-center",
   {
     variants: {
@@ -40,42 +40,55 @@ const h = m(
       spacing: "default"
     }
   }
-), N = u.forwardRef(
+), w = u.forwardRef(
   ({
-    className: d,
-    size: n,
-    variant: x,
+    className: n,
+    size: x,
+    variant: f,
     spacing: c,
-    backButton: l,
-    icon: r,
-    actions: i,
+    backButton: i,
+    icon: m,
+    actions: a,
     subtitle: s,
-    as: f = "h1",
-    children: o,
-    ...g
-  }, p) => /* @__PURE__ */ t("div", { ref: p, className: a("w-full", d), ...g, children: [
-    l && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center mb-4", children: l }),
-    /* @__PURE__ */ e("div", { className: a(v({ spacing: c })), children: /* @__PURE__ */ e("div", { className: "flex-1 flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3 min-w-0", children: [
-      r && /* @__PURE__ */ e("div", { className: "shrink-0", children: r }),
-      /* @__PURE__ */ t("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e(
-            f,
-            {
-              className: a(h({ size: n, variant: x }), "m-0"),
-              children: o
-            }
-          ),
-          i && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: i })
-        ] }),
-        s && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground mt-1", children: s })
-      ] })
-    ] }) }) })
+    as: g = "h1",
+    children: p,
+    actionsPosition: l = "left",
+    ...o
+  }, h) => /* @__PURE__ */ t("div", { ref: h, className: r("w-full", n), ...o, children: [
+    i && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center mb-4", children: i }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: r(
+          N({ spacing: c }),
+          l === "right" && "justify-between w-full"
+        ),
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3 min-w-0", children: [
+            m && /* @__PURE__ */ e("div", { className: "shrink-0", children: m }),
+            /* @__PURE__ */ t("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(
+                  g,
+                  {
+                    className: r(v({ size: x, variant: f }), "m-0"),
+                    children: p
+                  }
+                ),
+                a && l === "left" && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: a })
+              ] }),
+              s && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground mt-1", children: s })
+            ] })
+          ] }) }),
+          a && l === "right" && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: a })
+        ]
+      }
+    )
   ] })
 );
-N.displayName = "PageTitle";
+w.displayName = "PageTitle";
 export {
-  N as PageTitle,
-  v as pageTitleRootVariants,
-  h as pageTitleVariants
+  w as PageTitle,
+  N as pageTitleRootVariants,
+  v as pageTitleVariants
 };

package/dist/esm/components/pool-apy-tooltip/index.js

@@ -0,0 +1,4 @@
+import { PoolAPYTooltip as p } from "./pool-apy-tooltip.js";
+export {
+  p as PoolAPYTooltip
+};

package/dist/esm/components/pool-apy-tooltip/pool-apy-tooltip.js

@@ -0,0 +1,83 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { TooltipProvider as f, Tooltip as v, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
+function w({
+  children: o,
+  totalAPY: s,
+  extraAPYTotal: i,
+  loading7DAgo: c,
+  loading: h,
+  baseAPY: d,
+  extraAPY: a,
+  apy7DAgo: l,
+  tokensList: p,
+  className: u
+}) {
+  if (!(s !== void 0 || d?.length || a?.length) || h)
+    return /* @__PURE__ */ t("span", { className: u, children: o });
+  const m = typeof l == "object" ? l?.value : l;
+  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ n(v, { children: [
+    /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t("span", { className: u, children: o }) }),
+    /* @__PURE__ */ t(g, { className: "max-w-xs", children: /* @__PURE__ */ n("div", { className: "space-y-2 text-sm", children: [
+      d && d.length > 0 && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Base APY" }),
+        d.map((e, r) => /* @__PURE__ */ n(
+          "div",
+          {
+            className: "flex justify-between gap-4",
+            children: [
+              /* @__PURE__ */ t("span", { children: e.type === "supplyAPY" ? "Supply" : e.type || "Base" }),
+              /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
+                e.apy.toFixed(2),
+                "%"
+              ] })
+            ]
+          },
+          `base-${e.type || r}-${e.apy}`
+        ))
+      ] }),
+      a && a.length > 0 && /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Rewards" }),
+        a.map((e, r) => {
+          const x = e.token && p ? p[e.token]?.symbol : e.token;
+          return /* @__PURE__ */ n(
+            "div",
+            {
+              className: "flex justify-between gap-4",
+              children: [
+                /* @__PURE__ */ t("span", { children: x || e.type || "Reward" }),
+                /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
+                  e.apy.toFixed(2),
+                  "%"
+                ] })
+              ]
+            },
+            `extra-${e.token || r}-${e.apy}`
+          );
+        }),
+        i !== void 0 && /* @__PURE__ */ n("div", { className: "flex justify-between gap-4 text-muted-foreground", children: [
+          /* @__PURE__ */ t("span", { children: "Total Extra" }),
+          /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
+            i.toFixed(2),
+            "%"
+          ] })
+        ] })
+      ] }),
+      s !== void 0 && /* @__PURE__ */ n("div", { className: "border-t pt-2 flex justify-between gap-4 font-medium", children: [
+        /* @__PURE__ */ t("span", { children: "Total APY" }),
+        /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
+          s.toFixed(2),
+          "%"
+        ] })
+      ] }),
+      m !== void 0 && !c && /* @__PURE__ */ n("div", { className: "text-xs text-muted-foreground", children: [
+        "7d ago: ",
+        m.toFixed(2),
+        "%"
+      ] }),
+      c && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground", children: "Loading 7d data..." })
+    ] }) })
+  ] }) });
+}
+export {
+  w as PoolAPYTooltip
+};

package/dist/esm/components/pool-indicator-icon/index.js

@@ -0,0 +1,4 @@
+import { PoolIndicatorIcon as c } from "./pool-indicator-icon.js";
+export {
+  c as PoolIndicatorIcon
+};