@mintlify/msft-sdk 1.1.52 → 1.1.54

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

@@ -49,12 +49,12 @@ function h({ type: i, children: e }) {
         n.icon && /* @__PURE__ */ t(
           "div",
           {
-            className: "mint:flex mint:items-start mint:justify-center mint:mt-0.5",
+            className: "mint:flex mint:items-start mint:pt-0.5",
             "aria-hidden": "true",
             children: n.icon
           }
         ),
-        /* @__PURE__ */ t("div", { className: "mint:text-sm mint:min-w-0 mint:w-full mint:max-w-none mint:prose mint:dark:prose-invert", children: e })
+        /* @__PURE__ */ t("div", { className: "mint:text-sm mint:min-w-0 mint:w-full mint:max-w-none mint:prose mint:dark:prose-invert [&>ul]:!mt-0 [&>ol]:!mt-0", children: e })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"callouts.js","sources":["../../../src/components/content-components/callouts.tsx"],"sourcesContent":["import {\n  Lightbulb20Regular,\n  InfoFilled,\n  Warning20Regular,\n  DismissCircle20Regular,\n  Info20Regular,\n} from '@fluentui/react-icons';\n\nimport { cn } from '../../utils/cn';\n\nexport type CalloutType = 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'nextstepaction';\n\ninterface CalloutProps {\n  type: CalloutType;\n  children: React.ReactNode;\n}\n\nconst calloutConfig: Record<\n  CalloutType,\n  {\n    icon?: React.ReactNode;\n    className: string;\n  }\n> = {\n  tip: {\n    icon: <Lightbulb20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#f1faf1] mint:border-[#9fd89f] mint:text-[#0c5e0c] mint:dark:bg-[#052505] mint:dark:border-[#54b054] mint:dark:text-[#54b054]',\n  },\n  note: {\n    icon: <Info20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#f5f5f5] mint:border-[#d1d1d1] mint:text-[#242424] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white',\n  },\n  warning: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#fff9f5] mint:border-[#fdcfb4] mint:text-[#8a3707] mint:dark:bg-[#4a1e04] mint:dark:border-[#de590b] mint:dark:text-[#faa06b]',\n  },\n  caution: {\n    icon: <DismissCircle20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#fdf3f4] mint:border-[#eeacb2] mint:text-[#960b18] mint:dark:bg-[#3b0509] mint:dark:border-[#c50f1f] mint:dark:text-[#dc626d]',\n  },\n  important: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#e1cefc] mint:border-[#8251ee] mint:text-[#643fb2] mint:dark:bg-[#1a1326] mint:dark:border-[#9263f1] mint:dark:text-[#9263f1]',\n  },\n  nextstepaction: {\n    icon: (\n      <InfoFilled className=\"mint:w-5 mint:h-5 mint:shrink-0 mint:text-[#616161] mint:dark:text-white\" />\n    ),\n    className:\n      'mint:bg-[#f9fafb] mint:border-[#d1d1d1] mint:text-[#141414] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white',\n  },\n};\n\nconst calloutLabels: Record<CalloutType, string> = {\n  note: 'Note',\n  tip: 'Tip',\n  important: 'Important',\n  caution: 'Caution',\n  warning: 'Warning',\n  nextstepaction: 'Next step action',\n};\n\nexport function Callout({ type, children }: CalloutProps) {\n  const config = calloutConfig[type];\n  const label = calloutLabels[type];\n\n  return (\n    <aside\n      role=\"note\"\n      aria-label={label}\n      className={cn(\n        'mint:my-4 mint:flex mint:gap-2 mint:px-3 mint:py-2.5 mint:rounded-lg mint:border mint:overflow-hidden',\n        config.className\n      )}\n    >\n      {config.icon && (\n        <div\n          className=\"mint:flex mint:items-start mint:justify-center mint:mt-0.5\"\n          aria-hidden=\"true\"\n        >\n          {config.icon}\n        </div>\n      )}\n      <div className=\"mint:text-sm mint:min-w-0 mint:w-full mint:max-w-none mint:prose mint:dark:prose-invert\">\n        {children}\n      </div>\n    </aside>\n  );\n}\n"],"names":["calloutConfig","jsx","Lightbulb20Regular","Info20Regular","Warning20Regular","DismissCircle20Regular","InfoFilled","calloutLabels","Callout","type","children","config","label","jsxs","cn"],"mappings":";;;AAiBA,MAAMA,IAMF;AAAA,EACF,KAAK;AAAA,IACH,MAAM,gBAAAC,EAACC,GAAA,EAAmB,WAAU,kCAAA,CAAkC;AAAA,IACtE,WACE;AAAA,EAAA;AAAA,EAEJ,MAAM;AAAA,IACJ,MAAM,gBAAAD,EAACE,GAAA,EAAc,WAAU,kCAAA,CAAkC;AAAA,IACjE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MAAM,gBAAAF,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MAAM,gBAAAH,EAACI,GAAA,EAAuB,WAAU,kCAAA,CAAkC;AAAA,IAC1E,WACE;AAAA,EAAA;AAAA,EAEJ,WAAW;AAAA,IACT,MAAM,gBAAAJ,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,gBAAgB;AAAA,IACd,MACE,gBAAAH,EAACK,GAAA,EAAW,WAAU,2EAAA,CAA2E;AAAA,IAEnG,WACE;AAAA,EAAA;AAEN,GAEMC,IAA6C;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAClB;AAEO,SAASC,EAAQ,EAAE,MAAAC,GAAM,UAAAC,KAA0B;AACxD,QAAMC,IAASX,EAAcS,CAAI,GAC3BG,IAAQL,EAAcE,CAAI;AAEhC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAYD;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACAH,EAAO;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAAA,EAAO,QACN,gBAAAV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX,UAAAU,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGZ,gBAAAV,EAAC,OAAA,EAAI,WAAU,2FACZ,UAAAS,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"callouts.js","sources":["../../../src/components/content-components/callouts.tsx"],"sourcesContent":["import {\n  Lightbulb20Regular,\n  InfoFilled,\n  Warning20Regular,\n  DismissCircle20Regular,\n  Info20Regular,\n} from '@fluentui/react-icons';\n\nimport { cn } from '../../utils/cn';\n\nexport type CalloutType = 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'nextstepaction';\n\ninterface CalloutProps {\n  type: CalloutType;\n  children: React.ReactNode;\n}\n\nconst calloutConfig: Record<\n  CalloutType,\n  {\n    icon?: React.ReactNode;\n    className: string;\n  }\n> = {\n  tip: {\n    icon: <Lightbulb20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#f1faf1] mint:border-[#9fd89f] mint:text-[#0c5e0c] mint:dark:bg-[#052505] mint:dark:border-[#54b054] mint:dark:text-[#54b054]',\n  },\n  note: {\n    icon: <Info20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#f5f5f5] mint:border-[#d1d1d1] mint:text-[#242424] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white',\n  },\n  warning: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#fff9f5] mint:border-[#fdcfb4] mint:text-[#8a3707] mint:dark:bg-[#4a1e04] mint:dark:border-[#de590b] mint:dark:text-[#faa06b]',\n  },\n  caution: {\n    icon: <DismissCircle20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#fdf3f4] mint:border-[#eeacb2] mint:text-[#960b18] mint:dark:bg-[#3b0509] mint:dark:border-[#c50f1f] mint:dark:text-[#dc626d]',\n  },\n  important: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#e1cefc] mint:border-[#8251ee] mint:text-[#643fb2] mint:dark:bg-[#1a1326] mint:dark:border-[#9263f1] mint:dark:text-[#9263f1]',\n  },\n  nextstepaction: {\n    icon: (\n      <InfoFilled className=\"mint:w-5 mint:h-5 mint:shrink-0 mint:text-[#616161] mint:dark:text-white\" />\n    ),\n    className:\n      'mint:bg-[#f9fafb] mint:border-[#d1d1d1] mint:text-[#141414] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white',\n  },\n};\n\nconst calloutLabels: Record<CalloutType, string> = {\n  note: 'Note',\n  tip: 'Tip',\n  important: 'Important',\n  caution: 'Caution',\n  warning: 'Warning',\n  nextstepaction: 'Next step action',\n};\n\nexport function Callout({ type, children }: CalloutProps) {\n  const config = calloutConfig[type];\n  const label = calloutLabels[type];\n\n  return (\n    <aside\n      role=\"note\"\n      aria-label={label}\n      className={cn(\n        'mint:my-4 mint:flex mint:gap-2 mint:px-3 mint:py-2.5 mint:rounded-lg mint:border mint:overflow-hidden',\n        config.className\n      )}\n    >\n      {config.icon && (\n        <div\n          className=\"mint:flex mint:items-start mint:pt-0.5\"\n          aria-hidden=\"true\"\n        >\n          {config.icon}\n        </div>\n      )}\n      <div className=\"mint:text-sm mint:min-w-0 mint:w-full mint:max-w-none mint:prose mint:dark:prose-invert [&>ul]:!mt-0 [&>ol]:!mt-0\">\n        {children}\n      </div>\n    </aside>\n  );\n}\n"],"names":["calloutConfig","jsx","Lightbulb20Regular","Info20Regular","Warning20Regular","DismissCircle20Regular","InfoFilled","calloutLabels","Callout","type","children","config","label","jsxs","cn"],"mappings":";;;AAiBA,MAAMA,IAMF;AAAA,EACF,KAAK;AAAA,IACH,MAAM,gBAAAC,EAACC,GAAA,EAAmB,WAAU,kCAAA,CAAkC;AAAA,IACtE,WACE;AAAA,EAAA;AAAA,EAEJ,MAAM;AAAA,IACJ,MAAM,gBAAAD,EAACE,GAAA,EAAc,WAAU,kCAAA,CAAkC;AAAA,IACjE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MAAM,gBAAAF,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MAAM,gBAAAH,EAACI,GAAA,EAAuB,WAAU,kCAAA,CAAkC;AAAA,IAC1E,WACE;AAAA,EAAA;AAAA,EAEJ,WAAW;AAAA,IACT,MAAM,gBAAAJ,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,gBAAgB;AAAA,IACd,MACE,gBAAAH,EAACK,GAAA,EAAW,WAAU,2EAAA,CAA2E;AAAA,IAEnG,WACE;AAAA,EAAA;AAEN,GAEMC,IAA6C;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAClB;AAEO,SAASC,EAAQ,EAAE,MAAAC,GAAM,UAAAC,KAA0B;AACxD,QAAMC,IAASX,EAAcS,CAAI,GAC3BG,IAAQL,EAAcE,CAAI;AAEhC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAYD;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACAH,EAAO;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAAA,EAAO,QACN,gBAAAV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX,UAAAU,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGZ,gBAAAV,EAAC,OAAA,EAAI,WAAU,qHACZ,UAAAS,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,6 +1,6 @@
-import { jsx as o, jsxs as v } from "react/jsx-runtime";
-import { ClipboardCheckmarkRegular as N, Copy20Regular as B } from "@fluentui/react-icons";
-import b from "prismjs";
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import { ClipboardCheckmarkRegular as I, Copy20Regular as S } from "@fluentui/react-icons";
+import h from "prismjs";
 import "prismjs/components/prism-bash.js";
 import "prismjs/components/prism-csharp.js";
 import "prismjs/components/prism-javascript.js";
@@ -9,144 +9,167 @@ import "prismjs/components/prism-markdown.js";
 import "prismjs/components/prism-powershell.js";
 import "prismjs/components/prism-python.js";
 import "prismjs/components/prism-typescript.js";
-import I, { useState as C, useEffect as A } from "react";
-import { cn as h } from "../../utils/cn.js";
-import { getNodeText as R } from "../../utils/get-node-text.js";
+import A, { useState as k, useEffect as R } from "react";
+import { cn as d } from "../../utils/cn.js";
+import { getNodeText as j } from "../../utils/get-node-text.js";
+import { getCodeBlockScrollbarClassname as E } from "../../utils/getScrollbarClassname.js";
 const w = ["image/png", "text/plain"];
-function g() {
-  const [t, e] = C(!1), n = async (r) => {
+function y() {
+  const [t, e] = k(!1), o = async (n) => {
     try {
-      await navigator.clipboard.writeText(r), e(!0), setTimeout(() => e(!1), 2e3);
-    } catch (l) {
-      console.error("Failed to copy to clipboard:", l);
+      await navigator.clipboard.writeText(n), e(!0), setTimeout(() => e(!1), 2e3);
+    } catch (m) {
+      console.error("Failed to copy to clipboard:", m);
     }
   };
-  return { isCopied: t, copy: n, copyBlob: async (r, l) => {
+  return { isCopied: t, copy: o, copyBlob: async (n, m) => {
     try {
-      if (w.includes(l)) {
-        const i = await r.arrayBuffer(), a = new Blob([i], { type: l }), m = new ClipboardItem({
-          [l]: a
+      if (w.includes(m)) {
+        const i = await n.arrayBuffer(), a = new Blob([i], { type: m }), f = new ClipboardItem({
+          [m]: a
         });
-        await navigator.clipboard.write([m]), e(!0), setTimeout(() => e(!1), 2e3);
+        await navigator.clipboard.write([f]), e(!0), setTimeout(() => e(!1), 2e3);
       } else {
-        const i = await r.text();
-        await n(i);
+        const i = await n.text();
+        await o(i);
       }
     } catch (i) {
       console.error("Failed to copy blob to clipboard:", i);
       try {
-        const a = await r.text();
-        await n(a);
+        const a = await n.text();
+        await o(a);
       } catch (a) {
         console.error("Failed to copy as text fallback:", a);
       }
     }
   } };
 }
-function _({ onClick: t, isCopied: e, showTooltip: n = !0 }) {
-  return /* @__PURE__ */ v("div", { className: "mint:relative", children: [
-    n && e && /* @__PURE__ */ o("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]", children: "Copied!" }),
-    /* @__PURE__ */ o(
+function _({ onClick: t, isCopied: e, showTooltip: o = !0 }) {
+  return /* @__PURE__ */ N("div", { className: "mint:relative", children: [
+    o && e && /* @__PURE__ */ r("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]", children: "Copied!" }),
+    /* @__PURE__ */ r(
       "button",
       {
         onClick: t,
         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]",
         "aria-label": e ? "Copied" : "Copy code",
-        children: e ? /* @__PURE__ */ o(N, { className: "mint:w-5 mint:h-5 mint:text-[#737373] mint:dark:text-[#a3a3a3]" }) : /* @__PURE__ */ o(B, { className: "mint:w-5 mint:h-5" })
+        children: e ? /* @__PURE__ */ r(I, { className: "mint:w-5 mint:h-5 mint:text-[#737373] mint:dark:text-[#a3a3a3]" }) : /* @__PURE__ */ r(S, { className: "mint:w-5 mint:h-5" })
       }
     )
   ] });
 }
-function q({
+function V({
   textToCopy: t,
   showTooltip: e = !0
 }) {
-  const { isCopied: n, copy: p } = g();
-  return /* @__PURE__ */ o(_, { onClick: () => {
-    p(t);
-  }, isCopied: n, showTooltip: e });
+  const { isCopied: o, copy: c } = y();
+  return /* @__PURE__ */ r(_, { onClick: () => {
+    c(t);
+  }, isCopied: o, showTooltip: e });
 }
-function G({
+function W({
   data: t,
   showTooltip: e = !0
 }) {
-  const { isCopied: n, copy: p, copyBlob: r } = g();
-  return /* @__PURE__ */ o(_, { onClick: () => {
-    t.contentType && w.includes(t.contentType) ? r(t.blob, t.contentType) : t.type === "other" && t.content ? p(t.content) : console.error("Unsupported content type for clipboard");
-  }, isCopied: n, showTooltip: e });
+  const { isCopied: o, copy: c, copyBlob: n } = y();
+  return /* @__PURE__ */ r(_, { onClick: () => {
+    t.contentType && w.includes(t.contentType) ? n(t.blob, t.contentType) : t.type === "other" && t.content ? c(t.content) : console.error("Unsupported content type for clipboard");
+  }, isCopied: o, showTooltip: e });
 }
-function J({
+function X({
   children: t,
   className: e,
-  fileName: n,
-  language: p,
-  blob: r,
-  contentType: l
+  fileName: o,
+  language: c,
+  blob: n,
+  contentType: m,
+  dataGroup: i = !1
 }) {
-  const [i, a] = C("");
-  g();
-  const m = p || (e == null ? void 0 : e.replace(/^language-/, "")) || "text", d = R(t), k = !!n, u = I.useMemo(() => {
-    var f, y;
+  const [a, f] = k("");
+  y();
+  const s = c || (e == null ? void 0 : e.replace(/^language-/, "")) || "text", u = j(t), T = !!o, g = A.useMemo(() => {
+    var x, C;
     if (typeof t != "object" || t == null)
       return !1;
-    const s = Array.isArray(t) ? t : [t];
-    for (const c of s)
-      if (typeof c == "object" && c != null && "props" in c && ((f = c.props) != null && f.children)) {
-        const T = Array.isArray(c.props.children) ? c.props.children : [c.props.children];
-        for (const x of T)
-          if (typeof x == "object" && x != null && "props" in x && ((y = x.props) != null && y.className))
+    const p = Array.isArray(t) ? t : [t];
+    for (const l of p)
+      if (typeof l == "object" && l != null && "props" in l && ((x = l.props) != null && x.children)) {
+        const B = Array.isArray(l.props.children) ? l.props.children : [l.props.children];
+        for (const b of B)
+          if (typeof b == "object" && b != null && "props" in b && ((C = b.props) != null && C.className))
             return !0;
       }
     return !1;
   }, [t]);
-  return A(() => {
-    if (!u)
+  R(() => {
+    if (!g)
       try {
-        const s = b.languages[m] || b.languages.plaintext, f = b.highlight(d, s, m);
-        a(f);
-      } catch (s) {
-        console.error("Failed to highlight code:", s), a(d);
+        const p = h.languages[s] || h.languages.plaintext, x = h.highlight(u, p, s);
+        f(x);
+      } catch (p) {
+        console.error("Failed to highlight code:", p), f(u);
       }
-  }, [d, m, u]), /* @__PURE__ */ o(
+  }, [u, s, g]);
+  const v = E("system", i);
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: k ? "mint:flex mint:flex-col mint:gap-2 mint:px-0.5 mint:pb-0.5 mint:rounded-xl mint:overflow-hidden" : void 0,
-      children: /* @__PURE__ */ o("div", { className: "not-prose mint:relative mint:rounded-xl mint:bg-[#f5f5f5] mint:dark:bg-[#141414]", children: /* @__PURE__ */ o("div", { className: "mint:code-scrollbar mint:overflow-x-scroll", children: /* @__PURE__ */ o("pre", { className: "mint:px-4 mint:py-2 mint:m-0 mint:whitespace-pre mint:text-sm", children: u ? /* @__PURE__ */ o(
-        "code",
+      className: T ? "mint:flex mint:flex-col mint:gap-2 mint:px-0.5 mint:pb-0.5 mint:rounded-xl mint:overflow-hidden" : void 0,
+      "data-group": i,
+      children: /* @__PURE__ */ r(
+        "div",
         {
-          className: h(
-            `language-${m}`,
-            "mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]"
+          className: d(
+            "not-prose mint:relative mint:rounded-xl mint:bg-[#f5f5f5] mint:dark:bg-[#141414]",
+            i && "mint:group"
           ),
-          children: t
+          children: /* @__PURE__ */ r(
+            "pre",
+            {
+              className: d(
+                "mint:px-4 mint:py-2 mint:m-0 mint:whitespace-pre mint:text-sm mint:overflow-scroll mint:scrollbar-track-zinc-200 mint:dark:scrollbar-track-zinc-800",
+                v
+              ),
+              children: g ? /* @__PURE__ */ r(
+                "code",
+                {
+                  className: d(
+                    `language-${s}`,
+                    "mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]"
+                  ),
+                  children: t
+                }
+              ) : a ? /* @__PURE__ */ r(
+                "code",
+                {
+                  className: d(
+                    `language-${s}`,
+                    "mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]"
+                  ),
+                  dangerouslySetInnerHTML: { __html: a }
+                }
+              ) : /* @__PURE__ */ r(
+                "code",
+                {
+                  className: d(
+                    `language-${s}`,
+                    "mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]"
+                  ),
+                  children: u
+                }
+              )
+            }
+          )
         }
-      ) : i ? /* @__PURE__ */ o(
-        "code",
-        {
-          className: h(
-            `language-${m}`,
-            "mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]"
-          ),
-          dangerouslySetInnerHTML: { __html: i }
-        }
-      ) : /* @__PURE__ */ o(
-        "code",
-        {
-          className: h(
-            `language-${m}`,
-            "mint:block mint:text-[#24292e] mint:dark:text-[#e6edf3]"
-          ),
-          children: d
-        }
-      ) }) }) })
+      )
     }
   );
 }
 export {
-  J as CodeBlock,
-  G as CopyDataToClipboardButton,
+  X as CodeBlock,
+  W as CopyDataToClipboardButton,
   _ as CopyIconButton,
-  q as CopyToClipboardButton,
-  g as useCopyToClipboard
+  V as CopyToClipboardButton,
+  y as useCopyToClipboard
 };
 //# sourceMappingURL=code-block.js.map

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":["import { Copy20Regular, ClipboardCheckmarkRegular } from '@fluentui/react-icons';\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-typescript.js';\nimport React, { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { getNodeText } from '../../utils/get-node-text';\nimport { capitalize } from '../../utils/string';\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({\n  textToCopy,\n  showTooltip = true,\n}: 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({\n  data,\n  showTooltip = true,\n}: 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 (typeof child === 'object' && child != null && 'props' in child && child.props?.children) {\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      className={\n        showContainer\n          ? 'mint:flex mint:flex-col mint:gap-2 mint:px-0.5 mint:pb-0.5 mint:rounded-xl mint: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-scroll\">\n          <pre className=\"mint:px-4 mint:py-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","CopyDataToClipboardButton","data","copyBlob","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":"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"}
+{"version":3,"file":"code-block.js","sources":["../../../src/components/content-components/code-block.tsx"],"sourcesContent":["import { Copy20Regular, ClipboardCheckmarkRegular } from '@fluentui/react-icons';\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-typescript.js';\nimport React, { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { getNodeText } from '../../utils/get-node-text';\nimport { capitalize } from '../../utils/string';\nimport { getCodeBlockScrollbarClassname } from '../../utils/getScrollbarClassname';\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({\n  textToCopy,\n  showTooltip = true,\n}: 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({\n  data,\n  showTooltip = true,\n}: 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  // Control whether scrollbar uses group-hover behavior\n  dataGroup?: boolean;\n}\n\nexport function CodeBlock({\n  children,\n  className,\n  fileName,\n  language,\n  blob,\n  contentType,\n  dataGroup = false,\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 (typeof child === 'object' && child != null && 'props' in child && child.props?.children) {\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  const scrollbarClass = getCodeBlockScrollbarClassname('system', dataGroup);\n\n  return (\n    <div\n      className={\n        showContainer\n          ? 'mint:flex mint:flex-col mint:gap-2 mint:px-0.5 mint:pb-0.5 mint:rounded-xl mint:overflow-hidden'\n          : undefined\n      }\n      data-group={dataGroup}\n    >\n      <div\n        className={cn(\n          'not-prose mint:relative mint:rounded-xl mint:bg-[#f5f5f5] mint:dark:bg-[#141414]',\n          dataGroup && 'mint:group'\n        )}\n      >\n        <pre\n          className={cn(\n            'mint:px-4 mint:py-2 mint:m-0 mint:whitespace-pre mint:text-sm mint:overflow-scroll mint:scrollbar-track-zinc-200 mint:dark:scrollbar-track-zinc-800',\n            scrollbarClass\n          )}\n        >\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  );\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","CopyDataToClipboardButton","data","copyBlob","CodeBlock","children","className","fileName","language","dataGroup","highlightedCode","setHighlightedCode","lang","codeText","getNodeText","showContainer","isSSRHighlighted","React","childrenArray","child","_a","codeChildren","codeChild","_b","useEffect","grammar","Prism","html","scrollbarClass","getCodeBlockScrollbarClassname","cn"],"mappings":"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"}

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

@@ -1,20 +1,20 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import * as f from "@radix-ui/react-tabs";
-import j, { forwardRef as k, useRef as F, useState as L, useCallback as V } from "react";
-import { ChevronDownFilled as B } from "@fluentui/react-icons";
+import j, { forwardRef as y, useRef as z, useState as F, useCallback as L } from "react";
+import { ChevronDownFilled as V } from "@fluentui/react-icons";
 import { cn as g } from "../../utils/cn.js";
-import { CopyToClipboardButton as G } from "./code-block.js";
-import { getNodeText as z } from "../../utils/get-node-text.js";
+import { CopyToClipboardButton as B } from "./code-block.js";
+import { getNodeText as G } from "../../utils/get-node-text.js";
 import { capitalize as D } from "../../utils/string.js";
-const K = k(function({ children: r, onChange: a, className: o, dropdown: l, noMargins: h, ...T }, C) {
-  var w, y;
-  const { defaultValue: p, ...S } = T, b = F(/* @__PURE__ */ new Map()), i = Array.isArray(r) ? r : j.Children.toArray(r), [v, A] = L(0), N = V(
+const K = y(function({ children: r, onChange: a, className: o, dropdown: l, noMargins: h, ...T }, C) {
+  var k, N;
+  const { defaultValue: u, ...S } = T, x = z(/* @__PURE__ */ new Map()), i = Array.isArray(r) ? r : j.Children.toArray(r), [v, A] = F(0), w = L(
     (n) => {
       var s;
       const t = Number(n), m = ((s = document.activeElement) == null ? void 0 : s.getAttribute("role")) === "tab";
       A(t), a == null || a(t), m && requestAnimationFrame(() => {
-        const d = b.current.get(t);
-        d && d.focus();
+        const p = x.current.get(t);
+        p && p.focus();
       });
     },
     [a]
@@ -23,17 +23,17 @@ const K = k(function({ children: r, onChange: a, className: o, dropdown: l, noMa
     return null;
   if (i.length === 0)
     return console.warn("CodeGroup has no children, expected at least one CodeBlock child."), null;
-  const u = Number(v), I = () => {
+  const d = Number(v), 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[u]) == null ? void 0 : n.props.fileName }) });
+    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 }) });
   }, $ = () => /* @__PURE__ */ e(f.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(
     _,
     {
       value: String(t),
-      isSelected: u === t,
+      isSelected: d === t,
       tabsLength: i.length,
       ref: (m) => {
-        m && b.current.set(t, m);
+        m && x.current.set(t, m);
       },
       children: n.props.fileName
     },
@@ -44,25 +44,25 @@ const K = k(function({ children: r, onChange: a, className: o, dropdown: l, noMa
       /* @__PURE__ */ e(
         "select",
         {
-          value: ((n = i[u]) == null ? void 0 : n.props.language) || "",
+          value: ((n = i[d]) == null ? void 0 : n.props.language) || "",
           onChange: (t) => {
-            const m = t.target.value, s = i.findIndex((d) => d.props.language === m);
-            s !== -1 && N(String(s));
+            const m = t.target.value, s = i.findIndex((p) => p.props.language === m);
+            s !== -1 && w(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, m) => /* @__PURE__ */ e("option", { value: t.props.language, children: D(t.props.language || "") }, `${t.props.language}-${t.props.fileName}-${m}`))
         }
       ),
-      /* @__PURE__ */ e(B, { 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]" })
+      /* @__PURE__ */ e(V, { 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__ */ c(
     f.Root,
     {
-      defaultValue: p == null ? void 0 : typeof p == "string" ? p : String(p),
+      defaultValue: u == null ? void 0 : typeof u == "string" ? u : String(u),
       ref: C,
       value: String(v),
-      onValueChange: N,
+      onValueChange: w,
       className: g(
         !h && "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]",
@@ -83,9 +83,9 @@ const K = k(function({ children: r, onChange: a, className: o, dropdown: l, noMa
               /* @__PURE__ */ c("div", { className: "mint:flex mint:items-center mint:justify-end mint:shrink-0 mint:gap-1.5", children: [
                 l && /* @__PURE__ */ e(R, {}),
                 /* @__PURE__ */ e(
-                  G,
+                  B,
                   {
-                    textToCopy: z((y = (w = i[u]) == null ? void 0 : w.props) == null ? void 0 : y.children),
+                    textToCopy: G((N = (k = i[d]) == null ? void 0 : k.props) == null ? void 0 : N.children),
                     showTooltip: !0
                   }
                 )
@@ -99,14 +99,14 @@ const K = k(function({ children: r, onChange: a, className: o, dropdown: l, noMa
             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:code-scrollbar mint:overflow-scroll mint:max-h-[calc(40vh-3rem)]", children: n })
+            children: /* @__PURE__ */ e("div", { className: "mint:overflow-scroll mint:max-h-[calc(40vh-3rem)] mint:scrollbar-thin mint:scrollbar-thumb-rounded mint:scrollbar-track-zinc-200 mint:dark:scrollbar-track-zinc-800 mint:scrollbar-thumb-black/15 mint:dark:scrollbar-thumb-white/20 mint:hover:scrollbar-thumb-black/20 mint:dark:hover:scrollbar-thumb-white/25 mint:active:scrollbar-thumb-black/20 mint:dark:active:scrollbar-thumb-white/25", children: n })
           },
           `${n.props.fileName}-${n.props.language}-${t}`
         )) })
       ]
     }
   );
-}), _ = k(function({ children: r, value: a, isSelected: o, tabsLength: l }, h) {
+}), _ = y(function({ children: r, value: a, isSelected: o, tabsLength: l }, h) {
   return /* @__PURE__ */ c(
     f.Trigger,
     {
@@ -133,13 +133,13 @@ const K = k(function({ children: r, onChange: a, className: o, dropdown: l, noMa
     }
   );
 });
-function Q({ text: x }) {
+function Q({ text: b }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "aria-hidden": !0,
       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",
-      children: x
+      children: b
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"file":"code-group.js","sources":["../../../src/components/content-components/code-group.tsx"],"sourcesContent":["\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, index) => (\n            <option key={`${child.props.language}-${child.props.fileName}-${index}`} 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}-${child.props.language}-${index}`}\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:code-scrollbar mint:overflow-scroll 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","CodeBlockTooltip","text"],"mappings":"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"}
+{"version":3,"file":"code-group.js","sources":["../../../src/components/content-components/code-group.tsx"],"sourcesContent":["\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, index) => (\n            <option key={`${child.props.language}-${child.props.fileName}-${index}`} 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}-${child.props.language}-${index}`}\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-scroll mint:max-h-[calc(40vh-3rem)] mint:scrollbar-thin mint:scrollbar-thumb-rounded mint:scrollbar-track-zinc-200 mint:dark:scrollbar-track-zinc-800 mint:scrollbar-thumb-black/15 mint:dark:scrollbar-thumb-white/20 mint:hover:scrollbar-thumb-black/20 mint:dark:hover:scrollbar-thumb-white/25 mint:active:scrollbar-thumb-black/20 mint:dark:active:scrollbar-thumb-white/25\">\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","CodeBlockTooltip","text"],"mappings":"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"}

package/dist/components/content-components/table/index.js

@@ -15,7 +15,7 @@ const y = i.forwardRef(
       /* @__PURE__ */ m(
         "div",
         {
-          className: "mint:relative mint:block mint:mb-4 mint:mt-8",
+          className: "mint:relative mint:block mint:mb-4 mint:mt-4",
           role: "region",
           "aria-label": "Data table",
           children: [
@@ -32,7 +32,7 @@ const y = i.forwardRef(
                 ]
               }
             ),
-            /* @__PURE__ */ r("div", { className: "mint:mt-2 mint:overflow-x-auto", children: /* @__PURE__ */ r(
+            /* @__PURE__ */ r("div", { className: "mint:mt-1 mint:overflow-x-auto", children: /* @__PURE__ */ r(
               "table",
               {
                 ref: l,