@gearbox-protocol/ui-kit 3.14.0-next.8 → 4.0.0-next.1

package/dist/esm/components/legal-agreement/legal-agreement.stories-config.js

@@ -0,0 +1,170 @@
+import { jsxs as r, Fragment as i, jsx as d } from "react/jsx-runtime";
+import { LegalAgreementLink as l } from "./legal-agreement-link.js";
+const t = {
+  termsOfService: "https://gearbox.finance/terms",
+  privacyNotice: "https://gearbox.finance/privacy",
+  riskDisclosure: "https://gearbox.finance/risks",
+  rwaMarketsTerms: "https://gearbox.finance/rwa-tc"
+}, n = "Example App";
+function c(a, e, s) {
+  return /* @__PURE__ */ d(l, { href: e, theme: a, children: s });
+}
+function m(a = "default") {
+  const e = (s, o) => c(a, s, o);
+  return {
+    productName: n,
+    notificationText: /* @__PURE__ */ r(i, { children: [
+      "Any use of and/or interaction with the ",
+      n,
+      " is subject to the",
+      " ",
+      e(t.termsOfService, "Terms of Service"),
+      " and",
+      " ",
+      e(t.privacyNotice, "Privacy Notice"),
+      ", and acceptance of risks described in the",
+      " ",
+      e(t.riskDisclosure, "Risk Disclosure Statement"),
+      "."
+    ] }),
+    checkboxItems: [
+      {
+        id: "consent",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I agree to the",
+          " ",
+          e(t.termsOfService, "Terms of Service"),
+          " and acknowledge the ",
+          e(t.privacyNotice, "Privacy Notice"),
+          ". I have read the",
+          " ",
+          e(t.riskDisclosure, "Risk Disclosure Statement"),
+          " and I voluntarily assume all risks described in it."
+        ] })
+      }
+    ]
+  };
+}
+function h(a = "default") {
+  const e = (s, o) => c(a, s, o);
+  return {
+    productName: n,
+    notificationText: /* @__PURE__ */ r(i, { children: [
+      "By accessing or using ",
+      n,
+      ", I agree to the",
+      " ",
+      e(t.termsOfService, "Terms of Service"),
+      " and confirm that I have read and understood the",
+      " ",
+      e(t.privacyNotice, "Privacy Notice"),
+      " and",
+      " ",
+      e(t.riskDisclosure, "Risk Disclosure Statement"),
+      "."
+    ] }),
+    updatedTermsNoticeText: /* @__PURE__ */ r(i, { children: [
+      "Our Terms of Service have been updated. Please review and sign the new agreement to continue using ",
+      n,
+      "."
+    ] }),
+    checkboxItems: [
+      {
+        id: "terms",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I agree to the",
+          " ",
+          e(t.termsOfService, "Terms of Service"),
+          " and acknowledge the ",
+          e(t.privacyNotice, "Privacy Notice"),
+          "."
+        ] })
+      },
+      {
+        id: "prohibited",
+        content: "I represent and confirm that I am not a Prohibited Person (as defined in the above Terms of Service) and am not acting on behalf of one."
+      },
+      {
+        id: "risks",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I acknowledge that the ",
+          n,
+          ", related software, and smart contracts are experimental and may contain errors or vulnerabilities. I understand that their use may result in the complete loss of my funds. I have read the",
+          " ",
+          e(t.riskDisclosure, "Risk Disclosure Statement"),
+          " and I voluntarily assume all risks described in it."
+        ] })
+      }
+    ]
+  };
+}
+function f(a = "default") {
+  const e = (s, o) => c(a, s, o);
+  return {
+    productName: n,
+    notificationText: /* @__PURE__ */ r(i, { children: [
+      "By accessing or using ",
+      n,
+      ", I agree to the",
+      " ",
+      e(t.termsOfService, "Terms of Service"),
+      " and",
+      " ",
+      e(
+        t.rwaMarketsTerms,
+        "RWA Markets Interface Terms & Conditions"
+      ),
+      ", and confirm that I have read and understood the",
+      " ",
+      e(t.privacyNotice, "Privacy Notice"),
+      " and",
+      " ",
+      e(t.riskDisclosure, "Risk Disclosure Statement"),
+      "."
+    ] }),
+    checkboxItems: [
+      {
+        id: "terms",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I agree to the",
+          " ",
+          e(t.termsOfService, "Terms of Service"),
+          " and",
+          " ",
+          e(
+            t.rwaMarketsTerms,
+            "RWA Markets Interface Terms & Conditions"
+          ),
+          ", and acknowledge the",
+          " ",
+          e(t.privacyNotice, "Privacy Notice"),
+          "."
+        ] })
+      },
+      {
+        id: "prohibited",
+        content: "I represent and confirm that I am not a Prohibited Person (as defined in the above Terms of Service) and am not acting on behalf of one."
+      },
+      {
+        id: "risks",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I acknowledge that the ",
+          n,
+          ", RWA Markets Interface, related software, and smart contracts are experimental and may contain errors or vulnerabilities. I understand that their use may result in the complete loss of my funds. I have read the",
+          " ",
+          e(t.riskDisclosure, "Risk Disclosure Statement"),
+          ", and I voluntarily assume all risks described in it and the above RWA Markets Interface Terms & Conditions."
+        ] })
+      }
+    ]
+  };
+}
+const k = m(), g = h(), p = f();
+export {
+  h as createStoryExtendedLegalConfig,
+  m as createStoryPermissionlessLegalConfig,
+  f as createStoryRwaLegalConfig,
+  g as storyExtendedLegalConfig,
+  k as storyPermissionlessLegalConfig,
+  p as storyRwaLegalConfig
+};

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

