@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

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

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

package/dist/esm/components/navitem/navitem.js

@@ -3,9 +3,10 @@ import { Slot as x } from "@radix-ui/react-slot";
 import { cva as h } from "class-variance-authority";
 import * as t from "react";
 import { useNavbarIndicator as y } from "../navbar/navbar-indicator-context.js";
+import "@gearbox-protocol/sdk";
 import { cn as k } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const I = h(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 relative",
   {
@@ -37,11 +38,11 @@ const I = h(
     size: l,
     asChild: g = !1,
     active: a = !1,
-    icon: i,
+    icon: d,
     badge: s,
-    external: d = !1,
-    children: v,
-    ...m
+    external: i = !1,
+    children: m,
+    ...v
   }, p) => {
     const b = g ? x : "a", e = y(), n = t.useRef(null), r = t.useId();
     return t.useImperativeHandle(p, () => n.current), t.useEffect(() => {
@@ -63,14 +64,14 @@ const I = h(
           })
         ),
         "data-active": a,
-        target: d ? "_blank" : void 0,
-        rel: d ? "noopener noreferrer" : void 0,
-        ...m,
+        target: i ? "_blank" : void 0,
+        rel: i ? "noopener noreferrer" : void 0,
+        ...v,
         children: [
-          i && /* @__PURE__ */ o("span", { className: "shrink-0", children: i }),
-          v,
+          d && /* @__PURE__ */ o("span", { className: "shrink-0", children: d }),
+          m,
           s && /* @__PURE__ */ o("span", { className: "ml-auto", children: s }),
-          d && /* @__PURE__ */ c(
+          i && /* @__PURE__ */ c(
             "svg",
             {
               className: "h-3 w-3 shrink-0",

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

@@ -1,48 +1,47 @@
-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;
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { RoundedImage as i } from "../rounded-image/rounded-image.js";
+import { SimpleTooltip as d } from "../tooltip/simple-tooltip.js";
+import { cn as g } from "../../utils/cn.js";
+import { getStatic as r } from "../../utils/static.js";
+const s = r("/chains/allnetworks.svg");
+function h(t) {
+  return t ? r(`/chains/${t.toLowerCase()}.svg`) : s;
 }
-function N({
+function w({
   network: t,
-  size: r = 20,
-  className: e
+  size: c = 20,
+  isTest: a,
+  suffixSize: l = 12,
+  showTooltip: m,
+  rounded: f,
+  className: p
 }) {
-  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",
+  const u = h(t), n = /* @__PURE__ */ o("span", { className: g("relative inline-flex shrink-0", p), children: [
+    /* @__PURE__ */ e(
+      i,
       {
-        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
+        src: u,
+        size: c,
+        rounded: f ?? !1,
+        defaultIcon: s,
+        fit: "contain"
       }
-    )
-  );
+    ),
+    a && /* @__PURE__ */ e("span", { className: "absolute -top-1.5 -right-[3px]", children: /* @__PURE__ */ e(
+      i,
+      {
+        src: r("/chains/test.svg"),
+        alt: "test",
+        size: l,
+        rounded: !0
+      }
+    ) })
+  ] });
+  return m ? /* @__PURE__ */ o(d, { title: n, placement: "top", triangle: !1, children: [
+    "Network: ",
+    t
+  ] }) : n;
 }
 export {
-  N as NetworkIcon
+  w as NetworkIcon
 };

package/dist/esm/components/not-found/not-found.js

@@ -1,17 +1,18 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import "react";
-import { cn as n } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-function d({
+import { cn as c } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+function u({
   icon: e,
   message: r,
   className: i
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: n(
+      className: c(
         "flex w-full flex-col items-center justify-center gap-4 py-8",
         i
       ),
@@ -23,5 +24,5 @@ function d({
   );
 }
 export {
-  d as NotFound
+  u as NotFound
 };

package/dist/esm/components/options-list/options-list.js

@@ -1,16 +1,17 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import * as n from "react";
+import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function g({
+import "luxon";
+function v({
   className: r,
   children: o,
   ...l
 }) {
-  const s = n.Children.toArray(o).length, a = n.Children.map(o, (t, i) => {
+  const s = n.Children.toArray(o).length, i = n.Children.map(o, (t, f) => {
     if (n.isValidElement(t)) {
-      const d = i === 0, u = i === s - 1;
+      const d = f === 0, u = f === s - 1;
       return n.cloneElement(t, {
         first: d,
         last: u
@@ -18,27 +19,27 @@ function g({
     }
     return t;
   });
-  return /* @__PURE__ */ e("div", { className: m("m-0 p-0 w-full flex flex-wrap", r), ...l, children: a });
+  return /* @__PURE__ */ e("div", { className: m("m-0 p-0 w-full flex flex-wrap", r), ...l, children: i });
 }
-function v({
+function N({
   icon: r,
   title: o,
   subTitle: l,
-  onClick: f,
+  onClick: a,
   endingIcon: s,
-  last: a = !1,
+  last: i = !1,
   className: t
 }) {
   return /* @__PURE__ */ c(
     "button",
     {
       type: "button",
-      onClick: f,
+      onClick: a,
       className: m(
         "relative z-0 pt-5 px-4 flex flex-row items-start gap-4 w-full cursor-pointer text-left",
         "before:absolute before:-z-10 before:left-0 before:hidden before:w-full before:inset-y-0 before:content-[''] before:bg-muted/50 before:rounded-lg",
         "hover:before:block",
-        !a && "after:absolute after:bottom-0 after:inset-x-3 after:h-px after:content-[''] after:bg-border",
+        !i && "after:absolute after:bottom-0 after:inset-x-3 after:h-px after:content-[''] after:bg-border",
         t
       ),
       children: [
@@ -53,6 +54,6 @@ function v({
   );
 }
 export {
-  v as OptionsItem,
-  g as OptionsList
+  N as OptionsItem,
+  v as OptionsList
 };

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

@@ -1,20 +1,21 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 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 });
+import "luxon";
+function d({ children: r, className: o, ...i }) {
+  return /* @__PURE__ */ e("div", { className: t("overflow-hidden", o), ...i, children: r });
 }
-function d({
+function l({
   children: r,
   className: o,
-  size: e,
+  size: i,
   ...m
 }) {
-  return /* @__PURE__ */ i("div", { className: t("break-words", o), ...m, children: r });
+  return /* @__PURE__ */ e("div", { className: t("break-words", o), ...m, children: r });
 }
 export {
-  c as Overflow,
-  d as OverflowWrap
+  d as Overflow,
+  l as OverflowWrap
 };

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

@@ -1,38 +1,39 @@
 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 = {
+import { cn as n } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const a = {
   default: "rounded-lg",
   small: "rounded-md"
-}, f = {
+}, m = {
   default: "border border-border",
   light: "border border-border/50",
   none: ""
 };
-function v({
+function C({
   children: o,
   maxHeight: e,
   minHeight: l = e,
   size: t = "default",
   borderColor: s = "default",
   innerPadding: d = "0 22px 0 16px",
-  className: n
+  className: i
 }) {
   return /* @__PURE__ */ r(
     "div",
     {
-      className: a(
+      className: n(
         "overflow-hidden",
-        i[t],
-        f[s],
-        n
+        a[t],
+        m[s],
+        i
       ),
       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
+  C as OverflowContainer
 };

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

@@ -1,16 +1,17 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { cva as d } from "class-variance-authority";
 import * as u from "react";
-import { cn as r } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import { cn as l } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
 const v = d(
   "font-semibold leading-tight tracking-tight flex items-center gap-2",
   {
     variants: {
       size: {
         sm: "text-xl md:text-2xl",
-        default: "text-xl md:text-2xl",
+        default: "text-[16px] md:text-[26px]",
         lg: "text-3xl md:text-4xl",
         xl: "text-4xl md:text-5xl"
       },
@@ -50,41 +51,49 @@ const v = d(
     icon: m,
     actions: a,
     subtitle: s,
-    as: g = "h1",
-    children: p,
-    actionsPosition: l = "left",
+    as: p = "h1",
+    children: g,
+    actionsPosition: r = "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 })
-        ]
-      }
-    )
-  ] })
+  }, h) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: h,
+      className: l("w-full flex items-center gap-4", n),
+      ...o,
+      children: [
+        i && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center", children: i }),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: l(
+              N({ spacing: c }),
+              r === "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-4", children: [
+                    /* @__PURE__ */ e(
+                      p,
+                      {
+                        className: l(v({ size: x, variant: f }), "m-0"),
+                        children: g
+                      }
+                    ),
+                    a && r === "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 && r === "right" && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center gap-2", children: a })
+            ]
+          }
+        )
+      ]
+    }
+  )
 );
 w.displayName = "PageTitle";
 export {

package/dist/esm/components/percent-indicator/percent-indicator.js

@@ -1,18 +1,19 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import "react";
-import { cn as m } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import { cn as n } from "../../utils/cn.js";
+import "sonner";
 import { percentTemplate as u } from "../../utils/format-money.js";
-function d({
+import "luxon";
+function g({
   percent: t,
   decimals: r = 2,
   showColor: e = !0,
   className: o,
   ...i
 }) {
-  return /* @__PURE__ */ n("div", { className: m("font-medium", e ? t >= 90 ? "text-destructive" : t >= 70 ? "text-orange-500" : t >= 50 ? "text-yellow-600" : "text-green-600" : "", o), ...i, children: u(t, r) });
+  return /* @__PURE__ */ m("div", { className: n("font-medium", e ? t >= 90 ? "text-destructive" : t >= 70 ? "text-orange-500" : t >= 50 ? "text-yellow-600" : "text-green-600" : "", o), ...i, children: u(t, r) });
 }
 export {
-  d as PercentIndicator
+  g as PercentIndicator
 };

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
 };