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

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

@@ -1,250 +1,110 @@
-import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
-import { IconExternal as A, IconPending as b } from "@gearbox-protocol/static";
-import * as B from "react";
-import { useState as j } from "react";
-import { AlertDialog as u, AlertDialogContent as f, AlertDialogHeader as x, AlertDialogTitle as g, AlertDialogDescription as h, AlertDialogFooter as w } from "../alert-dialog/alert-dialog.js";
-import { BaseLink as k } from "../base-link/base-link.js";
-import { Button as p } from "../buttons/button/button.js";
-import { Checkbox as R } from "../checkbox/checkbox.js";
-import "../checkbox/checkbox-labeled.js";
-import { faTriangleExclamation as I } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as T } from "../icons/fa-icon.js";
-function $({
-  open: r,
-  onClose: e,
-  onSign: n,
-  isSigning: o,
-  hasV2Signature: m = !1,
-  isAwaitingSignature: S = !1,
-  config: c
+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 { 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";
+function K({
+  open: a,
+  onClose: s,
+  onSign: r,
+  isSigning: n,
+  hasV2Signature: g = !1,
+  isAwaitingSignature: w = !1,
+  config: i,
+  theme: h = "default"
 }) {
-  const [y, N] = j({}), C = c.checkboxItems.every((s) => y[s.id]), D = (s) => {
-    N((d) => ({ ...d, [s]: !d[s] }));
-  }, P = async () => {
-    await n();
+  const [f, u] = D({}), N = i.checkboxItems.every((l) => f[l.id]), y = (l) => {
+    u((p) => ({ ...p, [l]: !p[l] }));
+  }, A = async () => {
+    await r();
   };
-  return B.useEffect(() => {
-    r || N({});
-  }, [r]), S ? /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl w-[calc(100%-2rem)] sm:w-full", children: [
-    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(g, { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ t(b, { size: 20, className: "animate-spin" }),
-      "Waiting for Signature"
-    ] }) }),
-    /* @__PURE__ */ t(h, { className: "text-center", children: c.waitingForSignatureText || "Please sign the message in your wallet to agree to the Terms of Service." })
-  ] }) }) : /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl max-h-[90vh] overflow-y-auto w-[calc(100%-2rem)] sm:w-full", children: [
-    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(g, { className: "text-center text-xl", children: m ? c.updatedTitle || "Terms of Service Updated" : c.title || "Legal Agreement" }) }),
-    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ t("div", { className: "text-center leading-relaxed text-base", children: c.notificationText }),
-      m && /* @__PURE__ */ a("div", { className: "flex items-start gap-2 rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-3", children: [
-        /* @__PURE__ */ t(
-          T,
-          {
-            icon: I,
-            className: "size-5 text-yellow-500 shrink-0 mt-0.5"
-          }
-        ),
-        /* @__PURE__ */ a("p", { className: "text-sm text-yellow-500", children: [
-          "Our Terms of Service have been updated. Please review and sign the new agreement to continue using ",
-          c.productName,
-          "."
-        ] })
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-4", children: c.checkboxItems.map((s) => {
-        const d = `legal-checkbox-${s.id}`;
-        return /* @__PURE__ */ a(
-          "label",
-          {
-            htmlFor: d,
-            className: "flex items-start gap-3 cursor-pointer group",
-            children: [
-              /* @__PURE__ */ t(
-                R,
-                {
-                  id: d,
-                  checked: y[s.id] || !1,
-                  onCheckedChange: () => D(s.id),
-                  className: "mt-1"
-                }
-              ),
-              /* @__PURE__ */ t("span", { className: "text-sm leading-relaxed transition-colors", children: s.content })
-            ]
-          },
-          s.id
-        );
-      }) })
-    ] }),
-    /* @__PURE__ */ a(w, { className: "flex-row gap-3 sm:justify-center mt-6", children: [
-      /* @__PURE__ */ t(
-        p,
+  return b.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,
+    {
+      waitingForSignatureText: i.waitingForSignatureText,
+      theme: h
+    }
+  ) }) }) : /* @__PURE__ */ e(c, { open: a, children: /* @__PURE__ */ t(m, { className: "max-w-2xl max-h-[90vh] overflow-y-auto w-[calc(100%-2rem)] sm:w-full", children: [
+    /* @__PURE__ */ e(
+      P,
+      {
+        config: i,
+        checkedItems: f,
+        onCheckedChange: y,
+        hasV2Signature: g,
+        showTitle: !0,
+        theme: h
+      }
+    ),
+    /* @__PURE__ */ t(x, { className: "flex-row gap-3 sm:justify-center mt-6", children: [
+      /* @__PURE__ */ e(
+        d,
         {
           variant: "outline",
-          onClick: e,
-          disabled: o,
+          onClick: s,
+          disabled: n,
           className: "flex-1 sm:flex-none sm:min-w-[140px]",
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ t(
-        p,
+      /* @__PURE__ */ e(
+        d,
         {
-          onClick: P,
-          disabled: !C || o,
+          onClick: A,
+          disabled: !N || n,
           className: "flex-1 sm:flex-none sm:min-w-[140px]",
-          children: o ? /* @__PURE__ */ a(l, { children: [
-            /* @__PURE__ */ t(b, { size: 16, className: "mr-2 animate-spin" }),
+          children: n ? /* @__PURE__ */ t(C, { children: [
+            /* @__PURE__ */ e(v, { size: 16, className: "mr-2 animate-spin" }),
             "Signing..."
-          ] }) : c.agreeButtonText || "Agree & Connect"
+          ] }) : i.agreeButtonText || "Agree & Connect"
         }
       )
     ] })
   ] }) });
 }
-function i(r, e) {
-  return /* @__PURE__ */ t(
-    k,
-    {
-      href: r,
-      external: !0,
-      className: "text-primary underline hover:text-primary/80",
-      children: e
-    }
-  );
-}
-function v(r, e, n) {
-  const o = {
-    id: "consent",
-    content: /* @__PURE__ */ a(l, { children: [
-      "I agree to the",
-      " ",
-      i(e.termsOfService, "Terms of Service"),
-      " and acknowledge the ",
-      i(e.privacyNotice, "Privacy Notice"),
-      ". I have read the",
-      " ",
-      i(e.riskDisclosure, "Risk Disclosure Statement"),
-      " and I voluntarily assume all risks described in it."
-    ] })
-  }, m = /* @__PURE__ */ a(l, { children: [
-    "Any use of and/or interaction with the ",
-    r,
-    " is subject to the",
-    " ",
-    i(e.termsOfService, "Terms of Service"),
-    " and",
-    " ",
-    i(e.privacyNotice, "Privacy Notice"),
-    ", and acceptance of risks described in the",
-    " ",
-    i(e.riskDisclosure, "Risk Disclosure Statement"),
-    "."
-  ] });
-  return r === "Permissionless Interface" ? {
-    productName: r,
-    notificationText: m,
-    checkboxItems: [o],
-    agreeButtonText: n?.agreeButtonText
-  } : r === "Permissionless Safe" ? {
-    productName: r,
-    notificationText: m,
-    checkboxItems: [o],
-    agreeButtonText: n?.agreeButtonText
-  } : {
-    productName: r,
-    notificationText: /* @__PURE__ */ a(l, { children: [
-      "By accessing or using ",
-      r,
-      ", I agree to the",
-      " ",
-      i(e.termsOfService, "Terms of Service"),
-      " and confirm that I have read and understood the",
-      " ",
-      i(e.privacyNotice, "Privacy Notice"),
-      " and",
-      " ",
-      i(e.riskDisclosure, "Risk Disclosure Statement"),
-      "."
-    ] }),
-    checkboxItems: [
-      {
-        id: "terms",
-        content: /* @__PURE__ */ a(l, { children: [
-          "I agree to the",
-          " ",
-          i(e.termsOfService, "Terms of Service"),
-          " and acknowledge the",
-          " ",
-          i(e.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__ */ a(l, { children: [
-          "I acknowledge that the ",
-          r,
-          ", 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",
-          " ",
-          i(e.riskDisclosure, "Risk Disclosure Statement"),
-          " ",
-          "and I voluntarily assume all risks described in it."
-        ] })
-      }
-    ],
-    agreeButtonText: n?.agreeButtonText
-  };
-}
-function q(r, e) {
-  return v("Permissionless Interface", r, e);
-}
-function J(r, e) {
-  return v("Permissionless Safe", r, e);
-}
-function K(r, e) {
-  return v("Gearbox App", r, e);
-}
 function M({
-  open: r,
-  onClose: e,
-  termsOfServiceLink: n
+  open: a,
+  onClose: s,
+  termsOfServiceLink: r
 }) {
-  return /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-lg", children: [
-    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(g, { className: "flex items-center justify-center gap-2 text-destructive", children: [
-      /* @__PURE__ */ t(T, { icon: I, className: "size-5" }),
+  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" }),
       "Access Restricted"
     ] }) }),
-    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ t(h, { className: "text-center", children: "Your access to our web application has been restricted as part of our compliance screening process. Our automated system has identified potential risks associated with your wallet, which led to this action." }),
-      /* @__PURE__ */ t(h, { className: "text-center", children: "Please be aware that this screening outcome is final. We do not offer an appeal process or individual case reviews. Additionally, we do not perform manual assessments and are unable to override this restriction." }),
-      n && /* @__PURE__ */ a(h, { className: "text-center", children: [
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(o, { className: "text-center", children: "Your access to our web application has been restricted as part of our compliance screening process. Our automated system has identified potential risks associated with your wallet, which led to this action." }),
+      /* @__PURE__ */ e(o, { className: "text-center", children: "Please be aware that this screening outcome is final. We do not offer an appeal process or individual case reviews. Additionally, we do not perform manual assessments and are unable to override this restriction." }),
+      r && /* @__PURE__ */ t(o, { className: "text-center", children: [
         "This restriction applies to your use of the web application. For more details, please review the",
         " ",
-        /* @__PURE__ */ a(
-          k,
+        /* @__PURE__ */ t(
+          I,
           {
-            href: n,
+            href: r,
             external: !0,
             className: "text-primary underline hover:text-primary/80 inline-flex items-center gap-1",
             children: [
               "Terms of Service",
-              /* @__PURE__ */ t(A, { size: 12, className: "size-3" })
+              /* @__PURE__ */ e(k, { size: 12, className: "size-3" })
             ]
           }
         ),
         "."
       ] })
     ] }),
-    /* @__PURE__ */ t(w, { className: "sm:justify-center mt-4", children: /* @__PURE__ */ t(p, { variant: "outline", onClick: e, children: "Close" }) })
+    /* @__PURE__ */ e(x, { className: "sm:justify-center mt-4", children: /* @__PURE__ */ e(d, { variant: "outline", onClick: s, children: "Close" }) })
   ] }) });
 }
 export {
   M as BlockedRegionDialog,
-  $ as LegalAgreementDialog,
-  K as createGearboxAppConfig,
-  v as createLegalAgreementConfig,
-  q as createPermissionlessInterfaceConfig,
-  J as createPermissionlessSafeConfig
+  K as LegalAgreementDialog
 };

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

