@gearbox-protocol/permissionless-ui 1.11.2 → 1.11.4

package/dist/cjs/components/index.cjs

@@ -98,6 +98,7 @@ const components_liquidation_liquidationGraph_liquidationGraph = require('./liqu
 const components_liquidation_liquidationGraphLegend_liquidationGraphLegend = require('./liquidation/liquidation-graph-legend/liquidation-graph-legend.cjs');
 const components_liquidation_liquidationGraphTip_liquidationGraphTip = require('./liquidation/liquidation-graph-tip/liquidation-graph-tip.cjs');
 const components_loaderGuard_loaderGuard = require('./loader-guard/loader-guard.cjs');
+const components_markdownViewer_markdownViewer = require('./markdown-viewer/markdown-viewer.cjs');
 const components_navbar_navbar = require('./navbar/navbar.cjs');
 const components_navbar_navbarIndicatorContext = require('./navbar/navbar-indicator-context.cjs');
 const components_navitem_navitem = require('./navitem/navitem.cjs');
@@ -288,6 +289,7 @@ exports.LiquidationGraph = components_liquidation_liquidationGraph_liquidationGr
 exports.LiquidationGraphLegend = components_liquidation_liquidationGraphLegend_liquidationGraphLegend.LiquidationGraphLegend;
 exports.LiquidationGraphTip = components_liquidation_liquidationGraphTip_liquidationGraphTip.LiquidationGraphTip;
 exports.LoaderGuard = components_loaderGuard_loaderGuard.LoaderGuard;
+exports.MarkdownViewer = components_markdownViewer_markdownViewer.MarkdownViewer;
 exports.Navbar = components_navbar_navbar.Navbar;
 exports.NavbarNav = components_navbar_navbar.NavbarNav;
 exports.navbarVariants = components_navbar_navbar.navbarVariants;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_markdownViewer_markdownViewer = require('./markdown-viewer.cjs');
+
+
+
+exports.MarkdownViewer = components_markdownViewer_markdownViewer.MarkdownViewer;

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

@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const ReactMarkdown = require('react-markdown');
+const remarkGfm = require('remark-gfm');
+require('clsx');
+require('tailwind-merge');
+require('sonner');
+require('@gearbox-protocol/sdk');
+require('../layout/col/col.cjs');
+require('../layout/container/container.cjs');
+require('../layout/footer/footer.cjs');
+require('../layout/grid/grid.cjs');
+require('../layout/header/header.cjs');
+require('../layout/layout/layout.cjs');
+require('../base-link/base-link.cjs');
+const components_layout_pageLayout_pageLayout = require('../layout/page-layout/page-layout.cjs');
+
+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 && typeof children.props === "object" && children.props !== null && "children" in children.props) {
+    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,
+  backButton
+}) {
+  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__ */ jsxRuntime.jsx(components_layout_pageLayout_pageLayout.PageLayout, { title: title || "", backButton, children: /* @__PURE__ */ jsxRuntime.jsx("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        h1: ({ children, ...props }) => {
+          const { id, displayText } = extractCustomId(children);
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "h4",
+            {
+              id,
+              className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
+              ...props,
+              children: displayText
+            }
+          );
+        },
+        p: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "text-muted-foreground mb-4 leading-relaxed",
+            ...props
+          }
+        ),
+        a: ({ href, ...props }) => {
+          const isAnchorLink = href?.startsWith("#");
+          if (isAnchorLink && href) {
+            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "ul",
+          {
+            className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
+            ...props
+          }
+        ),
+        ol: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "ol",
+          {
+            className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
+            ...props
+          }
+        ),
+        li: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ml-4 text-muted-foreground", ...props }),
+        blockquote: ({ ...props }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "code",
+            {
+              className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
+              ...props
+            }
+          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("strong", { className: "font-bold text-foreground", ...props }),
+        em: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: "italic text-foreground", ...props })
+      },
+      children: content
+    }
+  ) }) });
+}
+
+exports.MarkdownViewer = MarkdownViewer;

package/dist/cjs/components/next/index.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const components_auth_signinRequired = require('../auth/signin-required.cjs');
 const components_next_backButton = require('./back-button.cjs');
-const components_next_markdownViewer = require('./markdown-viewer.cjs');
+const components_next_nextMarkdownViewer = require('./next-markdown-viewer.cjs');
 const components_next_siweProvider = require('./siwe-provider.cjs');
 const components_next_tokenIcon = require('./token-icon.cjs');
 
