Update dependencies for site

components/Sandbox.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Controlled as CodeMirror } from 'react-codemirror2';
 import { useRouter } from 'next/router';
 import Markdoc from '@markdoc/markdoc';
 import { getSchema } from '@markdoc/next.js/runtime';
@@ -89,9 +88,14 @@ export function useMarkdocCode(code) {
   return { ast, content, config, errors };
 }
 
+// NOTE: In development mode, you may see two CodeMirror editors rendered, one
+// on top of another. I don't know why this happens, but it does not occur in
+// production builds. You can verify this by running `npm run build && npm run
+// start`.
 function EditorInternal({ code, onChange, options, errors, cursor }) {
   const ref = React.useRef();
   const [key, setKey] = React.useState(0);
+  const [CodeMirror, setCodeMirror] = React.useState(null);
 
   const codeMirrorOptions = React.useMemo(
     () => ({
@@ -149,14 +153,20 @@ function EditorInternal({ code, onChange, options, errors, cursor }) {
   }, [errors]);
 
   React.useEffect(() => {
+    const { Controlled } = require('react-codemirror2');
     require('codemirror/mode/markdown/markdown');
     require('codemirror/mode/javascript/javascript');
     require('codemirror/mode/xml/xml');
     require('codemirror/addon/selection/mark-selection');
     require('./codemirror/markdoc.js');
+    setCodeMirror(() => Controlled);
     setKey((k) => k + 1);
   }, []);
 
+  if (!CodeMirror) {
+    return null;
+  }
+
   return (
     <>
       <CodeMirror

components/Shell/Footer.js

@@ -139,7 +139,7 @@ export function Footer({ children: links, landing }) {
             display: block;
             width: 100%;
             border: none;
-            border-bottom: 1px solid var(--dark);
+            border-bottom: 1px solid var(--page-border);
           }
 
           .try-link {

components/Shell/TopNav.js

@@ -85,7 +85,7 @@ export function TopNav({ children }) {
             margin: 0 auto;
             align-items: center;
             justify-content: space-between;
-            border-bottom: 1px solid var(--dark);
+            border-bottom: 1px solid var(--page-border);
             padding: 1rem 2rem 1.1rem;
             font-size: 15px;
             font-family: var(--sans);