timvir 0.2.38 → 0.2.39

package/core/index.js

@@ -3,6 +3,7 @@ import { pipe, filter, subscribe } from 'wonka';
 import { useContext, Provider } from 'timvir/context';
 export { useContext } from 'timvir/context';
 import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { MDXProvider } from '@mdx-js/react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { makeBus } from 'timvir/bus';
@@ -55,37 +56,46 @@ function Footer(props, ref) {
     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,
+    children: [links && /*#__PURE__*/jsx("div", {
+      className: grid,
+      children: /*#__PURE__*/jsx("div", {
+        className: classes$7.linkGroups,
+        children: links.map(({
+          group,
+          items
+        }, i) => /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx("div", {
+            className: classes$7.linkGroupTitle,
+            children: group
+          }), /*#__PURE__*/jsx("div", {
+            children: items.map(({
+              label,
+              href
+            }, j) => /*#__PURE__*/jsx("a", {
+              href: href,
+              className: classes$7.link,
+              children: label
+            }, j))
+          })]
+        }, i))
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: cx_default(grid, classes$7.meta),
+      children: /*#__PURE__*/jsxs("div", {
+        style: {
+          marginBottom: 0
+        },
+        children: ["Built with ", /*#__PURE__*/jsx("a", {
+          href: "https://timvir.vercel.app",
+          children: "Timvir"
+        })]
+      })
+    })]
+  });
 }
 var Footer$1 = /*#__PURE__*/React.forwardRef(Footer);
 const classes$7 = {
@@ -104,28 +114,32 @@ function Action(props) {
     label,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root$2, {
+  return /*#__PURE__*/jsxs(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));
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classes$6.icon,
+      children: /*#__PURE__*/jsxs("svg", {
+        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: classes$6.label,
+      children: label
+    })]
+  });
 }
 const classes$6 = {
   root: "ru1mblv",
@@ -172,7 +186,7 @@ function Dialog(props) {
         onDispose?.();
       }, 200);
     }
-  }, [open]);
+  }, [open, onDispose]);
   React.useEffect(() => {
     (async () => {
       const {
@@ -183,40 +197,46 @@ function Dialog(props) {
         commands: edges
       }));
     })();
-  }, [state.query]);
-  return /*#__PURE__*/React.createElement("div", {
+  }, [toc, state.query]);
+  return /*#__PURE__*/jsxs("div", {
     className: classes$5.root,
     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: classes$5.context,
+      children: "Context"
+    }), /*#__PURE__*/jsx("div", {
+      className: classes$5.prompt,
+      children: /*#__PURE__*/jsx("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__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("div", {
+        className: classes$5.subheader,
+        children: "Pages"
+      }), /*#__PURE__*/jsx("div", {
+        className: classes$5.commands,
+        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",
@@ -226,7 +246,7 @@ const classes$5 = {
   commands: "cchvluj"
 };
 
-function Commands(props) {
+function Commands() {
   const [state, setState] = React.useState({
     /**
      * Whether the command palette should be open or not. The command palette is
@@ -247,17 +267,18 @@ function Commands(props) {
         if (!state.dialog) {
           const containerElement = document.createElement("div");
           document.body.appendChild(containerElement);
-          const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+          const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsx("div", {
             className: classes$4.root,
             onClick: ev => {
               if (ev.target === ev.currentTarget) {
                 close();
               }
-            }
-          }, /*#__PURE__*/React.createElement(Dialog, {
-            open: true,
-            onClose: close
-          })), containerElement);
+            },
+            children: /*#__PURE__*/jsx(Dialog, {
+              open: true,
+              onClose: close
+            })
+          }), containerElement);
           return {
             containerElement,
             reactPortal
@@ -265,17 +286,18 @@ function Commands(props) {
         } else {
           return {
             containerElement: state.dialog.containerElement,
-            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsx("div", {
               className: classes$4.root,
               onClick: ev => {
                 if (ev.target === ev.currentTarget) {
                   close();
                 }
-              }
-            }, /*#__PURE__*/React.createElement(Dialog, {
-              open: true,
-              onClose: close
-            })), state.dialog.containerElement)
+              },
+              children: /*#__PURE__*/jsx(Dialog, {
+                open: true,
+                onClose: close
+              })
+            }), state.dialog.containerElement)
           };
         }
       })()
