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

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

@@ -1,17 +1,18 @@
-import { jsxs as S, jsx as l } from "react/jsx-runtime";
-import { useMemo as y, useCallback as ne, useRef as E } from "react";
-import { toast as ie } from "sonner";
-import { useIsMobile as le } from "../../hooks/use-media-query.js";
+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 { cn as se } from "../../utils/cn.js";
+import { cn as pe } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { RangeButtons as ce } from "../buttons/range-buttons/range-buttons.js";
-import { DEFAULT_SERIES_COLORS as k, getSeriesColorPalette as ue } from "../graph/graph.js";
-import { GraphViewWithData as me } from "../graph/graph-view.js";
-import { GraphDropdown as fe } from "./graph-dropdown.js";
-const de = ({ size: e = 16 }) => /* @__PURE__ */ S(
+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(
   "svg",
   {
     width: e,
@@ -24,11 +25,11 @@ const de = ({ size: e = 16 }) => /* @__PURE__ */ S(
     strokeLinejoin: "round",
     "aria-label": "Expand fullscreen",
     children: [
-      /* @__PURE__ */ l("title", { children: "Expand fullscreen" }),
-      /* @__PURE__ */ l("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__ */ 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" })
     ]
   }
-), ae = ({ size: e = 16 }) => /* @__PURE__ */ S(
+), ke = ({ size: e = 16 }) => /* @__PURE__ */ p(
   "svg",
   {
     width: e,
@@ -41,206 +42,260 @@ const de = ({ size: e = 16 }) => /* @__PURE__ */ S(
     strokeLinejoin: "round",
     "aria-label": "Exit fullscreen",
     children: [
-      /* @__PURE__ */ l("title", { children: "Exit fullscreen" }),
-      /* @__PURE__ */ l("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__ */ 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" })
     ]
   }
-), V = "ui-kit:tradingview-series-colors:";
+), Ee = {
+  timeScale: { borderVisible: !1 },
+  rightPriceScale: { borderVisible: !1 },
+  leftPriceScale: { borderVisible: !1 }
+}, X = "ui-kit:tradingview-series-colors:";
 function j(e) {
   if (typeof window > "u" || !window.localStorage)
     return /* @__PURE__ */ new Map();
   try {
-    const t = window.localStorage.getItem(V + e);
-    if (!t) return /* @__PURE__ */ new Map();
-    const c = JSON.parse(t);
+    const r = window.localStorage.getItem(X + e);
+    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 < k.length
+        ([, o]) => typeof o == "number" && o >= 0 && o < T.length
       )
     );
   } catch {
     return /* @__PURE__ */ new Map();
   }
 }
