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

package/dist/esm/components/input/input.js

@@ -1,17 +1,60 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { cva as d } from "class-variance-authority";
-import "react";
-import { cn as b } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { cva as D } from "class-variance-authority";
+import * as T from "react";
 import "@gearbox-protocol/sdk";
-const c = d(
-  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none [&::-webkit-search-cancel-button]:cursor-pointer",
+import { cn as e } from "../../utils/cn.js";
+import "sonner";
+import { useIconSlotWidths as j } from "./use-icon-slot-widths.js";
+const R = D(
+  e(
+    // Layout + typography (matches styled-components: 14/17)
+    "flex w-full border shadow-sm transition-colors",
+    "!text-sm leading-[17px] font-normal font-feature-settings-normal placeholder:text-sm",
+    "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+    "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+    "outline-none",
+    // Hide built-in search clear / decorations (we render our own endingIcon)
+    "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden",
+    "[&::-webkit-search-decoration]:hidden [&::-webkit-search-cancel-button]:hidden",
+    "[&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
+    // Error visuals (matches old styled-components data-error approach)
+    "data-[error=true]:border-destructive data-[error=true]:ring-2 data-[error=true]:ring-destructive"
+  ),
   {
     variants: {
       size: {
-        sm: "h-8 text-xs px-2",
-        default: "h-9",
-        lg: "h-11 text-base px-4"
+        xs: "px-3 py-[6px] rounded-[6px]",
+        sm: "h-8 px-3 py-2 rounded-[6px]",
+        default: "h-10 px-3 py-[14px] rounded-md",
+        lg: "h-11 px-3 py-[14px] rounded-md"
+      },
+      colorTheme: {
+        filledDark: e(
+          "bg-gray-20 border-gray-30 text-foreground",
+          "placeholder:text-text-secondary",
+          "hover:bg-gray-30 hover:border-gray-50",
+          "focus:bg-gray-20 focus:border-gray-20",
+          "focus:border-ring focus:ring-1 focus:ring-inset focus:ring-ring",
+          // WebKit autofill background fix
+          "[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--gray-20))_inset] [&:-webkit-autofill]:[text-fill-color:currentColor]"
+        ),
+        filledLight: e(
+          "bg-white border-white text-white-foreground",
+          "placeholder:text-gray-100",
+          "hover:bg-white hover:border-primary",
+          "focus:bg-white focus:border-white",
+          "focus:border-ring focus:ring-1 focus:ring-inset focus:ring-ring",
+          "[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--white))_inset] [&:-webkit-autofill]:[text-fill-color:currentColor]"
+        ),
+        outlined: e(
+          "bg-transparent border-gray-40 text-foreground",
+          "placeholder:text-foreground",
+          "hover:bg-transparent hover:border-gray-90",
+          "focus:bg-white focus:border-white",
+          "focus:text-white-foreground focus:placeholder:text-gray-100",
+          "focus:border-ring focus:ring-1 focus:ring-inset focus:ring-ring",
+          "[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--white))_inset] [&:-webkit-autofill]:[text-fill-color:currentColor]"
+        )
       },
       variant: {
         default: "",
@@ -21,39 +64,90 @@ const c = d(
     },
     defaultVariants: {
       size: "default",
+      colorTheme: "filledDark",
       variant: "default"
     }
   }
-);
-function v({
-  hasError: e,
-  errorMessage: t,
-  value: i,
-  size: l,
-  variant: a,
-  className: n,
-  ...r
-}) {
-  return /* @__PURE__ */ u("div", { className: "flex flex-col space-y-2", children: [
-    /* @__PURE__ */ o(
-      "input",
-      {
-        ...r,
-        value: i,
-        className: b(
-          c({
-            size: l,
-            variant: e ? "error" : a,
-            className: n
-          })
+), P = T.forwardRef(
+  ({
+    hasError: t,
+    errorMessage: a,
+    value: h,
+    size: b,
+    colorTheme: p,
+    variant: g,
+    className: x,
+    style: m,
+    startingIcon: o,
+    onStartingIconClick: i,
+    endingIcon: l,
+    onEndingIconClick: n,
+    ...d
+  }, y) => {
+    const u = p ?? "filledDark", c = u === "filledLight" ? "text-gray-50" : "text-gray-110", { setStartRef: w, setEndRef: v, inputPaddingStyle: _ } = j(), k = (s) => (C) => {
+      C.key === "Enter" && s?.();
+    }, N = {
+      ...m,
+      ..._(!!o, !!l)
+    };
+    return /* @__PURE__ */ f("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ f("div", { className: "relative", children: [
+        o && /* @__PURE__ */ r(
+          "button",
+          {
+            ref: w,
+            type: "button",
+            onClick: i,
+            onKeyDown: k(i),
+            className: e(
+              "absolute left-0 top-1/2 -translate-y-1/2",
+              "flex h-9 min-w-9 px-3 items-center justify-center",
+              c,
+              i ? "cursor-pointer" : "cursor-default"
+            ),
+            children: o
+          }
         ),
-        onWheel: r.type === "number" ? (s) => s.currentTarget.blur() : void 0
-      }
-    ),
-    e && t && /* @__PURE__ */ o("p", { className: "text-destructive text-sm", children: t })
-  ] });
-}
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: y,
+            ...d,
+            value: h,
+            "data-error": t ? "true" : "false",
+            style: N,
+            className: e(
+              R({
+                size: b,
+                colorTheme: u,
+                variant: t ? "error" : g
+              }),
+              x
+            ),
+            onWheel: d.type === "number" ? (s) => s.currentTarget.blur() : void 0
+          }
+        ),
+        l && /* @__PURE__ */ r(
+          "button",
+          {
+            ref: v,
+            type: "button",
+            onClick: n,
+            className: e(
+              "absolute right-0 top-1/2 -translate-y-1/2",
+              "flex h-9 min-w-9 px-3 items-center justify-center",
+              c,
+              n ? "cursor-pointer" : "cursor-default"
+            ),
+            children: l
+          }
+        )
+      ] }),
+      t && a && /* @__PURE__ */ r("p", { className: "text-destructive text-sm", children: a })
+    ] });
+  }
+);
 export {
-  v as Input,
-  c as inputVariants
+  P as Input,
+  R as inputVariants
 };

