@gearbox-protocol/ui-kit 3.13.0-next.1 → 3.13.1

package/dist/esm/components/compound-apy/compound-apy.js

@@ -1,11 +1,12 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { IconInfo as $ } from "@gearbox-protocol/static";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { IconInfo as N } from "@gearbox-protocol/static";
 import * as y from "react";
-import { PointsIcon as M } from "../points-icon/points-icon.js";
-import { PoolAPYTooltip as N } from "../pool-apy-tooltip/pool-apy-tooltip.js";
-import { TokenIcon as j } from "../token-icon/token-icon.js";
-import { formatPercentAmount as I } from "../../utils/format-money.js";
-import { getStatic as L } from "../../utils/static.js";
+import { PointsIcon as j } from "../points-icon/points-icon.js";
+import { PoolAPYTooltip as C } from "../pool-apy-tooltip/pool-apy-tooltip.js";
+import { TokenIcon as L } from "../token-icon/token-icon.js";
+import { isIconComposite as G } from "../../types/common.js";
+import { formatPercentAmount as T } from "../../utils/format-money.js";
+import { getStatic as Z } from "../../utils/static.js";
 import "../accordion/accordion.js";
 import "@fortawesome/free-solid-svg-icons";
 import "../icons/fa-icon.js";
@@ -53,7 +54,7 @@ import "../with-title/with-title.js";
 import "../smart-number-input/balance-indicator.js";
 import "../smart-number-input/smart-number-input.js";
 import "../table/grid-table.js";
-import { getSymbolOrIcon as C } from "../token-symbol/token-symbol.js";
+import { getSymbolOrIcon as R } from "../token-symbol/token-symbol.js";
 import "../typography/typography.js";
 import "../help-tip/help-tip.js";
 import "../description/description.js";