-function we(e, t) {
+function Re(e, r) {
   if (!(typeof window > "u" || !window.localStorage))
     try {
       window.localStorage.setItem(
-        V + e,
-        JSON.stringify(Object.fromEntries(t))
+        X + e,
+        JSON.stringify(Object.fromEntries(r))
       );
     } catch {
     }
 }
-function F(e, t) {
-  if (t.size === 0) return;
+function $(e, r) {
+  if (r.size === 0) return;
   const c = j(e);
-  for (const [o, v] of t)
+  for (const [o, v] of r)
     c.set(o, v);
-  we(e, c);
+  Re(e, c);
 }
-function Re({
+function Ze({
   data: e,
-  yMeasureUnit: t,
+  yMeasureUnit: r,
   height: c = 306,
   defaultGraph: o,
   onGraphSelected: v,
-  graphs: d,
-  isMultipleSelect: B,
-  range: T,
-  rangeList: N,
-  setRange: D,
-  onGraphExpanded: A,
-  isGraphExpanded: W,
-  onUnselectSeries: H,
-  graphsWithNoData: J,
-  loadingGraphs: I,
-  noDataMessage: R = "No data available for this graph",
-  currentValueDecimals: $,
-  containerClassName: X,
-  useSharedPriceScale: q,
-  showCurrentValue: Q,
-  yScaleMin: Y,
-  yScaleMinMultiple: Z,
-  seriesColorPersistenceKey: u,
-  ...U
+  graphs: f,
+  isMultipleSelect: q,
+  range: Q,
+  rangeList: S,
+  setRange: Y,
+  onGraphExpanded: N,
+  isGraphExpanded: Z,
+  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,
+  seriesColorPersistenceKey: d,
+  title: re,
+  trailing: k,
+  ...oe
 }) {
-  const b = y(() => Array.isArray(e) ? e : e ? [e] : [], [e]), L = y(() => Array.isArray(e) && e.length > 1, [e]), O = le(), K = ne(
-    (w, g) => {
-      ie.error(R);
+  const g = I(() => Array.isArray(e) ? e : e ? [e] : [], [e]), ne = I(() => Array.isArray(e) && e.length > 1, [e]), z = he(), le = fe(
+    (u, y) => {
+      be.error(_);
     },
-    [R]
-  ), P = y(() => {
-    if (t)
-      return Array.isArray(t) ? t[0] : t;
-  }, [t]), G = (!O && A || N.length > 0 || v && d && o) && /* @__PURE__ */ S("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
-    /* @__PURE__ */ l("div", { children: v && d && o && /* @__PURE__ */ l(
-      fe,
-      {
-        onSelected: v,
-        items: d,
-        defaultItem: o,
-        multiple: B,
-        graphsWithNoData: J,
-        loadingGraphs: I,
-        onNoDataSelected: K
-      }
-    ) }),
-    /* @__PURE__ */ S("div", { className: "flex flex-row flex-nowrap justify-start sm:justify-end items-center flex-1", children: [
-      /* @__PURE__ */ l(ce, { range: T, rangeList: N, setRange: D }),
-      !O && A && /* @__PURE__ */ l(
-        "button",
-        {
-          type: "button",
-          className: "px-2.5 py-1.5 flex min-w-[44px] min-h-[26px] justify-center items-center text-xs leading-[14px] font-medium text-center rounded-md border cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-muted border-muted text-muted-foreground hover:border-secondary ml-1.5",
-          onClick: A,
-          children: W ? /* @__PURE__ */ l(ae, { size: 16 }) : /* @__PURE__ */ l(de, { size: 16 })
-        }
-      )
-    ] })
-  ] }), i = E(/* @__PURE__ */ new Map()), a = E(0), _ = E(!1);
-  if (d && d.length > 0 && !_.current) {
-    _.current = !0;
-    const w = u ? j(u) : /* @__PURE__ */ new Map(), g = String(d[0].value);
-    i.current.set(g, 0), a.current = 1;
-    for (let r = 1; r < d.length; r++) {
-      const m = String(d[r].value);
-      if (i.current.has(m)) continue;
-      const p = w.get(m) ?? r;
-      i.current.set(m, p), a.current = Math.max(a.current, p + 1);
+    [_]
+  ), ie = 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;
+    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);
     }
-    u && F(
-      u,
+    d && $(
+      d,
       i.current
     );
   }
-  const ee = y(() => {
-    const w = Array.isArray(t) ? t : void 0;
-    if (u) {
-      const r = j(u);
-      for (const [m, x] of r)
-        i.current.has(m) || (i.current.set(m, x), a.current = Math.max(
-          a.current,
-          x + 1
+  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(
+          b.current,
+          h + 1
         ));
     }
-    const g = b.map((r, m) => {
-      const x = r?.title || `Series ${m + 1}`, p = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, C = b.length === 1 ? p != null ? String(p) : "single" : r?.id || x;
-      if (!i.current.has(C)) {
-        const n = new Set(
+    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;
+      if (!i.current.has(R)) {
+        const l = new Set(
           Array.from(i.current.values())
         );
-        let s = a.current;
-        for (let f = 0; f < k.length; f++) {
-          const h = (a.current + f) % k.length;
-          if (!n.has(h)) {
-            s = h;
+        let s = b.current;
+        for (let m = 0; m < T.length; m++) {
+          const A = (b.current + m) % T.length;
+          if (!l.has(A)) {
+            s = A;
             break;
           }
         }
-        i.current.set(C, s), a.current = s + 1;
+        i.current.set(R, s), b.current = s + 1;
       }
-      const oe = i.current.get(C) ?? 0, M = ue(oe), re = [...r?.data || []].sort((n, s) => {
-        const f = typeof n.time == "number" ? n.time : Number(n.time), h = typeof s.time == "number" ? s.time : Number(s.time);
-        return f - h;
-      }).reduce((n, s) => {
-        const f = s.time;
-        return n.length === 0 || n[n.length - 1].time !== f ? n.push({ time: f, value: s.value }) : n[n.length - 1] = { time: f, value: s.value }, n;
-      }, []), z = r?.lineColor ?? r?.color ?? void 0;
+      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;
+      }).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;
       return {
-        data: re,
-        label: x,
-        yMeasureUnit: w?.[m] ?? (Array.isArray(t) ? void 0 : t),
-        ...z != null ? {
-          lineColor: z,
-          ...r?.topColor != null && {
-            topColor: r.topColor
+        data: me,
+        label: h,
+        yMeasureUnit: u?.[a] ?? (Array.isArray(r) ? void 0 : r),
+        ...t?.priceScaleId != null && {
+          priceScaleId: t.priceScaleId
+        },
+        ...t?.seriesType != null && {
+          seriesType: t.seriesType
+        },
+        ...t?.lineStyle != null && {
+          lineStyle: t.lineStyle
+        },
+        ...J != null ? {
+          lineColor: J,
+          ...t?.topColor != null && {
+            topColor: t.topColor
           },
-          ...r?.bottomColor != null && {
-            bottomColor: r.bottomColor
+          ...t?.bottomColor != null && {
+            bottomColor: t.bottomColor
           }
         } : {
-          color: M.line,
-          topColor: M.top,
-          bottomColor: M.bottom
+          color: O.line,
+          topColor: O.top,
+          bottomColor: O.bottom
         }
       };
     });
-    return u && i.current.size > 0 && F(
-      u,
+    return d && i.current.size > 0 && $(
+      d,
       i.current
-    ), g;
-  }, [b, o, t, u]), te = I !== void 0 ? I.size > 0 : L && b.length > 0 ? b.some((w) => !w) : !e;
-  return /* @__PURE__ */ l(
-    "div",
+    ), 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,
     {
-      style: {
-        width: "100%",
-        height: c ? `${c}px` : void 0
-      },
-      className: "w-full",
-      children: /* @__PURE__ */ l(
-        me,
+      onSelected: v,
+      items: f,
+      defaultItem: o,
+      multiple: q,
+      graphsWithNoData: D,
+      loadingGraphs: M,
+      onNoDataSelected: le
+    }
+  ) : 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,
+          {
+            size: "sm",
+            className: "h-8 w-auto min-w-[4.5rem] gap-1.5 border-border bg-muted shadow-none",
+            children: /* @__PURE__ */ n(Ae, {})
+          }
+        ),
+        /* @__PURE__ */ n(Ie, { align: "end", children: S.map((u) => /* @__PURE__ */ n(Ce, { value: u.value, children: u.label }, u.value)) })
+      ] }) : null,
+      !z && N && /* @__PURE__ */ n(
+        "button",
         {
-          series: ee,
-          loading: te,
-          toolbar: G,
-          size: c ? "full" : "default",
-          containerClassName: se("h-full", X),
-          showLegend: L,
-          onUnselectSeries: H,
-          yMeasureUnit: P,
-          currentValueDecimals: $,
-          useSharedPriceScale: q,
-          showCurrentValue: Q,
-          yScaleMin: Y,
-          yScaleMinMultiple: Z,
-          ...U
+          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 })
         }
       )
+    ] })
+  ] });
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: pe(
+        "flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-none",
+        U
+      ),
+      children: [
+        de,
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: c ? `${c}px` : void 0
+            },
+            className: "w-full",
+            children: /* @__PURE__ */ n(
+              xe,
+              {
+                ...oe,
+                series: w,
+                loading: H,
+                size: c ? "full" : "default",
+                padding: "none",
+                variant: "ghost",
+                className: "rounded-md border border-border bg-card",
+                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,
+                hideDefaultTooltip: !0,
+                optionsOverrides: Ee
+              }
+            )
+          }
+        ),
+        W.length > 0 ? /* @__PURE__ */ n(
+          ge,
+          {
+            series: W,
+            onUnselect: L,
+            inline: !0
+          }
+        ) : null
+      ]
     }
   );
 }
 export {
-  Re as TradingView
+  Ze as TradingView
 };

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

