@sampleapp.ai/sdk 1.0.28 → 1.0.30

package/dist/components/sandbox/guardian/ui/markdown.js

@@ -0,0 +1,786 @@
+/* eslint-disable */
+//@ts-nocheck
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { cn } from "../../../../lib/utils";
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeRaw from "rehype-raw";
+// import remarkMdx from "remark-mdx"; // Import remark-mdx
+import React from "react";
+import { CodeGroup } from "./markdown/code-group";
+import { CodeBlock } from "./markdown/code-group/code-block";
+import { Accordion } from "./markdown/accordion-group/accordion";
+import { AccordionGroup } from "./markdown/accordion-group";
+import { CalloutCheck } from "./markdown/callout/callout-check";
+import { CalloutError } from "./markdown/callout/callout-error";
+import { CalloutInfo } from "./markdown/callout/callout-info";
+import { CalloutNote } from "./markdown/callout/callout-note";
+import { CalloutTip } from "./markdown/callout/callout-tip";
+import { CalloutWarning } from "./markdown/callout/callout-warning";
+import { CardGroup } from "./markdown/card-group";
+import { Card } from "./markdown/card-group/card";
+import CodeFocusSection from "@/components/sandbox/guardian/code-focus-section";
+// Stub components for components that don't exist in SDK
+const ButtonFileServer = ({ title, description, filePath, feature, fileContent, color, }) => {
+    return null; // Stub - not implemented in SDK
+};
+const ToggleFileServer = ({ title, description, filePath, feature, fileContent, color, }) => {
+    return null; // Stub - not implemented in SDK
+};
+const ToggleIframeUrl = ({ title, description, newUrl, feature, color, useVm, groupId, preloadedVmUrl, }) => {
+    return null; // Stub - not implemented in SDK
+};
+const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl }) => {
+    return null; // Stub - not implemented in SDK
+};
+const createId = (text) => {
+    return text
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/(^-|-$)/g, "");
+};
+export const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className);
+export const Markdown = ({ children, className, isRestricted, showToc, themeColor }) => {
+    const headingRenderer = (level) => {
+        return (_a) => {
+            var _b, _c;
+            var { children: headerChildren, node } = _a, props = __rest(_a, ["children", "node"]);
+            const text = String(headerChildren);
+            const id = createId(text);
+            const isFirstElement = ((_c = (_b = node === null || node === void 0 ? void 0 : node.position) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.offset) === 0;
+            const HeadingClasses = {
+                1: cn("scroll-m-20 text-3xl font-bold tracking-tight lg:text-3xl mb-7 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-16"),
+                2: cn("scroll-m-20 text-2xl font-bold tracking-tight mb-7 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-14"),
+                3: cn("scroll-m-20 text-xl font-bold tracking-tight mb-6 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-10"),
+                4: cn("scroll-m-20 text-lg font-bold tracking-tight mb-6 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-10"),
+            };
+            const Tag = `h${level}`;
+            return (React.createElement(Tag, Object.assign({ id: id, className: HeadingClasses[level] }, props),
+                React.createElement("a", { href: `#${id}`, className: "no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400" }, headerChildren)));
+        };
+    };
+    // Wrapper for CodeFocusSection to handle HTML attributes from react-markdown
+    const CodeFocusSectionWrapper = (_a) => {
+        var { children, filepath, filerange, title, description, themecolor, className } = _a, props = __rest(_a, ["children", "filepath", "filerange", "title", "description", "themecolor", "className"]);
+        // Parse lineRange from string format like "10-30" or "10"
+        let lineRange;
+        if (filerange) {
+            const parts = filerange.split("-");
+            if (parts.length === 2) {
+                lineRange = {
+                    start: parseInt(parts[0], 10),
+                    end: parseInt(parts[1], 10),
+                };
+            }
+            else if (parts.length === 1) {
+                lineRange = {
+                    start: parseInt(parts[0], 10),
+                };
+            }
+        }
+        if (!filepath || !title) {
+            return React.createElement("div", { className: className }, children);
+        }
+        // Use provided themecolor from HTML attribute, or fall back to component's themeColor prop, or default to blue
+        const color = themecolor || themeColor || "#3b82f6";
+        return (React.createElement("div", { className: className },
+            React.createElement(CodeFocusSection, { filePath: filepath, lineRange: lineRange, title: title, description: description, themeColor: color }, children)));
+    };
+    // Wrapper for ButtonFileServer to handle HTML attributes from react-markdown
+    const ButtonFileServerWrapper = (_a) => {
+        var { children, title, description, filepath, feature, filecontent, color, className } = _a, props = __rest(_a, ["children", "title", "description", "filepath", "feature", "filecontent", "color", "className"]);
+        if (!title ||
+            !description ||
+            !filepath ||
+            !feature ||
+            !filecontent ||
+            !color) {
+            return React.createElement("div", { className: className }, children);
+        }
+        return (React.createElement("div", { className: className },
+            React.createElement(ButtonFileServer, { title: title, description: description, filePath: filepath, feature: feature, fileContent: filecontent, color: color }),
+            children));
+    };
+    // Wrapper for ToggleFileServer to handle HTML attributes from react-markdown
+    const ToggleFileServerWrapper = (_a) => {
+        var { children, title, description, filepath, feature, filecontent, color, className } = _a, props = __rest(_a, ["children", "title", "description", "filepath", "feature", "filecontent", "color", "className"]);
+        if (!title ||
+            !description ||
+            !filepath ||
+            !feature ||
+            !filecontent ||
+            !color) {
+            return React.createElement("div", { className: className }, children);
+        }
+        return (React.createElement("div", { className: className },
+            React.createElement(ToggleFileServer, { title: title, description: description, filePath: filepath, feature: feature, fileContent: filecontent, color: color }),
+            children));
+    };
+    // Wrapper for ToggleIframeUrl to handle HTML attributes from react-markdown
+    const ToggleIframeUrlWrapper = (_a) => {
+        var { children, title, description, newurl, feature, color, usevm, groupid, preloadedvmurl, className } = _a, props = __rest(_a, ["children", "title", "description", "newurl", "feature", "color", "usevm", "groupid", "preloadedvmurl", "className"]);
+        if (!title || !description || !newurl || !feature || !color) {
+            return React.createElement("div", { className: className }, children);
+        }
+        // Convert usevm string to boolean
+        const useVmBoolean = usevm === "true" || usevm === "1";
+        return (React.createElement("div", { className: className },
+            React.createElement(ToggleIframeUrl, { title: title, description: description, newUrl: newurl, feature: feature, color: color, useVm: useVmBoolean, groupId: groupid, preloadedVmUrl: preloadedvmurl }),
+            children));
+    };
+    // Wrapper for DownloadAndOpenButtons to handle HTML attributes from react-markdown
+    const DownloadAndOpenButtonsWrapper = (_a) => {
+        var { children, downloadurl, themecolor, giturl, className } = _a, props = __rest(_a, ["children", "downloadurl", "themecolor", "giturl", "className"]);
+        if (!downloadurl || !themecolor) {
+            return React.createElement("div", { className: className }, children);
+        }
+        return (React.createElement("div", { className: cn("my-6", className) },
+            React.createElement(DownloadAndOpenButtons, { downloadUrl: downloadurl, themeColor: themecolor, gitUrl: giturl }),
+            children));
+    };
+    const sharedComponents = {
+        codegroup: CodeGroup, // For <codegroup>
+        codeblock: CodeBlock, // For <codeblock>
+        accordiongroup: AccordionGroup, // For <accordiongroup>
+        accordion: Accordion, // For <accordion>
+        check: CalloutCheck, // For <calloutcheck>
+        error: CalloutError, // For <callouterror>
+        info: CalloutInfo, // For <calloutinfo>
+        note: CalloutNote, // For <calloutnote>
+        tip: CalloutTip, // For <callouttip>
+        warning: CalloutWarning, // For <calloutwarning>
+        cardgroup: CardGroup, // For <cardgroup>
+        card: Card, // For <card>
+        codefocussection: CodeFocusSectionWrapper, // For <codefocussection>
+        buttonfileserver: ButtonFileServerWrapper, // For <buttonfileserver>
+        togglefileserver: ToggleFileServerWrapper, // For <togglefileserver>
+        toggleiframeurl: ToggleIframeUrlWrapper, // For <toggleiframeurl>
+        downloadandopenbuttons: DownloadAndOpenButtonsWrapper, // For <downloadandopenbuttons>
+        // icon: Icon, // For <icon> //TODO: HIDE THIS FIX SOME ICON ISSUES
+        p(_a) {
+            var _b, _c;
+            var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+            const isFirstElement = ((_c = (_b = node === null || node === void 0 ? void 0 : node.position) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.offset) === 0;
+            // Check if children contain known block-level components, to prevent hydration error.
+            const blockComponents = [
+                CalloutCheck,
+                CalloutError,
+                CalloutInfo,
+                CalloutNote,
+                CalloutTip,
+                CalloutWarning,
+            ];
+            const hasBlockElementChild = React.Children.toArray(children).some((child) => React.isValidElement(child) &&
+                blockComponents.includes(child.type));
+            if (hasBlockElementChild) {
+                // If there's a block-level component, don't wrap in <p>, just return a <div> or fragment
+                return React.createElement("div", Object.assign({}, props), children);
+            }
+            return (React.createElement("div", Object.assign({ className: cn("leading-6 text-zinc-700 dark:text-zinc-300 text-sm", !isFirstElement && "mt-5") }, props), children));
+        },
+        // List
+        li({ children }) {
+            return (React.createElement("li", { className: "text-zinc-700 dark:text-zinc-300 leading-7 text-sm" }, children));
+        },
+        // Unordered List
+        ul({ children }) {
+            return (React.createElement("ul", { className: "my-4 ml-6 list-disc marker:text-zinc-400" }, children));
+        },
+        // Ordered List
+        ol({ children }) {
+            return (React.createElement("ol", { className: "my-4 ml-6 list-decimal marker:text-zinc-400" }, children));
+        },
+        a(_a) {
+            var { children, href } = _a, props = __rest(_a, ["children", "href"]);
+            const isInternal = href === null || href === void 0 ? void 0 : href.startsWith("#");
+            return (React.createElement("a", Object.assign({ className: cn("font-medium transition-colors underline underline-offset-4", isInternal
+                    ? "text-zinc-900 hover:text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-300"
+                    : "text-[var(--colors-primary)] hover:text-[var(--colors-primary)]"), target: isInternal ? undefined : "_blank", rel: isInternal ? undefined : "noopener noreferrer", href: href }, props), children));
+        },
+        // "> This is ÷a quote"
+        blockquote({ children }) {
+            return (React.createElement("blockquote", { className: "mt-4 border-l-4 border-zinc-200 dark:border-zinc-800 pl-6 italic text-zinc-800 dark:text-zinc-200" }, children));
+        },
+        code(_a) {
+            var _b, _c;
+            var { node, inline, className, children } = _a, props = __rest(_a, ["node", "inline", "className", "children"]);
+            const match = /language-(\w+)/.exec(className || "");
+            const isInline = ((_b = node.position) === null || _b === void 0 ? void 0 : _b.start.line) === ((_c = node.position) === null || _c === void 0 ? void 0 : _c.end.line);
+            // If it's an inline code block, render it as a small block by default
+            // so it visually separates from the surrounding text instead of sitting inline.
+            if (isInline) {
+                return (React.createElement("code", Object.assign({ className: cn("inline-block text-[var(--colors-primary)] text-sm bg-[var(--colors-secondary)] px-2 py-1 rounded-lg mt-2", className) }, props), children));
+            }
+            // Extract language and title
+            const language = (match === null || match === void 0 ? void 0 : match[1]) || "";
+            // Look for title in the className (format: language-js title.js)
+            const parts = (className === null || className === void 0 ? void 0 : className.split(" ")) || [];
+            const title = parts[1] || `${language}`;
+            return match ? (React.createElement(CodeBlock, Object.assign({ language: language, value: String(children).trim(), isInsideCodeGroup: false, title: title, className: "my-5" }, props))) : (
+            // <code className={className} {...props}>
+            //   {children}
+            // </code>
+            React.createElement(CodeBlock, Object.assign({ language: "", value: String(children).trim(), isInsideCodeGroup: false, title: "", className: "my-5" }, props)));
+        },
+    };
+    return (React.createElement("div", { className: "mx-auto min-w-0" },
+        React.createElement(MemoizedReactMarkdown, { className: cn("prose prose-slate dark:prose-invert max-w-none", "prose-headings:font-semibold prose-headings:tracking-tight", "[&>*:first-child]:mt-0", "prose-p:leading-7", "prose-li:leading-7", "prose-code:rounded-md prose-code:bg-zinc-100 dark:prose-code:bg-zinc-800 prose-code:px-2 prose-code:py-1", "prose-pre:rounded-lg prose-pre:border prose-pre:border-zinc-200 dark:prose-pre:border-zinc-800", "prose-img:rounded-lg prose-img:border prose-img:border-zinc-200 dark:prose-img:border-zinc-800", "prose-blockquote:border-l-4 prose-blockquote:border-zinc-200 dark:prose-blockquote:border-zinc-800", "prose-table:border prose-table:border-zinc-200 dark:prose-table:border-zinc-800", "prose-a:no-underline hover:prose-a:underline", className), remarkPlugins: [
+                remarkGfm,
+                remarkMath,
+                // add remarkMdx to the remarkPlugins array
+                // remarkMdx,
+            ], rehypePlugins: [rehypeRaw], components: isRestricted
+                ? sharedComponents
+                : Object.assign(Object.assign({}, sharedComponents), { h1: headingRenderer(1), h2: headingRenderer(2), h3: headingRenderer(3), h4: headingRenderer(4), table({ children }) {
+                        return (React.createElement("div", { className: "my-6 w-full overflow-x-auto rounded-lg" },
+                            React.createElement("table", { className: "w-full border-collapse border border-zinc-200 dark:border-zinc-800" }, children)));
+                    },
+                    th({ children }) {
+                        return (React.createElement("th", { className: "border border-zinc-200 dark:border-zinc-800 px-4 py-2 text-left font-semibold bg-zinc-50 dark:bg-zinc-900" }, children));
+                    },
+                    td({ children }) {
+                        return (React.createElement("td", { className: "border border-zinc-200 dark:border-zinc-800 px-4 py-2" }, children));
+                    } }) }, children)));
+};
+// import React, { FC, useEffect, useState } from "react";
+// import { cn } from "@/lib/utils";
+// import { MDXProvider } from "@mdx-js/react";
+// import { evaluate } from "@mdx-js/mdx";
+// import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+// import remarkGfm from "remark-gfm";
+// import remarkMath from "remark-math";
+// import rehypeRaw from "rehype-raw";
+// // Import your custom components
+// import { CodeGroup } from "./markdown/code-group";
+// import { CodeBlock } from "./markdown/code-group/code-block";
+// import { Accordion } from "./markdown/accordion-group/accordion";
+// import { AccordionGroup } from "./markdown/accordion-group";
+// import { CalloutCheck } from "./markdown/callout/callout-check";
+// import { CalloutError } from "./markdown/callout/callout-error";
+// import { CalloutInfo } from "./markdown/callout/callout-info";
+// import { CalloutNote } from "./markdown/callout/callout-note";
+// import { CalloutTip } from "./markdown/callout/callout-tip";
+// import { CalloutWarning } from "./markdown/callout/callout-warning";
+// import { CardGroup } from "./markdown/card-group";
+// import { Card } from "./markdown/card-group/card";
+// import { Icon } from "./markdown/icon";
+// const createId = (text: string) => {
+//   return text
+//     .toLowerCase()
+//     .replace(/[^a-z0-9]+/g, "-")
+//     .replace(/(^-|-$)/g, "");
+// };
+// export const Markdown: FC<{
+//   children: string;
+//   className?: string;
+//   isRestricted?: boolean;
+//   showToc?: boolean;
+// }> = ({ children, className, isRestricted }) => {
+//   const [MDXContent, setMDXContent] = useState<React.ComponentType | null>(
+//     null,
+//   );
+//   useEffect(() => {
+//     let isMounted = true;
+//     (async () => {
+//       try {
+//         const { default: Content } = await evaluate(children, {
+//           jsx,
+//           jsxs,
+//           Fragment,
+//           remarkPlugins: [remarkGfm],
+//           rehypePlugins: [rehypeRaw],
+//         });
+//         if (isMounted) setMDXContent(() => Content);
+//       } catch (err) {
+//         console.error("MDX Evaluation Error:", err); // Log evaluation errors
+//       }
+//     })();
+//     return () => {
+//       isMounted = false;
+//     };
+//   }, [children]);
+//   // Define shared components
+//   const sharedComponents = {
+//     codegroup: CodeGroup,
+//     codeblock: CodeBlock,
+//     accordiongroup: AccordionGroup,
+//     accordion: Accordion,
+//     check: CalloutCheck,
+//     error: CalloutError,
+//     info: CalloutInfo,
+//     note: CalloutNote,
+//     tip: CalloutTip,
+//     warning: CalloutWarning,
+//     cardgroup: CardGroup,
+//     card: Card,
+//     icon: Icon,
+//     p: ({ children, ...props }) => (
+//       <p
+//         className={cn("leading-6 text-zinc-700 dark:text-zinc-300")}
+//         {...props}
+//       >
+//         {children}
+//       </p>
+//     ),
+//     li: ({ children, ...props }) => (
+//       <li className="text-zinc-700 dark:text-zinc-300 leading-7" {...props}>
+//         {children}
+//       </li>
+//     ),
+//     ul: ({ children, ...props }) => (
+//       <ul className="my-4 ml-6 list-disc marker:text-zinc-400" {...props}>
+//         {children}
+//       </ul>
+//     ),
+//     ol: ({ children, ...props }) => (
+//       <ol className="my-4 ml-6 list-decimal marker:text-zinc-400" {...props}>
+//         {children}
+//       </ol>
+//     ),
+//     a: ({ children, href, ...props }) => {
+//       const isInternal = href?.startsWith("#");
+//       return (
+//         <a
+//           className={cn(
+//             "font-medium transition-colors underline-offset-4 hover:underline",
+//             isInternal
+//               ? "text-zinc-900 hover:text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-300"
+//               : "text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300",
+//           )}
+//           target={isInternal ? undefined : "_blank"}
+//           rel={isInternal ? undefined : "noopener noreferrer"}
+//           href={href}
+//           {...props}
+//         >
+//           {children}
+//         </a>
+//       );
+//     },
+//     blockquote: ({ children, ...props }) => (
+//       <blockquote
+//         className="mt-4 border-l-4 border-zinc-200 dark:border-zinc-800 pl-6 italic text-zinc-800 dark:text-zinc-200"
+//         {...props}
+//       >
+//         {children}
+//       </blockquote>
+//     ),
+//     code: ({ children, className, ...props }) => {
+//       const match = /language-(\w+)/.exec(className || "");
+//       const language = match?.[1] || "";
+//       return (
+//         <CodeBlock
+//           language={language}
+//           value={String(children).trim()}
+//           isInsideCodeGroup={false}
+//           {...props}
+//         />
+//       );
+//     },
+//     table: ({ children, ...props }) => (
+//       <div className="my-6 w-full overflow-x-auto rounded-lg">
+//         <table
+//           className="w-full border-collapse border border-zinc-200 dark:border-zinc-800"
+//           {...props}
+//         >
+//           {children}
+//         </table>
+//       </div>
+//     ),
+//     th: ({ children, ...props }) => (
+//       <th
+//         className="border border-zinc-200 dark:border-zinc-800 px-4 py-2 text-left font-semibold bg-zinc-50 dark:bg-zinc-900"
+//         {...props}
+//       >
+//         {children}
+//       </th>
+//     ),
+//     td: ({ children, ...props }) => (
+//       <td
+//         className="border border-zinc-200 dark:border-zinc-800 px-4 py-2"
+//         {...props}
+//       >
+//         {children}
+//       </td>
+//     ),
+//   };
+//   // If not restricted, add headings
+//   const components = isRestricted
+//     ? sharedComponents
+//     : {
+//         ...sharedComponents,
+//         h1: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h1
+//               id={id}
+//               className="scroll-m-20 text-3xl font-bold tracking-tight lg:text-3xl mb-4 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h1>
+//           );
+//         },
+//         h2: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h2
+//               id={id}
+//               className="scroll-m-20 text-2xl font-bold tracking-tight mb-3 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h2>
+//           );
+//         },
+//         h3: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h3
+//               id={id}
+//               className="scroll-m-20 text-xl font-bold tracking-tight mb-3 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h3>
+//           );
+//         },
+//         h4: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h4
+//               id={id}
+//               className="scroll-m-20 text-lg font-bold tracking-tight mb-3 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h4>
+//           );
+//         },
+//       };
+//   return (
+//     <div
+//       className={cn(
+//         "mx-auto min-w-0",
+//         "prose prose-slate dark:prose-invert max-w-none",
+//         "prose-headings:font-semibold prose-headings:tracking-tight",
+//         "[&>*:first-child]:mt-0",
+//         "prose-p:leading-7",
+//         "prose-li:leading-7",
+//         "prose-code:rounded-md prose-code:bg-zinc-100 dark:prose-code:bg-zinc-800 prose-code:px-2 prose-code:py-1",
+//         "prose-pre:rounded-lg prose-pre:border prose-pre:border-zinc-200 dark:prose-pre:border-zinc-800",
+//         "prose-img:rounded-lg prose-img:border prose-img:border-zinc-200 dark:prose-img:border-zinc-800",
+//         "prose-blockquote:border-l-4 prose-blockquote:border-zinc-200 dark:prose-blockquote:border-zinc-800",
+//         "prose-table:border prose-table:border-zinc-200 dark:prose-table:border-zinc-800",
+//         "prose-a:no-underline hover:prose-a:underline",
+//         className,
+//       )}
+//     >
+//       <MDXProvider components={components}>
+//         {/* Render the evaluated component only after it's loaded */}
+//         {MDXContent ? <MDXContent /> : null}
+//       </MDXProvider>
+//     </div>
+//   );
+// };
+//v3
+// import React, { FC, useEffect, useState } from "react";
+// import { cn } from "@/lib/utils";
+// import { MDXProvider } from "@mdx-js/react";
+// import { evaluate } from "@mdx-js/mdx";
+// import * as runtime from "react/jsx-runtime"; // Use the entire runtime
+// import remarkGfm from "remark-gfm";
+// import remarkMath from "remark-math";
+// import rehypeRaw from "rehype-raw";
+// // Import your custom components
+// import { CodeGroup } from "./markdown/code-group";
+// import { CodeBlock } from "./markdown/code-group/code-block";
+// import { Accordion } from "./markdown/accordion-group/accordion";
+// import { AccordionGroup } from "./markdown/accordion-group";
+// import { CalloutCheck } from "./markdown/callout/callout-check";
+// import { CalloutError } from "./markdown/callout/callout-error";
+// import { CalloutInfo } from "./markdown/callout/callout-info";
+// import { CalloutNote } from "./markdown/callout/callout-note";
+// import { CalloutTip } from "./markdown/callout/callout-tip";
+// import { CalloutWarning } from "./markdown/callout/callout-warning";
+// import { CardGroup } from "./markdown/card-group";
+// import { Card } from "./markdown/card-group/card";
+// import { Icon } from "./markdown/icon";
+// const createId = (text: string) => {
+//   return text
+//     .toLowerCase()
+//     .replace(/[^a-z0-9]+/g, "-")
+//     .replace(/(^-|-$)/g, "");
+// };
+// export const Markdown: FC<{
+//   children: string;
+//   className?: string;
+//   isRestricted?: boolean;
+//   showToc?: boolean;
+// }> = ({ children, className, isRestricted }) => {
+//   const [MDXContent, setMDXContent] = useState<React.ComponentType | null>(
+//     null,
+//   );
+//   useEffect(() => {
+//     let isMounted = true;
+//     (async () => {
+//       try {
+//         const { default: Content } = await evaluate(children, {
+//           ...runtime,
+//           remarkPlugins: [remarkGfm, remarkMath],
+//           rehypePlugins: [rehypeRaw],
+//           development: true, // Adds helpful debugging
+//           format: "mdx", // Ensures MDX format
+//         });
+//         if (isMounted) setMDXContent(() => Content);
+//       } catch (err) {
+//         console.error("MDX Evaluation Error:", err); // Log evaluation errors
+//       }
+//     })();
+//     return () => {
+//       isMounted = false;
+//     };
+//   }, [children]);
+//   // Define shared components
+//   const sharedComponents = {
+//     codegroup: CodeGroup,
+//     codeblock: CodeBlock,
+//     accordiongroup: AccordionGroup,
+//     accordion: Accordion,
+//     check: CalloutCheck,
+//     error: CalloutError,
+//     info: CalloutInfo,
+//     note: CalloutNote,
+//     tip: CalloutTip,
+//     warning: CalloutWarning,
+//     cardgroup: CardGroup,
+//     card: Card,
+//     icon: Icon,
+//     p: ({ children, ...props }) => (
+//       <p
+//         className={cn("leading-6 text-zinc-700 dark:text-zinc-300")}
+//         {...props}
+//       >
+//         {children}
+//       </p>
+//     ),
+//     li: ({ children, ...props }) => (
+//       <li className="text-zinc-700 dark:text-zinc-300 leading-7" {...props}>
+//         {children}
+//       </li>
+//     ),
+//     ul: ({ children, ...props }) => (
+//       <ul className="my-4 ml-6 list-disc marker:text-zinc-400" {...props}>
+//         {children}
+//       </ul>
+//     ),
+//     ol: ({ children, ...props }) => (
+//       <ol className="my-4 ml-6 list-decimal marker:text-zinc-400" {...props}>
+//         {children}
+//       </ol>
+//     ),
+//     a: ({ children, href, ...props }) => {
+//       const isInternal = href?.startsWith("#");
+//       return (
+//         <a
+//           className={cn(
+//             "font-medium transition-colors underline-offset-4 hover:underline",
+//             isInternal
+//               ? "text-zinc-900 hover:text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-300"
+//               : "text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300",
+//           )}
+//           target={isInternal ? undefined : "_blank"}
+//           rel={isInternal ? undefined : "noopener noreferrer"}
+//           href={href}
+//           {...props}
+//         >
+//           {children}
+//         </a>
+//       );
+//     },
+//     blockquote: ({ children, ...props }) => (
+//       <blockquote
+//         className="mt-4 border-l-4 border-zinc-200 dark:border-zinc-800 pl-6 italic text-zinc-800 dark:text-zinc-200"
+//         {...props}
+//       >
+//         {children}
+//       </blockquote>
+//     ),
+//     code: ({ children, className, ...props }) => {
+//       const match = /language-(\w+)/.exec(className || "");
+//       const language = match?.[1] || "";
+//       return (
+//         <CodeBlock
+//           language={language}
+//           value={String(children).trim()}
+//           isInsideCodeGroup={false}
+//           {...props}
+//         />
+//       );
+//     },
+//     table: ({ children, ...props }) => (
+//       <div className="my-6 w-full overflow-x-auto rounded-lg">
+//         <table
+//           className="w-full border-collapse border border-zinc-200 dark:border-zinc-800"
+//           {...props}
+//         >
+//           {children}
+//         </table>
+//       </div>
+//     ),
+//     th: ({ children, ...props }) => (
+//       <th
+//         className="border border-zinc-200 dark:border-zinc-800 px-4 py-2 text-left font-semibold bg-zinc-50 dark:bg-zinc-900"
+//         {...props}
+//       >
+//         {children}
+//       </th>
+//     ),
+//     td: ({ children, ...props }) => (
+//       <td
+//         className="border border-zinc-200 dark:border-zinc-800 px-4 py-2"
+//         {...props}
+//       >
+//         {children}
+//       </td>
+//     ),
+//   };
+//   // If not restricted, add headings
+//   const components = isRestricted
+//     ? sharedComponents
+//     : {
+//         ...sharedComponents,
+//         h1: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h1
+//               id={id}
+//               className="scroll-m-20 text-3xl font-bold tracking-tight lg:text-3xl mb-4 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h1>
+//           );
+//         },
+//         h2: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h2
+//               id={id}
+//               className="scroll-m-20 text-2xl font-bold tracking-tight mb-3 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h2>
+//           );
+//         },
+//         h3: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h3
+//               id={id}
+//               className="scroll-m-20 text-xl font-bold tracking-tight mb-3 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h3>
+//           );
+//         },
+//         h4: ({ children, ...props }) => {
+//           const text = String(children);
+//           const id = createId(text);
+//           return (
+//             <h4
+//               id={id}
+//               className="scroll-m-20 text-lg font-bold tracking-tight mb-3 text-zinc-900 dark:text-zinc-50"
+//               {...props}
+//             >
+//               <a
+//                 href={`#${id}`}
+//                 className="no-underline hover:after:content-['#'] hover:after:ml-2 hover:after:text-zinc-400"
+//               >
+//                 {children}
+//               </a>
+//             </h4>
+//           );
+//         },
+//       };
+//   return (
+//     <div
+//       className={cn(
+//         "mx-auto min-w-0",
+//         "prose prose-slate dark:prose-invert max-w-none",
+//         "prose-headings:font-semibold prose-headings:tracking-tight",
+//         "[&>*:first-child]:mt-0",
+//         "prose-p:leading-7",
+//         "prose-li:leading-7",
+//         "prose-code:rounded-md prose-code:bg-zinc-100 dark:prose-code:bg-zinc-800 prose-code:px-2 prose-code:py-1",
+//         "prose-pre:rounded-lg prose-pre:border prose-pre:border-zinc-200 dark:prose-pre:border-zinc-800",
+//         "prose-img:rounded-lg prose-img:border prose-img:border-zinc-200 dark:prose-img:border-zinc-800",
+//         "prose-blockquote:border-l-4 prose-blockquote:border-zinc-200 dark:prose-blockquote:border-zinc-800",
+//         "prose-table:border prose-table:border-zinc-200 dark:prose-table:border-zinc-800",
+//         "prose-a:no-underline hover:prose-a:underline",
+//         className,
+//       )}
+//     >
+//       <MDXProvider components={components}>
+//         {/* Render the evaluated component only after it's loaded */}
+//         {MDXContent ? <MDXContent /> : null}
+//       </MDXProvider>
+//     </div>
+//   );
+// };