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

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

@@ -1,26 +1,26 @@
-import { jsxs as s, jsx as f } from "react/jsx-runtime";
-import { Filter as n } from "lucide-react";
-import * as u from "react";
-import { Button as p } from "../button/button.js";
-const c = u.forwardRef(
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { IconSliderSimple as f } from "@gearbox-protocol/static";
+import * as p from "react";
+import { Button as u } from "../button/button.js";
+const c = p.forwardRef(
   ({
     className: t,
     label: r = "Filter",
-    showIcon: o = !0,
-    variant: e = "outline",
+    showIcon: e = !0,
+    variant: o = "outline",
     size: i = "default",
     children: m,
     ...l
-  }, a) => /* @__PURE__ */ s(
-    p,
+  }, s) => /* @__PURE__ */ a(
+    u,
     {
-      ref: a,
-      variant: e,
+      ref: s,
+      variant: o,
       size: i,
       className: t,
       ...l,
       children: [
-        o && /* @__PURE__ */ f(n, { className: "h-4 w-4" }),
+        e && /* @__PURE__ */ n(f, { size: 16, className: "size-4" }),
         m || r
       ]
     }

package/dist/esm/components/buttons/navigation-button/navigation-button.js

@@ -1,10 +1,10 @@
 import { jsx as i } from "react/jsx-runtime";
-import a from "react";
+import * as a from "react";
 import { BaseLink as s } from "../../base-link/base-link.js";
+import "@gearbox-protocol/sdk";
 import { cn as d } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const l = a.forwardRef(({ href: o, text: t, isActive: e, ...r }, n) => /* @__PURE__ */ i(
+const m = a.forwardRef(({ href: o, text: r, isActive: e, ...t }, n) => /* @__PURE__ */ i(
   s,
   {
     href: o,
@@ -15,11 +15,11 @@ const l = a.forwardRef(({ href: o, text: t, isActive: e, ...r }, n) => /* @__PUR
       e ? "bg-secondary md:bg-transparent text-foreground" : ""
     ),
     "data-active": e,
-    ...r,
-    children: t
+    ...t,
+    children: r
   }
 ));
-l.displayName = "NavButton";
+m.displayName = "NavButton";
 export {
-  l as NavigationButton
+  m as NavigationButton
 };

package/dist/esm/components/buttons/range-buttons/range-buttons.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function p({
   range: n,
   rangeList: o,

package/dist/esm/components/card-grid/card-grid.js

@@ -1,9 +1,9 @@
 import { jsx as m } from "react/jsx-runtime";
 import { cva as a } from "class-variance-authority";
 import * as e from "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const p = a("grid w-full", {
   variants: {
     columns: {

package/dist/esm/components/cards/card/card.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import { cva as i } from "class-variance-authority";
 import * as o from "react";
+import "@gearbox-protocol/sdk";
 import { cn as d } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const n = i(
   "rounded-xl border border-border bg-card text-card-foreground",
   {

package/dist/esm/components/cards/expandable-call/expandable-call.js

@@ -1,16 +1,17 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { ChevronDown as m } from "lucide-react";
-import * as d from "react";
-import { cn as c } from "../../../utils/cn.js";
-import "sonner";
+import * as m from "react";
+import { faCaretDown as d } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-function g({
+import { cn as p } from "../../../utils/cn.js";
+import "sonner";
+function b({
   header: a,
   children: s,
   index: n,
   isExpandable: t = !0
 }) {
-  const [r, i] = d.useState(!1);
+  const [r, i] = m.useState(!1);
   return /* @__PURE__ */ e("div", { className: "rounded bg-gray-900/50", children: [
     /* @__PURE__ */ e(
       "div",
@@ -26,10 +27,11 @@ function g({
           ] }),
           a,
           /* @__PURE__ */ o(
-            m,
+            c,
             {
-              className: c(
-                "ml-auto h-4 w-4 text-muted-foreground",
+              icon: d,
+              className: p(
+                "ml-auto size-4 text-muted-foreground",
                 r ? "rotate-180" : "",
                 "transition-transform duration-200 ease-in-out"
               )
@@ -42,5 +44,5 @@ function g({
   ] });
 }
 export {
-  g as ExpandablCall
+  b as ExpandablCall
 };

package/dist/esm/components/cards/expandable-card/expandable-card.js

@@ -1,36 +1,38 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { ChevronDown as m } from "lucide-react";
-import * as d from "react";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import * as m from "react";
+import { faCaretDown as d } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-import { Card as c, CardContent as f } from "../card/card.js";
-function g({
-  header: s,
-  children: i,
+import { Card as f, CardContent as u } from "../card/card.js";
+function N({
+  header: i,
+  children: s,
   alwaysExpanded: r = !1
 }) {
-  const [e, a] = d.useState(r);
-  return /* @__PURE__ */ o(c, { children: [
+  const [t, a] = m.useState(r);
+  return /* @__PURE__ */ o(f, { children: [
     /* @__PURE__ */ o(
       "div",
       {
         className: n(
           "flex items-center justify-between gap-4 p-4 rounded-t-xl",
           r ? "" : "cursor-pointer hover:bg-secondary",
-          e ? "" : "rounded-b-xl"
+          t ? "" : "rounded-b-xl"
         ),
         onClick: () => {
-          r || a(!e);
+          r || a(!t);
         },
         children: [
-          /* @__PURE__ */ t("div", { className: "flex-1", children: s }),
-          !r && /* @__PURE__ */ t("span", { className: "text-muted-foreground transform transition-transform", children: /* @__PURE__ */ t(
-            m,
+          /* @__PURE__ */ e("div", { className: "flex-1", children: i }),
+          !r && /* @__PURE__ */ e("span", { className: "text-muted-foreground transform transition-transform", children: /* @__PURE__ */ e(
+            c,
             {
+              icon: d,
               className: n(
-                "h-4 w-4 text-muted-foreground",
-                e ? "rotate-180" : "",
+                "size-4 text-muted-foreground",
+                t ? "rotate-180" : "",
                 "transition-transform duration-200 ease-in-out"
               )
             }
@@ -38,9 +40,9 @@ function g({
         ]
       }
     ),
-    e && /* @__PURE__ */ t(f, { className: "border-t border-input bg-gray-900/30", children: i })
+    t && /* @__PURE__ */ e(u, { className: "border-t border-input bg-gray-900/30", children: s })
   ] });
 }
 export {
-  g as ExpandableCard
+  N as ExpandableCard
 };

package/dist/esm/components/carousel/carousel.js

@@ -1,65 +1,66 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 /* empty css                                                                                                     */
 /* empty css                                                                                                           */
-import { ChevronRight as d, ChevronLeft as h } from "lucide-react";
-import * as w from "react";
-import v from "../../_virtual/index2.js";
-import { cn as o } from "../../utils/cn.js";
-import "sonner";
+import * as v from "react";
+import x from "../../_virtual/index2.js";
+import { faChevronRight as N, faChevronLeft as h } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as i } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-const x = ({ onClick: e, className: t }) => /* @__PURE__ */ r(
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+const w = ({ onClick: e, className: o }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     onClick: e,
-    className: o("slick-arrow slick-prev", t),
+    className: t("slick-arrow slick-prev", o),
     "aria-label": "Previous slide",
-    children: /* @__PURE__ */ r(h, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ r(i, { icon: h, className: "size-4" })
   }
-), N = ({ onClick: e, className: t }) => /* @__PURE__ */ r(
+), b = ({ onClick: e, className: o }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     onClick: e,
-    className: o("slick-arrow slick-next", t),
+    className: t("slick-arrow slick-next", o),
     "aria-label": "Next slide",
-    children: /* @__PURE__ */ r(d, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ r(i, { icon: N, className: "size-4" })
   }
-), b = w.forwardRef(
+), g = v.forwardRef(
   ({
     className: e,
-    children: t,
+    children: o,
     infinite: a = !0,
     arrows: l = !1,
-    dots: i = !0,
-    autoplay: c = !1,
-    autoplaySpeed: m = 5e3,
+    dots: c = !0,
+    autoplay: m = !1,
+    autoplaySpeed: n = 5e3,
     slidesToShow: s = 1,
-    gap: g = 16,
-    ...n
-  }, p) => {
+    gap: k = 16,
+    ...p
+  }, f) => {
     const u = {
       infinite: a,
       arrows: l,
-      dots: i,
-      autoplay: c,
-      autoplaySpeed: m,
+      dots: c,
+      autoplay: m,
+      autoplaySpeed: n,
       slidesToShow: s,
-      prevArrow: /* @__PURE__ */ r(x, {}),
-      nextArrow: /* @__PURE__ */ r(N, {}),
-      ...n
+      prevArrow: /* @__PURE__ */ r(w, {}),
+      nextArrow: /* @__PURE__ */ r(b, {}),
+      ...p
     };
-    return /* @__PURE__ */ f("div", { className: o("carousel-root relative w-full", e), children: [
+    return /* @__PURE__ */ d("div", { className: t("carousel-root relative w-full", e), children: [
       /* @__PURE__ */ r("style", { children: `
             .carousel-root .slick-slide {
               margin-right: ${s === 1 ? "1px" : "0"};
             }
           ` }),
-      /* @__PURE__ */ r(v, { ref: p, ...u, children: t })
+      /* @__PURE__ */ r(x, { ref: f, ...u, children: o })
     ] });
   }
 );
-b.displayName = "Carousel";
+g.displayName = "Carousel";
 export {
-  b as Carousel
+  g as Carousel
 };

package/dist/esm/components/checkbox/checkbox-labeled.js

@@ -1,13 +1,16 @@
 import { jsxs as f, jsx as t } from "react/jsx-runtime";
 import { cva as b } from "class-variance-authority";
 import * as o from "react";
+import "@gearbox-protocol/sdk";
 import { cn as h } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 import "../accordion/accordion.js";
-import "lucide-react";
+import "@gearbox-protocol/static";
+import "@fortawesome/free-solid-svg-icons";
+import "../icons/fa-icon.js";
 import "../alert-badge/alert-badge.js";
 import "../alert-dialog/alert-dialog.js";
+import "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
 import "../asset-line/asset-line.js";
 import "../buttons/back-button/back-button.js";
@@ -17,6 +20,7 @@ import "../buttons/external-button/external-button.js";
 import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
 import "../buttons/tab-button/tab-button.js";
+import "../token-icon/token-icon.js";
 import "connectkit";
 import "wagmi";
 import "viem/siwe";
@@ -30,10 +34,16 @@ import "../carousel/carousel.js";
 import { Checkbox as g } from "./checkbox.js";
 import "../checkbox-item/checkbox-item.js";
 import "../client-adapters/styled-button/styled-button.js";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
 import "../colored-text/colored-text.js";
 import "../input/input.js";
+import "../text-button/text-button.js";
+import "../with-title/with-title.js";
+import "../description/description.js";
 import "react-intl";
 import "../icon-button/icon-button.js";
+import "../token-symbol/token-symbol.js";
 import "../skeleton/skeleton.js";
 import "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
@@ -46,6 +56,7 @@ import "../dropdown-menu/dropdown-menu-shortcut.js";
 import "../dropdown-menu/dropdown-menu-sub-content.js";
 import "../dropdown-menu/dropdown-menu-sub-trigger.js";
 import "../page-title/page-title.js";
+import "../modal/modal.js";
 import "@radix-ui/react-dialog";
 import "../dialog/dialog-container.js";
 import "../dialog/dialog-content.js";
@@ -53,11 +64,11 @@ import "../dialog/dialog-description.js";
 import "../dialog/dialog-footer.js";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
-import "../dialog/dialog-modal.js";
 import "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
 import "viem";
 import { Label as k } from "../label/label.js";
+import "../edit-input/edit-input.js";
 import "../fadeout-loading/fadeout-loading.js";
 import "../filter/filter-block.js";
 import "../filter/filter-checkbox-item.js";
@@ -92,6 +103,7 @@ import "../navitem/navitem.js";
 import "../points-icon/points-icon.js";
 import "../progress/progress.js";
 import "../radio-group/radio-group.js";
+import "../rounded-image/rounded-image.js";
 import "../search-bar/search-bar.js";
 import "../segmented-control/segmented-control.js";
 import "../select/select.js";
@@ -106,7 +118,6 @@ import "../switch/switch.js";
 import "../table/grid-table.js";
 import "../table/table.js";
 import "../table/grid-table-loader.js";
-import "../text-button/text-button.js";
 import "../textarea/textarea.js";
 import "../theme-provider.js";
 import "../tip-card/tip-card.js";

package/dist/esm/components/checkbox/checkbox.js

@@ -1,12 +1,13 @@
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-checkbox";
-import { cva as h } from "class-variance-authority";
-import { Check as a } from "lucide-react";
-import * as y from "react";
+import * as a from "@radix-ui/react-checkbox";
+import { cva as y } from "class-variance-authority";
+import * as f from "react";
+import { faCheck as t } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as o } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const u = h("", {
+const h = y("", {
   variants: {
     size: {
       md: "h-4 w-4 rounded-[4px]",
@@ -21,8 +22,8 @@ const u = h("", {
     size: "md",
     color: "primary"
   }
-}), o = "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", i = "h-3 w-3", s = 3, d = "text-current", g = y.forwardRef(({ className: c, color: n, size: p, ...l }, m) => /* @__PURE__ */ b(
-  t.Root,
+}), i = "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", s = "size-3", c = "text-current", u = f.forwardRef(({ className: d, color: n, size: p, ...l }, m) => /* @__PURE__ */ b(
+  a.Root,
   {
     ref: m,
     className: r(
@@ -30,22 +31,22 @@ const u = h("", {
       "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       "data-[state=checked]:hover:bg-accent",
       "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-      u({ size: p, color: n }),
+      h({ size: p, color: n }),
       "disabled:cursor-not-allowed disabled:bg-gray-20 disabled:border-gray-50",
       "data-[state=checked]:disabled:bg-gray-20 data-[state=checked]:disabled:border-gray-50",
-      c
+      d
     ),
     ...l,
     children: [
       /* @__PURE__ */ e(
-        a,
+        o,
         {
           "aria-hidden": "true",
-          strokeWidth: s,
+          icon: t,
           className: r(
+            s,
+            c,
             i,
-            d,
-            o,
             "pointer-events-none transition-opacity opacity-0",
             "group-hover:opacity-100",
             "group-data-[state=checked]:opacity-0 group-data-[state=indeterminate]:opacity-0",
@@ -54,20 +55,20 @@ const u = h("", {
         }
       ),
       /* @__PURE__ */ e(
-        t.Indicator,
+        a.Indicator,
         {
           className: r(
-            o,
-            d,
+            i,
+            c,
             "pointer-events-none flex items-center justify-center"
           ),
-          children: /* @__PURE__ */ e(a, { className: i, strokeWidth: s })
+          children: /* @__PURE__ */ e(o, { icon: t, className: s })
         }
       )
     ]
   }
 ));
-g.displayName = t.Root.displayName;
+u.displayName = a.Root.displayName;
 export {
-  g as Checkbox
+  u as Checkbox
 };

package/dist/esm/components/checkbox-item/checkbox-item.js

@@ -1,10 +1,11 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { Check as l } from "lucide-react";
-import * as f from "react";
+import * as l from "react";
+import { faCheck as f } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as x } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const x = f.forwardRef(
+const d = l.forwardRef(
   ({ className: n, children: s, checked: e, onCheckedChange: a, disabled: o, ...i }, m) => /* @__PURE__ */ p(
     "label",
     {
@@ -34,7 +35,7 @@ const x = f.forwardRef(
               "absolute left-2 flex h-4 w-4 items-center justify-center rounded-[4px] border border-primary shadow transition-colors",
               e && "bg-primary text-primary-foreground"
             ),
-            children: e && /* @__PURE__ */ r(l, { className: "h-4 w-4" })
+            children: e && /* @__PURE__ */ r(x, { icon: f, className: "size-4" })
           }
         ),
         s
@@ -42,7 +43,7 @@ const x = f.forwardRef(
     }
   )
 );
-x.displayName = "CheckboxItem";
+d.displayName = "CheckboxItem";
 export {
-  x as CheckboxItem
+  d as CheckboxItem
 };

package/dist/esm/components/client-adapters/index.js

@@ -1,4 +1,8 @@
-import { StyledButton as e } from "./styled-button/styled-button.js";
+import { StyledButton as t } from "./styled-button/styled-button.js";
+import { StyledDialogContainer as d } from "./styled-dialog-container/styled-dialog-container.js";
+import { StyledRoundedImage as m } from "./styled-rounded-image/styled-rounded-image.js";
 export {
-  e as StyledButton
+  t as StyledButton,
+  d as StyledDialogContainer,
+  m as StyledRoundedImage
 };

package/dist/esm/components/client-adapters/styled-button/styled-button.js

@@ -1,25 +1,35 @@
-import { jsx as u } from "react/jsx-runtime";
-import i from "react";
+import { jsx as m } from "react/jsx-runtime";
+import * as n from "react";
 import { Button as l } from "../../buttons/button/button.js";
-const m = {
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../../utils/cn.js";
+import "sonner";
+const c = {
   primary: "default",
   outlined: "outline",
   neutral: "neutral",
   white: "white",
   success: "success"
-}, n = i.forwardRef(
-  ({ $size: t = "lg", $width: e = "compact", $color: r = "primary", ...o }, a) => /* @__PURE__ */ u(
+}, p = n.forwardRef(
+  ({
+    $size: t = "lg",
+    $width: r = "compact",
+    $color: o = "primary",
+    className: e,
+    ...a
+  }, i) => /* @__PURE__ */ m(
     l,
     {
-      ref: a,
+      ref: i,
       size: t === "md" ? "default" : t,
-      width: e,
-      variant: m[r],
-      ...o
+      width: r,
+      variant: c[o],
+      className: s("inline-block whitespace-normal", e),
+      ...a
     }
   )
 );
-n.displayName = "StyledButton";
+p.displayName = "StyledButton";
 export {
-  n as StyledButton
+  p as StyledButton
 };

package/dist/esm/components/client-adapters/styled-dialog-container/index.js

@@ -0,0 +1,4 @@
+import { StyledDialogContainer as r } from "./styled-dialog-container.js";
+export {
+  r as StyledDialogContainer
+};

package/dist/esm/components/client-adapters/styled-dialog-container/styled-dialog-container.js

@@ -0,0 +1,39 @@
+import { jsx as f } from "react/jsx-runtime";
+import * as p from "react";
+import { DialogContainer as d } from "../../dialog/dialog-container.js";
+import "@gearbox-protocol/sdk";
+import { cn as c } from "../../../utils/cn.js";
+import "sonner";
+const g = p.forwardRef(
+  ({
+    $padding: o = "lg",
+    $width: r,
+    $minWidth: e,
+    $maxWidth: t,
+    $minHeight: i,
+    $colorTheme: a = "box",
+    className: m,
+    style: l,
+    ...n
+  }, s) => /* @__PURE__ */ f(
+    d,
+    {
+      ref: s,
+      padding: o === "none" ? !1 : o === "lg" ? !0 : o,
+      colorTheme: a,
+      className: c(m),
+      ...n,
+      style: {
+        ...l,
+        width: r || void 0,
+        minWidth: e || void 0,
+        maxWidth: t || void 0,
+        minHeight: i || void 0
+      }
+    }
+  )
+);
+g.displayName = "StyledDialogContainer";
+export {
+  g as StyledDialogContainer
+};

package/dist/esm/components/client-adapters/styled-rounded-image/index.js

@@ -0,0 +1,4 @@
+import { StyledRoundedImage as o } from "./styled-rounded-image.js";
+export {
+  o as StyledRoundedImage
+};