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

package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmShell.js

@@ -1,87 +1,127 @@
-import { jsxs as e, jsx as i, Fragment as C } from "react/jsx-runtime";
-import { ErrorLineMessage as S } from "../../../../error-message/error-line-message.js";
+import { jsx as r, jsxs as p, Fragment as v } from "react/jsx-runtime";
+import { StyledDialogContainer as C } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import { ConfirmMenu as S } from "../../../../confirm-menu/confirm-menu.js";
+import { ErrorLineMessage as k } from "../../../../error-message/error-line-message.js";
 import "react-intl";
 import "../../../../buttons/button/button.js";
 import "../../../../dialog/dialog-container.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import "clsx";
-import "tailwind-merge";
+import { cn as T } from "../../../../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import { SkeletonStack as k } from "../../../../skeleton/skeleton-stack.js";
-import { VSpace as a } from "../../../../vspace/vspace.js";
-import { ProgressStepper as P } from "../stepper/ProgressStepper.js";
-import { shouldShowTransactionProgressStepper as T } from "../stepper/transactionExecutionStepTypes.js";
-import { computeTransactionConfirmDialogLayout as g } from "./computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as r, transactionConfirmShellContentVariants as z, transactionConfirmPreviewScrollVariants as V } from "./constants.js";
-function Q({
-  phase: d = "confirm",
-  header: l,
-  preview: f,
-  previewLoading: h = !1,
-  previewError: m,
-  previewErrorTitle: u = "Unable to preview transaction",
-  previewClassName: p = V(),
-  execution: w,
-  progressSteps: o,
-  renderProgressStepLabel: n,
-  result: c,
-  className: x,
-  "data-testid": v = r.root
+import { Modal as N } from "../../../../modal/modal.js";
+import { SkeletonStack as P } from "../../../../skeleton/skeleton-stack.js";
+import { VSpace as h } from "../../../../vspace/vspace.js";
+import { ProgressStepper as E } from "../stepper/ProgressStepper.js";
+import { shouldShowTransactionProgressStepper as L } from "../stepper/transactionExecutionStepTypes.js";
+import { computeTransactionConfirmDialogLayout as R } from "./computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as c, transactionConfirmModalContainerVariants as A, transactionConfirmDialogShellVariants as D, transactionConfirmShellContentVariants as I, transactionConfirmPreviewScrollVariants as V } from "./constants.js";
+const M = "Unable to preview transaction";
+function ne(e) {
+  const {
+    mode: i,
+    phase: d = "confirm",
+    onClose: l,
+    title: m,
+    titleAddon: n,
+    hideTitleAddonOnResult: u = !0,
+    body: t,
+    className: a,
+    previewClassName: o,
+    "data-testid": s,
+    shellTestId: g
+  } = e;
+  if (e.mode === "dialog" && e.open === !1) return null;
+  const f = t.kind === "ready" ? d : "confirm", x = f !== "confirm" && f !== "awaiting_receipt" && u ? void 0 : n, w = /* @__PURE__ */ r(
+    C,
+    {
+      className: T(
+        D(),
+        i === "dialog" ? A() : null,
+        a
+      ),
+      "data-testid": s,
+      children: /* @__PURE__ */ r(
+        z,
+        {
+          body: t,
+          phase: f,
+          previewClassName: o,
+          testId: g ?? c.root,
+          header: /* @__PURE__ */ r(
+            S,
+            {
+              title: m,
+              titleAddon: x,
+              onClose: l
+            }
+          )
+        }
+      )
+    }
+  );
+  return i === "page" ? w : /* @__PURE__ */ r(N, { show: !0, onClickOutside: l, zIndexLayer: "MODAL", children: w });
+}
+function z({
+  body: e,
+  phase: i,
+  previewClassName: d,
+  testId: l,
+  header: m
 }) {
-  const N = !!(o && n && T(o)), t = g(d, N);
-  return /* @__PURE__ */ e(
+  const n = e.kind === "ready" ? e.stepper : void 0, u = !!(n && L(n.steps)), t = R(i, u), a = e.kind === "ready" ? _(e, i) : void 0, o = e.kind === "ready" ? e.execution : void 0;
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: z({ className: x }),
-      "data-testid": v,
+      className: I(),
+      "data-testid": l,
       children: [
-        l ? /* @__PURE__ */ i("div", { className: "shrink-0", children: l }) : null,
-        l ? /* @__PURE__ */ i(a, { size: "sm" }) : null,
-        t.showResult && c ? /* @__PURE__ */ i(
+        /* @__PURE__ */ r("div", { className: "shrink-0", children: m }),
+        /* @__PURE__ */ r(h, { size: "sm" }),
+        t.showResult && a ? /* @__PURE__ */ r(
           "div",
           {
             className: "flex min-h-0 flex-1 flex-col",
-            "data-testid": r.result,
-            children: c
+            "data-testid": c.result,
+            children: a
           }
         ) : null,
-        t.showResult ? null : /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-          t.showPreview ? /* @__PURE__ */ i("div", { className: p, children: h ? /* @__PURE__ */ i(k, { lines: 3 }) : m ? /* @__PURE__ */ i(
-            S,
+        t.showResult ? null : /* @__PURE__ */ p("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+          t.showPreview ? /* @__PURE__ */ r(
+            "div",
             {
-              err: m,
-              title: u
+              className: d ?? V(),
+              children: /* @__PURE__ */ r(O, { body: e })
             }
-          ) : f }) : null,
-          t.showPreview && t.showExecution ? /* @__PURE__ */ i(a, { size: "md" }) : null,
-          t.showExecution ? /* @__PURE__ */ i(
+          ) : null,
+          t.showPreview && t.showExecution && o ? /* @__PURE__ */ r(h, { size: "md" }) : null,
+          t.showExecution && o ? /* @__PURE__ */ r(
             "div",
             {
               className: "min-w-0 w-full shrink-0",
-              "data-testid": r.execution,
-              children: w
+              "data-testid": c.execution,
+              children: o
             }
           ) : null
         ] }),
-        t.showProgressStepper && o && n ? /* @__PURE__ */ e(C, { children: [
-          /* @__PURE__ */ i(a, { size: "md" }),
-          /* @__PURE__ */ i(
+        t.showProgressStepper && n ? /* @__PURE__ */ p(v, { children: [
+          /* @__PURE__ */ r(h, { size: "md" }),
+          /* @__PURE__ */ r(
             "div",
             {
               className: "shrink-0",
-              "data-testid": r.progress,
-              children: /* @__PURE__ */ i(
-                P,
+              "data-testid": c.progress,
+              children: /* @__PURE__ */ r(
+                E,
                 {
                   tone: "muted",
-                  steps: o.map((s) => ({
+                  steps: n.steps.map((s) => ({
                     id: s.id,
                     status: s.status,
-                    label: n(s)
+                    label: n.renderLabel(s)
                   }))
                 }
               )
@@ -92,6 +132,23 @@ function Q({
     }
   );
 }
+function O({
+  body: e
+}) {
+  return e.kind === "placeholder" ? /* @__PURE__ */ r(v, { children: e.node }) : e.kind === "error" ? /* @__PURE__ */ r(
+    k,
+    {
+      err: e.error,
+      title: e.title ?? M
+    }
+  ) : e.previewLoading ? /* @__PURE__ */ r(P, { lines: 3 }) : /* @__PURE__ */ r(v, { children: e.preview });
+}
+function _(e, i) {
+  if (e.result) {
+    if (i === "success") return e.result.success;
+    if (i === "failure") return e.result.failure;
+  }
+}
 export {
-  Q as TransactionConfirmShell
+  ne as TransactionConfirmShell
 };

package/dist/esm/components/composites/tx-preview/confirm/dialog/index.js

@@ -1,14 +1,12 @@
-import { computeTransactionConfirmDialogLayout as n } from "./computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as i, transactionConfirmDialogShellVariants as t, transactionConfirmModalContainerVariants as e, transactionConfirmPreviewScrollVariants as m, transactionConfirmShellContentVariants as s } from "./constants.js";
-import { TransactionConfirmModalView as l } from "./TransactionConfirmModalView.js";
-import { TransactionConfirmPageView as C } from "./TransactionConfirmPageView.js";
+import { computeTransactionConfirmDialogLayout as a } from "./computeTransactionConfirmDialogLayout.js";
+import { TransactionConfirmDialogTest as t, transactionConfirmDialogShellVariants as i, transactionConfirmModalContainerVariants as e, transactionConfirmPreviewScrollVariants as l, transactionConfirmShellContentVariants as s } from "./constants.js";
+import { TransactionConfirmShell as f } from "./TransactionConfirmShell.js";
 export {
-  i as TransactionConfirmDialogTest,
-  l as TransactionConfirmModalView,
-  C as TransactionConfirmPageView,
-  n as computeTransactionConfirmDialogLayout,
-  t as transactionConfirmDialogShellVariants,
+  t as TransactionConfirmDialogTest,
+  f as TransactionConfirmShell,
+  a as computeTransactionConfirmDialogLayout,
+  i as transactionConfirmDialogShellVariants,
   e as transactionConfirmModalContainerVariants,
-  m as transactionConfirmPreviewScrollVariants,
+  l as transactionConfirmPreviewScrollVariants,
   s as transactionConfirmShellContentVariants
 };

package/dist/esm/components/composites/tx-preview/confirm/dialog/transactionConfirmShellTypes.js

@@ -0,0 +1 @@
+

package/dist/esm/components/composites/tx-preview/confirm/index.js

@@ -1,40 +1,38 @@
 import { TransactionConfirmAmountFieldTest as n, TransactionConfirmAmountPairTest as t } from "./amounts/constants.js";
 import { TransactionConfirmAmountField as e } from "./amounts/TransactionConfirmAmountField.js";
 import { computeTransactionConfirmDialogLayout as s } from "./dialog/computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as f, transactionConfirmDialogShellVariants as c, transactionConfirmModalContainerVariants as T, transactionConfirmPreviewScrollVariants as p, transactionConfirmShellContentVariants as C } from "./dialog/constants.js";
-import { TransactionConfirmModalView as u } from "./dialog/TransactionConfirmModalView.js";
-import { TransactionConfirmPageView as S } from "./dialog/TransactionConfirmPageView.js";
-import { TransactionConfirmExecuteButton as h } from "./execution/TransactionConfirmExecuteButton.js";
-import { TransactionConfirmExecuteButtonTest as P, TransactionConfirmFailureResultTest as R, TransactionConfirmSuccessResultTest as V, TransactionConfirmTxHashRowTest as d } from "./result/constants.js";
-import { TransactionConfirmFailureResult as A } from "./result/TransactionConfirmFailureResult.js";
-import { TransactionConfirmSuccessIcon as B } from "./result/TransactionConfirmSuccessIcon.js";
-import { TransactionConfirmSuccessResult as H } from "./result/TransactionConfirmSuccessResult.js";
-import { TransactionConfirmTxHashRow as v } from "./result/TransactionConfirmTxHashRow.js";
-import { ProgressStepperTest as I } from "./stepper/constants.js";
-import { ProgressStepper as b } from "./stepper/ProgressStepper.js";
-import { shouldShowTransactionProgressStepper as k } from "./stepper/transactionExecutionStepTypes.js";
+import { TransactionConfirmDialogTest as f, transactionConfirmDialogShellVariants as c, transactionConfirmModalContainerVariants as T, transactionConfirmPreviewScrollVariants as l, transactionConfirmShellContentVariants as p } from "./dialog/constants.js";
+import { TransactionConfirmShell as u } from "./dialog/TransactionConfirmShell.js";
+import { TransactionConfirmExecuteButton as S } from "./execution/TransactionConfirmExecuteButton.js";
+import { TransactionConfirmExecuteButtonTest as g, TransactionConfirmFailureResultTest as R, TransactionConfirmSuccessResultTest as P, TransactionConfirmTxHashRowTest as d } from "./result/constants.js";
+import { TransactionConfirmFailureResult as F } from "./result/TransactionConfirmFailureResult.js";
+import { TransactionConfirmSuccessIcon as A } from "./result/TransactionConfirmSuccessIcon.js";
+import { TransactionConfirmSuccessResult as B } from "./result/TransactionConfirmSuccessResult.js";
+import { TransactionConfirmTxHashRow as H } from "./result/TransactionConfirmTxHashRow.js";
+import { ProgressStepperTest as y } from "./stepper/constants.js";
+import { ProgressStepper as L } from "./stepper/ProgressStepper.js";
+import { shouldShowTransactionProgressStepper as b } from "./stepper/transactionExecutionStepTypes.js";
 export {
-  b as ProgressStepper,
-  I as ProgressStepperTest,
+  L as ProgressStepper,
+  y as ProgressStepperTest,
   e as TransactionConfirmAmountField,
   n as TransactionConfirmAmountFieldTest,
   t as TransactionConfirmAmountPairTest,
   f as TransactionConfirmDialogTest,
-  h as TransactionConfirmExecuteButton,
-  P as TransactionConfirmExecuteButtonTest,
-  A as TransactionConfirmFailureResult,
+  S as TransactionConfirmExecuteButton,
+  g as TransactionConfirmExecuteButtonTest,
+  F as TransactionConfirmFailureResult,
   R as TransactionConfirmFailureResultTest,
-  u as TransactionConfirmModalView,
-  S as TransactionConfirmPageView,
-  B as TransactionConfirmSuccessIcon,
-  H as TransactionConfirmSuccessResult,
-  V as TransactionConfirmSuccessResultTest,
-  v as TransactionConfirmTxHashRow,
+  u as TransactionConfirmShell,
+  A as TransactionConfirmSuccessIcon,
+  B as TransactionConfirmSuccessResult,
+  P as TransactionConfirmSuccessResultTest,
+  H as TransactionConfirmTxHashRow,
   d as TransactionConfirmTxHashRowTest,
   s as computeTransactionConfirmDialogLayout,
-  k as shouldShowTransactionProgressStepper,
+  b as shouldShowTransactionProgressStepper,
   c as transactionConfirmDialogShellVariants,
   T as transactionConfirmModalContainerVariants,
-  p as transactionConfirmPreviewScrollVariants,
-  C as transactionConfirmShellContentVariants
+  l as transactionConfirmPreviewScrollVariants,
+  p as transactionConfirmShellContentVariants
 };

package/dist/esm/components/composites/tx-preview/index.js

@@ -1,40 +1,38 @@
 import { TransactionConfirmAmountFieldTest as n, TransactionConfirmAmountPairTest as t } from "./confirm/amounts/constants.js";
 import { TransactionConfirmAmountField as e } from "./confirm/amounts/TransactionConfirmAmountField.js";
 import { computeTransactionConfirmDialogLayout as s } from "./confirm/dialog/computeTransactionConfirmDialogLayout.js";
-import { TransactionConfirmDialogTest as f, transactionConfirmDialogShellVariants as c, transactionConfirmModalContainerVariants as T, transactionConfirmPreviewScrollVariants as p, transactionConfirmShellContentVariants as C } from "./confirm/dialog/constants.js";
-import { TransactionConfirmModalView as u } from "./confirm/dialog/TransactionConfirmModalView.js";
-import { TransactionConfirmPageView as S } from "./confirm/dialog/TransactionConfirmPageView.js";
-import { TransactionConfirmExecuteButton as h } from "./confirm/execution/TransactionConfirmExecuteButton.js";
-import { TransactionConfirmExecuteButtonTest as P, TransactionConfirmFailureResultTest as R, TransactionConfirmSuccessResultTest as V, TransactionConfirmTxHashRowTest as d } from "./confirm/result/constants.js";
-import { TransactionConfirmFailureResult as A } from "./confirm/result/TransactionConfirmFailureResult.js";
-import { TransactionConfirmSuccessIcon as B } from "./confirm/result/TransactionConfirmSuccessIcon.js";
-import { TransactionConfirmSuccessResult as H } from "./confirm/result/TransactionConfirmSuccessResult.js";
-import { TransactionConfirmTxHashRow as v } from "./confirm/result/TransactionConfirmTxHashRow.js";
-import { ProgressStepperTest as I } from "./confirm/stepper/constants.js";
-import { ProgressStepper as b } from "./confirm/stepper/ProgressStepper.js";
-import { shouldShowTransactionProgressStepper as k } from "./confirm/stepper/transactionExecutionStepTypes.js";
+import { TransactionConfirmDialogTest as f, transactionConfirmDialogShellVariants as c, transactionConfirmModalContainerVariants as T, transactionConfirmPreviewScrollVariants as l, transactionConfirmShellContentVariants as p } from "./confirm/dialog/constants.js";
+import { TransactionConfirmShell as u } from "./confirm/dialog/TransactionConfirmShell.js";
+import { TransactionConfirmExecuteButton as S } from "./confirm/execution/TransactionConfirmExecuteButton.js";
+import { TransactionConfirmExecuteButtonTest as g, TransactionConfirmFailureResultTest as R, TransactionConfirmSuccessResultTest as P, TransactionConfirmTxHashRowTest as d } from "./confirm/result/constants.js";
+import { TransactionConfirmFailureResult as F } from "./confirm/result/TransactionConfirmFailureResult.js";
+import { TransactionConfirmSuccessIcon as A } from "./confirm/result/TransactionConfirmSuccessIcon.js";
+import { TransactionConfirmSuccessResult as B } from "./confirm/result/TransactionConfirmSuccessResult.js";
+import { TransactionConfirmTxHashRow as H } from "./confirm/result/TransactionConfirmTxHashRow.js";
+import { ProgressStepperTest as y } from "./confirm/stepper/constants.js";
+import { ProgressStepper as L } from "./confirm/stepper/ProgressStepper.js";
+import { shouldShowTransactionProgressStepper as b } from "./confirm/stepper/transactionExecutionStepTypes.js";
 export {
-  b as ProgressStepper,
-  I as ProgressStepperTest,
+  L as ProgressStepper,
+  y as ProgressStepperTest,
   e as TransactionConfirmAmountField,
   n as TransactionConfirmAmountFieldTest,
   t as TransactionConfirmAmountPairTest,
   f as TransactionConfirmDialogTest,
-  h as TransactionConfirmExecuteButton,
-  P as TransactionConfirmExecuteButtonTest,
-  A as TransactionConfirmFailureResult,
+  S as TransactionConfirmExecuteButton,
+  g as TransactionConfirmExecuteButtonTest,
+  F as TransactionConfirmFailureResult,
   R as TransactionConfirmFailureResultTest,
-  u as TransactionConfirmModalView,
-  S as TransactionConfirmPageView,
-  B as TransactionConfirmSuccessIcon,
-  H as TransactionConfirmSuccessResult,
-  V as TransactionConfirmSuccessResultTest,
-  v as TransactionConfirmTxHashRow,
+  u as TransactionConfirmShell,
+  A as TransactionConfirmSuccessIcon,
+  B as TransactionConfirmSuccessResult,
+  P as TransactionConfirmSuccessResultTest,
+  H as TransactionConfirmTxHashRow,
   d as TransactionConfirmTxHashRowTest,
   s as computeTransactionConfirmDialogLayout,
-  k as shouldShowTransactionProgressStepper,
+  b as shouldShowTransactionProgressStepper,
   c as transactionConfirmDialogShellVariants,
   T as transactionConfirmModalContainerVariants,
-  p as transactionConfirmPreviewScrollVariants,
-  C as transactionConfirmShellContentVariants
+  l as transactionConfirmPreviewScrollVariants,
+  p as transactionConfirmShellContentVariants
 };

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

@@ -1,95 +1,100 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { PointsIcon as R } from "../points-icon/points-icon.js";
-import { TokenIcon as Y } from "../token-icon/token-icon.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useId as g } from "react";
 import { YieldBreakdownTooltip as w } from "../yield-breakdown-tooltip/yield-breakdown-tooltip.js";
-import "react";
-import { positiveTokenRewardsOf as z, pointProgramsOf as I, totalApyOf as L } from "../../utils/apy-breakdown.js";
+import { totalApyOf as x, positiveTokenRewardsOf as v, pointProgramsOf as C } from "../../utils/apy-breakdown.js";
 import "@gearbox-protocol/sdk";
-import { bpsToPercent as N } from "../../utils/bps.js";
-import { cn as $ } from "../../utils/cn.js";
+import { bpsToPercent as I } from "../../utils/bps.js";
+import { cn as k } from "../../utils/cn.js";
 import "sonner";
-import { formatPercentAmount as v } from "../../utils/format-money.js";
+import { formatCompactPercent as P } from "../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-function K({
-  apy: e,
-  maxLeverage: f,
-  collateralApy: h,
-  borrowApy: g,
-  additionalBorrowApy: x,
-  decimals: u = 2,
-  className: a
+const l = 14;
+function A() {
+  const t = `additional-incentives-${g().replace(/:/g, "")}`;
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      width: l,
+      height: l,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "size-3.5 shrink-0 overflow-clip",
+      role: "img",
+      "aria-label": "Incentives",
+      children: [
+        /* @__PURE__ */ e("title", { children: "Incentives" }),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z",
+            fill: `url(#${t})`
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M7 3.75V10.25M3.75 7H10.25",
+            stroke: "white",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n(
+          "linearGradient",
+          {
+            id: t,
+            x1: "0",
+            y1: "7",
+            x2: "14",
+            y2: "7",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ e("stop", { stopColor: "#FF2D8D" }),
+              /* @__PURE__ */ e("stop", { offset: "1", stopColor: "#FF6C20" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function c(t) {
+  return t == null ? !1 : v(t).length > 0 || C(t).length > 0;
+}
+function E({
+  apy: t,
+  maxLeverage: p,
+  collateralApy: r,
+  borrowApy: d,
+  additionalBorrowApy: a,
+  decimals: m = 2,
+  className: o
 }) {
-  if (!e)
-    return /* @__PURE__ */ n("span", { className: "text-secondary-foreground", children: "—" });
-  const i = z(e), m = I(e), p = L(e), A = p >= 1, l = () => {
-    const P = i.length > 0, k = m.length > 0, y = `${v(N(p), u)}%`, c = i.length, o = c + m.length;
-    return /* @__PURE__ */ d("div", { className: $("inline-flex items-center gap-1.5", a), children: [
-      /* @__PURE__ */ n("span", { className: "inline-flex items-center", children: y }),
-      (P || k) && /* @__PURE__ */ d("span", { className: "relative inline-flex", children: [
-        i.map((t, r) => {
-          const s = r === o - 1;
-          return /* @__PURE__ */ n(
-            "span",
-            {
-              style: {
-                zIndex: o - r,
-                marginRight: s ? 0 : -7
-              },
-              children: /* @__PURE__ */ n(
-                Y,
-                {
-                  token: t.token,
-                  size: 14,
-                  style: {
-                    margin: t.token.symbol === "GEAR" ? "-3px 0 0 0" : "0"
-                  }
-                }
-              )
-            },
-            `extra-${t.token.address}-${t.supplyApr ?? 0}`
-          );
-        }),
-        m.map((t, r) => {
-          const s = r + c, T = s === o - 1;
-          return /* @__PURE__ */ n(
-            "span",
-            {
-              style: {
-                zIndex: o - s,
-                marginRight: T ? 0 : -7
-              },
-              children: /* @__PURE__ */ n(
-                R,
-                {
-                  reward: {
-                    name: t.name,
-                    type: t.id
-                  },
-                  size: 14
-                }
-              )
-            },
-            `points-${t.id}`
-          );
-        })
-      ] })
+  if (!t)
+    return /* @__PURE__ */ e("span", { className: "text-secondary-foreground", children: "—" });
+  const i = x(t), f = c(t) || c(r), h = i >= 1, s = () => {
+    const u = P(I(i), m);
+    return /* @__PURE__ */ n("div", { className: k("inline-flex items-center gap-1.5", o), children: [
+      /* @__PURE__ */ e("span", { className: "inline-flex items-center", children: u }),
+      f ? /* @__PURE__ */ e(A, {}) : null
     ] });
   };
-  return A ? /* @__PURE__ */ n(
+  return h ? /* @__PURE__ */ e(
     w,
     {
-      supplyApy: e,
-      maxLeverage: f,
-      collateralApy: h,
-      borrowApy: g,
-      additionalBorrowApy: x,
-      className: a,
-      children: l()
+      supplyApy: t,
+      maxLeverage: p,
+      collateralApy: r,
+      borrowApy: d,
+      additionalBorrowApy: a,
+      className: o,
+      children: s()
     }
-  ) : l();
+  ) : s();
 }
 export {
-  K as CompoundAPY
+  E as CompoundAPY
 };

package/dist/esm/components/filter/filter-chip.js

@@ -1,6 +1,7 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as m from "react";
 import { Badge as s } from "../badge/badge.js";
+import "../badge/chip.js";
 import { faXmark as f } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as l } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";

package/dist/esm/components/graph/default-config.js

@@ -4,17 +4,17 @@ const e = {
   bottomColor: "rgba(76, 175, 80, 0.04)",
   lineColor: "#02c39a",
   lineWidth: 2
-}, i = {
+}, s = {
   showLabel: !0,
   color: "#02c39a",
   labelBackgroundColor: "#02c39a",
   width: 2
-};
-function t() {
+}, l = 'Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', t = 14;
+function b() {
   const r = o(
-    "hsl(var(--foreground))",
-    "rgb(0, 0, 0)"
-  );
+    "hsl(var(--muted-foreground))",
+    "rgb(163, 163, 163)"
+  ), i = o("hsl(var(--card))", "rgb(24, 24, 24)");
   return {
     timeScale: {
       borderVisible: !0,
@@ -37,10 +37,11 @@ function t() {
     },
     layout: {
       background: {
-        color: "transparent"
+        color: i
       },
       textColor: r,
-      fontSize: 14
+      fontSize: t,
+      fontFamily: l
     },
     crosshair: {
       horzLine: {
@@ -66,7 +67,7 @@ function t() {
     }
   };
 }
-function a() {
+function n() {
   return {
     topColor: "rgba(76, 175, 80, 0.56)",
     bottomColor: "rgba(76, 175, 80, 0.04)",
@@ -74,7 +75,7 @@ function a() {
     lineWidth: 2
   };
 }
-function s() {
+function c() {
   return {
     showLabel: !0,
     color: e.lineColor,
@@ -82,7 +83,7 @@ function s() {
     width: 2
   };
 }
-const b = {
+const u = {
   timeScale: {
     borderVisible: !0,
     borderColor: "rgba(224, 227, 235, 0.1)",
@@ -102,8 +103,9 @@ const b = {
     background: {
       color: "transparent"
     },
-    textColor: "rgb(0, 0, 0)",
-    fontSize: 14
+    textColor: "rgb(163, 163, 163)",
+    fontSize: t,
+    fontFamily: l
   },
   crosshair: {
     horzLine: {
@@ -130,9 +132,9 @@ const b = {
 };
 export {
   e as DEFAULT_AREA_SERIES,
-  b as DEFAULT_OPTIONS,
-  i as DEFAULT_VERTICAL_LINE,
-  t as getDefaultOptions,
-  a as getDefaultSeries,
-  s as getDefaultVerticalLine
+  u as DEFAULT_OPTIONS,
+  s as DEFAULT_VERTICAL_LINE,
+  b as getDefaultOptions,
+  n as getDefaultSeries,
+  c as getDefaultVerticalLine
 };