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

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

@@ -1,19 +1,19 @@
-import { jsx as l, jsxs as s } from "react/jsx-runtime";
-import { Checkbox as h } from "../checkbox/checkbox.js";
-import { CheckboxLabeled as b } from "../checkbox/checkbox-labeled.js";
-import { faTriangleExclamation as u } from "@fortawesome/free-solid-svg-icons";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { faTriangleExclamation as h } from "@fortawesome/free-solid-svg-icons";
+import { Checkbox as b } from "../checkbox/checkbox.js";
+import { CheckboxLabeled as u } from "../checkbox/checkbox-labeled.js";
 import { FaIcon as N } from "../icons/fa-icon.js";
-import { legalAgreementPanelRootVariants as k, legalAgreementPanelNotificationVariants as p, legalAgreementPanelV2BannerVariants as f, legalAgreementPanelCheckboxListVariants as v, legalAgreementPanelCheckboxListTitleVariants as A, legalAgreementPanelCheckboxRowVariants as x, legalAgreementPanelCheckboxLabelVariants as g } from "./legal-agreement-theme.js";
-class P {
-  static root = "legal-agreement-panel-root";
-}
+import { legalAgreementPanelRootVariants as k, legalAgreementPanelNotificationVariants as p, legalAgreementPanelV2BannerVariants as f, legalAgreementPanelCheckboxListVariants as v, legalAgreementPanelCheckboxListTitleVariants as A, legalAgreementPanelCheckboxRowVariants as x, legalAgreementPanelCheckboxLabelVariants as g } from "./legal-agreement.variants.js";
+const P = {
+  root: "legal-agreement-panel-root"
+};
 function T({
-  config: a,
+  config: l,
   checkedItems: i,
-  onCheckedChange: n,
+  onCheckedChange: t,
   hasV2Signature: r,
-  showTitle: c,
-  checkboxIdPrefix: o,
+  showTitle: o,
+  checkboxIdPrefix: c,
   theme: e
 }) {
   return /* @__PURE__ */ s(
@@ -22,79 +22,79 @@ function T({
       className: k({ theme: e }),
       "data-testid": P.root,
       children: [
-        c ? /* @__PURE__ */ l("h2", { className: "text-center text-xl font-semibold text-foreground", children: r ? a.updatedTitle || "Terms of Service Updated" : a.title || "Legal Agreement" }) : null,
-        /* @__PURE__ */ l("div", { className: p({ theme: e }), children: a.notificationText }),
+        o ? /* @__PURE__ */ a("h2", { className: "text-center text-xl font-semibold text-foreground", children: r ? l.updatedTitle || "Terms of Service Updated" : l.title || "Legal Agreement" }) : null,
+        /* @__PURE__ */ a("div", { className: p({ theme: e }), children: l.notificationText }),
         r ? /* @__PURE__ */ s("div", { className: f({ theme: e }), children: [
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ a(
             N,
             {
-              icon: u,
+              icon: h,
               className: "size-5 shrink-0 text-yellow-500 mt-0.5"
             }
           ),
-          /* @__PURE__ */ l("div", { className: "text-sm text-yellow-500", children: a.updatedTermsNoticeText ?? `Our Terms of Service have been updated. Please review and sign the new agreement to continue using ${a.productName}.` })
+          /* @__PURE__ */ a("div", { className: "text-sm text-yellow-500", children: l.updatedTermsNoticeText ?? `Our Terms of Service have been updated. Please review and sign the new agreement to continue using ${l.productName}.` })
         ] }) : null,
         /* @__PURE__ */ s("div", { className: v({ theme: e }), children: [
-          a.checkboxListTitle ? /* @__PURE__ */ l(
+          l.checkboxListTitle ? /* @__PURE__ */ a(
             "div",
             {
               className: A({ theme: e }),
-              children: a.checkboxListTitle
+              children: l.checkboxListTitle
             }
           ) : null,
-          a.checkboxItems.map((t) => {
-            const d = `${o}-${t.id}`, m = i[t.id] || !1;
-            return e === "gearboxV3" ? /* @__PURE__ */ l(
+          l.checkboxItems.map((n) => {
+            const d = `${c}-${n.id}`, m = i[n.id] || !1;
+            return e === "gearboxV3" ? /* @__PURE__ */ a(
               "div",
               {
                 className: x({ theme: e }),
-                children: /* @__PURE__ */ l(
-                  b,
+                children: /* @__PURE__ */ a(
+                  u,
                   {
                     id: d,
                     checked: m,
-                    onChange: () => n(t.id),
+                    onChange: () => t(n.id),
                     boxAlign: "flex-start",
                     size: "lg",
                     color: "secondary",
-                    children: /* @__PURE__ */ l(
+                    children: /* @__PURE__ */ a(
                       "div",
                       {
                         className: g({
                           theme: e
                         }),
-                        children: t.content
+                        children: n.content
                       }
                     )
                   }
                 )
               },
-              t.id
+              n.id
             ) : /* @__PURE__ */ s(
               "label",
               {
                 htmlFor: d,
                 className: x({ theme: e }),
                 children: [
-                  /* @__PURE__ */ l(
-                    h,
+                  /* @__PURE__ */ a(
+                    b,
                     {
                       id: d,
                       checked: m,
-                      onCheckedChange: () => n(t.id),
+                      onCheckedChange: () => t(n.id),
                       className: "mt-1"
                     }
                   ),
-                  /* @__PURE__ */ l(
+                  /* @__PURE__ */ a(
                     "span",
                     {
                       className: g({ theme: e }),
-                      children: t.content
+                      children: n.content
                     }
                   )
                 ]
               },
-              t.id
+              n.id
             );
           })
         ] })
@@ -103,23 +103,23 @@ function T({
   );
 }
 function $({
-  config: a,
+  config: l,
   checkedItems: i,
-  onCheckedChange: n,
+  onCheckedChange: t,
   hasV2Signature: r = !1,
-  showTitle: c = !1,
-  checkboxIdPrefix: o = "legal-checkbox",
+  showTitle: o = !1,
+  checkboxIdPrefix: c = "legal-checkbox",
   theme: e = "default"
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ a(
     T,
     {
-      config: a,
+      config: l,
       checkedItems: i,
-      onCheckedChange: n,
+      onCheckedChange: t,
       hasV2Signature: r,
-      showTitle: c,
-      checkboxIdPrefix: o,
+      showTitle: o,
+      checkboxIdPrefix: c,
       theme: e
     }
   );

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

@@ -1,137 +1 @@
-import { cva as e } from "class-variance-authority";
-const t = {
-  theme: {
-    default: "",
-    gearboxV3: ""
-  }
-}, r = e("space-y-4", {
-  variants: {
-    theme: {
-      default: "",
-      gearboxV3: "mx-auto w-full min-w-0 max-w-[750px]"
-    }
-  },
-  defaultVariants: {
-    theme: "default"
-  }
-}), n = e("", {
-  variants: {
-    theme: {
-      default: "text-center leading-relaxed text-base text-foreground",
-      gearboxV3: "mb-6 text-center text-xl font-semibold leading-normal text-foreground"
-    }
-  },
-  defaultVariants: {
-    theme: "default"
-  }
-}), l = e("space-y-4", {
-  variants: t,
-  defaultVariants: {
-    theme: "default"
-  }
-}), o = e("", {
-  variants: {
-    theme: {
-      default: "text-base text-foreground",
-      gearboxV3: "mb-5 text-center text-base text-foreground"
-    }
-  },
-  defaultVariants: {
-    theme: "default"
-  }
-}), i = e("", {
-  variants: {
-    theme: {
-      default: "group flex cursor-pointer items-start gap-3",
-      gearboxV3: "min-w-0 break-words"
-    }
-  },
-  defaultVariants: {
-    theme: "default"
-  }
-}), s = e("", {
-  variants: {
-    theme: {
-      default: "text-sm leading-relaxed transition-colors",
-      gearboxV3: "relative min-w-0 break-words"
-    }
-  },
-  defaultVariants: {
-    theme: "default"
-  }
-}), m = e(
-  "flex items-start gap-2 rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-3",
-  {
-    variants: {
-      theme: {
-        default: "",
-        gearboxV3: "mx-auto w-full min-w-0 max-w-[750px]"
-      }
-    },
-    defaultVariants: {
-      theme: "default"
-    }
-  }
-), g = e(
-  "flex flex-col items-center gap-4 py-8 text-center",
-  {
-    variants: {
-      theme: {
-        default: "",
-        gearboxV3: "mx-auto w-full min-w-0 max-w-[750px]"
-      }
-    },
-    defaultVariants: {
-      theme: "default"
-    }
-  }
-), d = e(
-  "flex items-center justify-center gap-2 text-foreground",
-  {
-    variants: {
-      theme: {
-        default: "text-lg font-semibold",
-        gearboxV3: "text-base font-normal"
-      }
-    },
-    defaultVariants: {
-      theme: "default"
-    }
-  }
-), x = e(
-  "text-secondary-foreground",
-  {
-    variants: {
-      theme: {
-        default: "text-sm",
-        gearboxV3: "text-base"
-      }
-    },
-    defaultVariants: {
-      theme: "default"
-    }
-  }
-), f = e("underline", {
-  variants: {
-    theme: {
-      default: "text-primary hover:text-primary/80",
-      gearboxV3: ""
-    }
-  },
-  defaultVariants: {
-    theme: "default"
-  }
-});
-export {
-  x as legalAgreementAwaitingDescriptionVariants,
-  g as legalAgreementAwaitingRootVariants,
-  d as legalAgreementAwaitingTitleVariants,
-  f as legalAgreementLinkVariants,
-  s as legalAgreementPanelCheckboxLabelVariants,
-  o as legalAgreementPanelCheckboxListTitleVariants,
-  l as legalAgreementPanelCheckboxListVariants,
-  i as legalAgreementPanelCheckboxRowVariants,
-  n as legalAgreementPanelNotificationVariants,
-  r as legalAgreementPanelRootVariants,
-  m as legalAgreementPanelV2BannerVariants
-};
+

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

@@ -0,0 +1,137 @@
+import { cva as e } from "class-variance-authority";
+const t = {
+  theme: {
+    default: "",
+    gearboxV3: ""
+  }
+}, r = e("space-y-4", {
+  variants: {
+    theme: {
+      default: "",
+      gearboxV3: "mx-auto w-full min-w-0 max-w-[750px]"
+    }
+  },
+  defaultVariants: {
+    theme: "default"
+  }
+}), n = e("", {
+  variants: {
+    theme: {
+      default: "text-center leading-relaxed text-base text-foreground",
+      gearboxV3: "mb-6 text-center text-xl font-semibold leading-normal text-foreground"
+    }
+  },
+  defaultVariants: {
+    theme: "default"
+  }
+}), l = e("space-y-4", {
+  variants: t,
+  defaultVariants: {
+    theme: "default"
+  }
+}), o = e("", {
+  variants: {
+    theme: {
+      default: "text-base text-foreground",
+      gearboxV3: "mb-5 text-center text-base text-foreground"
+    }
+  },
+  defaultVariants: {
+    theme: "default"
+  }
+}), i = e("", {
+  variants: {
+    theme: {
+      default: "group flex cursor-pointer items-start gap-3",
+      gearboxV3: "min-w-0 break-words"
+    }
+  },
+  defaultVariants: {
+    theme: "default"
+  }
+}), s = e("", {
+  variants: {
+    theme: {
+      default: "text-sm leading-relaxed transition-colors",
+      gearboxV3: "relative min-w-0 break-words"
+    }
+  },
+  defaultVariants: {
+    theme: "default"
+  }
+}), m = e(
+  "flex items-start gap-2 rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-3",
+  {
+    variants: {
+      theme: {
+        default: "",
+        gearboxV3: "mx-auto w-full min-w-0 max-w-[750px]"
+      }
+    },
+    defaultVariants: {
+      theme: "default"
+    }
+  }
+), g = e(
+  "flex flex-col items-center gap-4 py-8 text-center",
+  {
+    variants: {
+      theme: {
+        default: "",
+        gearboxV3: "mx-auto w-full min-w-0 max-w-[750px]"
+      }
+    },
+    defaultVariants: {
+      theme: "default"
+    }
+  }
+), d = e(
+  "flex items-center justify-center gap-2 text-foreground",
+  {
+    variants: {
+      theme: {
+        default: "text-lg font-semibold",
+        gearboxV3: "text-base font-normal"
+      }
+    },
+    defaultVariants: {
+      theme: "default"
+    }
+  }
+), x = e(
+  "text-secondary-foreground",
+  {
+    variants: {
+      theme: {
+        default: "text-sm",
+        gearboxV3: "text-base"
+      }
+    },
+    defaultVariants: {
+      theme: "default"
+    }
+  }
+), f = e("underline", {
+  variants: {
+    theme: {
+      default: "text-primary hover:text-primary/80",
+      gearboxV3: ""
+    }
+  },
+  defaultVariants: {
+    theme: "default"
+  }
+});
+export {
+  x as legalAgreementAwaitingDescriptionVariants,
+  g as legalAgreementAwaitingRootVariants,
+  d as legalAgreementAwaitingTitleVariants,
+  f as legalAgreementLinkVariants,
+  s as legalAgreementPanelCheckboxLabelVariants,
+  o as legalAgreementPanelCheckboxListTitleVariants,
+  l as legalAgreementPanelCheckboxListVariants,
+  i as legalAgreementPanelCheckboxRowVariants,
+  n as legalAgreementPanelNotificationVariants,
+  r as legalAgreementPanelRootVariants,
+  m as legalAgreementPanelV2BannerVariants
+};

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

@@ -1,68 +1,88 @@
-import { jsxs as o, jsx as r, Fragment as g } from "react/jsx-runtime";
-import { IconExternal as x } from "@gearbox-protocol/static";
-import { cva as b } from "class-variance-authority";
-import { BaseLink as N } from "../base-link/base-link.js";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as h } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsxs as t, jsx as n, Fragment as g } from "react/jsx-runtime";
+import { IconExternal as b } from "@gearbox-protocol/static";
+import { cva as h } from "class-variance-authority";
+import { BaseLink as v } from "../base-link/base-link.js";
+import { cn as k } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const v = b(
+const y = h(
   "[&_.icon-wrap]:-mt-px [&_.icon-wrap]:pl-1.5 [&_.icon-wrap]:leading-none [&_.icon-wrap]:text-secondary-foreground hover:[&_.icon-wrap]:text-foreground",
   {
     variants: {
       variant: {
         default: "[&_.content-wrap]:border-b [&_.content-wrap]:border-transparent hover:[&_.content-wrap]:border-foreground",
-        underlined: "[&_.content-wrap]:border-0",
+        // Underlined in rest as well as on hover — but drawn the same way, on
+        // `.content-wrap`, so the rule stops at the words. The real
+        // `text-decoration` this used to lean on paints under the external
+        // icon too, and no markup can scope it away.
+        underlined: "[&_.content-wrap]:border-b [&_.content-wrap]:border-gray-110 hover:[&_.content-wrap]:border-foreground",
         unset: "[&_.content-wrap]:border-0"
       }
     },
     defaultVariants: { variant: "default" }
   }
 );
-function k({
-  className: i,
-  children: n,
-  href: c,
-  target: m,
-  variant: e = "default",
-  size: l = "default",
-  color: d = "main",
-  external: a = !1,
-  asChild: f = !1,
-  ...w
+function L({
+  className: m,
+  children: e,
+  href: d,
+  target: f,
+  variant: o = "default",
+  size: w = "default",
+  color: u = "main",
+  external: s = !1,
+  asChild: N = !1,
+  leadingIcon: c,
+  ..._
 }) {
-  const p = a ? /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(x, { size: 14 }) }) : null, s = a && typeof n == "string" ? (() => {
-    const t = n.trimEnd().lastIndexOf(" "), u = t === -1 ? "" : n.slice(0, t + 1), _ = t === -1 ? n : n.slice(t + 1);
-    return /* @__PURE__ */ o("span", { className: "content-wrap", children: [
-      u,
-      /* @__PURE__ */ o("span", { className: "whitespace-nowrap", children: [
-        _,
-        p
+  const a = s ? /* @__PURE__ */ n("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ n(b, { size: 14 }) }) : null, p = c ? /* @__PURE__ */ n("span", { className: "icon-wrap-start -mt-px pr-1.5 leading-none", children: c }) : null, i = p ? (
+    // A leading icon takes the flex row unconditionally: the string arm below
+    // exists only to glue the trailing icon to the last word, and it has no
+    // say over what sits before the first one.
+    /* @__PURE__ */ t("span", { className: "inline-flex items-center", children: [
+      p,
+      /* @__PURE__ */ n("span", { className: "content-wrap", children: e }),
+      a
+    ] })
+  ) : s && typeof e == "string" ? (() => {
+    const r = e.trimEnd().lastIndexOf(" "), l = r === -1 ? "" : e.slice(0, r + 1), x = r === -1 ? e : e.slice(r + 1);
+    return /* @__PURE__ */ t(g, { children: [
+      l ? /* @__PURE__ */ n("span", { className: "content-wrap", children: l }) : null,
+      /* @__PURE__ */ t("span", { className: "inline-flex items-center whitespace-nowrap", children: [
+        /* @__PURE__ */ n("span", { className: "content-wrap", children: x }),
+        a
       ] })
     ] });
-  })() : /* @__PURE__ */ o(g, { children: [
-    /* @__PURE__ */ r("span", { className: "content-wrap", children: n }),
-    p
-  ] });
-  return /* @__PURE__ */ r(
-    N,
+  })() : a ? (
+    // Wrapped so the icon is not a direct child of the anchor: a caller that
+    // lays its anchor out as a flex row — `TitleMeta` does — would add its
+    // `gap` on top of the icon's own padding.
+    //
+    // No `whitespace-nowrap` here: a node child is often prose and must stay
+    // free to wrap. And only when there is an icon — this arm also catches
+    // non-external links, where wrapping would blockify `.content-wrap` and
+    // move an `underlined` border, to align nothing.
+    /* @__PURE__ */ t("span", { className: "inline-flex items-center", children: [
+      /* @__PURE__ */ n("span", { className: "content-wrap", children: e }),
+      a
+    ] })
+  ) : /* @__PURE__ */ n("span", { className: "content-wrap", children: e });
+  return /* @__PURE__ */ n(
+    v,
     {
-      href: c,
-      target: m,
-      external: a,
-      variant: e,
-      size: l,
-      color: d,
-      className: h(v({ variant: e }), i),
-      ...w,
-      children: f ? /* @__PURE__ */ r("span", { children: s }) : s
+      href: d,
+      target: f,
+      external: s,
+      variant: o === "underlined" ? "default" : o,
+      size: w,
+      color: u,
+      className: k(y({ variant: o }), m),
+      ..._,
+      children: N ? /* @__PURE__ */ n("span", { children: i }) : i
     }
   );
 }
-k.displayName = "Link";
+L.displayName = "Link";
 export {
-  k as Link
+  L as Link
 };

package/dist/esm/components/loader/loader.js

@@ -1,21 +1,18 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { IconPending as m } from "@gearbox-protocol/static";
-import * as a from "react";
+import { IconPending as i } from "@gearbox-protocol/static";
+import * as m from "react";
 import { FormattedMessageTyped as s } from "../typed-intl/index.js";
-import "@gearbox-protocol/sdk";
-import { cn as t } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { cn as n } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const n = a.forwardRef(function({ className: o }, i) {
+const t = m.forwardRef(function({ className: o }, a) {
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: i,
-      className: t("flex flex-wrap justify-center items-center", o),
+      ref: a,
+      className: n("flex flex-wrap justify-center items-center", o),
       children: [
-        /* @__PURE__ */ e("div", { className: "mr-2 overflow-hidden", children: /* @__PURE__ */ e(m, { size: 24, className: "animate-spin" }) }),
+        /* @__PURE__ */ e("div", { className: "mr-2 overflow-hidden", children: /* @__PURE__ */ e(i, { size: 24, className: "animate-spin" }) }),
         /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ e(s, { messageId: "components.loading.loading" }),
           "..."
@@ -24,7 +21,7 @@ const n = a.forwardRef(function({ className: o }, i) {
     }
   );
 });
-n.displayName = "Loader";
+t.displayName = "Loader";
 export {
-  n as Loader
+  t as Loader
 };

package/dist/esm/components/loading/loading-progress.js

@@ -0,0 +1,15 @@
+const d = (n) => n != null;
+function u(n) {
+  return Math.round(n / 5) * 5;
+}
+function s(n) {
+  const r = n.reduce(
+    (o, e) => d(e) ? o + 1 : o,
+    0
+  ), t = Math.floor(r / n.length * 100);
+  return u(t);
+}
+export {
+  s as loadingProgress,
+  u as round5
+};