@gearbox-protocol/ui-kit 3.6.0-next.3 → 3.6.0

package/dist/esm/components/composites/pool-table/columns.js

@@ -1,51 +1,66 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { AssetsListCell as w } from "../../assets-list-cell/assets-list-cell.js";
-import { CompoundAPY as y } from "../../compound-apy/compound-apy.js";
-import { Description as s } from "../../description/description.js";
-import { NetworkIcon as P } from "../../network-icon/network-icon.js";
-import { PercentIndicator as b } from "../../percent-indicator/percent-indicator.js";
-import { PoolAPYTooltip as T } from "../../pool-apy-tooltip/pool-apy-tooltip.js";
-import { PoolIndicatorIcon as k } from "../../pool-indicator-icon/pool-indicator-icon.js";
-import { PoolPointsIndicator as A } from "../../pool-points-indicator/pool-points-indicator.js";
-import { Skeleton as m } from "../../skeleton/skeleton.js";
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { AssetsListCell as A } from "../../assets-list-cell/assets-list-cell.js";
+import { CompoundAPY as P } from "../../compound-apy/compound-apy.js";
+import { Description as m } from "../../description/description.js";
+import { NetworkIcon as C } from "../../network-icon/network-icon.js";
+import { PercentIndicator as x } from "../../percent-indicator/percent-indicator.js";
+import { PoolAPYTooltip as N } from "../../pool-apy-tooltip/pool-apy-tooltip.js";
+import { PoolIndicatorIcon as v } from "../../pool-indicator-icon/pool-indicator-icon.js";
+import { PoolPointsIndicator as D } from "../../pool-points-indicator/pool-points-indicator.js";
+import { Skeleton as u } from "../../skeleton/skeleton.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentageTemplate as C, formatMoney as u } from "../../../utils/format-money.js";
-import { tokenTemplate as h } from "../../../utils/templates.js";
+import { percentageTemplate as I, formatMoney as p } from "../../../utils/format-money.js";
+import { tokenTemplate as f } from "../../../utils/templates.js";
 import "luxon";
 import "../../../utils/z-index.js";
-import { TokenSymbol as x } from "../../token-symbol/token-symbol.js";
-function N({ ctx: e }) {
-  const { pool: l, underlyingToken: r, points: t, apy: o, isMobile: n } = e, d = n ? 20 : 24, c = /* @__PURE__ */ i(x, { token: r, size: d });
-  return t && t.length > 0 && o ? /* @__PURE__ */ i(
-    T,
+import { TokenSymbol as Y } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as h } from "../../typed-intl/index.js";
+function a(e, l, o) {
+  const t = e?.header ?? /* @__PURE__ */ i(
+    h,
     {
-      totalAPY: o.totalAPY,
-      baseAPY: o.baseAPY,
-      extraAPY: o.extraAPY,
+      messageId: e?.headerMessageId ?? l
+    }
+  );
+  let r;
+  if (e?.headerTip !== null) {
+    const n = e?.headerTipMessageId ?? o;
+    r = e?.headerTip ?? (n && /* @__PURE__ */ i(h, { messageId: n }));
+  }
+  return { header: t, headerTip: r, mobileTitle: e?.mobileTitle ?? t };
+}
+function z({ ctx: e }) {
+  const { pool: l, underlyingToken: o, points: t, apy: r, isMobile: n } = e, d = n ? 20 : 24, c = /* @__PURE__ */ i(Y, { token: o, size: d });
+  return t && t.length > 0 && r ? /* @__PURE__ */ i(
+    N,
+    {
+      totalAPY: r.totalAPY,
+      baseAPY: r.baseAPY,
+      extraAPY: r.extraAPY,
       points: t,
       tokensList: e.tokensList,
-      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(k, { size: d, children: c }) })
+      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(v, { size: d, children: c }) })
     }
-  ) : l.hasPoints ? /* @__PURE__ */ i(A, { size: d, children: c }) : c;
+  ) : l.hasPoints ? /* @__PURE__ */ i(D, { size: d, children: c }) : c;
 }
