@gearbox-protocol/ui-kit 4.0.0-next.5 → 4.0.0-next.50

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

@@ -1,10 +1,8 @@
 import { jsxs as p, 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 "@gearbox-protocol/sdk/onchain";
 import { cn as e } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import { useIconSlotWidths as S } from "./use-icon-slot-widths.js";
@@ -71,7 +69,7 @@ const z = T(
       variant: "default"
     }
   }
-), G = R.forwardRef(
+), B = R.forwardRef(
   ({
     hasError: o,
     errorMessage: d,
@@ -158,6 +156,6 @@ const z = T(
   }
 );
 export {
-  G as Input,
+  B as Input,
   z as inputVariants
 };

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

@@ -2,10 +2,8 @@ import { jsx as x } from "react/jsx-runtime";
 import * as d from "@radix-ui/react-label";
 import { cva as v } from "class-variance-authority";
 import * as r from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as g } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const y = v(

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,8 @@ const u = [
     }
   )
 );
-g.displayName = "AppFooter";
+x.displayName = "AppFooter";
 export {
-  g as AppFooter,
-  u as DEFAULT_APP_FOOTER_LINKS
+  x as AppFooter,
+  d as DEFAULT_APP_FOOTER_LINKS
 };

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-panel.js

@@ -1,7 +1,7 @@
 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 { 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 {
@@ -28,7 +28,7 @@ function T({
           /* @__PURE__ */ l(
             N,
             {
-              icon: u,
+              icon: h,
               className: "size-5 shrink-0 text-yellow-500 mt-0.5"
             }
           ),
@@ -49,7 +49,7 @@ function T({
               {
                 className: x({ theme: e }),
                 children: /* @__PURE__ */ l(
-                  b,
+                  u,
                   {
                     id: d,
                     checked: m,
@@ -77,7 +77,7 @@ function T({
                 className: x({ theme: e }),
                 children: [
                   /* @__PURE__ */ l(
-                    h,
+                    b,
                     {
                       id: d,
                       checked: m,

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

@@ -1,21 +1,22 @@
-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 { jsxs as s, Fragment as b, jsx as n } from "react/jsx-runtime";
+import { IconExternal as g } from "@gearbox-protocol/static";
+import { cva as x } from "class-variance-authority";
 import { BaseLink as N } from "../base-link/base-link.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as h } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const v = b(
+const v = x(
   "[&_.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"
       }
     },
@@ -23,42 +24,52 @@ const v = b(
   }
 );
 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
+  className: p,
+  children: e,
+  href: l,
+  target: d,
+  variant: a = "default",
+  size: m = "default",
+  color: f = "main",
+  external: t = !1,
+  asChild: w = !1,
+  ...u
 }) {
-  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 o = t ? /* @__PURE__ */ n("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ n(g, { size: 14 }) }) : null, c = t && typeof e == "string" ? (() => {
+    const r = e.trimEnd().lastIndexOf(" "), i = r === -1 ? "" : e.slice(0, r + 1), _ = r === -1 ? e : e.slice(r + 1);
+    return /* @__PURE__ */ s(b, { children: [
+      i ? /* @__PURE__ */ n("span", { className: "content-wrap", children: i }) : null,
+      /* @__PURE__ */ s("span", { className: "inline-flex items-center whitespace-nowrap", children: [
+        /* @__PURE__ */ n("span", { className: "content-wrap", children: _ }),
+        o
       ] })
     ] });
-  })() : /* @__PURE__ */ o(g, { children: [
-    /* @__PURE__ */ r("span", { className: "content-wrap", children: n }),
-    p
-  ] });
-  return /* @__PURE__ */ r(
+  })() : o ? (
+    // 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__ */ s("span", { className: "inline-flex items-center", children: [
+      /* @__PURE__ */ n("span", { className: "content-wrap", children: e }),
+      o
+    ] })
+  ) : /* @__PURE__ */ n("span", { className: "content-wrap", children: e });
+  return /* @__PURE__ */ n(
     N,
     {
-      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: l,
+      target: d,
+      external: t,
+      variant: a === "underlined" ? "default" : a,
+      size: m,
+      color: f,
+      className: h(v({ variant: a }), p),
+      ...u,
+      children: w ? /* @__PURE__ */ n("span", { children: c }) : c
     }
   );
 }

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

@@ -1,21 +1,19 @@
 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 a } from "@gearbox-protocol/static";
+import * as m from "react";
 import { FormattedMessageTyped as s } from "../typed-intl/index.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as t } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const n = a.forwardRef(function({ className: o }, i) {
+const n = m.forwardRef(function({ className: o }, i) {
   return /* @__PURE__ */ r(
     "div",
     {
       ref: i,
       className: t("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(a, { size: 24, className: "animate-spin" }) }),
         /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ e(s, { messageId: "components.loading.loading" }),
           "..."

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

@@ -3,19 +3,17 @@ import { cva as m } from "class-variance-authority";
 import * as d from "react";
 import { Modal as l } from "../modal/modal.js";
 import { SpinnerLoader as c } from "../spinner-loader/spinner-loader.js";
-import "@gearbox-protocol/sdk";
-import { cn as p } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as s } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
-const s = m(
+const p = m(
   [
     "w-[250px] min-h-[120px] p-[16px] flex flex-col justify-center items-center text-center",
     "bg-gray-10 rounded-md"
   ].join(" ")
 ), x = d.forwardRef(
-  ({ message: t, subMessage: e, show: n = !0, className: a }, i) => /* @__PURE__ */ r(l, { show: n, xsCentered: !0, zIndexLayer: "LOADING", children: /* @__PURE__ */ o("div", { ref: i, className: p(s(), a), children: [
+  ({ message: t, subMessage: e, show: n = !0, className: a }, i) => /* @__PURE__ */ r(l, { show: n, xsCentered: !0, zIndexLayer: "LOADING", children: /* @__PURE__ */ o("div", { ref: i, className: s(p(), a), children: [
     /* @__PURE__ */ r("div", { className: "mb-5", children: /* @__PURE__ */ r(c, {}) }),
     /* @__PURE__ */ o("div", { className: "flex w-full flex-col gap-0", children: [
       /* @__PURE__ */ r("span", { className: "text-sm text-foreground", children: t }),

package/dist/esm/components/modal/modal.js

@@ -1,12 +1,10 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-dialog";
 import { cva as D } from "class-variance-authority";
-import * as i from "react";
-import "@gearbox-protocol/sdk/common-utils";
+import * as s from "react";
 import { useIsMobile as M } from "../../hooks/use-media-query.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
-import "sonner";
 import "luxon";
 import { Z_INDEX as O, Z_INDEX_VALUES as N } from "../../utils/z-index.js";
 const u = "gb-modal-open";
@@ -28,30 +26,30 @@ const b = "before:content-[''] before:absolute before:inset-0 after:z-[-1] befor
     colorTheme: "default",
     backdrop: "default"
   }
-}), w = i.forwardRef(
+}), w = s.forwardRef(
   ({
     show: r = !0,
     colorTheme: g = "default",
     backdrop: p = "default",
     xsCentered: v = !1,
-    onClickOutside: s,
+    onClickOutside: i,
     zIndexLayer: c = "MODAL",
     className: x,
     children: y,
     ...h
   }, C) => {
     const _ = M(), d = O[c], f = { zIndex: N[c] };
-    i.useEffect(() => {
+    s.useEffect(() => {
       if (!(typeof document > "u") && r)
         return n += 1, document.body.classList.add(u), () => {
           n = Math.max(0, n - 1), n === 0 && document.body.classList.remove(u);
         };
     }, [r]);
-    const l = i.useCallback(
+    const l = s.useCallback(
       (e) => {
-        e || s?.();
+        e || i?.();
       },
-      [s]
+      [i]
     );
     return r ? /* @__PURE__ */ t(a.Root, { open: r, onOpenChange: l, modal: !0, children: /* @__PURE__ */ m(a.Portal, { children: [
       /* @__PURE__ */ t(

package/dist/esm/components/navbar-logo/navbar-logo.js

@@ -1,26 +1,23 @@
-import { jsx as n } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as a } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import { jsx as a } from "react/jsx-runtime";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as m } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
-function f({
+function s({
   size: o,
   className: t,
   style: i,
   ...r
 }) {
-  const m = o ? { width: o, height: o } : {};
+  const n = o ? { width: o, height: o } : {};
   return (
     // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       "img",
       {
         alt: "Logo",
-        className: a("object-contain", t),
-        style: { ...m, ...i },
+        className: m("object-contain", t),
+        style: { ...n, ...i },
         loading: "lazy",
         decoding: "async",
         ...r
@@ -29,5 +26,5 @@ function f({
   );
 }
 export {
-  f as NavBarLogo
+  s as NavBarLogo
 };

package/dist/esm/components/network-icon/index.js

@@ -1,6 +1,4 @@
-import { NetworkIcon as t } from "./network-icon.js";
-import { NetworkIndicator as c } from "./network-indicator.js";
+import { NetworkIcon as e } from "./network-icon.js";
 export {
-  t as NetworkIcon,
-  c as NetworkIndicator
+  e as NetworkIcon
 };

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -1,9 +1,6 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 const a = {
@@ -13,49 +10,49 @@ const a = {
   blue: "border-blue-600 bg-blue-600",
   yellow: "border-yellow-600 bg-yellow-600"
 };
-function f({
-  size: r = 24,
+function p({
+  size: e = 24,
   color: n = "primary",
   className: s,
   children: d
 }) {
-  const t = r + 8, l = a[n];
+  const l = e + 8, t = a[n];
   return /* @__PURE__ */ i("div", { className: o("relative inline-block", s), children: [
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full border-2",
-          l.split(" ")[0]
+          t.split(" ")[0]
           // border color
         ),
         style: {
           top: -4,
           left: -4,
-          width: t,
-          height: t
+          width: l,
+          height: l
         }
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full",
-          l.split(" ")[1]
+          t.split(" ")[1]
         ),
         style: {
-          top: -r / 4,
-          right: -r / 4,
-          width: r * 7 / 12,
-          height: r * 7 / 12,
+          top: -e / 4,
+          right: -e / 4,
+          width: e * 7 / 12,
+          height: e * 7 / 12,
           zIndex: 1
         },
         children: /* @__PURE__ */ i(
           "svg",
           {
-            width: r / 3,
-            height: r / 3,
+            width: e / 3,
+            height: e / 3,
             viewBox: "0 0 8 8",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
@@ -63,8 +60,8 @@ function f({
             role: "img",
             "aria-label": "Pool Points Indicator",
             children: [
-              /* @__PURE__ */ e("title", { children: "Pool Points" }),
-              /* @__PURE__ */ e("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
+              /* @__PURE__ */ r("title", { children: "Pool Points" }),
+              /* @__PURE__ */ r("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
             ]
           }
         )
@@ -74,5 +71,5 @@ function f({
   ] });
 }
 export {
-  f as PoolPointsIndicator
+  p as PoolPointsIndicator
 };

package/dist/esm/components/radio-group/index.js

@@ -0,0 +1,5 @@
+import { RadioGroup as p, RadioGroupItem as a } from "./radio-group.js";
+export {
+  p as RadioGroup,
+  a as RadioGroupItem
+};

package/dist/esm/components/radio-group/radio-group.js

@@ -0,0 +1,55 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import { cva as n } from "class-variance-authority";
+import * as s from "react";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as t } from "../../utils/cn.js";
+import "luxon";
+import "../../utils/z-index.js";
+const l = n("", {
+  variants: {
+    size: {
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    },
+    color: {
+      primary: "border-primary",
+      secondary: "border-gray-50 data-[state=checked]:border-primary"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), c = s.forwardRef(({ className: e, ...o }, a) => /* @__PURE__ */ i(r.Root, { ref: a, className: t(e), ...o }));
+c.displayName = r.Root.displayName;
+const p = s.forwardRef(({ className: e, color: o, size: a, ...d }, m) => /* @__PURE__ */ i(
+  r.Item,
+  {
+    ref: m,
+    className: t(
+      "group relative shrink-0 rounded-full border shadow cursor-pointer transition-colors flex items-center justify-center",
+      "data-[state=checked]:border-primary",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      l({ size: a, color: o }),
+      "disabled:cursor-not-allowed disabled:bg-gray-20 disabled:border-gray-50",
+      e
+    ),
+    ...d,
+    children: /* @__PURE__ */ i(
+      r.Indicator,
+      {
+        className: t(
+          "pointer-events-none flex items-center justify-center",
+          "size-2 rounded-full bg-primary",
+          "group-disabled:bg-gray-50"
+        )
+      }
+    )
+  }
+));
+p.displayName = r.Item.displayName;
+export {
+  c as RadioGroup,
+  p as RadioGroupItem
+};