fumadocs-ui 11.1.2 → 11.2.0

package/dist/layout.client.js

@@ -24,7 +24,7 @@ import {
 } from "./chunk-2KA2UOM3.js";
 import {
   useI18n
-} from "./chunk-YAHHY62W.js";
+} from "./chunk-PW7TBOIJ.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -39,7 +39,7 @@ import {
 import "./chunk-6C3VEZWH.js";
 
 // src/components/nav.tsx
-import { MenuIcon, MoreVerticalIcon, SearchIcon } from "lucide-react";
+import { MenuIcon, MoreVertical, SearchIcon, X } from "lucide-react";
 import Link2 from "fumadocs-core/link";
 import { SidebarTrigger } from "fumadocs-core/sidebar";
 import { useEffect, useState } from "react";
@@ -47,7 +47,7 @@ import { usePathname as usePathname2 } from "next/navigation";
 
 // src/components/theme-toggle.tsx
 import { cva } from "class-variance-authority";
-import { MoonIcon, SunIcon } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -79,8 +79,8 @@ function ThemeToggle({
       onClick: onToggle,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(SunIcon, { className: twMerge(buttonVariants2({ dark: false })) }),
-        /* @__PURE__ */ jsx(MoonIcon, { className: twMerge(buttonVariants2({ dark: true })) })
+        /* @__PURE__ */ jsx(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
+        /* @__PURE__ */ jsx(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
       ]
     }
   );
@@ -88,7 +88,7 @@ function ThemeToggle({
 
 // src/components/link-item.tsx
 import Link from "fumadocs-core/link";
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -125,7 +125,7 @@ function LinkItem({
           ...props,
           children: [
             item.text,
-            /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "ml-auto size-4" })
+            /* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto size-4" })
           ]
         }
       ),
@@ -142,11 +142,11 @@ function LinkItem({
           children: [
             item.icon,
             item.text,
-            /* @__PURE__ */ jsx2(ChevronDownIcon, { className: "ml-auto size-4 group-data-[state=closed]/link:-rotate-90" })
+            /* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto size-4 group-data-[state=closed]/link:-rotate-90" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx2(CollapsibleContent, { children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col ps-4 py-1", children: item.items.map((child, i) => /* @__PURE__ */ jsx2(LinkItem, { item: child, on: "menu" }, i)) }) })
+      /* @__PURE__ */ jsx2(CollapsibleContent, { children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col py-1 ps-4", children: item.items.map((child, i) => /* @__PURE__ */ jsx2(LinkItem, { item: child, on: "menu" }, i)) }) })
     ] });
   }
   const activeType = item.active ?? "url";
@@ -243,7 +243,7 @@ function Nav({
         /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-row items-center justify-end md:gap-2", children: [
           enableSearch && search.enabled ? /* @__PURE__ */ jsx3(SearchToggle, {}) : null,
           /* @__PURE__ */ jsx3(ThemeToggle, { className: "max-lg:hidden" }),
-          enableSidebar ? /* @__PURE__ */ jsx3(
+          enableSidebar ? /* @__PURE__ */ jsxs3(
             SidebarTrigger,
             {
               "aria-label": "Toggle Sidebar",
@@ -251,10 +251,13 @@ function Nav({
                 buttonVariants({
                   size: "icon",
                   color: "ghost",
-                  className: "md:hidden"
+                  className: "group md:hidden"
                 })
               ),
-              children: /* @__PURE__ */ jsx3(MenuIcon, {})
+              children: [
+                /* @__PURE__ */ jsx3(MenuIcon, { className: "group-data-[open=true]:hidden" }),
+                /* @__PURE__ */ jsx3(X, { className: "hidden group-data-[open=true]:block" })
+              ]
             }
           ) : null,
           /* @__PURE__ */ jsx3(
@@ -288,12 +291,15 @@ function LinksMenu({ items, ...props }) {
             className: props.className
           })
         ),
-        children: /* @__PURE__ */ jsx3(MoreVerticalIcon, {})
+        children: /* @__PURE__ */ jsx3(MoreVertical, {})
       }
     ),
     /* @__PURE__ */ jsxs3(PopoverContent, { className: "flex flex-col", children: [
       items.map((item, i) => /* @__PURE__ */ jsx3(LinkItem, { item, on: "menu" }, i)),
-      /* @__PURE__ */ jsx3(ThemeToggle, { className: "w-fit" })
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-row px-2 py-1 items-center justify-between", children: [
+        /* @__PURE__ */ jsx3("p", { className: "font-medium", children: "Theme" }),
+        /* @__PURE__ */ jsx3(ThemeToggle, {})
+      ] })
     ] })
   ] });
 }
