@gearbox-protocol/permissionless-ui 1.22.0-next.4 → 1.22.0-next.41

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

@@ -1,54 +1,60 @@
-import { jsxs as e, jsx as t, Fragment as v } from "react/jsx-runtime";
+import { jsxs as t, jsx as e, Fragment as b } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
-import { ArrowRight as w } from "lucide-react";
 import * as V from "react";
-import { cn as r } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-import { HelpTip as y } from "../help-tip/help-tip.js";
-const j = l("flex flex-nowrap gap-3 items-center", {
-  variants: {
-    align: {
-      start: "items-start",
-      center: "items-center",
-      end: "items-end"
-    }
-  },
-  defaultVariants: {
-    align: "start"
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import { Description as f } from "../description/description.js";
+import { HelpTip as v } from "../help-tip/help-tip.js";
+const y = l(
+  ["flex flex-nowrap", "w-full max-w-full grow-0 shrink-0 basis-full"].join(
+    " "
+  ),
+  {
+    variants: {
+      align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        baseline: "items-baseline"
+      }
+    },
+    defaultVariants: { align: "start" }
   }
-}), I = l("text-foreground", {
-  variants: {
-    size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      default: "text-base",
-      unset: ""
-    }
-  },
-  defaultVariants: {
-    size: "default"
+), k = l(
+  "flex items-center grow shrink-0 basis-[0%] text-left text-foreground",
+  {
+    variants: {
+      size: {
+        xs: "text-xs leading-[14px]",
+        sm: "text-sm leading-[17px]",
+        default: "text-base leading-[19px]",
+        unset: "text-[length:unset] leading-[unset]"
+      }
+    },
+    defaultVariants: { size: "default" }
   }
-}), f = l("text-right", {
+), u = l("text-right font-medium", {
   variants: {
     size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      default: "text-base",
-      unset: ""
+      xs: "text-xs leading-[14px]",
+      sm: "text-sm leading-[17px]",
+      default: "text-base leading-[19px]",
+      unset: "text-[length:unset] leading-[unset]"
     },
     weight: {
       normal: "font-normal",
       medium: "font-medium",
-      unset: ""
+      unset: "[font-weight:unset]"
     },
     color: {
       default: "text-foreground",
-      muted: "text-muted-foreground",
-      success: "text-green-500",
-      warning: "text-yellow-500",
+      muted: "text-gray-70",
+      success: "text-success",
+      warning: "text-warning",
       alert: "text-destructive",
-      primary: "text-primary"
+      primary: "text-primary",
+      secondary: "text-secondary-foreground"
     }
   },
   defaultVariants: {
@@ -56,69 +62,70 @@ const j = l("flex flex-nowrap gap-3 items-center", {
     weight: "medium",
     color: "default"
   }
-}), R = V.forwardRef(
+}), j = V.forwardRef(
   ({
-    className: u,
+    className: g,
     align: h,
-    label: a,
-    description: s,
+    label: s,
+    description: n,
     valueDescription: m,
     tip: d,
     value: o,
-    valueTo: i,
-    size: n = "default",
+    valueTo: r,
+    size: i = "sm",
     weight: c = "medium",
     color: x = "default",
     onPointerEnterTip: p,
-    ...g
-  }, N) => /* @__PURE__ */ e(
+    ...w
+  }, N) => /* @__PURE__ */ t(
     "div",
     {
       ref: N,
-      className: r(j({ align: h }), u),
-      ...g,
+      className: a(y({ align: h }), g),
+      ...w,
       children: [
-        (a || s) && /* @__PURE__ */ e("div", { className: "flex flex-col flex-1 h-min", children: [
-          a && /* @__PURE__ */ e(
+        (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,
+            d && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(v, { onPointerEnter: p, children: d }) })
+          ] }),
+          n && /* @__PURE__ */ e(f, { className: "text-left", children: n })
+        ] }),
+        o && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
+          /* @__PURE__ */ t(
             "div",
             {
-              className: r(
-                "flex items-center gap-2 whitespace-nowrap",
-                I({ size: n })
+              className: a(
+                "flex flex-nowrap",
+                "w-full max-w-full grow-0 shrink-0 basis-full",
+                "justify-end items-center"
               ),
               children: [
-                a,
-                d && /* @__PURE__ */ t(y, { onPointerEnter: p, children: d })
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      u({ size: i, weight: c, color: x }),
+                      r && "line-through [&>*]:line-through"
+                    ),
+                    children: o
+                  }
+                ),
+                r && /* @__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 })
+                ] })
               ]
             }
           ),
-          s && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-left", children: s })
-        ] }),
-        o && /* @__PURE__ */ e("div", { className: "flex flex-col flex-auto", children: [
-          /* @__PURE__ */ e("div", { className: "flex flex-nowrap gap-3 justify-end items-center", children: [
-            /* @__PURE__ */ t(
-              "span",
-              {
-                className: r(
-                  f({ size: n, weight: c, color: x }),
-                  i && "line-through opacity-60"
-                ),
-                children: o
-              }
-            ),
-            i && /* @__PURE__ */ e(v, { children: [
-              /* @__PURE__ */ t(w, { className: "h-3 w-3 text-muted-foreground" }),
-              /* @__PURE__ */ t("span", { className: r(f({ size: n, weight: c, color: x })), children: i })
-            ] })
-          ] }),
-          m && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-right", children: m })
+          m && /* @__PURE__ */ e(f, { className: "text-right", children: m })
         ] })
       ]
     }
   )
 );
