@gearbox-protocol/permissionless-ui 1.22.0-next.2 → 1.22.0-next.21

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

@@ -1,11 +1,12 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Image as r } from "../../image/image.js";
 import { cn as o } from "../../../utils/cn.js";
-function d({
-  appName: a,
+import { getStatic as l } from "../../../utils/static.js";
+function p({
+  appName: m,
   size: t = "default"
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ a(
     "div",
     {
       className: o(
@@ -16,7 +17,7 @@ function d({
         /* @__PURE__ */ e(
           r,
           {
-            src: "https://static.gearbox.fi/logo/logo_monochrome_white@2x.png",
+            src: l("/logo/logo_monochrome_white@2x.png"),
             alt: "Gearbox Protocol",
             width: t === "default" ? 120 : 100,
             height: t === "default" ? 24 : 20,
@@ -27,11 +28,11 @@ function d({
             )
           }
         ),
-        /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: a })
+        /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: m })
       ]
     }
   );
 }
 export {
-  d as AppLogo
+  p as AppLogo
 };

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

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import S from "react";
+import * as S from "react";
 import { cn as f } from "../../../utils/cn.js";
 const C = {
   1: "col-span-1",
@@ -31,7 +31,7 @@ const C = {
   12: "sm:col-span-12",
   full: "sm:col-span-full",
   auto: "sm:col-auto"
-}, _ = {
+}, x = {
   1: "md:col-span-1",
   2: "md:col-span-2",
   3: "md:col-span-3",
@@ -46,7 +46,7 @@ const C = {
   12: "md:col-span-12",
   full: "md:col-span-full",
   auto: "md:col-auto"
-}, x = {
+}, _ = {
   1: "lg:col-span-1",
   2: "lg:col-span-2",
   3: "lg:col-span-3",
@@ -76,7 +76,7 @@ const C = {
   12: "xl:col-span-12",
   full: "xl:col-span-full",
   auto: "xl:col-auto"
-}, 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 = {
+}, s = (l, o) => !l || l === 1 && !o ? "" : o === "sm" ? g[l] || "" : o === "md" ? x[l] || "" : o === "lg" ? _[l] || "" : o === "xl" ? L[l] || "" : C[l] || "", A = {
   1: "col-start-1",
   2: "col-start-2",
   3: "col-start-3",

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

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import n from "react";
+import * as n from "react";
 import { cn as o } from "../../../utils/cn.js";
 const c = {
   sm: "max-w-screen-sm",
@@ -14,12 +14,12 @@ const c = {
     padding: m = !0,
     center: r = !0,
     className: a,
-    children: l,
+    children: s,
     ...x
-  }, s) => /* @__PURE__ */ t(
+  }, l) => /* @__PURE__ */ t(
     "div",
     {
-      ref: s,
+      ref: l,
       className: o(
         "w-full",
         c[e],
@@ -28,7 +28,7 @@ const c = {
         a
       ),
       ...x,
-      children: l
+      children: s
     }
   )
 );

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

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t, Fragment as o } from "react/jsx-runtime";
-import m from "react";
+import * as m from "react";
 import { cn as d } from "../../../utils/cn.js";
 import { AppLogo as N } from "../app-logo/app-logo.js";
 import { LegalDisclaimer as v } from "../legal-disclaimer/legal-disclaimer.js";
@@ -90,7 +90,7 @@ function n({
     ] }, r.href)) })
   ] });
 }
