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

package/dist/esm/components/head-cell/head-cell.js

@@ -1,60 +1,62 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { ChevronUp as v, ChevronDown as C } from "lucide-react";
-import * as N from "react";
-import { HelpTip as m } from "../help-tip/help-tip.js";
-import { TooltipProvider as T, Tooltip as w, TooltipTrigger as y, TooltipContent as b } from "../tooltip/tooltip.js";
-import { cn as o } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import { HelpTip as f } from "../help-tip/help-tip.js";
+import { faCaretUp as N, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as d } from "../icons/fa-icon.js";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as y, Tooltip as b, TooltipTrigger as H, TooltipContent as w } from "../tooltip/tooltip.js";
 import "@gearbox-protocol/sdk";
+import { cn as n } from "../../utils/cn.js";
+import "sonner";
 function R({
   title: l,
   tip: r,
-  arrowPosition: n = "left",
+  arrowPosition: i = "left",
   sortDirection: s,
-  sortField: f = "this field",
-  sortTip: p,
+  sortField: p = "this field",
+  sortTip: u,
   onSort: t,
-  className: u
+  className: h
 }) {
-  const [h, c] = N.useState(!1), x = !!s || h, d = () => /* @__PURE__ */ e(
+  const [x, a] = v.useState(!1), g = !!s || x, c = () => /* @__PURE__ */ e(
     "span",
     {
-      className: o(
+      className: n(
         "inline-flex items-center transition-opacity",
-        x ? "opacity-100" : "opacity-0"
+        g ? "opacity-100" : "opacity-0"
       ),
-      children: s === "asc" ? /* @__PURE__ */ e(v, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ e(C, { className: "h-3 w-3 text-muted-foreground" })
+      children: s === "asc" ? /* @__PURE__ */ e(d, { icon: N, className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ e(d, { icon: T, className: "size-3 text-muted-foreground" })
     }
-  ), a = () => /* @__PURE__ */ i(
+  ), m = () => /* @__PURE__ */ o(
     "button",
     {
       type: "button",
       onClick: t,
       disabled: !t,
-      className: o(
+      className: n(
         "inline-flex items-center gap-1 text-sm font-medium text-muted-foreground",
         t && "cursor-pointer hover:text-foreground transition-colors",
         !t && "cursor-default"
       ),
       children: [
-        t && n === "left" && d(),
+        t && i === "left" && c(),
         l,
-        t && n === "right" && d()
+        t && i === "right" && c()
       ]
     }
-  ), g = `Sort by ${f}`;
-  return /* @__PURE__ */ i(
+  ), C = `Sort by ${p}`;
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: o("inline-flex items-center gap-1.5", u),
-      onPointerEnter: () => c(!0),
-      onPointerLeave: () => c(!1),
+      className: n("inline-flex items-center gap-1.5", h),
+      onPointerEnter: () => a(!0),
+      onPointerLeave: () => a(!1),
       children: [
-        t ? /* @__PURE__ */ e(T, { children: /* @__PURE__ */ i(w, { children: [
-          /* @__PURE__ */ e(y, { asChild: !0, children: a() }),
-          /* @__PURE__ */ e(b, { children: p || g })
-        ] }) }) : a(),
-        r && /* @__PURE__ */ e(m, { children: r })
+        t ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ o(b, { children: [
+          /* @__PURE__ */ e(H, { asChild: !0, children: m() }),
+          /* @__PURE__ */ e(w, { children: u || C })
+        ] }) }) : m(),
+        r && /* @__PURE__ */ e(f, { children: r })
       ]
     }
   );
@@ -62,11 +64,11 @@ function R({
 function U({
   title: l,
   tip: r,
-  className: n
+  className: i
 }) {
-  return /* @__PURE__ */ i("div", { className: o("inline-flex items-center gap-1.5", n), children: [
+  return /* @__PURE__ */ o("div", { className: n("inline-flex items-center gap-1.5", i), children: [
     /* @__PURE__ */ e("span", { className: "text-sm font-medium text-muted-foreground", children: l }),
-    r && /* @__PURE__ */ e(m, { children: r })
+    r && /* @__PURE__ */ e(f, { children: r })
   ] });
 }
 export {

package/dist/esm/components/health-factor/health-factor.js

@@ -1,9 +1,9 @@
 import { jsx as g } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as i } from "@gearbox-protocol/sdk";
 import "react";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-import { PERCENTAGE_FACTOR as i, formatPercentAmount as v } from "../../utils/format-money.js";
+import { formatPercentAmount as v } from "../../utils/format-money.js";
 const x = 15e3, A = 11e3, C = 10500, F = (r) => {
   if (!r) return;
   const t = Number(r);
@@ -16,12 +16,12 @@ function I({
   zone: e,
   showColor: c = !0,
   className: s,
-  ...a
+  ...m
 }) {
   const n = t !== void 0 && t === 0n, o = (() => {
     if (!n)
       return e ?? F(r);
-  })(), m = () => {
+  })(), a = () => {
     if (!c || o === void 0) return "";
     switch (o) {
       case "good":
@@ -38,10 +38,10 @@ function I({
     }
   }, d = () => {
     if (n) return "N/A";
-    const f = Number(r) / i, l = v(f, u, !1);
+    const f = Number(r) / Number(i), l = v(f, u, !1);
     return String(l);
   };
-  return /* @__PURE__ */ g("div", { className: p("font-medium", m(), s), ...a, children: d() });
+  return /* @__PURE__ */ g("div", { className: p("font-medium", a(), s), ...m, children: d() });
 }
 export {
   A as BAD_HF,

package/dist/esm/components/help-center-container/help-center-container.js

@@ -1,73 +1,63 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useState as s, useEffect as u } from "react";
+import { useState as s, useEffect as a } from "react";
 import { BlockSync as h } from "../block-sync/block-sync.js";
 import { cn as g } from "../../utils/cn.js";
-function w() {
-  const [t, i] = s(
-    typeof window < "u" ? window.scrollY : 0
-  ), [e, c] = s(
-    typeof document < "u" ? document.documentElement.clientHeight : 0
-  );
-  u(() => {
-    const n = () => {
-      i(window.scrollY);
-    }, o = () => {
-      c(document.documentElement.clientHeight);
-    };
-    return window.addEventListener("scroll", n), window.addEventListener("resize", o), () => {
-      window.removeEventListener("scroll", n), window.removeEventListener("resize", o);
-    };
-  }, []);
-  const d = typeof document < "u" ? Math.max(
-    document.body.scrollHeight,
-    document.documentElement.scrollHeight,
-    document.body.offsetHeight,
-    document.documentElement.offsetHeight,
-    document.body.clientHeight,
-    document.documentElement.clientHeight
-  ) : 0;
-  return {
-    pageVerticalOffset: t,
-    clientHeight: e,
-    clientOffsetHeight: d
-  };
-}
-function E({
-  blockSyncProps: t,
+function y({
+  blockSyncProps: e,
   footerHeight: i,
-  gapFromFooter: e
+  gapFromFooter: t
 }) {
-  const [c, d] = s(e), { pageVerticalOffset: n, clientOffsetHeight: o, clientHeight: l } = w();
-  return u(() => {
-    const r = i + e, m = o - (l + n), a = m < r ? r - m : 0;
-    d(e + a);
-  }, [
-    n,
-    l,
-    o,
-    i,
-    e
-  ]), /* @__PURE__ */ f(
+  const [c, o] = s(t), { pageVerticalOffset: n, clientOffsetHeight: l, clientHeight: d } = H();
+  return a(() => {
+    const r = i + t, m = l - (d + n), u = m < r ? r - m : 0;
+    o(t + u);
+  }, [n, d, l]), /* @__PURE__ */ f(
     "div",
     {
       className: g(
         // Desktop: fixed position with dynamic bottom
         "hidden sm:flex",
-        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]",
-        "transition-[bottom] duration-300 ease-in-out"
+        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]"
       ),
       style: { bottom: `${c}px` },
       children: /* @__PURE__ */ f(
         h,
         {
-          blockByChain: t.blockByChain,
-          explorerAddresses: t.explorerAddresses,
-          networkById: t.networkById
+          blockByChain: e.blockByChain,
+          explorerAddresses: e.explorerAddresses,
+          networkById: e.networkById
         }
       )
     }
   );
 }
+const w = () => Math.max(
+  document.body.scrollHeight,
+  document.documentElement.scrollHeight,
+  document.body.offsetHeight,
+  document.documentElement.offsetHeight,
+  document.body.clientHeight,
+  document.documentElement.clientHeight
+);
+function H() {
+  const [e, i] = s(window.scrollY), [t, c] = s(
+    document.documentElement.clientHeight
+  );
+  return a(() => {
+    const o = () => {
+      i(window.scrollY);
+    }, n = () => {
+      c(document.documentElement.clientHeight);
+    };
+    return window.addEventListener("scroll", o), window.addEventListener("resize", n), () => {
+      window.removeEventListener("scroll", o), window.removeEventListener("resize", n);
+    };
+  }, []), {
+    pageVerticalOffset: e,
+    clientHeight: t,
+    clientOffsetHeight: w()
+  };
+}
 export {
-  E as HelpCenterContainer
+  y as HelpCenterContainer
 };

package/dist/esm/components/help-sections/help-sections.js

@@ -1,8 +1,8 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function d({ children: e, className: t }) {
   return /* @__PURE__ */ r("div", { className: o("space-y-4", t), children: e });
 }

package/dist/esm/components/help-tip/help-tip.js

@@ -1,9 +1,10 @@
 import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { HelpCircle as s } from "lucide-react";
+import { IconQuestionCircle as s } from "@gearbox-protocol/static";
 import * as l from "react";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as T, Tooltip as h, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
 const N = l.forwardRef(
   ({

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

@@ -1,28 +1,29 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { HelpCircle as a } from "lucide-react";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { IconQuestionCircle as a } from "@gearbox-protocol/static";
 import * as d from "react";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as c, Tooltip as m, TooltipTrigger as f, TooltipContent as p } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as x } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const h = d.forwardRef(({ label: i, value: l, tip: t, valueDescription: o, className: n }, s) => /* @__PURE__ */ r("div", { ref: s, className: x("flex flex-col gap-2 w-full", n), children: [
-  /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+const h = d.forwardRef(({ label: i, value: l, tip: r, valueDescription: t, className: n }, s) => /* @__PURE__ */ o("div", { ref: s, className: x("flex flex-col gap-2 w-full", n), children: [
+  /* @__PURE__ */ o("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ e("span", { children: i }),
-    t && /* @__PURE__ */ e(c, { delayDuration: 0, children: /* @__PURE__ */ r(m, { children: [
+    r && /* @__PURE__ */ e(c, { delayDuration: 0, children: /* @__PURE__ */ o(m, { children: [
       /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-help",
-          children: /* @__PURE__ */ e(a, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ e(a, { size: 14, className: "size-3.5" })
         }
       ) }),
-      /* @__PURE__ */ e(p, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ e("p", { children: t }) })
+      /* @__PURE__ */ e(p, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ e("p", { children: r }) })
     ] }) })
   ] }),
-  /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ e("div", { className: "text-base font-semibold text-foreground", children: l }),
-    o && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: o })
+    t && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: t })
   ] })
 ] }));
 h.displayName = "HorizontalIndicator";

package/dist/esm/components/icon-button/icon-button.js

@@ -2,9 +2,9 @@ import { jsx as a } from "react/jsx-runtime";
 import { Slot as s } from "@radix-ui/react-slot";
 import { cva as d } from "class-variance-authority";
 import * as u from "react";
+import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const f = d(
   "inline-flex items-center justify-center rounded-md transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {

package/dist/esm/components/icons/fa-icon.js

@@ -0,0 +1,20 @@
+import { jsx as m } from "react/jsx-runtime";
+import { config as i } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon as t } from "@fortawesome/react-fontawesome";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as n } from "../../utils/cn.js";
+import "sonner";
+i.autoAddCss = !1;
+function u({ className: o, ...r }) {
+  return /* @__PURE__ */ m(
+    t,
+    {
+      className: n("inline-block shrink-0", o),
+      ...r
+    }
+  );
+}
+export {
+  u as FaIcon
+};

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

@@ -0,0 +1,42 @@
+import { faArrowDown as r, faArrowLeft as e, faArrowRight as o, faArrowUp as i, faArrowsUpDown as t, faBars as l, faBolt as s, faCaretDown as C, faCaretLeft as n, faCaretRight as c, faCaretUp as g, faCheck as h, faChevronLeft as w, faChevronRight as p, faCircle as m, faCircleCheck as U, faCircleExclamation as u, faCirclePlus as A, faCircleQuestion as R, faCloud as d, faCog as k, faCreditCard as x, faEllipsisVertical as E, faEnvelope as L, faKeyboard as v, faLifeRing as B, faMagnifyingGlass as D, faMessage as P, faPlus as y, faRightFromBracket as F, faTrash as M, faTriangleExclamation as T, faUser as b, faUserPlus as G, faUsers as I, faWallet as K, faXmark as Q } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as W } from "./fa-icon.js";
+export {
+  W as FaIcon,
+  r as faArrowDown,
+  e as faArrowLeft,
+  o as faArrowRight,
+  i as faArrowUp,
+  t as faArrowsUpDown,
+  l as faBars,
+  s as faBolt,
+  C as faCaretDown,
+  n as faCaretLeft,
+  c as faCaretRight,
+  g as faCaretUp,
+  h as faCheck,
+  w as faChevronLeft,
+  p as faChevronRight,
+  m as faCircle,
+  U as faCircleCheck,
+  u as faCircleExclamation,
+  A as faCirclePlus,
+  R as faCircleQuestion,
+  d as faCloud,
+  k as faCog,
+  x as faCreditCard,
+  E as faEllipsisVertical,
+  L as faEnvelope,
+  v as faKeyboard,
+  B as faLifeRing,
+  D as faMagnifyingGlass,
+  P as faMessage,
+  y as faPlus,
+  F as faRightFromBracket,
+  M as faTrash,
+  T as faTriangleExclamation,
+  b as faUser,
+  G as faUserPlus,
+  I as faUsers,
+  K as faWallet,
+  Q as faXmark
+};