package/dist/esm/components/input/use-icon-slot-widths.js

@@ -0,0 +1,41 @@
+import * as e from "react";
+const c = 36;
+function i(n, s) {
+  const u = () => s(n.getBoundingClientRect().width);
+  u();
+  const r = new ResizeObserver(u);
+  return r.observe(n), () => r.disconnect();
+}
+function S() {
+  const [n, s] = e.useState(
+    null
+  ), [u, r] = e.useState(null), l = e.useRef(null), o = e.useRef(null), d = e.useCallback((t) => {
+    if (l.current?.(), l.current = null, !t) {
+      s(null);
+      return;
+    }
+    l.current = i(t, s);
+  }, []), a = e.useCallback((t) => {
+    if (o.current?.(), o.current = null, !t) {
+      r(null);
+      return;
+    }
+    o.current = i(t, r);
+  }, []), f = e.useCallback(
+    (t, R) => ({
+      paddingLeft: t ? n ?? c : void 0,
+      paddingRight: R ? u ?? c : void 0
+    }),
+    [n, u]
+  );
+  return {
+    startSlotWidth: n,
+    endSlotWidth: u,
+    setStartRef: d,
+    setEndRef: a,
+    inputPaddingStyle: f
+  };
+}
+export {
+  S as useIconSlotWidths
+};

package/dist/esm/components/label/label.js

@@ -2,9 +2,9 @@ import { jsx as x } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-label";
 import { cva as v } from "class-variance-authority";
 import * as r from "react";
