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

package/dist/esm/components/typography/typography.js

@@ -1,12 +1,14 @@
 import { jsx as s } from "react/jsx-runtime";
 import { cva as x } from "class-variance-authority";
 import * as c from "react";
-import { cn as g } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const p = x("", {
+import { cn as p } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const g = x("", {
   variants: {
     variant: {
+      inherit: "",
       h1: "text-4xl font-bold tracking-tight",
       h2: "text-3xl font-semibold tracking-tight",
       h3: "text-2xl font-semibold",
@@ -25,7 +27,8 @@ const p = x("", {
       success: "text-success",
       warning: "text-warning",
       destructive: "text-destructive",
-      primary: "text-primary"
+      primary: "text-primary",
+      secondary: "text-secondary-foreground"
     },
     weight: {
       inherit: "",
@@ -69,11 +72,12 @@ const p = x("", {
   body: "p",
   bodySmall: "p",
   caption: "span",
-  overline: "span"
+  overline: "span",
+  inherit: "span"
 }, u = c.forwardRef(
   ({
     className: e,
-    variant: t = "body",
+    variant: t = "inherit",
     color: i,
     weight: r,
     align: n,
@@ -81,14 +85,14 @@ const p = x("", {
     truncate: a,
     as: l,
     ...h
-  }, m) => {
-    const d = l || f[t || "body"];
+  }, d) => {
+    const m = l || f[t || "body"];
     return /* @__PURE__ */ s(
-      d,
+      m,
       {
-        ref: m,
-        className: g(
-          p({
+        ref: d,
+        className: p(
+          g({
             variant: t,
             color: i,
             weight: r,
@@ -106,5 +110,5 @@ const p = x("", {
 u.displayName = "Typography";
 export {
   u as Typography,
-  p as typographyVariants
+  g as typographyVariants
 };

package/dist/esm/components/vertical-indicator/vertical-indicator.js

@@ -1,54 +1,61 @@
-import { jsxs as e, jsx as t, Fragment as v } from "react/jsx-runtime";
+import { jsxs as t, jsx as e, Fragment as b } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
-import { ArrowRight as w } from "lucide-react";
 import * as V from "react";
-import { cn as r } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-import { HelpTip as y } from "../help-tip/help-tip.js";
-const j = l("flex flex-nowrap gap-3 items-center", {
-  variants: {
-    align: {
-      start: "items-start",
-      center: "items-center",
-      end: "items-end"
-    }
-  },
-  defaultVariants: {
-    align: "start"
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import { Description as f } from "../description/description.js";
+import { HelpTip as v } from "../help-tip/help-tip.js";
+const y = l(
+  ["flex flex-nowrap", "w-full max-w-full grow-0 shrink-0 basis-full"].join(
+    " "
+  ),
+  {
+    variants: {
+      align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        baseline: "items-baseline"
+      }
+    },
+    defaultVariants: { align: "start" }
   }
-}), I = l("text-foreground", {
-  variants: {
-    size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      default: "text-base",
-      unset: ""
-    }
-  },
-  defaultVariants: {
-    size: "default"
+), k = l(
+  "flex items-center grow shrink-0 basis-[0%] text-left text-foreground",
+  {
+    variants: {
+      size: {
+        xs: "text-xs leading-[14px]",
+        sm: "text-sm leading-[17px]",
+        default: "text-base leading-[19px]",
+        unset: "text-[length:unset] leading-[unset]"
+      }
+    },
+    defaultVariants: { size: "default" }
   }
-}), f = l("text-right", {
+), u = l("text-right font-medium", {
   variants: {
     size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      default: "text-base",
-      unset: ""
+      xs: "text-xs leading-[14px]",
+      sm: "text-sm leading-[17px]",
+      default: "text-base leading-[19px]",
+      unset: "text-[length:unset] leading-[unset]"
     },
     weight: {
       normal: "font-normal",
       medium: "font-medium",
-      unset: ""
+      unset: "[font-weight:unset]"
     },
     color: {
       default: "text-foreground",
-      muted: "text-muted-foreground",
-      success: "text-green-500",
-      warning: "text-yellow-500",
+      muted: "text-gray-70",
+      success: "text-success",
+      warning: "text-warning",
       alert: "text-destructive",
-      primary: "text-primary"
+      primary: "text-primary",
+      secondary: "text-secondary-foreground"
     }
   },
   defaultVariants: {
@@ -56,69 +63,70 @@ const j = l("flex flex-nowrap gap-3 items-center", {
     weight: "medium",
     color: "default"
   }
-}), R = V.forwardRef(
+}), j = V.forwardRef(
   ({
-    className: u,
+    className: g,
     align: h,
-    label: a,
-    description: s,
+    label: s,
+    description: n,
     valueDescription: m,
-    tip: d,
-    value: o,
-    valueTo: i,
-    size: n = "default",
+    tip: o,
+    value: d,
+    valueTo: r,
+    size: i = "sm",
     weight: c = "medium",
     color: x = "default",
     onPointerEnterTip: p,
-    ...g
-  }, N) => /* @__PURE__ */ e(
+    ...w
+  }, N) => /* @__PURE__ */ t(
     "div",
     {
       ref: N,
-      className: r(j({ align: h }), u),
-      ...g,
+      className: a(y({ align: h }), g),
+      ...w,
       children: [
-        (a || s) && /* @__PURE__ */ e("div", { className: "flex flex-col flex-1 h-min", children: [
-          a && /* @__PURE__ */ e(
+        (s || n) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
+          s && /* @__PURE__ */ t("div", { className: a(k({ size: i })), children: [
+            s,
+            o && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(v, { onPointerEnter: p, children: o }) })
+          ] }),
+          n && /* @__PURE__ */ e(f, { className: "text-left", children: n })
+        ] }),
+        d && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
+          /* @__PURE__ */ t(
             "div",
             {
-              className: r(
-                "flex items-center gap-2 whitespace-nowrap",
-                I({ size: n })
+              className: a(
+                "flex flex-nowrap",
+                "w-full max-w-full grow-0 shrink-0 basis-full",
+                "justify-end items-center"
               ),
               children: [
-                a,
-                d && /* @__PURE__ */ t(y, { onPointerEnter: p, children: d })
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      u({ size: i, weight: c, color: x }),
+                      r && "line-through [&>*]:line-through"
+                    ),
+                    children: d
+                  }
+                ),
+                r && /* @__PURE__ */ t(b, { children: [
+                  /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" }),
+                  /* @__PURE__ */ e("span", { className: a(u({ size: i, weight: c, color: x })), children: r })
+                ] })
               ]
             }
           ),
-          s && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-left", children: s })
-        ] }),
-        o && /* @__PURE__ */ e("div", { className: "flex flex-col flex-auto", children: [
-          /* @__PURE__ */ e("div", { className: "flex flex-nowrap gap-3 justify-end items-center", children: [
-            /* @__PURE__ */ t(
-              "span",
-              {
-                className: r(
-                  f({ size: n, weight: c, color: x }),
-                  i && "line-through opacity-60"
-                ),
-                children: o
-              }
-            ),
-            i && /* @__PURE__ */ e(v, { children: [
-              /* @__PURE__ */ t(w, { className: "h-3 w-3 text-muted-foreground" }),
-              /* @__PURE__ */ t("span", { className: r(f({ size: n, weight: c, color: x })), children: i })
-            ] })
-          ] }),
-          m && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-right", children: m })
+          m && /* @__PURE__ */ e(f, { className: "text-right", children: m })
         ] })
       ]
     }
   )
 );
-R.displayName = "VerticalIndicator";
+j.displayName = "VerticalIndicator";
 export {
-  R as VerticalIndicator,
-  j as verticalIndicatorVariants
+  j as VerticalIndicator,
+  y as verticalIndicatorVariants
 };

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

@@ -1,10 +1,11 @@
 import { jsx as s } from "react/jsx-runtime";
-import { cva as u } from "class-variance-authority";
+import { cva as c } from "class-variance-authority";
 import * as r from "react";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const c = u("flex flex-col", {
+import "luxon";
+const u = c("flex flex-col [&>li:empty]:hidden", {
   variants: {
     rowGap: {
       xs: "gap-1",
@@ -29,31 +30,31 @@ const c = u("flex flex-col", {
     divided: !1,
     nested: !1
   }
-}), v = r.forwardRef(
+}), y = r.forwardRef(
   ({
-    className: f,
-    rowGap: i = "default",
+    className: i,
+    rowGap: f = "default",
     divided: a = !1,
     nested: n = !1,
     children: p,
     ...m
-  }, b) => {
+  }, d) => {
     const o = r.Children.toArray(p).filter(
       (e) => e != null
     );
     return /* @__PURE__ */ s(
       "ul",
       {
-        ref: b,
+        ref: d,
         className: t(
-          c({ rowGap: i, divided: a, nested: n }),
+          u({ rowGap: f, divided: a, nested: n }),
           "list-none",
-          f
+          i
         ),
         ...m,
         children: o.map((e, l) => {
-          const d = r.isValidElement(e) && e.key ? e.key : `vertical-list-item-${l}`;
-          return e != null && /* @__PURE__ */ s(
+          const b = r.isValidElement(e) && e.key ? e.key : `vertical-list-item-${l}`;
+          return /* @__PURE__ */ s(
             "li",
             {
               className: t(
@@ -61,15 +62,15 @@ const c = u("flex flex-col", {
               ),
               children: e
             },
-            d
+            b
           );
         })
       }
     );
   }
 );
-v.displayName = "VerticalList";
+y.displayName = "VerticalList";
 export {
-  v as VerticalList,
-  c as verticalListVariants
+  y as VerticalList,
+  u as verticalListVariants
 };

package/dist/esm/components/with-copy/with-copy.js

@@ -1,30 +1,33 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Check as h, Copy as x } from "lucide-react";
-import { useState as C, useRef as b } from "react";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { IconCopy as h } from "@gearbox-protocol/static";
+import { useState as x, useRef as C } from "react";
+import { faCheck as b } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as N } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function T({
+import "luxon";
+function W({
   toCopy: n,
   children: c,
   onCopySuccess: l,
-  iconSize: t = 14,
-  icon: p,
-  className: m,
+  iconSize: e = 14,
+  icon: m,
+  className: p,
   buttonClassName: u,
   successDuration: f = 1500
 }) {
-  const [i, o] = C(!1), s = b(null), y = async () => {
+  const [o, s] = x(!1), i = C(null), y = async () => {
     try {
-      await navigator.clipboard.writeText(n), s.current && clearTimeout(s.current), o(!0), s.current = setTimeout(() => {
-        o(!1);
+      await navigator.clipboard.writeText(n), i.current && clearTimeout(i.current), s(!0), i.current = setTimeout(() => {
+        s(!1);
       }, f), l?.();
     } catch (d) {
       console.error("Failed to copy:", d);
     }
   };
-  return /* @__PURE__ */ a("div", { className: r("flex items-center min-w-0", m), children: [
-    /* @__PURE__ */ e("span", { className: "truncate", children: c }),
+  return /* @__PURE__ */ a("div", { className: r("flex items-center min-w-0", p), children: [
+    /* @__PURE__ */ t("span", { className: "truncate", children: c }),
     /* @__PURE__ */ a(
       "button",
       {
@@ -34,27 +37,34 @@ function T({
           "ml-1 cursor-pointer relative flex-shrink-0",
           u
         ),
-        style: { width: t, height: t },
-        title: i ? "Copied!" : "Copy to clipboard",
+        style: { width: e, height: e },
+        title: o ? "Copied!" : "Copy to clipboard",
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: r(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                i ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                o ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
               ),
-              children: /* @__PURE__ */ e(h, { size: t })
+              children: /* @__PURE__ */ t(
+                N,
+                {
+                  icon: b,
+                  style: { fontSize: e },
+                  className: "block"
+                }
+              )
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "span",
             {
               className: r(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                i ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 hover:text-white"
+                o ? "opacity-0 scale-50" : "opacity-100 scale-100 text-gray-400 hover:text-white"
               ),
-              children: p ?? /* @__PURE__ */ e(x, { size: t })
+              children: m ?? /* @__PURE__ */ t(h, { size: e })
             }
           )
         ]
@@ -63,5 +73,5 @@ function T({
   ] });
 }
 export {
-  T as WithCopy
+  W as WithCopy
 };

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

@@ -2,9 +2,10 @@ import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import * as z from "react";
 import { Button as B } from "../buttons/button/button.js";
 import { FilterButton as F } from "../buttons/filter-button/filter-button.js";
+import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const j = z.forwardRef(
   ({
     children: r,
@@ -18,15 +19,15 @@ const j = z.forwardRef(
     hideIcon: f,
     hasChecked: u,
     className: h,
-    buttonClassName: x,
+    buttonClassName: p,
     onClearAll: e,
     buttonProps: i
-  }, p) => {
+  }, x) => {
     const w = a || n, v = d ?? !f, N = i?.color === "neutral" ? "default" : s, b = i?.size || c, k = r || l;
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: p,
+        ref: x,
         "data-has-checked": u,
         className: g(
           "w-full flex items-start md:items-center justify-between gap-4 flex-col md:flex-row",
@@ -42,7 +43,7 @@ const j = z.forwardRef(
                 variant: N,
                 size: b,
                 onClick: w,
-                className: x,
+                className: p,
                 label: m,
                 showIcon: v
               }

package/dist/esm/components/with-title/with-title.js

@@ -1,30 +1,44 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
 import "react";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const l = {
-  default: "text-sm",
-  sm: "text-xs",
-  lg: "text-base"
-};
-function c({
-  title: i,
+import { cn as e } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const l = a("", {
+  variants: {
+    size: {
+      sm: "text-[14px] mb-[14px]",
+      default: "text-body mb-[18px]",
+      md: "text-lg mb-[22px]",
+      lg: "text-[21px] mb-[22px]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function v({
+  title: m,
   children: t,
   size: o = "default",
-  className: m
+  className: r
 }) {
-  return /* @__PURE__ */ r("div", { className: s("flex flex-col gap-2", m), children: [
-    /* @__PURE__ */ e(
+  return /* @__PURE__ */ x("div", { className: e("flex flex-col"), children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        className: s("text-muted-foreground font-medium", l[o]),
-        children: i
+        className: e(
+          "text-foreground font-medium",
+          l({ size: o }),
+          r
+        ),
+        children: m
       }
     ),
-    t !== void 0 && /* @__PURE__ */ e("div", { children: t })
+    t !== void 0 && /* @__PURE__ */ i("div", { children: t })
   ] });
 }
 export {
-  c as WithTitle
+  v as WithTitle
 };

package/dist/esm/configs/tailwind-preset.js

@@ -5,11 +5,11 @@ const e = {
   safelist: [
     // Grid columns - dynamically generated in Grid component
     { pattern: /^grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
-    { pattern: /^(sm|md|lg|xl):grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
+    { pattern: /^(xs|sm|md|lg|xl):grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
     // Column spans - dynamically generated in Col component
     { pattern: /^col-span-(1|2|3|4|5|6|7|8|9|10|11|12|full|auto)$/ },
     {
-      pattern: /^(sm|md|lg|xl):col-span-(1|2|3|4|5|6|7|8|9|10|11|12|full|auto)$/
+      pattern: /^(xs|sm|md|lg|xl):col-span-(1|2|3|4|5|6|7|8|9|10|11|12|full|auto)$/
     },
     // Column start positions - dynamically generated in Col component
     { pattern: /^col-start-(1|2|3|4|5|6|7|8|9|10|11|12|13|auto)$/ },
@@ -21,11 +21,14 @@ const e = {
     // Space utilities - spacing between child elements
     { pattern: /^space-(x|y)-(0|1|2|3|4|5|6|7|8|9|10|12|16|20|24)$/ },
     {
-      pattern: /^(sm|md|lg|xl):space-(x|y)-(0|1|2|3|4|5|6|7|8|9|10|12|16|20|24)$/
+      pattern: /^(xs|sm|md|lg|xl):space-(x|y)-(0|1|2|3|4|5|6|7|8|9|10|12|16|20|24)$/
     }
   ],
   theme: {
     extend: {
+      screens: {
+        xs: "500px"
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",