@@ -0,0 +1,22 @@
+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";
+function f({
+  href: r,
+  children: e,
+  theme: n = "default"
+}) {
+  return n === "gearboxV3" ? /* @__PURE__ */ t(i, { href: r, variant: "underlined", size: "unset", color: "main", external: !0, children: e }) : /* @__PURE__ */ t(
+    a,
+    {
+      href: r,
+      external: !0,
+      className: o({ theme: n }),
+      children: e
+    }
+  );
+}
+export {
+  f as LegalAgreementLink
+};

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

@@ -0,0 +1,130 @@
+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 { 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";
+}
+function T({
+  config: a,
+  checkedItems: i,
+  onCheckedChange: n,
+  hasV2Signature: r,
+  showTitle: c,
+  checkboxIdPrefix: o,
+  theme: e
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      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 }),
+        r ? /* @__PURE__ */ s("div", { className: f({ theme: e }), children: [
+          /* @__PURE__ */ l(
+            N,
+            {
+              icon: u,
+              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}.` })
+        ] }) : null,
+        /* @__PURE__ */ s("div", { className: v({ theme: e }), children: [
+          a.checkboxListTitle ? /* @__PURE__ */ l(
+            "div",
+            {
+              className: A({ theme: e }),
+              children: a.checkboxListTitle
+            }
+          ) : null,
+          a.checkboxItems.map((t) => {
+            const d = `${o}-${t.id}`, m = i[t.id] || !1;
+            return e === "gearboxV3" ? /* @__PURE__ */ l(
+              "div",
+              {
+                className: x({ theme: e }),
+                children: /* @__PURE__ */ l(
+                  b,
+                  {
+                    id: d,
+                    checked: m,
+                    onChange: () => n(t.id),
+                    boxAlign: "flex-start",
+                    size: "lg",
+                    color: "secondary",
+                    children: /* @__PURE__ */ l(
+                      "div",
+                      {
+                        className: g({
+                          theme: e
+                        }),
+                        children: t.content
+                      }
+                    )
+                  }
+                )
+              },
+              t.id
+            ) : /* @__PURE__ */ s(
+              "label",
+              {
+                htmlFor: d,
+                className: x({ theme: e }),
+                children: [
+                  /* @__PURE__ */ l(
+                    h,
+                    {
+                      id: d,
+                      checked: m,
+                      onCheckedChange: () => n(t.id),
+                      className: "mt-1"
+                    }
+                  ),
+                  /* @__PURE__ */ l(
+                    "span",
+                    {
+                      className: g({ theme: e }),
+                      children: t.content
+                    }
+                  )
+                ]
+              },
+              t.id
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+function $({
+  config: a,
+  checkedItems: i,
+  onCheckedChange: n,
+  hasV2Signature: r = !1,
+  showTitle: c = !1,
+  checkboxIdPrefix: o = "legal-checkbox",
+  theme: e = "default"
+}) {
+  return /* @__PURE__ */ l(
+    T,
+    {
+      config: a,
+      checkedItems: i,
+      onCheckedChange: n,
+      hasV2Signature: r,
+      showTitle: c,
+      checkboxIdPrefix: o,
+      theme: e
+    }
+  );
+}
+export {
+  $ as LegalAgreementPanel,
+  P as LegalAgreementPanelTest
+};

package/dist/esm/components/legal-agreement/legal-agreement-theme.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
+};