@umami/shiso 0.50.0 → 0.52.0

package/dist/index.css

@@ -38,7 +38,7 @@
 }
 
 /* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
-.CodeBlock_container__YzkwN {
+.CodeBlock_container__OGZlM {
   position: relative;
   background: var(--background-color);
   border: 1px solid var(--base-color-1);
@@ -47,14 +47,15 @@
   white-space: pre-wrap;
   word-wrap: break-word;
 }
-pre.CodeBlock_container__YzkwN code {
+pre.CodeBlock_container__OGZlM code {
   font-family: var(--font-family-code);
   color: var(--font-color);
+  font-size: var(--font-size);
   padding: 0;
   border: 0;
   background: transparent;
 }
-.CodeBlock_button__ZjNjN {
+.CodeBlock_button__Y2Y2Z {
   border: 0;
   position: absolute;
   right: var(--spacing-5);
@@ -62,13 +63,13 @@ pre.CodeBlock_container__YzkwN code {
   cursor: pointer;
   background: transparent;
 }
-.CodeBlock_copy__Y2UyM {
+.CodeBlock_copy__NWI2Y {
   color: var(--base-color-4);
 }
-.CodeBlock_copy__Y2UyM:hover {
+.CodeBlock_copy__NWI2Y:hover {
   color: var(--base-color-1);
 }
-.CodeBlock_check__ODM5Z {
+.CodeBlock_check__YzQzO {
   color: var(--success-color);
 }
 

package/dist/index.js

@@ -98,13 +98,15 @@ var import_react_zen10 = require("@umami/react-zen");
 // src/components/CodeBlock.tsx
 var import_react2 = require("react");
 var import_react_zen2 = require("@umami/react-zen");
+var import_google = require("next/font/google");
 
 // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
-var CodeBlock_default = { "container": "CodeBlock_container__YzkwN", "button": "CodeBlock_button__ZjNjN", "copy": "CodeBlock_copy__Y2UyM", "check": "CodeBlock_check__ODM5Z" };
+var CodeBlock_default = { "container": "CodeBlock_container__OGZlM", "button": "CodeBlock_button__Y2Y2Z", "copy": "CodeBlock_copy__NWI2Y", "check": "CodeBlock_check__YzQzO" };
 
 // src/components/CodeBlock.tsx
 var import_classnames2 = __toESM(require("classnames"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var mono = (0, import_google.JetBrains_Mono)({ subsets: ["latin"] });
 function CodeBlock(props) {
   const textInput = (0, import_react2.useRef)(null);
   const [copied, setCopied] = (0, import_react2.useState)(false);
@@ -115,7 +117,7 @@ function CodeBlock(props) {
       setCopied(false);
     }, 1e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("pre", { ref: textInput, className: (0, import_classnames2.default)(CodeBlock_default.container, "dark-theme"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("pre", { ref: textInput, className: (0, import_classnames2.default)(CodeBlock_default.container, mono.className, "dark-theme"), children: [
     props.children,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icons.Copy, {}) }) })
   ] });
@@ -195,9 +197,9 @@ function TopNav({ tabs }) {
   const pathname = (0, import_navigation2.usePathname)();
   const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
   const selected = tab?.id || "docs";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Box, { maxWidth: "100vw", overflowX: "auto", overflowY: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link2.default, { href: url, children: label }) });
-  } }) });
+  } }) }) });
 }
 
 // src/components/DocContent.tsx
@@ -247,7 +249,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function DocContent({ section, title, description, code, next, prev }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen6.Box, { flexGrow: "1", children: [
     section && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Text, { color: "primary", weight: "bold", children: section }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Heading, { size: "2", as: "h1", marginY: "3", children: title }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Heading, { size: "5", as: "h1", marginY: "3", children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Text, { color: "muted", size: "3", children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Markdown, { code }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen6.Row, { justifyContent: "space-between", children: [
@@ -307,40 +309,28 @@ function Docs({ content, config }) {
   );
   const { top } = config?.docs || {};
   const navDisplay = {
-    default: "none",
     xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "block",
-    xl: "block"
+    lg: "block"
   };
   const linksDisplay = {
-    default: "none",
     xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "block",
-    xl: "block"
+    lg: "block"
   };
   const menuDisplay = {
-    lg: "none",
-    xl: "none"
+    lg: "none"
   };
   const MobileMenuButton = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_zen7.DialogTrigger, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_zen7.Button, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Icons.Menu, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Text, { children: "Menu" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Dialog, { variant: "sheet", children: ({ close }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Row, { justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Icons.Close, {}) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Box, { height: "100%", overflow: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SideNav, { tabs, navigation }) })
-      ] });
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Modal, { position: "left", offset: "70px", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Dialog, { variant: "sheet", children: ({ close }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Box, { overflow: "auto", padding: "4", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SideNav, { tabs, navigation }) });
     } }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_zen7.Box, { flexGrow: "1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Row, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MobileMenuButton, {}) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_zen7.Column, { gap: "6", children: [
     tabs && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TopNav, { tabs }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen7.Row, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MobileMenuButton, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_zen7.Row, { gap: "6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SideNav,
@@ -378,7 +368,7 @@ var import_link4 = __toESM(require("next/link"));
 var import_date_fns = require("date-fns");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Card({ title, description, date, author, url, image }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { border: true, borderRadius: "3", overflow: "hidden", children: [
     image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Box, { height: "240px", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Image, { src: image, alt: title, objectFit: "cover" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { padding: "6", gap: "4", flexGrow: "1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Row, { justifyContent: "space-between", children: [
@@ -389,7 +379,7 @@ function Card({ title, description, date, author, url, image }) {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { gap: "4", flexGrow: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Heading, { size: "4", as: "header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_link4.default, { href: url, children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Heading, { size: "3", as: "header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_link4.default, { href: url, children: title }) }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Box, { marginY: "5", as: "p", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { color: "muted", size: "3", children: description }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_link4.default, { href: url, children: [
@@ -410,7 +400,7 @@ function Blogs({ content, config, ...props }) {
   const items = content.sort(
     (a, b) => new Date(b?.meta?.date).getTime() - new Date(a?.meta?.date).getTime()
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: items?.map(({ meta, slug }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Grid, { gap: "5", columns: { xs: "1fr", lg: "repeat(auto-fit, minmax(400px, 1fr))" }, children: items?.map(({ meta, slug }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
 }
 
 // src/components/Shiso.tsx
@@ -445,15 +435,11 @@ function Blog({ title, code, author, date, image, anchors, backUrl }) {
   const { config } = useShiso();
   const { top } = config?.blog || {};
   const linksDisplay = {
-    default: "none",
     xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "block",
-    xl: "block"
+    lg: "block"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Column, { gap: "8", maxWidth: "960px", style: { margin: "0 auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Box, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Heading, { size: "1", as: "h1", align: "center", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Box, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Heading, { size: "6", as: "h1", align: "center", children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Row, { justifyContent: "space-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Text, { color: "muted", children: date && (0, import_date_fns2.format)(new Date(date), "PPP") }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Text, { color: "muted", children: [

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/Blog.tsx
-import { Heading as Heading4, Box as Box6, Text as Text6, Row as Row4, Column as Column4, Image as Image2, Icon as Icon5, Icons as Icons5, Button as Button3 } from "@umami/react-zen";
+import { Heading as Heading4, Box as Box7, Text as Text6, Row as Row4, Column as Column5, Image as Image2, Icon as Icon5, Icons as Icons5, Button as Button3 } from "@umami/react-zen";
 import { format as format2 } from "date-fns";
 
 // src/components/PageLinks.tsx
@@ -61,13 +61,15 @@ import { Code } from "@umami/react-zen";
 // src/components/CodeBlock.tsx
 import { useState as useState2, useRef } from "react";
 import { Icon, Icons } from "@umami/react-zen";
+import { JetBrains_Mono } from "next/font/google";
 
 // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
-var CodeBlock_default = { "container": "CodeBlock_container__YzkwN", "button": "CodeBlock_button__ZjNjN", "copy": "CodeBlock_copy__Y2UyM", "check": "CodeBlock_check__ODM5Z" };
+var CodeBlock_default = { "container": "CodeBlock_container__OGZlM", "button": "CodeBlock_button__Y2Y2Z", "copy": "CodeBlock_copy__NWI2Y", "check": "CodeBlock_check__YzQzO" };
 
 // src/components/CodeBlock.tsx
 import classNames2 from "classnames";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var mono = JetBrains_Mono({ subsets: ["latin"] });
 function CodeBlock(props) {
   const textInput = useRef(null);
   const [copied, setCopied] = useState2(false);
@@ -78,7 +80,7 @@ function CodeBlock(props) {
       setCopied(false);
     }, 1e3);
   };
-  return /* @__PURE__ */ jsxs2("pre", { ref: textInput, className: classNames2(CodeBlock_default.container, "dark-theme"), children: [
+  return /* @__PURE__ */ jsxs2("pre", { ref: textInput, className: classNames2(CodeBlock_default.container, mono.className, "dark-theme"), children: [
     props.children,
     /* @__PURE__ */ jsx2("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx2(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx2(Icons.Check, {}) : /* @__PURE__ */ jsx2(Icons.Copy, {}) }) })
   ] });
@@ -86,12 +88,13 @@ function CodeBlock(props) {
 
 // src/components/Docs.tsx
 import {
-  Box as Box4,
+  Box as Box5,
   Heading as Heading2,
   Button,
   Icon as Icon3,
   Icons as Icons3,
   Row as Row2,
+  Column as Column3,
   Modal,
   DialogTrigger,
   Dialog,
@@ -162,24 +165,24 @@ function SideNav({
 
 // src/components/TopNav.tsx
 import { usePathname as usePathname2 } from "next/navigation";
-import { Tabs, TabList, Tab } from "@umami/react-zen";
+import { Box as Box2, Tabs, TabList, Tab } from "@umami/react-zen";
 import Link2 from "next/link";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function TopNav({ tabs }) {
   const pathname = usePathname2();
   const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
   const selected = tab?.id || "docs";
-  return /* @__PURE__ */ jsx4(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx4(TabList, { items: tabs, children: ({ id, label, url }) => {
+  return /* @__PURE__ */ jsx4(Box2, { maxWidth: "100vw", overflowX: "auto", overflowY: "hidden", children: /* @__PURE__ */ jsx4(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx4(TabList, { items: tabs, children: ({ id, label, url }) => {
     return /* @__PURE__ */ jsx4(Tab, { id, children: /* @__PURE__ */ jsx4(Link2, { href: url, children: label }) });
-  } }) });
+  } }) }) });
 }
 
 // src/components/DocContent.tsx
-import { Heading, Box as Box3, Text as Text3, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
+import { Heading, Box as Box4, Text as Text3, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
 import Link3 from "next/link";
 
 // src/components/Markdown.tsx
-import { Box as Box2 } from "@umami/react-zen";
+import { Box as Box3 } from "@umami/react-zen";
 import { runSync } from "@mdx-js/mdx";
 import { useMDXComponents } from "@mdx-js/react";
 import * as runtime from "react/jsx-runtime";
@@ -212,15 +215,15 @@ function Markdown({ code }) {
   if (!Component) {
     return null;
   }
-  return /* @__PURE__ */ jsx5(Box2, { className: Markdown_default.content, children: /* @__PURE__ */ jsx5(Component, { components }) });
+  return /* @__PURE__ */ jsx5(Box3, { className: Markdown_default.content, children: /* @__PURE__ */ jsx5(Component, { components }) });
 }
 
 // src/components/DocContent.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DocContent({ section, title, description, code, next, prev }) {
-  return /* @__PURE__ */ jsxs5(Box3, { flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs5(Box4, { flexGrow: "1", children: [
     section && /* @__PURE__ */ jsx6(Text3, { color: "primary", weight: "bold", children: section }),
-    title && /* @__PURE__ */ jsx6(Heading, { size: "2", as: "h1", marginY: "3", children: title }),
+    title && /* @__PURE__ */ jsx6(Heading, { size: "5", as: "h1", marginY: "3", children: title }),
     description && /* @__PURE__ */ jsx6(Text3, { color: "muted", size: "3", children: description }),
     /* @__PURE__ */ jsx6(Markdown, { code }),
     /* @__PURE__ */ jsxs5(Row, { justifyContent: "space-between", children: [
@@ -235,7 +238,7 @@ var NavigationButton = ({
   isPrev
 }) => {
   if (!url || !label) {
-    return /* @__PURE__ */ jsx6(Box3, {});
+    return /* @__PURE__ */ jsx6(Box4, {});
   }
   return /* @__PURE__ */ jsx6(Link3, { href: url, children: /* @__PURE__ */ jsxs5(Row, { alignItems: "center", gap: "3", marginY: "3", children: [
     isPrev && /* @__PURE__ */ jsx6(Icon2, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx6(Icons2.Chevron, {}) }),
@@ -245,7 +248,7 @@ var NavigationButton = ({
 };
 
 // src/components/Docs.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseContent(content, config = {}) {
   const { tabs, navigation } = config;
   const keys = Object.keys(navigation);
@@ -280,40 +283,28 @@ function Docs({ content, config }) {
   );
   const { top } = config?.docs || {};
   const navDisplay = {
-    default: "none",
     xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "block",
-    xl: "block"
+    lg: "block"
   };
   const linksDisplay = {
-    default: "none",
     xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "block",
-    xl: "block"
+    lg: "block"
   };
   const menuDisplay = {
-    lg: "none",
-    xl: "none"
+    lg: "none"
   };
   const MobileMenuButton = () => /* @__PURE__ */ jsxs6(DialogTrigger, { children: [
     /* @__PURE__ */ jsxs6(Button, { children: [
       /* @__PURE__ */ jsx7(Icon3, { children: /* @__PURE__ */ jsx7(Icons3.Menu, {}) }),
       /* @__PURE__ */ jsx7(Text4, { children: "Menu" })
     ] }),
-    /* @__PURE__ */ jsx7(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx7(Dialog, { variant: "sheet", children: ({ close }) => {
-      return /* @__PURE__ */ jsxs6(Fragment, { children: [
-        /* @__PURE__ */ jsx7(Row2, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx7(Icon3, { size: "sm", children: /* @__PURE__ */ jsx7(Icons3.Close, {}) }) }) }),
-        /* @__PURE__ */ jsx7(Box4, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
-      ] });
+    /* @__PURE__ */ jsx7(Modal, { position: "left", offset: "70px", children: /* @__PURE__ */ jsx7(Dialog, { variant: "sheet", children: ({ close }) => {
+      return /* @__PURE__ */ jsx7(Box5, { overflow: "auto", padding: "4", onClick: close, children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) });
     } }) })
   ] });
-  return /* @__PURE__ */ jsxs6(Box4, { flexGrow: "1", children: [
-    /* @__PURE__ */ jsx7(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
+  return /* @__PURE__ */ jsxs6(Column3, { gap: "6", children: [
     tabs && /* @__PURE__ */ jsx7(TopNav, { tabs }),
+    /* @__PURE__ */ jsx7(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
     /* @__PURE__ */ jsxs6(Row2, { gap: "6", children: [
       /* @__PURE__ */ jsx7(
         SideNav,
@@ -346,14 +337,14 @@ function Docs({ content, config }) {
 import { Grid } from "@umami/react-zen";
 
 // src/components/Card.tsx
-import { Box as Box5, Image, Column as Column3, Row as Row3, Heading as Heading3, Text as Text5, Button as Button2, Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
+import { Box as Box6, Image, Column as Column4, Row as Row3, Heading as Heading3, Text as Text5, Button as Button2, Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
 import Link4 from "next/link";
 import { format } from "date-fns";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function Card({ title, description, date, author, url, image }) {
-  return /* @__PURE__ */ jsxs7(Column3, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
-    image && /* @__PURE__ */ jsx8(Box5, { height: "240px", children: /* @__PURE__ */ jsx8(Image, { src: image, alt: title, objectFit: "cover" }) }),
-    /* @__PURE__ */ jsxs7(Column3, { padding: "6", gap: "4", flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs7(Column4, { border: true, borderRadius: "3", overflow: "hidden", children: [
+    image && /* @__PURE__ */ jsx8(Box6, { height: "240px", children: /* @__PURE__ */ jsx8(Image, { src: image, alt: title, objectFit: "cover" }) }),
+    /* @__PURE__ */ jsxs7(Column4, { padding: "6", gap: "4", flexGrow: "1", children: [
       /* @__PURE__ */ jsxs7(Row3, { justifyContent: "space-between", children: [
         /* @__PURE__ */ jsx8(Text5, { color: "muted", children: date && format(new Date(date), "PP") }),
         /* @__PURE__ */ jsxs7(Text5, { color: "muted", children: [
@@ -361,9 +352,9 @@ function Card({ title, description, date, author, url, image }) {
           author
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7(Column3, { gap: "4", flexGrow: "1", children: [
-        /* @__PURE__ */ jsx8(Heading3, { size: "4", as: "header", children: /* @__PURE__ */ jsx8(Link4, { href: url, children: title }) }),
-        /* @__PURE__ */ jsx8(Box5, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx8(Text5, { color: "muted", size: "3", children: description }) })
+      /* @__PURE__ */ jsxs7(Column4, { gap: "4", flexGrow: "1", children: [
+        /* @__PURE__ */ jsx8(Heading3, { size: "3", as: "header", children: /* @__PURE__ */ jsx8(Link4, { href: url, children: title }) }),
+        /* @__PURE__ */ jsx8(Box6, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx8(Text5, { color: "muted", size: "3", children: description }) })
       ] }),
       /* @__PURE__ */ jsx8(Button2, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: url, children: [
         /* @__PURE__ */ jsx8(Text5, { children: "Read more" }),
@@ -383,7 +374,7 @@ function Blogs({ content, config, ...props }) {
   const items = content.sort(
     (a, b) => new Date(b?.meta?.date).getTime() - new Date(a?.meta?.date).getTime()
   );
-  return /* @__PURE__ */ jsx9(Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: items?.map(({ meta, slug }) => /* @__PURE__ */ jsx9(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
+  return /* @__PURE__ */ jsx9(Grid, { gap: "5", columns: { xs: "1fr", lg: "repeat(auto-fit, minmax(400px, 1fr))" }, children: items?.map(({ meta, slug }) => /* @__PURE__ */ jsx9(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
 }
 
 // src/components/Shiso.tsx
@@ -418,15 +409,11 @@ function Blog({ title, code, author, date, image, anchors, backUrl }) {
   const { config } = useShiso();
   const { top } = config?.blog || {};
   const linksDisplay = {
-    default: "none",
     xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "block",
-    xl: "block"
+    lg: "block"
   };
-  return /* @__PURE__ */ jsxs8(Column4, { gap: "8", maxWidth: "960px", style: { margin: "0 auto" }, children: [
-    /* @__PURE__ */ jsx11(Box6, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ jsx11(Heading4, { size: "1", as: "h1", align: "center", children: title }) }),
+  return /* @__PURE__ */ jsxs8(Column5, { gap: "8", maxWidth: "960px", style: { margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsx11(Box7, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ jsx11(Heading4, { size: "6", as: "h1", align: "center", children: title }) }),
     /* @__PURE__ */ jsxs8(Row4, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx11(Text6, { color: "muted", children: date && format2(new Date(date), "PPP") }),
       /* @__PURE__ */ jsxs8(Text6, { color: "muted", children: [
@@ -434,7 +421,7 @@ function Blog({ title, code, author, date, image, anchors, backUrl }) {
         author
       ] })
     ] }),
-    image && /* @__PURE__ */ jsx11(Box6, { height: "480px", children: /* @__PURE__ */ jsx11(Image2, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
+    image && /* @__PURE__ */ jsx11(Box7, { height: "480px", children: /* @__PURE__ */ jsx11(Image2, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
     /* @__PURE__ */ jsxs8(Row4, { gap: "6", children: [
       /* @__PURE__ */ jsx11(Markdown, { code }),
       /* @__PURE__ */ jsx11(PageLinks, { display: linksDisplay, items: anchors, style: { top } })

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@umami/shiso",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "description": "A content layer for Next.js",
-  "homepage": "https://umami.is/shiso",
+  "homepage": "https://shiso.umami.is",
   "repository": {
     "type": "git",
     "url": "https://github.com/umami-software/shiso.git"
@@ -19,11 +19,11 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "next dev --port 3100 --turbo",
+    "dev": "next dev --port 8001 --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "icons": "svgr ./src/assets --out-dir ./src/components/icons --typescript",
+    "icons": "svgr ./src/assets --out-dir src/components/svg --typescript",
     "components": "tsc -p tsconfig.components.json",
     "server": "tsc -p tsconfig.server.json",
     "esbuild": "node esbuild.mjs",
@@ -48,7 +48,7 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@umami/react-zen": "^0.63.0",
+    "@umami/react-zen": "^0.88.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "glob": "^10.3.10",
@@ -56,8 +56,8 @@
     "highlight.js": "^11.11.1",
     "next": "15.2.1",
     "next-mdx-remote": "^5.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "recursive-readdir": "^2.2.3",
     "rehype-highlight": "^7.0.1",
     "rehype-slug": "^6.0.0",
@@ -68,29 +68,29 @@
     "@svgr/cli": "^8.1.0",
     "@types/css-modules": "^1.0.5",
     "@types/mdx": "^2.0.11",
-    "@types/node": "^22.10.4",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@types/node": "^22.15.3",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
     "@umami/esbuild-plugin-css-modules": "^0.4.0",
     "dts-bundle": "^0.7.3",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.3",
     "esbuild-plugin-css-modules": "^0.3.0",
-    "eslint": "^9.21.0",
+    "eslint": "^9.25.1",
     "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",
+    "eslint-plugin-prettier": "^5.2.6",
     "husky": "^9.1.1",
-    "lint-staged": "^15.3.0",
+    "lint-staged": "^15.5.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "remark-frontmatter": "^5.0.0",
-    "remark-mdx-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.1.0",
     "stylelint": "^15.10.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended": "^14.0.1",
-    "typescript": "^5"
+    "typescript": "^5.8.3"
   },
   "pnpm": {
     "onlyBuiltDependencies": [