@@ -1,15 +1,15 @@
-import { jsx as r, jsxs as e, Fragment as f } from "react/jsx-runtime";
-import { IconExternal as t } from "@gearbox-protocol/static";
-import { cva as w } from "class-variance-authority";
-import { BaseLink as u } from "../base-link/base-link.js";
+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 _ } from "../../utils/cn.js";
+import { cn as h } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const g = w(
+const v = b(
   "[&_.icon-wrap]:-mt-px [&_.icon-wrap]:pl-1.5 [&_.icon-wrap]:leading-none [&_.icon-wrap]:text-secondary-foreground hover:[&_.icon-wrap]:text-foreground",
   {
     variants: {
@@ -22,40 +22,47 @@ const g = w(
     defaultVariants: { variant: "default" }
   }
 );
-function x({
-  className: p,
-  children: a,
-  href: i,
-  target: s,
-  variant: o = "default",
-  size: c = "default",
-  color: m = "main",
-  external: n = !1,
-  asChild: d = !1,
-  ...l
+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
 }) {
+  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
+      ] })
+    ] });
+  })() : /* @__PURE__ */ o(g, { children: [
+    /* @__PURE__ */ r("span", { className: "content-wrap", children: n }),
+    p
+  ] });
   return /* @__PURE__ */ r(
-    u,
+    N,
     {
-      href: i,
-      target: s,
-      external: n,
-      variant: o,
-      size: c,
-      color: m,
-      className: _(g({ variant: o }), p),
-      ...l,
-      children: d ? /* @__PURE__ */ e("span", { children: [
-        /* @__PURE__ */ r("span", { className: "content-wrap", children: a }),
-        n && /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(t, { size: 14 }) })
-      ] }) : /* @__PURE__ */ e(f, { children: [
-        /* @__PURE__ */ r("span", { className: "content-wrap", children: a }),
-        n && /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(t, { size: 14 }) })
-      ] })
+      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
     }
   );
 }
-x.displayName = "Link";
+k.displayName = "Link";
 export {
-  x as Link
+  k as Link
 };

package/dist/esm/components/pool-apy-tooltip/apy-tooltip.js

