@mintlify/msft-sdk 1.1.9 → 1.1.11

package/dist/components/nav-tree/index.js

@@ -1,14 +1,14 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { useComponents as k } from "../../context/components-context.js";
-import { DropdownMenu as w } from "./dropdown-menu.js";
-import { cn as p } from "../../utils/cn.js";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useRef as k, useEffect as w, useState as N } from "react";
+import { useComponents as v } from "../../context/components-context.js";
+import { cn as u } from "../../utils/cn.js";
+import { MethodPill as C } from "../Api/MethodPill.js";
 /* empty css               */
 function g({ isExpanded: t }) {
   return /* @__PURE__ */ n(
     "svg",
     {
-      className: p(
+      className: u(
         "mint:w-[16px] mint:h-[16px] mint:shrink-0 mint:transition-transform mint:duration-150 mint:text-[#6b7280] mint:dark:text-[#9ca3af]",
         t ? "mint:rotate-90" : "mint:rotate-0"
       ),
@@ -28,186 +28,199 @@ function g({ isExpanded: t }) {
     }
   );
 }
-function u({ item: t, activeId: l, level: m = 0 }) {
-  const f = m === 0 ? !0 : t.expanded ?? !1, [i, b] = v(f), { LinkComponent: c } = k(), o = t.children && t.children.length > 0, h = o && !t.href, e = t.href && l === t.href, s = t.icon;
-  if (h && m === 0)
-    return /* @__PURE__ */ r(
+function b({ item: t, activeId: o, level: l = 0 }) {
+  const x = l === 0 ? !0 : t.expanded ?? !1, [r, s] = N(x), { LinkComponent: p } = v(), c = t.children && t.children.length > 0, f = !t.href, d = t.href && o === t.href, e = t.icon;
+  if (f && l === 0)
+    return /* @__PURE__ */ m(
       "div",
       {
         id: "nav-group",
-        className: "mint:mb-6",
         role: "group",
         "aria-label": t.toc_title,
         children: [
-          /* @__PURE__ */ r("div", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3", children: [
-            s && /* @__PURE__ */ n(s, { className: "mint:w-5 mint:h-5", "aria-hidden": "true" }),
+          /* @__PURE__ */ m("div", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3", children: [
+            e && /* @__PURE__ */ n(e, { className: "mint:w-5 mint:h-5", "aria-hidden": "true" }),
             /* @__PURE__ */ n("span", { children: t.toc_title })
           ] }),
-          o && t.children && /* @__PURE__ */ n("ul", { className: "mint:flex mint:flex-col mint:gap-1", role: "list", children: t.children.map((a, d) => /* @__PURE__ */ n(
-            u,
+          c && t.children && /* @__PURE__ */ n("ul", { className: "mint:flex mint:flex-col", role: "list", children: t.children.map((i, h) => /* @__PURE__ */ n(
+            b,
             {
-              item: a,
-              activeId: l,
-              level: m + 1
+              item: i,
+              activeId: o,
+              level: l + 1
             },
-            `${a.href}-${d}`
+            `${i.href}-${h}`
           )) })
         ]
       }
     );
-  if (h && m > 0)
-    return /* @__PURE__ */ r("li", { className: "mint:list-none", children: [
-      /* @__PURE__ */ r(
+  if (f && l > 0)
+    return /* @__PURE__ */ m("li", { className: "mint:list-none", children: [
+      /* @__PURE__ */ m(
         "button",
         {
           id: "nav-group-toggle",
-          onClick: () => b(!i),
-          "aria-expanded": i,
-          "aria-label": `${i ? "Collapse" : "Expand"} ${t.toc_title} section`,
-          className: "mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
+          onClick: () => s(!r),
+          "aria-expanded": r,
+          "aria-label": `${r ? "Collapse" : "Expand"} ${t.toc_title} section`,
+          className: "mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:py-2 mint:px-3 mint:text-sm mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
           children: [
             /* @__PURE__ */ n("span", { className: "mint:flex-1 mint:min-w-0", children: t.toc_title }),
-            /* @__PURE__ */ n(g, { isExpanded: i })
+            /* @__PURE__ */ n(g, { isExpanded: r })
           ]
         }
       ),
-      o && i && t.children && /* @__PURE__ */ n(
+      c && r && t.children && /* @__PURE__ */ n(
         "ul",
         {
           className: "mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3",
           role: "group",
-          children: t.children.map((a, d) => /* @__PURE__ */ n(
-            u,
+          children: t.children.map((i, h) => /* @__PURE__ */ n(
+            b,
             {
-              item: a,
-              activeId: l,
-              level: m + 1
+              item: i,
+              activeId: o,
+              level: l + 1
             },
-            `${a.href}-${d}`
+            `${i.href}-${h}`
           ))
         }
       )
     ] });
-  const x = c || "a";
-  return o ? /* @__PURE__ */ r("li", { className: "mint:list-none", children: [
-    /* @__PURE__ */ r(
+  const a = p || "a";
+  return c ? /* @__PURE__ */ m("li", { className: "mint:list-none", children: [
+    /* @__PURE__ */ m(
       "button",
       {
         id: "nav-item-toggle",
-        onClick: () => b(!i),
-        "aria-expanded": i,
-        "aria-label": `${i ? "Collapse" : "Expand"} ${t.toc_title} section`,
-        className: p(
+        onClick: () => s(!r),
+        "aria-expanded": r,
+        "aria-label": `${r ? "Collapse" : "Expand"} ${t.toc_title} section`,
+        className: u(
           "mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
-          e && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
+          d && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
         ),
         children: [
           /* @__PURE__ */ n("span", { className: "mint:flex-1 mint:min-w-0", children: t.toc_title }),
-          /* @__PURE__ */ n(g, { isExpanded: i })
+          /* @__PURE__ */ n(g, { isExpanded: r })
         ]
       }
     ),
-    i && t.children && /* @__PURE__ */ n(
+    r && t.children && /* @__PURE__ */ n(
       "ul",
       {
         className: "mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3",
         role: "group",
-        children: t.children.map((a, d) => /* @__PURE__ */ n(
-          u,
+        children: t.children.map((i, h) => /* @__PURE__ */ n(
+          b,
           {
-            item: a,
-            activeId: l,
-            level: m + 1
+            item: i,
+            activeId: o,
+            level: l + 1
           },
-          `${a.href}-${d}`
+          `${i.href}-${h}`
         ))
       }
     )
-  ] }) : /* @__PURE__ */ n("li", { className: "mint:list-none", children: /* @__PURE__ */ n(
-    x,
+  ] }) : /* @__PURE__ */ n("li", { className: "mint:list-none", children: /* @__PURE__ */ m(
+    a,
     {
       id: "nav-item",
       href: t.href,
-      "aria-current": e ? "page" : void 0,
-      className: p(
-        "mint:relative mint:block mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
-        e && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
+      "aria-current": d ? "page" : void 0,
+      className: u(
+        "mint:relative mint:flex mint:items-center mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
+        d && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
       ),
-      children: t.toc_title
+      children: [
+        t.method && /* @__PURE__ */ n(
+          C,
+          {
+            isActive: !!d,
+            method: t.method,
+            shortMethod: !0
+          }
+        ),
+        t.toc_title
+      ]
     }
   ) });
 }
-function j({
+function I({
   navTree: t,
-  activeId: l,
-  className: m = "",
-  dropdown: f,
-  activeHref: i,
-  theme: b,
-  bottomLinks: c
+  activeId: o,
+  className: l = "",
+  activeHref: x,
+  theme: r,
+  bottomLinks: s
 }) {
-  const { LinkComponent: o } = k();
-  if (!t || t.items.length === 0)
+  const { LinkComponent: p } = v(), c = k(null), f = "mint-nav-scroll-position";
+  if (w(() => {
+    const e = c.current;
+    if (!e) return;
+    const a = sessionStorage.getItem(f);
+    a && (e.scrollTop = parseInt(a, 10));
+    const i = () => {
+      sessionStorage.setItem(
+        f,
+        e.scrollTop.toString()
+      );
+    };
+    return e.addEventListener("scroll", i), () => {
+      e.removeEventListener("scroll", i);
+    };
+  }, []), !t || t.items.length === 0)
     return null;
-  const h = o || "a";
-  return /* @__PURE__ */ r(
+  const d = p || "a";
+  return /* @__PURE__ */ m(
     "nav",
     {
       id: "nav-tree",
-      className: p(
-        "mint:flex mint:flex-col mint:gap-2 mint:h-full mint:min-h-0",
-        m,
-        b === "dark" && "dark"
+      className: u(
+        "mint:flex mint:flex-col mint:h-full mint:min-h-0",
+        l,
+        r === "dark" && "mint:dark"
       ),
       "aria-label": "Documentation navigation",
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ n(
           "div",
           {
             id: "nav-tree-content",
-            className: "mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 [scrollbar-gutter:stable] [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: [
-              f && /* @__PURE__ */ n(
-                w,
-                {
-                  dropdown: f,
-                  activeHref: i,
-                  className: "mint:mb-6"
-                }
-              ),
-              t.items.map((e, s) => /* @__PURE__ */ n(
-                u,
-                {
-                  item: e,
-                  activeId: l
-                },
-                `${e.href}-${s}`
-              ))
-            ]
+            ref: c,
+            className: "mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 mint:[scrollbar-gutter:stable] mint:px-3 mint:[scrollbar-width:thin] mint:[scrollbar-color:rgba(0,0,0,0.2)_transparent] mint: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 mint:space-y-6 mint:py-4",
+            children: t.items.map((e, a) => /* @__PURE__ */ n(
+              b,
+              {
+                item: e,
+                activeId: o
+              },
+              `${e.href}-${a}`
+            ))
           }
         ),
-        c && c.length > 0 && /* @__PURE__ */ r(
+        s && s.length > 0 && /* @__PURE__ */ m(
           "div",
           {
             id: "nav-tree-bottom-links",
             className: "mint:shrink-0 mint:w-full mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:mt-auto",
             children: [
-              /* @__PURE__ */ n("div", { className: "mint:h-px mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666] mint:mb-3" }),
-              /* @__PURE__ */ n("div", { className: "mint:flex mint:flex-col mint:gap-3 mint:p-3", children: c.map((e, s) => {
-                const x = e.icon;
-                return /* @__PURE__ */ r(
-                  h,
+              /* @__PURE__ */ n("div", { className: "mint:h-[0.5px] mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666]" }),
+              /* @__PURE__ */ n("div", { className: "mint:flex mint:flex-col mint:py-3 mint:px-3", children: s.map((e, a) => {
+                const i = e.icon;
+                return /* @__PURE__ */ m(
+                  d,
                   {
                     href: e.href,
                     target: "_blank",
                     rel: "noopener noreferrer",
-                    className: "mint:flex mint:items-center mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb]",
+                    className: "mint:flex mint:items-center mint:py-2 mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb] mint:px-2",
                     children: [
-                      /* @__PURE__ */ n(x, { className: "mint:w-5 mint:h-5 mint:shrink-0" }),
+                      /* @__PURE__ */ n(i, { className: "mint:w-5 mint:h-5 mint:shrink-0" }),
                       /* @__PURE__ */ n("span", { children: e.label })
                     ]
                   },
-                  s
+                  a
                 );
               }) })
             ]
@@ -218,7 +231,6 @@ function j({
   );
 }
 export {
-  w as DropdownMenu,
-  j as NavTree
+  I as NavTree
 };
 //# sourceMappingURL=index.js.map

package/dist/components/nav-tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/nav-tree/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { NavItem, NavTreeData } from \"../../types\";\nimport { useComponents } from \"../../context/components-context\";\nimport { DropdownConfig, DropdownMenu } from \"./dropdown-menu\";\nimport { cn } from \"../../utils/cn\";\nexport { DropdownMenu } from \"./dropdown-menu\";\nexport type { DropdownConfig, DropdownItem } from \"./dropdown-menu\";\nexport { MobileNavTree } from \"./mobile-nav\";\nexport type { MobileNavTreeProps } from \"./mobile-nav\";\nimport \"../../styles.css\";\n\nexport interface BottomLinkConfig {\n  href: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n}\n\ninterface NavTreeProps {\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  dropdown?: DropdownConfig;\n  activeHref?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  bottomLinks?: BottomLinkConfig[];\n}\n\ninterface TreeItemProps {\n  item: NavItem;\n  activeId?: string;\n  level?: number;\n}\n\nfunction ChevronIcon({ isExpanded }: { isExpanded: boolean }) {\n  return (\n    <svg\n      className={cn(\n        \"mint:w-[16px] mint:h-[16px] mint:shrink-0 mint:transition-transform mint:duration-150 mint:text-[#6b7280] mint:dark:text-[#9ca3af]\",\n        isExpanded ? \"mint:rotate-90\" : \"mint:rotate-0\"\n      )}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M9 5l7 7-7 7\"\n      />\n    </svg>\n  );\n}\n\nfunction TreeItemComponent({ item, activeId, level = 0 }: TreeItemProps) {\n  const defaultExpanded = level === 0 ? true : item.expanded ?? false;\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const { LinkComponent } = useComponents();\n  const hasChildren = item.children && item.children.length > 0;\n  const isGroup = hasChildren && !item.href;\n  const isActive = item.href && activeId === item.href;\n  const Icon = item.icon;\n\n  if (isGroup && level === 0) {\n    return (\n      <div\n        id=\"nav-group\"\n        className=\"mint:mb-6\"\n        role=\"group\"\n        aria-label={item.toc_title}\n      >\n        <div className=\"mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3\">\n          {Icon && <Icon className=\"mint:w-5 mint:h-5\" aria-hidden=\"true\" />}\n          <span>{item.toc_title}</span>\n        </div>\n        {hasChildren && item.children && (\n          <ul className=\"mint:flex mint:flex-col mint:gap-1\" role=\"list\">\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n\n  if (isGroup && level > 0) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-group-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className=\"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\"\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {hasChildren && isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  if (hasChildren) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-item-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className={cn(\n            \"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n            isActive &&\n              \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n          )}\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  return (\n    <li className=\"mint:list-none\">\n      <LinkElement\n        id=\"nav-item\"\n        href={item.href}\n        aria-current={isActive ? \"page\" : undefined}\n        className={cn(\n          \"mint:relative mint:block mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n          isActive &&\n            \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n        )}\n      >\n        {item.toc_title}\n      </LinkElement>\n    </li>\n  );\n}\n\nexport function NavTree({\n  navTree,\n  activeId,\n  className = \"\",\n  dropdown,\n  activeHref,\n  theme,\n  bottomLinks,\n}: NavTreeProps) {\n  const { LinkComponent } = useComponents();\n\n  if (!navTree || navTree.items.length === 0) {\n    return null;\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  return (\n    <nav\n      id=\"nav-tree\"\n      className={cn(\n        \"mint:flex mint:flex-col mint:gap-2 mint:h-full mint:min-h-0\",\n        className,\n        theme === \"dark\" && \"dark\"\n      )}\n      aria-label=\"Documentation navigation\"\n    >\n      <div\n        id=\"nav-tree-content\"\n        className=\"mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 [scrollbar-gutter:stable] [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\"\n      >\n        {dropdown && (\n          <DropdownMenu\n            dropdown={dropdown}\n            activeHref={activeHref}\n            className=\"mint:mb-6\"\n          />\n        )}\n        {navTree.items.map((item, index) => (\n          <TreeItemComponent\n            key={`${item.href}-${index}`}\n            item={item}\n            activeId={activeId}\n          />\n        ))}\n      </div>\n      {bottomLinks && bottomLinks.length > 0 && (\n        <div\n          id=\"nav-tree-bottom-links\"\n          className=\"mint:shrink-0 mint:w-full mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:mt-auto\"\n        >\n          <div className=\"mint:h-px mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666] mint:mb-3\"></div>\n          <div className=\"mint:flex mint:flex-col mint:gap-3 mint:p-3\">\n            {bottomLinks.map((link, index) => {\n              const Icon = link.icon;\n              return (\n                <LinkElement\n                  key={index}\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"mint:flex mint:items-center mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb]\"\n                >\n                  <Icon className=\"mint:w-5 mint:h-5 mint:shrink-0\" />\n                  <span>{link.label}</span>\n                </LinkElement>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </nav>\n  );\n}\n"],"names":["ChevronIcon","isExpanded","jsx","cn","TreeItemComponent","item","activeId","level","defaultExpanded","setIsExpanded","useState","LinkComponent","useComponents","hasChildren","isGroup","isActive","Icon","jsxs","child","index","LinkElement","NavTree","navTree","className","dropdown","activeHref","theme","bottomLinks","DropdownMenu","link"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/nav-tree/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport type { NavItem, NavTreeData } from \"../../types\";\nimport { useComponents } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\nimport { MethodPill } from \"../Api/MethodPill\";\nexport { MobileNavTree } from \"./mobile-nav\";\nexport type { MobileNavTreeProps } from \"./mobile-nav\";\nimport \"../../styles.css\";\n\nexport interface BottomLinkConfig {\n  href: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n}\n\ninterface NavTreeProps {\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  activeHref?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  bottomLinks?: BottomLinkConfig[];\n}\n\ninterface TreeItemProps {\n  item: NavItem;\n  activeId?: string;\n  level?: number;\n}\n\nfunction ChevronIcon({ isExpanded }: { isExpanded: boolean }) {\n  return (\n    <svg\n      className={cn(\n        \"mint:w-[16px] mint:h-[16px] mint:shrink-0 mint:transition-transform mint:duration-150 mint:text-[#6b7280] mint:dark:text-[#9ca3af]\",\n        isExpanded ? \"mint:rotate-90\" : \"mint:rotate-0\"\n      )}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M9 5l7 7-7 7\"\n      />\n    </svg>\n  );\n}\n\nfunction TreeItemComponent({ item, activeId, level = 0 }: TreeItemProps) {\n  const defaultExpanded = level === 0 ? true : item.expanded ?? false;\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const { LinkComponent } = useComponents();\n  const hasChildren = item.children && item.children.length > 0;\n  const isGroup = !item.href; // A group is any item without an href\n  const isActive = item.href && activeId === item.href;\n  const Icon = item.icon;\n\n  if (isGroup && level === 0) {\n    return (\n      <div\n        id=\"nav-group\"\n        role=\"group\"\n        aria-label={item.toc_title}\n      >\n        <div className=\"mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3\">\n          {Icon && <Icon className=\"mint:w-5 mint:h-5\" aria-hidden=\"true\" />}\n          <span>{item.toc_title}</span>\n        </div>\n        {hasChildren && item.children && (\n          <ul className=\"mint:flex mint:flex-col\" role=\"list\">\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n\n  if (isGroup && level > 0) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-group-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className=\"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:py-2 mint:px-3 mint:text-sm mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\"\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {hasChildren && isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  if (hasChildren) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-item-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className={cn(\n            \"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n            isActive &&\n              \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n          )}\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  return (\n    <li className=\"mint:list-none\">\n      <LinkElement\n        id=\"nav-item\"\n        href={item.href}\n        aria-current={isActive ? \"page\" : undefined}\n        className={cn(\n          \"mint:relative mint:flex mint:items-center mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n          isActive &&\n            \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n        )}\n      >\n        {item.method && (\n          <MethodPill\n            isActive={!!isActive}\n            method={item.method}\n            shortMethod={true}\n          />\n        )}\n        {item.toc_title}\n      </LinkElement>\n    </li>\n  );\n}\n\nexport function NavTree({\n  navTree,\n  activeId,\n  className = \"\",\n  activeHref,\n  theme,\n  bottomLinks,\n}: NavTreeProps) {\n  const { LinkComponent } = useComponents();\n  const navContentRef = useRef<HTMLDivElement>(null);\n  const SCROLL_POSITION_KEY = \"mint-nav-scroll-position\";\n\n  useEffect(() => {\n    const navElement = navContentRef.current;\n    if (!navElement) return;\n\n    const savedScrollPosition = sessionStorage.getItem(SCROLL_POSITION_KEY);\n    if (savedScrollPosition) {\n      navElement.scrollTop = parseInt(savedScrollPosition, 10);\n    }\n\n    const handleScroll = () => {\n      sessionStorage.setItem(\n        SCROLL_POSITION_KEY,\n        navElement.scrollTop.toString()\n      );\n    };\n\n    navElement.addEventListener(\"scroll\", handleScroll);\n\n    return () => {\n      navElement.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, []);\n\n  if (!navTree || navTree.items.length === 0) {\n    return null;\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  return (\n    <nav\n      id=\"nav-tree\"\n      className={cn(\n        \"mint:flex mint:flex-col mint:h-full mint:min-h-0\",\n        className,\n        theme === \"dark\" && \"mint:dark\"\n      )}\n      aria-label=\"Documentation navigation\"\n    >\n      <div\n        id=\"nav-tree-content\"\n        ref={navContentRef}\n        className=\"mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 mint:[scrollbar-gutter:stable] mint:px-3 mint:[scrollbar-width:thin] mint:[scrollbar-color:rgba(0,0,0,0.2)_transparent] mint: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 mint:space-y-6 mint:py-4\"\n      >\n        {navTree.items.map((item, index) => (\n          <TreeItemComponent\n            key={`${item.href}-${index}`}\n            item={item}\n            activeId={activeId}\n          />\n        ))}\n      </div>\n      {bottomLinks && bottomLinks.length > 0 && (\n        <div\n          id=\"nav-tree-bottom-links\"\n          className=\"mint:shrink-0 mint:w-full mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:mt-auto\"\n        >\n          <div className=\"mint:h-[0.5px] mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666]\"></div>\n          <div className=\"mint:flex mint:flex-col mint:py-3 mint:px-3\">\n            {bottomLinks.map((link, index) => {\n              const Icon = link.icon;\n              return (\n                <LinkElement\n                  key={index}\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"mint:flex mint:items-center mint:py-2 mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb] mint:px-2\"\n                >\n                  <Icon className=\"mint:w-5 mint:h-5 mint:shrink-0\" />\n                  <span>{link.label}</span>\n                </LinkElement>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </nav>\n  );\n}\n"],"names":["ChevronIcon","isExpanded","jsx","cn","TreeItemComponent","item","activeId","level","defaultExpanded","setIsExpanded","useState","LinkComponent","useComponents","hasChildren","isGroup","isActive","Icon","jsxs","child","index","LinkElement","MethodPill","NavTree","navTree","className","activeHref","theme","bottomLinks","navContentRef","useRef","SCROLL_POSITION_KEY","useEffect","navElement","savedScrollPosition","handleScroll","link"],"mappings":"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"}

package/dist/components/nav-tree/mobile-nav.js

@@ -1,57 +1,55 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Dialog as f, DialogBackdrop as p, DialogPanel as u } from "@headlessui/react";
-import { NavTree as b } from "./index.js";
-import { Dismiss16Regular as x } from "@fluentui/react-icons";
-import { ComponentsProvider as h } from "../../context/components-context.js";
-import { cn as k } from "../../utils/cn.js";
+import { Dialog as c, DialogBackdrop as f, DialogPanel as p } from "@headlessui/react";
+import { NavTree as u } from "./index.js";
+import { Dismiss16Regular as b } from "@fluentui/react-icons";
+import { ComponentsProvider as x } from "../../context/components-context.js";
+import { cn as h } from "../../utils/cn.js";
 /* empty css               */
-function B({
+function j({
   isOpen: i,
   setIsOpen: m,
   navTree: o,
   activeId: r,
   className: a = "",
   theme: e,
-  dropdown: l,
-  activeHref: s,
-  bottomLinks: d,
-  LinkComponent: c
+  activeHref: l,
+  bottomLinks: s,
+  LinkComponent: d
 }) {
-  return /* @__PURE__ */ t(h, { LinkComponent: c, children: /* @__PURE__ */ n(
-    f,
+  return /* @__PURE__ */ t(x, { LinkComponent: d, children: /* @__PURE__ */ n(
+    c,
     {
       open: i,
       onClose: () => m(!1),
-      className: k(
+      className: h(
         "mint:fixed mint:inset-0 mint:overflow-y-auto mint:z-50 mint:lg:hidden",
-        e === "dark" && "dark"
+        e === "dark" && "mint:dark"
       ),
       children: [
         /* @__PURE__ */ t(
-          p,
+          f,
           {
             transition: !0,
             className: "mint:fixed mint:inset-0 mint:bg-black/20 mint:dark:bg-black/80 mint:backdrop-blur mint:transition-opacity mint:duration-300 mint:ease-out mint:data-[closed]:opacity-0"
           }
         ),
         /* @__PURE__ */ n("div", { className: "mint:fixed mint:inset-0 mint:flex", children: [
-          i && /* @__PURE__ */ t(v, { setIsOpen: m }),
+          i && /* @__PURE__ */ t(k, { setIsOpen: m }),
           /* @__PURE__ */ t(
-            u,
+            p,
             {
               id: "mobile-nav",
               transition: !0,
               className: "mint:flex mint:flex-col mint:relative mint:bg-white mint:dark:bg-[#0f0f0f] mint:w-[85vw] mint:min-w-[19rem] mint:max-w-[22rem] mint:min-h-full mint:transition-transform mint:duration-100 mint:ease-in-out mint:data-[closed]:-translate-x-full",
               children: /* @__PURE__ */ t("div", { className: "mint:flex mint:flex-col mint:flex-1 mint:p-4 mint:pt-4 mint:pb-12 mint:overflow-y-auto mint:h-full", children: /* @__PURE__ */ t(
-                b,
+                u,
                 {
                   navTree: o,
                   activeId: r,
                   className: a,
-                  dropdown: l,
-                  activeHref: s,
+                  activeHref: l,
                   theme: e,
-                  bottomLinks: d
+                  bottomLinks: s
                 }
               ) })
             }
@@ -61,7 +59,7 @@ function B({
     }
   ) });
 }
-const v = ({
+const k = ({
   setIsOpen: i
 }) => /* @__PURE__ */ n(
   "button",
@@ -70,12 +68,12 @@ const v = ({
     onClick: () => i(!1),
     className: "mint:absolute mint:bg-white mint:dark:bg-[#0f0f0f] mint:rounded-full mint:top-4 mint:right-4 mint:w-8 mint:h-8 mint:flex mint:items-center mint:justify-center mint:border-none mint:cursor-pointer",
     children: [
-      /* @__PURE__ */ t("span", { className: "mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 [clip:rect(0,0,0,0)]", children: "Close navigation" }),
-      /* @__PURE__ */ t(x, { className: "mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:hover:text-[#4b5563] mint:dark:hover:text-[#d1d5db]" })
+      /* @__PURE__ */ t("span", { className: "mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 mint:[clip:rect(0,0,0,0)]", children: "Close navigation" }),
+      /* @__PURE__ */ t(b, { className: "mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:hover:text-[#4b5563] mint:dark:hover:text-[#d1d5db]" })
     ]
   }
 );
 export {
-  B as MobileNavTree
+  j as MobileNavTree
 };
 //# sourceMappingURL=mobile-nav.js.map

package/dist/components/nav-tree/mobile-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-nav.js","sources":["../../../src/components/nav-tree/mobile-nav.tsx"],"sourcesContent":["import { NavTreeData, LinkComponent } from \"../../types\";\nimport { Dialog, DialogBackdrop, DialogPanel } from \"@headlessui/react\";\nimport { DropdownConfig, NavTree, BottomLinkConfig } from \"./index\";\nimport { Dismiss16Regular } from \"@fluentui/react-icons\";\nimport { ComponentsProvider } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\nimport \"../../styles.css\";\n\nexport interface MobileNavTreeProps {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  dropdown?: DropdownConfig;\n  activeHref?: string;\n  bottomLinks?: BottomLinkConfig[];\n  LinkComponent?: LinkComponent;\n}\n\nexport function MobileNavTree({\n  isOpen,\n  setIsOpen,\n  navTree,\n  activeId,\n  className = \"\",\n  theme,\n  dropdown,\n  activeHref,\n  bottomLinks,\n  LinkComponent,\n}: MobileNavTreeProps) {\n  return (\n    <ComponentsProvider LinkComponent={LinkComponent}>\n      <Dialog\n        open={isOpen}\n        onClose={() => setIsOpen(false)}\n        className={cn(\n          \"mint:fixed mint:inset-0 mint:overflow-y-auto mint:z-50 mint:lg:hidden\",\n          theme === \"dark\" && \"dark\"\n        )}\n      >\n        <DialogBackdrop\n          transition\n          className=\"mint:fixed mint:inset-0 mint:bg-black/20 mint:dark:bg-black/80 mint:backdrop-blur mint:transition-opacity mint:duration-300 mint:ease-out mint:data-[closed]:opacity-0\"\n        />\n        <div className=\"mint:fixed mint:inset-0 mint:flex\">\n          {isOpen && <CloseButton setIsOpen={setIsOpen} />}\n          <DialogPanel\n            id=\"mobile-nav\"\n            transition\n            className=\"mint:flex mint:flex-col mint:relative mint:bg-white mint:dark:bg-[#0f0f0f] mint:w-[85vw] mint:min-w-[19rem] mint:max-w-[22rem] mint:min-h-full mint:transition-transform mint:duration-100 mint:ease-in-out mint:data-[closed]:-translate-x-full\"\n          >\n            <div className=\"mint:flex mint:flex-col mint:flex-1 mint:p-4 mint:pt-4 mint:pb-12 mint:overflow-y-auto mint:h-full\">\n              <NavTree\n                navTree={navTree}\n                activeId={activeId}\n                className={className}\n                dropdown={dropdown}\n                activeHref={activeHref}\n                theme={theme}\n                bottomLinks={bottomLinks}\n              />\n            </div>\n          </DialogPanel>\n        </div>\n      </Dialog>\n    </ComponentsProvider>\n  );\n}\n\nconst CloseButton = ({\n  setIsOpen,\n}: {\n  setIsOpen: (isOpen: boolean) => void;\n}) => {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => setIsOpen(false)}\n      className=\"mint:absolute mint:bg-white mint:dark:bg-[#0f0f0f] mint:rounded-full mint:top-4 mint:right-4 mint:w-8 mint:h-8 mint:flex mint:items-center mint:justify-center mint:border-none mint:cursor-pointer\"\n    >\n      <span className=\"mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 [clip:rect(0,0,0,0)]\">\n        Close navigation\n      </span>\n      <Dismiss16Regular className=\"mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:hover:text-[#4b5563] mint:dark:hover:text-[#d1d5db]\" />\n    </button>\n  );\n};\n"],"names":["MobileNavTree","isOpen","setIsOpen","navTree","activeId","className","theme","dropdown","activeHref","bottomLinks","LinkComponent","jsx","ComponentsProvider","jsxs","Dialog","cn","DialogBackdrop","CloseButton","DialogPanel","NavTree","Dismiss16Regular"],"mappings":";;;;;;;AAqBO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AACF,GAAuB;AACrB,SACE,gBAAAC,EAACC,GAAA,EAAmB,eAAeF,GACjC,UAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMb;AAAA,MACN,SAAS,MAAMC,EAAU,EAAK;AAAA,MAC9B,WAAWa;AAAA,QACT;AAAA,QACAT,MAAU,UAAU;AAAA,MAAA;AAAA,MAGtB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAH,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,UAAAZ,KAAU,gBAAAU,EAACM,KAAY,WAAAf,EAAA,CAAsB;AAAA,UAC9C,gBAAAS;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,YAAU;AAAA,cACV,WAAU;AAAA,cAEV,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,sGACb,UAAA,gBAAAA;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,SAAAhB;AAAA,kBACA,UAAAC;AAAA,kBACA,WAAAC;AAAA,kBACA,UAAAE;AAAA,kBACA,YAAAC;AAAA,kBACA,OAAAF;AAAA,kBACA,aAAAG;AAAA,gBAAA;AAAA,cAAA,EACF,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAMQ,IAAc,CAAC;AAAA,EACnB,WAAAf;AACF,MAII,gBAAAW;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAS,MAAMX,EAAU,EAAK;AAAA,IAC9B,WAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,wIAAuI,UAAA,oBAEvJ;AAAA,MACA,gBAAAA,EAACS,GAAA,EAAiB,WAAU,0HAAA,CAA0H;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"mobile-nav.js","sources":["../../../src/components/nav-tree/mobile-nav.tsx"],"sourcesContent":["import { NavTreeData, LinkComponent } from \"../../types\";\nimport { Dialog, DialogBackdrop, DialogPanel } from \"@headlessui/react\";\nimport { NavTree, BottomLinkConfig } from \"./index\";\nimport { Dismiss16Regular } from \"@fluentui/react-icons\";\nimport { ComponentsProvider } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\nimport \"../../styles.css\";\n\nexport interface MobileNavTreeProps {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  activeHref?: string;\n  bottomLinks?: BottomLinkConfig[];\n  LinkComponent?: LinkComponent;\n}\n\nexport function MobileNavTree({\n  isOpen,\n  setIsOpen,\n  navTree,\n  activeId,\n  className = \"\",\n  theme,\n  activeHref,\n  bottomLinks,\n  LinkComponent,\n}: MobileNavTreeProps) {\n  return (\n    <ComponentsProvider LinkComponent={LinkComponent}>\n      <Dialog\n        open={isOpen}\n        onClose={() => setIsOpen(false)}\n        className={cn(\n          \"mint:fixed mint:inset-0 mint:overflow-y-auto mint:z-50 mint:lg:hidden\",\n          theme === \"dark\" && \"mint:dark\"\n        )}\n      >\n        <DialogBackdrop\n          transition\n          className=\"mint:fixed mint:inset-0 mint:bg-black/20 mint:dark:bg-black/80 mint:backdrop-blur mint:transition-opacity mint:duration-300 mint:ease-out mint:data-[closed]:opacity-0\"\n        />\n        <div className=\"mint:fixed mint:inset-0 mint:flex\">\n          {isOpen && <CloseButton setIsOpen={setIsOpen} />}\n          <DialogPanel\n            id=\"mobile-nav\"\n            transition\n            className=\"mint:flex mint:flex-col mint:relative mint:bg-white mint:dark:bg-[#0f0f0f] mint:w-[85vw] mint:min-w-[19rem] mint:max-w-[22rem] mint:min-h-full mint:transition-transform mint:duration-100 mint:ease-in-out mint:data-[closed]:-translate-x-full\"\n          >\n            <div className=\"mint:flex mint:flex-col mint:flex-1 mint:p-4 mint:pt-4 mint:pb-12 mint:overflow-y-auto mint:h-full\">\n              <NavTree\n                navTree={navTree}\n                activeId={activeId}\n                className={className}\n                activeHref={activeHref}\n                theme={theme}\n                bottomLinks={bottomLinks}\n              />\n            </div>\n          </DialogPanel>\n        </div>\n      </Dialog>\n    </ComponentsProvider>\n  );\n}\n\nconst CloseButton = ({\n  setIsOpen,\n}: {\n  setIsOpen: (isOpen: boolean) => void;\n}) => {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => setIsOpen(false)}\n      className=\"mint:absolute mint:bg-white mint:dark:bg-[#0f0f0f] mint:rounded-full mint:top-4 mint:right-4 mint:w-8 mint:h-8 mint:flex mint:items-center mint:justify-center mint:border-none mint:cursor-pointer\"\n    >\n      <span className=\"mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 mint:[clip:rect(0,0,0,0)]\">\n        Close navigation\n      </span>\n      <Dismiss16Regular className=\"mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:hover:text-[#4b5563] mint:dark:hover:text-[#d1d5db]\" />\n    </button>\n  );\n};\n"],"names":["MobileNavTree","isOpen","setIsOpen","navTree","activeId","className","theme","activeHref","bottomLinks","LinkComponent","jsx","ComponentsProvider","jsxs","Dialog","cn","DialogBackdrop","CloseButton","DialogPanel","NavTree","Dismiss16Regular"],"mappings":";;;;;;;AAoBO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AACF,GAAuB;AACrB,SACE,gBAAAC,EAACC,GAAA,EAAmB,eAAeF,GACjC,UAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMZ;AAAA,MACN,SAAS,MAAMC,EAAU,EAAK;AAAA,MAC9B,WAAWY;AAAA,QACT;AAAA,QACAR,MAAU,UAAU;AAAA,MAAA;AAAA,MAGtB,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAH,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,UAAAX,KAAU,gBAAAS,EAACM,KAAY,WAAAd,EAAA,CAAsB;AAAA,UAC9C,gBAAAQ;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,YAAU;AAAA,cACV,WAAU;AAAA,cAEV,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,sGACb,UAAA,gBAAAA;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,SAAAf;AAAA,kBACA,UAAAC;AAAA,kBACA,WAAAC;AAAA,kBACA,YAAAE;AAAA,kBACA,OAAAD;AAAA,kBACA,aAAAE;AAAA,gBAAA;AAAA,cAAA,EACF,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAMQ,IAAc,CAAC;AAAA,EACnB,WAAAd;AACF,MAII,gBAAAU;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAS,MAAMV,EAAU,EAAK;AAAA,IAC9B,WAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,6IAA4I,UAAA,oBAE5J;AAAA,MACA,gBAAAA,EAACS,GAAA,EAAiB,WAAU,0HAAA,CAA0H;AAAA,IAAA;AAAA,EAAA;AAAA;"}