@@ -12,6 +12,6 @@ const components_next_tokenIcon = require('./token-icon.cjs');
 
 exports.SignInRequired = components_auth_signinRequired.SignInRequired;
 exports.BackButton = components_next_backButton.BackButton;
-exports.MarkdownViewer = components_next_markdownViewer.MarkdownViewer;
+exports.NextMarkdownViewer = components_next_nextMarkdownViewer.NextMarkdownViewer;
 exports.SIWEClientProvider = components_next_siweProvider.SIWEClientProvider;
 exports.TokenIcon = components_next_tokenIcon.TokenIcon;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const navigation = require('next/navigation');
+const components_markdownViewer_markdownViewer = require('../markdown-viewer/markdown-viewer.cjs');
+
+function NextMarkdownViewer({
+  content,
+  title,
+  backButtonHref = "/",
+  backButtonText = "Back"
+}) {
+  const router = navigation.useRouter();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_markdownViewer_markdownViewer.MarkdownViewer,
+    {
+      content,
+      title,
+      backButton: {
+        href: backButtonHref,
+        text: backButtonText,
+        onClick: () => router.back()
+      }
+    }
+  );
+}
+
+exports.NextMarkdownViewer = NextMarkdownViewer;

package/dist/cjs/index.cjs

@@ -96,6 +96,7 @@ const components_liquidation_liquidationGraph_liquidationGraph = require('./comp
 const components_liquidation_liquidationGraphLegend_liquidationGraphLegend = require('./components/liquidation/liquidation-graph-legend/liquidation-graph-legend.cjs');
 const components_liquidation_liquidationGraphTip_liquidationGraphTip = require('./components/liquidation/liquidation-graph-tip/liquidation-graph-tip.cjs');
 const components_loaderGuard_loaderGuard = require('./components/loader-guard/loader-guard.cjs');
+const components_markdownViewer_markdownViewer = require('./components/markdown-viewer/markdown-viewer.cjs');
 const components_navbar_navbar = require('./components/navbar/navbar.cjs');
 const components_navbar_navbarIndicatorContext = require('./components/navbar/navbar-indicator-context.cjs');
 const components_navitem_navitem = require('./components/navitem/navitem.cjs');
@@ -306,6 +307,7 @@ exports.LiquidationGraph = components_liquidation_liquidationGraph_liquidationGr
 exports.LiquidationGraphLegend = components_liquidation_liquidationGraphLegend_liquidationGraphLegend.LiquidationGraphLegend;
 exports.LiquidationGraphTip = components_liquidation_liquidationGraphTip_liquidationGraphTip.LiquidationGraphTip;
 exports.LoaderGuard = components_loaderGuard_loaderGuard.LoaderGuard;
+exports.MarkdownViewer = components_markdownViewer_markdownViewer.MarkdownViewer;
 exports.Navbar = components_navbar_navbar.Navbar;
 exports.NavbarNav = components_navbar_navbar.NavbarNav;
 exports.navbarVariants = components_navbar_navbar.navbarVariants;

package/dist/esm/components/index.js

@@ -94,6 +94,7 @@ export { LiquidationGraph } from './liquidation/liquidation-graph/liquidation-gr
 export { LiquidationGraphLegend } from './liquidation/liquidation-graph-legend/liquidation-graph-legend.js';
 export { LiquidationGraphTip } from './liquidation/liquidation-graph-tip/liquidation-graph-tip.js';
 export { LoaderGuard } from './loader-guard/loader-guard.js';
+export { MarkdownViewer } from './markdown-viewer/markdown-viewer.js';
 export { Navbar, NavbarNav, navbarVariants } from './navbar/navbar.js';
 export { NavbarIndicatorProvider, useNavbarIndicator } from './navbar/navbar-indicator-context.js';
 export { NavItem, navitemVariants } from './navitem/navitem.js';

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

@@ -0,0 +1 @@
+export { MarkdownViewer } from './markdown-viewer.js';

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

@@ -0,0 +1,208 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import 'clsx';
+import 'tailwind-merge';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import '../layout/col/col.js';
+import '../layout/container/container.js';
+import '../layout/footer/footer.js';
+import '../layout/grid/grid.js';
+import '../layout/header/header.js';
+import '../layout/layout/layout.js';
+import '../base-link/base-link.js';
+import { PageLayout } from '../layout/page-layout/page-layout.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 && typeof children.props === "object" && children.props !== null && "children" in children.props) {
+    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,
+  backButton
+}) {
+  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, 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/esm/components/next/index.js

@@ -1,5 +1,5 @@
 export { SignInRequired } from '../auth/signin-required.js';
 export { BackButton } from './back-button.js';
-export { MarkdownViewer } from './markdown-viewer.js';
+export { NextMarkdownViewer } from './next-markdown-viewer.js';
 export { SIWEClientProvider } from './siwe-provider.js';
 export { TokenIcon } from './token-icon.js';

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

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRouter } from 'next/navigation';
+import { MarkdownViewer } from '../markdown-viewer/markdown-viewer.js';
+
+function NextMarkdownViewer({
+  content,
+  title,
+  backButtonHref = "/",
+  backButtonText = "Back"
+}) {
+  const router = useRouter();
+  return /* @__PURE__ */ jsx(
+    MarkdownViewer,
+    {
+      content,
+      title,
+      backButton: {
+        href: backButtonHref,
+        text: backButtonText,
+        onClick: () => router.back()
+      }
+    }
+  );
+}
+
+export { NextMarkdownViewer };

