@gearbox-protocol/permissionless-ui 1.1.8 → 1.2.1

package/dist/cjs/components/buttons/index.js

@@ -19,6 +19,7 @@ __reExport(buttons_exports, require('./back-button.js'), module.exports);
 __reExport(buttons_exports, require('./button.js'), module.exports);
 __reExport(buttons_exports, require('./copy-button.js'), module.exports);
 __reExport(buttons_exports, require('./external-button.js'), module.exports);
+__reExport(buttons_exports, require('./navigation-button.js'), module.exports);
 __reExport(buttons_exports, require('./tab-button.js'), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -26,5 +27,6 @@ __reExport(buttons_exports, require('./tab-button.js'), module.exports);
   ...require('./button.js'),
   ...require('./copy-button.js'),
   ...require('./external-button.js'),
+  ...require('./navigation-button.js'),
   ...require('./tab-button.js')
 });

package/dist/cjs/components/buttons/navigation-button.js

@@ -0,0 +1,57 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var navigation_button_exports = {};
+__export(navigation_button_exports, {
+  NavigationButton: () => NavigationButton
+});
+module.exports = __toCommonJS(navigation_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_link = __toESM(require("next/link"));
+var import_react = __toESM(require("react"));
+var import_utils = __toESM(require('../../utils/index.js'));
+const NavigationButton = import_react.default.forwardRef(({ href, text, isActive, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_link.default,
+    {
+      href,
+      ref,
+      className: (0, import_utils.default)(
+        "text-foreground px-2 py-1 rounded transition-colors duration-200 ease-in-out ",
+        isActive ? "bg-muted" : "hover:bg-muted"
+      ),
+      ...props,
+      children: text
+    }
+  );
+});
+NavigationButton.displayName = "NavButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigationButton
+});

package/dist/cjs/components/index.js

@@ -27,7 +27,8 @@ __reExport(components_exports, require('./dropdown-menu.js'), module.exports);
 __reExport(components_exports, require('./editable-table/index.js'), module.exports);
 __reExport(components_exports, require('./input.js'), module.exports);
 __reExport(components_exports, require('./label.js'), module.exports);
-__reExport(components_exports, require('./page-layout.js'), module.exports);
+__reExport(components_exports, require('./layout/index.js'), module.exports);
+__reExport(components_exports, require('./markdown-viewer.js'), module.exports);
 __reExport(components_exports, require('./search-bar.js'), module.exports);
 __reExport(components_exports, require('./select.js'), module.exports);
 __reExport(components_exports, require('./signatures/index.js'), module.exports);
@@ -51,7 +52,8 @@ __reExport(components_exports, require('./tooltip.js'), module.exports);
   ...require('./editable-table/index.js'),
   ...require('./input.js'),
   ...require('./label.js'),
-  ...require('./page-layout.js'),
+  ...require('./layout/index.js'),
+  ...require('./markdown-viewer.js'),
   ...require('./search-bar.js'),
   ...require('./select.js'),
   ...require('./signatures/index.js'),

