timvir 0.2.38 → 0.2.42

package/core/index.js

@@ -3,100 +3,255 @@ import { pipe, filter, subscribe } from 'wonka';
 import { useContext, Provider } from 'timvir/context';
 export { useContext } from 'timvir/context';
 import * as React from 'react';
-import { MDXProvider } from '@mdx-js/react';
+import * as builtins from 'timvir/builtins';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { makeBus } from 'timvir/bus';
-import * as mdxComponentsBase from 'timvir/builtins';
 import * as Icons from 'react-feather';
 import * as ReactDOM from 'react-dom';
 import { defaultSearch } from 'timvir/search';
 
-// src/css.ts
-
-// src/cx.ts
-var cx = function cx2() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
-  const atomicClasses = {};
-  const nonAtomicClasses = [];
-  presentClassNames.forEach((arg) => {
-    const individualClassNames = arg ? arg.split(" ") : [];
-    individualClassNames.forEach((className) => {
-      if (className.startsWith("atm_")) {
-        const [, keyHash] = className.split("_");
-        atomicClasses[keyHash] = className;
-      } else {
-        nonAtomicClasses.push(className);
-      }
-    });
-  });
-  const result = [];
-  for (const keyHash in atomicClasses) {
-    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
-      result.push(atomicClasses[keyHash]);
-    }
-  }
-  result.push(...nonAtomicClasses);
-  return result.join(" ");
-};
-var cx_default = cx;
-
-const noLayout = "nc2e9vn";
-const grid = "g1et32pl";
-const extendedWidth = cx_default(noLayout, "en6sn9p");
-const fullWidth = cx_default(noLayout, "f3c539b");
-
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root$3 = "footer";
 function Footer(props, ref) {
   const {
-    className,
     links,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root$3, {
+  return /*#__PURE__*/jsxs(Root$3, {
     ref: ref,
-    className: cx_default(className, classes$7.root),
-    ...rest
-  }, links && /*#__PURE__*/React.createElement("div", {
-    className: grid
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes$7.linkGroups
-  }, links.map(({
-    group,
-    items
-  }, i) => /*#__PURE__*/React.createElement("div", {
-    key: i
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes$7.linkGroupTitle
-  }, group), /*#__PURE__*/React.createElement("div", null, items.map(({
-    label,
-    href
-  }, j) => /*#__PURE__*/React.createElement("a", {
-    key: j,
-    href: href,
-    className: classes$7.link
-  }, label))))))), /*#__PURE__*/React.createElement("div", {
-    className: cx_default(grid, classes$7.meta)
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: 0
-    }
-  }, "Built with ", /*#__PURE__*/React.createElement("a", {
-    href: "https://timvir.vercel.app"
-  }, "Timvir"))));
+    ...rest,
+    className: "timvir-s-v0thzw timvir-s-rvj5dj timvir-s-kcw01v timvir-s-qr9vqb",
+    children: [links && /*#__PURE__*/jsx("div", {
+      className: "timvir-s-rvj5dj timvir-s-1hz7z82 timvir-s-1f9b50e timvir-s-3xbxsf timvir-s-12c0rpe timvir-s-1i3za4p timvir-s-9q0i6z timvir-s-1mxrek7",
+      children: /*#__PURE__*/jsx("div", {
+        className: "timvir-s-htle6 timvir-s-euugli timvir-s-rvj5dj timvir-s-k629hk timvir-s-1rzw5jd",
+        children: links.map(({
+          group,
+          items
+        }, i) => /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx("div", {
+            className: "timvir-s-1s688f timvir-s-od5an3",
+            children: group
+          }), /*#__PURE__*/jsx("div", {
+            children: items.map(({
+              label,
+              href
+            }, j) => /*#__PURE__*/jsx("a", {
+              href: href,
+              className: "timvir-s-1lliihq timvir-s-1heor9g timvir-s-1hl2dhg timvir-s-gmrl4",
+              children: label
+            }, j))
+          })]
+        }, i))
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "timvir-s-rvj5dj timvir-s-1hz7z82 timvir-s-1f9b50e timvir-s-3xbxsf timvir-s-12c0rpe timvir-s-1i3za4p timvir-s-9q0i6z timvir-s-1mxrek7 timvir-s-vgvpxu",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "timvir-s-htle6 timvir-s-euugli",
+        children: ["Built with", " ", /*#__PURE__*/jsx("a", {
+          href: "https://timvir.vercel.app",
+          className: "timvir-s-1heor9g timvir-s-1hl2dhg timvir-s-1dlxito timvir-s-1j43nte timvir-s-odwsf6 timvir-s-1w3jsh0 timvir-s-g7t5vw",
+          children: "Timvir"
+        })]
+      })
+    })]
+  });
 }
 var Footer$1 = /*#__PURE__*/React.forwardRef(Footer);
-const classes$7 = {
-  root: "rwhrdvg",
-  linkGroups: "l1u1x7q7",
-  linkGroupTitle: "l1x5jo3a",
-  link: "l29wcr8",
-  meta: "m1ojti9g"
-};
 