@@ -1,15 +1,15 @@
 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 * as v from "react";
 import "@gearbox-protocol/sdk";
-import { cn as a } from "../../utils/cn.js";
+import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { Description as f } from "../description/description.js";
-import { HelpTip as v } from "../help-tip/help-tip.js";
-const y = l(
+import { HelpTip as V } from "../help-tip/help-tip.js";
+import { Typography as u } from "../typography/typography.js";
+const k = l(
   ["flex flex-nowrap", "w-full max-w-full grow-0 shrink-0 basis-full"].join(
     " "
   ),
@@ -24,7 +24,7 @@ const y = l(
     },
     defaultVariants: { align: "start" }
   }
-), k = l(
+), j = l(
   "flex items-center grow shrink-0 basis-[0%] text-left text-foreground",
   {
     variants: {
@@ -37,7 +37,7 @@ const y = l(
     },
     defaultVariants: { size: "default" }
   }
-), u = l("text-right font-medium", {
+), g = l("text-right font-medium", {
   variants: {
     size: {
       xs: "text-xs leading-[14px]",
@@ -65,40 +65,50 @@ const y = l(
     weight: "medium",
     color: "default"
   }
-}), j = V.forwardRef(
+}), I = v.forwardRef(
   ({
-    className: g,
-    align: h,
-    label: s,
-    description: n,
-    valueDescription: m,
-    tip: o,
-    value: d,
-    valueTo: r,
+    className: h,
+    align: p,
+    label: n,
+    description: s,
+    valueDescription: o,
+    tip: d,
+    value: m,
+    valueTo: a,
+    dimPreviousValue: c = !0,
     size: i = "sm",
-    weight: c = "medium",
-    color: x = "default",
-    onPointerEnterTip: p,
-    ...w
+    weight: x = "medium",
+    color: f = "default",
+    onPointerEnterTip: w,
+    ...y
   }, N) => /* @__PURE__ */ t(
     "div",
     {
       ref: N,
-      className: a(y({ align: h }), g),
-      ...w,
+      className: r(k({ align: p }), h),
+      ...y,
       children: [
-        (s || n) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
-          s && /* @__PURE__ */ t("div", { className: a(k({ size: i })), children: [
-            s,
-            o && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(v, { onPointerEnter: p, children: o }) })
+        (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,
+            d && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(V, { onPointerEnter: w, children: d }) })
           ] }),
-          n && /* @__PURE__ */ e(f, { className: "text-left", children: n })
+          s && /* @__PURE__ */ e(
+            u,
+            {
+              variant: "caption",
+              color: "secondary",
+              as: "div",
+              className: "text-left",
+              children: s
+            }
+          )
         ] }),
-        d && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
+        m && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
           /* @__PURE__ */ t(
             "div",
             {
-              className: a(
+              className: r(
                 "flex flex-nowrap",
                 "w-full max-w-full grow-0 shrink-0 basis-full",
                 "justify-end items-center"
@@ -107,28 +117,42 @@ const y = l(
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: a(
-                      u({ size: i, weight: c, color: x }),
-                      r && "line-through [&>*]:line-through"
+                    className: r(
+                      g({
+                        size: i,
+                        weight: x,
+                        color: a && c ? "secondary" : f
+                      }),
+                      a && "line-through [&_*]:line-through",
+                      a && c && "[&_*]:text-secondary-foreground"
                     ),
-                    children: d
+                    children: m
                   }
                 ),
-                r && /* @__PURE__ */ t(b, { children: [
+                a && /* @__PURE__ */ t(b, { children: [
                   /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" }),
-                  /* @__PURE__ */ e("span", { className: a(u({ size: i, weight: c, color: x })), children: r })
+                  /* @__PURE__ */ e("span", { className: r(g({ size: i, weight: x, color: f })), children: a })
                 ] })
               ]
             }
           ),
-          m && /* @__PURE__ */ e(f, { className: "text-right", children: m })
+          o && /* @__PURE__ */ e(
+            u,
+            {
+              variant: "caption",
+              color: "secondary",
+              as: "div",
+              className: "text-right",
+              children: o
+            }
+          )
         ] })
       ]
     }
   )
 );
-j.displayName = "VerticalIndicator";
+I.displayName = "VerticalIndicator";
 export {
-  j as VerticalIndicator,
-  y as verticalIndicatorVariants
+  I as VerticalIndicator,
+  k as verticalIndicatorVariants
 };

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

@@ -1,7 +1,33 @@
-import { jsx as e } from "react/jsx-runtime";
-function i({ height: t }) {
-  return /* @__PURE__ */ e("div", { style: { height: `${t}px` } });
+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 { 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({
+  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("h-(--vspace-h) md:h-(--vspace-h-md)", o),
+      style: e,
+      "aria-hidden": !0
+    }
+  );
 }
 export {
-  i as VSpace
+  y as VSpace
 };