@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

package/dist/esm/components/text-button/text-button.js

@@ -1,11 +1,8 @@
-import { jsxs as v, Fragment as D, jsx as e } from "react/jsx-runtime";
+import { jsxs as v, Fragment as D, jsx as t } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
 import * as g from "react";
-import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const f = n("", {
   variants: {
@@ -51,32 +48,32 @@ const f = n("", {
     children: y,
     icon: s,
     size: h = "default",
-    buttonColor: t = "primaryDashed",
+    buttonColor: e = "primaryDashed",
     width: x = "compact",
     as: a = "button",
     className: b,
     disabled: r,
     ...d
-  }, i) => {
-    const c = a === "a", p = o(
+  }, c) => {
+    const i = a === "a", l = o(
       "group inline-block p-0 leading-[100%] font-normal bg-transparent border-none cursor-pointer transition-colors",
       w({ size: h, width: x }),
-      !c && f({ buttonColor: t }),
+      !i && f({ buttonColor: e }),
       r && "text-gray-110 cursor-default [&_svg]:text-gray-110",
       b
-    ), l = c ? o(f({ buttonColor: t }), r && "text-gray-110") : null, m = /* @__PURE__ */ v(D, { children: [
-      /* @__PURE__ */ e(
+    ), p = i ? o(f({ buttonColor: e }), r && "text-gray-110") : null, u = /* @__PURE__ */ v(D, { children: [
+      /* @__PURE__ */ t(
         "span",
         {
           className: o(
             "inline-block",
-            N({ borderColor: t }),
-            r && t !== "empty" && "border-gray-110"
+            N({ borderColor: e }),
+            r && e !== "empty" && "border-gray-110"
           ),
           children: y
         }
       ),
-      s && /* @__PURE__ */ e(
+      s && /* @__PURE__ */ t(
         "span",
         {
           className: o(
@@ -86,21 +83,21 @@ const f = n("", {
           children: s
         }
       )
-    ] }), u = l ? /* @__PURE__ */ e("span", { className: l, children: m }) : m;
-    return a === "button" ? /* @__PURE__ */ e(
+    ] }), m = p ? /* @__PURE__ */ t("span", { className: p, children: u }) : u;
+    return a === "button" ? /* @__PURE__ */ t(
       "button",
       {
-        ref: i,
+        ref: c,
         type: "button",
-        className: p,
+        className: l,
         disabled: r,
         ...d,
-        children: u
+        children: m
       }
     ) : g.createElement(
       a,
-      { ref: i, className: p, ...d },
-      u
+      { ref: c, className: l, ...d },
+      m
     );
   }
 );

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

@@ -1,5 +1,4 @@
-import { Textarea as r, textareaVariants as t } from "./textarea.js";
+import { Textarea as a } from "./textarea.js";
 export {
-  r as Textarea,
-  t as textareaVariants
+  a as Textarea
 };

package/dist/esm/components/textarea/textarea.js

@@ -1,11 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 import * as s from "react";
-import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const d = l(
   "flex w-full rounded-md border border-[rgb(100,100,100)] px-3 py-2 shadow-sm transition-colors placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none",
@@ -27,10 +24,10 @@ const d = l(
     }
   }
 ), b = s.forwardRef(
-  ({ className: t, size: r, variant: e, ...o }, a) => /* @__PURE__ */ i(
+  ({ className: t, size: e, variant: r, ...o }, a) => /* @__PURE__ */ i(
     "textarea",
     {
-      className: n(d({ size: r, variant: e, className: t })),
+      className: n(d({ size: e, variant: r, className: t })),
       ref: a,
       ...o
     }
@@ -38,6 +35,5 @@ const d = l(
 );
 b.displayName = "Textarea";
 export {
-  b as Textarea,
-  d as textareaVariants
+  b as Textarea
 };

package/dist/esm/components/theme-provider.js

@@ -1,54 +1,47 @@
 import { jsx as k } from "react/jsx-runtime";
-import { createContext as y, useContext as S, useState as f, useCallback as v, useEffect as w } from "react";
-const g = y(void 0);
-function L() {
-  const i = S(g);
-  if (!i)
-    throw new Error("useTheme must be used within ThemeProvider");
-  return i;
-}
+import { createContext as y, useState as u, useCallback as f, useEffect as v } from "react";
+const T = y(void 0);
 function A({
-  children: i,
+  children: w,
   defaultTheme: d = "system",
   storageKey: s = "ui-theme",
-  attribute: a = "class",
-  enableColorScheme: m = !0
+  attribute: i = "class",
+  enableColorScheme: a = !0
 }) {
-  const [o, h] = f(() => {
+  const [o, m] = u(() => {
     if (typeof window < "u") {
       const t = localStorage.getItem(s) || d, r = t === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : t, n = document.documentElement;
-      return n.classList.remove("light", "dark"), n.removeAttribute("data-theme"), a === "class" ? n.classList.add(r) : n.setAttribute("data-theme", r), m && (n.style.colorScheme = r), t;
+      return n.classList.remove("light", "dark"), n.removeAttribute("data-theme"), i === "class" ? n.classList.add(r) : n.setAttribute("data-theme", r), a && (n.style.colorScheme = r), t;
     }
     return d;
-  }), [p, l] = f(() => {
+  }), [g, l] = u(() => {
     if (typeof window < "u") {
       const t = localStorage.getItem(s) || d;
       return t === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : t;
     }
     return "light";
-  }), c = v(() => typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", []), u = v(
+  }), c = f(() => typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", []), h = f(
     (e) => e === "system" ? c() : e,
     [c]
   );
-  w(() => {
+  v(() => {
     if (typeof window > "u") return;
     const e = localStorage.getItem(s);
-    e && h(e);
+    e && m(e);
     const t = window.matchMedia("(prefers-color-scheme: dark)"), r = () => {
       o === "system" && l(c());
     };
     return t.addEventListener("change", r), () => t.removeEventListener("change", r);
-  }, [s, o, c]), w(() => {
+  }, [s, o, c]), v(() => {
     if (typeof window > "u") return;
-    const e = document.documentElement, t = u(o);
-    l(t), e.classList.remove("light", "dark"), e.removeAttribute("data-theme"), a === "class" ? e.classList.add(t) : e.setAttribute("data-theme", t), m && (e.style.colorScheme = t), localStorage.setItem(s, o);
-  }, [o, a, m, s, u]);
-  const T = (e) => {
-    h(e);
+    const e = document.documentElement, t = h(o);
+    l(t), e.classList.remove("light", "dark"), e.removeAttribute("data-theme"), i === "class" ? e.classList.add(t) : e.setAttribute("data-theme", t), a && (e.style.colorScheme = t), localStorage.setItem(s, o);
+  }, [o, i, a, s, h]);
+  const p = (e) => {
+    m(e);
   };
-  return /* @__PURE__ */ k(g.Provider, { value: { theme: o, setTheme: T, actualTheme: p }, children: i });
+  return /* @__PURE__ */ k(T.Provider, { value: { theme: o, setTheme: p, actualTheme: g }, children: w });
 }
 export {
-  A as ThemeProvider,
-  L as useTheme
+  A as ThemeProvider
 };

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

@@ -1,5 +1,4 @@
-import { TipCard as i, tipCardVariants as p } from "./tip-card.js";
+import { TipCard as p } from "./tip-card.js";
 export {
-  i as TipCard,
-  p as tipCardVariants
+  p as TipCard
 };

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

@@ -1,29 +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";
+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 "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-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: "",
@@ -33,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.
@@ -51,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
@@ -63,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: i,
-    ...b
-  }, 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
       ),
-      ...b,
+      ...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 })
             )
           }
         ),
-        i
+        d
       ]
     }
   )
 );
-c.displayName = "TipCard";
+u.displayName = "TipCard";
 export {
-  c as TipCard,
-  p as tipCardVariants
+  u as TipCard
 };

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

@@ -1,5 +1,4 @@
-import { TokenIcon as n, preloadTokenIcons as r } from "./token-icon.js";
+import { TokenIcon as n } from "./token-icon.js";
 export {
-  n as TokenIcon,
-  r as preloadTokenIcons
+  n as TokenIcon
 };

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

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

@@ -6,13 +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";
 import { cn as y } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-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: {
@@ -34,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: p = !0,
-    maxLength: f,
+    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"
         }
       ),
@@ -62,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",
       {
@@ -74,15 +71,15 @@ const _ = N.forwardRef(
         ),
         ...g,
         children: [
-          p && m && (i !== void 0 ? /* @__PURE__ */ t(T, { title: n(), children: [
+          f && m && (i !== void 0 ? /* @__PURE__ */ t(T, { title: n(), children: [
             "Network: ",
             i
           ] }) : n()),
-          (o || d) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
-            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: f, children: h }) }),
-            l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", 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 }) }),
+            o && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
               "(",
-              l,
+              o,
               ")"
             ] })
           ] })