diff --git a/components/Carb.js b/components/Carb.js
new file mode 100644
index 000000000..d5c62ba98
--- /dev/null
+++ b/components/Carb.js
@@ -0,0 +1,487 @@
+import React, { useMemo, useState, useDeferredValue } from 'react'
+import ReactDOM from 'react-dom'
+import { Controlled as CodeMirror } from 'react-codemirror2'
+import { Spinner } from './Spinner'
+import WindowControls from './WindowControls'
+import hljs from 'highlight.js/lib/core'
+import dynamic from 'next/dynamic'
+import WidthHandler from './WidthHandler'
+
+import {
+  COLORS,
+  LANGUAGES,
+  LANGUAGE_MODE_HASH,
+  LANGUAGE_NAME_HASH,
+  LANGUAGE_MIME_HASH,
+  DEFAULT_SETTINGS,
+  THEMES_HASH,
+} from '../lib/constants'
+
+const SelectionEditor = dynamic(() => import('./SelectionEditor'), {
+  loading: () => null,
+})
+const Watermark = dynamic(() => import('./svg/Watermark'), {
+  loading: () => null,
+})
+
+function searchLanguage(l) {
+  return LANGUAGE_NAME_HASH[l] || LANGUAGE_MODE_HASH[l] || LANGUAGE_MIME_HASH[l]
+}
+
+function noop() {}
+
+function getUnderline(underline) {
+  switch (underline) {
+    case 1:
+      return 'underline'
+    case 2:
+      /**
+       * Chrome will only round to the nearest wave, causing visual inconsistencies
+       * https://stackoverflow.com/questions/57559588/how-to-make-the-wavy-underline-extend-cover-all-the-characters-in-chrome
+       */
+      return `${COLORS.RED} wavy underline; text-decoration-skip-ink: none`
+  }
+  return 'initial'
+}
+
+const Carbon = (
+  props = {
+    onChange: noop,
+    onGutterClick: noop,
+  }
+) => {
+  const [currentSelection, setCurrentSelection] = useState(null)
+  const [selectionAt, setSelectionAt] = useState(null)
+
+  const onBeforeChange = (editor, meta, code) => {
+    if (!props.readOnly) {
+      props.onChange(code)
+    }
+  }
+
+  const onSelection = (ed, data) => {
+    if (props.readOnly) {
+      return
+    }
+
+    const selection = data.ranges[0]
+    if (
+      selection.head.line === selection.anchor.line &&
+      selection.head.ch === selection.anchor.ch
+    ) {
+      return setCurrentSelection(null)
+    }
+    if (selection.head.line + selection.head.ch > selection.anchor.line + selection.anchor.ch) {
+      setCurrentSelection({
+        from: selection.anchor,
+        to: selection.head,
+      })
+    } else {
+      setCurrentSelection({
+        from: selection.head,
+        to: selection.anchor,
+      })
+    }
+  }
+
+  const onMouseUp = () => {
+    if (currentSelection) {
+      setSelectionAt(currentSelection)
+    } else {
+      setSelectionAt(null)
+    }
+  }
+
+  const onSelectionChange = changes => {
+    if (selectionAt) {
+      const css = [
+        changes.bold != null && `font-weight: ${changes.bold ? 'bold' : 'initial'}`,
+        changes.italics != null && `font-style: ${changes.italics ? 'italic' : 'initial'}`,
+        changes.underline != null && `text-decoration: ${getUnderline(changes.underline)}`,
+        changes.color != null && `color: ${changes.color} !important`,
+      ]
+        .filter(Boolean)
+        .join('; ')
+
+      if (css) {
+        props.editorRef.current.editor.doc.markText(selectionAt.from, selectionAt.to, { css })
+      }
+    }
+  }
+
+  const config = { ...DEFAULT_SETTINGS, ...props.config }
+
+
+  const defferedNewCode = useDeferredValue(props.children);
+
+  const languageMode = useMemo(() => {
+    const language = config.language && config.language.toLowerCase();
+
+    if (language === 'auto') {
+      // try to set the language
+      const detectedLanguage = hljs.highlightAuto(defferedNewCode).language
+      const languageMode = searchLanguage(detectedLanguage)
+
+      if (languageMode) {
+        return languageMode.mime || languageMode.mode
+      }
+    }
+
+    const languageMode = searchLanguage(language)
+
+    if (languageMode) {
+      return languageMode.mime || languageMode.mode
+    }
+
+    return language
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defferedNewCode]);
+
+
+  const options = {
+    screenReaderLabel: 'Code editor',
+    lineNumbers: config.lineNumbers,
+    firstLineNumber: config.firstLineNumber,
+    mode: languageMode || 'plaintext',
+    theme: config.theme,
+    scrollbarStyle: null,
+    viewportMargin: Infinity,
+    lineWrapping: true,
+    smartIndent: true,
+    extraKeys: {
+      'Shift-Tab': 'indentLess',
+    },
+    readOnly: props.readOnly,
+    showInvisibles: config.hiddenCharacters,
+    autoCloseBrackets: true,
+  }
+  const backgroundImage =
+    (props.config.backgroundImage && props.config.backgroundImageSelection) ||
+    props.config.backgroundImage
+
+  const themeConfig = props.theme || THEMES_HASH[config.theme]
+
+  const light = themeConfig && themeConfig.light
+
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+  const selectionNode =
+    !props.readOnly && !!selectionAt && document.getElementById('style-editor-button')
+  return (
+    <div className="section">
+      <div
+        ref={props.innerRef}
+        id="export-container"
+        className="export-container"
+        onMouseUp={onMouseUp}
+      >
+        {props.loading ? (
+          // TODO investigate removing these hard-coded values
+          <div style={{ width: 876, height: 240 }}>
+            <Spinner />
+          </div>
+        ) : (
+          <div className="container">
+            {config.windowControls ? (
+              <WindowControls
+                titleBar={props.titleBar}
+                onTitleBarChange={props.onTitleBarChange}
+                theme={config.windowTheme}
+                code={props.children}
+                copyable={props.copyable}
+                light={light}
+              />
+            ) : null}
+            <CodeMirror
+              ref={props.editorRef}
+              className={`CodeMirror__container window-theme__${config.windowTheme}`}
+              value={props.children}
+              options={options}
+              onBeforeChange={onBeforeChange}
+              onGutterClick={props.onGutterClick}
+              onSelection={onSelection}
+            />
+            {config.watermark && <Watermark light={light} />}
+            <div className="container-bg">
+              <div className="white eliminateOnRender" />
+              <div className="alpha eliminateOnRender" />
+              <div className="bg" />
+            </div>
+
+            {/* TODO pass in this child as a prop to Carbon */}
+            <WidthHandler
+              innerRef={props.innerRef}
+              onChange={props.updateWidth}
+              onChangeComplete={props.updateWidthConfirm}
+              paddingHorizontal={config.paddingHorizontal}
+              paddingVertical={config.paddingVertical}
+            />
+          </div>
+        )}
+      </div>
+      {selectionNode &&
+        ReactDOM.createPortal(
+          <SelectionEditor onChange={onSelectionChange} />,
+          // TODO: don't use portal?
+          selectionNode
+        )}
+      <style jsx>
+        {`
+          .container {
+            position: relative;
+            min-width: ${config.widthAdjustment ? '90px' : 'auto'};
+            max-width: ${config.widthAdjustment ? '1024px' : 'none'};
+            ${config.widthAdjustment ? '' : `width: ${config.width}px;`}
+            padding: ${config.paddingVertical} ${config.paddingHorizontal};
+          }
+
+          .container :global(.watermark) {
+            fill-opacity: 0.75;
+            position: absolute;
+            z-index: 2;
+            bottom: calc(${config.paddingVertical} + 16px);
+            right: calc(${config.paddingHorizontal} + 16px);
+          }
+
+          .container .container-bg {
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+          }
+
+          .container .white {
+            background: #fff;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+          }
+
+          .container .bg {
+            ${props.config.backgroundMode === 'image'
+              ? `background: url(${backgroundImage});
+                      background-size: cover;
+                      background-repeat: no-repeat;`
+              : `background: ${props.config.backgroundColor || config.backgroundColor};
+                      background-size: auto;
+                      background-repeat: repeat;`}
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+          }
+
+          .container .alpha {
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
+          }
+
+          .container :global(.CodeMirror-gutters) {
+            background-color: unset;
+            border-right: none;
+          }
+
+          .container :global(.CodeMirror__container) {
+            min-width: inherit;
+            position: relative;
+            z-index: 1;
+            border-radius: 5px;
+            ${config.dropShadow
+              ? `box-shadow: 0 ${config.dropShadowOffsetY} ${config.dropShadowBlurRadius} rgba(0, 0, 0, 0.55)`
+              : ''};
+          }
+
+          .container :global(.CodeMirror__container .CodeMirror) {
+            height: auto;
+            min-width: inherit;
+            padding: 18px 18px;
+            padding-left: 12px;
+            ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
+            font-family: ${config.fontFamily}, monospace !important;
+            font-size: ${config.fontSize};
+            line-height: ${config.lineHeight};
+            font-variant-ligatures: contextual;
+            font-feature-settings: 'calt' 1;
+            user-select: none;
+          }
+
+          .container :global(.CodeMirror-scroll),
+          .container :global(.CodeMirror-hscrollbar) {
+            overflow: hidden !important;
+          }
+
+          .container :global(.window-theme__sharp > .CodeMirror) {
+            border-radius: 0px;
+          }
+
+          .container :global(.window-theme__bw > .CodeMirror) {
+            border: 2px solid ${COLORS.SECONDARY};
+          }
+
+          .container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
+            padding-top: 48px;
+          }
+
+          .container :global(.CodeMirror-linenumber) {
+            cursor: pointer;
+          }
+
+          .container :global(.CodeMirror-cursor) {
+            visibility: ${props.readOnly ? 'hidden' : ''};
+          }
+
+          @media (max-width: 768px) {
+            /* show cursor on mobile */
+            .container :global([contenteditable='true']) {
+              user-select: text;
+            }
+            .container {
+              max-width: 480px;
+            }
+          }
+
+          .section,
+          .export-container {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            max-width: 100%;
+          }
+        `}
+      </style>
+    </div>
+  )
+}
+
+let modesLoaded = false
+function useModeLoader() {
+  React.useEffect(() => {
+    if (!modesLoaded) {
+      // Load Codemirror add-ons
+      require('../lib/custom/autoCloseBrackets')
+      // Load Codemirror modes
+      LANGUAGES.filter(
+        language => language.mode && language.mode !== 'auto' && language.mode !== 'text'
+      ).forEach(language => {
+        language.custom
+          ? require(`../lib/custom/modes/${language.mode}`)
+          : require(`codemirror/mode/${language.mode}/${language.mode}`)
+      })
+      modesLoaded = true
+    }
+  }, [])
+}
+
+let highLightsLoaded = false
+function useHighlightLoader() {
+  React.useEffect(() => {
+    if (!highLightsLoaded) {
+      import('../lib/highlight-languages')
+        .then(res => res.default.map(config => hljs.registerLanguage(config[0], config[1])))
+        .then(() => {
+          highLightsLoaded = true
+        })
+    }
+  }, [])
+}
+
+function selectedLinesReducer(
+  { prevLine, selected },
+  { type, lineNumber, numLines, selectedLines }
+) {
+  const newState = {}
+
+  switch (type) {
+    case 'GROUP': {
+      if (prevLine) {
+        for (let i = Math.min(prevLine, lineNumber); i < Math.max(prevLine, lineNumber) + 1; i++) {
+          newState[i] = selected[prevLine]
+        }
+      }
+      break
+    }
+    case 'MULTILINE': {
+      for (let i = 0; i < selectedLines.length; i++) {
+        newState[selectedLines[i] - 1] = true
+      }
+      break
+    }
+    default: {
+      for (let i = 0; i < numLines; i++) {
+        if (i != lineNumber) {
+          if (prevLine == null) {
+            newState[i] = false
+          }
+        } else {
+          newState[lineNumber] = selected[lineNumber] === true ? false : true
+        }
+      }
+    }
+  }
+
+  return {
+    selected: { ...selected, ...newState },
+    prevLine: lineNumber,
+  }
+}
+
+function useSelectedLines(props, editorRef) {
+  const [state, dispatch] = React.useReducer(selectedLinesReducer, {
+    prevLine: null,
+    selected: {},
+  })
+
+  React.useEffect(() => {
+    if (editorRef.current && Object.keys(state.selected).length > 0) {
+      editorRef.current.editor.display.view.forEach((line, i) => {
+        if (line.text) {
+          line.text.style.opacity = state.selected[i] === true ? 1 : 0.5
+        }
+        if (line.gutter) {
+          line.gutter.style.opacity = state.selected[i] === true ? 1 : 0.5
+        }
+      })
+    }
+  }, [state.selected, props.children, props.config, editorRef])
+
+  React.useEffect(() => {
+    if (props.config.selectedLines) {
+      dispatch({
+        type: 'MULTILINE',
+        selectedLines: props.config.selectedLines,
+      })
+    }
+  }, [props.config.selectedLines])
+
+  return React.useCallback(function onGutterClick(editor, lineNumber, gutter, e) {
+    const numLines = editor.display.view.length
+    const type = e.shiftKey ? 'GROUP' : 'LINE'
+    dispatch({ type, lineNumber, numLines })
+  }, [])
+}
+
+function useShowInvisiblesLoader() {
+  React.useEffect(() => void require('cm-show-invisibles'), [])
+}
+
+function CarbonContainer(props, ref) {
+  useModeLoader()
+  useHighlightLoader()
+  useShowInvisiblesLoader()
+  const editorRef = React.createRef()
+  const onGutterClick = useSelectedLines(props, editorRef)
+
+  return <Carbon {...props} innerRef={ref} editorRef={editorRef} onGutterClick={onGutterClick} />
+}
+
+export default React.forwardRef(CarbonContainer)
diff --git a/components/Carbon.js b/components/Carbon.js
index be5f2f43f..d6e5d692a 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -1,17 +1,13 @@
-import React from 'react'
+import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
-import dynamic from 'next/dynamic'
-import hljs from 'highlight.js/lib/core'
-import javascript from 'highlight.js/lib/languages/javascript'
-import debounce from 'lodash.debounce'
-import ms from 'ms'
 import { Controlled as CodeMirror } from 'react-codemirror2'
