@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

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

@@ -1,5 +1,4 @@
-import { Input as p, inputVariants as r } from "./input.js";
+import { Input as r } from "./input.js";
 export {
-  p as Input,
-  r as inputVariants
+  r as Input
 };

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

@@ -1,11 +1,8 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import { cva as T } from "class-variance-authority";
 import * as R from "react";
-import "@gearbox-protocol/sdk";
 import { cn as e } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 import { useIconSlotWidths as S } from "./use-icon-slot-widths.js";
 const z = T(
@@ -71,11 +68,11 @@ const z = T(
       variant: "default"
     }
   }
-), G = R.forwardRef(
+), A = R.forwardRef(
   ({
     hasError: o,
     errorMessage: d,
-    value: g,
+    value: p,
     size: u,
     colorTheme: b,
     variant: m,
@@ -99,8 +96,8 @@ const z = T(
       ...y,
       ...C(!!i, !!s)
     };
-    return /* @__PURE__ */ p("div", { className: "flex flex-col space-y-2", children: [
-      /* @__PURE__ */ p("div", { className: "relative", children: [
+    return /* @__PURE__ */ g("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ g("div", { className: "relative", children: [
         i && /* @__PURE__ */ t(
           "button",
           {
@@ -122,7 +119,7 @@ const z = T(
           {
             ref: w,
             ...a,
-            value: g,
+            value: p,
             "data-error": o ? "true" : "false",
             style: j,
             className: e(
@@ -158,6 +155,5 @@ const z = T(
   }
 );
 export {
-  G as Input,
-  z as inputVariants
+  A as Input
 };

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

@@ -1,5 +1,4 @@
-import { Label as l, labelVariants as r } from "./label.js";
+import { Label as r } from "./label.js";
 export {
-  l as Label,
-  r as labelVariants
+  r as Label
 };

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

@@ -1,12 +1,9 @@
 import { jsx as x } from "react/jsx-runtime";
-import * as d from "@radix-ui/react-label";
+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/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const y = v(
   "flex leading-none peer-disabled:cursor-not-allowed",
@@ -54,15 +51,15 @@ const y = v(
       s();
       const i = document.getElementById(e);
       if (!i) return;
-      const o = new MutationObserver(s);
-      return o.observe(i, {
+      const d = new MutationObserver(s);
+      return d.observe(i, {
         attributes: !0,
         attributeFilter: ["disabled"]
       }), () => {
-        o.disconnect();
+        d.disconnect();
       };
     }, [e]), /* @__PURE__ */ x(
-      d.Root,
+      o.Root,
       {
         ref: b,
         className: g(
@@ -76,8 +73,7 @@ const y = v(
     );
   }
 );
-w.displayName = d.Root.displayName;
+w.displayName = o.Root.displayName;
 export {
-  w as Label,
-  y as labelVariants
+  w as Label
 };

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

@@ -1,37 +1,34 @@
-import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
-import * as d from "react";
-import { BlockSyncPill as x } from "../../block-sync-pill/block-sync-pill.js";
-import { cn as h } from "../../../utils/cn.js";
-const u = [
+import { jsx as e, jsxs as t, Fragment as p } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as f } from "../../../utils/cn.js";
+const d = [
   { label: "Docs", href: "https://docs.gearbox.finance" },
   { label: "Support", href: "https://discord.com/invite/gearbox" },
   { label: "Terms", href: "https://gearbox.finance/terms" },
   { label: "Privacy Policy", href: "https://gearbox.finance/privacy" }
-], g = d.forwardRef(
+], x = i.forwardRef(
   ({
-    links: o = u,
+    links: o = d,
     copyright: s,
     year: l = (/* @__PURE__ */ new Date()).getFullYear(),
-    showStatus: c = !0,
-    statusLabel: m = "Status",
-    blockSyncProps: t,
-    className: n,
-    ...i
-  }, p) => /* @__PURE__ */ e(
+    status: a,
+    className: c,
+    ...n
+  }, m) => /* @__PURE__ */ e(
     "footer",
     {
-      ref: p,
-      className: h(
+      ref: m,
+      className: f(
         "border-t border-border/60 px-4 sm:px-6 lg:px-8",
-        n
+        c
       ),
-      ...i,
-      children: /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
-        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ a(f, { children: [
+      ...n,
+      children: /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
+        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ t(p, { children: [
           "© Gearbox Protocol, ",
           l
         ] }) }),
-        c && t ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: /* @__PURE__ */ e(x, { ...t, statusLabel: m }) }) : null,
+        a ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: a }) : null,
         /* @__PURE__ */ e("nav", { className: "order-3 flex w-full flex-wrap items-center justify-center gap-4 sm:order-2 sm:ml-auto sm:w-auto sm:justify-start", children: o.map((r) => /* @__PURE__ */ e(
           "a",
           {
@@ -47,8 +44,7 @@ const u = [
     }
   )
 );
-g.displayName = "AppFooter";
+x.displayName = "AppFooter";
 export {
-  g as AppFooter,
-  u as DEFAULT_APP_FOOTER_LINKS
+  x as AppFooter
 };

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

@@ -1,5 +1,4 @@
-import { AppFooter as r, DEFAULT_APP_FOOTER_LINKS as A } from "./app-footer.js";
+import { AppFooter as r } from "./app-footer.js";
 export {
-  r as AppFooter,
-  A as DEFAULT_APP_FOOTER_LINKS
+  r as AppFooter
 };

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

@@ -1,100 +1,89 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import * as w from "react";
-import { AppBar as L, AppBarSidePanel as i, AppBarCenter as k, AppBarCenterContent as v } from "../../app-bar/app-bar.js";
-import { BaseLink as a } from "../../base-link/base-link.js";
-import { NavBarLogo as l } from "../../navbar-logo/navbar-logo.js";
-import { cn as A } from "../../../utils/cn.js";
-import { getStatic as e } from "../../../utils/static.js";
-function B({ href: r }) {
-  return /* @__PURE__ */ o(
-    a,
-    {
-      size: "unset",
-      variant: "unset",
-      color: "main",
-      href: r,
-      className: "inline-flex",
-      children: /* @__PURE__ */ o(
-        l,
-        {
-          src: e("/logo/logo_monochrome_white.png"),
-          srcSet: `${e(
-            "/logo/logo_monochrome_white.png"
-          )} 1x, ${e(
-            "/logo/logo_monochrome_white@2x.png"
-          )} 2x, ${e("/logo/logo_monochrome_white@2x.png")} 3x`,
-          alt: "Logo",
-          style: { height: "32px" },
-          className: "w-auto cursor-pointer"
-        }
-      )
-    }
-  );
-}
-function $({ href: r }) {
-  return /* @__PURE__ */ o(
-    a,
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as A from "react";
+import { AppBar as B, AppBarSidePanel as s, AppBarCenter as k, AppBarCenterContent as v } from "../../app-bar/app-bar-frame.js";
+import { BaseLink as L } from "../../base-link/base-link.js";
+import { NavBarLogo as $ } from "../../navbar-logo/navbar-logo.js";
+import { cn as w } from "../../../utils/cn.js";
+import { getStatic as l } from "../../../utils/internal/static.js";
+function c({
+  href: a,
+  asset: t,
+  style: i
+}) {
+  const r = l(`/logo/${t}.png`), o = l(`/logo/${t}@2x.png`);
+  return /* @__PURE__ */ e(
+    L,
     {
       size: "unset",
       variant: "unset",
       color: "main",
-      href: r,
+      href: a,
       className: "inline-flex",
-      children: /* @__PURE__ */ o(
-        l,
+      children: /* @__PURE__ */ e(
+        $,
         {
-          src: e("/logo/sign_monochrome_white.png"),
-          srcSet: `${e(
-            "/logo/sign_monochrome_white.png"
-          )} 1x, ${e(
-            "/logo/sign_monochrome_white@2x.png"
-          )} 2x, ${e("/logo/sign_monochrome_white@2x.png")} 3x`,
+          src: r,
+          srcSet: `${r} 1x, ${o} 2x, ${o} 3x`,
           alt: "Logo",
-          style: { height: "34px", marginLeft: "4px", marginTop: "4px" },
+          style: i,
           className: "w-auto cursor-pointer"
         }
       )
     }
   );
 }
-const b = w.forwardRef(
+const _ = A.forwardRef(
   ({
-    homeHref: r = "/",
-    desktopLogo: s,
-    mobileLogo: m,
-    mobileMenu: t,
-    tabs: c,
-    actions: p,
-    wallet: g,
-    extraMenu: h,
-    leftTestId: d,
-    centerTestId: x,
-    rightTestId: f,
-    className: _,
-    ...u
-  }, N) => /* @__PURE__ */ n(
-    L,
+    homeHref: a = "/",
+    desktopLogo: t,
+    mobileLogo: i,
+    mobileMenu: r,
+    tabs: o,
+    actions: d,
+    wallet: m,
+    extraMenu: p,
+    leftTestId: h,
+    centerTestId: g,
+    rightTestId: x,
+    className: f,
+    ...N
+  }, u) => /* @__PURE__ */ n(
+    B,
     {
-      ref: N,
-      className: A("!h-14 md:px-4 lg:px-10", _),
-      ...u,
+      ref: u,
+      className: w("!h-14 md:px-4 lg:px-10", f),
+      ...N,
       children: [
-        /* @__PURE__ */ n(i, { "data-testid": d, children: [
-          t && /* @__PURE__ */ o("div", { className: "block lg:hidden", children: t }),
-          /* @__PURE__ */ o("div", { className: "hidden lg:block", children: s ?? /* @__PURE__ */ o(B, { href: r }) }),
-          /* @__PURE__ */ o("div", { className: "block lg:hidden", children: m ?? /* @__PURE__ */ o($, { href: r }) })
+        /* @__PURE__ */ n(s, { "data-testid": h, children: [
+          r && /* @__PURE__ */ e("div", { className: "block lg:hidden", children: r }),
+          /* @__PURE__ */ e("div", { className: "hidden lg:block", children: t ?? /* @__PURE__ */ e(
+            c,
+            {
+              href: a,
+              asset: "logo_monochrome_white",
+              style: { height: "32px" }
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "block lg:hidden", children: i ?? /* @__PURE__ */ e(
+            c,
+            {
+              href: a,
+              asset: "sign_monochrome_white",
+              style: { height: "34px", marginLeft: "4px", marginTop: "4px" }
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ o(k, { "data-testid": x, className: "md:px-0 lg:px-3", children: /* @__PURE__ */ o(v, { className: "md:hidden lg:block", children: c }) }),
-        /* @__PURE__ */ n(i, { "data-testid": f, className: "ml-auto", children: [
-          p,
-          g,
-          h
+        /* @__PURE__ */ e(k, { "data-testid": g, className: "md:px-0 lg:px-3", children: /* @__PURE__ */ e(v, { className: "md:hidden lg:block", children: o }) }),
+        /* @__PURE__ */ n(s, { "data-testid": x, className: "ml-auto", children: [
+          d,
+          m,
+          p
         ] })
       ]
     }
   )
 );
-b.displayName = "AppHeader";
+_.displayName = "AppHeader";
 export {
-  b as AppHeader
+  _ as AppHeader
 };

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

@@ -1,17 +1,14 @@
-import { AppFooter as e, DEFAULT_APP_FOOTER_LINKS as p } from "./app-footer/app-footer.js";
-import { AppHeader as f } from "./app-header/app-header.js";
-import { Col as x } from "./col/col.js";
-import { Container as A } from "./container/container.js";
-import { Grid as L } from "./grid/grid.js";
-import { Layout as n } from "./layout/layout.js";
-import { MainAsideLayout as _ } from "./main-aside-layout/main-aside-layout.js";
+import { AppFooter as e } from "./app-footer/app-footer.js";
+import { AppHeader as t } from "./app-header/app-header.js";
+import { Col as m } from "./col/col.js";
+import { Container as a } from "./container/container.js";
+import { Grid as i } from "./grid/grid.js";
+import { Layout as A } from "./layout/layout.js";
 export {
   e as AppFooter,
-  f as AppHeader,
-  x as Col,
-  A as Container,
-  p as DEFAULT_APP_FOOTER_LINKS,
-  L as Grid,
-  n as Layout,
-  _ as MainAsideLayout
+  t as AppHeader,
+  m as Col,
+  a as Container,
+  i as Grid,
+  A as Layout
 };

package/dist/esm/components/legal-agreement/index.js

@@ -1,25 +1,7 @@
-import { LegalAgreementAwaitingPanel as n, LegalAgreementAwaitingPanelTest as t } from "./legal-agreement-awaiting-panel.js";
 import { BlockedRegionDialog as g, LegalAgreementDialog as r } from "./legal-agreement-dialog.js";
-import { LegalAgreementLink as o } from "./legal-agreement-link.js";
-import { LegalAgreementPanel as A, LegalAgreementPanelTest as s } from "./legal-agreement-panel.js";
-import { legalAgreementAwaitingDescriptionVariants as L, legalAgreementAwaitingRootVariants as P, legalAgreementAwaitingTitleVariants as x, legalAgreementLinkVariants as c, legalAgreementPanelCheckboxLabelVariants as k, legalAgreementPanelCheckboxListTitleVariants as f, legalAgreementPanelCheckboxListVariants as p, legalAgreementPanelCheckboxRowVariants as w, legalAgreementPanelNotificationVariants as b, legalAgreementPanelRootVariants as h, legalAgreementPanelV2BannerVariants as C } from "./legal-agreement-theme.js";
+import { LegalAgreementLink as a } from "./legal-agreement-link.js";
 export {
   g as BlockedRegionDialog,
-  n as LegalAgreementAwaitingPanel,
-  t as LegalAgreementAwaitingPanelTest,
   r as LegalAgreementDialog,
-  o as LegalAgreementLink,
-  A as LegalAgreementPanel,
-  s as LegalAgreementPanelTest,
-  L as legalAgreementAwaitingDescriptionVariants,
-  P as legalAgreementAwaitingRootVariants,
-  x as legalAgreementAwaitingTitleVariants,
-  c as legalAgreementLinkVariants,
-  k as legalAgreementPanelCheckboxLabelVariants,
-  f as legalAgreementPanelCheckboxListTitleVariants,
-  p as legalAgreementPanelCheckboxListVariants,
-  w as legalAgreementPanelCheckboxRowVariants,
-  b as legalAgreementPanelNotificationVariants,
-  h as legalAgreementPanelRootVariants,
-  C as legalAgreementPanelV2BannerVariants
+  a as LegalAgreementLink
 };

package/dist/esm/components/legal-agreement/legal-agreement-awaiting-panel.js

@@ -1,24 +1,24 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { IconPending as n } from "@gearbox-protocol/static";
-import { legalAgreementAwaitingRootVariants as r, legalAgreementAwaitingTitleVariants as s, legalAgreementAwaitingDescriptionVariants as l } from "./legal-agreement-theme.js";
-class g {
-  static root = "legal-agreement-awaiting-panel-root";
-}
+import { legalAgreementAwaitingRootVariants as r, legalAgreementAwaitingTitleVariants as l, legalAgreementAwaitingDescriptionVariants as s } from "./legal-agreement.variants.js";
+const g = {
+  root: "legal-agreement-awaiting-panel-root"
+};
 function A({
-  waitingForSignatureText: a = "Please sign the message in your wallet to agree to the Terms of Service.",
+  waitingForSignatureText: i = "Please sign the message in your wallet to agree to the Terms of Service.",
   theme: e = "default"
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ a(
     "div",
     {
       className: r({ theme: e }),
       "data-testid": g.root,
       children: [
-        /* @__PURE__ */ t("div", { className: s({ theme: e }), children: [
-          /* @__PURE__ */ i(n, { size: 20, className: "animate-spin" }),
+        /* @__PURE__ */ a("div", { className: l({ theme: e }), children: [
+          /* @__PURE__ */ t(n, { size: 20, className: "animate-spin" }),
           "Waiting for Signature"
         ] }),
-        /* @__PURE__ */ i("p", { className: l({ theme: e }), children: a })
+        /* @__PURE__ */ t("p", { className: s({ theme: e }), children: i })
       ]
     }
   );

package/dist/esm/components/legal-agreement/legal-agreement-dialog.js

@@ -1,11 +1,11 @@
 import { jsx as e, jsxs as t, Fragment as C } from "react/jsx-runtime";
-import { IconExternal as k, IconPending as v } from "@gearbox-protocol/static";
-import * as b from "react";
-import { useState as D } from "react";
-import { AlertDialog as c, AlertDialogContent as m, AlertDialogHeader as T, AlertDialogTitle as F, AlertDialogDescription as o, AlertDialogFooter as x } from "../alert-dialog/alert-dialog.js";
-import { BaseLink as I } from "../base-link/base-link.js";
+import { faTriangleExclamation as k } from "@fortawesome/free-solid-svg-icons";
+import { IconPending as v, IconExternal as b } from "@gearbox-protocol/static";
+import * as D from "react";
+import { useState as T } from "react";
+import { AlertDialog as c, AlertDialogContent as m, AlertDialogFooter as x, AlertDialogHeader as F, AlertDialogTitle as I, AlertDialogDescription as o } from "../alert-dialog/alert-dialog.js";
+import { BaseLink as j } from "../base-link/base-link.js";
 import { Button as d } from "../buttons/button/button.js";
-import { faTriangleExclamation as j } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as z } from "../icons/fa-icon.js";
 import { LegalAgreementAwaitingPanel as B } from "./legal-agreement-awaiting-panel.js";
 import { LegalAgreementPanel as P } from "./legal-agreement-panel.js";
@@ -19,12 +19,12 @@ function K({
   config: i,
   theme: h = "default"
 }) {
-  const [f, u] = D({}), N = i.checkboxItems.every((l) => f[l.id]), y = (l) => {
+  const [f, u] = T({}), N = i.checkboxItems.every((l) => f[l.id]), y = (l) => {
     u((p) => ({ ...p, [l]: !p[l] }));
   }, A = async () => {
     await r();
   };
-  return b.useEffect(() => {
+  return D.useEffect(() => {
     a || u({});
   }, [a]), w ? /* @__PURE__ */ e(c, { open: a, children: /* @__PURE__ */ e(m, { className: "max-w-2xl w-[calc(100%-2rem)] sm:w-full", children: /* @__PURE__ */ e(
     B,
@@ -76,8 +76,8 @@ function M({
   termsOfServiceLink: r
 }) {
   return /* @__PURE__ */ e(c, { open: a, children: /* @__PURE__ */ t(m, { className: "max-w-lg", children: [
-    /* @__PURE__ */ e(T, { children: /* @__PURE__ */ t(F, { className: "flex items-center justify-center gap-2 text-destructive", children: [
-      /* @__PURE__ */ e(z, { icon: j, className: "size-5" }),
+    /* @__PURE__ */ e(F, { children: /* @__PURE__ */ t(I, { className: "flex items-center justify-center gap-2 text-destructive", children: [
+      /* @__PURE__ */ e(z, { icon: k, className: "size-5" }),
       "Access Restricted"
     ] }) }),
     /* @__PURE__ */ t("div", { className: "space-y-4", children: [
@@ -87,14 +87,14 @@ function M({
         "This restriction applies to your use of the web application. For more details, please review the",
         " ",
         /* @__PURE__ */ t(
-          I,
+          j,
           {
             href: r,
             external: !0,
             className: "text-primary underline hover:text-primary/80 inline-flex items-center gap-1",
             children: [
               "Terms of Service",
-              /* @__PURE__ */ e(k, { size: 12, className: "size-3" })
+              /* @__PURE__ */ e(b, { size: 12, className: "size-3" })
             ]
           }
         ),

package/dist/esm/components/legal-agreement/legal-agreement-link.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import { BaseLink as a } from "../base-link/base-link.js";
 import { Link as i } from "../link/link.js";
-import { legalAgreementLinkVariants as o } from "./legal-agreement-theme.js";
+import { legalAgreementLinkVariants as o } from "./legal-agreement.variants.js";
 function f({
   href: r,
   children: e,