@umami/shiso 0.25.0 → 0.27.0

package/dist/index.css

@@ -34,76 +34,71 @@ pre.CodeBlock_container__YmFmN code {
 }
 
 /* virtual-css:css:0ed498f49b21d225f1b5a4e1685cf2e5 */
-.PageLinks_title__ZGY1Y {
-  position: sticky;
-  top: 0;
-}
-.PageLinks_links__ODM4N {
+.PageLinks_links__MjgyM {
   position: sticky;
   top: 30px;
   height: max-content;
 }
-.PageLinks_links__ODM4N a.PageLinks_link__ZDE4O {
+.PageLinks_links__MjgyM a.PageLinks_link__YWRjO {
   display: block;
   color: var(--font-color-muted);
   font-size: var(--font-size);
   text-wrap: nowrap;
   text-decoration: none;
 }
-.PageLinks_links__ODM4N a.PageLinks_link__ZDE4O:hover {
+.PageLinks_links__MjgyM a.PageLinks_link__YWRjO:hover {
   color: var(--primary-color);
   text-decoration: none;
 }
-.PageLinks_indent-1__NGU3M {
+.PageLinks_indent-1__MDcyM {
   margin-left: 0;
 }
-.PageLinks_indent-2__YjFlN {
+.PageLinks_indent-2__OWYxZ {
   margin-left: 0;
 }
-.PageLinks_indent-3__NzQxY {
+.PageLinks_indent-3__ZmYwM {
   margin-left: 10px;
 }
-.PageLinks_indent-4__NzRjN {
+.PageLinks_indent-4__NzU2Y {
   margin-left: 20px;
 }
-.PageLinks_indent-5__ZmRhN {
+.PageLinks_indent-5__NmVkY {
   margin-left: 30px;
 }
-.PageLinks_indent-6__YzQ3N {
+.PageLinks_indent-6__NzQ4N {
   margin-left: 40px;
 }
-.PageLinks_links__ODM4N a.PageLinks_selected__NTViM {
+.PageLinks_links__MjgyM a.PageLinks_selected__YmZhY {
   color: var(--primary-color);
 }
 
 /* virtual-css:css:72ce2cfbba7b635b2ff1a5f4f5eeabf3 */
-.SideNav_nav__NmZmM {
-  height: max-content;
+.SideNav_nav__MDQ3Z {
   overflow-y: auto;
 }
-.SideNav_nav__NmZmM.SideNav_sticky__ZTAwY {
+.SideNav_nav__MDQ3Z.SideNav_sticky__ZjQ5Y {
   position: sticky;
 }
-.SideNav_nav__NmZmM .SideNav_item__ODZhM {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z {
   color: var(--font-color-muted);
   padding: 0;
   border-radius: 0;
   border-left: var(--border-size-1) solid var(--border-color);
 }
-.SideNav_nav__NmZmM .SideNav_item__ODZhM a {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z a {
   color: currentColor;
   width: 100%;
   padding: var(--padding-y) var(--padding-x);
   text-decoration: none;
 }
-.SideNav_nav__NmZmM .SideNav_item__ODZhM a:hover {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z a:hover {
   color: var(--primary-color);
 }
-.SideNav_nav__NmZmM .SideNav_item__ODZhM.SideNav_selected__YjE0Y {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z.SideNav_selected__NDgxN {
   color: var(--font-color);
   border-color: var(--primary-color);
 }
-.SideNav_items__N2ZkN header {
+.SideNav_items__MzBhY header {
   padding: var(--padding-y) 0;
 }
 

package/dist/index.js

@@ -160,7 +160,7 @@ var import_react_zen5 = require("@umami/react-zen");
 var import_classnames = __toESM(require("classnames"));
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
-var PageLinks_default = { "title": "PageLinks_title__ZGY1Y", "links": "PageLinks_links__ODM4N", "link": "PageLinks_link__ZDE4O", "indent-1": "PageLinks_indent-1__NGU3M", "indent-2": "PageLinks_indent-2__YjFlN", "indent-3": "PageLinks_indent-3__NzQxY", "indent-4": "PageLinks_indent-4__NzRjN", "indent-5": "PageLinks_indent-5__ZmRhN", "indent-6": "PageLinks_indent-6__YzQ3N", "selected": "PageLinks_selected__NTViM" };
+var PageLinks_default = { "links": "PageLinks_links__MjgyM", "link": "PageLinks_link__YWRjO", "indent-1": "PageLinks_indent-1__MDcyM", "indent-2": "PageLinks_indent-2__OWYxZ", "indent-3": "PageLinks_indent-3__ZmYwM", "indent-4": "PageLinks_indent-4__NzU2Y", "indent-5": "PageLinks_indent-5__NmVkY", "indent-6": "PageLinks_indent-6__NzQ4N", "selected": "PageLinks_selected__YmZhY" };
 
 // src/components/PageLinks.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -182,7 +182,7 @@ function PageLinks({ items = [], className, ...props }) {
   if (!items?.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen5.Column, { ...props, gap: "3", minWidth: "240px", className: (0, import_classnames.default)(PageLinks_default.links, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen5.Box, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen5.Column, { gap: "3", minWidth: "240px", className: (0, import_classnames.default)(PageLinks_default.links, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen5.Text, { size: "2", weight: "bold", children: "On this page" }),
     items.map(({ name, id, size }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -197,38 +197,65 @@ function PageLinks({ items = [], className, ...props }) {
         id
       );
     })
-  ] });
+  ] }) });
 }
 
 // src/components/SideNav.tsx
+var import_react7 = require("react");
 var import_react_zen6 = require("@umami/react-zen");
 var import_classnames2 = __toESM(require("classnames"));
 var import_navigation = require("next/navigation");
 var import_link = __toESM(require("next/link"));
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
-var SideNav_default = { "nav": "SideNav_nav__NmZmM", "sticky": "SideNav_sticky__ZTAwY", "item": "SideNav_item__ODZhM", "selected": "SideNav_selected__YjE0Y", "items": "SideNav_items__N2ZkN" };
+var SideNav_default = { "nav": "SideNav_nav__MDQ3Z", "sticky": "SideNav_sticky__ZjQ5Y", "item": "SideNav_item__ZWU3Z", "selected": "SideNav_selected__NDgxN", "items": "SideNav_items__MzBhY" };
 
 // src/components/SideNav.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function SideNav({ tabs, navigation, isSticky, className, ...props }) {
+function SideNav({
+  tabs,
+  navigation,
+  isSticky,
+  autoHeight,
+  className,
+  style,
+  ...props
+}) {
   const pathname = (0, import_navigation.usePathname)();
   const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
   const menu = navigation[tab?.id || "docs"];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.Box, { ...props, className: (0, import_classnames2.default)(SideNav_default.nav, isSticky && SideNav_default.sticky, className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_react_zen6.ListItem,
-        {
-          className: (0, import_classnames2.default)(SideNav_default.item, {
-            [SideNav_default.selected]: url === pathname
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_link.default, { href: url, prefetch: false, children: text })
-        },
-        index
-      );
-    }) }, section);
-  }) }) });
+  const [height, setHeight] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
+    if (autoHeight) {
+      const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
+      if (rect) {
+        setHeight(`${window.innerHeight - rect.top - 10}px`);
+      }
+    }
+  }, [autoHeight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_zen6.Box,
+    {
+      ...props,
+      id: "shiso_docs_sidenav",
+      className: (0, import_classnames2.default)(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
+      style: { ...style, height },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_zen6.ListItem,
+            {
+              className: (0, import_classnames2.default)(SideNav_default.item, {
+                [SideNav_default.selected]: url === pathname
+              }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_link.default, { href: url, prefetch: false, children: text })
+            },
+            index
+          );
+        }) }, section);
+      }) })
+    }
+  );
 }
 
 // src/components/TopNav.tsx