-const theme = "t1amubg3";
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+    if (hasRequiredStyleq) return styleq;
+    hasRequiredStyleq = 1;
+    Object.defineProperty(styleq, "__esModule", {
+        value: true
+    });
+    styleq.styleq = void 0;
+    var cache = new WeakMap();
+    var compiledKey = '$$css';
+    function createStyleq(options) {
+        var disableCache;
+        var disableMix;
+        var transform;
+        if (options != null) {
+            disableCache = options.disableCache === true;
+            disableMix = options.disableMix === true;
+            transform = options.transform;
+        }
+        return function styleq() {
+            var definedProperties = [];
+            var className = '';
+            var inlineStyle = null;
+            var debugString = '';
+            var nextCache = disableCache ? null : cache;
+            var styles = new Array(arguments.length);
+            for(var i = 0; i < arguments.length; i++){
+                styles[i] = arguments[i];
+            }
+            while(styles.length > 0){
+                var possibleStyle = styles.pop();
+                if (possibleStyle == null || possibleStyle === false) {
+                    continue;
+                }
+                if (Array.isArray(possibleStyle)) {
+                    for(var _i = 0; _i < possibleStyle.length; _i++){
+                        styles.push(possibleStyle[_i]);
+                    }
+                    continue;
+                }
+                var style = transform != null ? transform(possibleStyle) : possibleStyle;
+                if (style.$$css != null) {
+                    var classNameChunk = '';
+                    if (nextCache != null && nextCache.has(style)) {
+                        var cacheEntry = nextCache.get(style);
+                        if (cacheEntry != null) {
+                            classNameChunk = cacheEntry[0];
+                            debugString = cacheEntry[2];
+                            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+                            nextCache = cacheEntry[3];
+                        }
+                    } else {
+                        var definedPropertiesChunk = [];
+                        for(var prop in style){
+                            var value = style[prop];
+                            if (prop === compiledKey) {
+                                var compiledKeyValue = style[prop];
+                                if (compiledKeyValue !== true) {
+                                    debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+                                }
+                                continue;
+                            }
+                            if (typeof value === 'string' || value === null) {
+                                if (!definedProperties.includes(prop)) {
+                                    definedProperties.push(prop);
+                                    if (nextCache != null) {
+                                        definedPropertiesChunk.push(prop);
+                                    }
+                                    if (typeof value === 'string') {
+                                        classNameChunk += classNameChunk ? ' ' + value : value;
+                                    }
+                                }
+                            } else {
+                                console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+                            }
+                        }
+                        if (nextCache != null) {
+                            var weakMap = new WeakMap();
+                            nextCache.set(style, [
+                                classNameChunk,
+                                definedPropertiesChunk,
+                                debugString,
+                                weakMap
+                            ]);
+                            nextCache = weakMap;
+                        }
+                    }
+                    if (classNameChunk) {
+                        className = className ? classNameChunk + ' ' + className : classNameChunk;
+                    }
+                } else {
+                    if (disableMix) {
+                        if (inlineStyle == null) {
+                            inlineStyle = {};
+                        }
+                        inlineStyle = Object.assign({}, style, inlineStyle);
+                    } else {
+                        var subStyle = null;
+                        for(var _prop in style){
+                            var _value = style[_prop];
+                            if (_value !== undefined) {
+                                if (!definedProperties.includes(_prop)) {
+                                    if (_value != null) {
+                                        if (inlineStyle == null) {
+                                            inlineStyle = {};
+                                        }
+                                        if (subStyle == null) {
+                                            subStyle = {};
+                                        }
+                                        subStyle[_prop] = _value;
+                                    }
+                                    definedProperties.push(_prop);
+                                    nextCache = null;
+                                }
+                            }
+                        }
+                        if (subStyle != null) {
+                            inlineStyle = Object.assign(subStyle, inlineStyle);
+                        }
+                    }
+                }
+            }
+            var styleProps = [
+                className,
+                inlineStyle,
+                debugString
+            ];
+            return styleProps;
+        };
+    }
+    var styleq$1 = styleq.styleq = createStyleq();
+    styleq$1.factory = createStyleq;
+    return styleq;
+}
+var styleqExports = requireStyleq();
+function props(...styles) {
+    const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+    const result = {};
+    if (className != null && className !== '') {
+        result.className = className;
+    }
+    if (style != null && Object.keys(style).length > 0) {
+        result.style = style;
+    }
+    if (dataStyleSrc != null && dataStyleSrc !== '') {
+        result['data-style-src'] = dataStyleSrc;
+    }
+    return result;
+}
+
+const layoutStyles = {
+  grid: {
+    k1xSpc: "timvir-s-rvj5dj",
+    "--timvir-page-margin": "timvir-s-1hz7z82",
+    "--timvir-margin": "timvir-s-1f9b50e",
+    kJBjZk: "timvir-s-3xbxsf",
+    kumcoG: "timvir-s-12c0rpe",
+    kjffAg: "timvir-s-1i3za4p",
+    kymLvw: "timvir-s-9q0i6z",
+    kw3IWD: "timvir-s-1mxrek7",
+    $$css: true
+  },
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  },
+  extendedWidth: {
+    kBCFzs: "timvir-s-bldiei",
+    $$css: true
+  },
+  fullWidth: {
+    kBCFzs: "timvir-s-1ywaqmw",
+    $$css: true
+  }
+};
+const noLayout = "";
+const grid = "";
+const extendedWidth = "";
+const fullWidth = "";
 
 const Root$2 = "div";
 function Action(props) {
@@ -104,34 +259,42 @@ function Action(props) {
     label,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root$2, {
-    className: classes$6.root,
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes$6.icon
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "5",
-    y1: "12",
-    x2: "19",
-    y2: "12"
-  }), /*#__PURE__*/React.createElement("polyline", {
-    points: "12 5 19 12 12 19"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: classes$6.label
-  }, label));
+  const rootStyleProps = {
+    className: "timvir-s-jbqb8w timvir-s-vc674v timvir-s-uxw1ft timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-17zmd2n timvir-s-wvwv9b timvir-s-1q0g3np timvir-s-1iyjqo2 timvir-s-s83m0k timvir-s-dl72j9 timvir-s-b3r6kr timvir-s-qin4a2 timvir-s-cym7qx timvir-s-t0e3qv timvir-s-1d6mti2"
+  };
+  return /*#__PURE__*/jsxs(Root$2, {
+    ...rest,
+    ...rootStyleProps,
+    className: cx(rest.className, rootStyleProps.className),
+    style: {
+      ...rootStyleProps.style,
+      ...rest.style
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: "timvir-s-1wsuqlk timvir-s-1kky2od",
+      children: /*#__PURE__*/jsxs("svg", {
+        className: "timvir-s-1lliihq timvir-s-1kky2od timvir-s-lup9mm",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [/*#__PURE__*/jsx("line", {
+          x1: "5",
+          y1: "12",
+          x2: "19",
+          y2: "12"
+        }), /*#__PURE__*/jsx("polyline", {
+          points: "12 5 19 12 12 19"
+        })]
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "timvir-s-1dcheo9 timvir-s-d85mq3",
+      children: label
+    })]
+  });
 }