+import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const y = v(
   "flex leading-none peer-disabled:cursor-not-allowed",
   {

package/dist/esm/components/layout/app-logo/app-logo.js

@@ -1,11 +1,12 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Image as r } from "../../image/image.js";
 import { cn as o } from "../../../utils/cn.js";
-function d({
-  appName: a,
+import { getStatic as l } from "../../../utils/static.js";
+function p({
+  appName: m,
   size: t = "default"
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ a(
     "div",
     {
       className: o(
@@ -16,7 +17,7 @@ function d({
         /* @__PURE__ */ e(
           r,
           {
-            src: "https://static.gearbox.fi/logo/logo_monochrome_white@2x.png",
+            src: l("/logo/logo_monochrome_white@2x.png"),
             alt: "Gearbox Protocol",
             width: t === "default" ? 120 : 100,
             height: t === "default" ? 24 : 20,
@@ -27,11 +28,11 @@ function d({
             )
           }
         ),
-        /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: a })
+        /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: m })
       ]
     }
   );
 }
 export {
-  d as AppLogo
+  p as AppLogo
 };

package/dist/esm/components/layout/block/block.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as f } from "../../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const l = {
   none: "mb-0",
   sm: "mb-4",

package/dist/esm/components/layout/col/col.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import S from "react";
+import * as S from "react";
 import { cn as f } from "../../../utils/cn.js";
 const C = {
   1: "col-span-1",
@@ -31,7 +31,7 @@ const C = {
   12: "sm:col-span-12",
   full: "sm:col-span-full",
   auto: "sm:col-auto"
-}, _ = {
+}, x = {
   1: "md:col-span-1",
   2: "md:col-span-2",
   3: "md:col-span-3",
@@ -46,7 +46,7 @@ const C = {
   12: "md:col-span-12",
   full: "md:col-span-full",
   auto: "md:col-auto"
-}, x = {
+}, _ = {
   1: "lg:col-span-1",
   2: "lg:col-span-2",
   3: "lg:col-span-3",
@@ -76,7 +76,7 @@ const C = {
   12: "xl:col-span-12",
   full: "xl:col-span-full",
   auto: "xl:col-auto"
-}, s = (l, o) => !l || l === 1 && !o ? "" : o === "sm" ? g[l] || "" : o === "md" ? _[l] || "" : o === "lg" ? x[l] || "" : o === "xl" ? L[l] || "" : C[l] || "", A = {
+}, s = (l, o) => !l || l === 1 && !o ? "" : o === "sm" ? g[l] || "" : o === "md" ? x[l] || "" : o === "lg" ? _[l] || "" : o === "xl" ? L[l] || "" : C[l] || "", A = {
   1: "col-start-1",
   2: "col-start-2",
   3: "col-start-3",

package/dist/esm/components/layout/container/container.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import n from "react";
+import * as n from "react";
 import { cn as o } from "../../../utils/cn.js";
 const c = {
   sm: "max-w-screen-sm",
@@ -14,12 +14,12 @@ const c = {
     padding: m = !0,
     center: r = !0,
     className: a,
-    children: l,
+    children: s,
     ...x
-  }, s) => /* @__PURE__ */ t(
+  }, l) => /* @__PURE__ */ t(
     "div",
     {
-      ref: s,
+      ref: l,
       className: o(
         "w-full",
         c[e],
@@ -28,7 +28,7 @@ const c = {
         a
       ),
       ...x,
-      children: l
+      children: s
     }
   )
 );

package/dist/esm/components/layout/footer/footer.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t, Fragment as o } from "react/jsx-runtime";
-import m from "react";
+import * as m from "react";
 import { cn as d } from "../../../utils/cn.js";
 import { AppLogo as N } from "../app-logo/app-logo.js";
 import { LegalDisclaimer as v } from "../legal-disclaimer/legal-disclaimer.js";
@@ -29,7 +29,7 @@ const b = m.forwardRef(
         "div",
         {
           className: d(
-            "flex flex-col sm:flex-row sm:flex-nowrap justify-between items-center sm:items-start gap-4 sm:gap-0 py-6 w-full px-4 max-w-[1440px]",
+            "flex flex-col sm:flex-row sm:flex-nowrap justify-between items-center sm:items-start gap-4 sm:gap-0 py-6 w-full px-4",
             f
           ),
           children: [
@@ -90,7 +90,7 @@ function n({
     ] }, r.href)) })
   ] });
 }