-function Y(e) {
-  const l = e.underlyingToken?.title ?? e.underlyingToken?.symbol ?? "", r = e.pool.version;
-  return r && r >= 300 && r < 310 ? `${l} v${Math.floor(r / 100)}` : l;
+function B(e) {
+  const l = e.underlyingToken?.title ?? e.underlyingToken?.symbol ?? "", o = e.pool.version;
+  return o && o >= 300 && o < 310 ? `${l} v${Math.floor(o / 100)}` : l;
 }
-function v({
+function M({
   ctx: e,
   renderDescription: l,
-  getPoolName: r
+  getPoolName: o
 }) {
-  const { pool: t } = e, o = r ? r(e) : Y(e);
-  return /* @__PURE__ */ a("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
+  const { pool: t } = e, r = o ? o(e) : B(e);
+  return /* @__PURE__ */ s("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
       t.network && /* @__PURE__ */ i(
-        P,
+        C,
         {
           network: t.network,
           isTest: !1,
@@ -53,196 +68,228 @@ function v({
           showTooltip: !0
         }
       ),
-      /* @__PURE__ */ i(N, { ctx: e })
+      /* @__PURE__ */ i(z, { ctx: e })
     ] }),
-    /* @__PURE__ */ a("div", { className: "flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0", children: [
-      /* @__PURE__ */ i("span", { className: "truncate max-w-full", children: o }),
-      l && /* @__PURE__ */ i(s, { className: "min-w-0 text-xs", children: l(e) })
+    /* @__PURE__ */ s("div", { className: "flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0", children: [
+      /* @__PURE__ */ i("span", { className: "truncate max-w-full", children: r }),
+      l && /* @__PURE__ */ i(m, { className: "min-w-0 text-xs", children: l(e) })
     ] })
   ] });
 }
-function D({ ctx: e }) {
-  const { pool: l, underlyingToken: r, loading: t } = e;
-  return /* @__PURE__ */ a("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(m, { loading: !!t, width: 60, children: u(l.expectedLiquidityInUSD ?? 0) }),
-    /* @__PURE__ */ i(s, { children: h(
+function S({ ctx: e }) {
+  const { pool: l, underlyingToken: o, loading: t } = e;
+  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: p(l.expectedLiquidityInUSD ?? 0) }),
+    /* @__PURE__ */ i(m, { children: f(
       l.expectedLiquidity,
-      r
+      o
     ) })
   ] });
 }
-function B({ ctx: e }) {
-  const { pool: l, underlyingToken: r, loading: t } = e;
-  return /* @__PURE__ */ a("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(m, { loading: !!t, width: 60, children: u(l.totalBorrowedInUSD ?? 0) }),
-    /* @__PURE__ */ i(s, { children: h(
+function F({ ctx: e }) {
+  const { pool: l, underlyingToken: o, loading: t } = e;
+  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: p(l.totalBorrowedInUSD ?? 0) }),
+    /* @__PURE__ */ i(m, { children: f(
       l.totalBorrowed,
-      r
+      o
     ) })
   ] });
 }
-function S({ ctx: e }) {
-  const { pool: l, loading: r, underlyingToken: t } = e, o = t?.decimals ?? 18, n = l.poolTokenSymbol != null ? {
+function L({ ctx: e }) {
+  const { pool: l, loading: o, underlyingToken: t } = e, r = t?.decimals ?? 18, n = l.poolTokenSymbol != null ? {
     title: l.poolTokenSymbol,
-    decimals: o
+    decimals: r
   } : t;
-  return /* @__PURE__ */ a("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(m, { loading: !!r, width: 60, children: u(l.userBalanceInUSD ?? 0) }),
-    l.userBalance !== void 0 && n && /* @__PURE__ */ i(s, { children: h(l.userBalance, n) })
+  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(u, { loading: !!o, width: 60, children: p(l.userBalanceInUSD ?? 0) }),
+    l.userBalance !== void 0 && n && /* @__PURE__ */ i(m, { children: f(l.userBalance, n) })
   ] });
 }
-function z(e, l) {
-  const r = e.pool.collateralTokens, { tokensList: t, isMobile: o } = e;
-  return !r?.length || !t ? null : /* @__PURE__ */ i(
-    w,
+function j(e, l) {
+  const o = e.pool.collateralTokens, { tokensList: t, isMobile: r } = e;
+  return !o?.length || !t ? null : /* @__PURE__ */ i(
+    A,
     {
       maxAssets: l,
       tokensList: t,
-      balances: r.map((n) => ({ token: n })),
-      iconSize: o ? 20 : 24,
+      balances: o.map((n) => ({ token: n })),
+      iconSize: r ? 20 : 24,
       options: { mode: "cascade" }
     }
   );
 }
-function Z(e) {
+function re(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.pool"
+  );
   return {
     id: "pool",
-    header: e?.header ?? "Pool",
+    header: l,
     width: e?.width ?? "186px",
     align: "left",
     className: "pl-4",
-    cell: (l) => /* @__PURE__ */ i(
-      v,
+    cell: (t) => /* @__PURE__ */ i(
+      M,
       {
-        ctx: l,
+        ctx: t,
         renderDescription: e?.renderDescription,
         getPoolName: e?.getPoolName
       }
     ),
-    mobileTitle: e?.header ?? "Pool"
+    mobileTitle: o
   };
 }
-function ee(e) {
+function ne(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.supply"
+  );
   return {
     id: "supply",
-    header: e?.header ?? "Supply",
+    header: l,
     width: e?.width ?? "1fr",
     align: "right",
     hideOnMedium: e?.hideOnMedium,
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "supply", defaultDirection: "desc" },
-    cell: (l) => /* @__PURE__ */ i(D, { ctx: l }),
-    mobileTitle: e?.header ?? "Supply"
+    cell: (t) => /* @__PURE__ */ i(S, { ctx: t }),
+    mobileTitle: o
   };
 }
-function le(e) {
+function ae(e) {
+  const { header: l, headerTip: o, mobileTitle: t } = a(
+    e,
+    "components.poolTable.supplyApy",
+    "components.poolTable.supplyApy.tip"
+  );
   return {
     id: "supplyApy",
-    header: e?.header ?? "Supply APY",
-    headerTip: e?.headerTip,
+    header: l,
+    headerTip: o,
     width: e?.width ?? "1.25fr",
     align: "right",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "apy", defaultDirection: "desc" },
-    cell: (l) => {
-      const { apy: r, loading: t, points: o, tokensList: n } = l, {
-        totalAPY: d = 0,
-        baseAPY: c = [],
-        extraAPY: f = [],
-        externalAPY: p,
-        apy7DAgo: g
-      } = r ?? {};
-      return /* @__PURE__ */ i(m, { width: 60, loading: !!t, children: /* @__PURE__ */ i(
-        y,
+    cell: (r) => {
+      const { apy: n, loading: d, points: c, tokensList: g } = r, {
+        totalAPY: b = 0,
+        baseAPY: T = [],
+        extraAPY: w = [],
+        externalAPY: y,
+        apy7DAgo: k
+      } = n ?? {};
+      return /* @__PURE__ */ i(u, { width: 60, loading: !!d, children: /* @__PURE__ */ i(
+        P,
         {
-          totalAPY: d,
-          totalAPYLoading: !!t,
-          baseAPY: c,
-          extraAPY: f,
-          points: o,
-          apy7DAgo: g,
-          tokensList: n,
-          externalAPY: p
+          totalAPY: b,
+          totalAPYLoading: !!d,
+          baseAPY: T,
+          extraAPY: w,
+          points: c,
+          apy7DAgo: k,
+          tokensList: g,
+          externalAPY: y
         }
       ) });
     },
-    mobileTitle: e?.header ?? "Supply APY"
+    mobileTitle: t
   };
 }
-function re(e) {
+function de(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.borrowed"
+  );
   return {
     id: "borrowed",
-    header: e?.header ?? "Borrowed",
+    header: l,
     width: e?.width ?? "1.15fr",
     align: "right",
-    cell: (l) => /* @__PURE__ */ i(B, { ctx: l }),
-    mobileTitle: e?.header ?? "Borrowed"
+    cell: (t) => /* @__PURE__ */ i(F, { ctx: t }),
+    mobileTitle: o
   };
 }
-function ie(e) {
+function se(e) {
+  const { header: l, headerTip: o, mobileTitle: t } = a(
+    e,
+    "components.poolTable.borrowApy"
+  );
   return {
     id: "borrowApy",
-    header: e?.header ?? "Borrow APY",
-    headerTip: e?.headerTip,
+    header: l,
+    headerTip: o,
     width: e?.width ?? "150px",
     align: "right",
-    cell: (l) => {
-      const r = l.pool.borrowAPY ?? e?.getBorrowRate?.(l.pool) ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: C(r) });
+    cell: (r) => {
+      const n = r.pool.borrowAPY ?? e?.getBorrowRate?.(r.pool) ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: I(n) });
     },
-    mobileTitle: e?.header ?? "Borrow APY"
+    mobileTitle: t
   };
 }
-function te(e) {
+function ce(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.utilization"
+  );
   return {
     id: "utilization",
-    header: e?.header ?? "Utilization",
+    header: l,
     width: e?.width ?? "150px",
     align: "right",
     className: "pr-4",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "utilization", defaultDirection: "desc" },
-    cell: (l) => {
-      const r = l.pool.utilization ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(b, { percent: r }) });
+    cell: (t) => {
+      const r = t.pool.utilization ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(x, { percent: r }) });
     },
-    mobileTitle: e?.header ?? "Utilization"
+    mobileTitle: o
   };
 }
-function oe(e) {
-  const l = e?.maxAssets ?? 5, r = (t) => z(t, l);
+function me(e) {
+  const l = e?.maxAssets ?? 5, o = (n) => j(n, l), { header: t, mobileTitle: r } = a(
+    e,
+    "components.poolTable.collateral"
+  );
   return {
     id: "collateral",
-    header: e?.header ?? "Collateral",
+    header: t,
     width: e?.width ?? "148px",
     align: e?.align ?? "left",
     gapBefore: e?.gapBefore ?? "md",
-    cell: e?.cell ?? r,
-    mobileCell: e?.mobileCell ?? e?.cell ?? r,
-    mobileTitle: e?.header ?? "Collateral"
+    cell: e?.cell ?? o,
+    mobileCell: e?.mobileCell ?? e?.cell ?? o,
+    mobileTitle: r
   };
 }
-function ne(e) {
+function ue(e) {
+  const { header: l, mobileTitle: o } = a(
+    e,
+    "components.poolTable.balance"
+  );
   return {
     id: "balance",
-    header: e?.header ?? "Your Balance",
+    header: l,
     width: e?.width ?? "1.15fr",
     align: "right",
     className: e?.className ?? "pr-4",
     headerClassName: e?.headerClassName ?? "pr-4",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "balance", defaultDirection: "desc" },
-    cell: e?.cell ?? ((l) => /* @__PURE__ */ i(S, { ctx: l })),
-    mobileTitle: e?.header ?? "Your Balance"
+    cell: e?.cell ?? ((t) => /* @__PURE__ */ i(L, { ctx: t })),
+    mobileTitle: o
   };
 }
-function ae(e) {
+function pe(e) {
   return e;
 }
 export {
-  ne as balanceColumn,
-  ie as borrowApyColumn,
-  re as borrowedColumn,
-  oe as collateralColumn,
-  ae as customColumn,
-  Z as poolColumn,
-  le as supplyApyColumn,
-  ee as supplyColumn,
-  te as utilizationColumn
+  ue as balanceColumn,
+  se as borrowApyColumn,
+  de as borrowedColumn,
+  me as collateralColumn,
+  pe as customColumn,
+  re as poolColumn,
+  ae as supplyApyColumn,
+  ne as supplyColumn,
+  ce as utilizationColumn
 };

package/dist/esm/components/compound-apy/compound-apy.js

@@ -132,7 +132,6 @@ import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
 import "../simple-dropdown/simple-dropdown.js";
-import "../vertical-indicator/vertical-indicator.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../search-bar/search-bar.js";
@@ -160,6 +159,7 @@ import "../time-to-liquidation/time-to-liquidation.js";
 import "../tip-card/tip-card.js";
 import "../toggle/toggle.js";
 import "../typography/typography.js";
+import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
 import "../with-filter-button/with-filter-button.js";
 function G(i, p) {

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

@@ -2,8 +2,8 @@ import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { cva as A } from "class-variance-authority";
 import * as B from "react";
 import { useMemo as D, useRef as N, useState as M, useEffect as E } from "react";
-import { ArcLoader as I } from "../arc-loader/arc-loader.js";
-import { cn as j } from "../../utils/cn.js";
+import { SpinnerLoader as I } from "../spinner-loader/spinner-loader.js";
+import { cn as y } from "../../utils/cn.js";
 import { Graph as O } from "./graph.js";
 const q = A(
   "relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",
@@ -35,41 +35,41 @@ const q = A(
       padding: "default"
     }
   }
-), y = B.forwardRef(
+), R = B.forwardRef(
   ({
     className: n,
     variant: t,
     size: l,
     padding: m,
-    title: r,
-    description: s,
-    toolbar: a,
+    title: a,
+    description: r,
+    toolbar: s,
     loading: i = !1,
     emptyMessage: d,
     error: c,
     children: f,
     ...p
   }, x) => {
-    const u = r || s || a;
+    const u = a || r || s;
     return /* @__PURE__ */ o(
       "div",
       {
         ref: x,
-        className: j(
+        className: y(
           "flex flex-col",
           q({ variant: t, size: l, padding: m, className: n })
         ),
         ...p,
         children: [
           u && /* @__PURE__ */ o("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
-            (r || s) && /* @__PURE__ */ o("div", { className: "flex-1", children: [
-              r && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: r }),
-              s && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: s })
+            (a || r) && /* @__PURE__ */ o("div", { className: "flex-1", children: [
+              a && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: a }),
+              r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: r })
             ] }),
-            a && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: a })
+            s && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: s })
           ] }),
           /* @__PURE__ */ o("div", { className: "relative flex-1 w-full min-h-0", children: [
-            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ e(I, { size: 32, strokeWidth: 3 }) }) }),
+            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ e(I, { size: 32, width: 3 }) }) }),
             c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
               /* @__PURE__ */ e(
                 "svg",
@@ -117,7 +117,7 @@ const q = A(
             /* @__PURE__ */ e(
               "div",
               {
-                className: j(
+                className: y(
                   "w-full h-full transition-[filter] duration-300 delay-300",
                   i && "blur-sm pointer-events-none"
                 ),
@@ -130,15 +130,15 @@ const q = A(
     );
   }
 );
-y.displayName = "GraphView";
+R.displayName = "GraphView";
 function X({
   series: n,
   data: t,
   lineColor: l,
   color: m,
-  topColor: r,
-  bottomColor: s,
-  graphId: a,
+  topColor: a,
+  bottomColor: r,
+  graphId: s,
   onUnselectSeries: i,
   loading: d,
   title: c,
@@ -146,8 +146,8 @@ function X({
   toolbar: p,
   emptyMessage: x = "No data available",
   error: u,
-  containerClassName: R,
-  variant: V,
+  containerClassName: V,
+  variant: W,
   size: z,
   padding: G,
   yMeasureUnit: g,
@@ -158,7 +158,7 @@ function X({
     if (n && n.length > 0)
       return n;
     if (t && t.length > 0) {
-      const W = l ?? m;
+      const j = l ?? m;
       return [
         {
           data: t.map((v) => ({
@@ -167,21 +167,21 @@ function X({
           })),
           label: "Value",
           yMeasureUnit: g,
-          ...W && { lineColor: W },
-          ...r && { topColor: r },
-          ...s && { bottomColor: s }
+          ...j && { lineColor: j },
+          ...a && { topColor: a },
+          ...r && { bottomColor: r }
         }
       ];
     }
     return [];
-  }, [n, t, g, l, m, r, s]), H = !d && h.length === 0, b = N(h);
+  }, [n, t, g, l, m, a, r]), S = !d && h.length === 0, b = N(h);
   h.length > 0 && (b.current = h);
-  const k = d && h.length === 0 ? b.current : h, S = k.length > 0;
+  const k = d && h.length === 0 ? b.current : h, H = k.length > 0;
   return /* @__PURE__ */ e(
-    y,
+    R,
     {
-      className: R,
-      variant: V,
+      className: V,
+      variant: W,
       size: z,
       padding: G,
       title: c,
@@ -189,8 +189,8 @@ function X({
       toolbar: p,
       loading: d,
       error: u,
-      emptyMessage: H ? x : void 0,
-      children: S && !u && /* @__PURE__ */ e(
+      emptyMessage: S ? x : void 0,
+      children: H && !u && /* @__PURE__ */ e(
         O,
         {
           series: k,
@@ -204,21 +204,21 @@ function X({
   );
 }
 function Y(n = 0) {
-  const t = N(null), l = N(null), [m, r] = M(null);
+  const t = N(null), l = N(null), [m, a] = M(null);
   return E(() => {
-    const s = () => {
+    const r = () => {
       if (t.current && l.current) {
         const d = l.current.clientWidth, c = t.current.clientWidth;
-        r(d - c - n);
+        a(d - c - n);
       }
-    }, a = l.current, i = a ? new ResizeObserver(s) : null;
-    return a && i?.observe(a), () => {
-      a && i?.unobserve(a);
+    }, s = l.current, i = s ? new ResizeObserver(r) : null;
+    return s && i?.observe(s), () => {
+      s && i?.unobserve(s);
     };
   }, [n]), { graphWidth: m, parentRef: l, asideRef: t };
 }
 export {
-  y as GraphView,
+  R as GraphView,
   X as GraphViewWithData,
   q as graphViewVariants,
   Y as useGraphAside