-const classes$6 = {
-  root: "ru1mblv",
-  icon: "i1wyx06o",
-  label: "legxg01"
-};
 
 function Dialog(props) {
   const {
@@ -172,7 +335,7 @@ function Dialog(props) {
         onDispose?.();
       }, 200);
     }
-  }, [open]);
+  }, [open, onDispose]);
   React.useEffect(() => {
     (async () => {
       const {
@@ -183,81 +346,75 @@ function Dialog(props) {
         commands: edges
       }));
     })();
-  }, [state.query]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes$5.root,
+  }, [toc, state.query]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "timvir-s-1n2onr6 timvir-s-78zum5 timvir-s-dt5ytf timvir-s-s83m0k timvir-s-1iyjqo2 timvir-s-13qp9f6 timvir-s-1so62im timvir-s-1jpgh95 timvir-s-1c4omy1 timvir-s-ur7f20 timvir-s-1j6rtzm timvir-s-11gisft timvir-s-vc674v timvir-s-b3r6kr timvir-s-hkombj",
     style: state.style,
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes$5.context
-  }, "Context"), /*#__PURE__*/React.createElement("div", {
-    className: classes$5.prompt
-  }, /*#__PURE__*/React.createElement("input", {
-    autoFocus: true,
-    placeholder: "Type a command or search\u2026",
-    value: state.query,
-    onChange: ev => {
-      const query = ev.currentTarget.value;
-      setState(state => ({
-        ...state,
-        query
-      }));
-    }
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: classes$5.subheader
-  }, "Pages"), /*#__PURE__*/React.createElement("div", {
-    className: classes$5.commands
-  }, state.commands.map(({
-    node
-  }, index) => /*#__PURE__*/React.createElement(Action, {
-    key: index,
-    label: node.label,
-    onClick: () => {
-      onClose?.();
-      window.location.href = node.path;
-    }
-  })))));
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "timvir-s-13g9wyj timvir-s-lrawln timvir-s-101yacv timvir-s-1xq1gxn timvir-s-sfzzmd timvir-s-2lah0s timvir-s-qcrz7y timvir-s-1bzjle timvir-s-1ivwqqu timvir-s-12oqio5 timvir-s-d0payo timvir-s-uxw1ft timvir-s-b3r6kr timvir-s-lyipyv",
+      children: "Context"
+    }), /*#__PURE__*/jsx("div", {
+      className: "timvir-s-1wvxhgs timvir-s-rvj5dj timvir-s-1y6fwsi timvir-s-6s0dn4 timvir-s-1n2onr6 timvir-s-2lah0s timvir-s-1x0gksc",
+      children: /*#__PURE__*/jsx("input", {
+        className: "timvir-s-1qhigcl timvir-s-1heo4i2 timvir-s-1ghz6dp timvir-s-c342km timvir-s-jyslct timvir-s-1qlqyl8 timvir-s-1x0gksc timvir-s-jbqb8w timvir-s-vc674v timvir-s-1tyz1jm timvir-s-1a2a7pz timvir-s-h8yej3",
+        autoFocus: true,
+        placeholder: "Type a command or search\u2026",
+        value: state.query,
+        onChange: ev => {
+          const query = ev.currentTarget.value;
+          setState(state => ({
+            ...state,
+            query
+          }));
+        }
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("div", {
+        className: "timvir-s-1yy59j4 timvir-s-xk0z11 timvir-s-qin4a2 timvir-s-boafo0 timvir-s-1flf930",
+        children: "Pages"
+      }), /*#__PURE__*/jsx("div", {
+        className: "timvir-s-1vd4hg5 timvir-s-ysyzu8",
+        children: state.commands.map(({
+          node
+        }, index) => /*#__PURE__*/jsx(Action, {
+          label: node.label,
+          onClick: () => {
+            onClose?.();
+            window.location.href = node.path;
+          }
+        }, index))
+      })]
+    })]
+  });
 }