@@ -322,16 +349,28 @@ function Docs() {
     xs: "none",
     sm: "none",
     md: "none",
-    lg: "flex",
-    xl: "flex"
+    lg: "block",
+    xl: "block"
   };
   const menuDisplay = {
-    default: "flex",
+    default: "block",
     lg: "none",
     xl: "none"
   };
+  const MobileMenuButton = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.DialogTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Button, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icons.Menu, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Text, { children: "Menu" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Dialog, { variant: "sheet", children: ({ close }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icons.Close, {}) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Box, { height: "100%", overflow: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { tabs, navigation }) })
+      ] });
+    } }) })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Box, { flexGrow: "1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.MobileMenuButton, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { tabs, navigation }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MobileMenuButton, {}) }),
     tabs && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopNav, { tabs }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_react_zen9.Grid,
@@ -346,7 +385,8 @@ function Docs() {
               tabs,
               navigation,
               style: { top },
-              isSticky: true
+              isSticky: true,
+              autoHeight: true
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(

package/dist/index.mjs

@@ -64,10 +64,16 @@ function Blog({ content }) {
 // src/components/Docs.tsx
 import {
   Grid,
-  Box as Box3,
+  Box as Box4,
   Heading as Heading2,
+  Button,
+  Icon as Icon3,
+  Icons as Icons3,
   Row as Row2,
-  MobileMenuButton
+  Modal,
+  DialogTrigger,
+  Dialog,
+  Text as Text3
 } from "@umami/react-zen";
 
 // src/components/hooks/useShiso.ts
@@ -126,11 +132,11 @@ function useShiso() {
 
 // src/components/PageLinks.tsx
 import { useEffect, useState as useState2 } from "react";
-import { Column as Column3, Text } from "@umami/react-zen";
+import { Column as Column3, Text, Box } from "@umami/react-zen";
 import classNames from "classnames";
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
-var PageLinks_default = { "title": "PageLinks_title__ZGY1Y", "links": "PageLinks_links__ODM4N", "link": "PageLinks_link__ZDE4O", "indent-1": "PageLinks_indent-1__NGU3M", "indent-2": "PageLinks_indent-2__YjFlN", "indent-3": "PageLinks_indent-3__NzQxY", "indent-4": "PageLinks_indent-4__NzRjN", "indent-5": "PageLinks_indent-5__ZmRhN", "indent-6": "PageLinks_indent-6__YzQ3N", "selected": "PageLinks_selected__NTViM" };
+var PageLinks_default = { "links": "PageLinks_links__MjgyM", "link": "PageLinks_link__YWRjO", "indent-1": "PageLinks_indent-1__MDcyM", "indent-2": "PageLinks_indent-2__OWYxZ", "indent-3": "PageLinks_indent-3__ZmYwM", "indent-4": "PageLinks_indent-4__NzU2Y", "indent-5": "PageLinks_indent-5__NmVkY", "indent-6": "PageLinks_indent-6__NzQ4N", "selected": "PageLinks_selected__YmZhY" };
 
 // src/components/PageLinks.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -152,7 +158,7 @@ function PageLinks({ items = [], className, ...props }) {
   if (!items?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4(Column3, { ...props, gap: "3", minWidth: "240px", className: classNames(PageLinks_default.links, className), children: [
+  return /* @__PURE__ */ jsx6(Box, { ...props, children: /* @__PURE__ */ jsxs4(Column3, { gap: "3", minWidth: "240px", className: classNames(PageLinks_default.links, className), children: [
     /* @__PURE__ */ jsx6(Text, { size: "2", weight: "bold", children: "On this page" }),
     items.map(({ name, id, size }) => {
       return /* @__PURE__ */ jsx6(
@@ -167,38 +173,65 @@ function PageLinks({ items = [], className, ...props }) {
         id
       );
     })
-  ] });
+  ] }) });
 }
 
 // src/components/SideNav.tsx
-import { Box, List, ListItem, ListSection } from "@umami/react-zen";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { Box as Box2, List, ListItem, ListSection } from "@umami/react-zen";
 import classNames2 from "classnames";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
-var SideNav_default = { "nav": "SideNav_nav__NmZmM", "sticky": "SideNav_sticky__ZTAwY", "item": "SideNav_item__ODZhM", "selected": "SideNav_selected__YjE0Y", "items": "SideNav_items__N2ZkN" };
+var SideNav_default = { "nav": "SideNav_nav__MDQ3Z", "sticky": "SideNav_sticky__ZjQ5Y", "item": "SideNav_item__ZWU3Z", "selected": "SideNav_selected__NDgxN", "items": "SideNav_items__MzBhY" };
 
 // src/components/SideNav.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-function SideNav({ tabs, navigation, isSticky, className, ...props }) {
+function SideNav({
+  tabs,
+  navigation,
+  isSticky,
+  autoHeight,
+  className,
+  style,
+  ...props
+}) {
   const pathname = usePathname();
   const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
   const menu = navigation[tab?.id || "docs"];
-  return /* @__PURE__ */ jsx7(Box, { ...props, className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className), children: /* @__PURE__ */ jsx7(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
-    return /* @__PURE__ */ jsx7(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
-      return /* @__PURE__ */ jsx7(
-        ListItem,
-        {
-          className: classNames2(SideNav_default.item, {
-            [SideNav_default.selected]: url === pathname
-          }),
-          children: /* @__PURE__ */ jsx7(Link, { href: url, prefetch: false, children: text })
-        },
-        index
-      );
-    }) }, section);
-  }) }) });
+  const [height, setHeight] = useState3();
+  useEffect2(() => {
+    if (autoHeight) {
+      const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
+      if (rect) {
+        setHeight(`${window.innerHeight - rect.top - 10}px`);
+      }
+    }
+  }, [autoHeight]);
+  return /* @__PURE__ */ jsx7(
+    Box2,
+    {
+      ...props,
+      id: "shiso_docs_sidenav",
+      className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
+      style: { ...style, height },
+      children: /* @__PURE__ */ jsx7(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
+        return /* @__PURE__ */ jsx7(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
+          return /* @__PURE__ */ jsx7(
+            ListItem,
+            {
+              className: classNames2(SideNav_default.item, {
+                [SideNav_default.selected]: url === pathname
+              }),
+              children: /* @__PURE__ */ jsx7(Link, { href: url, prefetch: false, children: text })
+            },
+            index
+          );
+        }) }, section);
+      }) })
+    }
+  );
 }
 
 // src/components/TopNav.tsx