@@ -0,0 +1,154 @@
+import { jsxs as s, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { faPlus as b } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as g } from "../icons/fa-icon.js";
+import { PointsIcon as u } from "../points-icon/points-icon.js";
+import { TokenIcon as h } from "../token-icon/token-icon.js";
+import { SimpleTooltip as y } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as o } from "../typed-intl/index.js";
+import { VerticalIndicator as a } from "../vertical-indicator/vertical-indicator.js";
+import "react";
+import { positiveTokenRewardsOf as v, pointProgramsOf as P, totalApyOf as N } from "../../utils/apy-breakdown.js";
+import "@gearbox-protocol/sdk";
+import { bpsToPercent as l } from "../../utils/bps.js";
+import { cn as p } from "../../utils/cn.js";
+import "sonner";
+import { percentTemplate as i } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function B({ apy: r, children: c, className: m }) {
+  const d = v(r), n = P(r), f = /* @__PURE__ */ s(
+    "div",
+    {
+      className: p(
+        "w-[370px] max-w-[calc(100vw-32px)] p-6",
+        "bg-popover",
+        "border border-border",
+        "rounded-lg",
+        "shadow-[0_4px_28px_4px_rgba(0,0,0,0.15)]",
+        "text-left font-normal"
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ e(
+            a,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ e(
+                o,
+                {
+                  messageId: "components.apyParts.supplyAPY"
+                }
+              ),
+              description: /* @__PURE__ */ e(
+                o,
+                {
+                  messageId: "components.apyParts.supplyAPY.tip"
+                }
+              ),
+              value: i(l(r.organicApy))
+            }
+          ),
+          d.map((t) => /* @__PURE__ */ e(
+            a,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ s("span", { className: "inline-flex items-center", children: [
+                /* @__PURE__ */ e(
+                  o,
+                  {
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: t.token.symbol }
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(h, { token: t.token, size: 14 }) })
+              ] }),
+              description: /* @__PURE__ */ e(
+                o,
+                {
+                  messageId: "components.apyParts.extraAPY.tip"
+                }
+              ),
+              value: i(l(t.supplyApr ?? 0))
+            },
+            `extra-${t.token.address}-${t.supplyApr ?? 0}`
+          ))
+        ] }),
+        /* @__PURE__ */ e("div", { className: "my-5 border-t border-border" }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ e(
+          a,
+          {
+            size: "sm",
+            label: /* @__PURE__ */ e("span", { className: "font-bold", children: /* @__PURE__ */ e(
+              o,
+              {
+                messageId: "components.apyParts.totalAPY"
+              }
+            ) }),
+            value: i(l(N(r)))
+          }
+        ) }),
+        n.length > 0 && /* @__PURE__ */ s(x, { children: [
+          /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: p(
+                "absolute -top-2.5 left-1/2 -translate-x-1/2",
+                "w-5 h-5",
+                "flex items-center justify-center",
+                "rounded-full",
+                "bg-gray-20"
+              ),
+              children: /* @__PURE__ */ e(g, { icon: b, className: "size-2.5 text-white" })
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "h-6" }),
+          /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: n.map((t) => /* @__PURE__ */ e(
+            a,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ s("span", { className: "inline-flex items-center", children: [
+                /* @__PURE__ */ e(
+                  o,
+                  {
+                    messageId: "components.apyParts.points",
+                    values: { symbol: t.name }
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "ml-2 inline-flex", children: /* @__PURE__ */ e(
+                  u,
+                  {
+                    reward: {
+                      name: t.name,
+                      type: t.id
+                    },
+                    size: 16
+                  }
+                ) })
+              ] }),
+              value: t.multiplier != null ? `${t.multiplier}x` : "—"
+            },
+            `points-${t.id}`
+          )) })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(
+    y,
+    {
+      placement: "bottom",
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: "100%",
+      maxWidth: "100%",
+      title: /* @__PURE__ */ e("span", { className: m, children: c }),
+      triggerClassName: m,
+      children: f
+    }
+  );
+}
+export {
+  B as ApyTooltip
+};

package/dist/esm/components/pool-apy-tooltip/index.js

@@ -1,4 +1,4 @@
-import { PoolAPYTooltip as p } from "./pool-apy-tooltip.js";
+import { ApyTooltip as r } from "./apy-tooltip.js";
 export {
-  p as PoolAPYTooltip
+  r as ApyTooltip
 };

package/dist/esm/components/rwa-feature/index.js

@@ -0,0 +1,4 @@
+import { RWAFeature as o } from "./rwa-feature.js";
+export {
+  o as RWAFeature
+};

package/dist/esm/components/rwa-feature/rwa-feature.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { RWA_GRADIENT_BORDER_CLASS as i } from "../rwa-styles/index.js";
+import { SimpleTooltip as p } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as n } from "../typed-intl/index.js";
+import { cn as m } from "../../utils/cn.js";
+function g({
+  disabledStyle: t,
+  tooltip: r = /* @__PURE__ */ e(n, { messageId: "components.strategiesTable.line.rwa.tip" })
+}) {
+  const o = /* @__PURE__ */ e(
+    "span",
+    {
+      className: m(
+        "rounded-xl px-[6px] py-1 text-xs leading-none",
+        i,
+        t && "opacity-60 pointer-events-none"
+      ),
+      children: /* @__PURE__ */ e(n, { messageId: "components.strategiesTable.line.rwa" })
+    }
+  );
+  return t ? o : /* @__PURE__ */ e(p, { placement: "top", triangle: !1, title: o, children: r });
+}
+export {
+  g as RWAFeature
+};

package/dist/esm/components/segmented-control/segmented-control.js

@@ -1,15 +1,15 @@
 import { jsxs as C, jsx as f } from "react/jsx-runtime";