-const classes$5 = {
-  root: "r1fo6voy",
-  context: "c185xiij",
-  prompt: "p1ky3ya3",
-  subheader: "snq1o7g",
-  commands: "cchvluj"
-};
 
 function Commands(props) {
+  const {
+    open: _open,
+    onClose: _onClose
+  } = props;
   const [state, setState] = React.useState({
-    /**
-     * Whether the command palette should be open or not. The command palette is
-     * opened by cmd+k, and closed by escape or clicking outside of the dialog.
-     */
-    open: false,
-    /**
-     * If the dialog is visible (even during the closing transition), this
-     * object contains both the container element (a div appended to the end of
-     * the body) and the React Portal (that is returned by this component).
-     */
     dialog: null
   });
   function open() {
     setState({
-      open: true,
       dialog: (() => {
         if (!state.dialog) {
           const containerElement = document.createElement("div");
           document.body.appendChild(containerElement);
-          const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-            className: classes$4.root,
+          const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsx("div", {
+            className: "timvir-s-ixxii4 timvir-s-10a8y8t timvir-s-78zum5 timvir-s-oz0ns6 timvir-s-1cy8zhl timvir-s-l56j7k timvir-s-1tv4xqk timvir-s-1p7i66b timvir-s-dvd4st timvir-s-1746jcd timvir-s-1j61zf2 timvir-s-1wqqpke",
             onClick: ev => {
               if (ev.target === ev.currentTarget) {
-                close();
+                _onClose();
               }
-            }
-          }, /*#__PURE__*/React.createElement(Dialog, {
-            open: true,
-            onClose: close
-          })), containerElement);
+            },
+            children: /*#__PURE__*/jsx(Dialog, {
+              open: true,
+              onClose: _onClose
+            })
+          }), containerElement);
           return {
             containerElement,
             reactPortal
@@ -265,17 +422,18 @@ function Commands(props) {
         } else {
           return {
             containerElement: state.dialog.containerElement,
-            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-              className: classes$4.root,
+            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsx("div", {
+              className: "timvir-s-ixxii4 timvir-s-10a8y8t timvir-s-78zum5 timvir-s-oz0ns6 timvir-s-1cy8zhl timvir-s-l56j7k timvir-s-1tv4xqk timvir-s-1p7i66b timvir-s-dvd4st timvir-s-1746jcd timvir-s-1j61zf2 timvir-s-1wqqpke",
               onClick: ev => {
                 if (ev.target === ev.currentTarget) {
-                  close();
+                  _onClose();
                 }
-              }
-            }, /*#__PURE__*/React.createElement(Dialog, {
-              open: true,
-              onClose: close
-            })), state.dialog.containerElement)
+              },
+              children: /*#__PURE__*/jsx(Dialog, {
+                open: true,
+                onClose: _onClose
+              })
+            }), state.dialog.containerElement)
           };
         }
       })()
@@ -283,28 +441,27 @@ function Commands(props) {
   }
   function close() {
     setState({
-      open: false,
       dialog: (() => {
         if (state.dialog) {
           return {
             containerElement: state.dialog.containerElement,
-            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-              className: classes$4.root
-            }, /*#__PURE__*/React.createElement(Dialog, {
-              onDispose: () => {
-                setState({
-                  open: state.open,
-                  dialog: (() => {
-                    if (!state.open && state.dialog) {
-                      document.body.removeChild(state.dialog.containerElement);
-                      return null;
-                    } else {
-                      return state.dialog;
-                    }
-                  })()
-                });
-              }
-            })), state.dialog.containerElement)
+            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsx("div", {
+              className: "timvir-s-ixxii4 timvir-s-10a8y8t timvir-s-78zum5 timvir-s-oz0ns6 timvir-s-1cy8zhl timvir-s-l56j7k timvir-s-1tv4xqk timvir-s-1p7i66b timvir-s-dvd4st timvir-s-1746jcd timvir-s-1j61zf2 timvir-s-1wqqpke",
+              children: /*#__PURE__*/jsx(Dialog, {
+                onDispose: () => {
+                  setState({
+                    dialog: (() => {
+                      if (!_open && state.dialog) {
+                        document.body.removeChild(state.dialog.containerElement);
+                        return null;
+                      } else {
+                        return state.dialog;
+                      }
+                    })()
+                  });
+                }
+              })
+            }), state.dialog.containerElement)
           };
         } else {
           return state.dialog;
@@ -312,83 +469,61 @@ function Commands(props) {
       })()
     });
   }
-  useHotkeys("meta+k", ev => {
-    ev.preventDefault();
-    if (!state.open) {
-      open();
-    } else {
-      close();
-    }
-  }, {
-    enableOnFormTags: ["INPUT"]
-  });
-  useHotkeys("escape", () => {
-    close();
-  }, {
-    enableOnFormTags: ["INPUT"]
-  });
-
-  /*
-   * Crude body scroll lock when the dialog is open.
-   */
   React.useEffect(() => {
-    if (state.open) {
+    if (_open) {
       document.body.style.overflow = "hidden";
+      open();
       return () => {
         document.body.style.overflow = "";
       };
+    } else {
+      close();
     }
-  }, [state.open]);
+  }, [_open]);
   return state.dialog?.reactPortal ?? null;
 }