-function L({
+function D({
   appName: l,
   legalAppName: s,
   legalReferences: r,
@@ -163,5 +163,5 @@ export {
   b as Footer,
   w as FooterLink,
   n as FooterLinkSection,
-  L as GearboxFooter
+  D as GearboxFooter
 };

package/dist/esm/components/layout/grid/grid.js

@@ -1,7 +1,7 @@
 import { jsx as y } from "react/jsx-runtime";
-import _ from "react";
-import { cn as f } from "../../../utils/cn.js";
-const u = {
+import * as f from "react";
+import { cn as u } from "../../../utils/cn.js";
+const _ = {
   1: "grid-cols-1",
   2: "grid-cols-2",
   3: "grid-cols-3",
@@ -114,17 +114,17 @@ const u = {
   16: "gap-y-16",
   20: "gap-y-20",
   24: "gap-y-24"
-}, s = (g, r) => !g || typeof g == "string" ? "" : typeof g == "number" ? r === "sm" ? C[g] || "" : r === "md" ? L[g] || "" : r === "lg" ? G[g] || "" : r === "xl" ? A[g] || "" : u[g] || "" : "", l = (g, r) => g === void 0 ? "" : r === "x" ? R[g] || "" : r === "y" ? D[g] || "" : E[g] || "", I = _.forwardRef(
+}, s = (g, r) => !g || typeof g == "string" ? "" : typeof g == "number" ? r === "sm" ? C[g] || "" : r === "md" ? L[g] || "" : r === "lg" ? G[g] || "" : r === "xl" ? A[g] || "" : _[g] || "" : "", l = (g, r) => g === void 0 ? "" : r === "x" ? R[g] || "" : r === "y" ? D[g] || "" : E[g] || "", I = f.forwardRef(
   ({
     cols: g = 12,
     sm: r,
     md: c,
     lg: a,
     xl: p,
-    gap: t = 4,
+    gap: m = 4,
     gapX: d,
     gapY: i,
-    className: m,
+    className: t,
     style: o,
     children: x,
     ...S
@@ -137,16 +137,16 @@ const u = {
       "div",
       {
         ref: n,
-        className: f(
+        className: u(
           "grid",
           s(g),
           s(r, "sm"),
           s(c, "md"),
           s(a, "lg"),
           s(p, "xl"),
-          d !== void 0 ? l(d, "x") : l(t),
+          d !== void 0 ? l(d, "x") : l(m),
           i !== void 0 && l(i, "y"),
-          m
+          t
         ),
         style: e,
         ...S,

package/dist/esm/components/layout/header/header.js

@@ -1,12 +1,13 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { X as b, Menu as N } from "lucide-react";
-import c from "react";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import * as c from "react";
+import { faXmark as N, faBars as v } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as m } from "../../icons/fa-icon.js";
 import { cn as o } from "../../../utils/cn.js";
-const m = c.createContext(
+const f = c.createContext(
   null
 );
-function k() {
-  const e = c.useContext(m);
+function j() {
+  const e = c.useContext(f);
   if (!e)
     throw new Error("useMobileMenu must be used within Header component");
   return e;
@@ -16,66 +17,66 @@ const w = c.forwardRef(
     navigation: e,
     logo: a,
     actions: l,
-    fixed: n = !1,
-    sticky: f = !1,
-    containerClassName: u,
-    className: p,
-    children: v,
-    mobileMenuContent: d,
-    ...h
-  }, x) => {
-    const [s, i] = c.useState(!1);
-    return /* @__PURE__ */ t(
+    fixed: i = !1,
+    sticky: u = !1,
+    containerClassName: p,
+    className: h,
+    children: g,
+    mobileMenuContent: s,
+    ...x
+  }, b) => {
+    const [t, n] = c.useState(!1);
+    return /* @__PURE__ */ d(
       "header",
       {
-        ref: x,
+        ref: b,
         className: o(
-          "relative w-full bg-background h-18 border-b flex flex-nowrap items-center border-border",
-          n && "fixed top-0 left-0 right-0 z-50",
-          f && "sticky top-0 z-50",
-          p
+          "relative w-full bg-background h-18 flex flex-nowrap items-center",
+          i && "fixed top-0 left-0 right-0 z-50",
+          u && "sticky top-0 z-50",
+          h
         ),
-        "data-fixed": n ? "true" : void 0,
-        ...h,
+        "data-fixed": i ? "true" : void 0,
+        ...x,
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ d(
             "div",
             {
               className: o(
-                "w-full h-full flex items-stretch justify-between mx-auto px-4 sm:px-6 lg:px-8 max-w-[1440px]",
-                u
+                "w-full h-full flex items-stretch justify-between mx-auto px-4 sm:px-6 lg:px-8",
+                p
               ),
               children: [
                 a && /* @__PURE__ */ r("div", { className: "flex items-center", children: a }),
                 e && /* @__PURE__ */ r("div", { className: "hidden md:flex items-center", children: e }),
-                /* @__PURE__ */ t("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+                /* @__PURE__ */ d("div", { className: "flex items-center gap-1 sm:gap-2", children: [
                   l && /* @__PURE__ */ r("div", { className: "hidden md:flex items-center gap-2", children: l }),
-                  (e || d || l) && /* @__PURE__ */ r(
+                  (e || s || l) && /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       className: "md:hidden flex items-center justify-center p-2 rounded-md hover:bg-secondary hover:text-accent-foreground focus:outline-none cursor-pointer",
-                      onClick: () => i(!s),
-                      "aria-label": s ? "Close menu" : "Open menu",
-                      children: s ? /* @__PURE__ */ r(b, { className: "h-6 w-6" }) : /* @__PURE__ */ r(N, { className: "h-6 w-6" })
+                      onClick: () => n(!t),
+                      "aria-label": t ? "Close menu" : "Open menu",
+                      children: t ? /* @__PURE__ */ r(m, { icon: N, className: "size-6" }) : /* @__PURE__ */ r(m, { icon: v, className: "size-6" })
                     }
                   )
                 ] })
               ]
             }
           ),
-          s && (e || d || l) && /* @__PURE__ */ r(
-            m.Provider,
+          t && (e || s || l) && /* @__PURE__ */ r(
+            f.Provider,
             {
-              value: { closeMobileMenu: () => i(!1) },
-              children: /* @__PURE__ */ r("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ t("div", { className: "flex flex-col px-4 sm:px-6 py-4 space-y-2", children: [
-                d || e,
+              value: { closeMobileMenu: () => n(!1) },
+              children: /* @__PURE__ */ r("div", { className: "absolute top-full left-0 right-0 bg-background border-b border-border md:hidden z-40 shadow-lg", children: /* @__PURE__ */ d("div", { className: "flex flex-col px-4 sm:px-6 py-4 space-y-2", children: [
+                s || e,
                 l && /* @__PURE__ */ r(
                   "div",
                   {
                     className: o(
                       "flex flex-col gap-2",
-                      (d || e) && "pt-4 border-t border-border mt-4"
+                      (s || e) && "pt-4 border-t border-border mt-4"
                     ),
                     children: l
                   }
@@ -91,5 +92,5 @@ const w = c.forwardRef(
 w.displayName = "Header";
 export {
   w as Header,
-  k as useMobileMenu
+  j as useMobileMenu
 };

package/dist/esm/components/layout/layout/layout.js

@@ -1,12 +1,12 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import l from "react";
+import * as l from "react";
 import { cn as n } from "../../../utils/cn.js";
 const m = l.forwardRef(
-  ({ header: e, footer: a, children: o, className: d, ...i }, s) => /* @__PURE__ */ t(
+  ({ header: e, footer: a, children: o, className: i, ...d }, s) => /* @__PURE__ */ t(
     "div",
     {
       ref: s,
-      className: n("grid min-h-screen grid-rows-[auto_1fr_auto]", d),
+      className: n("grid min-h-screen grid-rows-[auto_1fr_auto]", i),
       style: {
         gridTemplateAreas: `
             "header"
@@ -14,7 +14,7 @@ const m = l.forwardRef(
             "footer"
           `
       },
-      ...i,
+      ...d,
       children: [
         e && /* @__PURE__ */ r("div", { style: { gridArea: "header" }, children: e }),
         /* @__PURE__ */ r(