-
-hljs.registerLanguage('javascript', javascript)
-
 import { Spinner } from './Spinner'
 import WindowControls from './WindowControls'
+import hljs from 'highlight.js/lib/core'
+import debounce from 'lodash.debounce'
+import dynamic from 'next/dynamic'
 import WidthHandler from './WidthHandler'
+import ms from 'ms'
 
 import {
   COLORS,
@@ -35,6 +31,7 @@ function searchLanguage(l) {
 }
 
 function noop() {}
+
 function getUnderline(underline) {
   switch (underline) {
     case 1:
@@ -49,14 +46,16 @@ function getUnderline(underline) {
   return 'initial'
 }
 
-class Carbon extends React.PureComponent {
-  static defaultProps = {
+const Carbon = (
+  props = {
     onChange: noop,
     onGutterClick: noop,
   }
-  state = {}
+) => {
+  const [currentSelection, setCurrentSelection] = useState(null)
+  const [selectionAt, setSelectionAt] = useState(null)
 
-  handleLanguageChange = debounce(
+  const handleLanguageChange = debounce(
     (newCode, language) => {
       if (language === 'auto') {
         // try to set the language
@@ -83,14 +82,14 @@ class Carbon extends React.PureComponent {
     }
   )
 
-  onBeforeChange = (editor, meta, code) => {
-    if (!this.props.readOnly) {
-      this.props.onChange(code)
+  const onBeforeChange = (editor, meta, code) => {
+    if (!props.readOnly) {
+      props.onChange(code)
     }
   }
 
-  onSelection = (ed, data) => {
-    if (this.props.readOnly) {
+  const onSelection = (ed, data) => {
+    if (props.readOnly) {
       return
     }
 
@@ -99,33 +98,31 @@ class Carbon extends React.PureComponent {
       selection.head.line === selection.anchor.line &&
       selection.head.ch === selection.anchor.ch
     ) {
-      return (this.currentSelection = null)
+      return setCurrentSelection(null)
     }
     if (selection.head.line + selection.head.ch > selection.anchor.line + selection.anchor.ch) {
-      this.currentSelection = {
+      setCurrentSelection({
         from: selection.anchor,
         to: selection.head,
-      }
+      })
     } else {
-      this.currentSelection = {
+      setCurrentSelection({
         from: selection.head,
         to: selection.anchor,
-      }
+      })
     }
   }
 
-  onMouseUp = () => {
-    if (this.currentSelection) {
-      this.setState({ selectionAt: this.currentSelection }, () => {
-        this.currentSelection = null
-      })
+  const onMouseUp = () => {
+    if (currentSelection) {
+      setSelectionAt(currentSelection)
     } else {
-      this.setState({ selectionAt: null })
+      setSelectionAt(null)
     }
   }
 
-  onSelectionChange = changes => {
-    if (this.state.selectionAt) {
+  const onSelectionChange = changes => {
+    if (selectionAt) {
       const css = [
         changes.bold != null && `font-weight: ${changes.bold ? 'bold' : 'initial'}`,
         changes.italics != null && `font-style: ${changes.italics ? 'italic' : 'initial'}`,
@@ -136,250 +133,241 @@ class Carbon extends React.PureComponent {
         .join('; ')
 
       if (css) {
-        this.props.editorRef.current.editor.doc.markText(
-          this.state.selectionAt.from,
-          this.state.selectionAt.to,
-          { css }
-        )
+        props.editorRef.current.editor.doc.markText(selectionAt.from, selectionAt.to, { css })
       }
     }
   }
 
-  render() {
-    const config = { ...DEFAULT_SETTINGS, ...this.props.config }
-
-    const languageMode = this.handleLanguageChange(
-      this.props.children,
-      config.language && config.language.toLowerCase()
-    )
-
-    const options = {
-      screenReaderLabel: 'Code editor',
-      lineNumbers: config.lineNumbers,
-      firstLineNumber: config.firstLineNumber,
-      mode: languageMode || 'plaintext',
-      theme: config.theme,
-      scrollbarStyle: null,
-      viewportMargin: Infinity,
-      lineWrapping: true,
-      smartIndent: true,
-      extraKeys: {
-        'Shift-Tab': 'indentLess',
-      },
-      readOnly: this.props.readOnly,
-      showInvisibles: config.hiddenCharacters,
-      autoCloseBrackets: true,
-    }
-    const backgroundImage =
-      (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
-      this.props.config.backgroundImage
-
-    const themeConfig = this.props.theme || THEMES_HASH[config.theme]
-
-    const light = themeConfig && themeConfig.light
-
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-    const selectionNode =
-      !this.props.readOnly &&
-      !!this.state.selectionAt &&
-      document.getElementById('style-editor-button')
-
-    return (
-      <div className="section">
-        <div
-          ref={this.props.innerRef}
-          id="export-container"
-          className="export-container"
-          onMouseUp={this.onMouseUp}
-        >
-          {this.props.loading ? (
-            // TODO investigate removing these hard-coded values
-            <div style={{ width: 876, height: 240 }}>
-              <Spinner />
-            </div>
-          ) : (
-            <div className="container">
-              {config.windowControls ? (
-                <WindowControls
-                  titleBar={this.props.titleBar}
-                  onTitleBarChange={this.props.onTitleBarChange}
-                  theme={config.windowTheme}
-                  code={this.props.children}
-                  copyable={this.props.copyable}
-                  light={light}
-                />
-              ) : null}
-              <CodeMirror
-                ref={this.props.editorRef}
-                className={`CodeMirror__container window-theme__${config.windowTheme}`}
-                value={this.props.children}
-                options={options}
-                onBeforeChange={this.onBeforeChange}
-                onGutterClick={this.props.onGutterClick}
-                onSelection={this.onSelection}
-              />
-              {config.watermark && <Watermark light={light} />}
-              <div className="container-bg">
-                <div className="white eliminateOnRender" />
-                <div className="alpha eliminateOnRender" />
-                <div className="bg" />
-              </div>
-
-              {/* TODO pass in this child as a prop to Carbon */}
-              <WidthHandler
-                innerRef={this.props.innerRef}
-                onChange={this.props.updateWidth}
-                onChangeComplete={this.props.updateWidthConfirm}
-                paddingHorizontal={config.paddingHorizontal}
-                paddingVertical={config.paddingVertical}
+  const config = { ...DEFAULT_SETTINGS, ...props.config }
+
+  const languageMode = handleLanguageChange(
+    props.children,
+    config.language && config.language.toLowerCase()
+  )
+
+  const options = {
+    screenReaderLabel: 'Code editor',
+    lineNumbers: config.lineNumbers,
+    firstLineNumber: config.firstLineNumber,
+    mode: languageMode || 'plaintext',
+    theme: config.theme,
+    scrollbarStyle: null,
+    viewportMargin: Infinity,
+    lineWrapping: true,
+    smartIndent: true,
+    extraKeys: {
+      'Shift-Tab': 'indentLess',
+    },
+    readOnly: props.readOnly,
+    showInvisibles: config.hiddenCharacters,
+    autoCloseBrackets: true,
+  }
+  const backgroundImage =
+    (props.config.backgroundImage && props.config.backgroundImageSelection) ||
+    props.config.backgroundImage
+
+  const themeConfig = props.theme || THEMES_HASH[config.theme]
+
+  const light = themeConfig && themeConfig.light
+
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+  const selectionNode =
+    !props.readOnly && !!selectionAt && document.getElementById('style-editor-button')
+  return (
+    <div className="section">
+      <div
+        ref={props.innerRef}
+        id="export-container"
+        className="export-container"
+        onMouseUp={onMouseUp}
+      >
+        {props.loading ? (
+          // TODO investigate removing these hard-coded values
+          <div style={{ width: 876, height: 240 }}>
+            <Spinner />
+          </div>
+        ) : (
+          <div className="container">
+            {config.windowControls ? (
+              <WindowControls
+                titleBar={props.titleBar}
+                onTitleBarChange={props.onTitleBarChange}
+                theme={config.windowTheme}
+                code={props.children}
+                copyable={props.copyable}
+                light={light}
               />
+            ) : null}
+            <CodeMirror
+              ref={props.editorRef}
+              className={`CodeMirror__container window-theme__${config.windowTheme}`}
+              value={props.children}
+              options={options}
+              onBeforeChange={onBeforeChange}
+              onGutterClick={props.onGutterClick}
+              onSelection={onSelection}
+            />
+            {config.watermark && <Watermark light={light} />}
+            <div className="container-bg">
+              <div className="white eliminateOnRender" />
+              <div className="alpha eliminateOnRender" />
+              <div className="bg" />
             </div>
-          )}
-        </div>
-        {selectionNode &&
-          ReactDOM.createPortal(
-            <SelectionEditor onChange={this.onSelectionChange} />,
-            // TODO: don't use portal?
-            selectionNode
-          )}
-        <style jsx>
-          {`
-            .container {
-              position: relative;
-              min-width: ${config.widthAdjustment ? '90px' : 'auto'};
-              max-width: ${config.widthAdjustment ? '1024px' : 'none'};
-              ${config.widthAdjustment ? '' : `width: ${config.width}px;`}
-              padding: ${config.paddingVertical} ${config.paddingHorizontal};
-            }
 
-            .container :global(.watermark) {
-              fill-opacity: 0.75;
-              position: absolute;
-              z-index: 2;
-              bottom: calc(${config.paddingVertical} + 16px);
-              right: calc(${config.paddingHorizontal} + 16px);
-            }
+            {/* TODO pass in this child as a prop to Carbon */}
+            <WidthHandler
+              innerRef={props.innerRef}
+              onChange={props.updateWidth}
+              onChangeComplete={props.updateWidthConfirm}
+              paddingHorizontal={config.paddingHorizontal}
+              paddingVertical={config.paddingVertical}
+            />
+          </div>
+        )}
+      </div>
+      {selectionNode &&
+        ReactDOM.createPortal(
+          <SelectionEditor onChange={onSelectionChange} />,
+          // TODO: don't use portal?
+          selectionNode
+        )}
+      <style jsx>
+        {`
+          .container {
+            position: relative;
+            min-width: ${config.widthAdjustment ? '90px' : 'auto'};
+            max-width: ${config.widthAdjustment ? '1024px' : 'none'};
+            ${config.widthAdjustment ? '' : `width: ${config.width}px;`}
+            padding: ${config.paddingVertical} ${config.paddingHorizontal};
+          }
 
-            .container .container-bg {
-              position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-            }
+          .container :global(.watermark) {
+            fill-opacity: 0.75;
+            position: absolute;
+            z-index: 2;
+            bottom: calc(${config.paddingVertical} + 16px);
+            right: calc(${config.paddingHorizontal} + 16px);
+          }
 
-            .container .white {
-              background: #fff;
-              position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-            }
+          .container .container-bg {
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+          }
 
-            .container .bg {
-              ${this.props.config.backgroundMode === 'image'
-                ? `background: url(${backgroundImage});
-                    background-size: cover;
-                    background-repeat: no-repeat;`
-                : `background: ${this.props.config.backgroundColor || config.backgroundColor};
-                    background-size: auto;
-                    background-repeat: repeat;`}
-              position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-            }
+          .container .white {
+            background: #fff;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+          }
 
-            .container .alpha {
-              position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
-            }
+          .container .bg {
+            ${props.config.backgroundMode === 'image'
+              ? `background: url(${backgroundImage});
+                      background-size: cover;
+                      background-repeat: no-repeat;`
+              : `background: ${props.config.backgroundColor || config.backgroundColor};
+                      background-size: auto;
+                      background-repeat: repeat;`}
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+          }
 
-            .container :global(.CodeMirror-gutters) {
-              background-color: unset;
-              border-right: none;
-            }
+          .container .alpha {
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
+          }
 
-            .container :global(.CodeMirror__container) {
-              min-width: inherit;
-              position: relative;
-              z-index: 1;
-              border-radius: 5px;
-              ${config.dropShadow
-                ? `box-shadow: 0 ${config.dropShadowOffsetY} ${config.dropShadowBlurRadius} rgba(0, 0, 0, 0.55)`
-                : ''};
-            }
+          .container :global(.CodeMirror-gutters) {
+            background-color: unset;
+            border-right: none;
+          }
 
-            .container :global(.CodeMirror__container .CodeMirror) {
-              height: auto;
-              min-width: inherit;
-              padding: 18px 18px;
-              padding-left: 12px;
-              ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
-              font-family: ${config.fontFamily}, monospace !important;
-              font-size: ${config.fontSize};
-              line-height: ${config.lineHeight};
-              font-variant-ligatures: contextual;
-              font-feature-settings: 'calt' 1;
-              user-select: none;
-            }
+          .container :global(.CodeMirror__container) {
+            min-width: inherit;
+            position: relative;
+            z-index: 1;
+            border-radius: 5px;
+            ${config.dropShadow
+              ? `box-shadow: 0 ${config.dropShadowOffsetY} ${config.dropShadowBlurRadius} rgba(0, 0, 0, 0.55)`
+              : ''};
+          }
 
-            .container :global(.CodeMirror-scroll),
-            .container :global(.CodeMirror-hscrollbar) {
-              overflow: hidden !important;
-            }
+          .container :global(.CodeMirror__container .CodeMirror) {
+            height: auto;
+            min-width: inherit;
+            padding: 18px 18px;
+            padding-left: 12px;
+            ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
+            font-family: ${config.fontFamily}, monospace !important;
+            font-size: ${config.fontSize};
+            line-height: ${config.lineHeight};
+            font-variant-ligatures: contextual;
+            font-feature-settings: 'calt' 1;
+            user-select: none;
+          }
 
-            .container :global(.window-theme__sharp > .CodeMirror) {
-              border-radius: 0px;
-            }
+          .container :global(.CodeMirror-scroll),
+          .container :global(.CodeMirror-hscrollbar) {
+            overflow: hidden !important;
+          }
 
-            .container :global(.window-theme__bw > .CodeMirror) {
-              border: 2px solid ${COLORS.SECONDARY};
-            }
+          .container :global(.window-theme__sharp > .CodeMirror) {
+            border-radius: 0px;
+          }
 
-            .container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
-              padding-top: 48px;
-            }
+          .container :global(.window-theme__bw > .CodeMirror) {
+            border: 2px solid ${COLORS.SECONDARY};
+          }
 
-            .container :global(.CodeMirror-linenumber) {
-              cursor: pointer;
-            }
+          .container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
+            padding-top: 48px;
+          }
 
-            .container :global(.CodeMirror-cursor) {
-              visibility: ${this.props.readOnly ? 'hidden' : ''};
-            }
+          .container :global(.CodeMirror-linenumber) {
+            cursor: pointer;
+          }
 
-            @media (max-width: 768px) {
-              /* show cursor on mobile */
-              .container :global([contenteditable='true']) {
-                user-select: text;
-              }
-              .container {
-                max-width: 480px;
-              }
-            }
+          .container :global(.CodeMirror-cursor) {
+            visibility: ${props.readOnly ? 'hidden' : ''};
+          }
 
-            .section,
-            .export-container {
-              height: 100%;
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              overflow: hidden;
-              max-width: 100%;
+          @media (max-width: 768px) {
+            /* show cursor on mobile */
+            .container :global([contenteditable='true']) {
+              user-select: text;
             }
-          `}
-        </style>
-      </div>
-    )
-  }
+            .container {
+              max-width: 480px;
+            }
+          }
+
+          .section,
+          .export-container {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            max-width: 100%;
+          }
+        `}
+      </style>
+    </div>
+  )
 }
 
 let modesLoaded = false
diff --git a/package.json b/package.json
index 45db6d322..92716a44d 100644
--- a/package.json
+++ b/package.json
@@ -52,15 +52,15 @@
     "match-sorter": "^6.3.1",
     "morphmorph": "^0.1.3",
     "ms": "^2.1.3",
-    "next": "^12.1.6",
+    "next": "^12.2.3",
     "next-pwa": "^5.5.2",
     "prettier": "^2.6.2",
     "puppeteer-core": "^9.0.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-click-outside": "^3.0.0",
     "react-codemirror2": "^7.2.1",
     "react-color": "^2.19.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-image-crop": "^6.0.16",
     "tohash": "^1.0.2"
   },
diff --git a/yarn.lock b/yarn.lock
index bdba4b377..ce691e14d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1596,10 +1596,10 @@
   dependencies:
     webpack-bundle-analyzer "4.3.0"
 
-"@next/env@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.6.tgz#5f44823a78335355f00f1687cfc4f1dafa3eca08"
-  integrity sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA==
+"@next/env@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.3.tgz#64f210e74c137d3d9feea738795b055a7f8aebe2"
+  integrity sha512-2lWKP5Xcvnor70NaaROZXBvU8z9mFReePCG8NhZw6NyNGnPvC+8s+Cre/63LAB1LKzWw/e9bZJnQUg0gYFRb2Q==
 
 "@next/eslint-plugin-next@12.1.6":
   version "12.1.6"
@@ -1608,65 +1608,70 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-android-arm-eabi@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz#79a35349b98f2f8c038ab6261aa9cd0d121c03f9"
-  integrity sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==
-
-"@next/swc-android-arm64@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz#ec08ea61794f8752c8ebcacbed0aafc5b9407456"
-  integrity sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==
-
-"@next/swc-darwin-arm64@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz#d1053805615fd0706e9b1667893a72271cd87119"
-  integrity sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==
-
-"@next/swc-darwin-x64@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz#2d1b926a22f4c5230d5b311f9c56cfdcc406afec"
-  integrity sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==
-
-"@next/swc-linux-arm-gnueabihf@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz#c021918d2a94a17f823106a5e069335b8a19724f"
-  integrity sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==
-
-"@next/swc-linux-arm64-gnu@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz#ac55c07bfabde378dfa0ce2b8fc1c3b2897e81ae"
-  integrity sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==
-
-"@next/swc-linux-arm64-musl@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz#e429f826279894be9096be6bec13e75e3d6bd671"
-  integrity sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==
-
-"@next/swc-linux-x64-gnu@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz#1f276c0784a5ca599bfa34b2fcc0b38f3a738e08"
-  integrity sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==
-
-"@next/swc-linux-x64-musl@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz#1d9933dd6ba303dcfd8a2acd6ac7c27ed41e2eea"
-  integrity sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==
-
-"@next/swc-win32-arm64-msvc@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz#2ef9837f12ca652b1783d72ecb86208906042f02"
-  integrity sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==
-
-"@next/swc-win32-ia32-msvc@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz#74003d0aa1c59dfa56cb15481a5c607cbc0027b9"
-  integrity sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==
-
-"@next/swc-win32-x64-msvc@12.1.6":
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz#a350caf42975e7197b24b495b8d764eec7e6a36e"
-  integrity sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==
+"@next/swc-android-arm-eabi@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.3.tgz#91388c8ec117d59ee80d2c1d4dc65fdfd267d2d4"
+  integrity sha512-JxmCW9XB5PYnkGE67BdnBTdqW0SW6oMCiPMHLdjeRi4T3U4JJKJGnjQld99+6TPOfPWigtw3W7Cijp5gc+vJ/w==
+
+"@next/swc-android-arm64@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.2.3.tgz#9be33553861f6494616b910a23abd5a1b0d7fb4b"
+  integrity sha512-3l4zXpWnzy0fqoedsFRxzMy/eGlMMqn6IwPEuBmtEQ4h7srmQFHyT+Bk+eVHb0o1RQ7/TloAa+mu8JX5tz/5tA==
+
+"@next/swc-darwin-arm64@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.3.tgz#ce1a5a7320936b2644b765ace3283e5d1676b6a0"
+  integrity sha512-eutDO/RH6pf7+8zHo3i2GKLhF0qaMtxWpY8k3Oa1k+CyrcJ0IxwkfH/x3f75jTMeCrThn6Uu8j3WeZOxvhto1Q==
+
+"@next/swc-darwin-x64@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.3.tgz#f70ce07016501c6f823035bc67296b8f80201145"
+  integrity sha512-lve+lnTiddXbcT3Lh2ujOFywQSEycTYQhuf6j6JrPu9oLQGS01kjIqqSj3/KMmSoppEnXo3BxkgYu+g2+ecHkA==
+
+"@next/swc-freebsd-x64@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.3.tgz#ccc6fa4588dadec85458091aa19c17bc3e99a10d"
+  integrity sha512-V4bZU1qBFkULTPW53phY8ypioh3EERzHu9YKAasm9RxU4dj+8c/4s60y+kbFkFEEpIUgEU6yNuYZRR4lHHbUGA==
+
+"@next/swc-linux-arm-gnueabihf@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.3.tgz#d7a481d3ede14dee85707d0807b4a05cd2300950"
+  integrity sha512-MWxS/i+XSEKdQE0ZmdYkPPrWKBi4JwMVaXdOW9J/T/sZJsHsLlSC9ErBcNolKAJEVka+tnw9oPRyRCKOj+q0sw==
+
+"@next/swc-linux-arm64-gnu@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.3.tgz#6d105c971cc0957c25563aa98af475291b4cd8aa"
+  integrity sha512-ikXkqAmvEcWTzIQFDdmrUHLWzdDAF5s2pVsSpQn9rk/gK1i9webH1GRQd2bSM7JLuPBZSaYrNGvDTyHZdSEYlg==
+
+"@next/swc-linux-arm64-musl@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.3.tgz#bebfe490130e3cb8746a03d35a5a9e23ac0e6f9b"
+  integrity sha512-wE45gGFkeLLLnCoveKaBrdpYkkypl3qwNF2YhnfvfVK7etuu1O679LwClhCWinDVBr+KOkmyHok00Z+0uI1ycg==
+
+"@next/swc-linux-x64-gnu@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.3.tgz#84a3d99f9d656fbc139f3a19f9b1baf73877d18f"
+  integrity sha512-MbFI6413VSXiREzHwYD8YAJLTknBaC+bmjXgdHEEdloeOuBFQGE3NWn3izOCTy8kV+s98VDQO8au7EKKs+bW0g==
+
+"@next/swc-linux-x64-musl@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.3.tgz#a283431f8c6c830b4bd61147094f150ea7deeb6e"
+  integrity sha512-jMBD0Va6fInbPih/dNySlNY2RpjkK6MXS+UGVEvuTswl1MZr+iahvurmshwGKpjaRwVU4DSFMD8+gfWxsTFs1Q==
+
+"@next/swc-win32-arm64-msvc@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.3.tgz#bab9ba8736d81db128badb70024268469eaa9b34"
+  integrity sha512-Cq8ToPdc0jQP2C7pjChYctAsEe7+lO/B826ZCK5xFzobuHPiCyJ2Mzx/nEQwCY4SpYkeJQtCbwlCz5iyGW5zGg==
+
+"@next/swc-win32-ia32-msvc@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.3.tgz#feea6ada1ba3e897f39ded9f2de5006f4e1c928b"
+  integrity sha512-BtFq4c8IpeB0sDhJMHJFgm86rPkOvmYI8k3De8Y2kgNVWSeLQ0Q929PWf7e+GqcX1015ei/gEB41ZH8Iw49NzA==
+
+"@next/swc-win32-x64-msvc@12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.3.tgz#403e1575a84c31cbd7f3c0ecd51b61bc25b7f808"
+  integrity sha512-huSNb98KSG77Kl96CoPgCwom28aamuUsPpRmn/4s9L0RNbbHVSkp9E6HA4yOAykZCEuWcdNsRLbVVuAbt8rtIw==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1870,6 +1875,13 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@swc/helpers@0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.3.tgz#16593dfc248c53b699d4b5026040f88ddb497012"
+  integrity sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==
+  dependencies:
+    tslib "^2.4.0"
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -5942,10 +5954,10 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-nanoid@^3.1.30:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
-  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 napi-build-utils@^1.0.1:
   version "1.0.2"
@@ -5983,28 +5995,31 @@ next-pwa@^5.5.2:
     workbox-webpack-plugin "^6.5.3"
     workbox-window "^6.5.3"
 
-next@^12.1.6:
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.6.tgz#eb205e64af1998651f96f9df44556d47d8bbc533"
-  integrity sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==
+next@^12.2.3:
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.2.3.tgz#c29d235ce480e589894dfab3120dade25d015a22"
+  integrity sha512-TA0tmSA6Dk6S6kfvCNbF7CWYW8468gZUxr/3/30z4KvAQbXnl2ASYZElVe7q/hBW/1F1ee0tSBlHa4/sn+ZIBw==
   dependencies:
-    "@next/env" "12.1.6"
+    "@next/env" "12.2.3"
+    "@swc/helpers" "0.4.3"
     caniuse-lite "^1.0.30001332"
-    postcss "8.4.5"
+    postcss "8.4.14"
     styled-jsx "5.0.2"
+    use-sync-external-store "1.2.0"
   optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.1.6"
-    "@next/swc-android-arm64" "12.1.6"
-    "@next/swc-darwin-arm64" "12.1.6"
-    "@next/swc-darwin-x64" "12.1.6"
-    "@next/swc-linux-arm-gnueabihf" "12.1.6"
-    "@next/swc-linux-arm64-gnu" "12.1.6"
-    "@next/swc-linux-arm64-musl" "12.1.6"
-    "@next/swc-linux-x64-gnu" "12.1.6"
-    "@next/swc-linux-x64-musl" "12.1.6"
-    "@next/swc-win32-arm64-msvc" "12.1.6"
-    "@next/swc-win32-ia32-msvc" "12.1.6"
-    "@next/swc-win32-x64-msvc" "12.1.6"
+    "@next/swc-android-arm-eabi" "12.2.3"
+    "@next/swc-android-arm64" "12.2.3"
+    "@next/swc-darwin-arm64" "12.2.3"
+    "@next/swc-darwin-x64" "12.2.3"
+    "@next/swc-freebsd-x64" "12.2.3"
+    "@next/swc-linux-arm-gnueabihf" "12.2.3"
+    "@next/swc-linux-arm64-gnu" "12.2.3"
+    "@next/swc-linux-arm64-musl" "12.2.3"
+    "@next/swc-linux-x64-gnu" "12.2.3"
+    "@next/swc-linux-x64-musl" "12.2.3"
+    "@next/swc-win32-arm64-msvc" "12.2.3"
+    "@next/swc-win32-ia32-msvc" "12.2.3"
+    "@next/swc-win32-x64-msvc" "12.2.3"
 
 node-abi@^3.3.0:
   version "3.22.0"
@@ -6563,14 +6578,14 @@ postcss-value-parser@4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@8.4.5:
-  version "8.4.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
-  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
   dependencies:
-    nanoid "^3.1.30"
+    nanoid "^3.3.4"
     picocolors "^1.0.0"
-    source-map-js "^1.0.1"
+    source-map-js "^1.0.2"
 
 prebuild-install@^7.1.0:
   version "7.1.0"
@@ -6815,14 +6830,13 @@ react-color@^2.19.3:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-dropzone@^8.0.3:
   version "8.2.0"
@@ -6872,13 +6886,12 @@ react-router@6.3.0:
   dependencies:
     history "^5.2.0"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -7187,13 +7200,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^2.6.5:
   version "2.7.1"
@@ -7411,7 +7423,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.1:
+source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -7859,7 +7871,7 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.1, tslib@^2.1.0:
+tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@@ -8060,6 +8072,11 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"