-const classes$4 = {
-  root: "rfei6z8"
-};
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root$1 = "div";
-function NavigationFooter(props, ref) {
-  const {
-    Link
-  } = useContext();
+function NavigationFooter(props) {
   const {
+    Link,
     prev,
     next,
-    className,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root$1, {
-    ref: ref,
+  return /*#__PURE__*/jsx(Root$1, {
     ...rest,
-    className: cx_default(className, classes$3.root)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "de625n1"
-  }, prev && /*#__PURE__*/React.createElement(Link, {
-    href: prev.href,
-    className: "l19gj27w"
-  }, /*#__PURE__*/React.createElement(Context, null, /*#__PURE__*/React.createElement(Icons.ChevronLeft, null), " Previous"), /*#__PURE__*/React.createElement(Label, null, prev.label)), next && /*#__PURE__*/React.createElement(Link, {
-    href: next.href,
-    className: "l15ohs1l"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Context, null, "Next ", /*#__PURE__*/React.createElement(Icons.ChevronRight, null)), /*#__PURE__*/React.createElement(Label, null, next.label)))));
-}
-var NavigationFooter$1 = /*#__PURE__*/React.forwardRef(NavigationFooter);
-function Label(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "dczrd9z",
-    ...props
-  });
-}
-function Context(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "difnzb8",
-    ...props
+    className: "timvir-s-1dvi5bl timvir-s-rvj5dj timvir-s-3xbxsf timvir-s-12c0rpe timvir-s-9q0i6z timvir-s-1mxrek7",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "timvir-s-htle6 timvir-s-78zum5 timvir-s-3ieub6 timvir-s-8fetqu timvir-s-kpwil5 timvir-s-1evy7pa timvir-s-1k046mz",
+      children: [prev && /*#__PURE__*/jsxs(Link, {
+        href: prev.href,
+        className: "timvir-s-h8yej3 timvir-s-78zum5 timvir-s-1jnr06f timvir-s-ur7f20 timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1tamke2 timvir-s-1heor9g timvir-s-1hl2dhg timvir-s-euugli timvir-s-1gtqa1q timvir-s-dt5ytf timvir-s-1cy8zhl timvir-s-13a6bvl timvir-s-dpxx8g",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "timvir-s-vgvpxu timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-e25avd",
+          children: [/*#__PURE__*/jsx(Icons.ChevronLeft, {
+            className: "timvir-s-1q3kd3q timvir-s-1n3ixbd"
+          }), " Previous"]
+        }), /*#__PURE__*/jsx("div", {
+          className: "timvir-s-k50ysn timvir-s-b3r6kr timvir-s-lyipyv timvir-s-193iq5w",
+          children: prev.label
+        })]
+      }), next && /*#__PURE__*/jsxs(Link, {
+        href: next.href,
+        className: "timvir-s-h8yej3 timvir-s-78zum5 timvir-s-1jnr06f timvir-s-ur7f20 timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1tamke2 timvir-s-1heor9g timvir-s-1hl2dhg timvir-s-euugli timvir-s-1gtqa1q timvir-s-dt5ytf timvir-s-uk3077 timvir-s-1nhvcw1 timvir-s-1hr2gdg",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "timvir-s-vgvpxu timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-e25avd",
+          children: ["Next ", /*#__PURE__*/jsx(Icons.ChevronRight, {
+            className: "timvir-s-1q3kd3q timvir-s-1n3ixbd"
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: "timvir-s-k50ysn timvir-s-b3r6kr timvir-s-lyipyv timvir-s-193iq5w",
+          children: next.label
+        })]
+      })]
+    })
   });
 }
-const classes$3 = {
-  root: "rymvrdu"
-};
 
 function SidebarItem(props) {
   const {
@@ -403,43 +538,61 @@ function SidebarItem(props) {
     location,
     Link
   } = useContext();
-  const icon = children.length === 0 ? null : /*#__PURE__*/React.createElement(Icons.ChevronRight, {
-    className: classes$2.icon,
-    style: {
-      transform: active ? "rotate(90deg)" : "rotate(0deg)"
-    },
+  const iconStylexProps = {
+    className: "timvir-s-1iog12x timvir-s-y77lq4 timvir-s-1jpgh95 timvir-s-cdlrvm timvir-s-1l36t39 timvir-s-1nslcl8"
+  };
+  const iconStyle = {
+    ...iconStylexProps.style,
+    transform: active ? "rotate(90deg)" : "rotate(0deg)"
+  };
+  const icon = children.length === 0 ? null : /*#__PURE__*/jsx(Icons.ChevronRight, {
+    className: iconStylexProps.className,
+    style: iconStyle,
     size: 16
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes$2.root,
-    "data-active": location.asPath.replace(/#.*$/, "") === path
-  }, path ? /*#__PURE__*/React.createElement(Link, {
-    href: path,
-    style: {
-      marginLeft: depth * 16
-    }
-  }, props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
-    className: classes$2.icn
-  }) : null, /*#__PURE__*/React.createElement("span", {
-    className: classes$2.label
-  }, label), icon) : /*#__PURE__*/React.createElement("a", {
-    style: {
-      marginLeft: depth * 16
+  const isActive = location.asPath.replace(/#.*$/, "") === path;
+  const linkStylexProps = {
+    0: {
+      className: "timvir-s-euugli timvir-s-pau0pd timvir-s-12oqio5 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1cdhzux timvir-s-k50ysn timvir-s-1k74hu9 timvir-s-1hl2dhg timvir-s-h8yej3 timvir-s-1xq1gxn timvir-s-1ks1olk timvir-s-8kob5h timvir-s-1dc5b4e timvir-s-1o7uuvo"
     },
-    href: "#",
-    onClick: () => setActive(x => !x)
-  }, props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
-    className: classes$2.icn
-  }) : null, /*#__PURE__*/React.createElement("span", {
-    className: classes$2.label
-  }, label), icon));
+    1: {
+      className: "timvir-s-euugli timvir-s-pau0pd timvir-s-12oqio5 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1cdhzux timvir-s-k50ysn timvir-s-1hl2dhg timvir-s-h8yej3 timvir-s-1xq1gxn timvir-s-8kob5h timvir-s-1dc5b4e timvir-s-1o7uuvo timvir-s-6r7942 timvir-s-1hc1fzr"
+    }
+  }[!!isActive << 0];
+  const linkStyle = {
+    ...linkStylexProps.style,
+    marginLeft: depth * 16
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: "timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-3my8ay timvir-s-6u19be timvir-s-1ylh3l6 timvir-s-asi8qw",
+    children: path ? /*#__PURE__*/jsxs(Link, {
+      href: path,
+      className: linkStylexProps.className,
+      style: linkStyle,
+      children: [props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
+        ...{
+          className: "timvir-s-1lliihq timvir-s-1fr90bg timvir-s-pz6ql4 timvir-s-1db2dqx timvir-s-15dgqpb"
+        }
+      }) : null, /*#__PURE__*/jsx("span", {
+        className: "timvir-s-uxw1ft timvir-s-b3r6kr timvir-s-lyipyv timvir-s-ack27t",
+        children: label
+      }), icon]
+    }) : /*#__PURE__*/jsxs("a", {
+      href: "#",
+      className: linkStylexProps.className,
+      style: linkStyle,
+      onClick: () => setActive(x => !x),
+      children: [props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
+        ...{
+          className: "timvir-s-1lliihq timvir-s-1fr90bg timvir-s-pz6ql4 timvir-s-1db2dqx timvir-s-15dgqpb"
+        }
+      }) : null, /*#__PURE__*/jsx("span", {
+        className: "timvir-s-uxw1ft timvir-s-b3r6kr timvir-s-lyipyv timvir-s-ack27t",
+        children: label
+      }), icon]
+    })
+  });
 }
