ardo 3.0.4 → 3.1.0

package/dist/{chunk-TDBU2FXP.js → chunk-CZM5NX27.js}

@@ -1,18 +1,26 @@
 import {
-  Content
-} from "./chunk-UWFMFHRD.js";
+  Content,
+  docPage,
+  footer,
+  footerBuildTime,
+  footerCopyright,
+  footerLink,
+  footerMessage,
+  footerPrimary,
+  footerSeparator
+} from "./chunk-IEPSORG5.js";
 import {
-  ChevronDownIcon,
-  GithubIcon,
-  LinkedinIcon,
-  MessageCircleIcon,
-  MonitorIcon,
-  MoonIcon,
-  PackageIcon,
-  SunIcon,
-  TwitterIcon,
-  YoutubeIcon
-} from "./chunk-MJQGGJQZ.js";
+  ChevronDown,
+  Github,
+  Linkedin,
+  MessageCircle,
+  Monitor,
+  Moon,
+  Package,
+  Sun,
+  Twitter,
+  Youtube
+} from "./chunk-PMS3P4MA.js";
 import {
   ArdoContext,
   ArdoProvider,
@@ -26,6 +34,16 @@ import {
 // src/ui/Layout.tsx
 import { useContext } from "react";
 import { Links, Meta, Scripts, ScrollRestoration } from "react-router";
+
+// src/ui/Layout.css.ts
+var home = "Layout_home__8autjm3";
+var homeMain = "Layout_homeMain__8autjm4";
+var layout = "Layout_layout__8autjm0";
+var layoutContainer = "Layout_layoutContainer__8autjm1";
+var main = "Layout_main__8autjm2";
+var skipLink = "Layout_skipLink__8autjm5";
+
+// src/ui/Layout.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var ARDO_FAVICON = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22stroke-linecap%3Around%3Bstroke-linejoin%3Around%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22a%22%20overflow%3D%22visible%22%3E%3Cpath%20d%3D%22M300%20300%20151%20128l2%20178-41%2094h93c-35%2032-55%2068-63%20107m63-106%2095%2081m-32-96%2028%2088%22%2F%3E%3Cellipse%20cx%3D%22222%22%20cy%3D%22327%22%20fill%3D%22%2300655a%22%20rx%3D%2220%22%20ry%3D%2233%22%2F%3E%3Ccircle%20cx%3D%22227%22%20cy%3D%22324%22%20r%3D%2271%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2300655a%22%20stroke-width%3D%2216%22%3E%3Cpath%20d%3D%22M155%20318c2-70%2066-126%20145-126s143%2056%20145%20126%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22290%22%20r%3D%22270%22%2F%3E%3Cuse%20href%3D%22%23a%22%2F%3E%3Cuse%20href%3D%22%23a%22%20transform%3D%22matrix%28-1%200%200%201%20600%200%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
 function RootLayout({ children, favicon, lang }) {
@@ -46,27 +64,51 @@ function RootLayout({ children, favicon, lang }) {
     ] })
   ] });
 }
