@gearbox-protocol/permissionless-ui 1.22.0-next.99 → 1.22.0

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

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import { useIconSlotWidths as j } from "./use-icon-slot-widths.js";
 const R = D(
   e(
@@ -69,7 +70,7 @@ const R = D(
       variant: "default"
     }
   }
-), q = T.forwardRef(
+), A = T.forwardRef(
   ({
     hasError: t,
     errorMessage: a,
@@ -77,8 +78,8 @@ const R = D(
     size: p,
     colorTheme: b,
     variant: g,
-    className: x,
-    style: m,
+    className: m,
+    style: x,
     startingIcon: o,
     onStartingIconClick: i,
     endingIcon: l,
@@ -88,7 +89,7 @@ const R = D(
     const u = b ?? "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,
+      ...x,
       ..._(!!o, !!l)
     };
     return /* @__PURE__ */ f("div", { className: "flex flex-col space-y-2", children: [
@@ -123,7 +124,7 @@ const R = D(
                 colorTheme: u,
                 variant: t ? "error" : g
               }),
-              x
+              m
             ),
             onWheel: d.type === "number" ? (s) => s.currentTarget.blur() : void 0
           }
@@ -149,6 +150,6 @@ const R = D(
   }
 );
 export {
-  q as Input,
+  A as Input,
   R as inputVariants
 };

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

@@ -6,6 +6,7 @@ import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const y = v(
   "flex leading-none peer-disabled:cursor-not-allowed",
   {

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

@@ -1,38 +1,99 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { Image as m } from "../../image/image.js";
-import { cn as a } from "../../../utils/cn.js";
-import { getStatic as l } from "../../../utils/static.js";
-function g({
-  appName: e,
+import { jsxs as i, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { BaseLink as l } from "../../base-link/base-link.js";
+import { Image as g } from "../../image/image.js";
+import { NavBarLogo as a } from "../../navbar-logo/navbar-logo.js";
+import { cn as r } from "../../../utils/cn.js";
+import { getStatic as o } from "../../../utils/static.js";
+function u({
+  appName: n,
   size: t = "default"
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: a(
+      className: r(
         "text-foreground flex items-center gap-1 sm:gap-2",
         t === "default" ? "text-base sm:text-lg md:text-xl" : "text-sm sm:text-base md:text-md"
       ),
       children: [
-        /* @__PURE__ */ o(
-          m,
+        /* @__PURE__ */ e(
+          g,
           {
-            src: l("/logo/logo_monochrome_white@2x.png"),
+            src: o("/logo/logo_monochrome_white@2x.png"),
             alt: "Gearbox Protocol",
             width: t === "default" ? 113 : 100,
             height: t === "default" ? 36 : 24,
             loading: "eager",
-            className: a(
+            className: r(
               "h-auto shrink-0",
               t === "default" ? "w-auto h-[36px]" : "w-auto h-[24px]"
             )
           }
         ),
-        e && /* @__PURE__ */ o("span", { className: "text-muted-foreground whitespace-nowrap", children: e })
+        n && /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: n })
       ]
     }
   );
 }
+function f({
+  appName: n,
+  className: t
+}) {
+  return /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ e("div", { className: r("hidden lg:block", t), children: /* @__PURE__ */ i(
+      l,
+      {
+        size: "unset",
+        variant: "unset",
+        color: "main",
+        href: "/",
+        className: "inline-flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ e(
+            a,
+            {
+              src: o("/logo/logo_monochrome_white.png"),
+              srcSet: `${o(
+                "/logo/logo_monochrome_white.png"
+              )} 1x, ${o(
+                "/logo/logo_monochrome_white@2x.png"
+              )} 2x, ${o("/logo/logo_monochrome_white@2x.png")} 3x`,
+              alt: "Logo",
+              style: { height: "40px" },
+              className: "w-auto cursor-pointer"
+            }
+          ),
+          n && /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: n })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: r("block lg:hidden", t), children: /* @__PURE__ */ e(
+      l,
+      {
+        size: "unset",
+        variant: "unset",
+        color: "main",
+        href: "/",
+        className: "inline-flex",
+        children: /* @__PURE__ */ e(
+          a,
+          {
+            src: o("/logo/sign_monochrome_white.png"),
+            srcSet: `${o(
+              "/logo/sign_monochrome_white.png"
+            )} 1x, ${o(
+              "/logo/sign_monochrome_white@2x.png"
+            )} 2x, ${o("/logo/sign_monochrome_white@2x.png")} 3x`,
+            alt: "Logo",
+            style: { height: "34px", marginLeft: "4px", marginTop: "4px" },
+            className: "w-auto cursor-pointer"
+          }
+        )
+      }
+    ) })
+  ] });
+}
 export {
-  g as AppLogo
+  u as AppLogo,
+  f as AppLogoLink
 };

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

@@ -1,4 +1,5 @@
-import { AppLogo as r } from "./app-logo.js";
+import { AppLogo as L, AppLogoLink as g } from "./app-logo.js";
 export {
-  r as AppLogo
+  L as AppLogo,
+  g as AppLogoLink
 };

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

@@ -1,10 +1,11 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as f } from "../../../utils/cn.js";
+import { cn as o } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
-const o = {
+import "../../../utils/z-index.js";
+const f = {
   none: "mb-0",
   sm: "mb-4",
   md: "mb-6",
@@ -20,29 +21,29 @@ const o = {
   "flex-end": "items-end",
   stretch: "items-stretch"
 };
-function j({
+function y({
   children: t,
   margin: e = "md",
   justify: s = "flex-start",
   align: r = "flex-start",
-  className: n,
-  ...m
+  className: m,
+  ...n
 }) {
   return /* @__PURE__ */ i(
     "div",
     {
-      className: f(
+      className: o(
         "flex flex-row flex-nowrap",
-        o[e],
+        f[e],
         l[s],
         a[r],
-        n
+        m
       ),
-      ...m,
+      ...n,
       children: t
     }
   );
 }
 export {
-  j as Block
+  y as Block
 };

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

@@ -9,11 +9,11 @@ import { SocialIcons as L } from "../social-icons/social-icons.js";
 const G = g.forwardRef(
   ({
     logo: a,
-    copyright: l,
+    copyright: s,
     social: r,
     version: i,
     secondaryInfo: d,
-    legalLinks: s,
+    legalLinks: l,
     containerClassName: m,
     className: n,
     children: f,
@@ -41,7 +41,7 @@ const G = g.forwardRef(
                 /* @__PURE__ */ e("div", { className: "flex justify-center sm:justify-start", children: a }),
                 /* @__PURE__ */ e("div", { className: "h-2" })
               ] }),
-              l && /* @__PURE__ */ e("div", { children: l }),
+              s && /* @__PURE__ */ e("div", { children: s }),
               /* @__PURE__ */ e("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 sm:hidden", children: u })
             ] }),
             /* @__PURE__ */ t("div", { className: "w-full sm:w-auto", children: [
@@ -55,9 +55,9 @@ const G = g.forwardRef(
                   /* @__PURE__ */ e("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
                   d
                 ] }),
-                s && /* @__PURE__ */ t(o, { children: [
+                l && /* @__PURE__ */ t(o, { children: [
                   /* @__PURE__ */ e("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
-                  s
+                  l
                 ] })
               ] })
             ] }),
@@ -69,7 +69,7 @@ const G = g.forwardRef(
   )
 );
 G.displayName = "Footer";
-function b({ href: a, text: l, external: r = !1 }) {
+function b({ href: a, text: s, external: r = !1 }) {
   return /* @__PURE__ */ e(
     j,
     {
@@ -78,29 +78,29 @@ function b({ href: a, text: l, external: r = !1 }) {
       variant: "underlined",
       color: "secondary",
       size: "sm",
-      children: l
+      children: s
     }
   );
 }
 function N({
   title: a,
-  links: l
+  links: s
 }) {
   return /* @__PURE__ */ t("div", { className: "flex flex-col gap-1 md:items-end", children: [
     /* @__PURE__ */ e("h3", { className: "text-foreground", children: a }),
-    /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4", children: l.map((r, i) => /* @__PURE__ */ t(g.Fragment, { children: [
+    /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 justify-end", children: s.map((r, i) => /* @__PURE__ */ t(g.Fragment, { children: [
       /* @__PURE__ */ e(b, { ...r }),
-      i < l.length - 1 && /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: "•" })
+      i < s.length - 1 && /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: "•" })
     ] }, r.href)) })
   ] });
 }
 function z({
   appName: a,
-  legalAppName: l,
+  legalAppName: s,
   legalReferences: r,
   legalContent: i,
   className: d,
-  version: s,
+  version: l,
   discordAddr: m,
   landingAddr: n,
   twitterAddr: f,
@@ -127,7 +127,7 @@ function z({
             const p = i ?? (r ? /* @__PURE__ */ e(
               D,
               {
-                appName: l,
+                appName: s,
                 hrefs: r
               }
             ) : /* @__PURE__ */ t("div", { className: "text-muted-foreground text-center md:text-left", children: [
@@ -148,16 +148,16 @@ function z({
               }
             ) : p;
           })(),
-          (s || c) && // Breakpoint synced with HelpCenterContainer (hidden md:flex).
+          (l || c) && // Breakpoint synced with HelpCenterContainer (hidden md:flex).
           /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-2 mt-4 md:hidden", children: [
-            s && /* @__PURE__ */ t("span", { children: [
+            l && /* @__PURE__ */ t("span", { children: [
               "Version ",
-              s
+              l
             ] }),
             c && /* @__PURE__ */ e(k, { ...c })
           ] })
         ] }),
-        /* @__PURE__ */ t("div", { className: "hidden md:block", children: [
+        /* @__PURE__ */ t("div", { className: "hidden md:flex flex-col gap-4", children: [
           y && /* @__PURE__ */ t(o, { children: [
             /* @__PURE__ */ e("div", { className: "flex items-center justify-end gap-2.5", children: /* @__PURE__ */ e(
               L,
@@ -212,12 +212,12 @@ function z({
               ]
             }
           ),
-          (s || n) && /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-end gap-2 text-muted-foreground", children: [
-            s && /* @__PURE__ */ t("span", { children: [
+          (l || n) && /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-end gap-2 text-muted-foreground", children: [
+            l && /* @__PURE__ */ t("span", { children: [
               "Version ",
-              s
+              l
             ] }),
-            s && n && /* @__PURE__ */ e("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
+            l && n && /* @__PURE__ */ e("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
             n && /* @__PURE__ */ e(
               b,
               {

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

@@ -1,96 +1,93 @@
-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 f = c.createContext(
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import * as r from "react";
+import { AppBarDropdownMenu as k, AppBarHamburgerButton as C } from "../../app-bar/app-bar.js";
+import { SimpleDropdown as H } from "../../simple-dropdown/simple-dropdown.js";
+import "../../simple-dropdown/simple-dropdown-menu-item.js";
+import { cn as p } from "../../../utils/cn.js";
+const h = r.createContext(
   null
 );
-function j() {
-  const e = c.useContext(f);
-  if (!e)
+function R() {
+  const t = r.useContext(h);
+  if (!t)
     throw new Error("useMobileMenu must be used within Header component");
-  return e;
+  return t;
 }
-const w = c.forwardRef(
+const O = r.forwardRef(
   ({
-    navigation: e,
-    logo: a,
-    actions: l,
+    navigation: t,
+    logo: s,
+    actions: n,
     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(
+    containerClassName: x,
+    className: b,
+    children: j,
+    mobileMenuContent: a,
+    mobileMenuOpen: o,
+    onMobileMenuOpenChange: c,
+    ...g
+  }, w) => {
+    const [v, N] = r.useState(!1), l = o !== void 0, M = l ? o : v, d = r.useCallback(
+      (m) => {
+        l || N(m), c?.(m);
+      },
+      [l, c]
+    );
+    return /* @__PURE__ */ e(
       "header",
       {
-        ref: b,
-        className: o(
+        ref: w,
+        className: 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
+          b
         ),
         "data-fixed": i ? "true" : void 0,
-        ...x,
-        children: [
-          /* @__PURE__ */ d(
-            "div",
-            {
-              className: o(
-                "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__ */ 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 || 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: () => 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" })
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          t && (e || s || l) && /* @__PURE__ */ r(
-            f.Provider,
-            {
-              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",
+        ...g,
+        children: /* @__PURE__ */ f(
+          "div",
+          {
+            className: p(
+              "w-full h-full flex items-stretch justify-between mx-auto px-4 sm:px-6 lg:px-8",
+              x
+            ),
+            children: [
+              /* @__PURE__ */ f("div", { className: "h-full flex items-center", children: [
+                /* @__PURE__ */ e("div", { className: "flex items-center gap-1 sm:gap-2 shrink-0 lg:hidden", children: a && /* @__PURE__ */ e(
+                  H,
                   {
-                    className: o(
-                      "flex flex-col gap-2",
-                      (s || e) && "pt-4 border-t border-border mt-4"
-                    ),
-                    children: l
+                    open: M,
+                    onOpenChange: d,
+                    title: /* @__PURE__ */ e(C, { size: "md" }),
+                    asChild: !0,
+                    align: "start",
+                    className: "p-0 border-0 bg-transparent shadow-none",
+                    children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
+                      h.Provider,
+                      {
+                        value: {
+                          closeMobileMenu: () => d(!1)
+                        },
+                        children: a
+                      }
+                    ) })
                   }
-                )
-              ] }) })
-            }
-          )
-        ]
+                ) }),
+                s && /* @__PURE__ */ e("div", { className: "flex items-center shrink-0", children: s })
+              ] }),
+              t && /* @__PURE__ */ e("div", { className: "hidden lg:flex items-stretch flex-1 min-w-0 h-full", children: t }),
+              /* @__PURE__ */ e("div", { className: "flex items-center gap-1 sm:gap-2 shrink-0", children: n && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n }) })
+            ]
+          }
+        )
       }
     );
   }
 );
-w.displayName = "Header";
+O.displayName = "Header";
 export {
-  w as Header,
-  j as useMobileMenu
+  O as Header,
+  R as useMobileMenu
 };

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

@@ -1,28 +1,29 @@
-import { AppLogo as e } from "./app-logo/app-logo.js";
-import { Block as p } from "./block/block.js";
-import { Col as x } from "./col/col.js";
+import { AppLogo as e, AppLogoLink as t } from "./app-logo/app-logo.js";
+import { Block as m } from "./block/block.js";
+import { Col as f } from "./col/col.js";
 import { Container as a } from "./container/container.js";
-import { Footer as n, FooterLink as l, FooterLinkSection as L, GearboxFooter as c } from "./footer/footer.js";
-import { Grid as F } from "./grid/grid.js";
-import { Header as k, useMobileMenu as s } from "./header/header.js";
-import { Layout as d } from "./layout/layout.js";
+import { Footer as L, FooterLink as l, FooterLinkSection as c, GearboxFooter as g } from "./footer/footer.js";
+import { Grid as u } from "./grid/grid.js";
+import { Header as s, useMobileMenu as b } from "./header/header.js";
+import { Layout as y } from "./layout/layout.js";
 import { LegalDisclaimer as C } from "./legal-disclaimer/legal-disclaimer.js";
 import { PageLayout as M } from "./page-layout/page-layout.js";
-import { SocialIcons as A } from "./social-icons/social-icons.js";
+import { SocialIcons as B } from "./social-icons/social-icons.js";
 export {
   e as AppLogo,
-  p as Block,
-  x as Col,
+  t as AppLogoLink,
+  m as Block,
+  f as Col,
   a as Container,
-  n as Footer,
+  L as Footer,
   l as FooterLink,
-  L as FooterLinkSection,
-  c as GearboxFooter,
-  F as Grid,
-  k as Header,
-  d as Layout,
+  c as FooterLinkSection,
+  g as GearboxFooter,
+  u as Grid,
+  s as Header,
+  y as Layout,
   C as LegalDisclaimer,
   M as PageLayout,
-  A as SocialIcons,
-  s as useMobileMenu
+  B as SocialIcons,
+  b as useMobileMenu
 };

package/dist/esm/components/layout/legal-disclaimer/legal-disclaimer.js

@@ -1,19 +1,19 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { BaseLink as i } from "../../base-link/base-link.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { BaseLink as t } from "../../base-link/base-link.js";
 function c({
   hrefs: e,
-  appName: o = "Permissionless Interface"
+  appName: s = "Permissionless Interface"
 }) {
-  return /* @__PURE__ */ t("p", { className: "text-muted-foreground max-w-md", children: [
+  return /* @__PURE__ */ i("p", { className: "text-muted-foreground max-w-md text-sm", children: [
     "Any use of and/or interaction with the ",
-    o,
+    s,
     " is subject to the",
     " ",
     /* @__PURE__ */ r(
-      i,
+      t,
       {
         href: e.termsOfService,
-        className: "underline hover:text-foreground transition-colors",
+        className: "underline hover:text-foreground transition-colors text-sm",
         children: "Terms of Service"
       }
     ),
@@ -21,20 +21,20 @@ function c({
     "and",
     " ",
     /* @__PURE__ */ r(
-      i,
+      t,
       {
         href: e.privacyNotice,
-        className: "underline hover:text-foreground transition-colors",
+        className: "underline hover:text-foreground transition-colors text-sm",
         children: "Privacy Notice"
       }
     ),
     ", and acceptance of risks described in the",
     " ",
     /* @__PURE__ */ r(
-      i,
+      t,
       {
         href: e.riskDisclosure,
-        className: "underline hover:text-foreground transition-colors",
+        className: "underline hover:text-foreground transition-colors text-sm",
         children: "Risk Disclosure Statement"
       }
     ),

package/dist/esm/components/link/link.js

@@ -7,6 +7,7 @@ import "@gearbox-protocol/sdk";
 import { cn as _ } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const g = w(
   "[&_.icon-wrap]:-mt-px [&_.icon-wrap]:pl-1.5 [&_.icon-wrap]:leading-none [&_.icon-wrap]:text-secondary-foreground hover:[&_.icon-wrap]:text-foreground",
   {

package/dist/esm/components/liquidation-price/liquidation-price.js

@@ -9,8 +9,9 @@ import { bnToLiquidationPriceView as b } from "../../utils/parse-input-to-bn.js"
 import { cn as v } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const w = { type: "text" };
-function F({
+function _({
   liquidationPrice: t = 0,
   type: o = w,
   hfZone: e,
@@ -40,5 +41,5 @@ function F({
   ] });
 }
 export {
-  F as LiquidationPrice
+  _ as LiquidationPrice
 };