-const classes$2 = {
-  root: "r28qe6v",
-  icn: "i1ia823q",
-  label: "l13ixk6c",
-  icon: "i7wcd3g"
-};
 
 function Section(props) {
   const {
@@ -466,30 +619,41 @@ function Section(props) {
       setActive(true);
     }
   }, [path, location.asPath]);
-  return /*#__PURE__*/React.createElement("section", {
-    className: classes$1.root
-  }, /*#__PURE__*/React.createElement(SidebarItem, {
-    ...props,
-    active: active,
-    setActive: setActive
-  }), active && children.length > 0 && /*#__PURE__*/React.createElement("div", null, children.map((c, i) => /*#__PURE__*/React.createElement(Section, {
-    key: i,
-    depth: depth + 1,
-    ...c
-  }))));
+  return /*#__PURE__*/jsxs("section", {
+    children: [/*#__PURE__*/jsx(SidebarItem, {
+      ...props,
+      active: active,
+      setActive: setActive
+    }), active && children.length > 0 && /*#__PURE__*/jsx("div", {
+      children: children.map((c, i) => /*#__PURE__*/jsx(Section, {
+        depth: depth + 1,
+        ...c
+      }, i))
+    })]
+  });
 }
-const classes$1 = {
-  root: "ruyt2hq"
-};
 
 function Sidebar(props) {
   const {
     location
   } = useContext();
+  const [isMenuOpen, setMenuOpen] = React.useState(false);
+  React.useEffect(() => {
+    const scrollLockClassList = {
+      className: "timvir-s-1rife3k timvir-s-ixxii4 timvir-s-13vifvy timvir-s-h8yej3"
+    }.className.split(" ");
+    for (const className of scrollLockClassList) {
+      document.body.classList.toggle(className, isMenuOpen);
+    }
+    return () => {
+      for (const className of scrollLockClassList) {
+        document.body.classList.remove(className);
+      }
+    };
+  }, [isMenuOpen]);
   const {
     toc,
     search,
-    className,
     ...rest
   } = props;
   const node = function find(nodes) {
@@ -505,98 +669,110 @@ function Sidebar(props) {
       }
     }
   }(toc);
