@unterberg/nivel 0.1.14 → 0.2.1

package/dist/{chunk-SH5XWPXW.js → chunk-AQJQDMKW.js}

@@ -13,19 +13,18 @@ import {
 } from "./chunk-ESAHWFDZ.js";
 import {
   createHeadingSlugger,
+  getDocsIconMapKey,
   normalizeHeadingTitle
-} from "./chunk-SOVTSE5J.js";
+} from "./chunk-AT4O3RRN.js";
 import {
   UniversalMdxProvider,
-  renderInlineMarkdown
-} from "./chunk-L6ZVB6XH.js";
-import {
   getActiveSectionByPathname,
   getResolvedPageByPathname,
   getResolvedSectionById,
   isSamePagePathname,
+  renderInlineMarkdown,
   resolveDocsHref
-} from "./chunk-QWIYQPCW.js";
+} from "./chunk-WMHFKLPG.js";
 import {
   nivelAssetUrl,
   withSiteBaseUrl
@@ -33,19 +32,18 @@ import {
 
 // src/runtime/client/AppLayout.tsx
 import { cmMerge as cmMerge5 } from "@classmatejs/react";
-import { usePageContext as usePageContext2 } from "vike-react/usePageContext";
+import { usePageContext as usePageContext3 } from "vike-react/usePageContext";
 
 // src/runtime/client/components/Navbar/index.tsx
 import cm3 from "@classmatejs/react";
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { usePageContext } from "vike-react/usePageContext";
+import { usePageContext as usePageContext2 } from "vike-react/usePageContext";
 
 // src/runtime/client/components/Search.tsx
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var searchModalModulePromise = null;
 var loadSearchModalModule = () => {
-  searchModalModulePromise ??= import("./SearchModal-YJZFUB53.js");
+  searchModalModulePromise ??= import("./SearchModal-Q2MTOIZU.js");
   return searchModalModulePromise;
 };
 var Search = () => {
@@ -249,8 +247,8 @@ var ThemeSwitch = ({ theme }) => {
       onClick: () => setThemePreference(effectiveThemePreference === "light" ? "dark" : "light"),
       className: "relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-base-muted-light bg-base-200",
       children: [
-        /* @__PURE__ */ jsx4(Sun, { className: "h-4 w-4 dark:hidden" }),
-        /* @__PURE__ */ jsx4(Moon, { className: "hidden h-4 w-4 dark:block" })
+        /* @__PURE__ */ jsx4(Sun, { className: "size-4 dark:hidden" }),
+        /* @__PURE__ */ jsx4(Moon, { className: "hidden size-4 dark:block" })
       ]
     }
   );
@@ -295,6 +293,7 @@ var DocsNavbar = ({
     /* @__PURE__ */ jsx6("div", { className: "lg:min-w-76 min-w-none", children: /* @__PURE__ */ jsx6(Brand, { brand: docs.brand }) }),
     /* @__PURE__ */ jsx6(StyledNav, { "aria-label": "Primary", children: /* @__PURE__ */ jsxs4(StyledNavList, { className: "", children: [
       docs.navbarItems.map((item) => {
+        const ItemIcon = docs.docsIconMap[getDocsIconMapKey("section", item.id)];
         const isMegaMenuItemActive = isMegaMenuOpen && hoveredSectionId === item.id;
         return /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsx6(
           "a",
@@ -314,12 +313,13 @@ var DocsNavbar = ({
                   activeSection?.id === item.id ? "btn-primary btn-soft" : "btn-ghost "
                 ),
                 children: [
+                  ItemIcon ? /* @__PURE__ */ jsx6(ItemIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
                   renderInlineMarkdown(item.title),
                   /* @__PURE__ */ jsx6(
                     ChevronDown,
                     {
                       className: cmMerge2(
-                        "h-4 w-4 shrink-0 transition-transform duration-200",
+                        "size-4 shrink-0 transition-transform duration-200",
                         isMegaMenuItemActive ? "rotate-180" : "rotate-0"
                       )
                     }
@@ -338,7 +338,7 @@ var DocsNavbar = ({
           className: "btn btn-ghost btn-sm text-base md:min-w-30 px-2 whitespace-nowrap tracking-tight",
           children: [
             "Search",
-            /* @__PURE__ */ jsx6(TextSearch, { className: "h-4 w-4" })
+            /* @__PURE__ */ jsx6(TextSearch, { className: "size-4" })
           ]
         }
       ) }) : null
@@ -378,6 +378,7 @@ var LandingPageNavbar = ({
     /* @__PURE__ */ jsx7("div", { className: "min-w-40", children: /* @__PURE__ */ jsx7(Brand, { brand: docs.brand }) }),
     /* @__PURE__ */ jsx7(StyledNav2, { "aria-label": "Primary", className: "flex-1 flex hidden lg:flex", children: /* @__PURE__ */ jsxs5(StyledNavList2, { className: "justify-end ", children: [
       docs.navbarItems.map((item) => {
+        const ItemIcon = docs.docsIconMap[getDocsIconMapKey("section", item.id)];
         const isMegaMenuItemActive = isMegaMenuOpen && hoveredSectionId === item.id;
         return /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
           "a",
@@ -396,12 +397,13 @@ var LandingPageNavbar = ({
                   "btn btn-ghost text-base lg:text-lg btn-sm lg:min-w-30 px-2 whitespace-nowrap tracking-tight"
                 ),
                 children: [
+                  ItemIcon ? /* @__PURE__ */ jsx7(ItemIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
                   renderInlineMarkdown(item.title),
                   /* @__PURE__ */ jsx7(
                     ChevronDown2,
                     {
                       className: cmMerge3(
-                        "h-4 w-4 shrink-0 transition-transform duration-200",
+                        "size-4 shrink-0 transition-transform duration-200",
                         isMegaMenuItemActive ? "rotate-180" : "rotate-0"
                       )
                     }
@@ -420,7 +422,7 @@ var LandingPageNavbar = ({
           className: "btn btn-ghost btn-sm text-base lg:text-lg lg:min-w-30 px-2 whitespace-nowrap tracking-tight",
           children: [
             "Search",
-            /* @__PURE__ */ jsx7(TextSearch2, { className: "h-4 w-4" })
+            /* @__PURE__ */ jsx7(TextSearch2, { className: "size-4" })
           ]
         }
       ) }) : null
@@ -433,8 +435,27 @@ var LandingPageNavbar_default = LandingPageNavbar;
 
 // src/runtime/client/components/Navbar/MegaMenu.tsx
 import { cmMerge as cmMerge4 } from "@classmatejs/react";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import { usePageContext } from "vike-react/usePageContext";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var findActiveItemId = (section, currentHref) => {
+  if (!section) {
+    return void 0;
+  }
+  for (const item of section.items) {
+    if (item.href === currentHref) {
+      return item.id;
+    }
+    if (item.kind === "group") {
+      for (const child of item.items) {
+        if (child.href === currentHref) {
+          return child.id;
+        }
+      }
+    }
+  }
+  return void 0;
+};
 var MegaMenu = ({
   isActive,
   onOpen,
@@ -444,9 +465,18 @@ var MegaMenu = ({
   hoveredSectionId,
   isLandingPage
 }) => {
+  const docs = useDocsGlobalContext();
+  const { urlPathname } = usePageContext();
   const visibleSectionId = hoveredSectionId ?? activeSectionId ?? sections[0]?.id;
   const [visibleSectionElement, setVisibleSectionElement] = useState2(null);
   const [contentHeight, setContentHeight] = useState2(0);
+  const activeItemId = useMemo(
+    () => findActiveItemId(
+      sections.find((section) => section.id === visibleSectionId),
+      urlPathname
+    ),
+    [sections, visibleSectionId, urlPathname]
+  );
   useEffect2(() => {
     if (!isActive || !visibleSectionId || visibleSectionElement === null) {
       return;
@@ -486,8 +516,8 @@ var MegaMenu = ({
           "div",
           {
             className: cmMerge4(
-              "relative z-4 overflow-hidden transition-[height] bg-base-100 duration-300",
-              isLandingPage && !isActive ? "" : "border-b border-base-muted-light ease-out"
+              "relative z-4 overflow-hidden transition-[height] bg-base-100 duration-300 ease-out",
+              !isLandingPage && isActive ? "" : "border-b border-base-muted-light"
             ),
             style: { height: isActive ? contentHeight : 0 },
             children: /* @__PURE__ */ jsx8(LayoutComponent, { $size: "sm", children: /* @__PURE__ */ jsx8(
@@ -505,19 +535,52 @@ var MegaMenu = ({
                       section.id === visibleSectionId ? "opacity-100" : "opacity-0 pointer-events-none",
                       "transition-all absolute w-full duration-300"
                     ),
-                    children: section.items.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "mt-2 flex ", children: section.items.map(
-                      (child) => child.showInNav !== false && /* @__PURE__ */ jsxs6("li", { className: "flex-1 py-3 mb-6 px-4", children: [
-                        child.href ? /* @__PURE__ */ jsx8(
+                    children: section.items.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "mt-2 flex ", children: section.items.map((child) => {
+                      if (child.showInNav === false) {
+                        return null;
+                      }
+                      const ChildIcon = docs.docsIconMap[getDocsIconMapKey(child.kind, child.id)];
+                      return /* @__PURE__ */ jsxs6("li", { className: "flex-1 py-3 mb-6 px-4", children: [
+                        child.href ? /* @__PURE__ */ jsxs6(
                           "a",
                           {
-                            className: "mb-4 block text-lg font-semibold tracking-tight",
+                            className: cmMerge4(
+                              "mb-4 flex items-center gap-2 text-lg font-semibold tracking-tight",
+                              activeItemId === child.id && "text-primary!"
+                            ),
                             href: withSiteBaseUrl(child.href),
-                            children: child.title
+                            children: [
+                              ChildIcon ? /* @__PURE__ */ jsx8(ChildIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
+                              /* @__PURE__ */ jsx8("span", { children: child.title })
+                            ]
                           }
-                        ) : /* @__PURE__ */ jsx8("span", { className: "mb-4 block text-lg font-semibold tracking-tight", children: child.title }),
-                        child.kind === "group" && child.items.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "menu border-l border-base-muted-light py-0 w-full", children: child.items.map((subChild) => /* @__PURE__ */ jsx8("li", { children: subChild.href ? /* @__PURE__ */ jsx8("a", { href: withSiteBaseUrl(subChild.href), onClick: onClose, children: renderInlineMarkdown(subChild.title) }) : /* @__PURE__ */ jsx8("span", { children: renderInlineMarkdown(subChild.title) }) }, subChild.id)) })
-                      ] }, child.id)
-                    ) })
+                        ) : /* @__PURE__ */ jsxs6("span", { className: "mb-4 flex items-center gap-2 text-lg font-semibold tracking-tight", children: [
+                          ChildIcon ? /* @__PURE__ */ jsx8(ChildIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
+                          /* @__PURE__ */ jsx8("span", { children: child.title })
+                        ] }),
+                        child.kind === "group" && child.items.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "menu border-l border-base-muted-light py-0 w-full", children: child.items.map((subChild) => {
+                          const SubChildIcon = docs.docsIconMap[getDocsIconMapKey(subChild.kind, subChild.id)];
+                          return /* @__PURE__ */ jsx8("li", { children: subChild.href ? /* @__PURE__ */ jsx8(
+                            "a",
+                            {
+                              className: cmMerge4(
+                                "text-base-muted hover:text-base-content",
+                                activeItemId === subChild.id && "text-primary! font-semibold"
+                              ),
+                              href: withSiteBaseUrl(subChild.href),
+                              onClick: onClose,
+                              children: /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+                                SubChildIcon ? /* @__PURE__ */ jsx8(SubChildIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
+                                /* @__PURE__ */ jsx8("span", { children: renderInlineMarkdown(subChild.title) })
+                              ] })
+                            }
+                          ) : /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+                            SubChildIcon ? /* @__PURE__ */ jsx8(SubChildIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
+                            /* @__PURE__ */ jsx8("span", { children: renderInlineMarkdown(subChild.title) })
+                          ] }) }, subChild.id);
+                        }) })
+                      ] }, child.id);
+                    }) })
                   },
                   section.id
                 ))
@@ -611,33 +674,17 @@ var useMegaMenu_default = useMegaMenu;
 
 // src/runtime/client/components/Navbar/index.tsx
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var LARGE_SCREEN_MEDIA_QUERY = "(min-width: 1024px)";
 var NavbarNew = () => {
   const docs = useDocsGlobalContext();
-  const { urlPathname, urlParsed } = usePageContext();
+  const { urlPathname, urlParsed } = usePageContext2();
   const isLandingPage = urlParsed.pathname === "/";
   const sections = docs.sidebarSections;
   const activeSection = getActiveSectionByPathname(docs, urlPathname);
   const { toggle: toggleSearch } = useDocsSearchActions();
-  const [isLargeScreen, setIsLargeScreen] = useState4(false);
   const { closeMegaMenu, hoveredSectionId, isMegaMenuOpen, openMegaMenu, scheduleMegaMenuOpen, scheduleMegaMenuClose } = useMegaMenu_default({
     activeSectionId: activeSection?.id,
     sections
   });
-  useEffect4(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-      return;
-    }
-    const mediaQueryList = window.matchMedia(LARGE_SCREEN_MEDIA_QUERY);
-    const updateLargeScreenState = () => {
-      setIsLargeScreen(mediaQueryList.matches);
-    };
-    updateLargeScreenState();
-    mediaQueryList.addEventListener("change", updateLargeScreenState);
-    return () => {
-      mediaQueryList.removeEventListener("change", updateLargeScreenState);
-    };
-  }, []);
   return /* @__PURE__ */ jsxs7(StyledNavbar, { $border: isLandingPage, children: [
     /* @__PURE__ */ jsx9(LayoutComponent, { children: isLandingPage ? /* @__PURE__ */ jsx9(
       LandingPageNavbar_default,
@@ -664,7 +711,7 @@ var NavbarNew = () => {
       }
     ) }),
     /* @__PURE__ */ jsx9(Search, {}),
-    isLargeScreen ? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9(
       MegaMenu,
       {
         sections,
@@ -675,7 +722,7 @@ var NavbarNew = () => {
         onClose: scheduleMegaMenuClose,
         isLandingPage
       }
-    ) : null
+    )
   ] });
 };
 var Navbar_default = NavbarNew;
@@ -686,18 +733,18 @@ var StyledNavbar = cm3.header`
 `;
 
 // src/runtime/client/components/UserSettingsSync.tsx
-import { useEffect as useEffect5, useMemo } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
 var UserSettingsSync = ({ theme }) => {
   const themePreference = useDocsUserSettingsStore((state) => state.themePreference);
   const lightTheme = theme?.light ?? "consumer-light";
   const darkTheme = theme?.dark ?? "consumer-dark";
   const defaultThemePreference = theme?.defaultPreference ?? "light";
-  const resolvedTheme = useMemo(
+  const resolvedTheme = useMemo2(
     () => ({ light: lightTheme, dark: darkTheme, defaultPreference: defaultThemePreference }),
     [darkTheme, defaultThemePreference, lightTheme]
   );
   const effectiveThemePreference = resolveThemePreference(themePreference, resolvedTheme);
-  useEffect5(() => {
+  useEffect4(() => {
     applyThemePreference(effectiveThemePreference, resolvedTheme);
   }, [effectiveThemePreference, resolvedTheme]);
   return null;
@@ -707,8 +754,8 @@ var UserSettingsSync = ({ theme }) => {
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var runtimeStore = createDocsRuntimeStore();
 var AppLayout = ({ children, header }) => {
-  const { urlPathname } = usePageContext2();
-  const pageContext = usePageContext2();
+  const { urlPathname } = usePageContext3();
+  const pageContext = usePageContext3();
   const docs = getDocsFromGlobalContext(pageContext);
   const isLandingPage = urlPathname === "/";
   return /* @__PURE__ */ jsx10(DocsRuntimeStoreProvider, { store: runtimeStore, children: /* @__PURE__ */ jsxs8(DocsGlobalContextProvider, { docs, children: [
@@ -868,9 +915,9 @@ var PaginationCard = ({ item, direction, isOffset }) => {
               isPrevious ? "justify-start" : "justify-end"
             ),
             children: [
-              isPrevious && /* @__PURE__ */ jsx15(ChevronLeft, { className: "h-4 w-4" }),
+              isPrevious && /* @__PURE__ */ jsx15(ChevronLeft, { className: "size-4" }),
               /* @__PURE__ */ jsx15("span", { children: isPrevious ? "Previous" : "Next" }),
-              !isPrevious && /* @__PURE__ */ jsx15(ChevronRight, { className: "h-4 w-4" })
+              !isPrevious && /* @__PURE__ */ jsx15(ChevronRight, { className: "size-4" })
             ]
           }
         )
@@ -906,11 +953,11 @@ var DocsFooter = memo2(() => {
   return /* @__PURE__ */ jsxs13("footer", { className: "mb-8 mt-12 text-sm border-t border-base-muted-light pt-10", children: [
     /* @__PURE__ */ jsxs13("div", { className: "mb-16 flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs13("a", { href: "edit", className: "btn btn-sm btn-primary btn-soft", children: [
-        /* @__PURE__ */ jsx16(Pencil, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsx16(Pencil, { className: "size-3" }),
         " Edit this page"
       ] }),
       /* @__PURE__ */ jsxs13("a", { href: "edit", className: "btn btn-sm btn-primary btn-soft", children: [
-        /* @__PURE__ */ jsx16(Bug, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsx16(Bug, { className: "size-3" }),
         " Report Issue"
       ] })
     ] }),
@@ -922,7 +969,7 @@ var DocsFooter = memo2(() => {
 });
 
 // src/runtime/client/components/HeadingLinkCopy.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect5 } from "react";
 var copyText = async (value) => {
   try {
     await navigator.clipboard.writeText(value);
@@ -941,7 +988,7 @@ var copyText = async (value) => {
 };
 var getHeadingLink = (target) => target instanceof Element ? target.closest("a[data-copy-heading-link]") : null;
 var HeadingLinkCopy = () => {
-  useEffect6(() => {
+  useEffect5(() => {
     const handleClick = (event) => {
       if (event.defaultPrevented || event.button !== 0) {
         return;
@@ -973,8 +1020,8 @@ var HeadingLinkCopy = () => {
 
 // src/runtime/client/components/Sidebar.tsx
 import { cmMerge as cmMerge7 } from "@classmatejs/react";
-import { memo as memo3, useEffect as useEffect7, useRef as useRef2 } from "react";
-import { usePageContext as usePageContext3 } from "vike-react/usePageContext";
+import { memo as memo3, useEffect as useEffect6, useRef as useRef2 } from "react";
+import { usePageContext as usePageContext4 } from "vike-react/usePageContext";
 
 // src/runtime/client/components/docsNavigation.ts
 var containsActiveHref = (items, currentHref) => {
@@ -1007,7 +1054,7 @@ var useAutoOpenDetails = (nodeId, isOpenByDefault, hasActiveDescendant) => {
   const storedOpen = useDocsSidebarStore((state) => state.openNodes[nodeId]);
   const { setNodeOpen } = useDocsSidebarActions();
   const isOpen = storedOpen === void 0 ? isOpenByDefault || hasActiveDescendant : storedOpen || hasActiveDescendant;
-  useEffect7(() => {
+  useEffect6(() => {
     if (hasActiveDescendant) {
       setNodeOpen(nodeId, true);
       return;
@@ -1021,7 +1068,7 @@ var useAutoOpenDetails = (nodeId, isOpenByDefault, hasActiveDescendant) => {
     setIsOpen: (nextOpen) => setNodeOpen(nodeId, nextOpen)
   };
 };
-var SidebarPageLink = ({ title, href, currentHref }) => {
+var SidebarPageLink = ({ title, href, currentHref, icon: Icon }) => {
   return /* @__PURE__ */ jsx17("li", { className: "rounded-none", children: /* @__PURE__ */ jsx17(
     "a",
     {
@@ -1030,24 +1077,33 @@ var SidebarPageLink = ({ title, href, currentHref }) => {
         "text-base-muted hover:text-base-content justify-start hover:bg-base-200",
         href === currentHref && "text-primary! font-semibold bg-base-200"
       ),
-      children: renderInlineMarkdown(title, { codeClassName: "text-sm!" })
+      children: /* @__PURE__ */ jsxs14("span", { className: "flex items-center gap-2", children: [
+        Icon ? /* @__PURE__ */ jsx17(Icon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ jsx17("span", { children: renderInlineMarkdown(title, { codeClassName: "text-sm!" }) })
+      ] })
     }
   ) });
 };
-var SidebarGroupDivider = ({ title }) => {
-  return /* @__PURE__ */ jsx17("li", { className: "ml-3 mt-2 mb-2 border-b border-base-muted-light text-xs text-base-muted-medium pointer-events-none font-semibold", children: /* @__PURE__ */ jsx17("span", { className: "-ml-3", children: renderInlineMarkdown(title, { codeClassName: "text-sm!" }) }) });
+var SidebarGroupDivider = ({ title, icon: Icon }) => {
+  return /* @__PURE__ */ jsx17("li", { className: "ml-3 mt-2 mb-2 border-b border-base-muted-light text-xs text-base-muted-medium pointer-events-none font-semibold", children: /* @__PURE__ */ jsxs14("span", { className: "-ml-3 flex items-center gap-2", children: [
+    Icon ? /* @__PURE__ */ jsx17(Icon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
+    /* @__PURE__ */ jsx17("span", { children: renderInlineMarkdown(title, { codeClassName: "text-sm!" }) })
+  ] }) });
 };
-var SidebarGroupTitle = ({ title, href, isActive, allowNavigation = false }) => {
-  const content = /* @__PURE__ */ jsx17(
-    "span",
-    {
-      className: cmMerge7(
-        allowNavigation ? "font-medium" : "font-semibold",
-        isActive && allowNavigation && "text-primary!"
-      ),
-      children: title ? renderInlineMarkdown(title, { codeClassName: "text-sm!" }) : null
-    }
-  );
+var SidebarGroupTitle = ({ title, href, isActive, allowNavigation = false, icon: Icon }) => {
+  const content = /* @__PURE__ */ jsxs14("span", { className: "flex items-center gap-2", children: [
+    Icon ? /* @__PURE__ */ jsx17(Icon, { className: "size-4 shrink-0", "aria-hidden": "true" }) : null,
+    /* @__PURE__ */ jsx17(
+      "span",
+      {
+        className: cmMerge7(
+          allowNavigation ? "font-medium" : "font-semibold",
+          isActive && allowNavigation && "text-primary!"
+        ),
+        children: title ? renderInlineMarkdown(title, { codeClassName: "text-sm!" }) : null
+      }
+    )
+  ] });
   if (allowNavigation && href) {
     return /* @__PURE__ */ jsx17(
       "a",
@@ -1063,32 +1119,42 @@ var SidebarGroupTitle = ({ title, href, isActive, allowNavigation = false }) =>
   }
   return /* @__PURE__ */ jsx17("span", { className: "flex items-center gap-2 text-base-content", children: content });
 };
-var renderSidebarItems = (items, currentHref) => {
+var renderSidebarItems = (items, currentHref, docsIconMap) => {
   return items.map((item) => {
     if (item.kind === "page") {
-      return /* @__PURE__ */ jsx17(SidebarPageLink, { title: item.navTitle, href: item.href, currentHref }, item.id);
+      return /* @__PURE__ */ jsx17(
+        SidebarPageLink,
+        {
+          title: item.navTitle,
+          href: item.href,
+          currentHref,
+          icon: docsIconMap[getDocsIconMapKey("page", item.id)]
+        },
+        item.id
+      );
     }
-    return /* @__PURE__ */ jsx17(SidebarNestedGroup, { group: item, currentHref }, item.id);
+    return /* @__PURE__ */ jsx17(SidebarNestedGroup, { group: item, currentHref, docsIconMap }, item.id);
   });
 };
-var SidebarItemList = ({ items, currentHref }) => {
+var SidebarItemList = ({ items, currentHref, docsIconMap }) => {
   const visibleItems = getVisibleNavItems(items);
-  return /* @__PURE__ */ jsx17("ul", { className: "menu lg:w-[97%]", children: renderSidebarItems(visibleItems, currentHref) });
+  return /* @__PURE__ */ jsx17("ul", { className: "menu lg:w-[97%]", children: renderSidebarItems(visibleItems, currentHref, docsIconMap) });
 };
-var SidebarNestedGroup = ({ group, currentHref }) => {
+var SidebarNestedGroup = ({ group, currentHref, docsIconMap }) => {
   const groupHref = getGroupHref(group);
   const visibleItems = getVisibleGroupItems(group);
   const isCollapsible = group.collapsible !== void 0;
   const isOpenByDefault = group.collapsible?.isDefaultOpen ?? true;
   const nestedHasActiveItem = groupHref === currentHref || hasActiveItem(group.items, currentHref);
   const { isOpen, setIsOpen } = useAutoOpenDetails(`group:${group.id}`, isOpenByDefault, nestedHasActiveItem);
+  const GroupIcon = docsIconMap[getDocsIconMapKey("group", group.id)];
   if (!isCollapsible) {
     if (!group.title) {
-      return /* @__PURE__ */ jsx17(Fragment4, { children: renderSidebarItems(visibleItems, currentHref) });
+      return /* @__PURE__ */ jsx17(Fragment4, { children: renderSidebarItems(visibleItems, currentHref, docsIconMap) });
     }
     return /* @__PURE__ */ jsxs14(Fragment4, { children: [
-      /* @__PURE__ */ jsx17(SidebarGroupDivider, { title: group.title }),
-      renderSidebarItems(visibleItems, currentHref)
+      /* @__PURE__ */ jsx17(SidebarGroupDivider, { title: group.title, icon: GroupIcon }),
+      renderSidebarItems(visibleItems, currentHref, docsIconMap)
     ] });
   }
   return /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsxs14(
@@ -1105,15 +1171,18 @@ var SidebarNestedGroup = ({ group, currentHref }) => {
             title: group.title,
             href: groupHref ?? void 0,
             isActive: nestedHasActiveItem,
-            allowNavigation: Boolean(groupHref)
+            allowNavigation: Boolean(groupHref),
+            icon: GroupIcon
           }
         ) }),
-        visibleItems.length > 0 ? /* @__PURE__ */ jsx17(SidebarItemList, { items: visibleItems, currentHref }) : null
+        visibleItems.length > 0 ? /* @__PURE__ */ jsx17(SidebarItemList, { items: visibleItems, currentHref, docsIconMap }) : null
       ]
     }
   ) });
 };
 var SidebarSectionGroup = ({ section, currentHref, activeSectionId }) => {
+  const docs = useDocsGlobalContext();
+  const SectionIcon = docs.docsIconMap[getDocsIconMapKey("section", section.id)];
   const sectionHasActiveItem = section.id === activeSectionId || containsActiveHref(section.items, currentHref);
   const { isOpen, setIsOpen } = useAutoOpenDetails(
     `section:${section.id}`,
@@ -1128,8 +1197,8 @@ var SidebarSectionGroup = ({ section, currentHref, activeSectionId }) => {
         setIsOpen(event.currentTarget.open);
       },
       children: [
-        /* @__PURE__ */ jsx17("summary", { children: /* @__PURE__ */ jsx17(SidebarGroupTitle, { title: section.title, isActive: sectionHasActiveItem }) }),
-        /* @__PURE__ */ jsx17(SidebarItemList, { items: section.items, currentHref })
+        /* @__PURE__ */ jsx17("summary", { children: /* @__PURE__ */ jsx17(SidebarGroupTitle, { title: section.title, isActive: sectionHasActiveItem, icon: SectionIcon }) }),
+        /* @__PURE__ */ jsx17(SidebarItemList, { items: section.items, currentHref, docsIconMap: docs.docsIconMap })
       ]
     }
   ) });
@@ -1137,7 +1206,7 @@ var SidebarSectionGroup = ({ section, currentHref, activeSectionId }) => {
 var Sidebar = memo3(
   ({ currentHref: currentHrefProp = "", activeSectionId: activeSectionIdProp = "" }) => {
     const scrollContainerRef = useRef2(null);
-    const { urlPathname } = usePageContext3();
+    const { urlPathname } = usePageContext4();
     const currentHref = currentHrefProp || urlPathname;
     const docs = useDocsGlobalContext();
     const activeSectionId = activeSectionIdProp || getActiveSectionByPathname(docs, currentHref)?.id || "";
@@ -1180,7 +1249,7 @@ var TableOfContents = ({
   return /* @__PURE__ */ jsx18("aside", { className: cmMerge8(effectiveTableOfContents ? "w-64" : "w-32", "hidden shrink-0 xl:block"), children: /* @__PURE__ */ jsx18("div", { className: "sticky top-14", children: /* @__PURE__ */ jsxs15("div", { className: "relative h-[calc(100svh-14*var(--spacing))] overflow-y-auto overflow-x-hidden pt-10 pb-8", children: [
     effectiveTableOfContents ? effectiveHeadings.length > 0 && /* @__PURE__ */ jsxs15(Fragment5, { children: [
       /* @__PURE__ */ jsxs15("p", { className: "mb-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-base-muted", children: [
-        /* @__PURE__ */ jsx18(TableOfContentsIcon, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsx18(TableOfContentsIcon, { className: "size-3" }),
         "On this page"
       ] }),
       /* @__PURE__ */ jsx18("nav", { "aria-label": "On this page", className: "mb-12", children: /* @__PURE__ */ jsx18("ul", { children: effectiveHeadings.map((heading) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
@@ -1207,7 +1276,7 @@ var Adbar = ({ partners }) => {
   }
   return /* @__PURE__ */ jsxs15("aside", { children: [
     /* @__PURE__ */ jsxs15("p", { className: "mb-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-base-muted", children: [
-      /* @__PURE__ */ jsx18(Flame, { className: "h-3 w-3" }),
+      /* @__PURE__ */ jsx18(Flame, { className: "size-3" }),
       "Partners"
     ] }),
     /* @__PURE__ */ jsxs15("ul", { className: "grid grid-cols-[repeat(auto-fit,minmax(5.5rem,1fr))] gap-3 opacity-90", children: [
@@ -1225,12 +1294,12 @@ var PartnerLogo = ({
       {
         src: partner.logoLight,
         width: 200,
-        height: 100,
+        height: 200,
         alt: partner.logoAlt,
         className: cmMerge8("block", partner.logoDark ? "dark:hidden" : "dark:invert")
       }
     ),
-    partner.logoDark ? /* @__PURE__ */ jsx18(Image, { src: partner.logoDark, width: 200, height: 100, alt: partner.logoAlt, className: "hidden dark:block" }) : null
+    partner.logoDark ? /* @__PURE__ */ jsx18(Image, { src: partner.logoDark, width: 200, height: 200, alt: partner.logoAlt, className: "hidden dark:block" }) : null
   ] });
 };
 var AdbarItem = cm5.div`
@@ -1253,11 +1322,13 @@ var AdbarLink = cm5.a`
 var Image = cm5.img`
   mx-auto
   w-24
+  h-auto
 `;
 
 // src/runtime/client/components/TableOfContentsMobile.tsx
 import cm6 from "@classmatejs/react";
 import { TableOfContents as TableOfContents2 } from "lucide-react";
+import { useId } from "react";
 
 // src/runtime/client/components/BreadcrumbSidebarTrigger.tsx
 import { ChevronLast, ChevronsRight } from "lucide-react";
@@ -1298,9 +1369,9 @@ var BreadcrumbSidebarTrigger = ({ currentHref }) => {
     alert("TODO: Open mobile menu");
   }, []);
   return /* @__PURE__ */ jsx19("button", { className: "cursor-pointer min-w-0 max-w-full hidden md:block", type: "button", onClick: handleClick, children: /* @__PURE__ */ jsxs16("span", { className: "flex items-center gap-1 min-w-0 overflow-hidden lg:hidden", children: [
-    /* @__PURE__ */ jsx19(ChevronLast, { className: "w-4 h-4 shrink-0 text-primary" }),
+    /* @__PURE__ */ jsx19(ChevronLast, { className: "size-4 shrink-0 text-primary" }),
     /* @__PURE__ */ jsx19("span", { className: "hidden md:flex items-center gap-1", children: breadcrumbItems.map((item, index) => /* @__PURE__ */ jsxs16("span", { className: "contents", children: [
-      index > 0 ? /* @__PURE__ */ jsx19(ChevronsRight, { className: "w-4 h-4 shrink-0 text-base-muted-medium" }) : null,
+      index > 0 ? /* @__PURE__ */ jsx19(ChevronsRight, { className: "size-4 shrink-0 text-base-muted-medium" }) : null,
       /* @__PURE__ */ jsx19("span", { className: index === 0 ? "font-semibold truncate" : "text-sm truncate", children: renderInlineMarkdown(item.title, { codeClassName: "text-sm!" }) })
     ] }, item.id)) })
   ] }) });
@@ -1318,17 +1389,21 @@ var TableOfContentsMobile = ({
   setActiveHeadingId = () => void 0
 }) => {
   const topOptionValue = "__docs-page-top__";
+  const selectId = useId();
+  const labelId = `${selectId}-label`;
   const selectedValue = tableOfContents && headings.some((heading) => heading.id === activeHeadingId) ? activeHeadingId : "";
   return /* @__PURE__ */ jsxs17(Fragment6, { children: [
     /* @__PURE__ */ jsx20("div", { className: "h-12 xl:hidden" }),
     /* @__PURE__ */ jsx20(StyledTOC, { children: /* @__PURE__ */ jsxs17(StyledTOCInner, { children: [
       /* @__PURE__ */ jsx20(BreadcrumbSidebarTrigger_default, { currentHref }),
-      /* @__PURE__ */ jsxs17("label", { className: "select select-sm md:w-80 w-full", htmlFor: "table-of-contents-select", children: [
-        /* @__PURE__ */ jsx20("span", { className: "label flex", children: /* @__PURE__ */ jsx20(TableOfContents2, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxs17("label", { className: "select select-sm md:w-80 w-full", htmlFor: selectId, children: [
+        /* @__PURE__ */ jsx20("span", { id: labelId, className: "sr-only", children: pageTitle }),
+        /* @__PURE__ */ jsx20("span", { className: "label flex", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(TableOfContents2, { className: "size-4" }) }),
         /* @__PURE__ */ jsxs17(
           "select",
           {
-            id: "table-of-contents-select",
+            id: selectId,
+            "aria-labelledby": labelId,
             value: selectedValue || topOptionValue,
             onChange: (e) => {
               const value = e.target.value;
@@ -1368,7 +1443,7 @@ var StyledTOCInner = cm6.div`
 `;
 
 // src/runtime/client/components/useTableOfContentsState.ts
-import { useEffect as useEffect8, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState4 } from "react";
 var getCurrentHash = () => {
   try {
     return decodeURIComponent(window.location.hash);
@@ -1450,10 +1525,10 @@ var updateActiveHeadingFromScroll = (setActiveHeadingId) => {
 var useTableOfContentsState = ({
   headings: routeHeadings = []
 }) => {
-  const [activeHeadingId, setActiveHeadingId] = useState5("");
-  const [domHeadings, setDomHeadings] = useState5(routeHeadings);
+  const [activeHeadingId, setActiveHeadingId] = useState4("");
+  const [domHeadings, setDomHeadings] = useState4(routeHeadings);
   const effectiveHeadings = domHeadings.length > 0 ? domHeadings : routeHeadings;
-  useEffect8(() => {
+  useEffect7(() => {
     let scrollFrame = 0;
     const syncActiveHeading = () => {
       if (scrollFrame) {
@@ -1489,7 +1564,7 @@ var useTableOfContentsState = ({
       window.removeEventListener("resize", syncActiveHeading);
     };
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -1555,7 +1630,7 @@ var DocsLayout = ({ children }) => {
 
 // src/runtime/client/DocsPage.tsx
 import { useData as useData2 } from "vike-react/useData";
-import { usePageContext as usePageContext4 } from "vike-react/usePageContext";
+import { usePageContext as usePageContext5 } from "vike-react/usePageContext";
 
 // src/runtime/client/getMdxRuntimeValue.tsx
 var isExternalHref = (href) => {
@@ -1653,7 +1728,7 @@ var getMdxRuntimeValue = (options) => {
 // src/runtime/client/DocsPage.tsx
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var DocsPage = ({ Content }) => {
-  const pageContext = usePageContext4();
+  const pageContext = usePageContext5();
   const docs = useDocsGlobalContext();
   const { page } = useData2();
   return /* @__PURE__ */ jsx22(
@@ -1682,4 +1757,4 @@ export {
   DocsLayout,
   DocsPage
 };
-//# sourceMappingURL=chunk-SH5XWPXW.js.map
+//# sourceMappingURL=chunk-AQJQDMKW.js.map