@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

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

@@ -1,35 +1,38 @@
 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";
+import "luxon";
+function h({
   header: a,
   children: s,
-  index: n,
+  index: i,
   isExpandable: t = !0
 }) {
-  const [r, i] = d.useState(!1);
+  const [r, n] = m.useState(!1);
   return /* @__PURE__ */ e("div", { className: "rounded bg-gray-900/50", children: [
     /* @__PURE__ */ e(
       "div",
       {
         className: `flex ${t ? "cursor-pointer" : ""} items-center gap-2 p-3`,
         onClick: () => {
-          t && i(!r);
+          t && n(!r);
         },
         children: [
           /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: [
             "#",
-            n
+            i
           ] }),
           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 +45,5 @@ function g({
   ] });
 }
 export {
-  g as ExpandablCall
+  h as ExpandablCall
 };

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

@@ -1,36 +1,39 @@
-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 "luxon";
+import { Card as f, CardContent as p } from "../card/card.js";
+function j({
+  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 +41,9 @@ function g({
         ]
       }
     ),
-    e && /* @__PURE__ */ t(f, { className: "border-t border-input bg-gray-900/30", children: i })
+    t && /* @__PURE__ */ e(p, { className: "border-t border-input bg-gray-900/30", children: s })
   ] });
 }
 export {
-  g as ExpandableCard
+  j as ExpandableCard
 };

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

@@ -1,65 +1,67 @@
-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 s } 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";
+import "luxon";
+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(s, { 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(s, { 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,
-    slidesToShow: s = 1,
-    gap: g = 16,
-    ...n
-  }, p) => {
+    dots: c = !0,
+    autoplay: m = !1,
+    autoplaySpeed: n = 5e3,
+    slidesToShow: i = 1,
+    gap: k = 16,
+    ...p
+  }, f) => {
     const u = {
       infinite: a,
       arrows: l,
-      dots: i,
-      autoplay: c,
-      autoplaySpeed: m,
-      slidesToShow: s,
-      prevArrow: /* @__PURE__ */ r(x, {}),
-      nextArrow: /* @__PURE__ */ r(N, {}),
-      ...n
+      dots: c,
+      autoplay: m,
+      autoplaySpeed: n,
+      slidesToShow: i,
+      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"};
+              margin-right: ${i === 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,17 @@
 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 "luxon";
 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 +21,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,11 +35,21 @@ 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 "react-intl";
-import "../icon-button/icon-button.js";
+import "../with-title/with-title.js";
+import "../smart-number-input/balance-indicator.js";
+import "../smart-number-input/smart-number-input.js";
+import "../points-icon/points-icon.js";
 import "../skeleton/skeleton.js";
+import "react-intl";
+import "../vertical-indicator/vertical-indicator.js";
+import "../vertical-list/vertical-list.js";
+import "../confirm-menu/confirm-menu.js";
+import "../currency-button/currency-button.js";
+import "../description/description.js";
 import "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
 import "../dropdown-menu/dropdown-menu-content.js";
@@ -46,6 +61,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 +69,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";
@@ -72,33 +88,44 @@ import "../filter/filter-modal-item.js";
 import "../filter/filter-radio-item.js";
 import "../filter/filter-separator.js";
 import "../filter/variants.js";
+import "../token-symbol/token-symbol.js";
 import "../graph/formatters.js";
 import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../icon-button/icon-button.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
 import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
+import "../link/link.js";
 import "../../utils/reactochart-compat.js";
+import "../status-elements/status-elements.js";
+import "../text-button/text-button.js";
 import "react-markdown";
 import "remark-gfm";
 import "../navbar/navbar.js";
 import "../navbar/navbar-indicator-context.js";
 import "../navitem/navitem.js";
-import "../points-icon/points-icon.js";
+import "../pool-indicator-icon/pool-indicator-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";
+import "../separate-line/separate-line.js";
 import "../separator/separator.js";
+import "../simple-dropdown/simple-dropdown.js";
 import "../slider/slider.js";
-import "../smart-number-input/smart-number-input.js";
+import "../slider/slider-context.js";
 import "../spinner/spinner.js";
+import "../spinner-loader/spinner-loader.js";
+import "../split-list/split-list.js";
 import "../stat-badge/stat-badge.js";
 import "../status-dot/status-dot.js";
 import "../stepper/stepper.js";
@@ -106,13 +133,12 @@ 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 "../time-to-liquidation/time-to-liquidation.js";
 import "../tip-card/tip-card.js";
+import "../toggle/toggle.js";
 import "../typography/typography.js";
-import "../vertical-indicator/vertical-indicator.js";
-import "../vertical-list/vertical-list.js";
 import "../with-filter-button/with-filter-button.js";
 const C = b("", {
   variants: {

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

@@ -1,12 +1,14 @@
 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("", {
+import "luxon";
+const h = y("", {
   variants: {
     size: {
       md: "h-4 w-4 rounded-[4px]",
@@ -21,31 +23,31 @@ 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, ...m }, l) => /* @__PURE__ */ b(
+  a.Root,
   {
-    ref: m,
+    ref: l,
     className: r(
       "group peer relative shrink-0 border shadow cursor-pointer transition-colors overflow-hidden flex items-center justify-center",
       "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,
+    ...m,
     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 +56,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,12 @@
 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(
+import "luxon";
+const d = l.forwardRef(
   ({ className: n, children: s, checked: e, onCheckedChange: a, disabled: o, ...i }, m) => /* @__PURE__ */ p(
     "label",
     {
@@ -34,7 +36,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 +44,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,36 @@
-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";
+import "luxon";
+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,
+    ...i
+  }, a) => /* @__PURE__ */ m(
     l,
     {
       ref: a,
       size: t === "md" ? "default" : t,
-      width: e,
-      variant: m[r],
-      ...o
+      width: r,
+      variant: c[o],
+      className: s("inline-block whitespace-normal", e),
+      ...i
     }
   )
 );
-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,40 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as f 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";
+import "luxon";
+const g = f.forwardRef(
+  ({
+    $padding: o = "lg",
+    $width: r,
+    $minWidth: t,
+    $maxWidth: e,
+    $minHeight: i,
+    $colorTheme: m = "box",
+    className: a,
+    style: l,
+    ...n
+  }, p) => /* @__PURE__ */ s(
+    d,
+    {
+      ref: p,
+      padding: o === "none" ? !1 : o === "lg" ? !0 : o,
+      colorTheme: m,
+      className: c(a),
+      ...n,
+      style: {
+        ...l,
+        width: r || void 0,
+        minWidth: t || void 0,
+        maxWidth: e || 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
+};