@gearbox-protocol/ui-kit 4.0.0-next.60 → 4.0.0-next.61

package/dist/esm/components/app-bar/app-bar.js

@@ -1,79 +1,22 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { faBars as u } from "@fortawesome/free-solid-svg-icons";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { faBars as f } from "@fortawesome/free-solid-svg-icons";
 import * as p from "react";
 import { Button as c } from "../buttons/button/button.js";
-import { FaIcon as x } from "../icons/fa-icon.js";
-import "@gearbox-protocol/sdk/onchain";
+import { FaIcon as g } from "../icons/fa-icon.js";
 import { cn as t } from "../../utils/cn.js";
-import "luxon";
-import { Z_INDEX as g } from "../../utils/z-index.js";
-const w = p.forwardRef(
-  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-    "nav",
-    {
-      ref: o,
-      className: t(
-        "relative flex flex-row flex-nowrap items-center w-full",
-        "py-4 px-4 md:px-10",
-        e
-      ),
-      ...r,
-      children: a
-    }
-  )
-);
-w.displayName = "AppBar";
-const v = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-  "div",
-  {
-    ref: o,
-    className: t("flex flex-row flex-nowrap items-center gap-2", e),
-    ...r,
-    children: a
-  }
-));
-v.displayName = "AppBarSidePanel";
-const N = p.forwardRef(
-  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-    "div",
-    {
-      ref: o,
-      className: t(
-        "relative grow shrink-0 basis-[0%] flex justify-center self-end",
-        "px-0 md:px-3",
-        e
-      ),
-      ...r,
-      children: a
-    }
-  )
-);
-N.displayName = "AppBarCenter";
-const h = p.forwardRef(({ className: e, children: a, ...r }, o) => /* @__PURE__ */ n(
-  "div",
-  {
-    ref: o,
-    className: t(
-      "absolute bottom-[-15px] [&>div>div]:overflow-visible whitespace-nowrap w-min",
-      "hidden md:block",
-      e
-    ),
-    ...r,
-    children: a
-  }
-));
-h.displayName = "AppBarCenterContent";
-const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className: o, ...s }, i) => /* @__PURE__ */ d(
+import "@gearbox-protocol/sdk/onchain";
+import { Z_INDEX as x } from "../../utils/z-index.js";
+const N = p.forwardRef(({ attribute: e, hasHover: a = !0, children: o, className: n, ...s }, i) => /* @__PURE__ */ m(
   "div",
   {
     ref: i,
     className: t(
       "relative text-[15px] leading-[125%] text-foreground cursor-pointer group/app-nav-item",
-      o
+      n
     ),
     ...s,
     children: [
-      a && /* @__PURE__ */ n(
+      a && /* @__PURE__ */ r(
         "div",
         {
           "aria-hidden": "true",
@@ -86,9 +29,9 @@ const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className
           )
         }
       ),
-      /* @__PURE__ */ d("div", { className: "relative flex items-center", children: [
-        r,
-        e != null && /* @__PURE__ */ n(
+      /* @__PURE__ */ m("div", { className: "relative flex items-center", children: [
+        o,
+        e != null && /* @__PURE__ */ r(
           "div",
           {
             className: t(
@@ -105,56 +48,56 @@ const B = p.forwardRef(({ attribute: e, hasHover: a = !0, children: r, className
     ]
   }
 ));
-B.displayName = "AppBarNavItem";
-const f = {
+N.displayName = "AppBarNavItem";
+const u = {
   sm: "sm",
   md: "default",
   lg: "lg"
-}, m = {
+}, d = {
   sm: 12,
   md: 14,
   lg: 16
-}, y = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+}, h = p.forwardRef(({ size: e = "lg", className: a, ...o }, n) => /* @__PURE__ */ r(
   c,
   {
-    ref: o,
+    ref: n,
     variant: "outline",
-    size: f[e],
+    size: u[e],
     width: "compact",
     className: t("inline-flex", a),
-    ...r,
-    children: /* @__PURE__ */ n(
-      x,
+    ...o,
+    children: /* @__PURE__ */ r(
+      g,
       {
-        icon: u,
+        icon: f,
         className: "text-foreground",
-        style: { width: m[e], height: m[e] }
+        style: { width: d[e], height: d[e] }
       }
     )
   }
 ));
-y.displayName = "AppBarHamburgerButton";
-const b = p.forwardRef(({ size: e = "lg", className: a, ...r }, o) => /* @__PURE__ */ n(
+h.displayName = "AppBarHamburgerButton";
+const v = p.forwardRef(({ size: e = "lg", className: a, ...o }, n) => /* @__PURE__ */ r(
   c,
   {
-    ref: o,
+    ref: n,
     variant: "outline",
-    size: f[e],
+    size: u[e],
     width: "compact",
     className: t("inline-flex", a),
-    ...r,
-    children: /* @__PURE__ */ n(A, {})
+    ...o,
+    children: /* @__PURE__ */ r(w, {})
   }
 ));
-b.displayName = "AppBarDotsButton";
-function A() {
-  return /* @__PURE__ */ d("span", { className: "inline-flex items-center justify-center gap-[2px]", children: [
-    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
-    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
-    /* @__PURE__ */ n("span", { className: "block w-1 h-1 rounded-full bg-foreground" })
+v.displayName = "AppBarDotsButton";
+function w() {
+  return /* @__PURE__ */ m("span", { className: "inline-flex items-center justify-center gap-[2px]", children: [
+    /* @__PURE__ */ r("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
+    /* @__PURE__ */ r("span", { className: "block w-1 h-1 rounded-full bg-foreground" }),
+    /* @__PURE__ */ r("span", { className: "block w-1 h-1 rounded-full bg-foreground" })
   ] });
 }
-const R = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, ...s }, i) => /* @__PURE__ */ n(
+const y = p.forwardRef(({ children: e, className: a, onClick: o, onKeyDown: n, ...s }, i) => /* @__PURE__ */ r(
   "div",
   {
     ref: i,
@@ -170,40 +113,36 @@ const R = p.forwardRef(({ children: e, className: a, onClick: r, onKeyDown: o, .
       "transition-colors",
       a
     ),
-    onClick: r,
+    onClick: o,
     onKeyDown: (l) => {
-      (l.key === "Enter" || l.key === " ") && r?.(l), o?.(l);
+      (l.key === "Enter" || l.key === " ") && o?.(l), n?.(l);
     },
     ...s,
     children: e
   }
 ));
-R.displayName = "AppBarMenuItem";
-const D = p.forwardRef(({ children: e, className: a, ...r }, o) => /* @__PURE__ */ n(
+y.displayName = "AppBarMenuItem";
+const B = p.forwardRef(({ children: e, className: a, ...o }, n) => /* @__PURE__ */ r(
   "div",
   {
-    ref: o,
+    ref: n,
     role: "menu",
     className: t(
       "mt-2 p-1 overflow-hidden min-w-40",
       "bg-gray-40 rounded-xl",
       "shadow-[0_2px_16px_rgba(0,0,0,0.6)]",
-      g.DROPDOWN,
+      x.DROPDOWN,
       a
     ),
-    ...r,
+    ...o,
     children: e
   }
 ));
-D.displayName = "AppBarDropdownMenu";
+B.displayName = "AppBarDropdownMenu";
 export {
-  w as AppBar,
-  N as AppBarCenter,
-  h as AppBarCenterContent,
-  b as AppBarDotsButton,
-  D as AppBarDropdownMenu,
-  y as AppBarHamburgerButton,
-  R as AppBarMenuItem,
-  B as AppBarNavItem,
-  v as AppBarSidePanel
+  v as AppBarDotsButton,
+  B as AppBarDropdownMenu,
+  h as AppBarHamburgerButton,
+  y as AppBarMenuItem,
+  N as AppBarNavItem
 };

package/dist/esm/components/app-bar/index.js

@@ -1,12 +1,8 @@
-import { AppBar as e, AppBarCenter as a, AppBarCenterContent as t, AppBarDotsButton as B, AppBarDropdownMenu as n, AppBarHamburgerButton as A, AppBarMenuItem as o, AppBarNavItem as u, AppBarSidePanel as m } from "./app-bar.js";
+import { AppBarDotsButton as t, AppBarDropdownMenu as a, AppBarHamburgerButton as o, AppBarMenuItem as B, AppBarNavItem as e } from "./app-bar.js";
 export {
-  e as AppBar,
-  a as AppBarCenter,
-  t as AppBarCenterContent,
-  B as AppBarDotsButton,
-  n as AppBarDropdownMenu,
-  A as AppBarHamburgerButton,
-  o as AppBarMenuItem,
-  u as AppBarNavItem,
-  m as AppBarSidePanel
+  t as AppBarDotsButton,
+  a as AppBarDropdownMenu,
+  o as AppBarHamburgerButton,
+  B as AppBarMenuItem,
+  e as AppBarNavItem
 };

package/dist/esm/components/assets-list-cell/assets-list-cell.js

@@ -1,208 +1,145 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { IconExternal as R } from "@gearbox-protocol/static";
-import { useMemo as S } from "react";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { IconExternal as j } from "@gearbox-protocol/static";
+import { useMemo as A } from "react";
 import "../buttons/back-button/back-button.js";
-import { Button as $ } from "../buttons/button/button.js";
+import { Button as z } from "../buttons/button/button.js";
 import "../buttons/copy-button/copy-button.js";
 import "../buttons/external-button/external-button.js";
 import "../buttons/tab-button/tab-button.js";
+import { CollateralAllocationTooltip as L } from "../collateral-allocation-tooltip/collateral-allocation-tooltip.js";
+import { TokenIcon as N } from "../token-icon/token-icon.js";
+import { SimpleTooltip as v } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { cn as f } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as T } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
-import { CollateralAllocationTooltip as B } from "../collateral-allocation-tooltip/collateral-allocation-tooltip.js";
-import { TokenIcon as j } from "../token-icon/token-icon.js";
-import { SimpleTooltip as M } from "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-function z(t, n) {
-  return t ? /* @__PURE__ */ e(B, { data: t, children: n }) : n;
+function M(e, n) {
+  return e ? /* @__PURE__ */ t(L, { data: e, children: n }) : n;
 }
-function O({
-  count: t,
+function S({
+  count: e,
   iconSize: n,
   onOtherClick: o,
-  otherTooltip: i,
-  fallbackTooltip: d
+  otherTooltip: r,
+  fallbackTooltip: l
 }) {
-  const r = T(
+  const i = f(
     "inline-flex items-center justify-center rounded-full shrink-0",
     "bg-gray-50 text-foreground ml-1!",
     o && "cursor-pointer hover:bg-gray-70 transition-colors"
-  ), c = {
+  ), s = {
     width: n,
     height: n,
     minWidth: n,
     minHeight: n,
     zIndex: 0
-  }, u = /* @__PURE__ */ p("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
+  }, a = /* @__PURE__ */ d("span", { className: "text-[10px]! leading-[10px] font-medium", children: [
     "+",
-    t
+    e
   ] });
-  return !o && !i ? /* @__PURE__ */ e("span", { className: r, style: c, children: u }) : /* @__PURE__ */ e(M, { title: o ? /* @__PURE__ */ e(
+  return !o && !r ? /* @__PURE__ */ t("span", { className: i, style: s, children: a }) : /* @__PURE__ */ t(v, { title: o ? /* @__PURE__ */ t(
     "button",
     {
       type: "button",
       onClick: o,
-      className: r,
-      style: c,
-      children: u
+      className: i,
+      style: s,
+      children: a
     }
-  ) : /* @__PURE__ */ e("span", { className: r, style: c, children: u }), placement: "top", children: i || d });
+  ) : /* @__PURE__ */ t("span", { className: i, style: s, children: a }), placement: "top", children: r || l });
 }
-function E(t) {
-  return "balances" in t && t.balances !== void 0;
+function $(e) {
+  return "tokens" in e && e.tokens !== void 0;
 }
-function H(t) {
-  return "tokens" in t && t.tokens !== void 0;
-}
-function W({
-  assetAddress: t,
+function B({
+  assetAddress: e,
   symbol: n,
   iconSymbol: o,
-  comment: i,
-  explorerUrl: d,
-  iconSize: r = 24,
-  className: c
+  comment: r,
+  explorerUrl: l,
+  iconSize: i = 24,
+  className: s
 }) {
-  return /* @__PURE__ */ p("div", { className: T("flex items-center gap-3", c), children: [
-    /* @__PURE__ */ e(j, { token: o ?? n, size: r }),
-    /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e("div", { className: "font-medium", children: n }),
-      i && /* @__PURE__ */ p("div", { className: "text-md text-muted-foreground", children: [
+  return /* @__PURE__ */ d("div", { className: f("flex items-center gap-3", s), children: [
+    /* @__PURE__ */ t(N, { token: o ?? n, size: i }),
+    /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ t("div", { className: "font-medium", children: n }),
+      r && /* @__PURE__ */ d("div", { className: "text-md text-muted-foreground", children: [
         "(",
-        i,
+        r,
         ")"
       ] }),
-      d && /* @__PURE__ */ e(
-        $,
+      l && /* @__PURE__ */ t(
+        z,
         {
           variant: "ghost",
           size: "sm",
           className: "text-muted-foreground hover:text-foreground p-0 h-auto",
-          onClick: () => window.open(`${d}/address/${t}`, "_blank"),
-          children: /* @__PURE__ */ e(R, { size: 12, className: "size-3" })
+          onClick: () => window.open(`${l}/address/${e}`, "_blank"),
+          children: /* @__PURE__ */ t(j, { size: 12, className: "size-3" })
         }
       )
     ] })
   ] });
 }
-function _({
-  balances: t,
-  tokensList: n,
-  maxAssets: o = 3,
-  iconSize: i = 24,
-  options: d,
-  className: r
-}) {
-  const {
-    mode: c = "default",
-    showIconTooltip: u = !0,
-    otherTooltip: x,
-    onOtherClick: v,
-    allocation: g
-  } = d || {}, w = c === "cascade", k = u && !g, [y, C, I, h] = S(() => {
-    const s = t, l = s.slice(0, o), a = s.slice(o), f = a.map((b) => {
-      const N = typeof b == "string" ? b : b.token;
-      return n[N]?.title || n[N]?.symbol || "unknown";
-    }).join(", "), m = s.length > o;
-    return [l, a, f, m];
-  }, [t, o, n]);
-  return z(
-    g,
-    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", r), children: [
-      y.map((s, l, a) => {
-        const f = typeof s == "string" ? s : s.token, m = n[f], b = l === a.length - 1, N = w ? a.length - l : void 0, A = /* @__PURE__ */ e(j, { token: m, size: i });
-        return /* @__PURE__ */ e(
-          "div",
-          {
-            className: "flex-shrink-0 flex",
-            style: {
-              zIndex: N,
-              marginRight: b ? 0 : w ? -Math.round(i * 0.5) : 4
-            },
-            children: k ? /* @__PURE__ */ e(
-              M,
-              {
-                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: A }),
-                placement: "top",
-                children: m?.title || m?.symbol || "unknown"
-              }
-            ) : A
-          },
-          f ?? l
-        );
-      }),
-      h && /* @__PURE__ */ e(
-        O,
-        {
-          count: C.length,
-          iconSize: i,
-          onOtherClick: v,
-          otherTooltip: x,
-          fallbackTooltip: I
-        }
-      )
-    ] })
-  );
-}
-function q({
-  tokens: t,
+function E({
+  tokens: e,
   maxAssets: n = 3,
   iconSize: o = 24,
-  options: i,
-  className: d
+  options: r,
+  className: l
 }) {
   const {
-    mode: r = "default",
-    showIconTooltip: c = !0,
-    otherTooltip: u,
-    onOtherClick: x,
-    allocation: v
-  } = i || {}, g = r === "cascade", w = c && !v, [k, y, C, I] = S(() => {
-    const h = t.slice(0, n), s = t.slice(n), l = s.map((a) => a.symbol || "unknown").join(", ");
-    return [h, s, l, t.length > n];
-  }, [t, n]);
-  return z(
-    v,
-    /* @__PURE__ */ p("div", { className: T("relative inline-flex items-center", d), children: [
-      k.map((h, s, l) => {
-        const a = s === l.length - 1, f = g ? l.length - s : void 0, m = /* @__PURE__ */ e(j, { token: h, size: o });
-        return /* @__PURE__ */ e(
+    mode: i = "default",
+    showIconTooltip: s = !0,
+    otherTooltip: a,
+    onOtherClick: p,
+    allocation: g
+  } = r || {}, x = i === "cascade", T = s && !g, [k, w, y, C] = A(() => {
+    const m = e.slice(0, n), c = e.slice(n), u = c.map((h) => h.symbol || "unknown").join(", ");
+    return [m, c, u, e.length > n];
+  }, [e, n]);
+  return M(
+    g,
+    /* @__PURE__ */ d("div", { className: f("relative inline-flex items-center", l), children: [
+      k.map((m, c, u) => {
+        const h = c === u.length - 1, I = x ? u.length - c : void 0, b = /* @__PURE__ */ t(N, { token: m, size: o });
+        return /* @__PURE__ */ t(
           "div",
           {
             className: "flex-shrink-0 flex",
             style: {
-              zIndex: f,
-              marginRight: a ? 0 : g ? -Math.round(o * 0.5) : 4
+              zIndex: I,
+              marginRight: h ? 0 : x ? -Math.round(o * 0.5) : 4
             },
-            children: w ? /* @__PURE__ */ e(
-              M,
+            children: T ? /* @__PURE__ */ t(
+              v,
               {
-                title: /* @__PURE__ */ e("span", { className: "inline-flex", children: m }),
+                title: /* @__PURE__ */ t("span", { className: "inline-flex", children: b }),
                 placement: "top",
-                children: h.symbol || "unknown"
+                children: m.symbol || "unknown"
               }
-            ) : m
+            ) : b
           },
-          h.address ?? s
+          m.address ?? c
         );
       }),
-      I && /* @__PURE__ */ e(
-        O,
+      C && /* @__PURE__ */ t(
+        S,
         {
-          count: y.length,
+          count: w.length,
           iconSize: o,
-          onOtherClick: x,
-          otherTooltip: u,
-          fallbackTooltip: C
+          onOtherClick: p,
+          otherTooltip: a,
+          fallbackTooltip: y
         }
       )
     ] })
   );
 }
-function ot(t) {
-  return H(t) ? /* @__PURE__ */ e(q, { ...t }) : E(t) ? /* @__PURE__ */ e(_, { ...t }) : /* @__PURE__ */ e(W, { ...t });
+function Y(e) {
+  return $(e) ? /* @__PURE__ */ t(E, { ...e }) : /* @__PURE__ */ t(B, { ...e });
 }
 export {
-  ot as AssetsListCell
+  Y as AssetsListCell
 };

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

@@ -1,8 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as a } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const d = n(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-auto",
@@ -26,10 +25,9 @@ const d = n(
     }
   }
 );
-function p({ className: r, variant: e, ...t }) {
+function g({ className: r, variant: e, ...t }) {
   return /* @__PURE__ */ o("div", { className: a(d({ variant: e }), r), ...t });
 }
 export {
-  p as Badge,
-  d as badgeVariants
+  g as Badge
 };

package/dist/esm/components/badge/chip.js

@@ -1,17 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as i } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 import { Badge as e } from "./badge.js";
 class s {
   static root = "chip-root";
 }
-class p {
+class c {
   static root = "chips-root";
   static chip = s.root;
 }
-function l({
+function f({
   children: t,
   tone: o = "neutral",
   className: a
@@ -26,19 +25,19 @@ function l({
     }
   );
 }
-function u({ children: t, className: o }) {
+function l({ children: t, className: o }) {
   return /* @__PURE__ */ r(
     "div",
     {
       className: i("flex shrink-0 items-center gap-x-2", o),
-      "data-testid": p.root,
+      "data-testid": c.root,
       children: t
     }
   );
 }
 export {
-  l as Chip,
+  f as Chip,
   s as ChipTest,
-  u as Chips,
-  p as ChipsTest
+  l as Chips,
+  c as ChipsTest
 };

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

@@ -1,10 +1,9 @@
-import { Badge as i, badgeVariants as r } from "./badge.js";
-import { Chip as t, ChipTest as a, Chips as h, ChipsTest as o } from "./chip.js";
+import { Badge as h } from "./badge.js";
+import { Chip as o, ChipTest as r, Chips as s, ChipsTest as t } from "./chip.js";
 export {
-  i as Badge,
-  t as Chip,
-  a as ChipTest,
-  h as Chips,
-  o as ChipsTest,
-  r as badgeVariants
+  h as Badge,
+  o as Chip,
+  r as ChipTest,
+  s as Chips,
+  t as ChipsTest
 };

package/dist/esm/components/base/amount-input/amount-input.js

@@ -5,8 +5,8 @@ import { useTitleText as G } from "../text/use-title-text.js";
 import { Modal as H } from "../../modal/modal.js";
 import { useIntlTyped as J, FormattedMessageTyped as K } from "../../typed-intl/index.js";
 import { useIsMobile as Q } from "../../../hooks/use-media-query.js";
-import { bnToInputView as M } from "../../../utils/bn-to-input-view.js";
 import { cn as R } from "../../../utils/cn.js";
+import { bnToInputView as M } from "../../../utils/internal/bn-to-input-view.js";
 import { parseInputToBN as S } from "../../../utils/parse-input-to-bn.js";
 import { BalanceIndicator as W } from "./balance-indicator.js";
 import { AmountInputTest as m } from "./constants.js";

package/dist/esm/components/base/amount-input/index.js

@@ -1,8 +1,6 @@
-import { AmountInput as e } from "./amount-input.js";
-import { TokenSelectPanel as r } from "./token-select-panel.js";
+import { AmountInput as m } from "./amount-input.js";
 import { AmountInputTest as p } from "./constants.js";
 export {
-  e as AmountInput,
-  p as AmountInputTest,
-  r as TokenSelectPanel
+  m as AmountInput,
+  p as AmountInputTest
 };