-function L({
+function D({
   appName: l,
   legalAppName: s,
   legalReferences: r,
@@ -163,5 +163,5 @@ export {
   b as Footer,
   w as FooterLink,
   n as FooterLinkSection,
-  L as GearboxFooter
+  D as GearboxFooter
 };

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

@@ -1,7 +1,7 @@
 import { jsx as y } from "react/jsx-runtime";
-import _ from "react";
-import { cn as f } from "../../../utils/cn.js";
-const u = {
+import * as f from "react";
+import { cn as u } from "../../../utils/cn.js";
+const _ = {
   1: "grid-cols-1",
   2: "grid-cols-2",
   3: "grid-cols-3",
@@ -114,17 +114,17 @@ const u = {
   16: "gap-y-16",
   20: "gap-y-20",
   24: "gap-y-24"
-}, s = (g, r) => !g || typeof g == "string" ? "" : typeof g == "number" ? r === "sm" ? C[g] || "" : r === "md" ? L[g] || "" : r === "lg" ? G[g] || "" : r === "xl" ? A[g] || "" : u[g] || "" : "", l = (g, r) => g === void 0 ? "" : r === "x" ? R[g] || "" : r === "y" ? D[g] || "" : E[g] || "", I = _.forwardRef(
+}, s = (g, r) => !g || typeof g == "string" ? "" : typeof g == "number" ? r === "sm" ? C[g] || "" : r === "md" ? L[g] || "" : r === "lg" ? G[g] || "" : r === "xl" ? A[g] || "" : _[g] || "" : "", l = (g, r) => g === void 0 ? "" : r === "x" ? R[g] || "" : r === "y" ? D[g] || "" : E[g] || "", I = f.forwardRef(
   ({
     cols: g = 12,
     sm: r,
     md: c,
     lg: a,
     xl: p,
-    gap: t = 4,
+    gap: m = 4,
     gapX: d,
     gapY: i,
-    className: m,
+    className: t,
     style: o,
     children: x,
     ...S
@@ -137,16 +137,16 @@ const u = {
       "div",
       {
         ref: n,
-        className: f(
+        className: u(
           "grid",
           s(g),
           s(r, "sm"),
           s(c, "md"),
           s(a, "lg"),
           s(p, "xl"),
-          d !== void 0 ? l(d, "x") : l(t),
+          d !== void 0 ? l(d, "x") : l(m),
           i !== void 0 && l(i, "y"),
-          m
+          t
         ),
         style: e,
         ...S,

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

@@ -1,11 +1,11 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { X as b, Menu as N } from "lucide-react";
-import c from "react";
+import * as c from "react";
 import { cn as o } from "../../../utils/cn.js";
 const m = c.createContext(
   null
 );
-function k() {
+function j() {
   const e = c.useContext(m);
   if (!e)
     throw new Error("useMobileMenu must be used within Header component");
@@ -21,10 +21,10 @@ const w = c.forwardRef(
     containerClassName: u,
     className: p,
     children: v,
-    mobileMenuContent: d,
+    mobileMenuContent: s,
     ...h
   }, x) => {
-    const [s, i] = c.useState(!1);
+    const [d, i] = c.useState(!1);
     return /* @__PURE__ */ t(
       "header",
       {
@@ -50,32 +50,32 @@ const w = c.forwardRef(
                 e && /* @__PURE__ */ r("div", { className: "hidden md:flex items-center", children: e }),
                 /* @__PURE__ */ t("div", { className: "flex items-center gap-1 sm:gap-2", children: [
                   l && /* @__PURE__ */ r("div", { className: "hidden md:flex items-center gap-2", children: l }),
-                  (e || d || l) && /* @__PURE__ */ r(
+                  (e || s || l) && /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-secondary hover:text-accent-foreground focus:outline-none cursor-pointer",
-                      onClick: () => i(!s),
-                      "aria-label": s ? "Close menu" : "Open menu",
-                      children: s ? /* @__PURE__ */ r(b, { className: "h-6 w-6" }) : /* @__PURE__ */ r(N, { className: "h-6 w-6" })
+                      onClick: () => i(!d),
+                      "aria-label": d ? "Close menu" : "Open menu",
+                      children: d ? /* @__PURE__ */ r(b, { className: "h-6 w-6" }) : /* @__PURE__ */ r(N, { className: "h-6 w-6" })
                     }
                   )
                 ] })
               ]
             }
           ),
-          s && (e || d || l) && /* @__PURE__ */ r(
+          d && (e || s || l) && /* @__PURE__ */ r(
             m.Provider,
             {
               value: { closeMobileMenu: () => i(!1) },
               children: /* @__PURE__ */ r("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ t("div", { className: "flex flex-col px-4 sm:px-6 py-4 space-y-2", children: [
-                d || e,
+                s || e,
                 l && /* @__PURE__ */ r(
                   "div",
                   {
                     className: o(
                       "flex flex-col gap-2",
-                      (d || e) && "pt-4 border-t border-border mt-4"
+                      (s || e) && "pt-4 border-t border-border mt-4"
                     ),
                     children: l
                   }
@@ -91,5 +91,5 @@ const w = c.forwardRef(
 w.displayName = "Header";
 export {
   w as Header,
-  k as useMobileMenu
+  j as useMobileMenu
 };

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

@@ -1,12 +1,12 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import l from "react";
+import * as l from "react";
 import { cn as n } from "../../../utils/cn.js";
 const m = l.forwardRef(
-  ({ header: e, footer: a, children: o, className: d, ...i }, s) => /* @__PURE__ */ t(
+  ({ header: e, footer: a, children: o, className: i, ...d }, s) => /* @__PURE__ */ t(
     "div",
     {
       ref: s,
-      className: n("grid min-h-screen grid-rows-[auto_1fr_auto]", d),
+      className: n("grid min-h-screen grid-rows-[auto_1fr_auto]", i),
       style: {
         gridTemplateAreas: `
             "header"
@@ -14,7 +14,7 @@ const m = l.forwardRef(
             "footer"
           `
       },
-      ...i,
+      ...d,
       children: [
         e && /* @__PURE__ */ r("div", { style: { gridArea: "header" }, children: e }),
         /* @__PURE__ */ r(

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

@@ -0,0 +1,4 @@
+import { Modal as a } from "./modal.js";
+export {
+  a as Modal
+};

package/dist/esm/components/modal/modal.js

@@ -0,0 +1,108 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-dialog";
+import { cva as C } from "class-variance-authority";
+import * as i from "react";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+import { Z_INDEX as c } from "../../utils/z-index.js";
+const f = "gb-modal-open";
+let n = 0;
+const m = "before:content-[''] before:absolute before:inset-0 after:z-[-1] before:opacity-40", v = C("", {
+  variants: {
+    colorTheme: {
+      default: "bg-black/30",
+      dark: "bg-black",
+      "dark-transparent": "bg-black/85"
+    },
+    backdrop: {
+      success: `${m} before:bg-[linear-gradient(180deg,rgba(146,255,176,0.85)_0%,rgba(146,255,176,0)_50%)]`,
+      failure: `${m} before:bg-[linear-gradient(180deg,rgba(255,61,64,0.85)_0%,rgba(255,61,64,0)_50%)]`,
+      default: ""
+    }
+  },
+  defaultVariants: {
+    colorTheme: "default",
+    backdrop: "default"
+  }
+}), _ = i.forwardRef(
+  ({
+    show: t = !0,
+    colorTheme: u = "default",
+    backdrop: b = "default",
+    onClickOutside: d,
+    className: p,
+    children: g,
+    ...h
+  }, y) => {
+    i.useEffect(() => {
+      if (!(typeof document > "u") && t)
+        return n += 1, document.body.classList.add(f), () => {
+          n = Math.max(0, n - 1), n === 0 && document.body.classList.remove(f);
+        };
+    }, [t]);
+    const l = i.useCallback(
+      (e) => {
+        e || d?.();
+      },
+      [d]
+    );
+    return t ? /* @__PURE__ */ a(r.Root, { open: t, onOpenChange: l, modal: !0, children: /* @__PURE__ */ s(r.Portal, { children: [
+      /* @__PURE__ */ a(
+        r.Overlay,
+        {
+          className: o(
+            "fixed inset-0",
+            "pointer-events-auto",
+            c.MODAL,
+            v({ colorTheme: u, backdrop: b })
+          )
+        }
+      ),
+      /* @__PURE__ */ a(
+        r.Content,
+        {
+          className: o("fixed inset-0", "overflow-y-auto", c.MODAL),
+          onClick: (e) => {
+            e.target === e.currentTarget && l(!1);
+          },
+          children: /* @__PURE__ */ a(
+            "div",
+            {
+              className: o(
+                "min-h-full",
+                "flex flex-col justify-center items-center",
+                "animate-[modalContentShow_225ms_cubic-bezier(0.4,0,0.2,1)]"
+              ),
+              role: "presentation",
+              onClick: (e) => {
+                e.target === e.currentTarget && l(!1);
+              },
+              children: /* @__PURE__ */ s(
+                "div",
+                {
+                  ref: y,
+                  className: o(
+                    "relative",
+                    "w-full sm:w-auto",
+                    "m-auto py-0 px-0 sm:py-5",
+                    p
+                  ),
+                  ...h,
+                  children: [
+                    /* @__PURE__ */ a(r.Title, { className: "sr-only", children: "Modal Window" }),
+                    g
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }) }) : null;
+  }
+);
+_.displayName = "Modal";
+export {
+  _ as Modal
+};

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

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

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

@@ -1,43 +1,40 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as p from "react";
-import { cn as f } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk";
-const l = "https://static.gearbox.fi", h = p.forwardRef(
+import { jsx as p } from "react/jsx-runtime";
+import * as f from "react";
+import { RoundedImage as l } from "../rounded-image/rounded-image.js";
+import { buildStaticUrl as d } from "../../utils/static.js";
+const g = f.forwardRef(
   ({
-    reward: o,
-    size: t = 24,
-    staticBaseUrl: i = l,
-    rounded: r = !1,
-    className: n,
-    style: s,
-    ...a
-  }, c) => {
-    const e = `${i}/points/${o.type.toLowerCase()}.svg`;
-    return (
-      // biome-ignore lint/performance/noImgElement: External SVG icons from CDN
-      /* @__PURE__ */ m(
-        "img",
-        {
-          ref: c,
-          src: e,
-          alt: o.name,
-          width: t,
-          height: t,
-          className: f(r && "rounded-full", n),
-          style: {
-            width: t,
-            height: t,
-            objectFit: "contain",
-            ...s
-          },
-          ...a
-        }
-      )
+    reward: t,
+    size: o = 24,
+    staticBaseUrl: r,
+    rounded: n = !1,
+    className: i,
+    style: a,
+    fit: m = "contain",
+    ...e
+  }, s) => {
+    const c = d(r)(
+      `/points/${t.type.toLowerCase()}.svg`
+    );
+    return /* @__PURE__ */ p(
+      l,
+      {
+        className: i,
+        ref: s,
+        src: c,
+        width: o,
+        height: o,
+        size: o,
+        rounded: n,
+        fit: m,
+        alt: t.name,
+        style: a,
+        ...e
+      }
     );
   }
 );
-h.displayName = "PointsIcon";
+g.displayName = "PointsIcon";
 export {
-  h as PointsIcon
+  g as PointsIcon
 };

package/dist/esm/components/rounded-image/rounded-image.js

@@ -1,32 +1,64 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { cn as i } from "../../utils/cn.js";
+import { jsx as L } from "react/jsx-runtime";
+import * as b from "react";
+import { useState as s, useRef as E, useEffect as j } from "react";
+import { cn as k } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-function p({
-  className: t,
-  size: o,
-  style: r,
-  ...m
-}) {
-  return (
-    // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-    /* @__PURE__ */ e(
-      "img",
-      {
-        alt: "",
-        className: i("rounded-full object-cover", t),
-        style: {
-          ...o ? { width: o, height: o } : {},
-          ...r
-        },
-        loading: "lazy",
-        decoding: "async",
-        ...m
-      }
-    )
-  );
+import { getStatic as w } from "../../utils/static.js";
+const c = w("/tokens/default.svg"), f = /* @__PURE__ */ new Map();
+function d(e) {
+  return f.get(e) ? c : e;
 }
+const N = b.forwardRef(
+  ({
+    className: e,
+    size: o,
+    rounded: i = !0,
+    style: l,
+    src: r,
+    defaultIcon: u = c,
+    fit: m = "cover",
+    ...g
+  }, p) => {
+    const [h, a] = s(void 0), [v, n] = s(!1), t = E(!1);
+    j(() => {
+      d(r), a(void 0), n(!1), t.current = !1;
+    }, [r]);
+    const y = (I) => {
+      t.current || (t.current = !0, f.set(I.currentTarget.src, !0), a(u));
+    }, R = () => {
+      n(!0);
+    };
+    return (
+      // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
+      /* @__PURE__ */ L(
+        "img",
+        {
+          ref: p,
+          src: h || d(r),
+          alt: "",
+          className: k(
+            m === "cover" ? "object-cover" : "object-contain",
+            i && "rounded-full",
+            !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
+            e
+          ),
+          style: {
+            width: o,
+            height: o,
+            ...l
+          },
+          loading: "lazy",
+          decoding: "async",
+          onError: y,
+          onLoad: R,
+          ...g
+        }
+      )
+    );
+  }
+);
+N.displayName = "RoundedImage";
 export {
-  p as RoundedImage
+  N as RoundedImage
 };