@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

package/dist/esm/components/alert-dialog/alert-dialog.js

@@ -1,20 +1,11 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-alert-dialog";
-import * as i from "react";
-import "../buttons/back-button/back-button.js";
-import { buttonVariants as s } from "../buttons/button/button.js";
-import "../buttons/copy-button/copy-button.js";
-import "../buttons/external-button/external-button.js";
-import "../buttons/filter-button/filter-button.js";
-import "../buttons/navigation-button/navigation-button.js";
-import "@gearbox-protocol/sdk";
+import * as s from "react";
+import { buttonVariants as i } from "../buttons/button/button.variants.js";
 import { cn as r } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import { Z_INDEX as m } from "../../utils/z-index.js";
-import "../buttons/tab-button/tab-button.js";
-const h = t.Root, k = t.Trigger, p = t.Portal, n = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const v = t.Root, T = t.Trigger, c = t.Portal, n = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ o(
   t.Overlay,
   {
     className: r(
@@ -23,16 +14,16 @@ const h = t.Root, k = t.Trigger, p = t.Portal, n = i.forwardRef(({ className: e,
       e
     ),
     ...a,
-    ref: o
+    ref: l
   }
 ));
 n.displayName = t.Overlay.displayName;
-const c = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ d(p, { children: [
-  /* @__PURE__ */ l(n, {}),
-  /* @__PURE__ */ l(
+const p = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ d(c, { children: [
+  /* @__PURE__ */ o(n, {}),
+  /* @__PURE__ */ o(
     t.Content,
     {
-      ref: o,
+      ref: l,
       className: r(
         m.MODAL_ALERT,
         "fixed left-[50%] top-[50%] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-background p-4 sm:p-6 sm:w-full shadow-lg rounded-lg",
@@ -42,11 +33,11 @@ const c = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ d(p, { chi
     }
   )
 ] }));
-c.displayName = t.Content.displayName;
+p.displayName = t.Content.displayName;
 const f = ({
   className: e,
   ...a
-}) => /* @__PURE__ */ l(
+}) => /* @__PURE__ */ o(
   "div",
   {
     className: r(
@@ -60,7 +51,7 @@ f.displayName = "AlertDialogHeader";
 const g = ({
   className: e,
   ...a
-}) => /* @__PURE__ */ l(
+}) => /* @__PURE__ */ o(
   "div",
   {
     className: r(
@@ -71,39 +62,39 @@ const g = ({
   }
 );
 g.displayName = "AlertDialogFooter";
-const N = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const N = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ o(
   t.Title,
   {
-    ref: o,
+    ref: l,
     className: r("text-lg font-semibold", e),
     ...a
   }
 ));
 N.displayName = t.Title.displayName;
-const A = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const A = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ o(
   t.Description,
   {
-    ref: o,
+    ref: l,
     className: r("text-sm text-muted-foreground", e),
     ...a
   }
 ));
 A.displayName = t.Description.displayName;
-const y = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const y = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ o(
   t.Action,
   {
-    ref: o,
-    className: r(s(), e),
+    ref: l,
+    className: r(i(), e),
     ...a
   }
 ));
 y.displayName = t.Action.displayName;
-const D = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const D = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ o(
   t.Cancel,
   {
-    ref: o,
+    ref: l,
     className: r(
-      s({ variant: "outline" }),
+      i({ variant: "outline" }),
       "mt-2 sm:mt-0",
       e
     ),
@@ -112,15 +103,13 @@ const D = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
 ));
 D.displayName = t.Cancel.displayName;
 export {
-  h as AlertDialog,
+  v as AlertDialog,
   y as AlertDialogAction,
   D as AlertDialogCancel,
-  c as AlertDialogContent,
+  p as AlertDialogContent,
   A as AlertDialogDescription,
   g as AlertDialogFooter,
   f as AlertDialogHeader,
-  n as AlertDialogOverlay,
-  p as AlertDialogPortal,
   N as AlertDialogTitle,
-  k as AlertDialogTrigger
+  T as AlertDialogTrigger
 };

package/dist/esm/components/alert-dialog/index.js

@@ -1,14 +1,12 @@
-import { AlertDialog as r, AlertDialogAction as o, AlertDialogCancel as t, AlertDialogContent as i, AlertDialogDescription as a, AlertDialogFooter as g, AlertDialogHeader as A, AlertDialogOverlay as D, AlertDialogPortal as n, AlertDialogTitle as c, AlertDialogTrigger as p } from "./alert-dialog.js";
+import { AlertDialog as o, AlertDialogAction as r, AlertDialogCancel as t, AlertDialogContent as i, AlertDialogDescription as a, AlertDialogFooter as g, AlertDialogHeader as A, AlertDialogTitle as D, AlertDialogTrigger as n } from "./alert-dialog.js";
 export {
-  r as AlertDialog,
-  o as AlertDialogAction,
+  o as AlertDialog,
+  r as AlertDialogAction,
   t as AlertDialogCancel,
   i as AlertDialogContent,
   a as AlertDialogDescription,
   g as AlertDialogFooter,
   A as AlertDialogHeader,
-  D as AlertDialogOverlay,
-  n as AlertDialogPortal,
-  c as AlertDialogTitle,
-  p as AlertDialogTrigger
+  D as AlertDialogTitle,
+  n as AlertDialogTrigger
 };

package/dist/esm/components/alert-modal/alert-modal.js

@@ -1,18 +1,9 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import * as s from "react";
 import "../buttons/back-button/back-button.js";
 import { Button as d } from "../buttons/button/button.js";
 import "../buttons/copy-button/copy-button.js";
 import "../buttons/external-button/external-button.js";
-import "../buttons/filter-button/filter-button.js";
-import "../buttons/navigation-button/navigation-button.js";
-import "@gearbox-protocol/sdk";
-import "clsx";
-import "tailwind-merge";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
 import "../buttons/tab-button/tab-button.js";
 import "../modal/modal.js";
 import "@radix-ui/react-dialog";
@@ -20,24 +11,27 @@ import "../dialog/dialog-container.js";
 import "../dialog/dialog-content.js";
 import "../dialog/dialog-description.js";
 import "../dialog/dialog-footer.js";
+import "clsx";
+import "tailwind-merge";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
 import { DialogModalContainer as n } from "../dialog/dialog-modal-container.js";
-import "../dialog/dialog-overlay.js";
 import "viem";
 import "../input/input.js";
 import "../label/label.js";
 import { FormattedMessageTyped as o } from "../typed-intl/index.js";
 const c = s.forwardRef(
-  function({ show: e, title: i, body: m, onHide: r, onConfirm: l = r }, p) {
+  function({ show: e, title: i, body: m, onHide: r, onConfirm: l = r }, a) {
     return /* @__PURE__ */ t(
       n,
       {
-        ref: p,
+        ref: a,
         show: e,
         onClickOutside: r,
         modal: { zIndexLayer: "MODAL_ALERT" },
-        children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-5", children: [
+        children: /* @__PURE__ */ p("div", { className: "flex flex-col gap-5", children: [
           /* @__PURE__ */ t("h2", { className: "w-full text-xl font-semibold leading-6 text-center", children: /* @__PURE__ */ t(o, { messageId: i }) }),
           /* @__PURE__ */ t("div", { className: "w-full text-center", children: /* @__PURE__ */ t(o, { messageId: m }) }),
           /* @__PURE__ */ t("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ t(d, { onClick: l, className: "w-1/4", children: /* @__PURE__ */ t(o, { messageId: "components.alertModal.ok" }) }) })

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

@@ -0,0 +1,67 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as i } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+const s = t.forwardRef(
+  ({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+    "nav",
+    {
+      ref: p,
+      className: i(
+        "relative flex flex-row flex-nowrap items-center w-full",
+        "py-4 px-4 md:px-10",
+        e
+      ),
+      ...r,
+      children: a
+    }
+  )
+);
+s.displayName = "AppBar";
+const l = t.forwardRef(({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: p,
+    className: i("flex flex-row flex-nowrap items-center gap-2", e),
+    ...r,
+    children: a
+  }
+));
+l.displayName = "AppBarSidePanel";
+const n = t.forwardRef(
+  ({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: p,
+      className: i(
+        "relative grow shrink-0 basis-[0%] flex justify-center self-end",
+        "px-0 md:px-3",
+        e
+      ),
+      ...r,
+      children: a
+    }
+  )
+);
+n.displayName = "AppBarCenter";
+const m = t.forwardRef(({ className: e, children: a, ...r }, p) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: p,
+    className: i(
+      "absolute bottom-[-15px] [&>div>div]:overflow-visible whitespace-nowrap w-min",
+      "hidden md:block",
+      e
+    ),
+    ...r,
+    children: a
+  }
+));
+m.displayName = "AppBarCenterContent";
+export {
+  s as AppBar,
+  n as AppBarCenter,
+  m as AppBarCenterContent,
+  l as AppBarSidePanel
+};

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

@@ -1,81 +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";
+import { FaIcon as g } from "../icons/fa-icon.js";
 import { cn as t } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-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",
@@ -88,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(
@@ -107,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,
@@ -172,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
 };