package/dist/cjs/components/layout/app-logo.js

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var app_logo_exports = {};
+__export(app_logo_exports, {
+  AppLogo: () => AppLogo
+});
+module.exports = __toCommonJS(app_logo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_image = __toESM(require("next/image"));
+var import_utils = __toESM(require('../../utils/index.js'));
+function AppLogo({
+  appName,
+  size = "default"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_utils.default)(
+        "font-bold text-foreground flex items-center gap-2",
+        size === "default" ? "text-xl" : "text-md"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image.default,
+          {
+            src: "https://static.gearbox.fi/logo/logo_monochrome_white@2x.png",
+            alt: "Gearbox Protocol",
+            width: size === "default" ? 120 : 100,
+            height: size === "default" ? 24 : 20,
+            priority: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold italic", children: appName })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppLogo
+});

package/dist/cjs/components/layout/footer.js

@@ -0,0 +1,116 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var footer_exports = {};
+__export(footer_exports, {
+  Footer: () => Footer
+});
+module.exports = __toCommonJS(footer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_app_logo = require('./app-logo.js');
+var import_legal_disclaimer = require('./legal-disclaimer.js');
+function FooterLink({ href, text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      href,
+      className: "text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm",
+      children: text
+    }
+  );
+}
+function FooterLinkSection({
+  title,
+  links
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1 md:items-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-4", children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterLink, { href: link.href, text: link.text }),
+      index < links.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: "\u2022" })
+    ] }, link.href)) })
+  ] });
+}
+function Footer({
+  appName,
+  legalReferences
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: "border-t border-gray-800 bg-background px-4 py-8 mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "max-w-7xl mx-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 items-top", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_logo.AppLogo, { appName, size: "small" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_legal_disclaimer.LegalDisclaimer, { hrefs: legalReferences })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FooterLinkSection,
+        {
+          title: "Legal",
+          links: [
+            {
+              href: legalReferences.termsOfService,
+              text: "Terms of Service"
+            },
+            {
+              href: legalReferences.privacyNotice,
+              text: "Privacy Notice"
+            },
+            {
+              href: legalReferences.riskDisclosure,
+              text: "Risk Disclosure"
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FooterLinkSection,
+        {
+          title: "Developers",
+          links: [
+            {
+              href: "https://docs.gearbox.fi/gearbox-permissionless-doc",
+              text: "Documentation"
+            },
+            {
+              href: "https://docs.gearbox.finance/risk-and-security/audits-bug-bounty",
+              text: "Audits"
+            },
+            {
+              href: "https://github.com/Gearbox-protocol",
+              text: "GitHub"
+            }
+          ]
+        }
+      )
+    ] })
+  ] }) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Footer
+});

package/dist/cjs/components/layout/header.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var header_exports = {};
+__export(header_exports, {
+  Header: () => Header
+});
+module.exports = __toCommonJS(header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_buttons = require('../buttons/index.js');
+var import_app_logo = require('./app-logo.js');
+function Header({
+  appName,
+  navigation,
+  connectKitButton
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "sticky top-0 z-50 border-b border-gray-800 bg-background px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_app_logo.AppLogo, { appName }),
+    navigation.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "hidden md:flex space-x-4", children: navigation.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_buttons.NavigationButton, { ...item }, item.href)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-4", children: connectKitButton })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Header
+});

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

@@ -0,0 +1,30 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var layout_exports = {};
+module.exports = __toCommonJS(layout_exports);
+__reExport(layout_exports, require('./app-logo.js'), module.exports);
+__reExport(layout_exports, require('./footer.js'), module.exports);
+__reExport(layout_exports, require('./header.js'), module.exports);
+__reExport(layout_exports, require('./legal-disclaimer.js'), module.exports);
+__reExport(layout_exports, require('./page-layout.js'), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require('./app-logo.js'),
+  ...require('./footer.js'),
+  ...require('./header.js'),
+  ...require('./legal-disclaimer.js'),
+  ...require('./page-layout.js')
+});

package/dist/cjs/components/layout/legal-disclaimer.js

@@ -0,0 +1,75 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var legal_disclaimer_exports = {};
+__export(legal_disclaimer_exports, {
+  LegalDisclaimer: () => LegalDisclaimer
+});
+module.exports = __toCommonJS(legal_disclaimer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_link = __toESM(require("next/link"));
+function LegalDisclaimer({ hrefs }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-muted-foreground max-w-md", children: [
+    "Any use of and/or interaction with the Permissionless Interface is subject to the",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_link.default,
+      {
+        href: hrefs.termsOfService,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Terms of Service"
+      }
+    ),
+    " ",
+    "and",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_link.default,
+      {
+        href: hrefs.privacyNotice,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Privacy Notice"
+      }
+    ),
+    ", and acceptance of risks described in the",
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_link.default,
+      {
+        href: hrefs.riskDisclosure,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Risk Disclosure Statement"
+      }
+    ),
+    "."
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LegalDisclaimer
+});