@@ -288,23 +310,24 @@ function Commands(props) {
         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: classes$4.root,
+              children: /*#__PURE__*/jsx(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)
           };
         } else {
           return state.dialog;
@@ -359,29 +382,43 @@ function NavigationFooter(props, ref) {
     className,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root$1, {
+  return /*#__PURE__*/jsx(Root$1, {
     ref: ref,
     ...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)))));
+    className: cx_default(className, classes$3.root),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "de625n1",
+      children: [prev && /*#__PURE__*/jsxs(Link, {
+        href: prev.href,
+        className: "l19gj27w",
+        children: [/*#__PURE__*/jsxs(Context, {
+          children: [/*#__PURE__*/jsx(Icons.ChevronLeft, {}), " Previous"]
+        }), /*#__PURE__*/jsx(Label, {
+          children: prev.label
+        })]
+      }), next && /*#__PURE__*/jsx(Link, {
+        href: next.href,
+        className: "l15ohs1l",
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsxs(Context, {
+            children: ["Next ", /*#__PURE__*/jsx(Icons.ChevronRight, {})]
+          }), /*#__PURE__*/jsx(Label, {
+            children: next.label
+          })]
+        })
+      })]
+    })
+  });
 }
 var NavigationFooter$1 = /*#__PURE__*/React.forwardRef(NavigationFooter);
 function Label(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "dczrd9z",
     ...props
   });
 }
 function Context(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "difnzb8",
     ...props
   });
@@ -403,36 +440,41 @@ function SidebarItem(props) {
     location,
     Link
   } = useContext();
-  const icon = children.length === 0 ? null : /*#__PURE__*/React.createElement(Icons.ChevronRight, {
+  const icon = children.length === 0 ? null : /*#__PURE__*/jsx(Icons.ChevronRight, {
     className: classes$2.icon,
     style: {
       transform: active ? "rotate(90deg)" : "rotate(0deg)"
     },
     size: 16
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("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
-    },
-    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));
+    "data-active": location.asPath.replace(/#.*$/, "") === path,
+    children: path ? /*#__PURE__*/jsxs(Link, {
+      href: path,
+      style: {
+        marginLeft: depth * 16
+      },
+      children: [props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
+        className: classes$2.icn
+      }) : null, /*#__PURE__*/jsx("span", {
+        className: classes$2.label,
+        children: label
+      }), icon]
+    }) : /*#__PURE__*/jsxs("a", {
+      style: {
+        marginLeft: depth * 16
+      },
+      href: "#",
+      onClick: () => setActive(x => !x),
+      children: [props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
+        className: classes$2.icn
+      }) : null, /*#__PURE__*/jsx("span", {
+        className: classes$2.label,
+        children: label
+      }), icon]
+    })
+  });
 }
 const classes$2 = {
   root: "r28qe6v",
@@ -466,17 +508,19 @@ 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", {
+    className: classes$1.root,
+    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"
@@ -505,50 +549,62 @@ function Sidebar(props) {
       }
     }
   }(toc);