-import { cva as k } from "class-variance-authority";
-import * as R from "react";
-import { useRef as w, useState as I, useCallback as v, useLayoutEffect as y } from "react";
+import { cva as R } from "class-variance-authority";
+import * as N from "react";
+import { useRef as x, useState as I, useCallback as v, useLayoutEffect as y } 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 "../../utils/z-index.js";
-const S = k(
-  "relative z-0 flex w-full flex-row flex-nowrap items-center bg-gray-30",
+const S = R(
+  "relative z-0 w-full grid grid-flow-col auto-cols-[1fr] bg-gray-30",
   {
     variants: {
       size: {
@@ -19,7 +19,7 @@ const S = k(
     },
     defaultVariants: { size: "md" }
   }
-), V = k("", {
+), V = R("", {
   variants: {
     size: {
       sm: "rounded-sm",
@@ -27,30 +27,30 @@ const S = k(
     }
   },
   defaultVariants: { size: "md" }
-}), $ = R.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
-  const r = n.findIndex((e) => e.checked), s = r < 0 ? 0 : r, o = n.length, i = w(null), p = w([]), [h, x] = I({ left: 0, width: 0 }), d = v(() => {
+}), $ = N.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
+  const r = n.findIndex((e) => e.checked), s = r < 0 ? 0 : r, o = n.length, d = x(null), p = x([]), [h, w] = I({ left: 0, width: 0 }), i = v(() => {
     const e = p.current[s];
     if (!e || o === 0) {
-      x({ left: 0, width: 0 });
+      w({ left: 0, width: 0 });
       return;
     }
-    x({
+    w({
       left: e.offsetLeft,
       width: e.offsetWidth
     });
   }, [o, s]);
   y(() => {
-    d();
-  }, [d]), y(() => {
-    const e = new ResizeObserver(() => d()), a = i.current;
+    i();
+  }, [i]), y(() => {
+    const e = new ResizeObserver(() => i()), a = d.current;
     a && e.observe(a);
     for (const c of p.current)
       c && e.observe(c);
     return () => e.disconnect();
-  }, [d]);
+  }, [i]);
   const z = v(
     (e) => {
-      i.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+      d.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
     },
     [t]
   );
@@ -62,7 +62,7 @@ const S = k(
       ...u,
       children: [
         n.map((e, a) => /* @__PURE__ */ f(
-          N,
+          k,
           {
             ...e,
             name: m,
@@ -93,16 +93,16 @@ const S = k(
   );
 });
 $.displayName = "SegmentedControl";
-const N = R.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
-  const o = u ?? (t ? (i) => {
-    i.preventDefault(), t();
+const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
+  const o = u ?? (t ? (d) => {
+    d.preventDefault(), t();
   } : void 0);
   return /* @__PURE__ */ C(
     "label",
     {
       ref: s,
       className: g(
-        "relative m-0 block h-full grow shrink-0 basis-0 cursor-pointer select-none",
+        "relative m-0 h-full cursor-pointer select-none",
         r.disabled && "cursor-default opacity-50"
       ),
       "data-checked": r.checked,
@@ -123,7 +123,7 @@ const N = R.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u
     }
   );
 });
-N.displayName = "SegmentedControlItem";
+k.displayName = "SegmentedControlItem";
 export {
   $ as SegmentedControl,
   S as segmentedControlVariants

package/dist/esm/components/split-list/split-list.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
-import { cva as m } from "class-variance-authority";
+import { cva as c } from "class-variance-authority";
 import * as t from "react";
 import "@gearbox-protocol/sdk";
-import { cn as c } from "../../utils/cn.js";
+import { cn as u } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const u = m(
+const b = c(
   [
     /* layout */
     "relative flex items-center",
@@ -25,36 +25,36 @@ const u = m(
     },
     defaultVariants: { colSize: "equal" }
   }
-), b = t.forwardRef(
+), d = t.forwardRef(
   ({ children: i, colSize: e = !0, className: l }, s) => {
     const n = t.Children.toArray(i).filter(Boolean);
     return /* @__PURE__ */ a(
       "div",
       {
         ref: s,
-        className: c(
+        className: u(
           "flex w-full flex-row flex-nowrap",
           "items-stretch",
           l
         ),
-        children: n.map((r, o) => {
-          const f = typeof e == "function" ? e(o) : e, p = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
+        children: n.map((r, o, f) => {
+          const p = typeof e == "function" ? e(o, f) : e, m = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
           return /* @__PURE__ */ a(
             "div",
             {
-              className: u({
-                colSize: f === "auto" ? "auto" : "equal"
+              className: b({
+                colSize: p === "auto" ? "auto" : "equal"
               }),
               children: r
             },
-            p
+            m
           );
         })
       }
     );
   }
 );
-b.displayName = "SplitList";
+d.displayName = "SplitList";
 export {
-  b as SplitList
+  d as SplitList
 };

package/dist/esm/components/tab-control/tab-control.js

@@ -80,7 +80,7 @@ function B({
               onClick: t.disabled ? void 0 : d(t.id, a),
               disabled: t.disabled,
               className: m(
-                "flex items-center bg-transparent border-none shrink-0 text-foreground",
+                "flex items-center bg-transparent border-none shrink-0 text-foreground outline-none",
                 o ? "" : "p-0 pb-3.5",
                 u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
                 t.disabled && "cursor-not-allowed",