-function Layout({ header, sidebar, footer, children, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: className ?? "ardo-layout", children: [
-    /* @__PURE__ */ jsx("a", { href: "#main-content", className: "ardo-skip-link", children: "Skip to content" }),
-    header,
-    /* @__PURE__ */ jsxs("div", { className: "ardo-layout-container", children: [
-      sidebar,
-      /* @__PURE__ */ jsx("main", { id: "main-content", className: "ardo-main", children })
+function Layout({ header: header2, sidebar: sidebar2, footer: footer2, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: className ?? layout, children: [
+    /* @__PURE__ */ jsx("a", { href: "#main-content", className: skipLink, children: "Skip to content" }),
+    header2,
+    /* @__PURE__ */ jsxs("div", { className: layoutContainer, children: [
+      sidebar2,
+      /* @__PURE__ */ jsx("main", { id: "main-content", className: main, children })
     ] }),
-    footer
+    footer2
   ] });
 }
 
 // src/ui/ArdoRoot.tsx
-import { Outlet, useLocation as useLocation2 } from "react-router";
+import { cloneElement, isValidElement as isValidElement2 } from "react";
+import { Outlet, useLocation as useLocation3 } from "react-router";
 
 // src/ui/Header.tsx
-import { useState as useState2, lazy, Suspense } from "react";
-import { Link, NavLink as RouterNavLink } from "react-router";
+import { useEffect as useEffect2, useState as useState2, lazy, Suspense } from "react";
+import { Link, NavLink as RouterNavLink, useLocation } from "react-router";
+
+// src/ui/Header.css.ts
+var desktopNav = "Header_desktopNav__qjc2r59";
+var hamburger = "Header_hamburger__qjc2r58";
+var header = "Header_header__qjc2r50";
+var headerContainer = "Header_headerContainer__qjc2r51";
+var headerLeft = "Header_headerLeft__qjc2r52";
+var headerRight = "Header_headerRight__qjc2r53";
+var logo = "Header_logo__qjc2r55";
+var logoLink = "Header_logoLink__qjc2r54";
+var mobileMenu = "Header_mobileMenu__qjc2r5a";
+var mobileMenuButton = "Header_mobileMenuButton__qjc2r57";
+var siteTitle = "Header_siteTitle__qjc2r56";
+
+// src/ui/Nav.css.ts
+var nav = "Nav_nav__85hnke0";
+var navLink = "Nav_navLink__85hnke1";
+var socialLink = "Nav_socialLink__85hnke2";
 
 // src/ui/components/ThemeToggle.tsx
 import { useState, useEffect } from "react";
+
+// src/ui/components/ThemeToggle.css.ts
+var themeToggle = "ThemeToggle_themeToggle__18g5iyz0";
+
+// src/ui/components/ThemeToggle.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ThemeToggle() {
   const [theme, setTheme] = useState("system");
@@ -88,18 +130,18 @@ function ThemeToggle() {
     applyTheme(nextTheme);
   };
   if (!mounted) {
-    return /* @__PURE__ */ jsx2("button", { className: "ardo-theme-toggle", "aria-label": "Toggle theme", children: /* @__PURE__ */ jsx2("span", { className: "ardo-theme-icon", children: /* @__PURE__ */ jsx2(SunIcon, { size: 20 }) }) });
+    return /* @__PURE__ */ jsx2("button", { className: themeToggle, "aria-label": "Toggle theme", children: /* @__PURE__ */ jsx2("span", { className: "ardo-theme-icon", children: /* @__PURE__ */ jsx2(Sun, { size: 20 }) }) });
   }
   return /* @__PURE__ */ jsx2(
     "button",
     {
-      className: "ardo-theme-toggle",
+      className: themeToggle,
       onClick: toggleTheme,
       "aria-label": `Switch to ${theme === "light" ? "dark" : theme === "dark" ? "system" : "light"} theme`,
       children: /* @__PURE__ */ jsxs2("span", { className: "ardo-theme-icon", children: [
-        theme === "light" && /* @__PURE__ */ jsx2(SunIcon, { size: 20 }),
-        theme === "dark" && /* @__PURE__ */ jsx2(MoonIcon, { size: 20 }),
-        theme === "system" && /* @__PURE__ */ jsx2(MonitorIcon, { size: 20 })
+        theme === "light" && /* @__PURE__ */ jsx2(Sun, { size: 20 }),
+        theme === "dark" && /* @__PURE__ */ jsx2(Moon, { size: 20 }),
+        theme === "system" && /* @__PURE__ */ jsx2(Monitor, { size: 20 })
       ] })
     }
   );
@@ -118,60 +160,81 @@ function applyTheme(theme) {
 
 // src/ui/Header.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var LazySearch = lazy(() => import("./Search-MXGJE6PQ.js").then((m) => ({ default: m.Search })));
+var LazySearch = lazy(() => import("./Search-VYYG3D43.js").then((m) => ({ default: m.Search })));
 function Header({
-  logo,
+  logo: logo2,
   title,
-  nav,
+  nav: nav2,
   actions,
   search = true,
-  themeToggle = true,
+  themeToggle: themeToggle2 = true,
+  mobileMenuContent,
   className
 }) {
+  const location = useLocation();
   const config = useConfig();
   const themeConfig = useThemeConfig();
   const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
-  const resolvedLogo = logo ?? themeConfig.logo;
+  const resolvedLogo = logo2 ?? themeConfig.logo;
   const resolvedTitle = title ?? (themeConfig.siteTitle !== false ? themeConfig.siteTitle ?? config.title : void 0);
-  const resolvedNav = nav ?? (themeConfig.nav?.length ? /* @__PURE__ */ jsx3(AutoNav, { items: themeConfig.nav }) : void 0);
+  const resolvedNav = nav2 ?? (themeConfig.nav?.length ? /* @__PURE__ */ jsx3(AutoNav, { items: themeConfig.nav }) : void 0);
   const resolvedActions = actions ?? (themeConfig.socialLinks?.length ? themeConfig.socialLinks.map((link, i) => /* @__PURE__ */ jsx3(SocialLink, { href: link.link, icon: link.icon, ariaLabel: link.ariaLabel }, i)) : void 0);
-  return /* @__PURE__ */ jsxs3("header", { className: className ?? "ardo-header", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "ardo-header-container", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "ardo-header-left", children: [
-        /* @__PURE__ */ jsx3(
+  const hasMobileMenu = Boolean(mobileMenuContent);
+  useEffect2(() => {
+    setMobileMenuOpen(false);
+  }, [location.pathname]);
+  const handleMobileMenuClick = (event) => {
+    const target = event.target;
+    if (target.closest("a")) {
+      setMobileMenuOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs3("header", { className: className ?? header, children: [
+    /* @__PURE__ */ jsxs3("div", { className: headerContainer, children: [
+      /* @__PURE__ */ jsxs3("div", { className: headerLeft, children: [
+        hasMobileMenu && /* @__PURE__ */ jsx3(
           "button",
           {
-            className: "ardo-mobile-menu-button",
+            type: "button",
+            className: mobileMenuButton,
             onClick: () => setMobileMenuOpen(!mobileMenuOpen),
             "aria-label": "Toggle menu",
             "aria-expanded": mobileMenuOpen,
-            children: /* @__PURE__ */ jsxs3("span", { className: "ardo-hamburger", children: [
+            children: /* @__PURE__ */ jsxs3("span", { className: hamburger, children: [
               /* @__PURE__ */ jsx3("span", {}),
               /* @__PURE__ */ jsx3("span", {}),
               /* @__PURE__ */ jsx3("span", {})
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs3(Link, { to: "/", className: "ardo-logo-link", children: [
+        /* @__PURE__ */ jsxs3(Link, { to: "/", className: logoLink, children: [
           resolvedLogo && /* @__PURE__ */ jsx3(
             "img",
             {
               src: typeof resolvedLogo === "string" ? resolvedLogo : resolvedLogo.light,
               alt: resolvedTitle ?? "Logo",
-              className: "ardo-logo"
+              className: logo
             }
           ),
-          resolvedTitle && /* @__PURE__ */ jsx3("span", { className: "ardo-site-title", children: resolvedTitle })
+          resolvedTitle && /* @__PURE__ */ jsx3("span", { className: siteTitle, children: resolvedTitle })
         ] })
       ] }),
-      resolvedNav && /* @__PURE__ */ jsx3("div", { className: "ardo-nav", children: resolvedNav }),
-      /* @__PURE__ */ jsxs3("div", { className: "ardo-header-right", children: [
-        search && /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3("span", { className: "ardo-search-placeholder" }), children: /* @__PURE__ */ jsx3(LazySearch, {}) }),
-        themeToggle && /* @__PURE__ */ jsx3(ThemeToggle, {}),
+      resolvedNav && /* @__PURE__ */ jsx3("div", { className: desktopNav, children: resolvedNav }),
+      /* @__PURE__ */ jsxs3("div", { className: headerRight, children: [
+        search && /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3("span", {}), children: /* @__PURE__ */ jsx3(LazySearch, {}) }),
+        themeToggle2 && /* @__PURE__ */ jsx3(ThemeToggle, {}),
         resolvedActions
       ] })
     ] }),
-    mobileMenuOpen && /* @__PURE__ */ jsx3("div", { className: "ardo-mobile-menu", children: /* @__PURE__ */ jsx3("nav", { className: "ardo-mobile-nav", onClick: () => setMobileMenuOpen(false), children: resolvedNav }) })
+    resolvedNav && /* @__PURE__ */ jsx3("div", { className: "ardo-mobile-top-nav", children: /* @__PURE__ */ jsx3("div", { className: "ardo-mobile-top-nav-inner", children: resolvedNav }) }),
+    mobileMenuOpen && hasMobileMenu && /* @__PURE__ */ jsx3("div", { className: mobileMenu, children: mobileMenuContent && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "ardo-mobile-menu-content ardo-mobile-menu-section",
+        onClick: handleMobileMenuClick,
+        children: mobileMenuContent
+      }
+    ) })
   ] });
 }
 function SocialLink({ href, icon, ariaLabel, className }) {
@@ -181,41 +244,41 @@ function SocialLink({ href, icon, ariaLabel, className }) {
       href,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: className ?? "ardo-social-link",
+      className: className ?? socialLink,
       "aria-label": ariaLabel ?? icon,
       children: /* @__PURE__ */ jsx3(SocialIcon, { icon })
     }
   );
 }
 function AutoNav({ items }) {
-  return /* @__PURE__ */ jsx3("nav", { className: "ardo-nav", children: items.map((item, i) => /* @__PURE__ */ jsx3(AutoNavItem, { item }, i)) });
+  return /* @__PURE__ */ jsx3("nav", { className: nav, children: items.map((item, i) => /* @__PURE__ */ jsx3(AutoNavItem, { item }, i)) });
 }
 function AutoNavItem({ item }) {
   if (item.link?.startsWith("http")) {
-    return /* @__PURE__ */ jsx3("a", { href: item.link, className: "ardo-nav-link", target: "_blank", rel: "noopener noreferrer", children: item.text });
+    return /* @__PURE__ */ jsx3("a", { href: item.link, className: navLink, target: "_blank", rel: "noopener noreferrer", children: item.text });
   }
   if (item.link) {
     return /* @__PURE__ */ jsx3(
       RouterNavLink,
       {
         to: item.link,
-        className: ({ isActive }) => ["ardo-nav-link", isActive && "active"].filter(Boolean).join(" "),
+        className: ({ isActive }) => [navLink, isActive && "active"].filter(Boolean).join(" "),
         children: item.text
       }
     );
   }
-  return /* @__PURE__ */ jsx3("span", { className: "ardo-nav-link", children: item.text });
+  return /* @__PURE__ */ jsx3("span", { className: navLink, children: item.text });
 }
 var socialIcons = {
-  github: GithubIcon,
-  twitter: TwitterIcon,
-  discord: MessageCircleIcon,
-  linkedin: LinkedinIcon,
-  youtube: YoutubeIcon,
-  npm: PackageIcon
+  github: Github,
+  twitter: Twitter,
+  discord: MessageCircle,
+  linkedin: Linkedin,
+  youtube: Youtube,
+  npm: Package
 };
 function SocialIcon({ icon }) {
-  const IconComponent = socialIcons[icon] ?? GithubIcon;
+  const IconComponent = socialIcons[icon] ?? Github;
   return /* @__PURE__ */ jsx3(IconComponent, { size: 20 });
 }
 
@@ -227,17 +290,30 @@ import {
   createContext,
   useContext as useContext2
 } from "react";
-import { NavLink, useLocation } from "react-router";
+import { NavLink, useLocation as useLocation2 } from "react-router";
+
+// src/ui/Sidebar.css.ts
+var sidebar = "Sidebar_sidebar__1057ydn0";
+var sidebarCollapse = "Sidebar_sidebarCollapse__1057ydn8";
+var sidebarItem = "Sidebar_sidebarItem__1057ydn4";
+var sidebarItemHeader = "Sidebar_sidebarItemHeader__1057ydn5";
+var sidebarLink = "Sidebar_sidebarLink__1057ydn6";
+var sidebarList = "Sidebar_sidebarList__1057ydn1";
+var sidebarList0 = "Sidebar_sidebarList0__1057ydn2";
+var sidebarList1 = "Sidebar_sidebarList1__1057ydn3";
+var sidebarText = "Sidebar_sidebarText__1057ydn7";
+
+// src/ui/Sidebar.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SidebarContext = createContext({ currentPath: "" });
 function useSidebarContext() {
   return useContext2(SidebarContext);
 }
 function Sidebar({ items, children, className }) {
-  const { pathname } = useLocation();
+  const { pathname } = useLocation2();
   const contextSidebar = useSidebar();
   const resolvedItems = items ?? (children ? void 0 : contextSidebar);
-  return /* @__PURE__ */ jsx4(SidebarContext.Provider, { value: { currentPath: pathname }, children: /* @__PURE__ */ jsx4("aside", { className: className ?? "ardo-sidebar", children: /* @__PURE__ */ jsx4("nav", { className: "ardo-sidebar-nav", "aria-label": "Main navigation", children: children ? /* @__PURE__ */ jsx4("ul", { className: "ardo-sidebar-list ardo-sidebar-list-0", children }) : resolvedItems?.length ? /* @__PURE__ */ jsx4(SidebarItems, { items: resolvedItems, depth: 0 }) : null }) }) });
+  return /* @__PURE__ */ jsx4(SidebarContext.Provider, { value: { currentPath: pathname }, children: /* @__PURE__ */ jsx4("aside", { className: className ?? sidebar, children: /* @__PURE__ */ jsx4("nav", { "aria-label": "Main navigation", children: children ? /* @__PURE__ */ jsx4("ul", { className: `${sidebarList} ${sidebarList0}`, children }) : resolvedItems?.length ? /* @__PURE__ */ jsx4(SidebarItems, { items: resolvedItems, depth: 0 }) : null }) }) });
 }
 function SidebarGroup({
   title,
@@ -250,10 +326,10 @@ function SidebarGroup({
   const [collapsed, setCollapsed] = useState3(initialCollapsed);
   const { currentPath } = useSidebarContext();
   const isChildActive = checkChildrenActive(children, currentPath);
-  const textClassName = ["ardo-sidebar-text", isChildActive && "child-active"].filter(Boolean).join(" ");
+  const textClassName = [sidebarText, isChildActive && "child-active"].filter(Boolean).join(" ");
   const hasChildren = Children.count(children) > 0;
-  return /* @__PURE__ */ jsxs4("li", { className: className ?? "ardo-sidebar-item", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "ardo-sidebar-item-header", children: [
+  return /* @__PURE__ */ jsxs4("li", { className: className ?? sidebarItem, children: [
+    /* @__PURE__ */ jsxs4("div", { className: sidebarItemHeader, children: [
       to ? /* @__PURE__ */ jsx4(
         NavLink,
         {
@@ -274,19 +350,19 @@ function SidebarGroup({
       collapsible && hasChildren && /* @__PURE__ */ jsx4(
         "button",
         {
-          className: ["ardo-sidebar-collapse", collapsed && "collapsed"].filter(Boolean).join(" "),
+          className: [sidebarCollapse, collapsed && "collapsed"].filter(Boolean).join(" "),
           onClick: () => setCollapsed(!collapsed),
           "aria-label": collapsed ? "Expand" : "Collapse",
-          children: /* @__PURE__ */ jsx4(ChevronDownIcon, { size: 16 })
+          children: /* @__PURE__ */ jsx4(ChevronDown, { size: 16 })
         }
       )
     ] }),
-    hasChildren && !collapsed && /* @__PURE__ */ jsx4("ul", { className: "ardo-sidebar-list ardo-sidebar-list-1", children })
+    hasChildren && !collapsed && /* @__PURE__ */ jsx4("ul", { className: `${sidebarList} ${sidebarList1}`, children })
   ] });
 }
 function SidebarLink({ to, children, className }) {
-  const baseClassName = className ?? "ardo-sidebar-link";
-  return /* @__PURE__ */ jsx4("li", { className: "ardo-sidebar-item", children: /* @__PURE__ */ jsx4(
+  const baseClassName = className ?? sidebarLink;
+  return /* @__PURE__ */ jsx4("li", { className: sidebarItem, children: /* @__PURE__ */ jsx4(
     NavLink,
     {
       to,
@@ -296,7 +372,13 @@ function SidebarLink({ to, children, className }) {
   ) });
 }
 function SidebarItems({ items, depth }) {
-  return /* @__PURE__ */ jsx4("ul", { className: `ardo-sidebar-list ardo-sidebar-list-${depth}`, children: items.map((item, index) => /* @__PURE__ */ jsx4(SidebarItemComponent, { item, depth }, index)) });
+  return /* @__PURE__ */ jsx4(
+    "ul",
+    {
+      className: `${sidebarList} ${depth === 0 ? sidebarList0 : sidebarList1}`,
+      children: items.map((item, index) => /* @__PURE__ */ jsx4(SidebarItemComponent, { item, depth }, index))
+    }
+  );
 }
 function SidebarItemComponent({ item, depth }) {
   const { currentPath } = useSidebarContext();
@@ -305,10 +387,10 @@ function SidebarItemComponent({ item, depth }) {
   const isChildActive = hasChildren && item.items.some(
     (child) => child.link === currentPath || child.items && child.items.some((grandchild) => grandchild.link === currentPath)
   );
-  const linkClassName = ["ardo-sidebar-link", isChildActive && "child-active"].filter(Boolean).join(" ");
-  const textClassName = ["ardo-sidebar-text", isChildActive && "child-active"].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs4("li", { className: "ardo-sidebar-item", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "ardo-sidebar-item-header", children: [
+  const linkClassName = [sidebarLink, isChildActive && "child-active"].filter(Boolean).join(" ");
+  const textClassName = [sidebarText, isChildActive && "child-active"].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4("li", { className: sidebarItem, children: [
+    /* @__PURE__ */ jsxs4("div", { className: sidebarItemHeader, children: [
       item.link ? /* @__PURE__ */ jsx4(
         NavLink,
         {
@@ -320,10 +402,10 @@ function SidebarItemComponent({ item, depth }) {
       hasChildren && /* @__PURE__ */ jsx4(
         "button",
         {
-          className: ["ardo-sidebar-collapse", collapsed && "collapsed"].filter(Boolean).join(" "),
+          className: [sidebarCollapse, collapsed && "collapsed"].filter(Boolean).join(" "),
           onClick: () => setCollapsed(!collapsed),
           "aria-label": collapsed ? "Expand" : "Collapse",
-          children: /* @__PURE__ */ jsx4(ChevronDownIcon, { size: 16 })
+          children: /* @__PURE__ */ jsx4(ChevronDown, { size: 16 })
         }
       )
     ] }),
@@ -392,19 +474,19 @@ function Footer({
   if (!hasContent) {
     return null;
   }
-  return /* @__PURE__ */ jsx5("footer", { className: className ?? "ardo-footer", children: /* @__PURE__ */ jsx5("div", { className: "ardo-footer-container", children: children ?? /* @__PURE__ */ jsxs5(Fragment, { children: [
-    (resolvedProject || ardoLink || resolvedSponsor) && /* @__PURE__ */ jsxs5("p", { className: "ardo-footer-primary", children: [
-      resolvedProject?.name && /* @__PURE__ */ jsx5(Fragment, { children: resolvedProject.homepage ? /* @__PURE__ */ jsxs5("a", { href: resolvedProject.homepage, className: "ardo-footer-link", children: [
+  return /* @__PURE__ */ jsx5("footer", { className: className ?? footer, children: /* @__PURE__ */ jsx5("div", { className: "ardo-footer-container", children: children ?? /* @__PURE__ */ jsxs5(Fragment, { children: [
+    (resolvedProject || ardoLink || resolvedSponsor) && /* @__PURE__ */ jsxs5("p", { className: footerPrimary, children: [
+      resolvedProject?.name && /* @__PURE__ */ jsx5(Fragment, { children: resolvedProject.homepage ? /* @__PURE__ */ jsxs5("a", { href: resolvedProject.homepage, className: footerLink, children: [
         resolvedProject.name,
         resolvedProject.version ? ` v${resolvedProject.version}` : ""
       ] }) : /* @__PURE__ */ jsxs5("span", { children: [
         resolvedProject.name,
         resolvedProject.version ? ` v${resolvedProject.version}` : ""
       ] }) }),
-      resolvedProject?.name && ardoLink && /* @__PURE__ */ jsx5("span", { className: "ardo-footer-separator", "aria-hidden": "true" }),
-      ardoLink && /* @__PURE__ */ jsx5("a", { href: "https://ardo-docs.dev", className: "ardo-footer-link", children: "Built with Ardo" }),
-      (resolvedProject?.name || ardoLink) && resolvedSponsor && /* @__PURE__ */ jsx5("span", { className: "ardo-footer-separator", "aria-hidden": "true" }),
-      resolvedSponsor && /* @__PURE__ */ jsxs5("a", { href: resolvedSponsor.link, className: "ardo-footer-link", children: [
+      resolvedProject?.name && ardoLink && /* @__PURE__ */ jsx5("span", { className: footerSeparator, "aria-hidden": "true" }),
+      ardoLink && /* @__PURE__ */ jsx5("a", { href: "https://ardo-docs.dev", className: footerLink, children: "Built with Ardo" }),
+      (resolvedProject?.name || ardoLink) && resolvedSponsor && /* @__PURE__ */ jsx5("span", { className: footerSeparator, "aria-hidden": "true" }),
+      resolvedSponsor && /* @__PURE__ */ jsxs5("a", { href: resolvedSponsor.link, className: footerLink, children: [
         "Sponsored by ",
         resolvedSponsor.text
       ] })
@@ -412,18 +494,18 @@ function Footer({
     resolvedMessage && /* @__PURE__ */ jsx5(
       "p",
       {
-        className: "ardo-footer-message",
+        className: footerMessage,
         dangerouslySetInnerHTML: { __html: resolvedMessage }
       }
     ),
     resolvedCopyright && /* @__PURE__ */ jsx5(
       "p",
       {
-        className: "ardo-footer-copyright",
+        className: footerCopyright,
         dangerouslySetInnerHTML: { __html: resolvedCopyright }
       }
     ),
-    resolvedBuildTime && /* @__PURE__ */ jsxs5("p", { className: "ardo-footer-build-time", children: [
+    resolvedBuildTime && /* @__PURE__ */ jsxs5("p", { className: footerBuildTime, children: [
       "Built on ",
       formatBuildTime(resolvedBuildTime),
       resolvedBuildHash && /* @__PURE__ */ jsxs5(Fragment, { children: [
@@ -439,23 +521,30 @@ function Footer({
 import { jsx as jsx6 } from "react/jsx-runtime";
 function ArdoRoot({
   config,
-  sidebar,
-  header,
+  sidebar: sidebar2,
+  header: header2,
   sidebarContent,
-  footer,
+  footer: footer2,
   headerProps,
   sidebarProps,
   footerProps,
   className,
   children
 }) {
-  const location = useLocation2();
+  const location = useLocation3();
   const isHomePage = location.pathname === "/" || location.pathname === "";
-  const resolvedHeader = header ?? /* @__PURE__ */ jsx6(Header, { ...headerProps });
   const resolvedSidebar = isHomePage ? void 0 : sidebarContent ?? /* @__PURE__ */ jsx6(Sidebar, { ...sidebarProps });
-  const resolvedFooter = footer ?? /* @__PURE__ */ jsx6(Footer, { ...footerProps });
-  const resolvedClassName = className ?? (isHomePage ? "ardo-layout ardo-home" : "ardo-layout");
-  return /* @__PURE__ */ jsx6(ArdoProvider, { config, sidebar, children: /* @__PURE__ */ jsx6(
+  const inferredMobileMenuContent = isHomePage ? void 0 : resolvedSidebar;
+  const resolvedHeader = header2 ? enhanceHeaderWithMobileMenuContent(header2, inferredMobileMenuContent) : /* @__PURE__ */ jsx6(
+    Header,
+    {
+      ...headerProps,
+      mobileMenuContent: headerProps?.mobileMenuContent ?? inferredMobileMenuContent
+    }
+  );
+  const resolvedFooter = footer2 ?? /* @__PURE__ */ jsx6(Footer, { ...footerProps });
+  const resolvedClassName = className ?? (isHomePage ? `${layout} ${home}` : layout);
+  return /* @__PURE__ */ jsx6(ArdoProvider, { config, sidebar: sidebar2, children: /* @__PURE__ */ jsx6(
     Layout,
     {
       className: resolvedClassName,
@@ -466,17 +555,27 @@ function ArdoRoot({
     }
   ) });
 }
+function enhanceHeaderWithMobileMenuContent(header2, mobileMenuContent) {
+  if (!isValidElement2(header2) || header2.type !== Header) {
+    return header2;
+  }
+  const existingMobileMenuContent = header2.props.mobileMenuContent;
+  if (existingMobileMenuContent !== void 0) {
+    return header2;
+  }
+  return cloneElement(header2, { mobileMenuContent });
+}
 
 // src/ui/Nav.tsx
 import { useState as useState4, createContext as createContext2, useContext as useContext3 } from "react";
 import { NavLink as RouterNavLink2 } from "react-router";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var NavContext = createContext2(null);
 function useNavContext() {
   return useContext3(NavContext);
 }
 function Nav({ children, className }) {
-  return /* @__PURE__ */ jsx7("nav", { className: className ?? "ardo-nav", children });
+  return /* @__PURE__ */ jsx7("nav", { className: className ?? nav, children });
 }
 function NavLink2({
   to,
@@ -486,7 +585,7 @@ function NavLink2({
   activeMatch: _activeMatch
 }) {
   const navContext = useNavContext();
-  const baseClassName = className ?? "ardo-nav-link";
+  const baseClassName = className ?? navLink;
   const handleClick = () => {
     navContext?.setMobileMenuOpen(false);
   };
@@ -516,36 +615,28 @@ function NavLink2({
   }
   return /* @__PURE__ */ jsx7("span", { className: baseClassName, children });
 }
-function NavDropdown({ text, children, className }) {
-  const [open, setOpen] = useState4(false);
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className: className ?? "ardo-nav-dropdown",
-      onMouseEnter: () => setOpen(true),
-      onMouseLeave: () => setOpen(false),
-      children: [
-        /* @__PURE__ */ jsxs6("button", { className: "ardo-nav-dropdown-button", children: [
-          text,
-          /* @__PURE__ */ jsx7("span", { className: "ardo-nav-dropdown-icon", children: "\u25BC" })
-        ] }),
-        open && /* @__PURE__ */ jsx7("div", { className: "ardo-nav-dropdown-menu", children })
-      ]
-    }
-  );
-}
 
 // src/ui/TOC.tsx
-import { useState as useState5, useEffect as useEffect2 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState5, useEffect as useEffect3 } from "react";
+
+// src/ui/TOC.css.ts
+var toc = "TOC_toc__1trko900";
+var tocLink = "TOC_tocLink__1trko903";
+var tocLink3 = "TOC_tocLink3__1trko904";
+var tocLink4 = "TOC_tocLink4__1trko905";
+var tocList = "TOC_tocList__1trko902";
+var tocTitle = "TOC_tocTitle__1trko901";
+
+// src/ui/TOC.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function TOC() {
-  const toc = useTOC();
+  const toc2 = useTOC();
   const themeConfig = useThemeConfig();
   const [activeId, setActiveId] = useState5("");
   const label = themeConfig.outline?.label ?? "On this page";
-  useEffect2(() => {
-    if (toc.length === 0) return;
-    const headingElements = toc.map((item) => document.getElementById(item.id)).filter(Boolean);
+  useEffect3(() => {
+    if (toc2.length === 0) return;
+    const headingElements = toc2.map((item) => document.getElementById(item.id)).filter(Boolean);
     if (headingElements.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -565,28 +656,30 @@ function TOC() {
     return () => {
       headingElements.forEach((el) => el && observer.unobserve(el));
     };
-  }, [toc]);
-  if (toc.length === 0) {
+  }, [toc2]);
+  if (toc2.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx8("aside", { className: "ardo-toc", children: /* @__PURE__ */ jsxs7("div", { className: "ardo-toc-container", children: [
-    /* @__PURE__ */ jsx8("h3", { className: "ardo-toc-title", children: label }),
-    /* @__PURE__ */ jsx8("nav", { className: "ardo-toc-nav", "aria-label": "Table of contents", children: /* @__PURE__ */ jsx8(TOCItems, { items: toc, activeId }) })
+  return /* @__PURE__ */ jsx8("aside", { className: toc, children: /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx8("h3", { className: tocTitle, children: label }),
+    /* @__PURE__ */ jsx8("nav", { "aria-label": "Table of contents", children: /* @__PURE__ */ jsx8(TOCItems, { items: toc2, activeId }) })
   ] }) });
 }
 function TOCItems({ items, activeId }) {
-  return /* @__PURE__ */ jsx8("ul", { className: "ardo-toc-list", children: items.map((item) => /* @__PURE__ */ jsx8(TOCItemComponent, { item, activeId }, item.id)) });
+  return /* @__PURE__ */ jsx8("ul", { className: tocList, children: items.map((item) => /* @__PURE__ */ jsx8(TOCItemComponent, { item, activeId }, item.id)) });
 }
 function TOCItemComponent({ item, activeId }) {
   const isActive = item.id === activeId;
   const hasActiveChild = hasActiveDescendant(item, activeId);
-  return /* @__PURE__ */ jsxs7("li", { className: "ardo-toc-item", children: [
+  return /* @__PURE__ */ jsxs6("li", { children: [
     /* @__PURE__ */ jsx8(
       "a",
       {
         href: `#${item.id}`,
         className: [
-          `ardo-toc-link ardo-toc-link-${item.level}`,
+          tocLink,
+          item.level === 3 && tocLink3,
+          item.level === 4 && tocLink4,
           isActive && "active",
           hasActiveChild && "child-active"
         ].filter(Boolean).join(" "),
@@ -614,11 +707,11 @@ function hasActiveDescendant(item, activeId) {
 }
 
 // src/ui/DocPage.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function DocPage({ children }) {
   const pageData = usePageData();
   const showToc = pageData?.frontmatter.outline !== false && pageData?.toc && pageData.toc.length > 0;
-  return /* @__PURE__ */ jsx9(Layout, { children: /* @__PURE__ */ jsxs8("div", { className: "ardo-doc-page", children: [
+  return /* @__PURE__ */ jsx9(Layout, { children: /* @__PURE__ */ jsxs7("div", { className: docPage, children: [
     /* @__PURE__ */ jsx9(Content, { children }),
     showToc && /* @__PURE__ */ jsx9(TOC, {})
   ] }) });
@@ -626,7 +719,7 @@ function DocPage({ children }) {
 function DocContent({ children }) {
   const pageData = usePageData();
   const showToc = pageData?.frontmatter.outline !== false && pageData?.toc && pageData.toc.length > 0;
-  return /* @__PURE__ */ jsxs8("div", { className: "ardo-doc-page", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: docPage, children: [
     /* @__PURE__ */ jsx9(Content, { children }),
     showToc && /* @__PURE__ */ jsx9(TOC, {})
   ] });
@@ -637,14 +730,41 @@ function DocLayout({ content }) {
 
 // src/ui/HomePage.tsx
 import { Link as Link2 } from "react-router";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/ui/components/Hero.css.ts
+var hero = "Hero_hero__j780910";
+var heroAction = "Hero_heroAction__j780918";
+var heroActionAlt = "Hero_heroActionAlt__j78091a";
+var heroActionBrand = "Hero_heroActionBrand__j780919";
+var heroActions = "Hero_heroActions__j780917";
+var heroAnimate = "Hero_heroAnimate__j780912";
+var heroContainer = "Hero_heroContainer__j780911";
+var heroName = "Hero_heroName__j780914";
+var heroTagline = "Hero_heroTagline__j780916";
+var heroText = "Hero_heroText__j780915";
+var heroVersion = "Hero_heroVersion__j780913";
+
+// src/ui/components/Features.css.ts
+var feature = "Features_feature__15qe9bp5";
+var featureDetails = "Features_featureDetails__15qe9bp8";
+var featureIcon = "Features_featureIcon__15qe9bp6";
+var featureLink = "Features_featureLink__15qe9bp9";
+var featureTitle = "Features_featureTitle__15qe9bp7";
+var features = "Features_features__15qe9bp0";
+var featuresContainer = "Features_featuresContainer__15qe9bp4";
+var featuresHeader = "Features_featuresHeader__15qe9bp1";
+var featuresSubtitle = "Features_featuresSubtitle__15qe9bp3";
+var featuresTitle = "Features_featuresTitle__15qe9bp2";
+
+// src/ui/HomePage.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function HomePage() {
   const pageData = usePageData();
   const config = useConfig();
   const themeConfig = useThemeConfig();
-  const hero = pageData?.frontmatter.hero;
-  const features = pageData?.frontmatter.features;
-  return /* @__PURE__ */ jsxs9("div", { className: "ardo-home", children: [
+  const hero2 = pageData?.frontmatter.hero;
+  const features2 = pageData?.frontmatter.features;
+  return /* @__PURE__ */ jsxs8("div", { className: home, children: [
     /* @__PURE__ */ jsx10(
       Header,
       {
@@ -654,35 +774,35 @@ function HomePage() {
         actions: themeConfig.socialLinks?.map((link, index) => /* @__PURE__ */ jsx10(SocialLink, { href: link.link, icon: link.icon, ariaLabel: link.ariaLabel }, index))
       }
     ),
-    /* @__PURE__ */ jsxs9("main", { className: "ardo-home-main", children: [
-      hero && /* @__PURE__ */ jsx10("section", { className: "ardo-hero", children: /* @__PURE__ */ jsxs9("div", { className: "ardo-hero-container", children: [
-        hero.image && /* @__PURE__ */ jsx10("div", { className: "ardo-hero-image", children: /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs8("main", { className: homeMain, children: [
+      hero2 && /* @__PURE__ */ jsx10("section", { className: hero, children: /* @__PURE__ */ jsxs8("div", { className: heroContainer, children: [
+        hero2.image && /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10(
           "img",
           {
-            src: typeof hero.image === "string" ? hero.image : hero.image.light,
-            alt: hero.name || config.title
+            src: typeof hero2.image === "string" ? hero2.image : hero2.image.light,
+            alt: hero2.name || config.title
           }
         ) }),
-        /* @__PURE__ */ jsxs9("div", { className: "ardo-hero-content", children: [
-          hero.name && /* @__PURE__ */ jsx10("h1", { className: "ardo-hero-name", children: hero.name }),
-          hero.text && /* @__PURE__ */ jsx10("p", { className: "ardo-hero-text", children: hero.text }),
-          hero.tagline && /* @__PURE__ */ jsx10("p", { className: "ardo-hero-tagline", children: hero.tagline }),
-          hero.actions && hero.actions.length > 0 && /* @__PURE__ */ jsx10("div", { className: "ardo-hero-actions", children: hero.actions.map((action, index) => /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs8("div", { children: [
+          hero2.name && /* @__PURE__ */ jsx10("h1", { className: heroName, children: hero2.name }),
+          hero2.text && /* @__PURE__ */ jsx10("p", { className: heroText, children: hero2.text }),
+          hero2.tagline && /* @__PURE__ */ jsx10("p", { className: heroTagline, children: hero2.tagline }),
+          hero2.actions && hero2.actions.length > 0 && /* @__PURE__ */ jsx10("div", { className: heroActions, children: hero2.actions.map((action, index) => /* @__PURE__ */ jsx10(
             Link2,
             {
               to: action.link,
-              className: `ardo-hero-action ardo-hero-action-${action.theme || "brand"}`,
+              className: `${heroAction} ${action.theme === "alt" ? heroActionAlt : heroActionBrand}`,
               children: action.text
             },
             index
           )) })
         ] })
       ] }) }),
-      features && features.length > 0 && /* @__PURE__ */ jsx10("section", { className: "ardo-features", children: /* @__PURE__ */ jsx10("div", { className: "ardo-features-container", children: features.map((feature, index) => /* @__PURE__ */ jsxs9("div", { className: "ardo-feature", children: [
-        feature.icon && /* @__PURE__ */ jsx10("div", { className: "ardo-feature-icon", children: feature.icon }),
-        /* @__PURE__ */ jsx10("h3", { className: "ardo-feature-title", children: feature.title }),
-        /* @__PURE__ */ jsx10("p", { className: "ardo-feature-details", children: feature.details }),
-        feature.link && /* @__PURE__ */ jsx10(Link2, { to: feature.link, className: "ardo-feature-link", children: feature.linkText || "Learn more" })
+      features2 && features2.length > 0 && /* @__PURE__ */ jsx10("section", { className: features, children: /* @__PURE__ */ jsx10("div", { className: featuresContainer, children: features2.map((feature2, index) => /* @__PURE__ */ jsxs8("div", { className: feature, children: [
+        feature2.icon && /* @__PURE__ */ jsx10("div", { className: featureIcon, children: feature2.icon }),
+        /* @__PURE__ */ jsx10("h3", { className: featureTitle, children: feature2.title }),
+        /* @__PURE__ */ jsx10("p", { className: featureDetails, children: feature2.details }),
+        feature2.link && /* @__PURE__ */ jsx10(Link2, { to: feature2.link, className: featureLink, children: feature2.linkText || "Learn more" })
       ] }, index)) }) })
     ] }),
     /* @__PURE__ */ jsx10(Footer, {})
@@ -691,25 +811,25 @@ function HomePage() {
 
 // src/ui/components/Hero.tsx
 import { Link as Link3 } from "react-router";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function Hero({ name, text, tagline, image, actions, className, version }) {
   const imageUrl = typeof image === "string" ? image : image?.light;
   const imageAlt = typeof image === "string" ? name : image?.alt ?? name;
-  return /* @__PURE__ */ jsx11("section", { className: className ?? "ardo-hero", children: /* @__PURE__ */ jsxs10("div", { className: "ardo-hero-container ardo-hero-animate", children: [
-    image && /* @__PURE__ */ jsx11("div", { className: "ardo-hero-image", children: /* @__PURE__ */ jsx11("img", { src: imageUrl, alt: imageAlt }) }),
-    /* @__PURE__ */ jsxs10("div", { className: "ardo-hero-content", children: [
-      version && /* @__PURE__ */ jsxs10("span", { className: "ardo-hero-version", children: [
+  return /* @__PURE__ */ jsx11("section", { className: className ?? hero, children: /* @__PURE__ */ jsxs9("div", { className: `${heroContainer} ${heroAnimate}`, children: [
+    image && /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("img", { src: imageUrl, alt: imageAlt }) }),
+    /* @__PURE__ */ jsxs9("div", { children: [
+      version && /* @__PURE__ */ jsxs9("span", { className: heroVersion, children: [
         "v",
         version
       ] }),
-      name && /* @__PURE__ */ jsx11("h1", { className: "ardo-hero-name", children: name }),
-      text && /* @__PURE__ */ jsx11("p", { className: "ardo-hero-text", children: text }),
-      tagline && /* @__PURE__ */ jsx11("p", { className: "ardo-hero-tagline", children: tagline }),
-      actions && actions.length > 0 && /* @__PURE__ */ jsx11("div", { className: "ardo-hero-actions", children: actions.map((action, index) => {
+      name && /* @__PURE__ */ jsx11("h1", { className: heroName, children: name }),
+      text && /* @__PURE__ */ jsx11("p", { className: heroText, children: text }),
+      tagline && /* @__PURE__ */ jsx11("p", { className: heroTagline, children: tagline }),
+      actions && actions.length > 0 && /* @__PURE__ */ jsx11("div", { className: heroActions, children: actions.map((action, index) => {
         const link = action.link;
         const isExternal = typeof link === "string" && (link.startsWith("http://") || link.startsWith("https://"));
-        const className2 = `ardo-hero-action ardo-hero-action-${action.theme || "brand"}`;
-        const content = /* @__PURE__ */ jsxs10(Fragment2, { children: [
+        const actionClass = `${heroAction} ${action.theme === "alt" ? heroActionAlt : heroActionBrand}`;
+        const content = /* @__PURE__ */ jsxs9(Fragment2, { children: [
           action.icon,
           action.text
         ] });
@@ -718,7 +838,7 @@ function Hero({ name, text, tagline, image, actions, className, version }) {
             "a",
             {
               href: link,
-              className: className2,
+              className: actionClass,
               target: "_blank",
               rel: "noopener noreferrer",
               children: content
@@ -726,7 +846,7 @@ function Hero({ name, text, tagline, image, actions, className, version }) {
             index
           );
         }
-        return /* @__PURE__ */ jsx11(Link3, { to: link, className: className2, children: content }, index);
+        return /* @__PURE__ */ jsx11(Link3, { to: link, className: actionClass, children: content }, index);
       }) })
     ] })
   ] }) });
@@ -734,7 +854,7 @@ function Hero({ name, text, tagline, image, actions, className, version }) {
 
 // src/ui/components/Features.tsx
 import { Link as Link4 } from "react-router";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function FeatureCard({
   title,
   icon,
@@ -744,78 +864,26 @@ function FeatureCard({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxs11("div", { className: className ?? "ardo-feature", style, children: [
-    icon && /* @__PURE__ */ jsx12("div", { className: "ardo-feature-icon", children: icon }),
-    /* @__PURE__ */ jsx12("h3", { className: "ardo-feature-title", children: title }),
-    /* @__PURE__ */ jsx12("p", { className: "ardo-feature-details", children: details }),
-    link && /* @__PURE__ */ jsx12(Link4, { to: link, className: "ardo-feature-link", children: linkText || "Learn more" })
+  return /* @__PURE__ */ jsxs10("div", { className: className ?? feature, style, children: [
+    icon && /* @__PURE__ */ jsx12("div", { className: featureIcon, children: icon }),
+    /* @__PURE__ */ jsx12("h3", { className: featureTitle, children: title }),
+    /* @__PURE__ */ jsx12("p", { className: featureDetails, children: details }),
+    link && /* @__PURE__ */ jsx12(Link4, { to: link, className: featureLink, children: linkText || "Learn more" })
   ] });
 }
 function Features({ items, title, subtitle, className }) {
   if (!items || items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs11("section", { className: className ?? "ardo-features", children: [
-    (title || subtitle) && /* @__PURE__ */ jsxs11("div", { className: "ardo-features-header", children: [
-      title && /* @__PURE__ */ jsx12("h2", { className: "ardo-features-title", children: title }),
-      subtitle && /* @__PURE__ */ jsx12("p", { className: "ardo-features-subtitle", children: subtitle })
+  return /* @__PURE__ */ jsxs10("section", { className: className ?? features, children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs10("div", { className: featuresHeader, children: [
+      title && /* @__PURE__ */ jsx12("h2", { className: featuresTitle, children: title }),
+      subtitle && /* @__PURE__ */ jsx12("p", { className: featuresSubtitle, children: subtitle })
     ] }),
-    /* @__PURE__ */ jsx12("div", { className: "ardo-features-container", children: items.map((feature, index) => /* @__PURE__ */ jsx12(FeatureCard, { ...feature, style: { animationDelay: `${index * 80}ms` } }, index)) })
+    /* @__PURE__ */ jsx12("div", { className: featuresContainer, children: items.map((feature2, index) => /* @__PURE__ */ jsx12(FeatureCard, { ...feature2, style: { animationDelay: `${index * 80}ms` } }, index)) })
   ] });
 }
 
-// src/ui/components/Steps.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-function Steps({ children }) {
-  return /* @__PURE__ */ jsx13("div", { className: "ardo-steps", children });
-}
-
-// src/ui/components/FileTree.tsx
-import {
-  Children as Children2,
-  isValidElement as isValidElement2,
-  cloneElement
-} from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-function getTextContent(node) {
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return String(node);
-  if (!isValidElement2(node)) return "";
-  const children = node.props.children;
-  if (!children) return "";
-  return Children2.toArray(children).map(getTextContent).join("");
-}
-function isDirectory(node) {
-  const children = node.props.children;
-  const childArray = Children2.toArray(children);
-  for (const child of childArray) {
-    if (isValidElement2(child) && (child.type === "ul" || child.type === "ol")) {
-      return true;
-    }
-  }
-  const text = getTextContent(node).trim();
-  return text.endsWith("/");
-}
-function processChildren(children) {
-  return Children2.map(children, (child) => {
-    if (!isValidElement2(child)) return child;
-    const props = child.props;
-    const el = child;
-    if (child.type === "li") {
-      const isDir = isDirectory(child);
-      const className = [props.className, isDir ? "ardo-filetree-dir" : "ardo-filetree-file"].filter(Boolean).join(" ");
-      return cloneElement(el, { className }, processChildren(props.children));
-    }
-    if (child.type === "ul" || child.type === "ol") {
-      return cloneElement(el, {}, processChildren(props.children));
-    }
-    return child;
-  });
-}
-function FileTree({ children }) {
-  return /* @__PURE__ */ jsx14("div", { className: "ardo-filetree", children: processChildren(children) });
-}
-
 export {
   RootLayout,
   Layout,
@@ -829,7 +897,6 @@ export {
   ArdoRoot,
   Nav,
   NavLink2 as NavLink,
-  NavDropdown,
   TOC,
   DocPage,
   DocContent,
@@ -837,8 +904,6 @@ export {
   HomePage,
   Hero,
   FeatureCard,
-  Features,
-  Steps,
-  FileTree
+  Features
 };
-//# sourceMappingURL=chunk-TDBU2FXP.js.map
+//# sourceMappingURL=chunk-CZM5NX27.js.map