-  return /*#__PURE__*/React.createElement("nav", {
+  return /*#__PURE__*/jsxs("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
-  }))))));
+    ...rest,
+    children: [/*#__PURE__*/jsxs("header", {
+      className: "h17eoe18",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "d1mgn6rc",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "d7bx8iu",
+          children: "Timvir"
+        }), /*#__PURE__*/jsx("div", {
+          className: "d119ou0k"
+        }), /*#__PURE__*/jsx("div", {
+          children: "Docs"
+        })]
+      }), search && /*#__PURE__*/jsx("div", {
+        className: cx_default("d1f74255"),
+        children: /*#__PURE__*/jsx(Search, {
+          ...search
+        })
+      })]
+    }), /*#__PURE__*/jsxs("label", {
+      htmlFor: "menu",
+      className: "l5l3c45",
+      children: [node?.icon ? /*#__PURE__*/React.cloneElement(node.icon, {
+        className: "c15ju3pv"
+      }) : null, /*#__PURE__*/jsx("span", {
+        children: node?.label ?? "Menu"
+      }), /*#__PURE__*/jsx(Icons.Menu, {
+        size: 16,
+        className: "s2bwnbz"
+      })]
+    }), /*#__PURE__*/jsx("input", {
+      type: "checkbox",
+      id: "menu",
+      className: "iu06l76",
+      onChange: ev => {
+        document.body.classList.toggle(classes.scrollLock, ev.currentTarget.checked);
+      }
+    }), /*#__PURE__*/jsx("div", {
+      className: classes.content,
+      children: /*#__PURE__*/jsx("div", {
+        className: classes.sections,
+        children: /*#__PURE__*/jsx("div", {
+          className: classes.nav,
+          onClick: () => {
+            document.body.classList.remove(classes.scrollLock);
+          },
+          children: toc.map((c, i) => /*#__PURE__*/jsx(Section, {
+            depth: 0,
+            ...c
+          }, i))
+        })
+      })
+    })]
+  });
 }
 const classes = {
   scrollLock: "s56darb",
@@ -562,22 +618,25 @@ function Search(props) {
     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: "da95449",
+    children: /*#__PURE__*/jsxs("div", {
+      role: "button",
+      className: "d1au8wkb",
+      onClick: open,
+      children: [/*#__PURE__*/jsx("svg", {
+        x: "0px",
+        y: "0px",
+        width: "12px",
+        height: "12px",
+        viewBox: "0 0 12 12",
+        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"]
+    })
+  });
 }
 
 /**
@@ -629,84 +688,91 @@ function Page(props, ref) {
   }, {
     enableOnFormTags: true
   });
-  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: () => {
-      setState({
-        search: {
-          open: false
+  return /*#__PURE__*/jsxs(Provider, {
+    value: context,
+    children: [/*#__PURE__*/jsxs(Root, {
+      ref: ref,
+      ...rest,
+      className: cx_default(className, theme, "rfhjyp1"),
+      children: [/*#__PURE__*/jsx(Sidebar, {
+        className: "s1pp8z35",
+        toc: toc,
+        search: search && {
+          open: () => {
+            setState({
+              search: {
+                open: true
+              }
+            });
+          },
+          ...search
         }
-      });
-    }
-  })), /*#__PURE__*/React.createElement(Commands, null));
+      }), /*#__PURE__*/jsxs("div", {
+        className: "dxk1fgw",
+        children: [/*#__PURE__*/jsx("div", {
+          className: grid,
+          children: /*#__PURE__*/jsx(MDXProvider, {
+            components: {
+              ...mdxComponentsBase,
+              ...mdxComponents
+            },
+            children: children
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: "d2srpki",
+          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: "d1hkiw6l",
+              children: /*#__PURE__*/jsx(NavigationFooter$1, {
+                prev: toLink(index - 1),
+                next: toLink(index + 1)
+              })
+            });
+          })(), Footer && /*#__PURE__*/jsx(Footer, {})]
+        })]
+      }), search && /*#__PURE__*/jsx(search.Component, {
+        ...state.search,
+        onClose: () => {
+          setState({
+            search: {
+              open: false
+            }
+          });
+        }
+      })]
+    }), /*#__PURE__*/jsx(Commands, {})]
+  });
 }
 var Page$1 = /*#__PURE__*/React.forwardRef(Page);
 
@@ -746,7 +812,7 @@ function useBlock(props) {
         });
       }
     }
-  })).unsubscribe, [mailbox]);
+  })).unsubscribe, [mailbox, state.overrides]);
   return {
     bus,
     mailbox,