@@ -338,11 +344,17 @@ function SearchToggle() {
 
 // src/components/sidebar.tsx
 import { cva as cva3 } from "class-variance-authority";
-import { ChevronDown, ExternalLinkIcon, SidebarIcon } from "lucide-react";
+import { ChevronDown as ChevronDown2, ExternalLinkIcon } from "lucide-react";
 import * as Base from "fumadocs-core/sidebar";
 import { usePathname as usePathname3 } from "next/navigation";
-import * as React from "react";
-import { createContext, useContext, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import {
+  createContext,
+  useCallback as useCallback2,
+  useContext,
+  useEffect as useEffect2,
+  useMemo,
+  useState as useState2
+} from "react";
 import Link3 from "fumadocs-core/link";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var itemVariants = cva3(
@@ -369,12 +381,11 @@ function Sidebar({
   footer,
   components,
   defaultOpenLevel = 1,
-  collapsible = true,
   banner,
-  items
+  items,
+  ...props
 }) {
-  const [open, setOpen] = useSidebarCollapse();
-  const alwaysShowFooter = Boolean(footer) || collapsible;
+  const alwaysShowFooter = Boolean(footer);
   const context = useMemo(
     () => ({
       defaultOpenLevel,
@@ -382,79 +393,43 @@ function Sidebar({
     }),
     [components, defaultOpenLevel]
   );
-  const onCollapse = () => {
-    setOpen(!open);
-  };
-  return /* @__PURE__ */ jsxs4(SidebarContext.Provider, { value: context, children: [
-    collapsible && !open ? /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Trigger Sidebar",
-        className: twMerge(
-          buttonVariants({
-            color: "ghost",
-            size: "icon",
-            className: "sticky bottom-4 mt-auto mb-4 h-fit max-md:hidden"
-          })
-        ),
-        onClick: onCollapse,
-        children: /* @__PURE__ */ jsx4(SidebarIcon, {})
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs4(
-      Base.SidebarList,
-      {
-        minWidth: 768,
-        className: twMerge(
-          "flex w-full flex-col text-[15px] md:sticky md:top-16 md:h-body md:w-[240px] md:text-sm xl:w-[260px]",
-          !open && "md:hidden",
-          "max-md:fixed max-md:inset-0 max-md:z-40 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs4(ViewportContent, { children: [
-            banner,
-            items.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-col md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx4(LinkItem, { item, on: "menu" }, i)) })
-          ] }),
-          /* @__PURE__ */ jsxs4(
-            "div",
-            {
-              className: twMerge(
-                "flex flex-row items-center gap-2 border-t p-3 md:p-2",
-                !alwaysShowFooter && "md:hidden"
-              ),
-              children: [
-                footer,
-                /* @__PURE__ */ jsx4(ThemeToggle, { className: "md:hidden" }),
-                collapsible ? /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Trigger Sidebar",
-                    className: twMerge(
-                      buttonVariants({
-                        color: "ghost",
-                        size: "icon",
-                        className: "max-md:hidden ms-auto"
-                      })
-                    ),
-                    onClick: onCollapse,
-                    children: /* @__PURE__ */ jsx4(SidebarIcon, {})
-                  }
-                ) : null
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx4(SidebarContext.Provider, { value: context, children: /* @__PURE__ */ jsxs4(
+    Base.SidebarList,
+    {
+      minWidth: 768,
+      className: twMerge(
+        "flex w-full flex-col text-[15px] md:sticky md:top-16 md:h-body md:w-[240px] md:text-sm xl:w-[260px]",
+        "max-md:fixed max-md:inset-0 max-md:z-40 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden",
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4("div", { id: "sidebar-background", className: "absolute z-[-1] size-full" }),
+        /* @__PURE__ */ jsxs4(ViewportContent, { children: [
+          banner,
+          items.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-col md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx4(LinkItem, { item, on: "menu" }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: twMerge(
+              "flex flex-row items-center gap-2 border-t p-3 md:p-2",
+              !alwaysShowFooter && "md:hidden"
+            ),
+            children: [
+              footer,
+              /* @__PURE__ */ jsx4(ThemeToggle, { className: "md:hidden" })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 }
 function ViewportContent({
   children
 }) {
   const { root } = useTreeContext();
-  return /* @__PURE__ */ jsx4(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx4(ScrollViewport, { children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-8 pb-10 pt-4 max-md:px-4 md:pr-3 md:pt-10", children: [
+  return /* @__PURE__ */ jsx4(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx4(ScrollViewport, { children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-8 pb-10 pt-4 px-4 md:px-3 md:pt-10", children: [
     children,
     /* @__PURE__ */ jsx4(NodeList, { items: root.children })
   ] }) }) });
@@ -513,7 +488,7 @@ function FolderNode({
     if (shouldExtend)
       setExtend(true);
   }, [shouldExtend]);
-  const onClick = React.useCallback(
+  const onClick = useCallback2(
     (e) => {
       if (e.target !== e.currentTarget || active) {
         setExtend((prev) => !prev);
@@ -533,7 +508,7 @@ function FolderNode({
           icon,
           name,
           /* @__PURE__ */ jsx4(
-            ChevronDown,
+            ChevronDown2,
             {
               className: twMerge(
                 "ms-auto transition-transform",
@@ -547,7 +522,7 @@ function FolderNode({
       icon,
       name,
       /* @__PURE__ */ jsx4(
-        ChevronDown,
+        ChevronDown2,
         {
           className: twMerge(
             "ms-auto transition-transform",
@@ -559,7 +534,7 @@ function FolderNode({
     /* @__PURE__ */ jsx4(CollapsibleContent, { children: /* @__PURE__ */ jsx4(
       NodeList,
       {
-        className: "ms-4 flex flex-col border-s py-2 ps-2",
+        className: "ms-2 flex flex-col border-s py-2 ps-2",
         items: children,
         level
       }
@@ -571,7 +546,107 @@ function SeparatorNode({
 }) {
   return /* @__PURE__ */ jsx4("p", { className: "mb-2 mt-8 px-2 font-medium first:mt-0", children: item.name });
 }
+
+// src/components/dynamic-sidebar.tsx
+import { useCallback as useCallback3, useRef, useState as useState3 } from "react";
+import { SidebarIcon } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function DynamicSidebar(props) {
+  const [open, setOpen] = useSidebarCollapse();
+  const [hover, setHover] = useState3(false);
+  const timerRef = useRef(0);
+  const onCollapse = () => {
+    setOpen(!open);
+  };
+  const onHover = useCallback3((e) => {
+    if (e.pointerType === "touch")
+      return;
+    window.clearTimeout(timerRef.current);
+    setHover(true);
+  }, []);
+  const onLeave = useCallback3((e) => {
+    if (e.pointerType === "touch")
+      return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setHover(false);
+    }, 300);
+  }, []);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    !open ? /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "fixed bottom-0 start-0 top-16 max-md:hidden",
+        onPointerEnter: onHover,
+        onPointerLeave: onLeave,
+        style: {
+          maxWidth: "240px",
+          width: "calc(max(0px, 100vw - 1400px)/2)",
+          minWidth: "1rem"
+        }
+      }
+    ) : null,
+    !open ? /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Trigger Sidebar",
+        className: twMerge(
+          buttonVariants({
+            color: "secondary",
+            size: "icon",
+            className: "fixed start-4 bottom-4 z-10 max-md:hidden"
+          })
+        ),
+        onClick: onCollapse,
+        children: /* @__PURE__ */ jsx5(SidebarIcon, {})
+      }
+    ) : null,
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        id: "dynamic-sidebar",
+        "data-open": open,
+        "data-hover": hover,
+        onPointerEnter: onHover,
+        onPointerLeave: onLeave,
+        "aria-hidden": !open && !hover,
+        className: twMerge(
+          "z-40 transition-transform max-md:absolute",
+          !open && "md:fixed md:bottom-2 md:start-2 md:top-16 md:overflow-hidden md:rounded-xl md:border md:bg-background md:shadow-md"
+        ),
+        children: /* @__PURE__ */ jsx5(
+          Sidebar,
+          {
+            ...props,
+            className: twMerge(!open && "md:h-full"),
+            footer: /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              props.footer,
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Trigger Sidebar",
+                  className: twMerge(
+                    buttonVariants({
+                      color: "ghost",
+                      size: "icon",
+                      className: "max-md:hidden ms-auto"
+                    })
+                  ),
+                  onClick: onCollapse,
+                  children: /* @__PURE__ */ jsx5(SidebarIcon, {})
+                }
+              )
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
 export {
+  DynamicSidebar,
   Nav,
   Sidebar,
   TreeContextProvider

package/dist/layout.d.ts

@@ -1,3 +1,3 @@
 import 'fumadocs-core/server';
 import 'react';
-export { B as BaseLayoutProps, b as DocsLayout, D as DocsLayoutProps, a as Layout, L as LinkItemType } from './layout-2R7eRkWi.js';
+export { B as BaseLayoutProps, c as DocsLayout, D as DocsLayoutProps, b as Layout, L as LinkItemType } from './layout-vxXAvjoq.js';

package/dist/layout.js

@@ -1,6 +1,7 @@
 import {
   Nav,
   TreeContextProvider,
+  DynamicSidebar,
   Sidebar,
 } from "./layout.client.js"
 import {
@@ -48,20 +49,27 @@ function DocsLayout({
       {
         ...containerProps,
         className: twMerge(
-          "mx-auto flex w-full max-w-container flex-row gap-6 px-4 xl:gap-12",
+          "mx-auto flex w-full max-w-container flex-row gap-2 xl:gap-6",
           containerProps?.className
         ),
         children: [
           replaceOrDefault(
             sidebar,
-            /* @__PURE__ */ jsx(
+            sidebarCollapsible ? /* @__PURE__ */ jsx(
+              DynamicSidebar,
+              {
+                items: finalLinks,
+                defaultOpenLevel: sidebar.defaultOpenLevel,
+                banner: sidebar.banner,
+                footer: sidebar.footer
+              }
+            ) : /* @__PURE__ */ jsx(
               Sidebar,
               {
                 items: finalLinks,
                 defaultOpenLevel: sidebar.defaultOpenLevel,
                 banner: sidebar.banner,
-                footer: sidebar.footer,
-                collapsible: sidebarCollapsible
+                footer: sidebar.footer
               }
             )
           ),

package/dist/mdx.client.js

@@ -2,7 +2,7 @@
 import {
   CodeBlock,
   Pre
-} from "./chunk-RPQDC26K.js";
+} from "./chunk-E2VA3Y4S.js";
 import "./chunk-VYTHQTZE.js";
 import "./chunk-24NYFO7H.js";
 import "./chunk-7GZKFBAP.js";

package/dist/page.client.js

@@ -9,7 +9,7 @@ import {
 import "./chunk-7F2LGCS6.js";
 import {
   useI18n
-} from "./chunk-YAHHY62W.js";
+} from "./chunk-PW7TBOIJ.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -17,7 +17,7 @@ import "./chunk-6C3VEZWH.js";
 
 // src/page.client.tsx
 import { useEffect as useEffect2, useMemo, useState } from "react";
-import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "lucide-react";
+import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 import Link2 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
 
@@ -84,7 +84,7 @@ function TOCItem2({
 }
 
 // src/components/breadcrumb.tsx
-import { ChevronRightIcon } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import { useBreadcrumb } from "fumadocs-core/breadcrumb";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -107,13 +107,10 @@ function Breadcrumb() {
           "overflow-hidden whitespace-nowrap",
           isLast ? "text-foreground" : "text-ellipsis"
         );
-        return (
-          // eslint-disable-next-line react/no-array-index-key -- Won't re-render
-          /* @__PURE__ */ jsxs2(Fragment, { children: [
-            i !== 0 && /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "size-4 shrink-0 rtl:rotate-180" }),
-            item.url ? /* @__PURE__ */ jsx2(Link, { href: item.url, className: style, children: item.name }) : /* @__PURE__ */ jsx2("span", { className: style, children: item.name })
-          ] }, i)
-        );
+        return /* @__PURE__ */ jsxs2(Fragment, { children: [
+          i !== 0 && /* @__PURE__ */ jsx2(ChevronRight, { className: "size-4 shrink-0 rtl:rotate-180" }),
+          item.url ? /* @__PURE__ */ jsx2(Link, { href: item.url, className: style, children: item.name }) : /* @__PURE__ */ jsx2("span", { className: style, children: item.name })
+        ] }, i);
       })
     }
   );
@@ -136,6 +133,7 @@ function LastUpdate(props) {
 function Footer({ items }) {
   const tree = useTreeContext();
   const pathname = usePathname2();
+  const { nextPage, previousPage } = useI18n().text;
   const { previous = items?.previous, next = items?.next } = useMemo(() => {
     const currentIndex = tree.navigation.findIndex(
       (item) => item.url === pathname
@@ -145,29 +143,22 @@ function Footer({ items }) {
       next: tree.navigation[currentIndex + 1]
     };
   }, [pathname, tree.navigation]);
-  const footerItem = "flex flex-col gap-2 rounded-lg p-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground";
-  return /* @__PURE__ */ jsxs3("div", { className: "-mx-2 mt-4 grid grid-cols-1 gap-2 border-t py-6 sm:grid-cols-2", children: [
+  const footerItem = "flex flex-col gap-2 rounded-lg p-4 text-sm transition-colors hover:bg-accent hover:text-accent-foreground";
+  return /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex flex-row flex-wrap gap-1 border-t py-4", children: [
     previous ? /* @__PURE__ */ jsxs3(Link2, { href: previous.url, className: footerItem, children: [
-      /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }),
-        /* @__PURE__ */ jsx3("p", { children: "Previous" })
+      /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center gap-0.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }),
+        /* @__PURE__ */ jsx3("p", { children: previousPage })
       ] }),
-      /* @__PURE__ */ jsx3("p", { className: "font-medium text-foreground", children: previous.name })
+      /* @__PURE__ */ jsx3("p", { className: "font-medium", children: previous.name })
     ] }) : null,
-    next ? /* @__PURE__ */ jsxs3(
-      Link2,
-      {
-        href: next.url,
-        className: twMerge(footerItem, "text-end sm:col-start-2"),
-        children: [
-          /* @__PURE__ */ jsxs3("div", { className: "inline-flex flex-row-reverse items-center gap-0.5", children: [
-            /* @__PURE__ */ jsx3(ChevronRightIcon2, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }),
-            /* @__PURE__ */ jsx3("p", { children: "Next" })
-          ] }),
-          /* @__PURE__ */ jsx3("p", { className: "font-medium text-foreground", children: next.name })
-        ]
-      }
-    ) : null
+    next ? /* @__PURE__ */ jsxs3(Link2, { href: next.url, className: twMerge(footerItem, "ms-auto text-end"), children: [
+      /* @__PURE__ */ jsxs3("div", { className: "inline-flex flex-row-reverse items-center gap-0.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3(ChevronRight2, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }),
+        /* @__PURE__ */ jsx3("p", { children: nextPage })
+      ] }),
+      /* @__PURE__ */ jsx3("p", { className: "font-medium", children: next.name })
+    ] }) : null
   ] });
 }
 export {

package/dist/page.js

@@ -22,7 +22,7 @@ function DocsPage({
   ...props
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("article", { className: "flex w-0 flex-1 flex-col gap-6 py-10", children: [
+    /* @__PURE__ */ jsxs("article", { className: "flex w-0 flex-1 flex-col gap-6 px-4 py-10", children: [
       replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, {})),
       props.children,
       props.lastUpdate ? /* @__PURE__ */ jsx(LastUpdate, { date: new Date(props.lastUpdate) }) : null,

package/dist/provider.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { ReactNode } from 'react';
 import { DefaultSearchDialogProps } from './components/dialog/search-default.js';
 import { SearchLink, SharedProps } from './components/dialog/search.js';
-export { u as useI18n } from './i18n-dw7ODAws.js';
+export { u as useI18n } from './i18n-p5QWhj_3.js';
 export { u as useTreeContext } from './tree-cqNEopxM.js';
 import 'fumadocs-core/search/shared';
 import 'fumadocs-core/server';

package/dist/provider.js

@@ -13,7 +13,7 @@ import {
 } from "./chunk-2KA2UOM3.js";
 import {
   useI18n
-} from "./chunk-YAHHY62W.js";
+} from "./chunk-PW7TBOIJ.js";
 import "./chunk-6C3VEZWH.js";
 
 // src/provider.tsx