@umami/shiso 0.51.0 → 0.53.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

@@ -97,13 +97,13 @@ var import_react_zen10 = require("@umami/react-zen");
 
 // src/components/CodeBlock.tsx
 var import_react2 = require("react");
+var import_classnames2 = __toESM(require("classnames"));
 var import_react_zen2 = require("@umami/react-zen");
 
 // 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");
 function CodeBlock(props) {
   const textInput = (0, import_react2.useRef)(null);
@@ -195,7 +195,7 @@ 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.Box, { marginBottom: "6", 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.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 }) });
   } }) }) });
 }
@@ -307,40 +307,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,
@@ -410,7 +398,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,12 +433,8 @@ 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: "6", as: "h1", align: "center", children: title }) }),

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/Blog.tsx
-import { Heading as Heading4, Box as Box7, 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
@@ -60,13 +60,13 @@ import { Code } from "@umami/react-zen";
 
 // src/components/CodeBlock.tsx
 import { useState as useState2, useRef } from "react";
+import classNames2 from "classnames";
 import { Icon, Icons } from "@umami/react-zen";
 
 // 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";
 function CodeBlock(props) {
   const textInput = useRef(null);
@@ -92,6 +92,7 @@ import {
   Icon as Icon3,
   Icons as Icons3,
   Row as Row2,
+  Column as Column3,
   Modal,
   DialogTrigger,
   Dialog,
@@ -169,7 +170,7 @@ 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(Box2, { marginBottom: "6", children: /* @__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 }) });
   } }) }) });
 }
@@ -245,7 +246,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 +281,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(Box5, { 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(Box5, { 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 +335,14 @@ function Docs({ content, config }) {
 import { Grid } from "@umami/react-zen";
 
 // src/components/Card.tsx
-import { Box as Box6, 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, { border: true, borderRadius: "3", overflow: "hidden", 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(Column3, { padding: "6", gap: "4", flexGrow: "1", children: [
+    /* @__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,7 +350,7 @@ function Card({ title, description, date, author, url, image }) {
           author
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7(Column3, { gap: "4", flexGrow: "1", children: [
+      /* @__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 }) })
       ] }),
@@ -383,7 +372,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,14 +407,10 @@ 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: [
+  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") }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "A content layer for Next.js",
   "homepage": "https://shiso.umami.is",
   "repository": {
@@ -18,19 +18,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "dev": "next dev --port 8001 --turbo",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "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",
-    "dts": "node dts.mjs",
-    "css": "node css.mjs",
-    "bundle": "npm-run-all components server dts esbuild css"
-  },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "prettier --write",
@@ -45,6 +32,8 @@
     ]
   },
   "dependencies": {
+    "@fontsource/inter": "^5.2.5",
+    "@fontsource/jetbrains-mono": "^5.2.5",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
@@ -56,8 +45,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,34 +57,41 @@
     "@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": [
-      "esbuild",
-      "sharp"
-    ]
+  "scripts": {
+    "dev": "next dev --port 8001 --turbo",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "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",
+    "dts": "node dts.mjs",
+    "css": "node css.mjs",
+    "bundle": "npm-run-all components server dts esbuild css"
   }
-}
+}

package/styles.css

@@ -4614,7 +4614,7 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
-.CodeBlock_container__YzkwN {
+.CodeBlock_container__OGZlM {
   position: relative;
   background: var(--background-color);
   border: 1px solid var(--base-color-1);
@@ -4623,14 +4623,15 @@ body a.Button_button__NDYwM {
   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);
@@ -4638,13 +4639,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);
 }