@gearbox-protocol/ui-kit 4.0.0-next.5 → 4.0.0-next.51

package/dist/esm/components/table/table-sm.js

@@ -1,33 +1,30 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as t } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-function y({
-  title: r,
-  className: o,
-  children: e,
-  ...m
+function h({
+  title: s,
+  className: r,
+  children: o,
+  ...l
 }) {
-  return /* @__PURE__ */ i("div", { className: t("flex flex-col gap-1", o), ...m, children: [
-    r && /* @__PURE__ */ s("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: r }),
-    /* @__PURE__ */ s("div", { className: "text-sm", children: e })
+  return /* @__PURE__ */ i("div", { className: t("flex flex-col gap-1", r), ...l, children: [
+    s && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: s }),
+    /* @__PURE__ */ e("div", { className: "text-sm", children: o })
   ] });
 }
-function L({
-  title: r,
-  columnsXs: o = 1,
-  columnsSm: e,
-  columnsMd: m,
+function S({
+  title: s,
+  columnsXs: r = 1,
+  columnsSm: o,
+  columnsMd: l,
   columns: a,
   className: n,
   children: p,
   ...x
 }) {
-  const l = o, c = e ?? l, d = m ?? c, g = a ?? d;
+  const c = r, d = o ?? c, m = l ?? d, g = a ?? m;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -37,15 +34,15 @@ function L({
       ),
       ...x,
       children: [
-        r && /* @__PURE__ */ s("div", { className: "font-medium mb-2", children: r }),
-        /* @__PURE__ */ s(
+        s && /* @__PURE__ */ e("div", { className: "font-medium mb-2", children: s }),
+        /* @__PURE__ */ e(
           "div",
           {
             className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
-              "--grid-cols-xs": l,
-              "--grid-cols-sm": c,
-              "--grid-cols-md": d,
+              "--grid-cols-xs": c,
+              "--grid-cols-sm": d,
+              "--grid-cols-md": m,
               "--grid-cols-lg": g
             },
             children: p
@@ -56,6 +53,6 @@ function L({
   );
 }
 export {
-  y as TableCellSm,
-  L as TableLineSm
+  h as TableCellSm,
+  S as TableLineSm
 };

package/dist/esm/components/table/table.js

@@ -1,14 +1,12 @@
 import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { faCaretUp as h, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
 import { cva as d } from "class-variance-authority";
 import * as i from "react";
-import { faCaretUp as h, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as y } from "../icons/fa-icon.js";
 import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as N, Tooltip as v, TooltipTrigger as w, TooltipContent as R } from "../tooltip/tooltip.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const C = d("w-full caption-bottom", {
@@ -193,12 +191,9 @@ const I = i.forwardRef(function({
 });
 I.displayName = "SortingTableHead";
 export {
-  I as SortingTableHead,
   z as Table,
   V as TableBody,
-  D as TableCaption,
   B as TableCell,
-  _ as TableFooter,
   c as TableHead,
   H as TableHeader,
   F as TableRow,

package/dist/esm/components/tabs/tabs.js

@@ -1,16 +1,14 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-tabs";
-import * as a from "react";
-import "@gearbox-protocol/sdk";
+import * as i from "react";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const v = e.Root, n = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
+const p = e.Root, n = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.List,
   {
-    ref: o,
+    ref: a,
     className: s(
       "inline-flex h-fit items-center justify-start bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6 overflow-x-auto overflow-y-hidden navbar-scrollbar min-w-max",
       t
@@ -19,10 +17,10 @@ const v = e.Root, n = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ *
   }
 ));
 n.displayName = e.List.displayName;
-const d = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
+const d = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.Trigger,
   {
-    ref: o,
+    ref: a,
     className: s(
       "inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer shrink-0",
       t
@@ -31,10 +29,10 @@ const d = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
   }
 ));
 d.displayName = e.Trigger.displayName;
-const f = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
+const f = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.Content,
   {
-    ref: o,
+    ref: a,
     className: s(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       t
@@ -44,7 +42,7 @@ const f = a.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ i(
 ));
 f.displayName = e.Content.displayName;
 export {
-  v as Tabs,
+  p as Tabs,
   f as TabsContent,
   n as TabsList,
   d as TabsTrigger

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

@@ -1,10 +1,8 @@
 import { jsxs as v, Fragment as D, jsx as e } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
 import * as g from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const f = n("", {
@@ -57,14 +55,14 @@ const f = n("", {
     className: b,
     disabled: r,
     ...d
-  }, i) => {
-    const c = a === "a", p = o(
+  }, c) => {
+    const i = a === "a", p = 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: t }),
       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: [
+    ), l = i ? o(f({ buttonColor: t }), r && "text-gray-110") : null, u = /* @__PURE__ */ v(D, { children: [
       /* @__PURE__ */ e(
         "span",
         {
@@ -86,21 +84,21 @@ const f = n("", {
           children: s
         }
       )
-    ] }), u = l ? /* @__PURE__ */ e("span", { className: l, children: m }) : m;
+    ] }), m = l ? /* @__PURE__ */ e("span", { className: l, children: u }) : u;
     return a === "button" ? /* @__PURE__ */ e(
       "button",
       {
-        ref: i,
+        ref: c,
         type: "button",
         className: p,
         disabled: r,
         ...d,
-        children: u
+        children: m
       }
     ) : g.createElement(
       a,
-      { ref: i, className: p, ...d },
-      u
+      { ref: c, className: p, ...d },
+      m
     );
   }
 );

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

@@ -1,10 +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 "@gearbox-protocol/sdk/onchain";
 import { cn as n } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const d = l(

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/tip-card.js

@@ -1,10 +1,8 @@
 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 "@gearbox-protocol/sdk/onchain";
 import { cn as e } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const p = t("rounded-lg p-5 text-sm", {
@@ -75,8 +73,8 @@ const p = t("rounded-lg p-5 text-sm", {
     backgroundColor: a,
     borderColor: n = a === "dark" ? "dark" : "light",
     attributeColor: r,
-    children: i,
-    ...b
+    children: b,
+    ...i
   }, d) => /* @__PURE__ */ s(
     "div",
     {
@@ -90,7 +88,7 @@ const p = t("rounded-lg p-5 text-sm", {
         }),
         o
       ),
-      ...b,
+      ...i,
       children: [
         r && /* @__PURE__ */ l(
           "div",
@@ -102,7 +100,7 @@ const p = t("rounded-lg p-5 text-sm", {
             )
           }
         ),
-        i
+        b
       ]
     }
   )

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/components/token-icon/token-icon.js

@@ -1,104 +1,99 @@
-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 { jsx as r, jsxs as x, Fragment as R } from "react/jsx-runtime";
+import b from "react";
+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 { RoundedImage as u } from "../rounded-image/rounded-image.js";
-const s = g("/tokens/default.svg");
-function U(t) {
+import { RoundedImage as m } from "../rounded-image/rounded-image.js";
+const p = 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`) : p;
 }
-function C(t) {
-  if (!t || I(t))
-    return s;
-  if (j(t))
+function j(t) {
+  if (!t || N(t))
+    return p;
+  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`) : p;
 }
-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 ? y(t) : typeof e == "string" ? y(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 u = j(i);
   return /* @__PURE__ */ r(
-    u,
+    m,
     {
-      ref: m,
-      className: l,
-      src: p,
+      ref: f,
+      className: a,
+      src: u,
       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, [u, S] = f, g = T(u), 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: I(
               "absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2",
               "flex items-center justify-center"
             ),
@@ -107,12 +102,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 +116,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: I("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,10 +6,8 @@ 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 "@gearbox-protocol/sdk/onchain";
 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 "../../utils/z-index.js";
@@ -37,8 +35,8 @@ const _ = N.forwardRef(
     title: o,
     size: a = 24,
     showSymbol: d = !1,
-    showIcon: p = !0,
-    maxLength: f,
+    showIcon: f = !0,
+    maxLength: p,
     chainId: j,
     comment: l,
     network: i,
@@ -74,12 +72,12 @@ 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 }) }),
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: p, children: h }) }),
             l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
               "(",
               l,

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

@@ -1,4 +1,6 @@
-import { TokenTemplate as m } from "./token-template.js";
+import { TokenTemplate as t } from "./token-template.js";
+import { tokenTemplateString as m } from "../../utils/templates.js";
 export {
-  m as TokenTemplate
+  t as TokenTemplate,
+  m as tokenTemplateString
 };