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

package/dist/esm/components/spinner/spinner.js

@@ -1,11 +1,11 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { Loader2 as d } from "lucide-react";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { IconPending as d } from "@gearbox-protocol/static";
 import * as i from "react";
-import { cn as n } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const o = i.forwardRef(
-  ({ className: s, size: t = "default", label: e, ...a }, m) => {
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+const m = i.forwardRef(
+  ({ className: s, size: e = "default", label: r, ...n }, o) => {
     const l = {
       xs: "h-3 w-3",
       sm: "h-4 w-4",
@@ -16,43 +16,44 @@ const o = i.forwardRef(
     return /* @__PURE__ */ c(
       "div",
       {
-        ref: m,
-        className: n(
+        ref: o,
+        className: a(
           "flex flex-col items-center justify-center gap-2",
           s
         ),
-        ...a,
+        ...n,
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ t(
             d,
             {
-              className: n(
+              size: e === "xs" ? 12 : e === "sm" ? 16 : e === "default" ? 24 : e === "lg" ? 32 : 48,
+              className: a(
                 "animate-spin text-muted-foreground",
-                l[t]
+                l[e]
               )
             }
           ),
-          e && /* @__PURE__ */ r("span", { className: "text-sm text-muted-foreground", children: e })
+          r && /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground", children: r })
         ]
       }
     );
   }
 );
-o.displayName = "Spinner";
-const f = i.forwardRef(({ className: s, fullScreen: t = !1, ...e }, a) => /* @__PURE__ */ r(
+m.displayName = "Spinner";
+const f = i.forwardRef(({ className: s, fullScreen: e = !1, ...r }, n) => /* @__PURE__ */ t(
   "div",
   {
-    ref: a,
-    className: n(
+    ref: n,
+    className: a(
       "flex items-center justify-center bg-background/80 backdrop-blur-sm",
-      t ? "fixed inset-0 z-50" : "absolute inset-0",
+      e ? "fixed inset-0 z-50" : "absolute inset-0",
       s
     ),
-    children: /* @__PURE__ */ r(o, { size: "lg", ...e })
+    children: /* @__PURE__ */ t(m, { size: "lg", ...r })
   }
 ));
 f.displayName = "SpinnerOverlay";
 export {
-  o as Spinner,
+  m as Spinner,
   f as SpinnerOverlay
 };

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

@@ -1,8 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
 import * as l from "react";
+import "@gearbox-protocol/sdk";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function d(t) {
   if (t === !0) return "flex-1";
   if (t === "auto") return "flex-none";

package/dist/esm/components/stat-badge/stat-badge.js

@@ -2,10 +2,11 @@ import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 import * as v from "react";
 import { StatusTriangle as x } from "../status-triangle/status-triangle.js";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as B, Tooltip as V, TooltipTrigger as T, TooltipContent as w } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const y = l(
   "w-full h-full rounded-lg border transition-colors",
   {

package/dist/esm/components/status-dot/status-dot.js

@@ -1,15 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import * as n from "react";
+import "@gearbox-protocol/sdk";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const d = m("rounded-full shrink-0", {
   variants: {
     variant: {
       default: "bg-muted-foreground",
-      success: "bg-green-500",
-      warning: "bg-yellow-500",
+      success: "bg-success",
+      warning: "bg-warning",
       alert: "bg-destructive",
       primary: "bg-primary",
       secondary: "bg-secondary",
@@ -25,24 +25,24 @@ const d = m("rounded-full shrink-0", {
   },
   defaultVariants: {
     variant: "default",
-    size: "default"
+    size: "sm"
   }
-}), l = n.forwardRef(
-  ({ className: t, variant: a, size: r, pulse: e, ...s }, o) => /* @__PURE__ */ i(
+}), c = n.forwardRef(
+  ({ className: t, variant: a, size: r, pulse: s, ...e }, i) => /* @__PURE__ */ o(
     "div",
     {
-      ref: o,
+      ref: i,
       className: u(
         d({ variant: a, size: r }),
-        e && "animate-pulse",
+        s && "animate-pulse",
         t
       ),
-      ...s
+      ...e
     }
   )
 );
-l.displayName = "StatusDot";
+c.displayName = "StatusDot";
 export {
-  l as StatusDot,
+  c as StatusDot,
   d as statusDotVariants
 };

package/dist/esm/components/status-elements/index.js

@@ -0,0 +1,5 @@
+import { HealthDot as o, StatusBars as r } from "./status-elements.js";
+export {
+  o as HealthDot,
+  r as StatusBars
+};

package/dist/esm/components/status-elements/status-elements.js

@@ -0,0 +1,48 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+const s = {
+  good: "bg-success",
+  medium: "bg-warning",
+  bad: "bg-destructive",
+  critical: "bg-destructive",
+  liquidation: "bg-liquidation"
+}, l = {
+  good: 3,
+  medium: 2,
+  bad: 1,
+  critical: 1,
+  liquidation: 1
+}, u = 3;
+function b({ zone: t, size: i = 8 }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: o("rounded-full shrink-0", s[t]),
+      style: { width: i, height: i },
+      "aria-hidden": !0
+    }
+  );
+}
+function v({ zone: t }) {
+  const i = l[t], n = s[t], c = ["first", "second", "third"], d = Array.from({ length: u }, (e, r) => ({
+    key: c[r],
+    isActive: r < i
+  })).reverse();
+  return /* @__PURE__ */ a("div", { className: "flex w-2 flex-wrap gap-0.5", "aria-hidden": !0, children: d.map(({ key: e, isActive: r }) => /* @__PURE__ */ a(
+    "div",
+    {
+      className: o(
+        "h-[3px] w-full min-w-[3px] flex-1 rounded-[1.5px]",
+        r ? n : "bg-gray-50"
+      )
+    },
+    e
+  )) });
+}
+export {
+  b as HealthDot,
+  v as StatusBars
+};

package/dist/esm/components/status-triangle/status-triangle.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as d } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const c = {
   xs: 4,
   sm: 5,

package/dist/esm/components/stepper/stepper.js

@@ -1,40 +1,41 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { Check as p } from "lucide-react";
-import * as h from "react";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as p from "react";
+import { faCheck as u } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as h } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const w = h.forwardRef(
+const v = p.forwardRef(
   ({
-    className: u,
+    className: g,
     steps: d,
     activeStep: l,
-    orientation: g = "horizontal",
+    orientation: y = "horizontal",
     onStepClick: o,
-    ...y
-  }, b) => {
-    const c = g === "horizontal";
+    ...b
+  }, N) => {
+    const c = y === "horizontal";
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: b,
+        ref: N,
         className: r(
           "flex",
           c ? "flex-row flex-wrap items-center gap-x-2 gap-y-3 sm:gap-x-0 sm:gap-y-4" : "flex-col",
-          u
+          g
         ),
-        ...y,
+        ...b,
         children: d.map((t, i) => {
           const s = i < l, m = i === l, x = i === d.length - 1, f = o ? {
             role: "button",
             tabIndex: 0,
             onClick: o ? () => o(i) : void 0,
-            onKeyDown: o ? (n) => {
-              (n.key === "Enter" || n.key === " ") && (n.preventDefault(), o(i));
+            onKeyDown: o ? (a) => {
+              (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o(i));
             } : void 0
           } : {};
-          return c ? /* @__PURE__ */ a(h.Fragment, { children: [
-            /* @__PURE__ */ a(
+          return c ? /* @__PURE__ */ n(p.Fragment, { children: [
+            /* @__PURE__ */ n(
               "div",
               {
                 className: r(
@@ -52,10 +53,10 @@ const w = h.forwardRef(
                         m && "border-primary text-primary",
                         !s && !m && "border-muted text-muted-foreground"
                       ),
-                      children: s ? /* @__PURE__ */ e(p, { className: "h-3 w-3 sm:h-4 sm:w-4" }) : /* @__PURE__ */ e("span", { children: i + 1 })
+                      children: s ? /* @__PURE__ */ e(h, { icon: u, className: "size-3 sm:size-4" }) : /* @__PURE__ */ e("span", { children: i + 1 })
                     }
                   ),
-                  /* @__PURE__ */ a("div", { className: "flex flex-col gap-0.5 text-left", children: [
+                  /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5 text-left", children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
@@ -81,7 +82,7 @@ const w = h.forwardRef(
                 )
               }
             )
-          ] }, t.id) : /* @__PURE__ */ a(
+          ] }, t.id) : /* @__PURE__ */ n(
             "div",
             {
               className: r(
@@ -90,7 +91,7 @@ const w = h.forwardRef(
               ),
               ...f,
               children: [
-                /* @__PURE__ */ a("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ n("div", { className: "flex flex-col items-center", children: [
                   /* @__PURE__ */ e(
                     "div",
                     {
@@ -100,7 +101,7 @@ const w = h.forwardRef(
                         m && "border-primary text-primary",
                         !s && !m && "border-muted text-muted-foreground"
                       ),
-                      children: s ? /* @__PURE__ */ e(p, { className: "h-3 w-3 sm:h-4 sm:w-4" }) : /* @__PURE__ */ e("span", { children: i + 1 })
+                      children: s ? /* @__PURE__ */ e(h, { icon: u, className: "size-3 sm:size-4" }) : /* @__PURE__ */ e("span", { children: i + 1 })
                     }
                   ),
                   !x && /* @__PURE__ */ e(
@@ -113,7 +114,7 @@ const w = h.forwardRef(
                     }
                   )
                 ] }),
-                /* @__PURE__ */ a("div", { className: "flex flex-col gap-0.5 pt-0.5 sm:pt-1.5 pb-3 sm:pb-4", children: [
+                /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5 pt-0.5 sm:pt-1.5 pb-3 sm:pb-4", children: [
                   /* @__PURE__ */ e(
                     "span",
                     {
@@ -136,7 +137,7 @@ const w = h.forwardRef(
     );
   }
 );
-w.displayName = "Stepper";
+v.displayName = "Stepper";
 export {
-  w as Stepper
+  v as Stepper
 };

package/dist/esm/components/styled-dropdown/styled-dropdown.js

@@ -10,9 +10,9 @@ import "../dropdown-menu/dropdown-menu-shortcut.js";
 import "../dropdown-menu/dropdown-menu-sub-content.js";
 import "../dropdown-menu/dropdown-menu-sub-trigger.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function U({
   children: g,
   open: u,

package/dist/esm/components/switch/switch.js

@@ -1,9 +1,9 @@
 import { jsx as a } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-switch";
 import * as l from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const d = l.forwardRef(({ className: r, size: t = "default", ...o }, i) => {
   const n = {
     sm: "h-4 w-7",

package/dist/esm/components/tab-control/tab-control.js

@@ -1,9 +1,9 @@
 import { jsx as f, jsxs as C, Fragment as S } from "react/jsx-runtime";
 import { useRef as h, useState as v, useCallback as m, useMemo as w, useEffect as T } from "react";
 import { useLocation as U, useNavigate as N } from "react-router-dom";
+import "@gearbox-protocol/sdk";
 import { cn as b } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function $(r) {
   if (!r) return null;
   const { width: t = 0, height: o = 0 } = r?.getBoundingClientRect() || {}, i = r?.offsetTop || 0, s = r?.offsetLeft || 0;

package/dist/esm/components/table/edit-button.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { Edit as d } from "lucide-react";
+import { IconEditPen as d } from "@gearbox-protocol/static";
 import "../buttons/back-button/back-button.js";
 import { Button as h } from "../buttons/button/button.js";
 import "../buttons/copy-button/copy-button.js";
@@ -7,22 +7,22 @@ import "../buttons/external-button/external-button.js";
 import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 import "../buttons/tab-button/tab-button.js";
-function q({
+function P({
   onClick: m,
   customButton: p,
-  children: n,
-  disabled: e,
+  children: e,
+  disabled: n,
   width: c,
   $width: s,
   className: a,
   style: f,
   ...l
 }) {
-  const t = n || p, o = c === "wide" || s === "wide";
+  const t = e || p, o = c === "wide" || s === "wide";
   return /* @__PURE__ */ i("div", { className: r(t ? "px-4 py-2" : "px-2", o && "w-full"), children: /* @__PURE__ */ i(
     h,
     {
@@ -33,13 +33,13 @@ function q({
       ),
       variant: "ghost",
       onClick: m,
-      disabled: e,
+      disabled: n,
       style: f,
       ...l,
-      children: t ?? /* @__PURE__ */ i(d, { className: "h-4 w-4" })
+      children: t ?? /* @__PURE__ */ i(d, { size: 16, className: "size-4" })
     }
   ) });
 }
 export {
-  q as EditButton
+  P as EditButton
 };

package/dist/esm/components/table/editable-grid-table.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { ExternalLink as x } from "lucide-react";
+import { IconExternal as x } from "@gearbox-protocol/static";
 import "connectkit";
 import "wagmi";
 import "../buttons/back-button/back-button.js";
@@ -9,16 +9,16 @@ import "../buttons/external-button/external-button.js";
 import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import "@gearbox-protocol/sdk";
 import { TabButton as u } from "../buttons/tab-button/tab-button.js";
 import { SignInRequired as b } from "../auth/signin-required.js";
 import "viem/siwe";
 import { TokenIcon as v } from "../token-icon/token-icon.js";
 import { GridTableCell as h, GridTable as N } from "./grid-table.js";
-import { UpdatedValue as k } from "./updated-value.js";
+import { UpdatedValue as C } from "./updated-value.js";
 function H({
   assetAddress: o,
   symbol: i,
@@ -43,7 +43,7 @@ function H({
           size: "sm",
           className: "text-muted-foreground hover:text-foreground p-0 h-auto",
           onClick: () => window.open(`${r}/address/${o}`, "_blank"),
-          children: /* @__PURE__ */ e(x, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ e(x, { size: 12, className: "size-3" })
         }
       )
     ] })
@@ -68,7 +68,7 @@ function J({
     center: "justify-center"
   }[d];
   return /* @__PURE__ */ e(h, { span: t, className: r, children: /* @__PURE__ */ e("div", { className: `flex ${f} w-full text-${d}`, children: /* @__PURE__ */ e(
-    k,
+    C,
     {
       oldValue: o,
       newValue: i,

package/dist/esm/components/table/editable-table.js

@@ -8,10 +8,10 @@ import { ExternalButton as h } from "../buttons/external-button/external-button.
 import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
 import "react";
+import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import "@gearbox-protocol/sdk";
 import { TabButton as f } from "../buttons/tab-button/tab-button.js";
 import { SignInRequired as x } from "../auth/signin-required.js";
 import "viem/siwe";

package/dist/esm/components/table/grid-loading-line.js

@@ -1,33 +1,39 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Skeleton as n } from "../skeleton/skeleton.js";
+import { Skeleton as p } from "../skeleton/skeleton.js";
 import "react";
-import { cn as d } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-function b({
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+function x({
   height: e = "70px",
   columns: i = 6,
-  className: t,
-  ...o
+  cellClassName: o,
+  last: m,
+  className: n,
+  ...d
 }) {
   return /* @__PURE__ */ r(
     "div",
     {
-      className: d("contents", t),
+      className: t("contents", n),
       style: { minHeight: e },
-      ...o,
-      children: Array.from({ length: i }, (l, m) => /* @__PURE__ */ r(
+      ...d,
+      children: Array.from({ length: i }, (s, l) => /* @__PURE__ */ r(
         "div",
         {
-          className: "border-b border-border p-4 flex items-center",
+          className: t(
+            "flex items-center",
+            !m && "border-b border-border",
+            o || "p-4"
+          ),
           style: { minHeight: e },
-          children: /* @__PURE__ */ r(n, { width: "full", height: "md" })
+          children: /* @__PURE__ */ r(p, { width: "full", height: "md" })
         },
-        `${m}-${i}`
+        `${l}-${i}`
       ))
     }
   );
 }
 export {
-  b as GridLoadingLine
+  x as GridLoadingLine
 };