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

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

@@ -1,22 +1,21 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { useMemo as I, useCallback as fe, useRef as C } from "react";
-import { toast as be } from "sonner";
-import { SectionHeading as we } from "../base/section-heading/section-heading.js";
-import { useIsMobile as he } from "../../hooks/use-media-query.js";
-import "@gearbox-protocol/sdk";
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { useMemo as I, useCallback as be, useRef as C } from "react";
+import { toast as we } from "sonner";
+import { SectionHeading as he } from "../base/section-heading/section-heading.js";
+import { useIsMobile as ve } from "../../hooks/use-media-query.js";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as pe } from "../../utils/cn.js";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { DEFAULT_SERIES_COLORS as T, getSeriesColorPalette as ve, GraphLegend as ge } from "../graph/graph.js";
-import { GraphViewWithData as xe } from "../graph/graph-view.js";
-import { Select as Se, SelectTrigger as ye, SelectValue as Ae, SelectContent as Ie, SelectItem as Ce } from "../select/select.js";
-import { GraphDropdown as Ne } from "./graph-dropdown.js";
-const Me = ({ size: e = 16 }) => /* @__PURE__ */ p(
+import { DEFAULT_SERIES_COLORS as T, getSeriesColorPalette as xe, GraphLegend as ge } from "../graph/graph.js";
+import { GraphViewWithData as Se } from "../graph/graph-view.js";
+import { Select as ye, SelectTrigger as Ae, SelectValue as Ie, SelectContent as Ce, SelectItem as Ne } from "../select/select.js";
+import { GraphDropdown as ke } from "./graph-dropdown.js";
+const Ee = ({ size: t = 16 }) => /* @__PURE__ */ v(
   "svg",
   {
-    width: e,
-    height: e,
+    width: t,
+    height: t,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -25,15 +24,15 @@ const Me = ({ size: e = 16 }) => /* @__PURE__ */ p(
     strokeLinejoin: "round",
     "aria-label": "Expand fullscreen",
     children: [
-      /* @__PURE__ */ n("title", { children: "Expand fullscreen" }),
-      /* @__PURE__ */ n("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
+      /* @__PURE__ */ o("title", { children: "Expand fullscreen" }),
+      /* @__PURE__ */ o("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
     ]
   }
-), ke = ({ size: e = 16 }) => /* @__PURE__ */ p(
+), Me = ({ size: t = 16 }) => /* @__PURE__ */ v(
   "svg",
   {
-    width: e,
-    height: e,
+    width: t,
+    height: t,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -42,97 +41,98 @@ const Me = ({ size: e = 16 }) => /* @__PURE__ */ p(
     strokeLinejoin: "round",
     "aria-label": "Exit fullscreen",
     children: [
-      /* @__PURE__ */ n("title", { children: "Exit fullscreen" }),
-      /* @__PURE__ */ n("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
+      /* @__PURE__ */ o("title", { children: "Exit fullscreen" }),
+      /* @__PURE__ */ o("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" })
     ]
   }
-), Ee = {
+), Re = {
   timeScale: { borderVisible: !1 },
   rightPriceScale: { borderVisible: !1 },
   leftPriceScale: { borderVisible: !1 }
-}, X = "ui-kit:tradingview-series-colors:";
-function j(e) {
+}, q = "ui-kit:tradingview-series-colors:";
+function j(t) {
   if (typeof window > "u" || !window.localStorage)
     return /* @__PURE__ */ new Map();
   try {
-    const r = window.localStorage.getItem(X + e);
+    const r = window.localStorage.getItem(q + t);
     if (!r) return /* @__PURE__ */ new Map();
     const c = JSON.parse(r);
     return c == null || typeof c != "object" ? /* @__PURE__ */ new Map() : new Map(
       Object.entries(c).filter(
-        ([, o]) => typeof o == "number" && o >= 0 && o < T.length
+        ([, n]) => typeof n == "number" && n >= 0 && n < T.length
       )
     );
   } catch {
     return /* @__PURE__ */ new Map();
   }
 }
-function Re(e, r) {
+function Oe(t, r) {
   if (!(typeof window > "u" || !window.localStorage))
     try {
       window.localStorage.setItem(
-        X + e,
+        q + t,
         JSON.stringify(Object.fromEntries(r))
       );
     } catch {
     }
 }
-function $(e, r) {
+function X(t, r) {
   if (r.size === 0) return;
-  const c = j(e);
-  for (const [o, v] of r)
-    c.set(o, v);
-  Re(e, c);
+  const c = j(t);
+  for (const [n, p] of r)
+    c.set(n, p);
+  Oe(t, c);
 }
 function Ze({
-  data: e,
+  data: t,
   yMeasureUnit: r,
   height: c = 306,
-  defaultGraph: o,
-  onGraphSelected: v,
+  defaultGraph: n,
+  onGraphSelected: p,
   graphs: f,
-  isMultipleSelect: q,
-  range: Q,
+  isMultipleSelect: Q,
+  range: Y,
   rangeList: S,
-  setRange: Y,
+  setRange: Z,
   onGraphExpanded: N,
-  isGraphExpanded: Z,
+  isGraphExpanded: D,
   onUnselectSeries: L,
-  graphsWithNoData: D,
-  loadingGraphs: M,
-  isLoading: V,
-  noDataMessage: _ = "No data available for this graph",
-  currentValueDecimals: P,
-  containerClassName: U,
-  useSharedPriceScale: K,
-  showCurrentValue: G,
-  yScaleMin: ee,
-  yScaleMinMultiple: te,
+  legendMarkers: V,
+  graphsWithNoData: P,
+  loadingGraphs: k,
+  isLoading: _,
+  noDataMessage: z = "No data available for this graph",
+  currentValueDecimals: U,
+  containerClassName: K,
+  useSharedPriceScale: G,
+  showCurrentValue: ee,
+  yScaleMin: te,
+  yScaleMinMultiple: re,
   seriesColorPersistenceKey: d,
-  title: re,
-  trailing: k,
+  title: ne,
+  trailing: E,
   ...oe
 }) {
-  const g = I(() => Array.isArray(e) ? e : e ? [e] : [], [e]), ne = I(() => Array.isArray(e) && e.length > 1, [e]), z = he(), le = fe(
+  const x = I(() => Array.isArray(t) ? t : t ? [t] : [], [t]), le = I(() => Array.isArray(t) && t.length > 1, [t]), F = ve(), ie = be(
     (u, y) => {
-      be.error(_);
+      we.error(z);
     },
-    [_]
-  ), ie = I(() => {
+    [z]
+  ), se = I(() => {
     if (r)
       return Array.isArray(r) ? r[0] : r;
-  }, [r]), se = !!(v && f && o), i = C(/* @__PURE__ */ new Map()), b = C(0), F = C(!1);
-  if (f && f.length > 0 && !F.current) {
-    F.current = !0;
+  }, [r]), ce = !!(p && f && n), i = C(/* @__PURE__ */ new Map()), b = C(0), H = C(!1);
+  if (f && f.length > 0 && !H.current) {
+    H.current = !0;
     const u = d ? j(d) : /* @__PURE__ */ new Map(), y = String(f[0].value);
     i.current.set(y, 0), b.current = 1;
-    for (let t = 1; t < f.length; t++) {
-      const a = String(f[t].value);
-      if (i.current.has(a)) continue;
-      const x = u.get(a) ?? t;
-      i.current.set(a, x), b.current = Math.max(b.current, x + 1);
+    for (let e = 1; e < f.length; e++) {
+      const m = String(f[e].value);
+      if (i.current.has(m)) continue;
+      const g = u.get(m) ?? e;
+      i.current.set(m, g), b.current = Math.max(b.current, g + 1);
     }
-    d && $(
+    d && X(
       d,
       i.current
     );
@@ -140,22 +140,22 @@ function Ze({
   const w = I(() => {
     const u = Array.isArray(r) ? r : void 0;
     if (d) {
-      const t = j(d);
-      for (const [a, h] of t)
-        i.current.has(a) || (i.current.set(a, h), b.current = Math.max(
+      const e = j(d);
+      for (const [m, h] of e)
+        i.current.has(m) || (i.current.set(m, h), b.current = Math.max(
           b.current,
           h + 1
         ));
     }
-    const y = g.map((t, a) => {
-      const h = t?.title || `Series ${a + 1}`, x = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, R = g.length === 1 ? x != null ? String(x) : "single" : t?.id || h;
+    const y = x.map((e, m) => {
+      const h = e?.title || `Series ${m + 1}`, g = n != null ? Array.isArray(n) ? n[0]?.value ?? n[0] : typeof n == "object" && "value" in n ? n.value : n : null, R = x.length === 1 ? g != null ? String(g) : "single" : e?.id || h;
       if (!i.current.has(R)) {
         const l = new Set(
           Array.from(i.current.values())
         );
         let s = b.current;
-        for (let m = 0; m < T.length; m++) {
-          const A = (b.current + m) % T.length;
+        for (let a = 0; a < T.length; a++) {
+          const A = (b.current + a) % T.length;
           if (!l.has(A)) {
             s = A;
             break;
@@ -163,33 +163,34 @@ function Ze({
         }
         i.current.set(R, s), b.current = s + 1;
       }
-      const ae = i.current.get(R) ?? 0, O = ve(ae), me = [...t?.data || []].sort((l, s) => {
-        const m = typeof l.time == "number" ? l.time : Number(l.time), A = typeof s.time == "number" ? s.time : Number(s.time);
-        return m - A;
+      const ae = i.current.get(R) ?? 0, O = xe(ae), fe = [...e?.data || []].sort((l, s) => {
+        const a = typeof l.time == "number" ? l.time : Number(l.time), A = typeof s.time == "number" ? s.time : Number(s.time);
+        return a - A;
       }).reduce((l, s) => {
-        const m = s.time;
-        return l.length === 0 || l[l.length - 1].time !== m ? l.push({ time: m, value: s.value }) : l[l.length - 1] = { time: m, value: s.value }, l;
-      }, []), J = t?.lineColor ?? t?.color ?? void 0;
+        const a = s.time;
+        return l.length === 0 || l[l.length - 1].time !== a ? l.push({ time: a, value: s.value }) : l[l.length - 1] = { time: a, value: s.value }, l;
+      }, []), $ = e?.lineColor ?? e?.color ?? void 0;
       return {
-        data: me,
+        data: fe,
         label: h,
-        yMeasureUnit: u?.[a] ?? (Array.isArray(r) ? void 0 : r),
-        ...t?.priceScaleId != null && {
-          priceScaleId: t.priceScaleId
+        ...e?.id != null && { id: e.id },
+        yMeasureUnit: u?.[m] ?? (Array.isArray(r) ? void 0 : r),
+        ...e?.priceScaleId != null && {
+          priceScaleId: e.priceScaleId
         },
-        ...t?.seriesType != null && {
-          seriesType: t.seriesType
+        ...e?.seriesType != null && {
+          seriesType: e.seriesType
         },
-        ...t?.lineStyle != null && {
-          lineStyle: t.lineStyle
+        ...e?.lineStyle != null && {
+          lineStyle: e.lineStyle
         },
-        ...J != null ? {
-          lineColor: J,
-          ...t?.topColor != null && {
-            topColor: t.topColor
+        ...$ != null ? {
+          lineColor: $,
+          ...e?.topColor != null && {
+            topColor: e.topColor
           },
-          ...t?.bottomColor != null && {
-            bottomColor: t.bottomColor
+          ...e?.bottomColor != null && {
+            bottomColor: e.bottomColor
           }
         } : {
           color: O.line,
@@ -198,60 +199,60 @@ function Ze({
         }
       };
     });
-    return d && i.current.size > 0 && $(
+    return d && i.current.size > 0 && X(
       d,
       i.current
     ), y;
-  }, [g, o, r, d]), H = V !== void 0 ? V : M !== void 0 ? M.size > 0 : ne && g.length > 0 ? g.some((u) => !u) : !e, B = C(w);
-  w.length > 0 && (B.current = w);
-  const W = w.length > 0 ? w : H ? B.current : w, E = re, ce = !z && N ? !0 : S.length > 0 || se || E != null || k != null, ue = v && f && o ? /* @__PURE__ */ n(
-    Ne,
+  }, [x, n, r, d]), B = _ !== void 0 ? _ : k !== void 0 ? k.size > 0 : le && x.length > 0 ? x.some((u) => !u) : !t, W = C(w);
+  w.length > 0 && (W.current = w);
+  const J = w.length > 0 ? w : B ? W.current : w, M = ne, ue = !F && N ? !0 : S.length > 0 || ce || M != null || E != null, de = p && f && n ? /* @__PURE__ */ o(
+    ke,
     {
-      onSelected: v,
+      onSelected: p,
       items: f,
-      defaultItem: o,
-      multiple: q,
-      graphsWithNoData: D,
-      loadingGraphs: M,
-      onNoDataSelected: le
+      defaultItem: n,
+      multiple: Q,
+      graphsWithNoData: P,
+      loadingGraphs: k,
+      onNoDataSelected: ie
     }
-  ) : E != null ? /* @__PURE__ */ n(we, { className: "min-w-0 truncate", children: E }) : null, de = ce && /* @__PURE__ */ p("div", { className: "flex w-full flex-row flex-wrap items-center justify-between gap-3", children: [
-    /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: ue }),
-    /* @__PURE__ */ p("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
-      k,
-      k != null && S.length > 0 ? /* @__PURE__ */ n("div", { className: "h-4 w-px shrink-0 bg-border" }) : null,
-      S.length > 0 ? /* @__PURE__ */ p(Se, { value: Q, onValueChange: Y, children: [
-        /* @__PURE__ */ n(
-          ye,
+  ) : M != null ? /* @__PURE__ */ o(he, { className: "min-w-0 truncate", children: M }) : null, me = ue && /* @__PURE__ */ v("div", { className: "flex w-full flex-row flex-wrap items-center justify-between gap-3", children: [
+    /* @__PURE__ */ o("div", { className: "min-w-0 flex-1", children: de }),
+    /* @__PURE__ */ v("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
+      E,
+      E != null && S.length > 0 ? /* @__PURE__ */ o("div", { className: "h-4 w-px shrink-0 bg-border" }) : null,
+      S.length > 0 ? /* @__PURE__ */ v(ye, { value: Y, onValueChange: Z, children: [
+        /* @__PURE__ */ o(
+          Ae,
           {
             size: "sm",
             className: "h-8 w-auto min-w-[4.5rem] gap-1.5 border-border bg-muted shadow-none",
-            children: /* @__PURE__ */ n(Ae, {})
+            children: /* @__PURE__ */ o(Ie, {})
           }
         ),
-        /* @__PURE__ */ n(Ie, { align: "end", children: S.map((u) => /* @__PURE__ */ n(Ce, { value: u.value, children: u.label }, u.value)) })
+        /* @__PURE__ */ o(Ce, { align: "end", children: S.map((u) => /* @__PURE__ */ o(Ne, { value: u.value, children: u.label }, u.value)) })
       ] }) : null,
-      !z && N && /* @__PURE__ */ n(
+      !F && N && /* @__PURE__ */ o(
         "button",
         {
           type: "button",
           className: "flex min-h-[26px] min-w-[44px] cursor-pointer items-center justify-center rounded-md border border-muted bg-muted px-2.5 py-1.5 text-center text-xs font-medium leading-[14px] text-muted-foreground transition-colors hover:border-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           onClick: N,
-          children: Z ? /* @__PURE__ */ n(ke, { size: 16 }) : /* @__PURE__ */ n(Me, { size: 16 })
+          children: D ? /* @__PURE__ */ o(Me, { size: 16 }) : /* @__PURE__ */ o(Ee, { size: 16 })
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ v(
     "div",
     {
       className: pe(
         "flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-none",
-        U
+        K
       ),
       children: [
-        de,
-        /* @__PURE__ */ n(
+        me,
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
@@ -259,12 +260,12 @@ function Ze({
               height: c ? `${c}px` : void 0
             },
             className: "w-full",
-            children: /* @__PURE__ */ n(
-              xe,
+            children: /* @__PURE__ */ o(
+              Se,
               {
                 ...oe,
                 series: w,
-                loading: H,
+                loading: B,
                 size: c ? "full" : "default",
                 padding: "none",
                 variant: "ghost",
@@ -272,22 +273,23 @@ function Ze({
                 containerClassName: "h-full overflow-hidden rounded-none border-0 bg-transparent shadow-none",
                 showLegend: !1,
                 onUnselectSeries: L,
-                yMeasureUnit: ie,
-                currentValueDecimals: P,
-                useSharedPriceScale: K,
-                showCurrentValue: G,
-                yScaleMin: ee,
-                yScaleMinMultiple: te,
+                yMeasureUnit: se,
+                currentValueDecimals: U,
+                useSharedPriceScale: G,
+                showCurrentValue: ee,
+                yScaleMin: te,
+                yScaleMinMultiple: re,
                 hideDefaultTooltip: !0,
-                optionsOverrides: Ee
+                optionsOverrides: Re
               }
             )
           }
         ),
-        W.length > 0 ? /* @__PURE__ */ n(
+        J.length > 0 || (V?.length ?? 0) > 0 ? /* @__PURE__ */ o(
           ge,
           {
-            series: W,
+            series: J,
+            markers: V,
             onUnselect: L,
             inline: !0
           }

package/dist/esm/components/truncated-text/index.js

@@ -0,0 +1,4 @@
+import { TruncatedText as t } from "./truncated-text.js";
+export {
+  t as TruncatedText
+};

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

@@ -0,0 +1,30 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as s, useCallback as l } from "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as u } from "../../utils/cn.js";
+import "luxon";
+import "../../utils/z-index.js";
+function T({
+  text: r,
+  className: n,
+  "data-testid": i
+}) {
+  const o = s(null), e = l(() => {
+    const t = o.current;
+    t && (t.title = t.scrollWidth > t.clientWidth ? r : "");
+  }, [r]);
+  return /* @__PURE__ */ c(
+    "p",
+    {
+      ref: o,
+      "data-testid": i,
+      className: u("truncate", n),
+      onMouseEnter: e,
+      onFocus: e,
+      children: r
+    }
+  );
+}
+export {
+  T as TruncatedText
+};

package/dist/esm/components/typography/typography.js

@@ -1,10 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
 import { cva as x } from "class-variance-authority";
-import * as p from "react";
-import "@gearbox-protocol/sdk";
-import { cn as c } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import * as c from "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as p } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
 const g = x("", {
@@ -76,7 +74,7 @@ const g = x("", {
   caption: "span",
   overline: "span",
   inherit: "span"
-}, u = p.forwardRef(
+}, u = c.forwardRef(
   ({
     className: e,
     variant: t = "inherit",
@@ -87,13 +85,13 @@ const g = x("", {
     truncate: a,
     as: l,
     ...h
-  }, m) => {
-    const d = l || f[t || "body"];
+  }, d) => {
+    const m = l || f[t || "body"];
     return /* @__PURE__ */ s(
-      d,
+      m,
       {
-        ref: m,
-        className: c(
+        ref: d,
+        className: p(
           g({
             variant: t,
             color: i,

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

@@ -1,10 +1,8 @@
 import { jsxs as t, jsx as e, Fragment as b } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 import * as v from "react";
-import "@gearbox-protocol/sdk";
-import { cn as r } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as n } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
 import { HelpTip as V } from "../help-tip/help-tip.js";
@@ -69,13 +67,13 @@ const k = l(
   ({
     className: h,
     align: p,
-    label: n,
+    label: r,
     description: s,
     valueDescription: o,
     tip: d,
-    value: m,
+    value: c,
     valueTo: a,
-    dimPreviousValue: c = !0,
+    dimPreviousValue: m = !0,
     size: i = "sm",
     weight: x = "medium",
     color: f = "default",
@@ -85,12 +83,12 @@ const k = l(
     "div",
     {
       ref: N,
-      className: r(k({ align: p }), h),
+      className: n(k({ align: p }), h),
       ...y,
       children: [
-        (n || s) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
-          n && /* @__PURE__ */ t("div", { className: r(j({ size: i })), children: [
-            n,
+        (r || s) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
+          r && /* @__PURE__ */ t("div", { className: n(j({ size: i })), children: [
+            r,
             d && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(V, { onPointerEnter: w, children: d }) })
           ] }),
           s && /* @__PURE__ */ e(
@@ -104,11 +102,11 @@ const k = l(
             }
           )
         ] }),
-        m && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
+        c && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
           /* @__PURE__ */ t(
             "div",
             {
-              className: r(
+              className: n(
                 "flex flex-nowrap",
                 "w-full max-w-full grow-0 shrink-0 basis-full",
                 "justify-end items-center"
@@ -117,21 +115,21 @@ const k = l(
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: r(
+                    className: n(
                       g({
                         size: i,
                         weight: x,
-                        color: a && c ? "secondary" : f
+                        color: a && m ? "secondary" : f
                       }),
                       a && "line-through [&_*]:line-through",
-                      a && c && "[&_*]:text-secondary-foreground"
+                      a && m && "[&_*]:text-secondary-foreground"
                     ),
-                    children: m
+                    children: c
                   }
                 ),
                 a && /* @__PURE__ */ t(b, { children: [
                   /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" }),
-                  /* @__PURE__ */ e("span", { className: r(g({ size: i, weight: x, color: f })), children: a })
+                  /* @__PURE__ */ e("span", { className: n(g({ size: i, weight: x, color: f })), children: a })
                 ] })
               ]
             }

package/dist/esm/components/vspace/vspace.js

@@ -1,33 +1,30 @@
 import { jsx as p } from "react/jsx-runtime";
-import { SPACE_HEIGHT as d, SPACE_PX as n } from "../base/spacing.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import { SPACE_HEIGHT as i, SPACE_PX as n } from "../base/spacing.js";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as m } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const i = (r, t) => typeof r == "number" ? r : n[r][t];
-function y({
+const e = (r, t) => typeof r == "number" ? r : n[r][t];
+function v({
   size: r,
   mobileSize: t,
   className: o
 }) {
   if (typeof r != "number" && t === void 0)
-    return /* @__PURE__ */ p("div", { className: m(d[r], o), "aria-hidden": !0 });
-  const e = {
-    "--vspace-h": `${i(t ?? r, "mobile")}px`,
-    "--vspace-h-md": `${i(r, "desktop")}px`
+    return /* @__PURE__ */ p("div", { className: m(i[r], o), "aria-hidden": !0 });
+  const d = {
+    "--vspace-h": `${e(t ?? r, "mobile")}px`,
+    "--vspace-h-md": `${e(r, "desktop")}px`
   };
   return /* @__PURE__ */ p(
     "div",
     {
       className: m("h-(--vspace-h) md:h-(--vspace-h-md)", o),
-      style: e,
+      style: d,
       "aria-hidden": !0
     }
   );
 }
 export {
-  y as VSpace
+  v as VSpace
 };