-R.displayName = "VerticalIndicator";
+j.displayName = "VerticalIndicator";
 export {
-  R as VerticalIndicator,
-  j as verticalIndicatorVariants
+  j as VerticalIndicator,
+  y as verticalIndicatorVariants
 };

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

@@ -1,69 +1,75 @@
 import { jsx as s } from "react/jsx-runtime";
-import { cva as g } from "class-variance-authority";
-import * as a from "react";
-import { cn as i } from "../../utils/cn.js";
-import "sonner";
+import { cva as c } from "class-variance-authority";
+import * as r from "react";
 import "@gearbox-protocol/sdk";
-const u = g("flex flex-col", {
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+const u = c("flex flex-col [&>li:empty]:hidden", {
   variants: {
-    gap: {
+    rowGap: {
       xs: "gap-1",
-      sm: "gap-2",
-      default: "gap-3",
-      md: "gap-4",
-      lg: "gap-6"
+      default: "gap-4",
+      md: "gap-6"
     },
     divided: {
       true: "",
       false: ""
+    },
+    nested: {
+      true: t(
+        "relative py-[2px] pr-0 pl-3",
+        "before:content-[''] before:absolute before:top-0 before:left-0 before:block",
+        "before:h-full before:border-l-2 before:border-l-gray-40"
+      ),
+      false: ""
     }
   },
   defaultVariants: {
-    gap: "default",
-    divided: !1
+    rowGap: "default",
+    divided: !1,
+    nested: !1
   }
-}), v = a.forwardRef(
+}), y = r.forwardRef(
   ({
-    className: o,
-    gap: m = "default",
-    divided: r = !1,
-    nested: p = !1,
-    children: f,
-    ...n
-  }, d) => {
-    const t = a.Children.toArray(f).filter(
+    className: f,
+    rowGap: i = "default",
+    divided: a = !1,
+    nested: n = !1,
+    children: p,
+    ...d
+  }, m) => {
+    const l = r.Children.toArray(p).filter(
       (e) => e != null
     );
     return /* @__PURE__ */ s(
       "ul",
       {
-        ref: d,
-        className: i(
-          u({ gap: m, divided: r }),
-          p && "m-0 p-0",
+        ref: m,
+        className: t(
+          u({ rowGap: i, divided: a, nested: n }),
           "list-none",
-          o
+          f
         ),
-        ...n,
-        children: t.map((e, l) => {
-          const c = a.isValidElement(e) && e.key ? e.key : `vertical-list-item-${l}`;
+        ...d,
+        children: l.map((e, o) => {
+          const b = r.isValidElement(e) && e.key ? e.key : `vertical-list-item-${o}`;
           return /* @__PURE__ */ s(
             "li",
             {
-              className: i(
-                r && l !== t.length - 1 && "pb-3 border-b border-border"
+              className: t(
+                a && o !== l.length - 1 && "pb-3 border-b border-border"
               ),
               children: e
             },
-            c
+            b
           );
         })
       }
     );
   }
 );
-v.displayName = "VerticalList";
+y.displayName = "VerticalList";
 export {
-  v as VerticalList,
+  y as VerticalList,
   u as verticalListVariants
 };

package/dist/esm/components/with-copy/with-copy.js

@@ -1,30 +1,32 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Check as h, Copy as x } from "lucide-react";
-import { useState as C, useRef as b } from "react";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { IconCopy as h } from "@gearbox-protocol/static";
+import { useState as x, useRef as C } from "react";
+import { faCheck as b } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as N } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function T({
+function R({
   toCopy: n,
   children: c,
   onCopySuccess: l,
-  iconSize: t = 14,
-  icon: p,
-  className: m,
+  iconSize: e = 14,
+  icon: m,
+  className: p,
   buttonClassName: u,
   successDuration: f = 1500
 }) {
-  const [i, o] = C(!1), s = b(null), y = async () => {
+  const [o, s] = x(!1), i = C(null), y = async () => {
     try {
-      await navigator.clipboard.writeText(n), s.current && clearTimeout(s.current), o(!0), s.current = setTimeout(() => {
-        o(!1);
+      await navigator.clipboard.writeText(n), i.current && clearTimeout(i.current), s(!0), i.current = setTimeout(() => {
+        s(!1);
       }, f), l?.();
     } catch (d) {
       console.error("Failed to copy:", d);
     }
   };
-  return /* @__PURE__ */ a("div", { className: r("flex items-center min-w-0", m), children: [
-    /* @__PURE__ */ e("span", { className: "truncate", children: c }),
+  return /* @__PURE__ */ a("div", { className: r("flex items-center min-w-0", p), children: [
+    /* @__PURE__ */ t("span", { className: "truncate", children: c }),
     /* @__PURE__ */ a(
       "button",
       {
@@ -34,27 +36,34 @@ function T({
           "ml-1 cursor-pointer relative flex-shrink-0",
           u
         ),
-        style: { width: t, height: t },
-        title: i ? "Copied!" : "Copy to clipboard",
+        style: { width: e, height: e },
+        title: o ? "Copied!" : "Copy to clipboard",
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: r(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                i ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                o ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
               ),
-              children: /* @__PURE__ */ e(h, { size: t })
+              children: /* @__PURE__ */ t(
+                N,
+                {
+                  icon: b,
+                  style: { fontSize: e },
+                  className: "block"
+                }
+              )
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: r(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                i ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 hover:text-white"
+                o ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 hover:text-white"
               ),
-              children: p ?? /* @__PURE__ */ e(x, { size: t })
+              children: m ?? /* @__PURE__ */ t(h, { size: e })
             }
           )
         ]
@@ -63,5 +72,5 @@ function T({
   ] });
 }
 export {
-  T as WithCopy
+  R as WithCopy
 };

package/dist/esm/components/with-filter-button/with-filter-button.js

@@ -2,9 +2,9 @@ import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import * as z from "react";
 import { Button as B } from "../buttons/button/button.js";
 import { FilterButton as F } from "../buttons/filter-button/filter-button.js";
+import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const j = z.forwardRef(
   ({
     children: r,

package/dist/esm/components/with-title/with-title.js

@@ -1,30 +1,43 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
 import "react";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const l = {
-  default: "text-sm",
-  sm: "text-xs",
-  lg: "text-base"
-};
-function c({
-  title: i,
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+const l = a("", {
+  variants: {
+    size: {
+      sm: "text-[14px] mb-[14px]",
+      default: "text-body mb-[18px]",
+      md: "text-lg mb-[22px]",
+      lg: "text-[21px] mb-[22px]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function u({
+  title: m,
   children: t,
   size: o = "default",
-  className: m
+  className: r
 }) {
-  return /* @__PURE__ */ r("div", { className: s("flex flex-col gap-2", m), children: [
+  return /* @__PURE__ */ x("div", { className: i("flex flex-col"), children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: s("text-muted-foreground font-medium", l[o]),
-        children: i
+        className: i(
+          "text-foreground font-medium",
+          l({ size: o }),
+          r
+        ),
+        children: m
       }
     ),
     t !== void 0 && /* @__PURE__ */ e("div", { children: t })
   ] });
 }
 export {
-  c as WithTitle
+  u as WithTitle
 };

package/dist/esm/hooks/index.js

@@ -1,54 +1,52 @@
 import { useCheckboxSelect as t } from "./use-checkbox-select.js";
-import { useControllableState as o } from "./use-controllable-state.js";
+import { useControllableState as i } from "./use-controllable-state.js";
 import { useDebounce as u } from "./use-debounce.js";
 import { useDebounceCall as l } from "./use-debounce-call.js";
-import { getSortForField as L, useFilterAllSelected as x, useRangeFilter as m, useSelectFilter as n, useSort as A } from "./use-filter.js";
-import { useHF as c } from "./use-hf.js";
+import { getSortForField as p, useFilterAllSelected as x, useRangeFilter as m, useSelectFilter as n, useSort as A } from "./use-filter.js";
+import { useHF as f } from "./use-hf.js";
 import { useEditPriceManually as I, useLiquidationGraphParams as E, useLiquidationHeatmap as d } from "./use-liquidation/index.js";
-import { useIsDesktop as _, useIsMobile as b, useIsTablet as D, useMediaQuery as F } from "./use-media-query.js";
+import { useIsDesktop as b, useIsMobile as D, useIsTablet as F, useMediaQuery as S } from "./use-media-query.js";
 import { useOpenedState as T } from "./use-opened-state.js";
-import { usePoolPointsTips as O } from "./use-pool-points-tips.js";
-import { usePrevious as v } from "./use-previous.js";
-import { CELL_BAD as M, CELL_CURRENT as R, CELL_GOOD as U, CELL_HOVERED as N, CELL_LIQUIDATION as g, CELL_OK as H, DEFAULT_AXIS_MAX as X, DEFAULT_AXIS_MIN as k, formatAxisLabel as y, formatAxisTipLabel as Q, formatAxisTipPrice as V, getCellClass as B, isPointInCell as K, useAxis as W, useFixedAssets as j, useIsAxisInRelativeUnits as w, useLiquidationGraphActivePrice as z, useLiquidationGraphCurrentActiveValue as J, usePriceInNumber as Y, useWithLiquidationGraphActivePrices as Z } from "./use-liquidation/utils.js";
+import { usePrevious as O } from "./use-previous.js";
+import { CELL_BAD as v, CELL_CURRENT as G, CELL_GOOD as M, CELL_HOVERED as R, CELL_LIQUIDATION as U, CELL_OK as N, DEFAULT_AXIS_MAX as g, DEFAULT_AXIS_MIN as H, formatAxisLabel as X, formatAxisTipLabel as k, formatAxisTipPrice as y, getCellClass as Q, isPointInCell as V, useAxis as B, useFixedAssets as K, useIsAxisInRelativeUnits as W, useLiquidationGraphActivePrice as j, useLiquidationGraphCurrentActiveValue as w, usePriceInNumber as z, useWithLiquidationGraphActivePrices as J } from "./use-liquidation/utils.js";
 export {
-  M as CELL_BAD,
-  R as CELL_CURRENT,
-  U as CELL_GOOD,
-  N as CELL_HOVERED,
-  g as CELL_LIQUIDATION,
-  H as CELL_OK,
-  X as DEFAULT_AXIS_MAX,
-  k as DEFAULT_AXIS_MIN,
-  y as formatAxisLabel,
-  Q as formatAxisTipLabel,
-  V as formatAxisTipPrice,
-  B as getCellClass,
-  L as getSortForField,
-  K as isPointInCell,
-  W as useAxis,
+  v as CELL_BAD,
+  G as CELL_CURRENT,
+  M as CELL_GOOD,
+  R as CELL_HOVERED,
+  U as CELL_LIQUIDATION,
+  N as CELL_OK,
+  g as DEFAULT_AXIS_MAX,
+  H as DEFAULT_AXIS_MIN,
+  X as formatAxisLabel,
+  k as formatAxisTipLabel,
+  y as formatAxisTipPrice,
+  Q as getCellClass,
+  p as getSortForField,
+  V as isPointInCell,
+  B as useAxis,
   t as useCheckboxSelect,
-  o as useControllableState,
+  i as useControllableState,
   u as useDebounce,
   l as useDebounceCall,
   I as useEditPriceManually,
   x as useFilterAllSelected,
-  j as useFixedAssets,
-  c as useHF,
-  w as useIsAxisInRelativeUnits,
-  _ as useIsDesktop,
-  b as useIsMobile,
-  D as useIsTablet,
-  z as useLiquidationGraphActivePrice,
-  J as useLiquidationGraphCurrentActiveValue,
+  K as useFixedAssets,
+  f as useHF,
+  W as useIsAxisInRelativeUnits,
+  b as useIsDesktop,
+  D as useIsMobile,
+  F as useIsTablet,
+  j as useLiquidationGraphActivePrice,
+  w as useLiquidationGraphCurrentActiveValue,
   E as useLiquidationGraphParams,
   d as useLiquidationHeatmap,
-  F as useMediaQuery,
+  S as useMediaQuery,
   T as useOpenedState,
-  O as usePoolPointsTips,
-  v as usePrevious,
-  Y as usePriceInNumber,
+  O as usePrevious,
+  z as usePriceInNumber,
   m as useRangeFilter,
   n as useSelectFilter,
   A as useSort,
-  Z as useWithLiquidationGraphActivePrices
+  J as useWithLiquidationGraphActivePrices
 };