@mintlify/msft-sdk 1.1.15 → 1.1.17

package/dist/components/content-components/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","sources":["../../../src/components/content-components/code-block.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from \"react\";\nimport Prism from \"prismjs\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-markdown.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-powershell.js\";\nimport { getNodeText } from \"../../utils/get-node-text\";\nimport { capitalize } from \"../../utils/string\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  Copy20Regular,\n  ClipboardCheckmarkRegular,\n} from \"@fluentui/react-icons\";\n\nconst SUPPORTED_CLIPBOARD_CONTENT_TYPES = [\"image/png\", \"text/plain\"];\n\n// Hook for clipboard operations\nexport function useCopyToClipboard() {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const copy = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 2000);\n    } catch (error) {\n      console.error(\"Failed to copy to clipboard:\", error);\n    }\n  };\n\n  const copyBlob = async (blob: Blob, contentType: string) => {\n    try {\n      // image/png, text/plain, and text/html are the only filetypes supported in the chromium\n      // clipboard - however, text/html crashes chrome for some reason\n      if (SUPPORTED_CLIPBOARD_CONTENT_TYPES.includes(contentType)) {\n        const buffer = await blob.arrayBuffer();\n        const newBlob = new Blob([buffer], { type: contentType });\n        const clipboardItem = new ClipboardItem({\n          [contentType]: newBlob,\n        });\n        await navigator.clipboard.write([clipboardItem]);\n        setIsCopied(true);\n        setTimeout(() => setIsCopied(false), 2000);\n      } else {\n        // Fallback to text copy for unsupported types\n        const text = await blob.text();\n        await copy(text);\n      }\n    } catch (error) {\n      console.error(\"Failed to copy blob to clipboard:\", error);\n      // Fallback to text copy if blob copy fails\n      try {\n        const text = await blob.text();\n        await copy(text);\n      } catch (fallbackError) {\n        console.error(\"Failed to copy as text fallback:\", fallbackError);\n      }\n    }\n  };\n\n  return { isCopied, copy, copyBlob };\n}\n\n// Base copy icon button component\ninterface CopyIconButtonProps {\n  onClick: () => void;\n  isCopied: boolean;\n  showTooltip?: boolean;\n}\n\nexport function CopyIconButton({ onClick, isCopied, showTooltip = true }: CopyIconButtonProps) {\n  return (\n    <div className=\"mint:relative\">\n      {showTooltip && isCopied && (\n        <div className=\"mint:absolute mint:bottom-[calc(100%+0.5rem)] mint:left-1/2 mint:-translate-x-1/2 mint:bg-white mint:dark:bg-[#1a1a1a] mint:text-[#171717] mint:dark:text-[#fafafa] mint:px-2.5 mint:py-1.5 mint:rounded-md mint:text-xs mint:font-medium mint:whitespace-nowrap mint:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)] mint:dark:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.3),0_2px_4px_-1px_rgba(0,0,0,0.2)] mint:z-10 mint:animate-[fadeIn_0.15s_ease-out] mint:after:content-[''] mint:after:absolute mint:after:top-full mint:after:left-1/2 mint:after:-translate-x-1/2 mint:after:w-0 mint:after:h-0 mint:after:border-l-[6px] mint:after:border-l-transparent mint:after:border-r-[6px] mint:after:border-r-transparent mint:after:border-t-[6px] mint:after:border-t-white mint:dark:after:border-t-[#1a1a1a]\">\n          Copied!\n        </div>\n      )}\n      <button\n        onClick={onClick}\n        className=\"mint:flex mint:items-center mint:gap-1.5 mint:px-2 mint:py-1 mint:text-xs mint:text-[#737373] mint:dark:text-[#a3a3a3] mint:rounded mint:transition-colors mint:duration-150 mint:border-none mint:bg-transparent mint:cursor-pointer mint:hover:text-[#9263f1] mint:dark:hover:text-[#c9aaf9]\"\n        aria-label={isCopied ? \"Copied\" : \"Copy code\"}\n      >\n        {isCopied ? (\n          <ClipboardCheckmarkRegular className=\"mint:w-5 mint:h-5 mint:text-[#737373] mint:dark:text-[#a3a3a3]\" />\n        ) : (\n          <Copy20Regular className=\"mint:w-5 mint:h-5\" />\n        )}\n      </button>\n    </div>\n  );\n}\n\n// Convenience component that handles text copying\ninterface CopyToClipboardButtonProps {\n  textToCopy: string;\n  showTooltip?: boolean;\n}\n\nexport function CopyToClipboardButton({ textToCopy, showTooltip = true }: CopyToClipboardButtonProps) {\n  const { isCopied, copy } = useCopyToClipboard();\n\n  const handleCopy = () => {\n    copy(textToCopy);\n  };\n\n  return <CopyIconButton onClick={handleCopy} isCopied={isCopied} showTooltip={showTooltip} />;\n}\n\n// Convenience component that handles blob/data copying\ninterface CopyDataToClipboardButtonProps {\n  data: {\n    type: 'image' | 'audio' | 'video' | 'other';\n    blob: Blob;\n    contentType?: string;\n    content?: string;\n  };\n  showTooltip?: boolean;\n}\n\nexport function CopyDataToClipboardButton({ data, showTooltip = true }: CopyDataToClipboardButtonProps) {\n  const { isCopied, copy, copyBlob } = useCopyToClipboard();\n\n  const handleCopy = () => {\n    // Check if we can copy as blob (for images, etc.)\n    if (data.contentType && SUPPORTED_CLIPBOARD_CONTENT_TYPES.includes(data.contentType)) {\n      copyBlob(data.blob, data.contentType);\n    } else if (data.type === 'other' && data.content) {\n      // For text content, copy as text\n      copy(data.content);\n    } else {\n      console.error('Unsupported content type for clipboard');\n    }\n  };\n\n  return <CopyIconButton onClick={handleCopy} isCopied={isCopied} showTooltip={showTooltip} />;\n}\n\ninterface CodeBlockProps {\n  children: React.ReactNode;\n  className?: string;\n  language?: string;\n  fileName?: string;\n  // Support for copying blobs (images, etc.)\n  blob?: Blob;\n  contentType?: string;\n}\n\nexport function CodeBlock({\n  children,\n  className,\n  fileName,\n  language,\n  blob,\n  contentType,\n}: CodeBlockProps) {\n  const [highlightedCode, setHighlightedCode] = useState<string>(\"\");\n  const { isCopied, copy, copyBlob } = useCopyToClipboard();\n  const lang = language || className?.replace(/^language-/, \"\") || \"text\";\n  const codeText = getNodeText(children);\n  const showContainer = !!fileName;\n\n  const isSSRHighlighted = React.useMemo(() => {\n    if (typeof children !== \"object\" || children == null) {\n      return false;\n    }\n\n    const childrenArray = Array.isArray(children) ? children : [children];\n    for (const child of childrenArray) {\n      if (\n        typeof child === \"object\" &&\n        child != null &&\n        \"props\" in child &&\n        child.props?.children\n      ) {\n        const codeChildren = Array.isArray(child.props.children)\n          ? child.props.children\n          : [child.props.children];\n\n        for (const codeChild of codeChildren) {\n          if (\n            typeof codeChild === \"object\" &&\n            codeChild != null &&\n            \"props\" in codeChild &&\n            codeChild.props?.className\n          ) {\n            return true;\n          }\n        }\n      }\n    }\n    return false;\n  }, [children]);\n\n  useEffect(() => {\n    if (isSSRHighlighted) {\n      return;\n    }\n\n    try {\n      const grammar = Prism.languages[lang] || Prism.languages.plaintext;\n      const html = Prism.highlight(codeText, grammar, lang);\n      setHighlightedCode(html);\n    } catch (error) {\n      console.error(\"Failed to highlight code:\", error);\n      setHighlightedCode(codeText);\n    }\n  }, [codeText, lang, isSSRHighlighted]);\n\n  const handleCopy = () => {\n    // If blob and contentType are provided, use blob copying\n    if (blob && contentType) {\n      copyBlob(blob, contentType);\n    } else {\n      // Otherwise, use text copying\n      copy(codeText);\n    }\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line local/enforce-cn-classname\n      className={\n        showContainer\n          ? \"flex flex-col gap-2 mt-4 mb-4 border border-[#e5e5e5] dark:border-[#262626] pt-2.5 px-2 pb-2 rounded-xl overflow-hidden\"\n          : undefined\n      }\n    >\n      {fileName && (\n        <span className=\"mint:text-sm mint:font-medium mint:px-2\">\n          {fileName}\n        </span>\n      )}\n      <div className=\"not-prose mint:relative mint:rounded-xl mint:bg-[#f5f5f5] mint:dark:bg-[#141414]\">\n        <div className=\"mint:flex mint:items-center mint:justify-between mint:px-4 mint:pt-2\">\n          <span className=\"mint:text-xs mint:font-medium mint:text-[#737373] mint:dark:text-[#a3a3a3]\">\n            {capitalize(lang)}\n          </span>\n          <CopyIconButton onClick={handleCopy} isCopied={isCopied} />\n        </div>\n        <div className=\"mint:code-scrollbar mint:overflow-x-auto\">\n          <pre className=\"mint:px-4 mint:pb-3 mint:pt-2 mint:m-0 mint:whitespace-pre mint:text-sm\">\n            {isSSRHighlighted ? (\n              <code\n                className={cn(\n                  `language-${lang}`,\n                  \"mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]\"\n                )}\n              >\n                {children}\n              </code>\n            ) : highlightedCode ? (\n              <code\n                className={cn(\n                  `language-${lang}`,\n                  \"mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]\"\n                )}\n                dangerouslySetInnerHTML={{ __html: highlightedCode }}\n              />\n            ) : (\n              <code\n                className={cn(\n                  `language-${lang}`,\n                  \"mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]\"\n                )}\n              >\n                {codeText}\n              </code>\n            )}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["SUPPORTED_CLIPBOARD_CONTENT_TYPES","useCopyToClipboard","isCopied","setIsCopied","useState","copy","text","error","blob","contentType","buffer","newBlob","clipboardItem","fallbackError","CopyIconButton","onClick","showTooltip","jsxs","jsx","ClipboardCheckmarkRegular","Copy20Regular","CodeBlock","children","className","fileName","language","highlightedCode","setHighlightedCode","copyBlob","lang","codeText","getNodeText","showContainer","isSSRHighlighted","React","childrenArray","child","_a","codeChildren","codeChild","_b","useEffect","grammar","Prism","html","handleCopy","capitalize","cn"],"mappings":"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"}
+{"version":3,"file":"code-block.js","sources":["../../../src/components/content-components/code-block.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from \"react\";\nimport Prism from \"prismjs\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-markdown.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-powershell.js\";\nimport { getNodeText } from \"../../utils/get-node-text\";\nimport { capitalize } from \"../../utils/string\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  Copy20Regular,\n  ClipboardCheckmarkRegular,\n} from \"@fluentui/react-icons\";\n\nconst SUPPORTED_CLIPBOARD_CONTENT_TYPES = [\"image/png\", \"text/plain\"];\n\n// Hook for clipboard operations\nexport function useCopyToClipboard() {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const copy = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 2000);\n    } catch (error) {\n      console.error(\"Failed to copy to clipboard:\", error);\n    }\n  };\n\n  const copyBlob = async (blob: Blob, contentType: string) => {\n    try {\n      // image/png, text/plain, and text/html are the only filetypes supported in the chromium\n      // clipboard - however, text/html crashes chrome for some reason\n      if (SUPPORTED_CLIPBOARD_CONTENT_TYPES.includes(contentType)) {\n        const buffer = await blob.arrayBuffer();\n        const newBlob = new Blob([buffer], { type: contentType });\n        const clipboardItem = new ClipboardItem({\n          [contentType]: newBlob,\n        });\n        await navigator.clipboard.write([clipboardItem]);\n        setIsCopied(true);\n        setTimeout(() => setIsCopied(false), 2000);\n      } else {\n        // Fallback to text copy for unsupported types\n        const text = await blob.text();\n        await copy(text);\n      }\n    } catch (error) {\n      console.error(\"Failed to copy blob to clipboard:\", error);\n      // Fallback to text copy if blob copy fails\n      try {\n        const text = await blob.text();\n        await copy(text);\n      } catch (fallbackError) {\n        console.error(\"Failed to copy as text fallback:\", fallbackError);\n      }\n    }\n  };\n\n  return { isCopied, copy, copyBlob };\n}\n\n// Base copy icon button component\ninterface CopyIconButtonProps {\n  onClick: () => void;\n  isCopied: boolean;\n  showTooltip?: boolean;\n}\n\nexport function CopyIconButton({ onClick, isCopied, showTooltip = true }: CopyIconButtonProps) {\n  return (\n    <div className=\"mint:relative\">\n      {showTooltip && isCopied && (\n        <div className=\"mint:absolute mint:bottom-[calc(100%+0.5rem)] mint:left-1/2 mint:-translate-x-1/2 mint:bg-white mint:dark:bg-[#1a1a1a] mint:text-[#171717] mint:dark:text-[#fafafa] mint:px-2.5 mint:py-1.5 mint:rounded-md mint:text-xs mint:font-medium mint:whitespace-nowrap mint:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)] mint:dark:shadow-[0_4px_6px_-1px_rgba(0,0,0,0.3),0_2px_4px_-1px_rgba(0,0,0,0.2)] mint:z-10 mint:animate-[fadeIn_0.15s_ease-out] mint:after:content-[''] mint:after:absolute mint:after:top-full mint:after:left-1/2 mint:after:-translate-x-1/2 mint:after:w-0 mint:after:h-0 mint:after:border-l-[6px] mint:after:border-l-transparent mint:after:border-r-[6px] mint:after:border-r-transparent mint:after:border-t-[6px] mint:after:border-t-white mint:dark:after:border-t-[#1a1a1a]\">\n          Copied!\n        </div>\n      )}\n      <button\n        onClick={onClick}\n        className=\"mint:flex mint:items-center mint:gap-1.5 mint:px-2 mint:py-1 mint:text-xs mint:text-[#737373] mint:dark:text-[#a3a3a3] mint:rounded mint:transition-colors mint:duration-150 mint:border-none mint:bg-transparent mint:cursor-pointer mint:hover:text-[#9263f1] mint:dark:hover:text-[#c9aaf9]\"\n        aria-label={isCopied ? \"Copied\" : \"Copy code\"}\n      >\n        {isCopied ? (\n          <ClipboardCheckmarkRegular className=\"mint:w-5 mint:h-5 mint:text-[#737373] mint:dark:text-[#a3a3a3]\" />\n        ) : (\n          <Copy20Regular className=\"mint:w-5 mint:h-5\" />\n        )}\n      </button>\n    </div>\n  );\n}\n\n// Convenience component that handles text copying\ninterface CopyToClipboardButtonProps {\n  textToCopy: string;\n  showTooltip?: boolean;\n}\n\nexport function CopyToClipboardButton({ textToCopy, showTooltip = true }: CopyToClipboardButtonProps) {\n  const { isCopied, copy } = useCopyToClipboard();\n\n  const handleCopy = () => {\n    copy(textToCopy);\n  };\n\n  return <CopyIconButton onClick={handleCopy} isCopied={isCopied} showTooltip={showTooltip} />;\n}\n\n// Convenience component that handles blob/data copying\ninterface CopyDataToClipboardButtonProps {\n  data: {\n    type: 'image' | 'audio' | 'video' | 'other';\n    blob: Blob;\n    contentType?: string;\n    content?: string;\n  };\n  showTooltip?: boolean;\n}\n\nexport function CopyDataToClipboardButton({ data, showTooltip = true }: CopyDataToClipboardButtonProps) {\n  const { isCopied, copy, copyBlob } = useCopyToClipboard();\n\n  const handleCopy = () => {\n    // Check if we can copy as blob (for images, etc.)\n    if (data.contentType && SUPPORTED_CLIPBOARD_CONTENT_TYPES.includes(data.contentType)) {\n      copyBlob(data.blob, data.contentType);\n    } else if (data.type === 'other' && data.content) {\n      // For text content, copy as text\n      copy(data.content);\n    } else {\n      console.error('Unsupported content type for clipboard');\n    }\n  };\n\n  return <CopyIconButton onClick={handleCopy} isCopied={isCopied} showTooltip={showTooltip} />;\n}\n\ninterface CodeBlockProps {\n  children: React.ReactNode;\n  className?: string;\n  language?: string;\n  fileName?: string;\n  // Support for copying blobs (images, etc.)\n  blob?: Blob;\n  contentType?: string;\n}\n\nexport function CodeBlock({\n  children,\n  className,\n  fileName,\n  language,\n  blob,\n  contentType,\n}: CodeBlockProps) {\n  const [highlightedCode, setHighlightedCode] = useState<string>(\"\");\n  const { isCopied, copy, copyBlob } = useCopyToClipboard();\n  const lang = language || className?.replace(/^language-/, \"\") || \"text\";\n  const codeText = getNodeText(children);\n  const showContainer = !!fileName;\n\n  const isSSRHighlighted = React.useMemo(() => {\n    if (typeof children !== \"object\" || children == null) {\n      return false;\n    }\n\n    const childrenArray = Array.isArray(children) ? children : [children];\n    for (const child of childrenArray) {\n      if (\n        typeof child === \"object\" &&\n        child != null &&\n        \"props\" in child &&\n        child.props?.children\n      ) {\n        const codeChildren = Array.isArray(child.props.children)\n          ? child.props.children\n          : [child.props.children];\n\n        for (const codeChild of codeChildren) {\n          if (\n            typeof codeChild === \"object\" &&\n            codeChild != null &&\n            \"props\" in codeChild &&\n            codeChild.props?.className\n          ) {\n            return true;\n          }\n        }\n      }\n    }\n    return false;\n  }, [children]);\n\n  useEffect(() => {\n    if (isSSRHighlighted) {\n      return;\n    }\n\n    try {\n      const grammar = Prism.languages[lang] || Prism.languages.plaintext;\n      const html = Prism.highlight(codeText, grammar, lang);\n      setHighlightedCode(html);\n    } catch (error) {\n      console.error(\"Failed to highlight code:\", error);\n      setHighlightedCode(codeText);\n    }\n  }, [codeText, lang, isSSRHighlighted]);\n\n  const handleCopy = () => {\n    // If blob and contentType are provided, use blob copying\n    if (blob && contentType) {\n      copyBlob(blob, contentType);\n    } else {\n      // Otherwise, use text copying\n      copy(codeText);\n    }\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line local/enforce-cn-classname\n      className={\n        showContainer\n          ? \"flex flex-col gap-2 mt-4 mb-4 border border-[#e5e5e5] dark:border-[#262626] pt-2.5 px-2 pb-2 rounded-xl overflow-hidden\"\n          : undefined\n      }\n    >\n      <div className=\"not-prose mint:relative mint:rounded-xl mint:bg-[#f5f5f5] mint:dark:bg-[#141414]\">\n        <div className=\"mint:code-scrollbar mint:overflow-x-auto\">\n          <pre className=\"mint:px-4 mint:pb-3 mint:pt-2 mint:m-0 mint:whitespace-pre mint:text-sm\">\n            {isSSRHighlighted ? (\n              <code\n                className={cn(\n                  `language-${lang}`,\n                  \"mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]\"\n                )}\n              >\n                {children}\n              </code>\n            ) : highlightedCode ? (\n              <code\n                className={cn(\n                  `language-${lang}`,\n                  \"mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]\"\n                )}\n                dangerouslySetInnerHTML={{ __html: highlightedCode }}\n              />\n            ) : (\n              <code\n                className={cn(\n                  `language-${lang}`,\n                  \"mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]\"\n                )}\n              >\n                {codeText}\n              </code>\n            )}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["SUPPORTED_CLIPBOARD_CONTENT_TYPES","useCopyToClipboard","isCopied","setIsCopied","useState","copy","text","error","blob","contentType","buffer","newBlob","clipboardItem","fallbackError","CopyIconButton","onClick","showTooltip","jsxs","jsx","ClipboardCheckmarkRegular","Copy20Regular","CopyToClipboardButton","textToCopy","CodeBlock","children","className","fileName","language","highlightedCode","setHighlightedCode","lang","codeText","getNodeText","showContainer","isSSRHighlighted","React","childrenArray","child","_a","codeChildren","codeChild","_b","useEffect","grammar","Prism","html","cn"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAMA,IAAoC,CAAC,aAAa,YAAY;AAG7D,SAASC,IAAqB;AACnC,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAO,OAAOC,MAAiB;AACnC,QAAI;AACF,YAAM,UAAU,UAAU,UAAUA,CAAI,GACxCH,EAAY,EAAI,GAChB,WAAW,MAAMA,EAAY,EAAK,GAAG,GAAI;AAAA,IAC3C,SAASI,GAAO;AACd,cAAQ,MAAM,gCAAgCA,CAAK;AAAA,IACrD;AAAA,EACF;AAgCA,SAAO,EAAE,UAAAL,GAAU,MAAAG,GAAM,UA9BR,OAAOG,GAAYC,MAAwB;AAC1D,QAAI;AAGF,UAAIT,EAAkC,SAASS,CAAW,GAAG;AAC3D,cAAMC,IAAS,MAAMF,EAAK,YAAA,GACpBG,IAAU,IAAI,KAAK,CAACD,CAAM,GAAG,EAAE,MAAMD,GAAa,GAClDG,IAAgB,IAAI,cAAc;AAAA,UACtC,CAACH,CAAW,GAAGE;AAAA,QAAA,CAChB;AACD,cAAM,UAAU,UAAU,MAAM,CAACC,CAAa,CAAC,GAC/CT,EAAY,EAAI,GAChB,WAAW,MAAMA,EAAY,EAAK,GAAG,GAAI;AAAA,MAC3C,OAAO;AAEL,cAAMG,IAAO,MAAME,EAAK,KAAA;AACxB,cAAMH,EAAKC,CAAI;AAAA,MACjB;AAAA,IACF,SAASC,GAAO;AACd,cAAQ,MAAM,qCAAqCA,CAAK;AAExD,UAAI;AACF,cAAMD,IAAO,MAAME,EAAK,KAAA;AACxB,cAAMH,EAAKC,CAAI;AAAA,MACjB,SAASO,GAAe;AACtB,gBAAQ,MAAM,oCAAoCA,CAAa;AAAA,MACjE;AAAA,IACF;AAAA,EACF,EAEyB;AAC3B;AASO,SAASC,EAAe,EAAE,SAAAC,GAAS,UAAAb,GAAU,aAAAc,IAAc,MAA6B;AAC7F,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,iBACZ,UAAA;AAAA,IAAAD,KAAed,KACd,gBAAAgB,EAAC,OAAA,EAAI,WAAU,0yBAAyyB,UAAA,WAExzB;AAAA,IAEF,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAAH;AAAA,QACA,WAAU;AAAA,QACV,cAAYb,IAAW,WAAW;AAAA,QAEjC,UAAAA,sBACEiB,GAAA,EAA0B,WAAU,kEAAiE,IAEtG,gBAAAD,EAACE,GAAA,EAAc,WAAU,oBAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjD,GACF;AAEJ;AAQO,SAASC,EAAsB,EAAE,YAAAC,GAAY,aAAAN,IAAc,MAAoC;AACpG,QAAM,EAAE,UAAAd,GAAU,MAAAG,EAAA,IAASJ,EAAA;AAM3B,SAAO,gBAAAiB,EAACJ,GAAA,EAAe,SAJJ,MAAM;AACvB,IAAAT,EAAKiB,CAAU;AAAA,EACjB,GAE4C,UAAApB,GAAoB,aAAAc,GAA0B;AAC5F;AAyCO,SAASO,EAAU;AAAA,EACxB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAnB;AAAA,EACA,aAAAC;AACF,GAAmB;AACjB,QAAM,CAACmB,GAAiBC,CAAkB,IAAIzB,EAAiB,EAAE;AAC5B,EAAAH,EAAA;AACrC,QAAM6B,IAAOH,MAAYF,KAAA,gBAAAA,EAAW,QAAQ,cAAc,QAAO,QAC3DM,IAAWC,EAAYR,CAAQ,GAC/BS,IAAgB,CAAC,CAACP,GAElBQ,IAAmBC,EAAM,QAAQ,MAAM;;AAC3C,QAAI,OAAOX,KAAa,YAAYA,KAAY;AAC9C,aAAO;AAGT,UAAMY,IAAgB,MAAM,QAAQZ,CAAQ,IAAIA,IAAW,CAACA,CAAQ;AACpE,eAAWa,KAASD;AAClB,UACE,OAAOC,KAAU,YACjBA,KAAS,QACT,WAAWA,OACXC,IAAAD,EAAM,UAAN,QAAAC,EAAa,WACb;AACA,cAAMC,IAAe,MAAM,QAAQF,EAAM,MAAM,QAAQ,IACnDA,EAAM,MAAM,WACZ,CAACA,EAAM,MAAM,QAAQ;AAEzB,mBAAWG,KAAaD;AACtB,cACE,OAAOC,KAAc,YACrBA,KAAa,QACb,WAAWA,OACXC,IAAAD,EAAU,UAAV,QAAAC,EAAiB;AAEjB,mBAAO;AAAA,MAGb;AAEF,WAAO;AAAA,EACT,GAAG,CAACjB,CAAQ,CAAC;AAEb,SAAAkB,EAAU,MAAM;AACd,QAAI,CAAAR;AAIJ,UAAI;AACF,cAAMS,IAAUC,EAAM,UAAUd,CAAI,KAAKc,EAAM,UAAU,WACnDC,IAAOD,EAAM,UAAUb,GAAUY,GAASb,CAAI;AACpD,QAAAD,EAAmBgB,CAAI;AAAA,MACzB,SAAStC,GAAO;AACd,gBAAQ,MAAM,6BAA6BA,CAAK,GAChDsB,EAAmBE,CAAQ;AAAA,MAC7B;AAAA,EACF,GAAG,CAACA,GAAUD,GAAMI,CAAgB,CAAC,GAanC,gBAAAhB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WACEe,IACI,4HACA;AAAA,MAGN,UAAA,gBAAAf,EAAC,OAAA,EAAI,WAAU,oFACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,4CACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2EACZ,UAAAgB,IACC,gBAAAhB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW4B;AAAA,YACT,YAAYhB,CAAI;AAAA,YAChB;AAAA,UAAA;AAAA,UAGD,UAAAN;AAAA,QAAA;AAAA,MAAA,IAEDI,IACF,gBAAAV;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW4B;AAAA,YACT,YAAYhB,CAAI;AAAA,YAChB;AAAA,UAAA;AAAA,UAEF,yBAAyB,EAAE,QAAQF,EAAA;AAAA,QAAgB;AAAA,MAAA,IAGrD,gBAAAV;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW4B;AAAA,YACT,YAAYhB,CAAI;AAAA,YAChB;AAAA,UAAA;AAAA,UAGD,UAAAC;AAAA,QAAA;AAAA,MAAA,EACH,CAEJ,GACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/content-components/code-group.js

@@ -0,0 +1,139 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import * as p from "@radix-ui/react-tabs";
+import F, { forwardRef as k, useRef as L, useState as V, useCallback as G } from "react";
+import { ChevronDownFilled as z } from "@fluentui/react-icons";
+import { cn as g } from "../../utils/cn.js";
+import { CopyToClipboardButton as B } from "./code-block.js";
+import { getNodeText as D } from "../../utils/get-node-text.js";
+import { capitalize as _ } from "../../utils/string.js";
+const Q = k(function({ children: m, onChange: r, className: o, dropdown: l, noMargins: x, ...T }, C) {
+  var N, w;
+  const { defaultValue: c, ...S } = T, h = L(/* @__PURE__ */ new Map()), i = Array.isArray(m) ? m : F.Children.toArray(m), [b, A] = V(0), v = G(
+    (n) => {
+      var s;
+      const t = Number(n), a = ((s = document.activeElement) == null ? void 0 : s.getAttribute("role")) === "tab";
+      A(t), r == null || r(t), a && requestAnimationFrame(() => {
+        const f = h.current.get(t);
+        f && f.focus();
+      });
+    },
+    [r]
+  );
+  if (!m)
+    return null;
+  if (i.length === 0)
+    return console.warn("CodeGroup has no children, expected at least one CodeBlock child."), null;
+  const d = Number(b), I = () => {
+    var n;
+    return /* @__PURE__ */ e("div", { className: "mint:flex mint:items-center mint:gap-1.5 mint:text-xs mint:font-medium mint:min-w-0", children: /* @__PURE__ */ e("span", { className: "mint:truncate mint:text-[#171717] mint:dark:text-[#fafafa]", children: (n = i[d]) == null ? void 0 : n.props.fileName }) });
+  }, R = () => /* @__PURE__ */ e(p.List, { className: "mint:flex-1 mint:min-w-0 mint:text-xs mint:leading-6 mint:rounded-tl-xl mint:gap-1 mint:flex mint:overflow-x-auto mint:overflow-y-hidden", children: i.map((n, t) => /* @__PURE__ */ e(
+    q,
+    {
+      value: String(t),
+      isSelected: d === t,
+      tabsLength: i.length,
+      ref: (a) => {
+        a && h.current.set(t, a);
+      },
+      children: n.props.fileName
+    },
+    n.props.fileName + "TabItem" + t
+  )) }), j = () => {
+    var n;
+    return /* @__PURE__ */ u("div", { className: "mint:relative", children: [
+      /* @__PURE__ */ e(
+        "select",
+        {
+          value: ((n = i[d]) == null ? void 0 : n.props.language) || "",
+          onChange: (t) => {
+            const a = t.target.value, s = i.findIndex((f) => f.props.language === a);
+            s !== -1 && v(String(s));
+          },
+          className: "mint:appearance-none mint:bg-transparent mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:rounded-lg mint:px-2.5 mint:pr-7 mint:py-1 mint:text-xs mint:font-medium mint:text-[#171717] mint:dark:text-[#fafafa] mint:cursor-pointer mint:focus:outline-0",
+          children: i.map((t) => /* @__PURE__ */ e("option", { value: t.props.language, children: _(t.props.language || "") }, t.props.language))
+        }
+      ),
+      /* @__PURE__ */ e(z, { className: "mint:absolute mint:right-2 mint:top-1/2 mint:-translate-y-1/2 mint:w-3.5 mint:h-3.5 mint:pointer-events-none mint:text-[#737373] mint:dark:text-[#a3a3a3]" })
+    ] });
+  };
+  return /* @__PURE__ */ u(
+    p.Root,
+    {
+      defaultValue: c == null ? void 0 : typeof c == "string" ? c : String(c),
+      ref: C,
+      value: String(b),
+      onValueChange: v,
+      className: g(
+        !x && "mint:mt-4 mint:mb-4",
+        "mint:flex mint:flex-col not-prose mint:relative mint:overflow-hidden mint:rounded-2xl mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:bg-white mint:dark:bg-[#0a0a0a]",
+        o
+      ),
+      asChild: !1,
+      ...S,
+      children: [
+        /* @__PURE__ */ u(
+          "div",
+          {
+            className: g(
+              "mint:flex mint:items-center mint:justify-between mint:gap-2 mint:relative mint:px-2.5 mint:py-2",
+              ""
+            ),
+            children: [
+              l ? /* @__PURE__ */ e(I, {}) : /* @__PURE__ */ e(R, {}),
+              /* @__PURE__ */ u("div", { className: "mint:flex mint:items-center mint:justify-end mint:shrink-0 mint:gap-1.5", children: [
+                l && /* @__PURE__ */ e(j, {}),
+                /* @__PURE__ */ e(
+                  B,
+                  {
+                    textToCopy: D((w = (N = i[d]) == null ? void 0 : N.props) == null ? void 0 : w.children),
+                    showTooltip: !0
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "mint:flex mint:flex-1 mint:overflow-hidden", children: i.map((n, t) => /* @__PURE__ */ e(
+          p.Content,
+          {
+            value: String(t),
+            className: "mint:w-full mint:min-w-full mint:max-w-full mint:h-full mint:max-h-full",
+            tabIndex: -1,
+            children: /* @__PURE__ */ e("div", { className: "mint:overflow-auto mint:max-h-[calc(40vh-3rem)]", children: n })
+          },
+          n.props.fileName
+        )) })
+      ]
+    }
+  );
+}), q = k(function({ children: m, value: r, isSelected: o, tabsLength: l }, x) {
+  return /* @__PURE__ */ u(
+    p.Trigger,
+    {
+      ref: x,
+      value: r,
+      className: g(
+        "mint:group mint:flex mint:items-center mint:relative mint:gap-1.5 mint:my-1 mint:mb-1.5 mint:outline-0 mint:whitespace-nowrap mint:font-medium mint:ml-0! mint:first:ml-2.5! mint:focus:outline-2",
+        o && "mint:text-[#9263f1] mint:dark:text-[#c9aaf9]",
+        !o && "mint:text-[#737373] mint:dark:text-[#a3a3a3]"
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: g(
+              "mint:flex mint:items-center mint:gap-1.5 mint:px-1.5 mint:rounded-lg mint:z-10",
+              l > 1 && "mint:group-hover:bg-[#f5f5f5] mint:group-hover:dark:bg-[#1a1a1a] mint:group-hover:text-[#9263f1] mint:group-hover:dark:text-[#c9aaf9]"
+            ),
+            children: m
+          }
+        ),
+        o && /* @__PURE__ */ e("div", { className: "mint:absolute mint:-bottom-1.5 mint:left-0 mint:right-0 mint:h-0.5 mint:rounded-full mint:bg-[#9263f1] mint:dark:bg-[#c9aaf9]" })
+      ]
+    }
+  );
+});
+export {
+  Q as CodeGroup
+};
+//# sourceMappingURL=code-group.js.map

package/dist/components/content-components/code-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-group.js","sources":["../../../src/components/content-components/code-group.tsx"],"sourcesContent":["'use client';\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactElement,\n  ReactNode,\n  forwardRef,\n  useCallback,\n  useState,\n  useRef,\n} from 'react';\nimport { ChevronDownFilled } from '@fluentui/react-icons';\n\nimport { cn } from '../../utils/cn';\nimport { CodeBlock } from './code-block';\nimport { CopyToClipboardButton } from './code-block';\nimport { getNodeText } from '../../utils/get-node-text';\nimport { capitalize } from '../../utils/string';\n\ntype CodeBlockProps = ComponentPropsWithoutRef<typeof CodeBlock>;\n\nexport type CodeGroupPropsBase = {\n  dropdown?: boolean;\n  isSmallText?: boolean;\n  noMargins?: boolean;\n  children?: ReactElement<CodeBlockProps>[] | ReactElement<CodeBlockProps>;\n  onChange?: (index: number) => void;\n};\n\nexport type CodeGroupProps = CodeGroupPropsBase &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof CodeGroupPropsBase | 'dir'>;\n\ntype CodeBlockChild = Exclude<React.ReactElement<CodeBlockProps>, boolean | null | undefined>;\n\nexport const CodeGroup = forwardRef<HTMLDivElement, CodeGroupProps>(function CodeGroup(\n  { children, onChange, className, dropdown, noMargins, ...restProps },\n  ref\n) {\n  // Filter out props that are incompatible with TabsPrimitive.Root\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const { defaultValue, ...props } = restProps as any;\n  const triggerRefs = useRef<Map<number, HTMLButtonElement>>(new Map());\n  const childArr = Array.isArray(children)\n    ? children\n    : (React.Children.toArray(children) as Array<CodeBlockChild>);\n\n  const [selectedTab, setSelectedTab] = useState(0);\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      const index = Number(value);\n      const wasFocusOnTab = document.activeElement?.getAttribute('role') === 'tab';\n\n      setSelectedTab(index);\n      onChange?.(index);\n\n      if (wasFocusOnTab) {\n        requestAnimationFrame(() => {\n          const trigger = triggerRefs.current.get(index);\n          if (trigger) {\n            trigger.focus();\n          }\n        });\n      }\n    },\n    [onChange]\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  if (childArr.length === 0) {\n    console.warn('CodeGroup has no children, expected at least one CodeBlock child.');\n    return null;\n  }\n\n  const selectedIndex = Number(selectedTab);\n\n  const SelectedFilename = () => {\n    return (\n      <div className=\"mint:flex mint:items-center mint:gap-1.5 mint:text-xs mint:font-medium mint:min-w-0\">\n        <span className=\"mint:truncate mint:text-[#171717] mint:dark:text-[#fafafa]\">\n          {childArr[selectedIndex]?.props.fileName}\n        </span>\n      </div>\n    );\n  };\n\n  const TabList = () => {\n    return (\n      <TabsPrimitive.List className=\"mint:flex-1 mint:min-w-0 mint:text-xs mint:leading-6 mint:rounded-tl-xl mint:gap-1 mint:flex mint:overflow-x-auto mint:overflow-y-hidden\">\n        {childArr.map((child, index) => (\n          <TabItem\n            key={child.props.fileName + 'TabItem' + index}\n            value={String(index)}\n            isSelected={selectedIndex === index}\n            tabsLength={childArr.length}\n            ref={(el) => {\n              if (el) {\n                triggerRefs.current.set(index, el);\n              }\n            }}\n          >\n            {child.props.fileName}\n          </TabItem>\n        ))}\n      </TabsPrimitive.List>\n    );\n  };\n\n  const LanguageDropdown = () => {\n    return (\n      <div className=\"mint:relative\">\n        <select\n          value={childArr[selectedIndex]?.props.language || ''}\n          onChange={(e) => {\n            const language = e.target.value;\n            const index = childArr.findIndex((child) => child.props.language === language);\n            if (index !== -1) {\n              handleValueChange(String(index));\n            }\n          }}\n          className=\"mint:appearance-none mint:bg-transparent mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:rounded-lg mint:px-2.5 mint:pr-7 mint:py-1 mint:text-xs mint:font-medium mint:text-[#171717] mint:dark:text-[#fafafa] mint:cursor-pointer mint:focus:outline-0\"\n        >\n          {childArr.map((child) => (\n            <option key={child.props.language} value={child.props.language}>\n              {capitalize(child.props.language || '')}\n            </option>\n          ))}\n        </select>\n        <ChevronDownFilled className=\"mint:absolute mint:right-2 mint:top-1/2 mint:-translate-y-1/2 mint:w-3.5 mint:h-3.5 mint:pointer-events-none mint:text-[#737373] mint:dark:text-[#a3a3a3]\" />\n      </div>\n    );\n  };\n\n  return (\n    <TabsPrimitive.Root\n      defaultValue={defaultValue == undefined ? undefined : (typeof defaultValue === 'string' ? defaultValue : String(defaultValue))}\n      ref={ref}\n      value={String(selectedTab)}\n      onValueChange={handleValueChange}\n      className={cn(\n        !noMargins && 'mint:mt-4 mint:mb-4',\n        'mint:flex mint:flex-col not-prose mint:relative mint:overflow-hidden mint:rounded-2xl mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:bg-white mint:dark:bg-[#0a0a0a]',\n        className\n      )}\n      asChild={false}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      {...(props as any)}\n    >\n      <div\n        className={cn(\n          'mint:flex mint:items-center mint:justify-between mint:gap-2 mint:relative mint:px-2.5 mint:py-2',\n          dropdown ? '' : ''\n        )}\n      >\n        {dropdown ? <SelectedFilename /> : <TabList />}\n        <div className=\"mint:flex mint:items-center mint:justify-end mint:shrink-0 mint:gap-1.5\">\n          {dropdown && <LanguageDropdown />}\n          <CopyToClipboardButton\n            textToCopy={getNodeText(childArr[selectedIndex]?.props?.children)}\n            showTooltip={true}\n          />\n        </div>\n      </div>\n      <div className=\"mint:flex mint:flex-1 mint:overflow-hidden\">\n        {childArr.map((child, index) => {\n          return (\n            <TabsPrimitive.Content\n              key={child.props.fileName}\n              value={String(index)}\n              className=\"mint:w-full mint:min-w-full mint:max-w-full mint:h-full mint:max-h-full\"\n              tabIndex={-1}\n            >\n              <div className=\"mint:overflow-auto mint:max-h-[calc(40vh-3rem)]\">\n                {child}\n              </div>\n            </TabsPrimitive.Content>\n          );\n        })}\n      </div>\n    </TabsPrimitive.Root>\n  );\n});\n\nconst TabItem = forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  {\n    children: ReactNode;\n    value: string;\n    isSelected: boolean;\n    tabsLength: number;\n  }\n>(function TabItem({ children, value, isSelected, tabsLength }, ref) {\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      value={value}\n      className={cn(\n        'mint:group mint:flex mint:items-center mint:relative mint:gap-1.5 mint:my-1 mint:mb-1.5 mint:outline-0 mint:whitespace-nowrap mint:font-medium mint:ml-0! mint:first:ml-2.5! mint:focus:outline-2',\n        isSelected && 'mint:text-[#9263f1] mint:dark:text-[#c9aaf9]',\n        !isSelected && 'mint:text-[#737373] mint:dark:text-[#a3a3a3]'\n      )}\n    >\n      <div\n        className={cn(\n          'mint:flex mint:items-center mint:gap-1.5 mint:px-1.5 mint:rounded-lg mint:z-10',\n          tabsLength > 1 &&\n            'mint:group-hover:bg-[#f5f5f5] mint:group-hover:dark:bg-[#1a1a1a] mint:group-hover:text-[#9263f1] mint:group-hover:dark:text-[#c9aaf9]'\n        )}\n      >\n        {children}\n      </div>\n\n      {isSelected && (\n        <div className=\"mint:absolute mint:-bottom-1.5 mint:left-0 mint:right-0 mint:h-0.5 mint:rounded-full mint:bg-[#9263f1] mint:dark:bg-[#c9aaf9]\" />\n      )}\n    </TabsPrimitive.Trigger>\n  );\n});\n\nexport function CodeBlockTooltip({ text }: { text: string }) {\n  return (\n    <div\n      aria-hidden\n      className=\"mint:absolute mint:top-11 mint:left-1/2 mint:transform mint:whitespace-nowrap mint:-translate-x-1/2 mint:-translate-y-1/2 mint:peer-hover:opacity-100 mint:opacity-0 mint:text-white mint:rounded-lg mint:px-1.5 mint:py-0.5 mint:text-xs mint:bg-primary-dark\"\n    >\n      {text}\n    </div>\n  );\n}\n"],"names":["CodeGroup","forwardRef","children","onChange","className","dropdown","noMargins","restProps","ref","defaultValue","props","triggerRefs","useRef","childArr","React","selectedTab","setSelectedTab","useState","handleValueChange","useCallback","value","index","wasFocusOnTab","_a","trigger","selectedIndex","SelectedFilename","jsx","TabList","TabsPrimitive","child","TabItem","el","LanguageDropdown","jsxs","e","language","capitalize","ChevronDownFilled","cn","CopyToClipboardButton","getNodeText","_b","isSelected","tabsLength"],"mappings":"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"}

package/dist/components/content-components/code-snippet.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import p from "prismjs";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-typescript.js";
+import "prismjs/components/prism-python.js";
+import "prismjs/components/prism-bash.js";
+import "prismjs/components/prism-json.js";
+import "prismjs/components/prism-markdown.js";
+import "prismjs/components/prism-csharp.js";
+import "prismjs/components/prism-powershell.js";
+function l({ language: r, children: t }) {
+  const n = typeof t == "string" ? t : "";
+  r = r ?? "text";
+  let i = "";
+  if (n)
+    try {
+      const e = p.languages[r] || p.languages.plaintext;
+      i = p.highlight(n, e, r);
+    } catch (e) {
+      console.error("Failed to highlight code:", e);
+    }
+  return typeof t == "string" && r && i ? /* @__PURE__ */ o("pre", { suppressHydrationWarning: !0, children: /* @__PURE__ */ o("code", { suppressHydrationWarning: !0, dangerouslySetInnerHTML: { __html: i } }) }) : /* @__PURE__ */ o("pre", { suppressHydrationWarning: !0, children: /* @__PURE__ */ o("code", { suppressHydrationWarning: !0, children: t }) });
+}
+export {
+  l as CodeSnippet
+};
+//# sourceMappingURL=code-snippet.js.map

package/dist/components/content-components/code-snippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-snippet.js","sources":["../../../src/components/content-components/code-snippet.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-powershell.js';\n\nexport type CodeSnippetProps = {\n  language?: string;\n  /**\n   * If `children` is a `string`, Prism will be used for syntax highlighting\n   */\n  children?: ReactNode;\n};\n\nexport function CodeSnippet({ language, children }: CodeSnippetProps) {\n  const codeString = typeof children === 'string' ? children : '';\n  language = language ?? 'text';\n\n  let html = '';\n  if (codeString) {\n    try {\n      const grammar = Prism.languages[language] || Prism.languages.plaintext;\n      html = Prism.highlight(codeString, grammar, language);\n    } catch (error) {\n      console.error('Failed to highlight code:', error);\n    }\n  }\n\n  if (typeof children === 'string' && language && html) {\n    return (\n      <pre suppressHydrationWarning>\n        <code suppressHydrationWarning dangerouslySetInnerHTML={{ __html: html }} />\n      </pre>\n    );\n  }\n\n  return (\n    <pre suppressHydrationWarning>\n      <code suppressHydrationWarning>{children}</code>\n    </pre>\n  );\n}\n"],"names":["CodeSnippet","language","children","codeString","html","grammar","Prism","error","jsx"],"mappings":";;;;;;;;;;AAqBO,SAASA,EAAY,EAAE,UAAAC,GAAU,UAAAC,KAA8B;AACpE,QAAMC,IAAa,OAAOD,KAAa,WAAWA,IAAW;AAC7D,EAAAD,IAAWA,KAAY;AAEvB,MAAIG,IAAO;AACX,MAAID;AACF,QAAI;AACF,YAAME,IAAUC,EAAM,UAAUL,CAAQ,KAAKK,EAAM,UAAU;AAC7D,MAAAF,IAAOE,EAAM,UAAUH,GAAYE,GAASJ,CAAQ;AAAA,IACtD,SAASM,GAAO;AACd,cAAQ,MAAM,6BAA6BA,CAAK;AAAA,IAClD;AAGF,SAAI,OAAOL,KAAa,YAAYD,KAAYG,IAE5C,gBAAAI,EAAC,OAAA,EAAI,0BAAwB,IAC3B,UAAA,gBAAAA,EAAC,QAAA,EAAK,0BAAwB,IAAC,yBAAyB,EAAE,QAAQJ,EAAA,GAAQ,GAC5E,IAKF,gBAAAI,EAAC,SAAI,0BAAwB,IAC3B,4BAAC,QAAA,EAAK,0BAAwB,IAAE,UAAAN,EAAA,CAAS,EAAA,CAC3C;AAEJ;"}

package/dist/components/content-components/code-snippets.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { CodeBlock as n } from "./code-block.js";
+import { CodeGroup as g } from "./code-group.js";
+import { CodeSnippet as t } from "./code-snippet.js";
+const p = ({
+  snippets: a,
+  dropdown: r,
+  maxHeight: l,
+  ...m
+}) => /* @__PURE__ */ o(g, { isSmallText: !0, ...m, dropdown: r, noMargins: !0, className: l, children: a.map(({ code: i, ...e }) => /* @__PURE__ */ o(
+  n,
+  {
+    language: e.language,
+    fileName: e.filename,
+    children: /* @__PURE__ */ o(t, { language: e.language, children: i })
+  },
+  e.filename
+)) });
+export {
+  p as CodeSnippets
+};
+//# sourceMappingURL=code-snippets.js.map

package/dist/components/content-components/code-snippets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-snippets.js","sources":["../../../src/components/content-components/code-snippets.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentPropsWithoutRef } from 'react';\n\nimport { CodeBlock } from './code-block';\nimport { CodeGroup } from './code-group';\nimport { ExampleCodeSnippet } from '../../constants/snippetPresets';\n\nimport { CodeSnippet } from './code-snippet';\n\nexport interface CodeSnippetsProps {\n  dropdown?: boolean;\n  snippets: ExampleCodeSnippet[];\n  maxHeight?: string;\n}\n\nexport const CodeSnippets = ({\n  snippets,\n  dropdown,\n  maxHeight,\n  ...props\n}: CodeSnippetsProps & ComponentPropsWithoutRef<typeof CodeGroup>) => (\n  <CodeGroup isSmallText {...props} dropdown={dropdown} noMargins className={maxHeight}>\n    {snippets.map(({ code, ...snippet }: ExampleCodeSnippet) => (\n      <CodeBlock\n        language={snippet.language}\n        fileName={snippet.filename}\n        key={snippet.filename}\n      >\n        <CodeSnippet language={snippet.language}>{code}</CodeSnippet>\n      </CodeBlock>\n    ))}\n  </CodeGroup>\n);\n"],"names":["CodeSnippets","snippets","dropdown","maxHeight","props","CodeGroup","code","snippet","jsx","CodeBlock","CodeSnippet"],"mappings":";;;;AAgBO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,wBACGC,GAAA,EAAU,aAAW,IAAE,GAAGD,GAAO,UAAAF,GAAoB,WAAS,IAAC,WAAWC,GACxE,YAAS,IAAI,CAAC,EAAE,MAAAG,GAAM,GAAGC,QACxB,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,UAAUF,EAAQ;AAAA,IAClB,UAAUA,EAAQ;AAAA,IAGlB,UAAA,gBAAAC,EAACE,GAAA,EAAY,UAAUH,EAAQ,UAAW,UAAAD,EAAA,CAAK;AAAA,EAAA;AAAA,EAF1CC,EAAQ;AAGf,CACD,EAAA,CACH;"}

package/dist/components/content-components/heading.js

@@ -1,14 +1,56 @@
-import { jsx as s } from "react/jsx-runtime";
-const c = ({
-  id: o,
-  level: r,
-  children: t,
-  className: n = ""
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { cn as n } from "../../utils/cn.js";
+const x = ({
+  id: t,
+  level: a,
+  children: o,
+  className: r = ""
 }) => {
-  const e = `h${r}`;
-  return /* @__PURE__ */ s(e, { id: o, className: n, children: t });
+  const l = `h${a}`, [m, i] = d(!1), s = (c) => {
+    c.preventDefault();
+    const p = window.location.href.split("#")[0] + "#" + t;
+    navigator.clipboard.writeText(p).then(() => {
+      i(!0), setTimeout(() => i(!1), 2e3);
+    }), window.location.hash = t;
+  };
+  return /* @__PURE__ */ h(
+    l,
+    {
+      id: t,
+      className: n("mint:group mint:relative", r),
+      children: [
+        o,
+        /* @__PURE__ */ e(
+          "a",
+          {
+            href: `#${t}`,
+            onClick: s,
+            className: n(
+              "mint:absolute mint:-left-6 mint:top-1/2 mint:-translate-y-1/2 mint:opacity-0 mint:transition-opacity mint:duration-200",
+              "mint:group-hover:opacity-100 mint:text-[#0078d4] mint:dark:text-[#75b6e7]",
+              "mint:no-underline mint:flex mint:items-center mint:justify-center mint:w-5 mint:h-5",
+              "hover:mint:text-[#005a9e] hover:mint:dark:text-[#9ed2f7]"
+            ),
+            "aria-label": `Link to ${t}`,
+            title: m ? "Link copied!" : "Copy link",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                className: "mint:w-4 mint:h-4",
+                children: /* @__PURE__ */ e("path", { d: "M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  c as Heading
+  x as Heading
 };
 //# sourceMappingURL=heading.js.map

package/dist/components/content-components/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../../src/components/content-components/heading.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface HeadingProps {\n  id: string;\n  level: 1 | 2 | 3 | 4 | 5 | 6;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const Heading = ({\n  id,\n  level,\n  children,\n  className = \"\",\n}: HeadingProps) => {\n  const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n\n  return (\n    <Tag id={id} className={className}>\n      {children}\n    </Tag>\n  );\n};\n"],"names":["Heading","id","level","children","className","Tag","jsx"],"mappings":";AASO,MAAMA,IAAU,CAAC;AAAA,EACtB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAoB;AAClB,QAAMC,IAAM,IAAIH,CAAK;AAErB,SACE,gBAAAI,EAACD,GAAA,EAAI,IAAAJ,GAAQ,WAAAG,GACV,UAAAD,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"heading.js","sources":["../../../src/components/content-components/heading.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface HeadingProps {\n  id: string;\n  level: 1 | 2 | 3 | 4 | 5 | 6;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const Heading = ({\n  id,\n  level,\n  children,\n  className = \"\",\n}: HeadingProps) => {\n  const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleAnchorClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    e.preventDefault();\n    const url = window.location.href.split('#')[0] + '#' + id;\n    navigator.clipboard.writeText(url).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 2000);\n    });\n    window.location.hash = id;\n  };\n\n  return (\n    <Tag\n      id={id}\n      className={cn(\"mint:group mint:relative\", className)}\n    >\n      {children}\n      <a\n        href={`#${id}`}\n        onClick={handleAnchorClick}\n        className={cn(\n          \"mint:absolute mint:-left-6 mint:top-1/2 mint:-translate-y-1/2 mint:opacity-0 mint:transition-opacity mint:duration-200\",\n          \"mint:group-hover:opacity-100 mint:text-[#0078d4] mint:dark:text-[#75b6e7]\",\n          \"mint:no-underline mint:flex mint:items-center mint:justify-center mint:w-5 mint:h-5\",\n          \"hover:mint:text-[#005a9e] hover:mint:dark:text-[#9ed2f7]\"\n        )}\n        aria-label={`Link to ${id}`}\n        title={isCopied ? \"Link copied!\" : \"Copy link\"}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          className=\"mint:w-4 mint:h-4\"\n        >\n          <path d=\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\" />\n        </svg>\n      </a>\n    </Tag>\n  );\n};\n"],"names":["Heading","id","level","children","className","Tag","isCopied","setIsCopied","useState","handleAnchorClick","e","url","jsxs","cn","jsx"],"mappings":";;;AAUO,MAAMA,IAAU,CAAC;AAAA,EACtB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAoB;AAClB,QAAMC,IAAM,IAAIH,CAAK,IACf,CAACI,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAoB,CAACC,MAA2C;AACpE,IAAAA,EAAE,eAAA;AACF,UAAMC,IAAM,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,CAAC,IAAI,MAAMV;AACvD,cAAU,UAAU,UAAUU,CAAG,EAAE,KAAK,MAAM;AAC5C,MAAAJ,EAAY,EAAI,GAChB,WAAW,MAAMA,EAAY,EAAK,GAAG,GAAI;AAAA,IAC3C,CAAC,GACD,OAAO,SAAS,OAAON;AAAA,EACzB;AAEA,SACE,gBAAAW;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,IAAAJ;AAAA,MACA,WAAWY,EAAG,4BAA4BT,CAAS;AAAA,MAElD,UAAA;AAAA,QAAAD;AAAA,QACD,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,IAAIb,CAAE;AAAA,YACZ,SAASQ;AAAA,YACT,WAAWI;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,cAAY,WAAWZ,CAAE;AAAA,YACzB,OAAOK,IAAW,iBAAiB;AAAA,YAEnC,UAAA,gBAAAQ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBAEV,UAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5W;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/docsPage.js

@@ -1,46 +1,48 @@
-import { jsx as t, jsxs as e } from "react/jsx-runtime";
-import { MDXRenderer as N } from "./mdx-renderer.js";
-import { TableOfContents as P } from "./toc/index.js";
-import { PivotAwareTOC as T } from "./toc/pivot-aware-toc.js";
-import { TextAlignLeftFilled as C } from "@fluentui/react-icons";
-import { PageContextMenu as z } from "./page-context-menu.js";
-import { ComponentsProvider as L } from "../context/components-context.js";
-import { cn as o } from "../utils/cn.js";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { MDXRenderer as P } from "./mdx-renderer.js";
+import { TableOfContents as T } from "./toc/index.js";
+import { PivotAwareTOC as C } from "./toc/pivot-aware-toc.js";
+import { TextAlignLeftFilled as z } from "@fluentui/react-icons";
+import { PageContextMenu as L } from "./page-context-menu.js";
+import { ComponentsProvider as j } from "../context/components-context.js";
+import { cn as s } from "../utils/cn.js";
+import { ApiExamples as y } from "../api-playground-2/ApiExamples.js";
 /* empty css            */
-import { ZonePivotProvider as j } from "./content-components/zone-pivots/zone-pivot-context.js";
+import { ZonePivotProvider as E } from "./content-components/zone-pivots/zone-pivot-context.js";
 import { ZonePivotSelector as F } from "./content-components/zone-pivots/zone-pivot-selector.js";
-function B({
+function Y({
   payload: i,
-  toc: m,
+  toc: e,
   navTree: O,
-  activeHref: E,
+  activeHref: A,
   theme: f,
-  className: h = "",
+  className: b = "",
   pathname: a,
-  markdownContent: b,
-  allPages: x,
-  baseUrl: g,
-  bottomLinks: y,
-  LinkComponent: w,
-  localization: p,
-  telemetry: A,
-  contextMenu: n
+  markdownContent: x,
+  allPages: g,
+  baseUrl: w,
+  bottomLinks: G,
+  LinkComponent: p,
+  localization: v,
+  telemetry: I,
+  contextMenu: n,
+  apiReferenceData2: r
 }) {
-  var s, d;
-  const v = i.serializedContent, r = ((s = i.mdxExtracts) == null ? void 0 : s.zonePivotGroups) || [], l = (d = i.mdxExtracts) == null ? void 0 : d.pivotTocItems, k = !i.title, u = { ...{
+  var d, c;
+  const k = i.serializedContent, l = ((d = i.mdxExtracts) == null ? void 0 : d.zonePivotGroups) || [], o = (c = i.mdxExtracts) == null ? void 0 : c.pivotTocItems, u = !i.title, N = { ...{
     onThisPage: "On this page",
     loading: "Loading...",
     errorTitle: "Error",
     errorMessage: "Something went wrong",
     notFoundTitle: "Page not found",
     notFoundMessage: "The page you're looking for doesn't exist"
-  }, ...p };
-  return /* @__PURE__ */ t(L, { LinkComponent: w, children: /* @__PURE__ */ t(
+  }, ...v };
+  return /* @__PURE__ */ t(j, { LinkComponent: p, children: /* @__PURE__ */ t(
     "div",
     {
-      className: o(
+      className: s(
         f === "dark" && "dark",
-        h,
+        b,
         "mint:flex mint:flex-col mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden"
       ),
       children: /* @__PURE__ */ t(
@@ -57,42 +59,42 @@ function B({
                 "div",
                 {
                   id: "main-content",
-                  className: o(
+                  className: s(
                     "mint:flex-1 mint:p-8 mint:overflow-y-auto mint:overflow-x-hidden mint:rounded-tl-2xl mint:bg-white mint:dark:bg-[#1f1f1f] [scrollbar-gutter:stable] mint:overscroll-contain mint:lg:px-16 mint:lg:pt-12 [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.2)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30"
                   ),
-                  children: /* @__PURE__ */ t(j, { groups: r, children: /* @__PURE__ */ e("div", { className: "mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full", children: [
-                    m && m.length > 0 && /* @__PURE__ */ t("aside", { className: "mint:w-64 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block", children: /* @__PURE__ */ e("div", { className: "mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto", children: [
-                      /* @__PURE__ */ e("div", { className: "mint:flex mint:items-center mint:gap-2 mint:mb-4", children: [
-                        /* @__PURE__ */ t(C, { className: "mint:w-4 mint:h-4 mint:text-[#4b5563] mint:dark:text-[#9ca3af]" }),
-                        /* @__PURE__ */ t("h2", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white", children: u.onThisPage })
+                  children: /* @__PURE__ */ t(E, { groups: l, children: /* @__PURE__ */ m("div", { className: "mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full", id: "content-layout-container", children: [
+                    r != null && r.operation ? /* @__PURE__ */ t("div", { className: "mint:hidden mint:xl:!flex mint:self-start mint:sticky mint:flex-col mint:max-w-[28rem] mint:top-0 mint:gap-6", children: /* @__PURE__ */ t(y, { apiReferenceData: r }) }) : e && e.length > 0 ? /* @__PURE__ */ t("aside", { className: "mint:w-64 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block", children: /* @__PURE__ */ m("div", { className: "mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto", children: [
+                      /* @__PURE__ */ m("div", { className: "mint:flex mint:items-center mint:gap-2 mint:mb-4", children: [
+                        /* @__PURE__ */ t(z, { className: "mint:w-4 mint:h-4 mint:text-[#4b5563] mint:dark:text-[#9ca3af]" }),
+                        /* @__PURE__ */ t("h2", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white", children: N.onThisPage })
                       ] }),
-                      l && Object.keys(l).length > 0 ? /* @__PURE__ */ t(
-                        T,
+                      o && Object.keys(o).length > 0 ? /* @__PURE__ */ t(
+                        C,
                         {
-                          baseToc: m,
-                          pivotTocItems: l
+                          baseToc: e,
+                          pivotTocItems: o
                         }
-                      ) : /* @__PURE__ */ t(P, { toc: m })
-                    ] }) }),
-                    /* @__PURE__ */ e(
+                      ) : /* @__PURE__ */ t(T, { toc: e })
+                    ] }) }) : null,
+                    /* @__PURE__ */ m(
                       "div",
                       {
-                        className: o(
+                        className: s(
                           "mint:w-full mint:overflow-x-visible mint:max-w-[42rem]",
-                          k && "!mint:max-w-none"
+                          u && "mint:max-w-none!"
                         ),
                         children: [
-                          i.title && /* @__PURE__ */ t("header", { className: "mint:mb-8", children: /* @__PURE__ */ e("div", { className: "mint:mb-4", children: [
-                            /* @__PURE__ */ e("div", { className: "mint:flex mint:flex-col mint:gap-2 mint:items-start mint:sm:flex-row mint:sm:items-center mint:sm:gap-4", children: [
+                          i.title && /* @__PURE__ */ t("header", { className: "mint:mb-0", children: /* @__PURE__ */ m("div", { className: "mint:mb-4", children: [
+                            /* @__PURE__ */ m("div", { className: "mint:flex mint:flex-col mint:gap-2 mint:items-start mint:sm:flex-row mint:sm:items-center mint:sm:gap-4", children: [
                               /* @__PURE__ */ t("h1", { className: "mint:text-[1.875rem] mint:font-bold mint:text-[#141414] mint:dark:text-white mint:m-0 mint:leading-[1.2]", children: i.title }),
                               a && /* @__PURE__ */ t(
-                                z,
+                                L,
                                 {
                                   className: "mint:ml-auto mint:max-sm:ml-0",
                                   pathname: a,
-                                  markdownContent: b,
-                                  allPages: x,
-                                  baseUrl: g,
+                                  markdownContent: x,
+                                  allPages: g,
+                                  baseUrl: w,
                                   onCopyMarkdown: n == null ? void 0 : n.onCopyMarkdown,
                                   onViewMarkdown: n == null ? void 0 : n.onViewMarkdown
                                 }
@@ -100,15 +102,15 @@ function B({
                             ] }),
                             i.description && /* @__PURE__ */ t("p", { className: "mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db]", children: i.description })
                           ] }) }),
-                          r.length > 0 && /* @__PURE__ */ t("div", { className: "mint:mb-6 mint:flex mint:flex-wrap mint:gap-4", children: r.map((c) => /* @__PURE__ */ t(
+                          l.length > 0 && /* @__PURE__ */ t("div", { className: "mint:mb-6 mint:flex mint:flex-wrap mint:gap-4", children: l.map((h) => /* @__PURE__ */ t(
                             F,
                             {
-                              group: c,
+                              group: h,
                               className: "mint:flex mint:items-center mint:gap-2 mint:text-sm"
                             },
-                            c.id
+                            h.id
                           )) }),
-                          /* @__PURE__ */ t("div", { className: "mint:pt-4", children: /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(v, {}) }) })
+                          /* @__PURE__ */ t("div", { className: "mint:pt-4", children: /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, {}) }) })
                         ]
                       }
                     )
@@ -123,6 +125,6 @@ function B({
   ) });
 }
 export {
-  B as DocsPage
+  Y as DocsPage
 };
 //# sourceMappingURL=docsPage.js.map