package/dist/cjs/components/{page-layout.js → layout/page-layout.js}

@@ -22,8 +22,8 @@ __export(page_layout_exports, {
 });
 module.exports = __toCommonJS(page_layout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_back_button = require('./buttons/back-button.js');
-var import_card = require('./card.js');
+var import_back_button = require('../buttons/back-button.js');
+var import_card = require('../card.js');
 function PageLayout({
   children,
   title,

package/dist/cjs/components/markdown-viewer.js

@@ -0,0 +1,235 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var markdown_viewer_exports = {};
+__export(markdown_viewer_exports, {
+  MarkdownViewer: () => MarkdownViewer
+});
+module.exports = __toCommonJS(markdown_viewer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_navigation = require("next/navigation");
+var import_react = require("react");
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_layout = require('./layout/index.js');
+function slugify(text) {
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+function getTextContent(children) {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextContent).join("");
+  }
+  if (children && typeof children === "object" && "props" in children) {
+    return getTextContent(children.props.children);
+  }
+  return "";
+}
+function extractCustomId(children) {
+  const text = getTextContent(children);
+  const customIdMatch = text.match(/\{#([a-z0-9-]+)\}\s*$/i);
+  if (customIdMatch) {
+    const id = customIdMatch[1];
+    if (typeof children === "string") {
+      const displayText = text.replace(/\s*\{#[a-z0-9-]+\}\s*$/i, "").trim();
+      return { id, displayText };
+    }
+    return { id, displayText: children };
+  }
+  return { id: slugify(text), displayText: children };
+}
+function MarkdownViewer({ content, title }) {
+  const router = (0, import_navigation.useRouter)();
+  (0, import_react.useEffect)(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      setTimeout(() => {
+        const element = document.getElementById(hash.slice(1));
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      }, 100);
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_layout.PageLayout,
+    {
+      title: title || "",
+      backButton: { href: "/", text: "Back", onClick: () => router.back() },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_markdown.default,
+        {
+          remarkPlugins: [import_remark_gfm.default],
+          components: {
+            h1: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "h1",
+                {
+                  id,
+                  className: "text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h2: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "h2",
+                {
+                  id,
+                  className: "text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h3: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "h3",
+                {
+                  id,
+                  className: "text-xl font-semibold text-foreground mt-5 mb-2 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h4: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "h4",
+                {
+                  id,
+                  className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            p: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "p",
+              {
+                className: "text-muted-foreground mb-4 leading-relaxed",
+                ...props
+              }
+            ),
+            a: ({ href, ...props }) => {
+              const isAnchorLink = href?.startsWith("#");
+              if (isAnchorLink && href) {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "a",
+                  {
+                    href,
+                    className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      const targetId = href.slice(1);
+                      const element = document.getElementById(targetId);
+                      if (element) {
+                        element.scrollIntoView({
+                          behavior: "smooth",
+                          block: "start"
+                        });
+                        window.history.pushState(null, "", href);
+                      }
+                    },
+                    ...props
+                  }
+                );
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "a",
+                {
+                  href,
+                  className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  ...props
+                }
+              );
+            },
+            ul: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "ul",
+              {
+                className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
+                ...props
+              }
+            ),
+            ol: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "ol",
+              {
+                className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
+                ...props
+              }
+            ),
+            li: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "ml-4 text-muted-foreground", ...props }),
+            blockquote: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "blockquote",
+              {
+                className: "border-l-4 border-gray-700 pl-4 my-4 italic text-muted-foreground",
+                ...props
+              }
+            ),
+            code: ({ className, ...props }) => {
+              const isInline = !className?.includes("language-");
+              return isInline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "code",
+                {
+                  className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
+                  ...props
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "code",
+                {
+                  className: "block bg-gray-800 text-gray-200 p-4 rounded-lg my-4 font-mono text-sm overflow-x-auto",
+                  ...props
+                }
+              );
+            },
+            strong: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "font-bold text-foreground", ...props }),
+            em: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { className: "italic text-foreground", ...props })
+          },
+          children: content
+        }
+      ) })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MarkdownViewer
+});

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

