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

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

@@ -1,180 +1,173 @@
-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 { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { useMemo as I, useCallback as we, useRef as N } from "react";
+import { toast as ve } from "sonner";
+import { SectionHeading as pe } from "../base/section-heading/section-heading.js";
+import { useIsMobile as xe } from "../../hooks/use-media-query.js";
+import { cn as Se } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as pe } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
-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: t,
-    height: t,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-label": "Expand fullscreen",
-    children: [
-      /* @__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" })
-    ]
-  }
-), Me = ({ size: t = 16 }) => /* @__PURE__ */ v(
-  "svg",
-  {
-    width: t,
-    height: t,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-label": "Exit fullscreen",
-    children: [
-      /* @__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" })
-    ]
-  }
-), Re = {
+import { GraphLegend as he } from "../graph/graph.js";
+import { GraphViewWithData as ge } from "../graph/graph-view.js";
+import { DEFAULT_SERIES_COLORS as k } from "../graph/graph-vocabulary.js";
+import { getSeriesColorPalette as ye } from "../graph/series-palette.js";
+import { Select as Ae, SelectTrigger as Ie, SelectValue as Ne, SelectContent as Ce, SelectItem as Me } from "../select/select.js";
+import { GraphDropdown as Re } from "./graph-dropdown.js";
+const Ee = {
+  expand: "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",
+  exit: "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"
+}, X = ({
+  direction: r,
+  size: t = 16
+}) => {
+  const l = r === "expand" ? "Expand fullscreen" : "Exit fullscreen";
+  return /* @__PURE__ */ h(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-label": l,
+      children: [
+        /* @__PURE__ */ n("title", { children: l }),
+        /* @__PURE__ */ n("path", { d: Ee[r] })
+      ]
+    }
+  );
+}, Te = {
   timeScale: { borderVisible: !1 },
   rightPriceScale: { borderVisible: !1 },
   leftPriceScale: { borderVisible: !1 }
-}, q = "ui-kit:tradingview-series-colors:";
-function j(t) {
+}, Q = "ui-kit:tradingview-series-colors:";
+function L(r) {
   if (typeof window > "u" || !window.localStorage)
     return /* @__PURE__ */ new Map();
   try {
-    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(
-        ([, n]) => typeof n == "number" && n >= 0 && n < T.length
+    const t = window.localStorage.getItem(Q + r);
+    if (!t) return /* @__PURE__ */ new Map();
+    const l = JSON.parse(t);
+    return l == null || typeof l != "object" ? /* @__PURE__ */ new Map() : new Map(
+      Object.entries(l).filter(
+        ([, o]) => typeof o == "number" && o >= 0 && o < k.length
       )
     );
   } catch {
     return /* @__PURE__ */ new Map();
   }
 }
-function Oe(t, r) {
+function Oe(r, t) {
   if (!(typeof window > "u" || !window.localStorage))
     try {
       window.localStorage.setItem(
-        q + t,
-        JSON.stringify(Object.fromEntries(r))
+        Q + r,
+        JSON.stringify(Object.fromEntries(t))
       );
     } catch {
     }
 }
-function X(t, r) {
-  if (r.size === 0) return;
-  const c = j(t);
-  for (const [n, p] of r)
-    c.set(n, p);
-  Oe(t, c);
+function q(r, t) {
+  if (t.size === 0) return;
+  const l = L(r);
+  for (const [o, p] of t)
+    l.set(o, p);
+  Oe(r, l);
 }
-function Ze({
-  data: t,
-  yMeasureUnit: r,
-  height: c = 306,
-  defaultGraph: n,
+function Pe({
+  data: r,
+  yMeasureUnit: t,
+  height: l = 306,
+  defaultGraph: o,
   onGraphSelected: p,
   graphs: f,
-  isMultipleSelect: Q,
-  range: Y,
-  rangeList: S,
-  setRange: Z,
-  onGraphExpanded: N,
+  isMultipleSelect: Y,
+  range: Z,
+  rangeList: g,
+  setRange: P,
+  onGraphExpanded: C,
   isGraphExpanded: D,
-  onUnselectSeries: L,
+  onUnselectSeries: j,
   legendMarkers: V,
-  graphsWithNoData: P,
-  loadingGraphs: k,
+  graphsWithNoData: U,
+  loadingGraphs: M,
   isLoading: _,
   noDataMessage: z = "No data available for this graph",
-  currentValueDecimals: U,
-  containerClassName: K,
-  useSharedPriceScale: G,
-  showCurrentValue: ee,
-  yScaleMin: te,
-  yScaleMinMultiple: re,
+  currentValueDecimals: K,
+  containerClassName: G,
+  useSharedPriceScale: ee,
+  showCurrentValue: te,
+  yScaleMin: re,
+  yScaleMinMultiple: oe,
   seriesColorPersistenceKey: d,
   title: ne,
-  trailing: E,
-  ...oe
+  trailing: R,
+  ...le
 }) {
-  const x = I(() => Array.isArray(t) ? t : t ? [t] : [], [t]), le = I(() => Array.isArray(t) && t.length > 1, [t]), F = ve(), ie = be(
+  const x = I(() => Array.isArray(r) ? r : r ? [r] : [], [r]), ie = I(() => Array.isArray(r) && r.length > 1, [r]), F = xe(), se = we(
     (u, y) => {
-      we.error(z);
+      ve.error(z);
     },
     [z]
-  ), se = I(() => {
-    if (r)
-      return Array.isArray(r) ? r[0] : r;
-  }, [r]), ce = !!(p && f && n), i = C(/* @__PURE__ */ new Map()), b = C(0), H = C(!1);
+  ), ce = I(() => {
+    if (t)
+      return Array.isArray(t) ? t[0] : t;
+  }, [t]), ue = !!(p && f && o), s = N(/* @__PURE__ */ new Map()), b = N(0), H = N(!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;
+    const u = d ? L(d) : /* @__PURE__ */ new Map(), y = String(f[0].value);
+    s.current.set(y, 0), b.current = 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);
+      if (s.current.has(m)) continue;
+      const S = u.get(m) ?? e;
+      s.current.set(m, S), b.current = Math.max(b.current, S + 1);
     }
-    d && X(
+    d && q(
       d,
-      i.current
+      s.current
     );
   }
   const w = I(() => {
-    const u = Array.isArray(r) ? r : void 0;
+    const u = Array.isArray(t) ? t : void 0;
     if (d) {
-      const e = j(d);
-      for (const [m, h] of e)
-        i.current.has(m) || (i.current.set(m, h), b.current = Math.max(
+      const e = L(d);
+      for (const [m, v] of e)
+        s.current.has(m) || (s.current.set(m, v), b.current = Math.max(
           b.current,
-          h + 1
+          v + 1
         ));
     }
     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())
+      const v = e?.title || `Series ${m + 1}`, S = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, T = x.length === 1 ? S != null ? String(S) : "single" : e?.id || v;
+      if (!s.current.has(T)) {
+        const i = new Set(
+          Array.from(s.current.values())
         );
-        let s = b.current;
-        for (let a = 0; a < T.length; a++) {
-          const A = (b.current + a) % T.length;
-          if (!l.has(A)) {
-            s = A;
+        let c = b.current;
+        for (let a = 0; a < k.length; a++) {
+          const A = (b.current + a) % k.length;
+          if (!i.has(A)) {
+            c = A;
             break;
           }
         }
-        i.current.set(R, s), b.current = s + 1;
+        s.current.set(T, c), b.current = c + 1;
       }
-      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);
+      const fe = s.current.get(T) ?? 0, O = ye(fe), be = [...e?.data || []].sort((i, c) => {
+        const a = typeof i.time == "number" ? i.time : Number(i.time), A = typeof c.time == "number" ? c.time : Number(c.time);
         return a - A;
-      }).reduce((l, s) => {
-        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;
+      }).reduce((i, c) => {
+        const a = c.time;
+        return i.length === 0 || i[i.length - 1].time !== a ? i.push({ time: a, value: c.value }) : i[i.length - 1] = { time: a, value: c.value }, i;
       }, []), $ = e?.lineColor ?? e?.color ?? void 0;
       return {
-        data: fe,
-        label: h,
+        data: be,
+        label: v,
         ...e?.id != null && { id: e.id },
-        yMeasureUnit: u?.[m] ?? (Array.isArray(r) ? void 0 : r),
+        yMeasureUnit: u?.[m] ?? (Array.isArray(t) ? void 0 : t),
         ...e?.priceScaleId != null && {
           priceScaleId: e.priceScaleId
         },
@@ -199,98 +192,98 @@ function Ze({
         }
       };
     });
-    return d && i.current.size > 0 && X(
+    return d && s.current.size > 0 && q(
       d,
-      i.current
+      s.current
     ), y;
-  }, [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,
+  }, [x, o, t, d]), B = _ !== void 0 ? _ : M !== void 0 ? M.size > 0 : ie && x.length > 0 ? x.some((u) => !u) : !r, J = N(w);
+  w.length > 0 && (J.current = w);
+  const W = w.length > 0 ? w : B ? J.current : w, E = ne, de = !F && C ? !0 : g.length > 0 || ue || E != null || R != null, me = p && f && o ? /* @__PURE__ */ n(
+    Re,
     {
       onSelected: p,
       items: f,
-      defaultItem: n,
-      multiple: Q,
-      graphsWithNoData: P,
-      loadingGraphs: k,
-      onNoDataSelected: ie
+      defaultItem: o,
+      multiple: Y,
+      graphsWithNoData: U,
+      loadingGraphs: M,
+      onNoDataSelected: se
     }
-  ) : 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,
+  ) : E != null ? /* @__PURE__ */ n(pe, { className: "min-w-0 truncate", children: E }) : null, ae = de && /* @__PURE__ */ h("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: me }),
+    /* @__PURE__ */ h("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
+      R,
+      R != null && g.length > 0 ? /* @__PURE__ */ n("div", { className: "h-4 w-px shrink-0 bg-border" }) : null,
+      g.length > 0 ? /* @__PURE__ */ h(Ae, { value: Z, onValueChange: P, children: [
+        /* @__PURE__ */ n(
+          Ie,
           {
             size: "sm",
             className: "h-8 w-auto min-w-[4.5rem] gap-1.5 border-border bg-muted shadow-none",
-            children: /* @__PURE__ */ o(Ie, {})
+            children: /* @__PURE__ */ n(Ne, {})
           }
         ),
-        /* @__PURE__ */ o(Ce, { align: "end", children: S.map((u) => /* @__PURE__ */ o(Ne, { value: u.value, children: u.label }, u.value)) })
+        /* @__PURE__ */ n(Ce, { align: "end", children: g.map((u) => /* @__PURE__ */ n(Me, { value: u.value, children: u.label }, u.value)) })
       ] }) : null,
-      !F && N && /* @__PURE__ */ o(
+      !F && C && /* @__PURE__ */ n(
         "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: D ? /* @__PURE__ */ o(Me, { size: 16 }) : /* @__PURE__ */ o(Ee, { size: 16 })
+          onClick: C,
+          children: D ? /* @__PURE__ */ n(X, { direction: "exit", size: 16 }) : /* @__PURE__ */ n(X, { direction: "expand", size: 16 })
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ h(
     "div",
     {
-      className: pe(
+      className: Se(
         "flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-none",
-        K
+        G
       ),
       children: [
-        me,
-        /* @__PURE__ */ o(
+        ae,
+        /* @__PURE__ */ n(
           "div",
           {
             style: {
               width: "100%",
-              height: c ? `${c}px` : void 0
+              height: l ? `${l}px` : void 0
             },
             className: "w-full",
-            children: /* @__PURE__ */ o(
-              Se,
+            children: /* @__PURE__ */ n(
+              ge,
               {
-                ...oe,
+                ...le,
                 series: w,
                 loading: B,
-                size: c ? "full" : "default",
+                size: l ? "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: se,
-                currentValueDecimals: U,
-                useSharedPriceScale: G,
-                showCurrentValue: ee,
-                yScaleMin: te,
-                yScaleMinMultiple: re,
+                onUnselectSeries: j,
+                yMeasureUnit: ce,
+                currentValueDecimals: K,
+                useSharedPriceScale: ee,
+                showCurrentValue: te,
+                yScaleMin: re,
+                yScaleMinMultiple: oe,
                 hideDefaultTooltip: !0,
-                optionsOverrides: Re
+                optionsOverrides: Te
               }
             )
           }
         ),
-        J.length > 0 || (V?.length ?? 0) > 0 ? /* @__PURE__ */ o(
-          ge,
+        W.length > 0 || (V?.length ?? 0) > 0 ? /* @__PURE__ */ n(
+          he,
           {
-            series: J,
+            series: W,
             markers: V,
-            onUnselect: L,
+            onUnselect: j,
             inline: !0
           }
         ) : null
@@ -299,5 +292,5 @@ function Ze({
   );
 }
 export {
-  Ze as TradingView
+  Pe as TradingView
 };

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

@@ -1,23 +1,22 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as i } 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 "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-function T({
+function h({
   text: r,
   className: n,
-  "data-testid": i
+  "data-testid": c
 }) {
   const o = s(null), e = l(() => {
     const t = o.current;
     t && (t.title = t.scrollWidth > t.clientWidth ? r : "");
   }, [r]);
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ i(
     "p",
     {
       ref: o,
-      "data-testid": i,
+      "data-testid": c,
       className: u("truncate", n),
       onMouseEnter: e,
       onFocus: e,
@@ -26,5 +25,5 @@ function T({
   );
 }
 export {
-  T as TruncatedText
+  h as TruncatedText
 };

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

@@ -1,5 +1,4 @@
-import { Typography as a, typographyVariants as o } from "./typography.js";
+import { Typography as r } from "./typography.js";
 export {
-  a as Typography,
-  o as typographyVariants
+  r as Typography
 };

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

@@ -1,11 +1,10 @@
 import { jsx as s } from "react/jsx-runtime";
 import { cva as x } from "class-variance-authority";
 import * as c from "react";
+import { cn as g } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as p } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
-const g = x("", {
+const p = x("", {
   variants: {
     variant: {
       inherit: "",
@@ -91,8 +90,8 @@ const g = x("", {
       m,
       {
         ref: d,
-        className: p(
-          g({
+        className: g(
+          p({
             variant: t,
             color: i,
             weight: r,
@@ -109,6 +108,5 @@ const g = x("", {
 );
 u.displayName = "Typography";
 export {
-  u as Typography,
-  g as typographyVariants
+  u as Typography
 };

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

@@ -1,5 +1,4 @@
-import { VerticalIndicator as t, verticalIndicatorVariants as i } from "./vertical-indicator.js";
+import { VerticalIndicator as t } from "./vertical-indicator.js";
 export {
-  t as VerticalIndicator,
-  i as verticalIndicatorVariants
+  t as VerticalIndicator
 };

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

@@ -1,9 +1,8 @@
-import { jsxs as t, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { jsxs as t, jsx as e, Fragment as v } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
-import * as v from "react";
-import "@gearbox-protocol/sdk/onchain";
+import * as b from "react";
 import { cn as n } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 import { HelpTip as V } from "../help-tip/help-tip.js";
 import { Typography as u } from "../typography/typography.js";
@@ -16,8 +15,7 @@ const k = l(
       align: {
         start: "items-start",
         center: "items-center",
-        end: "items-end",
-        baseline: "items-baseline"
+        end: "items-end"
       }
     },
     defaultVariants: { align: "start" }
@@ -63,7 +61,7 @@ const k = l(
     weight: "medium",
     color: "default"
   }
-}), I = v.forwardRef(
+}), z = b.forwardRef(
   ({
     className: h,
     align: p,
@@ -127,7 +125,7 @@ const k = l(
                     children: c
                   }
                 ),
-                a && /* @__PURE__ */ t(b, { children: [
+                a && /* @__PURE__ */ t(v, { children: [
                   /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" }),
                   /* @__PURE__ */ e("span", { className: n(g({ size: i, weight: x, color: f })), children: a })
                 ] })
@@ -149,8 +147,7 @@ const k = l(
     }
   )
 );
-I.displayName = "VerticalIndicator";
+z.displayName = "VerticalIndicator";
 export {
-  I as VerticalIndicator,
-  k as verticalIndicatorVariants
+  z as VerticalIndicator
 };

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

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