@gearbox-protocol/ui-kit 4.0.0-next.60 → 4.0.0-next.62

package/dist/esm/components/tip-card/tip-card.js

@@ -1,27 +1,15 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { cva as t } from "class-variance-authority";
-import * as f from "react";
-import "@gearbox-protocol/sdk/onchain";
+import { jsxs as l, jsx as f } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
+import * as g from "react";
 import { cn as e } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const p = t("rounded-lg p-5 text-sm", {
+const c = a("rounded-lg p-5 text-sm", {
   variants: {
     backgroundColor: {
       transparent: "bg-transparent",
       light: "bg-gray-30",
-      dark: "bg-card",
-      "gray-10": "bg-gray-10",
-      "gray-20": "bg-gray-20",
-      "gray-30": "bg-gray-30",
-      "gray-40": "bg-gray-40",
-      "gray-50": "bg-gray-50",
-      "gray-60": "bg-gray-60",
-      "gray-70": "bg-gray-70",
-      "gray-80": "bg-gray-80",
-      "gray-90": "bg-gray-90",
-      "gray-100": "bg-gray-100",
-      "gray-110": "bg-gray-110"
+      dark: "bg-card"
     },
     textColor: {
       unset: "",
@@ -31,7 +19,6 @@ const p = t("rounded-lg p-5 text-sm", {
     borderColor: {
       light: "border border-gray-20",
       dark: "border border-gray-10",
-      none: "border-0",
       gradient: e(
         // Gradient border via masked pseudo-element (matches styled-components):
         // Only the border ring is painted; the interior remains the card background.
@@ -49,7 +36,7 @@ const p = t("rounded-lg p-5 text-sm", {
     backgroundColor: "transparent",
     borderColor: "dark"
   }
-}), y = t(
+}), p = a(
   // Translated from styled-components:
   // - absolute, top/left 0, w/h 100%, overflow hidden, pointer-events none
   // - border-radius: theme borderRadius.sm
@@ -61,52 +48,50 @@ const p = t("rounded-lg p-5 text-sm", {
         // Color only the 4px stripe (the ::after pseudo-element)
         warning: "after:bg-warning",
         alert: "after:bg-destructive",
-        success: "after:bg-success",
-        primary: "after:bg-primary"
+        success: "after:bg-success"
       }
     }
   }
-), c = f.forwardRef(
+), u = g.forwardRef(
   ({
     className: o,
-    textColor: g,
-    backgroundColor: a,
-    borderColor: n = a === "dark" ? "dark" : "light",
+    textColor: n,
+    backgroundColor: t,
+    borderColor: i = t === "dark" ? "dark" : "light",
     attributeColor: r,
-    children: b,
-    ...i
-  }, d) => /* @__PURE__ */ s(
+    children: d,
+    ...s
+  }, b) => /* @__PURE__ */ l(
     "div",
     {
-      ref: d,
+      ref: b,
       className: e(
         r ? "relative" : "",
-        p({
-          textColor: g,
-          backgroundColor: a,
-          borderColor: n
+        c({
+          textColor: n,
+          backgroundColor: t,
+          borderColor: i
         }),
         o
       ),
-      ...i,
+      ...s,
       children: [
-        r && /* @__PURE__ */ l(
+        r && /* @__PURE__ */ f(
           "div",
           {
             className: e(
               "absolute inset-0 h-full w-full overflow-hidden pointer-events-none rounded-lg z-0",
               "after:absolute after:top-0 after:left-0 after:block after:w-1 after:h-full after:content-['']",
-              y({ attributeColor: r })
+              p({ attributeColor: r })
             )
           }
         ),
-        b
+        d
       ]
     }
   )
 );
-c.displayName = "TipCard";
+u.displayName = "TipCard";
 export {
-  c as TipCard,
-  p as tipCardVariants
+  u as TipCard
 };

package/dist/esm/{utils → components/token-icon}/token-icon-source.js

@@ -1,4 +1,4 @@
-import { getStatic as s } from "./static.js";
+import { getStatic as s } from "../../utils/internal/static.js";
 const f = s("/tokens/templates/diesel.svg"), l = s("/logo/logo_symbol.png"), n = /V\d+$/, o = "_OLD", u = [
   { prefix: "farmd", requiresVersion: !1 },
   { prefix: "wd", requiresVersion: !1 },

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

@@ -1,13 +1,12 @@
 import { jsx as r, jsxs as x, Fragment as R } from "react/jsx-runtime";
 import b from "react";
+import { getTokenIcon as I } from "./token-icon-source.js";
+import { cn as y } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as I } from "../../utils/cn.js";
-import { getStatic as k } from "../../utils/static.js";
-import { getTokenIcon as y } from "../../utils/token-icon-source.js";
-import "luxon";
 import "../../utils/z-index.js";
+import { getStatic as k } from "../../utils/internal/static.js";
 import { RoundedImage as m } from "../rounded-image/rounded-image.js";
-const p = k("/tokens/default.svg");
+const u = k("/tokens/default.svg");
 function w(t) {
   return t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
 }
@@ -20,19 +19,19 @@ function N(t) {
 function T(t) {
   if (t.type === "url") return t.url;
   const e = w(t.symbol);
-  return e ? k(`/tokens/${e}.svg`) : p;
+  return e ? k(`/tokens/${e}.svg`) : u;
 }
 function j(t) {
   if (!t || N(t))
-    return p;
+    return u;
   if (_(t))
     return t.icon;
   const e = w(t);
-  return e ? k(`/tokens/${e}.svg`) : p;
+  return e ? k(`/tokens/${e}.svg`) : u;
 }
 const F = 0.65;
 function L(t, e) {
-  return t !== void 0 ? y(t) : typeof e == "string" ? y(e) : e;
+  return t !== void 0 ? I(t) : typeof e == "string" ? I(e) : e;
 }
 const v = b.forwardRef(function({
   token: e,
@@ -56,13 +55,13 @@ const v = b.forwardRef(function({
         className: a
       }
     );
-  const u = j(i);
+  const p = j(i);
   return /* @__PURE__ */ r(
     m,
     {
       ref: f,
       className: a,
-      src: u,
+      src: p,
       alt: "",
       rounded: s,
       fit: c,
@@ -73,7 +72,7 @@ const v = b.forwardRef(function({
     }
   );
 }), C = b.forwardRef(function({ composite: e, size: n, fit: o, rounded: c, className: s }, a) {
-  const { preset: l, layers: f, scaleFactor: i = F } = e, [u, S] = f, g = T(u), U = T(S), d = Math.round(n * i);
+  const { preset: l, layers: f, scaleFactor: i = F } = e, [p, S] = f, g = T(p), U = T(S), d = Math.round(n * i);
   let h;
   switch (l) {
     case "centered_foreground":
@@ -93,7 +92,7 @@ const v = b.forwardRef(function({
         /* @__PURE__ */ r(
           "div",
           {
-            className: I(
+            className: y(
               "absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2",
               "flex items-center justify-center"
             ),
@@ -131,7 +130,7 @@ const v = b.forwardRef(function({
     "div",
     {
       ref: a,
-      className: I("relative inline-block shrink-0", s),
+      className: y("relative inline-block shrink-0", s),
       style: { width: n, height: n },
       children: h
     }

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

@@ -6,11 +6,10 @@ import { ShortString as S } from "../short-string/short-string.js";
 import { TokenIcon as s } from "../token-icon/token-icon.js";
 import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as y } from "../../utils/cn.js";
-import { getNetworkIcon as I } from "../../utils/network-icons.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
+import { getNetworkIcon as I } from "../../utils/internal/network-icons.js";
 const b = v("", {
   variants: {
     marginSize: {
@@ -32,22 +31,22 @@ const _ = N.forwardRef(
     className: r,
     marginSize: c = "lg",
     token: m,
-    title: o,
-    size: a = 24,
+    title: a,
+    size: l = 24,
     showSymbol: d = !1,
     showIcon: f = !0,
     maxLength: p,
     chainId: j,
-    comment: l,
+    comment: o,
     network: i,
     ...g
   }, u) => {
-    const h = o || R(m), n = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
+    const h = a || R(m), n = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         s,
         {
           token: m,
-          size: a,
+          size: l,
           className: "shrink-0 self-center"
         }
       ),
@@ -60,7 +59,7 @@ const _ = N.forwardRef(
           rounded: !0
         }
       ) })
-    ] }) : /* @__PURE__ */ e(s, { token: m, size: a, className: "shrink-0 self-center" });
+    ] }) : /* @__PURE__ */ e(s, { token: m, size: l, className: "shrink-0 self-center" });
     return /* @__PURE__ */ t(
       "div",
       {
@@ -76,11 +75,11 @@ const _ = N.forwardRef(
             "Network: ",
             i
           ] }) : n()),
-          (o || d) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
+          (a || d) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
             /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: p, children: h }) }),
-            l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
+            o && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
               "(",
-              l,
+              o,
               ")"
             ] })
           ] })

package/dist/esm/{utils → components/token-template}/bn-to-pretty-view.js

@@ -1,6 +1,6 @@
 import { formatBN as a } from "@gearbox-protocol/sdk/onchain";
-import { bnToInputView as m } from "./bn-to-input-view.js";
-import { parseSmallNumber as f } from "./parse-input-to-bn.js";
+import { bnToInputView as m } from "../../utils/internal/bn-to-input-view.js";
+import { parseSmallNumber as f } from "../../utils/internal/parse-small-number.js";
 function l(r, t, e, u = !1) {
   if (r === void 0)
     return { originalValue: "-" };

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

@@ -1,24 +1,19 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { bnToPrettyView as x } from "../../utils/bn-to-pretty-view.js";
-import "clsx";
-import "tailwind-merge";
-import "@gearbox-protocol/sdk/onchain";
-import { tokenTemplateString as N } from "../../utils/templates.js";
-import "luxon";
-import "../../utils/z-index.js";
+import { bnToPrettyView as x } from "./bn-to-pretty-view.js";
+import { tokenTemplateString as w } from "../../utils/templates.js";
 import { FormattedNumberString as S } from "../formatted-number/formatted-number.js";
 import { ShortString as T } from "../short-string/short-string.js";
-function B({
+function j({
   value: r,
-  token: m,
-  precision: e,
-  formatter: i = x,
-  noFormattedAmountValue: n = "-",
+  token: e,
+  precision: n,
+  formatter: m = x,
+  noFormattedAmountValue: i = "-",
   showSymbol: p = !0,
   maxLength: s = 1 / 0,
   ...f
 }) {
-  const { decimals: l = 18, title: a, symbol: c } = m || {}, t = i(r, l, e), u = t === n;
+  const { decimals: l = 18, title: a, symbol: c } = e || {}, t = m(r, l, n), u = t === i;
   return /* @__PURE__ */ d("span", { children: [
     /* @__PURE__ */ o(S, { value: t, ...f }),
     " ",
@@ -26,6 +21,6 @@ function B({
   ] });
 }
 export {
-  B as TokenTemplate,
-  N as tokenTemplateString
+  j as TokenTemplate,
+  w as tokenTemplateString
 };

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -1,9 +1,8 @@
 import { jsxs as I, jsx as r } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-tooltip";
 import * as e from "react";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as k } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import { Z_INDEX as F } from "../../utils/z-index.js";
 const A = e.createContext({ lockParent: () => {
 }, unlockParent: () => {
@@ -12,7 +11,7 @@ function Q({
   children: S,
   title: d,
   placement: W = "top",
-  trigger: n = "hover",
+  trigger: t = "hover",
   triangle: _ = !0,
   delayShow: h = 5,
   maxWidth: v = "200px",
@@ -25,8 +24,8 @@ function Q({
   useTitleAsTrigger: B = !1
 }) {
   const [M, $] = e.useState(!1), [y, R] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = x !== void 0, c = p ? x : M, o = e.useCallback(
-    (t) => {
-      p ? P?.(t) : $(t);
+    (n) => {
+      p ? P?.(n) : $(n);
     },
     [p, P]
   ), s = e.useContext(A), g = e.useMemo(
@@ -42,9 +41,9 @@ function Q({
   ), u = e.useCallback(() => {
     l.current !== null && (clearTimeout(l.current), l.current = null);
   }, []), G = e.useCallback(
-    (t) => {
-      if (n !== "click") {
-        if (t) {
+    (n) => {
+      if (t !== "click") {
+        if (n) {
           u(), o(!0), s.lockParent();
           return;
         }
@@ -53,32 +52,32 @@ function Q({
         }, 100);
       }
     },
-    [n, o, s, u]
+    [t, o, s, u]
   );
   e.useEffect(() => u, [u]);
   const V = e.useCallback(
-    (t) => {
-      n === "click" && (t.stopPropagation(), o(!c));
+    (n) => {
+      t === "click" && (n.stopPropagation(), o(!c));
     },
-    [n, c, o]
+    [t, c, o]
   ), X = e.useCallback(
-    (t) => {
-      n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!c));
+    (n) => {
+      t === "click" && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.stopPropagation(), o(!c));
     },
-    [n, c, o]
+    [t, c, o]
   );
   e.useEffect(() => {
-    if (n !== "click" || !c) return;
-    const t = (m) => {
+    if (t !== "click" || !c) return;
+    const n = (m) => {
       const L = m.target;
       f.current && !f.current.contains(L) && i.current && !i.current.contains(L) && o(!1);
     }, N = (m) => {
       m.key === "Escape" && o(!1);
     };
-    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", N), () => {
-      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", N);
+    return document.addEventListener("pointerdown", n), document.addEventListener("keydown", N), () => {
+      document.removeEventListener("pointerdown", n), document.removeEventListener("keydown", N);
     };
-  }, [n, c, o]);
+  }, [t, c, o]);
   const b = e.useRef(s.unlockParent);
   b.current = s.unlockParent, e.useEffect(() => () => b.current(), []);
   const D = j === "modal-tooltip", E = _ && !D, Z = k(
@@ -93,9 +92,9 @@ function Q({
     {
       open: c || y,
       onOpenChange: G,
-      delayDuration: n === "click" ? 0 : h,
+      delayDuration: t === "click" ? 0 : h,
       children: [
-        /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : n === "click" ? /* @__PURE__ */ r(
+        /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : t === "click" ? /* @__PURE__ */ r(
           "button",
           {
             ref: i,
@@ -149,7 +148,7 @@ function Q({
   return q ? O : /* @__PURE__ */ r(H.Provider, { value: !0, children: /* @__PURE__ */ r(
     a.Provider,
     {
-      delayDuration: n === "click" ? 0 : h,
+      delayDuration: t === "click" ? 0 : h,
       skipDelayDuration: 300,
       children: O
     }

package/dist/esm/components/tooltip/tooltip.js

@@ -1,11 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import * as a from "react";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as m } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import { Z_INDEX as s } from "../../utils/z-index.js";
-const g = o.Provider, b = o.Root, v = o.Trigger, n = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+const T = o.Provider, g = o.Root, b = o.Trigger, n = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
   o.Content,
   {
     ref: d,
@@ -20,8 +19,8 @@ const g = o.Provider, b = o.Root, v = o.Trigger, n = a.forwardRef(({ className:
 ) }));
 n.displayName = o.Content.displayName;
 export {
-  b as Tooltip,
+  g as Tooltip,
   n as TooltipContent,
-  g as TooltipProvider,
-  v as TooltipTrigger
+  T as TooltipProvider,
+  b as TooltipTrigger
 };

package/dist/esm/components/trading-view/index.js

@@ -1,6 +1,4 @@
-import { GraphDropdown as p } from "./graph-dropdown.js";
-import { TradingView as a } from "./trading-view.js";
+import { TradingView as i } from "./trading-view.js";
 export {
-  p as GraphDropdown,
-  a as TradingView
+  i as TradingView
 };