package/dist/esm/index.js

@@ -92,6 +92,7 @@ export { LiquidationGraph } from './components/liquidation/liquidation-graph/liq
 export { LiquidationGraphLegend } from './components/liquidation/liquidation-graph-legend/liquidation-graph-legend.js';
 export { LiquidationGraphTip } from './components/liquidation/liquidation-graph-tip/liquidation-graph-tip.js';
 export { LoaderGuard } from './components/loader-guard/loader-guard.js';
+export { MarkdownViewer } from './components/markdown-viewer/markdown-viewer.js';
 export { Navbar, NavbarNav, navbarVariants } from './components/navbar/navbar.js';
 export { NavbarIndicatorProvider, useNavbarIndicator } from './components/navbar/navbar-indicator-context.js';
 export { NavItem, navitemVariants } from './components/navitem/navitem.js';

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

@@ -35,6 +35,7 @@ export * from './label';
 export * from './layout';
 export * from './liquidation';
 export * from './loader-guard';
+export * from './markdown-viewer';
 export * from './navbar';
 export * from './navitem';
 export * from './not-found';

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

@@ -0,0 +1 @@
+export { MarkdownViewer, type MarkdownViewerProps } from './markdown-viewer';

package/dist/types/components/{next → markdown-viewer}/markdown-viewer.d.ts

@@ -1,6 +1,11 @@
 export interface MarkdownViewerProps {
     content: string;
     title?: string;
+    backButton?: {
+        href: string;
+        text?: string;
+        onClick?: () => void;
+    };
 }
 /**
  * MarkdownViewer — component for rendering markdown content with custom styling.
@@ -12,6 +17,10 @@ export interface MarkdownViewerProps {
  * Props:
  * - `content` — markdown content string to render (required).
  * - `title` — optional page title displayed in PageLayout.
+ * - `backButton` — optional back button configuration object:
+ *   - `href` — destination URL for back navigation (required).
+ *   - `text` — custom text label (defaults to "Back" if not provided).
+ *   - `onClick` — optional callback function executed on click.
  *
  * Features:
  * - Custom heading IDs with slugification or custom IDs (e.g., "## Heading {#custom-id}").
@@ -21,11 +30,11 @@ export interface MarkdownViewerProps {
  * - Internal anchor links with smooth scrolling.
  * - External links open in new tab.
  *
- * Note: Wraps content in PageLayout with back button. Uses prose styling with dark theme.
+ * Note: Wraps content in PageLayout. Uses prose styling with dark theme.
  * Automatically handles heading IDs for navigation.
  *
  * Do NOT use MarkdownViewer:
  * - for simple text content (use appropriate text components).
  * - when you need rich text editing (use appropriate rich text editor components).
  */