@@ -216,7 +249,7 @@ function TopNav({ tabs }) {
 }
 
 // src/components/ContentArea.tsx
-import { Heading, Box as Box2, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
+import { Heading, Box as Box3, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
 var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
@@ -225,11 +258,11 @@ var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
 import Link3 from "next/link";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function ContentArea({ section, title, description, code, next, prev }) {
-  return /* @__PURE__ */ jsxs5(Box2, { flexGrow: 1, children: [
+  return /* @__PURE__ */ jsxs5(Box3, { flexGrow: 1, children: [
     section && /* @__PURE__ */ jsx9(Text2, { color: "primary", weight: "bold", children: section }),
     title && /* @__PURE__ */ jsx9(Heading, { size: "2", as: "h1", children: title }),
     description && /* @__PURE__ */ jsx9(Text2, { color: "muted", children: description }),
-    /* @__PURE__ */ jsx9(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx9(Markdown, { code }) }),
+    /* @__PURE__ */ jsx9(Box3, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx9(Markdown, { code }) }),
     /* @__PURE__ */ jsxs5(Row, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx9(NavigationButton, { ...prev, isPrev: true }),
       /* @__PURE__ */ jsx9(NavigationButton, { ...next })
@@ -242,7 +275,7 @@ var NavigationButton = ({
   isPrev
 }) => {
   if (!url || !label) {
-    return /* @__PURE__ */ jsx9(Box2, {});
+    return /* @__PURE__ */ jsx9(Box3, {});
   }
   return /* @__PURE__ */ jsx9(Link3, { href: url, children: /* @__PURE__ */ jsxs5(Row, { alignItems: "center", gap: "3", marginY: "3", children: [
     isPrev && /* @__PURE__ */ jsx9(Icon2, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx9(Icons2.Chevron, {}) }),
@@ -252,7 +285,7 @@ var NavigationButton = ({
 };
 
 // src/components/Docs.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseContent(content, config = {}) {
   const { tabs, navigation } = config;
   const keys = Object.keys(navigation);
@@ -292,16 +325,28 @@ function Docs() {
     xs: "none",
     sm: "none",
     md: "none",
-    lg: "flex",
-    xl: "flex"
+    lg: "block",
+    xl: "block"
   };
   const menuDisplay = {
-    default: "flex",
+    default: "block",
     lg: "none",
     xl: "none"
   };
-  return /* @__PURE__ */ jsxs6(Box3, { flexGrow: "1", children: [
-    /* @__PURE__ */ jsx10(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(MobileMenuButton, { children: /* @__PURE__ */ jsx10(SideNav, { tabs, navigation }) }) }),
+  const MobileMenuButton = () => /* @__PURE__ */ jsxs6(DialogTrigger, { children: [
+    /* @__PURE__ */ jsxs6(Button, { children: [
+      /* @__PURE__ */ jsx10(Icon3, { children: /* @__PURE__ */ jsx10(Icons3.Menu, {}) }),
+      /* @__PURE__ */ jsx10(Text3, { children: "Menu" })
+    ] }),
+    /* @__PURE__ */ jsx10(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx10(Dialog, { variant: "sheet", children: ({ close }) => {
+      return /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx10(Row2, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx10(Icon3, { size: "sm", children: /* @__PURE__ */ jsx10(Icons3.Close, {}) }) }) }),
+        /* @__PURE__ */ jsx10(Box4, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx10(SideNav, { tabs, navigation }) })
+      ] });
+    } }) })
+  ] });
+  return /* @__PURE__ */ jsxs6(Box4, { flexGrow: "1", children: [
+    /* @__PURE__ */ jsx10(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(MobileMenuButton, {}) }),
     tabs && /* @__PURE__ */ jsx10(TopNav, { tabs }),
     /* @__PURE__ */ jsxs6(
       Grid,
@@ -316,7 +361,8 @@ function Docs() {
               tabs,
               navigation,
               style: { top },
-              isSticky: true
+              isSticky: true,
+              autoHeight: true
             }
           ),
           /* @__PURE__ */ jsx10(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "A content layer for Next.js",
   "homepage": "https://umami.is/shiso",
   "repository": {
@@ -46,12 +46,12 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@umami/react-zen": "^0.39.0",
+    "@umami/react-zen": "^0.41.0",
     "classnames": "^2.5.1",
     "glob": "^10.3.10",
     "gray-matter": "^4.0.3",
-    "highlight.js": "^11.11.0",
-    "next": "15.1.2",
+    "highlight.js": "^11.11.1",
+    "next": "15.1.3",
     "next-mdx-remote": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -65,7 +65,7 @@
     "@svgr/webpack": "^8.1.0",
     "@types/css-modules": "^1.0.5",
     "@types/mdx": "^2.0.11",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.4",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@umami/esbuild-plugin-css-modules": "^0.4.0",
@@ -73,13 +73,13 @@
     "esbuild": "^0.24.2",
     "esbuild-plugin-css-modules": "^0.3.0",
     "eslint": "^8",
-    "eslint-config-next": "15.0.2",
+    "eslint-config-next": "15.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.1.1",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.3.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "remark-frontmatter": "^5.0.0",