@@ -2,4 +2,5 @@ export * from "./back-button.js";
 export * from "./button.js";
 export * from "./copy-button.js";
 export * from "./external-button.js";
+export * from "./navigation-button.js";
 export * from "./tab-button.js";

package/dist/esm/components/buttons/navigation-button.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import React from "react";
+import cn from "../../utils/index.js";
+const NavigationButton = React.forwardRef(({ href, text, isActive, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href,
+      ref,
+      className: cn(
+        "text-foreground px-2 py-1 rounded transition-colors duration-200 ease-in-out ",
+        isActive ? "bg-muted" : "hover:bg-muted"
+      ),
+      ...props,
+      children: text
+    }
+  );
+});
+NavigationButton.displayName = "NavButton";
+export {
+  NavigationButton
+};

package/dist/esm/components/index.js

@@ -10,7 +10,8 @@ export * from "./dropdown-menu.js";
 export * from "./editable-table/index.js";
 export * from "./input.js";
 export * from "./label.js";
-export * from "./page-layout.js";
+export * from "./layout/index.js";
+export * from "./markdown-viewer.js";
 export * from "./search-bar.js";
 export * from "./select.js";
 export * from "./signatures/index.js";

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import cn from "../../utils/index.js";
+function AppLogo({
+  appName,
+  size = "default"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "font-bold text-foreground flex items-center gap-2",
+        size === "default" ? "text-xl" : "text-md"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: "https://static.gearbox.fi/logo/logo_monochrome_white@2x.png",
+            alt: "Gearbox Protocol",
+            width: size === "default" ? 120 : 100,
+            height: size === "default" ? 24 : 20,
+            priority: true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "font-bold italic", children: appName })
+      ]
+    }
+  );
+}
+export {
+  AppLogo
+};

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

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AppLogo } from "./app-logo.js";
+import { LegalDisclaimer } from "./legal-disclaimer.js";
+function FooterLink({ href, text }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: "text-muted-foreground hover:text-foreground transition-colors duration-200 text-sm",
+      children: text
+    }
+  );
+}
+function FooterLinkSection({
+  title,
+  links
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 md:items-end", children: [
+    /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: links.map((link, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(FooterLink, { href: link.href, text: link.text }),
+      index < links.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "\u2022" })
+    ] }, link.href)) })
+  ] });
+}
+function Footer({
+  appName,
+  legalReferences
+}) {
+  return /* @__PURE__ */ jsx("footer", { className: "border-t border-gray-800 bg-background px-4 py-8 mt-auto", children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 items-top", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
+      /* @__PURE__ */ jsx(AppLogo, { appName, size: "small" }),
+      /* @__PURE__ */ jsx(LegalDisclaimer, { hrefs: legalReferences })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 h-full justify-between", children: [
+      /* @__PURE__ */ jsx(
+        FooterLinkSection,
+        {
+          title: "Legal",
+          links: [
+            {
+              href: legalReferences.termsOfService,
+              text: "Terms of Service"
+            },
+            {
+              href: legalReferences.privacyNotice,
+              text: "Privacy Notice"
+            },
+            {
+              href: legalReferences.riskDisclosure,
+              text: "Risk Disclosure"
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FooterLinkSection,
+        {
+          title: "Developers",
+          links: [
+            {
+              href: "https://docs.gearbox.fi/gearbox-permissionless-doc",
+              text: "Documentation"
+            },
+            {
+              href: "https://docs.gearbox.finance/risk-and-security/audits-bug-bounty",
+              text: "Audits"
+            },
+            {
+              href: "https://github.com/Gearbox-protocol",
+              text: "GitHub"
+            }
+          ]
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  Footer
+};

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

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NavigationButton } from "../buttons/index.js";
+import { AppLogo } from "./app-logo.js";
+function Header({
+  appName,
+  navigation,
+  connectKitButton
+}) {
+  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-50 border-b border-gray-800 bg-background px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx(AppLogo, { appName }),
+    navigation.length > 0 && /* @__PURE__ */ jsx("nav", { className: "hidden md:flex space-x-4", children: navigation.map((item) => /* @__PURE__ */ jsx(NavigationButton, { ...item }, item.href)) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: connectKitButton })
+  ] }) });
+}
+export {
+  Header
+};

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

@@ -0,0 +1,5 @@
+export * from "./app-logo.js";
+export * from "./footer.js";
+export * from "./header.js";
+export * from "./legal-disclaimer.js";
+export * from "./page-layout.js";

package/dist/esm/components/layout/legal-disclaimer.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+function LegalDisclaimer({ hrefs }) {
+  return /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground max-w-md", children: [
+    "Any use of and/or interaction with the Permissionless Interface is subject to the",
+    " ",
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: hrefs.termsOfService,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Terms of Service"
+      }
+    ),
+    " ",
+    "and",
+    " ",
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: hrefs.privacyNotice,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Privacy Notice"
+      }
+    ),
+    ", and acceptance of risks described in the",
+    " ",
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: hrefs.riskDisclosure,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Risk Disclosure Statement"
+      }
+    ),
+    "."
+  ] });
+}
+export {
+  LegalDisclaimer
+};