-export declare function MarkdownViewer({ content, title }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MarkdownViewer({ content, title, backButton, }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,6 @@
  */
 export { SignInRequired } from '../auth/signin-required';
 export { BackButton } from './back-button';
-export { MarkdownViewer } from './markdown-viewer';
+export { NextMarkdownViewer, type NextMarkdownViewerProps, } from './next-markdown-viewer';
 export { SIWEClientProvider } from './siwe-provider';
 export { TokenIcon } from './token-icon';

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

@@ -0,0 +1,23 @@
+export interface NextMarkdownViewerProps {
+    content: string;
+    title?: string;
+    backButtonHref?: string;
+    backButtonText?: string;
+}
+/**
+ * NextMarkdownViewer — Next.js-specific wrapper for MarkdownViewer.
+ *
+ * @usage
+ * Use NextMarkdownViewer in Next.js applications to automatically handle
+ * back navigation using Next.js router.
+ *
+ * Props:
+ * - `content` — markdown content string to render (required).
+ * - `title` — optional page title displayed in PageLayout.
+ * - `backButtonHref` — optional href for back button (defaults to "/").
+ * - `backButtonText` — optional text for back button (defaults to "Back").
+ *
+ * Note: This component requires Next.js and uses "use client" directive.
+ * For non-Next.js applications, use the base MarkdownViewer component instead.
+ */
+export declare function NextMarkdownViewer({ content, title, backButtonHref, backButtonText, }: NextMarkdownViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -32,6 +32,7 @@ export * from './components/label';
 export * from './components/layout';
 export * from './components/liquidation';
 export * from './components/loader-guard';
+export * from './components/markdown-viewer';
 export * from './components/navbar';
 export * from './components/navitem';
 export * from './components/not-found';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",

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

@@ -1,217 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const navigation = require('next/navigation');
-const React = require('react');
-const ReactMarkdown = require('react-markdown');
-const remarkGfm = require('remark-gfm');
-require('clsx');
-require('tailwind-merge');
-require('sonner');
-require('@gearbox-protocol/sdk');
-require('../layout/col/col.cjs');
-require('../layout/container/container.cjs');
-require('../layout/footer/footer.cjs');
-require('../layout/grid/grid.cjs');
-require('../layout/header/header.cjs');
-require('../layout/layout/layout.cjs');
-require('../base-link/base-link.cjs');
-const components_layout_pageLayout_pageLayout = require('../layout/page-layout/page-layout.cjs');
-
-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 && typeof children.props === "object" && children.props !== null && "children" in children.props) {
-    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 = navigation.useRouter();
-  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__ */ jsxRuntime.jsx(
-    components_layout_pageLayout_pageLayout.PageLayout,
-    {
-      title: title || "",
-      backButton: { href: "/", text: "Back", onClick: () => router.back() },
-      children: /* @__PURE__ */ jsxRuntime.jsx("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx(
-        ReactMarkdown,
-        {
-          remarkPlugins: [remarkGfm],
-          components: {
-            h1: ({ children, ...props }) => {
-              const { id, displayText } = extractCustomId(children);
-              return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "h4",
-                {
-                  id,
-                  className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
-                  ...props,
-                  children: displayText
-                }
-              );
-            },
-            p: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: "text-muted-foreground mb-4 leading-relaxed",
-                ...props
-              }
-            ),
-            a: ({ href, ...props }) => {
-              const isAnchorLink = href?.startsWith("#");
-              if (isAnchorLink && href) {
-                return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "ul",
-              {
-                className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
-                ...props
-              }
-            ),
-            ol: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-              "ol",
-              {
-                className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
-                ...props
-              }
-            ),
-            li: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ml-4 text-muted-foreground", ...props }),
-            blockquote: ({ ...props }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "code",
-                {
-                  className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
-                  ...props
-                }
-              ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("strong", { className: "font-bold text-foreground", ...props }),
-            em: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: "italic text-foreground", ...props })
-          },
-          children: content
-        }
-      ) })
-    }
-  );
-}
-
-exports.MarkdownViewer = MarkdownViewer;

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

@@ -1,213 +0,0 @@
-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 'clsx';
-import 'tailwind-merge';
-import 'sonner';
-import '@gearbox-protocol/sdk';
-import '../layout/col/col.js';
-import '../layout/container/container.js';
-import '../layout/footer/footer.js';
-import '../layout/grid/grid.js';
-import '../layout/header/header.js';
-import '../layout/layout/layout.js';
-import '../base-link/base-link.js';
-import { PageLayout } from '../layout/page-layout/page-layout.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 && typeof children.props === "object" && children.props !== null && "children" in children.props) {
-    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 };