-  return /*#__PURE__*/React.createElement("nav", {
-    className: cx_default(className, classes.root),
-    ...rest
-  }, /*#__PURE__*/React.createElement("header", {
-    className: "h17eoe18"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d1mgn6rc"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d7bx8iu"
-  }, "Timvir"), /*#__PURE__*/React.createElement("div", {
-    className: "d119ou0k"
-  }), /*#__PURE__*/React.createElement("div", null, "Docs")), search && /*#__PURE__*/React.createElement("div", {
-    className: cx_default("d1f74255")
-  }, /*#__PURE__*/React.createElement(Search, {
-    ...search
-  }))), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "menu",
-    className: "l5l3c45"
-  }, node?.icon ? /*#__PURE__*/React.cloneElement(node.icon, {
-    className: "c15ju3pv"
-  }) : null, /*#__PURE__*/React.createElement("span", null, node?.label ?? "Menu"), /*#__PURE__*/React.createElement(Icons.Menu, {
-    size: 16,
-    className: "s2bwnbz"
-  })), /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: "menu",
-    className: "iu06l76",
-    onChange: ev => {
-      document.body.classList.toggle(classes.scrollLock, ev.currentTarget.checked);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.content
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.sections
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.nav,
-    onClick: () => {
-      document.body.classList.remove(classes.scrollLock);
-    }
-  }, toc.map((c, i) => /*#__PURE__*/React.createElement(Section, {
-    key: i,
-    depth: 0,
-    ...c
-  }))))));
+  const rootStyleProps = {
+    className: "timvir-s-78zum5 timvir-s-dt5ytf timvir-s-1fsrbvp"
+  };
+  return /*#__PURE__*/jsxs("nav", {
+    ...rest,
+    ...rootStyleProps,
+    className: cx(rest.className, rootStyleProps.className),
+    children: [/*#__PURE__*/jsxs("header", {
+      className: "timvir-s-7uxsod timvir-s-1pizb70 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1d813ht timvir-s-1m2nq6k timvir-s-1vptubt",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "timvir-s-kpwil5 timvir-s-1xet1wb timvir-s-78zum5 timvir-s-ou54vl",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "timvir-s-kjxd12",
+          children: "Timvir"
+        }), /*#__PURE__*/jsx("div", {
+          className: "timvir-s-uqj7gu timvir-s-1i1rx1s timvir-s-mll18r"
+        }), /*#__PURE__*/jsx("div", {
+          children: "Docs"
+        })]
+      }), search && /*#__PURE__*/jsx("div", {
+        className: "timvir-s-2lah0s timvir-s-zhuw26 timvir-s-w7yly9 timvir-s-1s85apg timvir-s-1m2nq6k",
+        children: /*#__PURE__*/jsx(Search, {
+          ...search
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      role: "button",
+      onClick: () => setMenuOpen(!isMenuOpen),
+      className: "timvir-s-1qg66n7 timvir-s-7uxsod timvir-s-1pizb70 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1ypdohk timvir-s-1yn2rt8",
+      children: [node?.icon ? /*#__PURE__*/React.cloneElement(node.icon, {
+        ...{
+          className: "timvir-s-1lliihq timvir-s-1fr90bg timvir-s-pz6ql4 timvir-s-1db2dqx timvir-s-15dgqpb"
+        }
+      }) : null, /*#__PURE__*/jsx("span", {
+        children: node?.label ?? "Menu"
+      }), /*#__PURE__*/jsx(Icons.Menu, {
+        size: 16,
+        className: "timvir-s-8x9d4c"
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      ...{
+        0: {
+          className: "timvir-s-1s85apg timvir-s-1b7vwdu timvir-s-1j2yrl1 timvir-s-1azbkut timvir-s-1fsrbvp timvir-s-etmjmr timvir-s-1ccyb2m"
+        },
+        1: {
+          className: "timvir-s-1b7vwdu timvir-s-1j2yrl1 timvir-s-1azbkut timvir-s-1fsrbvp timvir-s-etmjmr timvir-s-1ccyb2m timvir-s-78zum5 timvir-s-ixxii4 timvir-s-is09m7 timvir-s-u96u03 timvir-s-3m8u43 timvir-s-1ey2m1c"
+        }
+      }[!!isMenuOpen << 0],
+      children: /*#__PURE__*/jsx("div", {
+        className: "timvir-s-1bd1j73 timvir-s-1odjw0f timvir-s-1iyjqo2 timvir-s-xqldzo timvir-s-rz96y6 timvir-s-1ijhxuk",
+        children: /*#__PURE__*/jsx("div", {
+          className: "timvir-s-158hnoc timvir-s-1ator1a",
+          onClick: () => {
+            setMenuOpen(false);
+          },
+          children: toc.map((c, i) => /*#__PURE__*/jsx(Section, {
+            depth: 0,
+            ...c
+          }, i))
+        })
+      })
+    })]
+  });
 }
-const classes = {
-  scrollLock: "s56darb",
-  root: "rwbgl5x",
-  content: "c15aig6x",
-  sections: "svou0q5",
-  nav: "n1ibjf0n"
-};
 function Search(props) {
   const {
     open,
     label
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "da95449"
-  }, /*#__PURE__*/React.createElement("div", {
-    role: "button",
-    className: "d1au8wkb",
-    onClick: open
-  }, /*#__PURE__*/React.createElement("svg", {
-    x: "0px",
-    y: "0px",
-    width: "12px",
-    height: "12px",
-    viewBox: "0 0 12 12"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M11.707 10.293l-2.54-2.54a5.015 5.015 0 10-1.414 1.414l2.54 2.54a1 1 0 001.414-1.414zM2 5a3 3 0 113 3 3 3 0 01-3-3z",
-    fill: "currentColor"
-  })), label || "Search docs"));
+  return /*#__PURE__*/jsx("div", {
+    className: "timvir-s-gcpwm9",
+    children: /*#__PURE__*/jsxs("div", {
+      role: "button",
+      className: "timvir-s-1cdhzux timvir-s-1dcheo9 timvir-s-1ylh3l6 timvir-s-o1l8bm timvir-s-1ypdohk timvir-s-u0aao5 timvir-s-ur7f20 timvir-s-84vhe8 timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1dc5b4e",
+      onClick: open,
+      children: [/*#__PURE__*/jsx("svg", {
+        x: "0px",
+        y: "0px",
+        width: "12px",
+        height: "12px",
+        viewBox: "0 0 12 12",
+        className: "timvir-s-1lliihq timvir-s-1db2dqx timvir-s-1jw3ynk timvir-s-vle69y",
+        children: /*#__PURE__*/jsx("path", {
+          d: "M11.707 10.293l-2.54-2.54a5.015 5.015 0 10-1.414 1.414l2.54 2.54a1 1 0 001.414-1.414zM2 5a3 3 0 113 3 3 3 0 01-3-3z",
+          fill: "currentColor"
+        })
+      }), label || "Search docs"]
+    })
+  });
 }
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
-function Page(props, ref) {
+function Page(props$1, ref) {
   const {
     location,
     toc,
     Link,
-    className,
     search,
     mdxComponents,
     Footer,
     blocks,
     children,
     ...rest
-  } = props;
+  } = props$1;
   const [state, setState] = React.useState({
     search: {
       open: false
@@ -605,11 +781,15 @@ function Page(props, ref) {
   const [bus] = React.useState(makeBus);
   const context = React.useMemo(() => ({
     bus,
+    articleComponents: {
+      ...builtins,
+      ...mdxComponents
+    },
     location,
     Link,
     blocks,
     toc
-  }), [bus, location, Link, blocks, toc]);
+  }), [bus, mdxComponents, location, Link, blocks, toc]);
   useHotkeys("meta+p", ev => {
     ev.preventDefault();
     setState({
@@ -620,95 +800,124 @@ function Page(props, ref) {
   }, {
     enableOnFormTags: true
   });
-  useHotkeys("escape", () => {
+  useHotkeys("meta+k", ev => {
+    ev.preventDefault();
     setState({
       search: {
-        open: false
+        open: !state.search.open
       }
     });
   }, {
-    enableOnFormTags: true
+    enableOnFormTags: ["INPUT"]
   });
-  return /*#__PURE__*/React.createElement(Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(Root, {
-    ref: ref,
-    ...rest,
-    className: cx_default(className, theme, "rfhjyp1")
-  }, /*#__PURE__*/React.createElement(Sidebar, {
-    className: "s1pp8z35",
-    toc: toc,
-    search: search && {
-      open: () => {
-        setState({
-          search: {
-            open: true
-          }
-        });
-      },
-      ...search
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "dxk1fgw"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: grid
-  }, /*#__PURE__*/React.createElement(MDXProvider, {
-    components: {
-      ...mdxComponentsBase,
-      ...mdxComponents
-    }
-  }, children)), /*#__PURE__*/React.createElement("div", {
-    className: "d2srpki"
-  }, (() => {
-    function flatten(n, parents) {
-      let ret = [];
-      if (n.path) {
-        ret.push({
-          parents,
-          label: n.label,
-          path: n.path
-        });
-      }
-      if (n.children) {
-        ret = [...ret, ...n.children.flatMap(c => flatten(c, [...parents, n]))];
-      }
-      return ret;
-    }
-    const items = toc.flatMap(n => flatten(n, []));
-    const index = items.findIndex(v => v.path === location.asPath.replace(/#.*/, ""));
-    if (index === -1) {
-      return null;
-    }
-    function toLink(index) {
-      const item = items[index];
-      if (item === undefined) {
-        return undefined;
-      } else {
-        return {
-          href: item.path,
-          label: item.label,
-          context: item.parents.map(x => x.label).join(" / ")
-        };
-      }
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "d1hkiw6l"
-    }, /*#__PURE__*/React.createElement(NavigationFooter$1, {
-      prev: toLink(index - 1),
-      next: toLink(index + 1)
-    }));
-  })(), Footer && /*#__PURE__*/React.createElement(Footer, null))), search && /*#__PURE__*/React.createElement(search.Component, {
-    ...state.search,
-    onClose: () => {
+  useHotkeys("escape", ev => {
+    if (state.search.open) {
+      ev.preventDefault();
       setState({
         search: {
           open: false
         }
       });
     }
-  })), /*#__PURE__*/React.createElement(Commands, null));
+  }, {
+    enableOnFormTags: true
+  });
+  const rootStyleProps = {
+    className: "timvir-s-g6iff7 timvir-s-1hz7z82 timvir-s-rvj5dj timvir-s-c0s83b timvir-s-1i3za4p timvir-s-oxwh6b timvir-s-1w3eerp"
+  };
+  return /*#__PURE__*/jsxs(Provider, {
+    value: context,
+    children: [/*#__PURE__*/jsxs(Root, {
+      ref: ref,
+      ...rest,
+      ...rootStyleProps,
+      className: cx(rest.className, rootStyleProps.className),
+      style: {
+        ...rest.style,
+        ...rootStyleProps.style
+      },
+      children: [/*#__PURE__*/jsx(Sidebar, {
+        className: "timvir-s-1nkj2r4 timvir-s-13tdkmf timvir-s-1b7vwdu timvir-s-7wzq59 timvir-s-13vifvy timvir-s-1b3g1kt timvir-s-1uk07ai timvir-s-bvzrs5 timvir-s-1i1dbpq timvir-s-zfhgub timvir-s-3f8au3",
+        toc: toc,
+        search: search && {
+          open: () => {
+            setState({
+              search: {
+                open: true
+              }
+            });
+          },
+          ...search
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: "timvir-s-78zum5 timvir-s-dt5ytf timvir-s-1fdo2jl",
+        children: [/*#__PURE__*/jsx("div", {
+          ...props(styles.content, layoutStyles.grid),
+          children: children
+        }), /*#__PURE__*/jsxs("div", {
+          className: "timvir-s-r1yuqi",
+          children: [(() => {
+            function flatten(n, parents) {
+              let ret = [];
+              if (n.path) {
+                ret.push({
+                  parents,
+                  label: n.label,
+                  path: n.path
+                });
+              }
+              if (n.children) {
+                ret = [...ret, ...n.children.flatMap(c => flatten(c, [...parents, n]))];
+              }
+              return ret;
+            }
+            const items = toc.flatMap(n => flatten(n, []));
+            const index = items.findIndex(v => v.path === location.asPath.replace(/#.*/, ""));
+            if (index === -1) {
+              return null;
+            }
+            function toLink(index) {
+              const item = items[index];
+              if (item === undefined) {
+                return undefined;
+              } else {
+                return {
+                  href: item.path,
+                  label: item.label,
+                  context: item.parents.map(x => x.label).join(" / ")
+                };
+              }
+            }
+            return /*#__PURE__*/jsx("div", {
+              className: "timvir-s-r1yuqi timvir-s-11408do",
+              children: /*#__PURE__*/jsx(NavigationFooter, {
+                Link: Link,
+                prev: toLink(index - 1),
+                next: toLink(index + 1)
+              })
+            });
+          })(), Footer && /*#__PURE__*/jsx(Footer, {})]
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Commands, {
+      open: state.search.open,
+      onClose: () => {
+        setState({
+          search: {
+            open: false
+          }
+        });
+      }
+    })]
+  });
 }
 var Page$1 = /*#__PURE__*/React.forwardRef(Page);
+const styles = {
+  content: {
+    kTgw9: "timvir-s-13faqbe",
+    $$css: true
+  }
+};
 
 /**
  * A mailbox is a wonka source which receives messages for one specific block (identified by its id).
@@ -746,7 +955,7 @@ function useBlock(props) {
         });
       }
     }
-  })).unsubscribe, [mailbox]);
+  })).unsubscribe, [mailbox, state.overrides]);
   return {
     bus,
     mailbox,
@@ -763,4 +972,20 @@ function useBlock(props) {
   };
 }
 
-export { Footer$1 as Footer, Page$1 as Page, extendedWidth, fullWidth, grid, theme, useBlock, useMailbox };
+/**
+ * This React hook returns a set of components that meant for use within a
+ * Timvir page or custom block. The components are styled so that they fit
+ * within the Timvir design system. You should use them to make the page
+ * appear styled consistently.
+ *
+ * The set of components includes all the built-in components, as well as
+ * any overrides and additions you have provided to the '<Page>' component.
+ */
+function useArticleComponents() {
+  return {
+    ...builtins,
+    ...useContext().articleComponents
+  };
+}
+
+export { Footer$1 as Footer, Page$1 as Page, extendedWidth, fullWidth, grid, layoutStyles, noLayout, useArticleComponents, useBlock, useMailbox };