package/dist/esm/components/{page-layout.js → layout/page-layout.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BackButton } from "./buttons/back-button.js";
-import { Card } from "./card.js";
+import { BackButton } from "../buttons/back-button.js";
+import { Card } from "../card.js";
 function PageLayout({
   children,
   title,

package/dist/esm/components/markdown-viewer.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { PageLayout } from "./layout/index.js";
+function slugify(text) {
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+function getTextContent(children) {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextContent).join("");
+  }
+  if (children && typeof children === "object" && "props" in children) {
+    return getTextContent(children.props.children);
+  }
+  return "";
+}
+function extractCustomId(children) {
+  const text = getTextContent(children);
+  const customIdMatch = text.match(/\{#([a-z0-9-]+)\}\s*$/i);
+  if (customIdMatch) {
+    const id = customIdMatch[1];
+    if (typeof children === "string") {
+      const displayText = text.replace(/\s*\{#[a-z0-9-]+\}\s*$/i, "").trim();
+      return { id, displayText };
+    }
+    return { id, displayText: children };
+  }
+  return { id: slugify(text), displayText: children };
+}
+function MarkdownViewer({ content, title }) {
+  const router = useRouter();
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      setTimeout(() => {
+        const element = document.getElementById(hash.slice(1));
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      }, 100);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      title: title || "",
+      backButton: { href: "/", text: "Back", onClick: () => router.back() },
+      children: /* @__PURE__ */ jsx("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          components: {
+            h1: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  id,
+                  className: "text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h2: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id,
+                  className: "text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h3: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  id,
+                  className: "text-xl font-semibold text-foreground mt-5 mb-2 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            h4: ({ children, ...props }) => {
+              const { id, displayText } = extractCustomId(children);
+              return /* @__PURE__ */ jsx(
+                "h4",
+                {
+                  id,
+                  className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
+                  ...props,
+                  children: displayText
+                }
+              );
+            },
+            p: ({ ...props }) => /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-muted-foreground mb-4 leading-relaxed",
+                ...props
+              }
+            ),
+            a: ({ href, ...props }) => {
+              const isAnchorLink = href?.startsWith("#");
+              if (isAnchorLink && href) {
+                return /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href,
+                    className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      const targetId = href.slice(1);
+                      const element = document.getElementById(targetId);
+                      if (element) {
+                        element.scrollIntoView({
+                          behavior: "smooth",
+                          block: "start"
+                        });
+                        window.history.pushState(null, "", href);
+                      }
+                    },
+                    ...props
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href,
+                  className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  ...props
+                }
+              );
+            },
+            ul: ({ ...props }) => /* @__PURE__ */ jsx(
+              "ul",
+              {
+                className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
+                ...props
+              }
+            ),
+            ol: ({ ...props }) => /* @__PURE__ */ jsx(
+              "ol",
+              {
+                className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
+                ...props
+              }
+            ),
+            li: ({ ...props }) => /* @__PURE__ */ jsx("li", { className: "ml-4 text-muted-foreground", ...props }),
+            blockquote: ({ ...props }) => /* @__PURE__ */ jsx(
+              "blockquote",
+              {
+                className: "border-l-4 border-gray-700 pl-4 my-4 italic text-muted-foreground",
+                ...props
+              }
+            ),
+            code: ({ className, ...props }) => {
+              const isInline = !className?.includes("language-");
+              return isInline ? /* @__PURE__ */ jsx(
+                "code",
+                {
+                  className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
+                  ...props
+                }
+              ) : /* @__PURE__ */ jsx(
+                "code",
+                {
+                  className: "block bg-gray-800 text-gray-200 p-4 rounded-lg my-4 font-mono text-sm overflow-x-auto",
+                  ...props
+                }
+              );
+            },
+            strong: ({ ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-bold text-foreground", ...props }),
+            em: ({ ...props }) => /* @__PURE__ */ jsx("em", { className: "italic text-foreground", ...props })
+          },
+          children: content
+        }
+      ) })
+    }
+  );
+}
+export {
+  MarkdownViewer
+};