@@ -164,112 +165,114 @@ 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 G(i, p) {
-  const e = i?.symbol || p;
-  return e === "GEAR" ? { icon: L("/logo/logo_symbol.png") } : C(i) || e;
+function O(r, m) {
+  if (r?.icon !== void 0 && G(r.icon))
+    return R(r) ?? (r.symbol || m);
+  const n = r?.symbol || m;
+  return n === "GEAR" ? { icon: Z("/logo/logo_symbol.png") } : R(r) || n;
 }
-function Br({
-  totalAPY: i,
-  totalAPYLoading: p,
-  baseAPY: e,
+function Fr({
+  totalAPY: r,
+  totalAPYLoading: m,
+  baseAPY: n,
   extraAPY: u,
-  externalAPY: o,
-  points: n,
-  apy7DAgo: R,
+  externalAPY: t,
+  points: e,
+  apy7DAgo: z,
   tokensList: g,
-  decimals: w = 2,
-  className: z
+  decimals: b = 2,
+  className: E
 }) {
   const a = y.useMemo(() => {
-    if (o)
+    if (t)
       return {
-        ...o,
-        value: o.value ?? o.apy ?? 0
+        ...t,
+        value: t.value ?? t.apy ?? 0
       };
-  }, [o]), s = y.useMemo(() => u.filter((d) => (d.apy || 0) > 0), [u]), b = !p && i >= 1e-3, x = () => {
-    const d = s.length > 0, S = a && !p && a.totalValue > 0 && a.totalValue !== i, k = n && n.length > 0, V = `${[
-      I(i, w),
-      ...S ? [I(a.totalValue, w)] : []
-    ].join("-")}%`, T = Math.max(s.length, 0), v = n?.filter((t) => t.reward) ?? [], l = T + v.length;
-    return /* @__PURE__ */ h("div", { className: z, children: [
+  }, [t]), s = y.useMemo(() => u.filter((d) => (d.apy || 0) > 0), [u]), w = !m && r >= 1e-3, v = () => {
+    const d = s.length > 0, V = a && !m && a.totalValue > 0 && a.totalValue !== r, $ = e && e.length > 0, M = `${[
+      T(r, b),
+      ...V ? [T(a.totalValue, b)] : []
+    ].join("-")}%`, x = Math.max(s.length, 0), I = e?.filter((o) => o.reward) ?? [], l = x + I.length;
+    return /* @__PURE__ */ h("div", { className: E, children: [
       /* @__PURE__ */ h("span", { className: "inline-flex items-center", children: [
-        V,
-        b && /* @__PURE__ */ r("span", { className: "ml-1.5 leading-[0] text-gray-70", children: /* @__PURE__ */ r($, { size: 14 }) })
+        M,
+        w && /* @__PURE__ */ i("span", { className: "ml-1.5 leading-[0] text-gray-70", children: /* @__PURE__ */ i(N, { size: 14 }) })
       ] }),
-      /* @__PURE__ */ r("div", {}),
-      (d || k) && /* @__PURE__ */ h("span", { className: "relative inline-flex", children: [
-        s.map((t, m) => {
-          const c = g?.[t.rewardToken], f = m === l - 1;
-          return /* @__PURE__ */ r(
+      /* @__PURE__ */ i("div", {}),
+      (d || $) && /* @__PURE__ */ h("span", { className: "relative inline-flex", children: [
+        s.map((o, p) => {
+          const c = g?.[o.rewardToken], f = p === l - 1;
+          return /* @__PURE__ */ i(
             "span",
             {
               style: {
-                zIndex: l - m,
+                zIndex: l - p,
                 marginRight: f ? 0 : -7
               },
-              children: /* @__PURE__ */ r(
-                j,
+              children: /* @__PURE__ */ i(
+                L,
                 {
-                  symbol: G(c, t.rewardTokenSymbol),
+                  symbol: O(c, o.rewardTokenSymbol),
                   size: 14,
                   style: {
-                    margin: t.rewardTokenSymbol === "GEAR" ? "-3px 0 0 0" : "0"
+                    margin: o.rewardTokenSymbol === "GEAR" ? "-3px 0 0 0" : "0"
                   }
                 }
               )
             },
-            `extra-${t.rewardToken}-${t.apy}`
+            `extra-${o.rewardToken}-${o.apy}`
           );
         }),
-        v.map((t, m) => {
-          const c = m + T, f = c === l - 1;
-          return /* @__PURE__ */ r(
+        I.map((o, p) => {
+          const c = p + x, f = c === l - 1;
+          return /* @__PURE__ */ i(
             "span",
             {
               style: {
                 zIndex: l - c,
                 marginRight: f ? 0 : -7
               },
-              children: /* @__PURE__ */ r(
-                M,
+              children: /* @__PURE__ */ i(
+                j,
                 {
                   reward: {
-                    name: t.reward?.name || t.name,
-                    type: t.reward?.type || t.name.toLowerCase()
+                    name: o.reward?.name || o.name,
+                    type: o.reward?.type || o.name.toLowerCase()
                   },
                   size: 14
                 }
               )
             },
-            `points-${t.name}-${m}`
+            `points-${o.name}-${p}`
           );
         })
       ] })
     ] });
-  }, E = y.useMemo(() => {
-    if (o)
+  }, S = y.useMemo(() => {
+    if (t)
       return {
-        totalValue: o.totalValue,
-        apy: o.value ?? o.apy ?? 0,
-        name: o.name,
-        tooltip: o.tooltip
+        totalValue: t.totalValue,
+        apy: t.value ?? t.apy ?? 0,
+        name: t.name,
+        tooltip: t.tooltip
       };
-  }, [o]);
-  return b ? /* @__PURE__ */ r(
-    N,
+  }, [t]);
+  return w ? /* @__PURE__ */ i(
+    C,
     {
-      baseAPY: e,
+      baseAPY: n,
       extraAPY: s,
-      totalAPY: i,
-      externalAPY: E,
-      points: n,
-      apy7DAgo: R,
+      totalAPY: r,
+      externalAPY: S,
+      points: e,
+      apy7DAgo: z,
       tokensList: g,
-      children: x()
+      children: v()
     }
-  ) : x();
+  ) : v();
 }
 export {
-  Br as CompoundAPY,
-  G as getRewardTokenSymbol
+  Fr as CompoundAPY,
+  O as getRewardTokenSymbol
 };

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

@@ -1,83 +1,35 @@
-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 s, jsxs as f } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as a } from "../../../utils/cn.js";
+const d = c.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(
-      "aside",
-      {
-        className: x(
-          "min-w-0 shrink-0",
-          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"
-          ],
-          n
-        ),
-        children: m
-      }
-    );
-    return /* @__PURE__ */ c(
+    children: i,
+    aside: e,
+    asidePosition: l = "right",
+    asideClassName: t,
+    className: m,
+    ...o
+  }, n) => {
+    const r = e == null ? null : /* @__PURE__ */ s("aside", { className: a("min-w-0 shrink-0", t), children: e });
+    return /* @__PURE__ */ f(
       "div",
       {
-        ref: f,
-        className: x(
-          // base: mobile stack (column-reverse), desktop row
+        ref: n,
+        className: a(
           "flex w-full flex-col-reverse gap-6 lg:flex-row lg:items-start",
-          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
+          m
         ),
-        ...w,
+        ...o,
         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
+          l === "left" && r,
+          /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: i }),
+          l === "right" && r
         ]
       }
     );
   }
 );
-u.displayName = "MainAsideLayout";
+d.displayName = "MainAsideLayout";
 export {
-  u as MainAsideLayout
+  d as MainAsideLayout
 };

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

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

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

@@ -1,53 +1,143 @@
-import { jsx as s } from "react/jsx-runtime";
-import l from "react";
-import { getStatic as c } from "../../utils/static.js";
-import { RoundedImage as m } from "../rounded-image/rounded-image.js";
-const r = c("/tokens/default.svg");
-function d(e) {
-  return e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
+import { jsx as r, jsxs as S, Fragment as _ } from "react/jsx-runtime";
+import w from "react";
+import "@gearbox-protocol/sdk";
+import { cn as I } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import { getStatic as d } from "../../utils/static.js";
+import "luxon";
+import "../../utils/z-index.js";
+import { RoundedImage as l } from "../rounded-image/rounded-image.js";
+const s = d("/tokens/default.svg");
+function T(t) {
+  return t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
 }
-function a(e) {
-  if (!e) return r;
-  if (typeof e == "object" && e !== null && "icon" in e)
-    return e.icon;
-  const n = d(e);
-  return n ? c(`/tokens/${n}.svg`) : r;
+function j(t) {
+  return typeof t == "object" && t !== null && "icon" in t && !("kind" in t);
 }
-const g = l.forwardRef(
-  ({
-    symbol: e,
-    size: n = 48,
-    fit: o = "contain",
-    rounded: t = !1,
-    className: f,
-    ...i
-  }, u) => {
-    const p = a(e);
-    return /* @__PURE__ */ s(
-      m,
+function k(t) {
+  return typeof t == "object" && t !== null && "kind" in t && t.kind === "composite";
+}
+function u(t) {
+  if (t.type === "url") return t.url;
+  const o = T(t.symbol);
+  return o ? d(`/tokens/${o}.svg`) : s;
+}
+function y(t) {
+  if (!t || k(t))
+    return s;
+  if (j(t))
+    return t.icon;
+  const o = T(t);
+  return o ? d(`/tokens/${o}.svg`) : s;
+}
+function F(t) {
+  return t ? k(t) ? t.layers.map(u) : [y(t)] : [s];
+}
+const b = 0.65, L = w.forwardRef(function({ symbol: o, size: e = 48, fit: n = "contain", rounded: c = !1, className: a, ...f }, i) {
+  if (k(o))
+    return /* @__PURE__ */ r(
+      N,
       {
-        ref: u,
-        className: f,
-        src: p,
-        alt: "",
-        rounded: t,
-        fit: o,
-        width: n,
-        height: n,
-        size: n,
-        ...i
+        ref: i,
+        composite: o,
+        size: e,
+        fit: n,
+        rounded: c,
+        className: a
       }
     );
+  const p = y(o);
+  return /* @__PURE__ */ r(
+    l,
+    {
+      ref: i,
+      className: a,
+      src: p,
+      alt: "",
+      rounded: c,
+      fit: n,
+      width: e,
+      height: e,
+      size: e,
+      ...f
+    }
+  );
+}), N = w.forwardRef(function({ composite: o, size: e, fit: n, rounded: c, className: a }, f) {
+  const { preset: i, layers: p, scaleFactor: U = b } = o, [C, x] = p, g = u(C), R = u(x), m = Math.round(e * U);
+  let h;
+  switch (i) {
+    case "centered_foreground":
+      h = /* @__PURE__ */ S(_, { children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            className: "absolute inset-0",
+            style: { zIndex: 0 },
+            src: g,
+            alt: "background",
+            rounded: c,
+            fit: n,
+            size: e
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: I(
+              "absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2",
+              "flex items-center justify-center"
+            ),
+            style: {
+              width: m,
+              height: m
+            },
+            children: /* @__PURE__ */ r(
+              l,
+              {
+                src: R,
+                alt: "foreground",
+                rounded: c,
+                fit: n,
+                size: m
+              }
+            )
+          }
+        )
+      ] });
+      break;
+    default:
+      return console.error("Unknown TokenIcon composite preset", i), /* @__PURE__ */ r(
+        l,
+        {
+          src: g,
+          alt: "error",
+          rounded: c,
+          fit: n,
+          size: e
+        }
+      );
   }
-);
-g.displayName = "TokenIcon";
-function h(e) {
-  e.forEach((n) => {
-    const o = a(n), t = new window.Image();
-    t.src = o;
-  });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: f,
+      className: I("relative inline-block shrink-0", a),
+      style: { width: e, height: e },
+      children: h
+    }
+  );
+});
+N.displayName = "TokenIconComposite";
+L.displayName = "TokenIcon";
+function B(t) {
+  for (const o of t)
+    for (const e of F(o)) {
+      const n = new window.Image();
+      n.src = e;
+    }
 }
 export {
-  g as TokenIcon,
-  h as preloadTokenIcons
+  L as TokenIcon,
+  B as preloadTokenIcons
 };