package/dist/types/components/buttons/index.d.ts

@@ -2,4 +2,5 @@ export * from "./back-button";
 export * from "./button";
 export * from "./copy-button";
 export * from "./external-button";
+export * from "./navigation-button";
 export * from "./tab-button";

package/dist/types/components/buttons/navigation-button.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface NavigationButtonProps {
+    href: string;
+    text: string;
+    isActive: boolean;
+}
+declare const NavigationButton: React.ForwardRefExoticComponent<NavigationButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavigationButton };

package/dist/types/components/index.d.ts

@@ -10,7 +10,8 @@ export * from "./dropdown-menu";
 export * from "./editable-table";
 export * from "./input";
 export * from "./label";
-export * from "./page-layout";
+export * from "./layout";
+export * from "./markdown-viewer";
 export * from "./search-bar";
 export * from "./select";
 export * from "./signatures";

package/dist/types/components/layout/app-logo.d.ts

@@ -0,0 +1,4 @@
+export declare function AppLogo({ appName, size, }: {
+    appName: string;
+    size?: "default" | "small";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/footer.d.ts

@@ -0,0 +1,5 @@
+import { type LegalReferences } from "./legal-disclaimer";
+export declare function Footer({ appName, legalReferences, }: {
+    appName: string;
+    legalReferences: LegalReferences;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/header.d.ts

@@ -0,0 +1,6 @@
+import { type NavigationButtonProps } from "../buttons";
+export declare function Header({ appName, navigation, connectKitButton, }: {
+    appName: string;
+    navigation: NavigationButtonProps[];
+    connectKitButton: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/layout/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./app-logo";
+export * from "./footer";
+export * from "./header";
+export * from "./legal-disclaimer";
+export * from "./page-layout";

package/dist/types/components/layout/legal-disclaimer.d.ts

@@ -0,0 +1,8 @@
+export interface LegalReferences {
+    termsOfService: string;
+    privacyNotice: string;
+    riskDisclosure: string;
+}
+export declare function LegalDisclaimer({ hrefs }: {
+    hrefs: LegalReferences;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/markdown-viewer.d.ts

@@ -0,0 +1,6 @@
+interface MarkdownViewerProps {
+    content: string;
+    title?: string;
+}
+export declare function MarkdownViewer({ content, title }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.1.8",
+  "version": "1.2.1",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -52,6 +52,9 @@
     "next": "15.5.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-markdown": "^9.0.3",
+    "react-markdown-math": "^1.0.2",
+    "remark-gfm": "^4.0.0",
     "sonner": "^1.7.2",
     "styled-jsx": "^5.1.6",
     "tailwind-merge": "^2.6.0",