@codecademy/codebytes 1.0.3-alpha.9ea661470.0 → 1.0.4-alpha.49041f645.0

package/dist/index.js

@@ -1,3 +1,741 @@
-export * from './codeByteEditor';
-export * from './consts';
-export * from './types';
+import _styled from '@emotion/styled/base';
+import { FlexBox, IconButton, ToolTip, TextButton, FillButton, Spinner, Text, Select, Box } from '@codecademy/gamut';
+import { ArrowChevronLeftIcon, ArrowChevronRightIcon, CopyIcon, FaviconIcon } from '@codecademy/gamut-icons';
+import { editorColors, colors, ColorMode, system, Background } from '@codecademy/gamut-styles';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { createTracker } from '@codecademy/tracking';
+import ReactMonacoEditor from '@monaco-editor/react';
+import ResizeObserver from 'react-resize-observer';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+// key = language param to send to snippets service
+// val = label in language selection drop down
+const LanguageOptions = {
+  '': 'Select a language',
+  cpp: 'C++',
+  csharp: 'C#',
+  golang: 'Go',
+  javascript: 'JavaScript',
+  php: 'PHP',
+  python: 'Python 3',
+  ruby: 'Ruby',
+  scheme: 'Scheme'
+};
+const validLanguages = Object.keys(LanguageOptions).filter(option => !!option);
+const cpp = `#include <iostream>
+int main() {
+  std::cout << "Hello world!";
+  return 0;
+}`;
+const csharp = `namespace HelloWorld {
+  class Hello {
+    static void Main(string[] args) {
+      System.Console.WriteLine("Hello world!");
+    }
+  }
+}`;
+const golang = `package main
+import "fmt"
+func main() {
+  fmt.Println("Hello world!")
+}`;
+const javascript = "console.log('Hello world!');";
+const php = `<?php
+  echo "Hello world!";
+?>`;
+const python = "print('Hello world!')";
+const ruby = 'puts "Hello world!"';
+const scheme = `(begin
+  (display "Hello world!")
+  (newline))`;
+const helloWorld = {
+  cpp,
+  csharp,
+  golang,
+  javascript,
+  php,
+  python,
+  ruby,
+  scheme
+};
+
+const postSnippet = async (data, snippetsBaseUrl) => {
+  const snippetsEndpoint = `https://${snippetsBaseUrl}/snippets`;
+  const response = await fetch(snippetsEndpoint, {
+    method: 'POST',
+    body: JSON.stringify(data),
+    headers: {
+      'x-codecademy-user-id': 'codebytes-anon-user'
+    }
+  });
+  return response.json();
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const DrawerLabel = _styled("span", {
+  target: "e1keub6a2",
+  label: "DrawerLabel"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1u2ibt9",
+  styles: "padding:0.875rem 0.5rem"
+} : {
+  name: "1u2ibt9",
+  styles: "padding:0.875rem 0.5rem",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyYXdlcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQyIsImZpbGUiOiJkcmF3ZXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZsZXhCb3gsIEljb25CdXR0b24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XHJcbmltcG9ydCB7IEFycm93Q2hldnJvbkxlZnRJY29uLCBBcnJvd0NoZXZyb25SaWdodEljb24sIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcclxuY29uc3QgRHJhd2VyTGFiZWwgPSBzdHlsZWQuc3BhbiBgXG4gIHBhZGRpbmc6IDAuODc1cmVtIDAuNXJlbTtcbmA7XHJcbmNvbnN0IExlZnREcmF3ZXJJY29uID0gc3R5bGVkKEFycm93Q2hldnJvbkxlZnRJY29uKSBgXG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2UtaW4tb3V0O1xuYDtcclxuY29uc3QgUmlnaHREcmF3ZXJJY29uID0gTGVmdERyYXdlckljb24ud2l0aENvbXBvbmVudChBcnJvd0NoZXZyb25SaWdodEljb24pO1xyXG5jb25zdCBEcmF3ZXIgPSBzdHlsZWQoRmxleEJveCkgYFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICR7KHsgb3BlbiwgaGlkZU9uQ2xvc2UgfSkgPT4gYFxuICAgIGZsZXgtYmFzaXM6ICR7b3BlbiA/ICcxMDAlJyA6ICcwJSd9O1xuICAgIHZpc2liaWxpdHk6ICR7IW9wZW4gJiYgaGlkZU9uQ2xvc2UgPyAnaGlkZGVuJyA6ICd2aXNpYmxlJ307XG4gICAgdHJhbnNpdGlvbjogZmxleC1iYXNpcyAwLjJzICR7b3BlbiA/ICdlYXNlLW91dCcgOiAnZWFzZS1pbiwgdmlzaWJpbGl0eSAwcyAwLjJzJ307XG5cbiAgICAke0xlZnREcmF3ZXJJY29ufSwgJHtSaWdodERyYXdlckljb259IHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlWigke29wZW4gPyAnMCcgOiAnMTgwJ31kZWcpfTtcbiAgICB9XG4gIGB9XG5gO1xyXG5leHBvcnQgY29uc3QgRHJhd2VycyA9ICh7IGxlZnRDaGlsZCwgcmlnaHRDaGlsZCB9KSA9PiB7XHJcbiAgICBjb25zdCBbb3Blbiwgc2V0T3Blbl0gPSB1c2VTdGF0ZSgnYm90aCcpO1xyXG4gICAgbGV0IGFyaWFMYWJlbENvZGVCdXR0b24gPSAnaGlkZSBjb2RlJztcclxuICAgIGxldCBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnaGlkZSBvdXRwdXQnO1xyXG4gICAgbGV0IGlzTGVmdE9wZW4gPSBmYWxzZTtcclxuICAgIGxldCBpc1JpZ2h0T3BlbiA9IGZhbHNlO1xyXG4gICAgaWYgKG9wZW4gPT09ICdsZWZ0Jykge1xyXG4gICAgICAgIGFyaWFMYWJlbENvZGVCdXR0b24gPSBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnc2hvdyBvdXRwdXQnO1xyXG4gICAgICAgIGlzTGVmdE9wZW4gPSB0cnVlO1xyXG4gICAgfVxyXG4gICAgZWxzZSBpZiAob3BlbiA9PT0gJ3JpZ2h0Jykge1xyXG4gICAgICAgIGFyaWFMYWJlbENvZGVCdXR0b24gPSBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnc2hvdyBjb2RlJztcclxuICAgICAgICBpc1JpZ2h0T3BlbiA9IHRydWU7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gKFJlYWN0LmNyZWF0ZUVsZW1lbnQoUmVhY3QuRnJhZ21lbnQsIG51bGwsXHJcbiAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChGbGV4Qm94LCBudWxsLFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBvcGVuOiAhaXNSaWdodE9wZW4sIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsIGZsZXhXcmFwOiBcIm5vd3JhcFwiLCB0ZXh0QWxpZ246IFwibGVmdFwiLCBib3JkZXJSaWdodDogMSwgYm9yZGVyQ29sb3I6IFwiZ3JheS05MDBcIiwgcHg6IDggfSxcclxuICAgICAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoSWNvbkJ1dHRvbiwgeyBpY29uOiBMZWZ0RHJhd2VySWNvbiwgdmFyaWFudDogXCJzZWNvbmRhcnlcIiwgc2l6ZTogXCJzbWFsbFwiLCBvbkNsaWNrOiAoKSA9PiBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAncmlnaHQnIDogJ2JvdGgnKSksIFwiYXJpYS1sYWJlbFwiOiBhcmlhTGFiZWxDb2RlQnV0dG9uLCBcImFyaWEtY29udHJvbHNcIjogXCJjb2RlLWRyYXdlclwiLCBcImFyaWEtZXhwYW5kZWRcIjogIWlzUmlnaHRPcGVuIH0pLFxyXG4gICAgICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChEcmF3ZXJMYWJlbCwgeyBpZDogXCJjb2RlLWRyYXdlci1sYWJlbFwiIH0sIFwiQ29kZVwiKSksXHJcbiAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRHJhd2VyLCB7IG9wZW46ICFpc0xlZnRPcGVuLCBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLCBmbGV4V3JhcDogXCJub3dyYXBcIiwganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1lbmRcIiwgcHg6IDggfSxcclxuICAgICAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRHJhd2VyTGFiZWwsIHsgaWQ6IFwib3V0cHV0LWRyYXdlci1sYWJlbFwiIH0sIFwiT3V0cHV0XCIpLFxyXG4gICAgICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChJY29uQnV0dG9uLCB7IGljb246IFJpZ2h0RHJhd2VySWNvbiwgdmFyaWFudDogXCJzZWNvbmRhcnlcIiwgc2l6ZTogXCJzbWFsbFwiLCBvbkNsaWNrOiAoKSA9PiBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAnbGVmdCcgOiAnYm90aCcpKSwgXCJhcmlhLWxhYmVsXCI6IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiwgXCJhcmlhLWNvbnRyb2xzXCI6IFwib3V0cHV0LWRyYXdlclwiLCBcImFyaWEtZXhwYW5kZWRcIjogIWlzTGVmdE9wZW4gfSkpKSxcclxuICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KEZsZXhCb3gsIHsgZmxleEdyb3c6IDEsIGJvcmRlclk6IDEsIGJvcmRlckNvbG9yOiBcImdyYXktOTAwXCIsIGFsaWduSXRlbXM6IFwic3RyZXRjaFwiLCBvdmVyZmxvdzogXCJoaWRkZW5cIiB9LFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBoaWRlT25DbG9zZTogdHJ1ZSwgaWQ6IFwiY29kZS1kcmF3ZXJcIiwgXCJhcmlhLWxhYmVsbGVkYnlcIjogXCJjb2RlLWRyYXdlci1sYWJlbFwiLCBvcGVuOiAhaXNSaWdodE9wZW4sIGZsZXhHcm93OiAwLCBvdmVyZmxvdzogXCJoaWRkZW5cIiwgYm9yZGVyQ29sb3I6IFwiZ3JheS05MDBcIiwgYm9yZGVyU3R5bGVSaWdodDogXCJzb2xpZFwiLCBib3JkZXJXaWR0aFJpZ2h0OiBcInRoaW5cIiB9LCBsZWZ0Q2hpbGQpLFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBoaWRlT25DbG9zZTogdHJ1ZSwgaWQ6IFwib3V0cHV0LWRyYXdlclwiLCBcImFyaWEtbGFiZWxsZWRieVwiOiBcIm91dHB1dC1kcmF3ZXItbGFiZWxcIiwgcm9sZTogXCJyZWdpb25cIiwgb3BlbjogIWlzTGVmdE9wZW4sIG92ZXJmbG93OiBcImhpZGRlblwiIH0sIHJpZ2h0Q2hpbGQpKSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1kcmF3ZXJzLmpzLm1hcCJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+});
+
+const LeftDrawerIcon = /*#__PURE__*/_styled(ArrowChevronLeftIcon, {
+  target: "e1keub6a1",
+  label: "LeftDrawerIcon"
+})(process.env.NODE_ENV === "production" ? {
+  name: "jlwh11",
+  styles: "transition:transform 0.2s ease-in-out"
+} : {
+  name: "jlwh11",
+  styles: "transition:transform 0.2s ease-in-out",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyYXdlcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9vRCIsImZpbGUiOiJkcmF3ZXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZsZXhCb3gsIEljb25CdXR0b24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XHJcbmltcG9ydCB7IEFycm93Q2hldnJvbkxlZnRJY29uLCBBcnJvd0NoZXZyb25SaWdodEljb24sIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcclxuY29uc3QgRHJhd2VyTGFiZWwgPSBzdHlsZWQuc3BhbiBgXG4gIHBhZGRpbmc6IDAuODc1cmVtIDAuNXJlbTtcbmA7XHJcbmNvbnN0IExlZnREcmF3ZXJJY29uID0gc3R5bGVkKEFycm93Q2hldnJvbkxlZnRJY29uKSBgXG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2UtaW4tb3V0O1xuYDtcclxuY29uc3QgUmlnaHREcmF3ZXJJY29uID0gTGVmdERyYXdlckljb24ud2l0aENvbXBvbmVudChBcnJvd0NoZXZyb25SaWdodEljb24pO1xyXG5jb25zdCBEcmF3ZXIgPSBzdHlsZWQoRmxleEJveCkgYFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICR7KHsgb3BlbiwgaGlkZU9uQ2xvc2UgfSkgPT4gYFxuICAgIGZsZXgtYmFzaXM6ICR7b3BlbiA/ICcxMDAlJyA6ICcwJSd9O1xuICAgIHZpc2liaWxpdHk6ICR7IW9wZW4gJiYgaGlkZU9uQ2xvc2UgPyAnaGlkZGVuJyA6ICd2aXNpYmxlJ307XG4gICAgdHJhbnNpdGlvbjogZmxleC1iYXNpcyAwLjJzICR7b3BlbiA/ICdlYXNlLW91dCcgOiAnZWFzZS1pbiwgdmlzaWJpbGl0eSAwcyAwLjJzJ307XG5cbiAgICAke0xlZnREcmF3ZXJJY29ufSwgJHtSaWdodERyYXdlckljb259IHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlWigke29wZW4gPyAnMCcgOiAnMTgwJ31kZWcpfTtcbiAgICB9XG4gIGB9XG5gO1xyXG5leHBvcnQgY29uc3QgRHJhd2VycyA9ICh7IGxlZnRDaGlsZCwgcmlnaHRDaGlsZCB9KSA9PiB7XHJcbiAgICBjb25zdCBbb3Blbiwgc2V0T3Blbl0gPSB1c2VTdGF0ZSgnYm90aCcpO1xyXG4gICAgbGV0IGFyaWFMYWJlbENvZGVCdXR0b24gPSAnaGlkZSBjb2RlJztcclxuICAgIGxldCBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnaGlkZSBvdXRwdXQnO1xyXG4gICAgbGV0IGlzTGVmdE9wZW4gPSBmYWxzZTtcclxuICAgIGxldCBpc1JpZ2h0T3BlbiA9IGZhbHNlO1xyXG4gICAgaWYgKG9wZW4gPT09ICdsZWZ0Jykge1xyXG4gICAgICAgIGFyaWFMYWJlbENvZGVCdXR0b24gPSBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnc2hvdyBvdXRwdXQnO1xyXG4gICAgICAgIGlzTGVmdE9wZW4gPSB0cnVlO1xyXG4gICAgfVxyXG4gICAgZWxzZSBpZiAob3BlbiA9PT0gJ3JpZ2h0Jykge1xyXG4gICAgICAgIGFyaWFMYWJlbENvZGVCdXR0b24gPSBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnc2hvdyBjb2RlJztcclxuICAgICAgICBpc1JpZ2h0T3BlbiA9IHRydWU7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gKFJlYWN0LmNyZWF0ZUVsZW1lbnQoUmVhY3QuRnJhZ21lbnQsIG51bGwsXHJcbiAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChGbGV4Qm94LCBudWxsLFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBvcGVuOiAhaXNSaWdodE9wZW4sIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsIGZsZXhXcmFwOiBcIm5vd3JhcFwiLCB0ZXh0QWxpZ246IFwibGVmdFwiLCBib3JkZXJSaWdodDogMSwgYm9yZGVyQ29sb3I6IFwiZ3JheS05MDBcIiwgcHg6IDggfSxcclxuICAgICAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoSWNvbkJ1dHRvbiwgeyBpY29uOiBMZWZ0RHJhd2VySWNvbiwgdmFyaWFudDogXCJzZWNvbmRhcnlcIiwgc2l6ZTogXCJzbWFsbFwiLCBvbkNsaWNrOiAoKSA9PiBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAncmlnaHQnIDogJ2JvdGgnKSksIFwiYXJpYS1sYWJlbFwiOiBhcmlhTGFiZWxDb2RlQnV0dG9uLCBcImFyaWEtY29udHJvbHNcIjogXCJjb2RlLWRyYXdlclwiLCBcImFyaWEtZXhwYW5kZWRcIjogIWlzUmlnaHRPcGVuIH0pLFxyXG4gICAgICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChEcmF3ZXJMYWJlbCwgeyBpZDogXCJjb2RlLWRyYXdlci1sYWJlbFwiIH0sIFwiQ29kZVwiKSksXHJcbiAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRHJhd2VyLCB7IG9wZW46ICFpc0xlZnRPcGVuLCBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLCBmbGV4V3JhcDogXCJub3dyYXBcIiwganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1lbmRcIiwgcHg6IDggfSxcclxuICAgICAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRHJhd2VyTGFiZWwsIHsgaWQ6IFwib3V0cHV0LWRyYXdlci1sYWJlbFwiIH0sIFwiT3V0cHV0XCIpLFxyXG4gICAgICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChJY29uQnV0dG9uLCB7IGljb246IFJpZ2h0RHJhd2VySWNvbiwgdmFyaWFudDogXCJzZWNvbmRhcnlcIiwgc2l6ZTogXCJzbWFsbFwiLCBvbkNsaWNrOiAoKSA9PiBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAnbGVmdCcgOiAnYm90aCcpKSwgXCJhcmlhLWxhYmVsXCI6IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiwgXCJhcmlhLWNvbnRyb2xzXCI6IFwib3V0cHV0LWRyYXdlclwiLCBcImFyaWEtZXhwYW5kZWRcIjogIWlzTGVmdE9wZW4gfSkpKSxcclxuICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KEZsZXhCb3gsIHsgZmxleEdyb3c6IDEsIGJvcmRlclk6IDEsIGJvcmRlckNvbG9yOiBcImdyYXktOTAwXCIsIGFsaWduSXRlbXM6IFwic3RyZXRjaFwiLCBvdmVyZmxvdzogXCJoaWRkZW5cIiB9LFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBoaWRlT25DbG9zZTogdHJ1ZSwgaWQ6IFwiY29kZS1kcmF3ZXJcIiwgXCJhcmlhLWxhYmVsbGVkYnlcIjogXCJjb2RlLWRyYXdlci1sYWJlbFwiLCBvcGVuOiAhaXNSaWdodE9wZW4sIGZsZXhHcm93OiAwLCBvdmVyZmxvdzogXCJoaWRkZW5cIiwgYm9yZGVyQ29sb3I6IFwiZ3JheS05MDBcIiwgYm9yZGVyU3R5bGVSaWdodDogXCJzb2xpZFwiLCBib3JkZXJXaWR0aFJpZ2h0OiBcInRoaW5cIiB9LCBsZWZ0Q2hpbGQpLFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBoaWRlT25DbG9zZTogdHJ1ZSwgaWQ6IFwib3V0cHV0LWRyYXdlclwiLCBcImFyaWEtbGFiZWxsZWRieVwiOiBcIm91dHB1dC1kcmF3ZXItbGFiZWxcIiwgcm9sZTogXCJyZWdpb25cIiwgb3BlbjogIWlzTGVmdE9wZW4sIG92ZXJmbG93OiBcImhpZGRlblwiIH0sIHJpZ2h0Q2hpbGQpKSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1kcmF3ZXJzLmpzLm1hcCJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+});
+
+const RightDrawerIcon = LeftDrawerIcon.withComponent(ArrowChevronRightIcon, {
+  target: "e1keub6a3",
+  label: "RightDrawerIcon"
+});
+
+const Drawer = /*#__PURE__*/_styled(FlexBox, {
+  target: "e1keub6a0",
+  label: "Drawer"
+})("position:relative;", ({
+  open,
+  hideOnClose
+}) => `
+    flex-basis: ${open ? '100%' : '0%'};
+    visibility: ${!open && hideOnClose ? 'hidden' : 'visible'};
+    transition: flex-basis 0.2s ${open ? 'ease-out' : 'ease-in, visibility 0s 0.2s'};
+
+    ${LeftDrawerIcon}, ${RightDrawerIcon} {
+      transform: rotateZ(${open ? '0' : '180'}deg)};
+    }
+  `, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyYXdlcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcrQiIsImZpbGUiOiJkcmF3ZXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZsZXhCb3gsIEljb25CdXR0b24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XHJcbmltcG9ydCB7IEFycm93Q2hldnJvbkxlZnRJY29uLCBBcnJvd0NoZXZyb25SaWdodEljb24sIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcclxuY29uc3QgRHJhd2VyTGFiZWwgPSBzdHlsZWQuc3BhbiBgXG4gIHBhZGRpbmc6IDAuODc1cmVtIDAuNXJlbTtcbmA7XHJcbmNvbnN0IExlZnREcmF3ZXJJY29uID0gc3R5bGVkKEFycm93Q2hldnJvbkxlZnRJY29uKSBgXG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2UtaW4tb3V0O1xuYDtcclxuY29uc3QgUmlnaHREcmF3ZXJJY29uID0gTGVmdERyYXdlckljb24ud2l0aENvbXBvbmVudChBcnJvd0NoZXZyb25SaWdodEljb24pO1xyXG5jb25zdCBEcmF3ZXIgPSBzdHlsZWQoRmxleEJveCkgYFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICR7KHsgb3BlbiwgaGlkZU9uQ2xvc2UgfSkgPT4gYFxuICAgIGZsZXgtYmFzaXM6ICR7b3BlbiA/ICcxMDAlJyA6ICcwJSd9O1xuICAgIHZpc2liaWxpdHk6ICR7IW9wZW4gJiYgaGlkZU9uQ2xvc2UgPyAnaGlkZGVuJyA6ICd2aXNpYmxlJ307XG4gICAgdHJhbnNpdGlvbjogZmxleC1iYXNpcyAwLjJzICR7b3BlbiA/ICdlYXNlLW91dCcgOiAnZWFzZS1pbiwgdmlzaWJpbGl0eSAwcyAwLjJzJ307XG5cbiAgICAke0xlZnREcmF3ZXJJY29ufSwgJHtSaWdodERyYXdlckljb259IHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlWigke29wZW4gPyAnMCcgOiAnMTgwJ31kZWcpfTtcbiAgICB9XG4gIGB9XG5gO1xyXG5leHBvcnQgY29uc3QgRHJhd2VycyA9ICh7IGxlZnRDaGlsZCwgcmlnaHRDaGlsZCB9KSA9PiB7XHJcbiAgICBjb25zdCBbb3Blbiwgc2V0T3Blbl0gPSB1c2VTdGF0ZSgnYm90aCcpO1xyXG4gICAgbGV0IGFyaWFMYWJlbENvZGVCdXR0b24gPSAnaGlkZSBjb2RlJztcclxuICAgIGxldCBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnaGlkZSBvdXRwdXQnO1xyXG4gICAgbGV0IGlzTGVmdE9wZW4gPSBmYWxzZTtcclxuICAgIGxldCBpc1JpZ2h0T3BlbiA9IGZhbHNlO1xyXG4gICAgaWYgKG9wZW4gPT09ICdsZWZ0Jykge1xyXG4gICAgICAgIGFyaWFMYWJlbENvZGVCdXR0b24gPSBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnc2hvdyBvdXRwdXQnO1xyXG4gICAgICAgIGlzTGVmdE9wZW4gPSB0cnVlO1xyXG4gICAgfVxyXG4gICAgZWxzZSBpZiAob3BlbiA9PT0gJ3JpZ2h0Jykge1xyXG4gICAgICAgIGFyaWFMYWJlbENvZGVCdXR0b24gPSBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnc2hvdyBjb2RlJztcclxuICAgICAgICBpc1JpZ2h0T3BlbiA9IHRydWU7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gKFJlYWN0LmNyZWF0ZUVsZW1lbnQoUmVhY3QuRnJhZ21lbnQsIG51bGwsXHJcbiAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChGbGV4Qm94LCBudWxsLFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBvcGVuOiAhaXNSaWdodE9wZW4sIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsIGZsZXhXcmFwOiBcIm5vd3JhcFwiLCB0ZXh0QWxpZ246IFwibGVmdFwiLCBib3JkZXJSaWdodDogMSwgYm9yZGVyQ29sb3I6IFwiZ3JheS05MDBcIiwgcHg6IDggfSxcclxuICAgICAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoSWNvbkJ1dHRvbiwgeyBpY29uOiBMZWZ0RHJhd2VySWNvbiwgdmFyaWFudDogXCJzZWNvbmRhcnlcIiwgc2l6ZTogXCJzbWFsbFwiLCBvbkNsaWNrOiAoKSA9PiBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAncmlnaHQnIDogJ2JvdGgnKSksIFwiYXJpYS1sYWJlbFwiOiBhcmlhTGFiZWxDb2RlQnV0dG9uLCBcImFyaWEtY29udHJvbHNcIjogXCJjb2RlLWRyYXdlclwiLCBcImFyaWEtZXhwYW5kZWRcIjogIWlzUmlnaHRPcGVuIH0pLFxyXG4gICAgICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChEcmF3ZXJMYWJlbCwgeyBpZDogXCJjb2RlLWRyYXdlci1sYWJlbFwiIH0sIFwiQ29kZVwiKSksXHJcbiAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRHJhd2VyLCB7IG9wZW46ICFpc0xlZnRPcGVuLCBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLCBmbGV4V3JhcDogXCJub3dyYXBcIiwganVzdGlmeUNvbnRlbnQ6IFwiZmxleC1lbmRcIiwgcHg6IDggfSxcclxuICAgICAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRHJhd2VyTGFiZWwsIHsgaWQ6IFwib3V0cHV0LWRyYXdlci1sYWJlbFwiIH0sIFwiT3V0cHV0XCIpLFxyXG4gICAgICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChJY29uQnV0dG9uLCB7IGljb246IFJpZ2h0RHJhd2VySWNvbiwgdmFyaWFudDogXCJzZWNvbmRhcnlcIiwgc2l6ZTogXCJzbWFsbFwiLCBvbkNsaWNrOiAoKSA9PiBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAnbGVmdCcgOiAnYm90aCcpKSwgXCJhcmlhLWxhYmVsXCI6IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiwgXCJhcmlhLWNvbnRyb2xzXCI6IFwib3V0cHV0LWRyYXdlclwiLCBcImFyaWEtZXhwYW5kZWRcIjogIWlzTGVmdE9wZW4gfSkpKSxcclxuICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KEZsZXhCb3gsIHsgZmxleEdyb3c6IDEsIGJvcmRlclk6IDEsIGJvcmRlckNvbG9yOiBcImdyYXktOTAwXCIsIGFsaWduSXRlbXM6IFwic3RyZXRjaFwiLCBvdmVyZmxvdzogXCJoaWRkZW5cIiB9LFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBoaWRlT25DbG9zZTogdHJ1ZSwgaWQ6IFwiY29kZS1kcmF3ZXJcIiwgXCJhcmlhLWxhYmVsbGVkYnlcIjogXCJjb2RlLWRyYXdlci1sYWJlbFwiLCBvcGVuOiAhaXNSaWdodE9wZW4sIGZsZXhHcm93OiAwLCBvdmVyZmxvdzogXCJoaWRkZW5cIiwgYm9yZGVyQ29sb3I6IFwiZ3JheS05MDBcIiwgYm9yZGVyU3R5bGVSaWdodDogXCJzb2xpZFwiLCBib3JkZXJXaWR0aFJpZ2h0OiBcInRoaW5cIiB9LCBsZWZ0Q2hpbGQpLFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlciwgeyBoaWRlT25DbG9zZTogdHJ1ZSwgaWQ6IFwib3V0cHV0LWRyYXdlclwiLCBcImFyaWEtbGFiZWxsZWRieVwiOiBcIm91dHB1dC1kcmF3ZXItbGFiZWxcIiwgcm9sZTogXCJyZWdpb25cIiwgb3BlbjogIWlzTGVmdE9wZW4sIG92ZXJmbG93OiBcImhpZGRlblwiIH0sIHJpZ2h0Q2hpbGQpKSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1kcmF3ZXJzLmpzLm1hcCJdfQ== */"));
+
+const Drawers = ({
+  leftChild,
+  rightChild
+}) => {
+  const [open, setOpen] = useState('both');
+  let ariaLabelCodeButton = 'hide code';
+  let ariaLabelOutputButton = 'hide output';
+  let isLeftOpen = false;
+  let isRightOpen = false;
+
+  if (open === 'left') {
+    ariaLabelCodeButton = ariaLabelOutputButton = 'show output';
+    isLeftOpen = true;
+  } else if (open === 'right') {
+    ariaLabelCodeButton = ariaLabelOutputButton = 'show code';
+    isRightOpen = true;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlexBox, null, /*#__PURE__*/React.createElement(Drawer, {
+    open: !isRightOpen,
+    alignItems: "center",
+    flexWrap: "nowrap",
+    textAlign: "left",
+    borderRight: 1,
+    borderColor: "gray-900",
+    px: 8
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: LeftDrawerIcon,
+    variant: "secondary",
+    size: "small",
+    onClick: () => setOpen(state => state === 'both' ? 'right' : 'both'),
+    "aria-label": ariaLabelCodeButton,
+    "aria-controls": "code-drawer",
+    "aria-expanded": !isRightOpen
+  }), /*#__PURE__*/React.createElement(DrawerLabel, {
+    id: "code-drawer-label"
+  }, "Code")), /*#__PURE__*/React.createElement(Drawer, {
+    open: !isLeftOpen,
+    alignItems: "center",
+    flexWrap: "nowrap",
+    justifyContent: "flex-end",
+    px: 8
+  }, /*#__PURE__*/React.createElement(DrawerLabel, {
+    id: "output-drawer-label"
+  }, "Output"), /*#__PURE__*/React.createElement(IconButton, {
+    icon: RightDrawerIcon,
+    variant: "secondary",
+    size: "small",
+    onClick: () => setOpen(state => state === 'both' ? 'left' : 'both'),
+    "aria-label": ariaLabelOutputButton,
+    "aria-controls": "output-drawer",
+    "aria-expanded": !isLeftOpen
+  }))), /*#__PURE__*/React.createElement(FlexBox, {
+    flexGrow: 1,
+    borderY: 1,
+    borderColor: "gray-900",
+    alignItems: "stretch",
+    overflow: "hidden"
+  }, /*#__PURE__*/React.createElement(Drawer, {
+    hideOnClose: true,
+    id: "code-drawer",
+    "aria-labelledby": "code-drawer-label",
+    open: !isRightOpen,
+    flexGrow: 0,
+    overflow: "hidden",
+    borderColor: "gray-900",
+    borderStyleRight: "solid",
+    borderWidthRight: "thin"
+  }, leftChild), /*#__PURE__*/React.createElement(Drawer, {
+    hideOnClose: true,
+    id: "output-drawer",
+    "aria-labelledby": "output-drawer-label",
+    role: "region",
+    open: !isLeftOpen,
+    overflow: "hidden"
+  }, rightChild)));
+};
+
+const IS_DEV = process.env.NODE_ENV === 'development'; // TODO: confirm tracking details and implementation DISC-447
+
+const tracker = createTracker({
+  apiBaseUrl: typeof window === 'undefined' ? 'https://www.codecademy.com' : window.location.origin,
+  verbose: IS_DEV
+});
+const {
+  click: trackUserClick,
+  visit: trackUserVisit,
+  impression: trackUserImpression
+} = tracker;
+
+const trackClick = (target, trackingData) => trackUserClick(_extends({}, trackingData, {
+  target
+}));
+
+// DO NOT CHANGE ANYTHING HERE
+const darkTheme = {
+  blue: editorColors.blue,
+  deepPurple: editorColors.deepPurple,
+  gray: editorColors.gray,
+  green: editorColors.green,
+  orange: editorColors.orange,
+  purple: editorColors.purple,
+  red: editorColors.red,
+  white: colors.white,
+  yellow: editorColors.yellow
+};
+const syntax = {
+  attribute: darkTheme.green,
+  annotation: darkTheme.red,
+  atom: darkTheme.deepPurple,
+  basic: darkTheme.white,
+  comment: darkTheme.gray,
+  constant: darkTheme.orange,
+  decoration: darkTheme.red,
+  invalid: darkTheme.red,
+  key: darkTheme.blue,
+  keyword: darkTheme.purple,
+  number: darkTheme.red,
+  operator: darkTheme.red,
+  predefined: darkTheme.white,
+  property: darkTheme.red,
+  regexp: darkTheme.green,
+  string: darkTheme.yellow,
+  tag: darkTheme.red,
+  text: darkTheme.orange,
+  value: darkTheme.yellow,
+  variable: darkTheme.green
+};
+const ui = {
+  background: '#211E2F',
+  text: darkTheme.white,
+  indent: {
+    active: '#393b41',
+    inactive: '#494b51'
+  }
+};
+
+var darkColors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  syntax: syntax,
+  ui: ui
+});
+
+// DO NOT CHANGE ANYTHING HERE
+
+const c = color => color.substr(1);
+
+const theme = ({
+  ui,
+  syntax
+}) => ({
+  base: 'vs-dark',
+  inherit: true,
+  rules: [// Base
+  {
+    token: '',
+    foreground: c(syntax.basic)
+  }, {
+    token: 'regexp',
+    foreground: c(syntax.regexp)
+  }, {
+    token: 'annotation',
+    foreground: c(syntax.annotation)
+  }, {
+    token: 'type',
+    foreground: c(syntax.annotation)
+  }, {
+    token: 'doctype',
+    foreground: c(syntax.comment)
+  }, {
+    token: 'delimiter',
+    foreground: c(syntax.decoration)
+  }, {
+    token: 'invalid',
+    foreground: c(syntax.invalid)
+  }, {
+    token: 'emphasis',
+    fontStyle: 'italic'
+  }, {
+    token: 'strong',
+    fontStyle: 'bold'
+  }, {
+    token: 'variable',
+    foreground: c(syntax.variable)
+  }, {
+    token: 'variable.predefined',
+    foreground: c(syntax.variable)
+  }, {
+    token: 'constant',
+    foreground: c(syntax.constant)
+  }, {
+    token: 'comment',
+    foreground: c(syntax.comment)
+  }, {
+    token: 'number',
+    foreground: c(syntax.number)
+  }, {
+    token: 'number.hex',
+    foreground: c(syntax.number)
+  }, {
+    token: 'keyword.directive',
+    foreground: c(syntax.comment)
+  }, {
+    token: 'include',
+    foreground: c(syntax.comment)
+  }, {
+    token: 'key',
+    foreground: c(syntax.property)
+  }, {
+    token: 'attribute.name',
+    foreground: c(syntax.attribute)
+  }, {
+    token: 'attribute.name-numeric',
+    foreground: c(syntax.string)
+  }, {
+    token: 'attribute.value',
+    foreground: c(syntax.property)
+  }, {
+    token: 'attribute.value.number',
+    foreground: c(syntax.number)
+  }, {
+    token: 'string',
+    foreground: c(syntax.string)
+  }, {
+    token: 'string.yaml',
+    foreground: c(syntax.string)
+  }, {
+    token: 'tag',
+    foreground: c(syntax.tag)
+  }, {
+    token: 'tag.id.jade',
+    foreground: c(syntax.tag)
+  }, {
+    token: 'tag.class.jade',
+    foreground: c(syntax.tag)
+  }, {
+    token: 'metatag',
+    foreground: c(syntax.comment)
+  }, {
+    token: 'attribute.value.unit',
+    foreground: c(syntax.string)
+  }, {
+    token: 'keyword',
+    foreground: c(syntax.keyword)
+  }, {
+    token: 'keyword.flow',
+    foreground: c(syntax.keyword)
+  }],
+  colors: {
+    'editor.background': ui.background,
+    'editor.foreground': ui.text,
+    'editorIndentGuide.background': ui.indent.inactive,
+    'editorIndentGuide.activeBackground': ui.indent.active,
+    'editorWhitespace.foreground': syntax.comment,
+    'editorLineNumber.foreground': '#9FA2AC'
+  }
+});
+
+const dark = theme(darkColors);
+
+// DO NOT CHANGE ANYTHING HERE
+const SimpleMonacoEditor = ({
+  value,
+  language,
+  onChange
+}) => {
+  const editorRef = useRef(null);
+  const editorWillMount = useCallback((editor, monaco) => {
+    editorRef.current = editor;
+    monaco.editor.defineTheme('dark', dark);
+    monaco.editor.setTheme('dark');
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: ({
+      height,
+      width
+    }) => {
+      var _editorRef$current;
+
+      (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.layout({
+        height,
+        width
+      });
+    }
+  }), /*#__PURE__*/React.createElement(ReactMonacoEditor, {
+    onMount: editorWillMount,
+    onChange: onChange,
+    options: {
+      minimap: {
+        enabled: false
+      }
+    },
+    theme: "vs-dark",
+    value: value,
+    language: language
+  }));
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const Output = _styled("pre", {
+  target: "e1lzxy8e1",
+  label: "Output"
+})("width:100%;height:100%;margin:0;padding:0 1rem;font-family:Monaco;font-size:0.875rem;overflow:auto;", ({
+  hasError,
+  theme
+}) => `
+  color: ${hasError ? theme.colors.orange : theme.colors.text};
+  background-color: ${theme.colors['navy-900']};
+`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTBCIiwiZmlsZSI6ImVkaXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWxsQnV0dG9uLCBGbGV4Qm94LCBTcGlubmVyLCBUZXh0QnV0dG9uLCBUb29sVGlwLCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcclxuaW1wb3J0IHsgQ29weUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgeyBwb3N0U25pcHBldCB9IGZyb20gJy4vYXBpJztcclxuaW1wb3J0IHsgRHJhd2VycyB9IGZyb20gJy4vZHJhd2Vycyc7XHJcbmltcG9ydCB7IHRyYWNrQ2xpY2sgfSBmcm9tICcuL2hlbHBlcnMnO1xyXG5pbXBvcnQgeyBTaW1wbGVNb25hY29FZGl0b3IgfSBmcm9tICcuL01vbmFjb0VkaXRvcic7XHJcbmNvbnN0IE91dHB1dCA9IHN0eWxlZC5wcmUgYFxuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDAgMXJlbTtcbiAgZm9udC1mYW1pbHk6IE1vbmFjbztcbiAgZm9udC1zaXplOiAwLjg3NXJlbTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gICR7KHsgaGFzRXJyb3IsIHRoZW1lIH0pID0+IGBcbiAgY29sb3I6ICR7aGFzRXJyb3IgPyB0aGVtZS5jb2xvcnMub3JhbmdlIDogdGhlbWUuY29sb3JzLnRleHR9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9yc1snbmF2eS05MDAnXX07XG5gfVxuYDtcclxuY29uc3QgQ29weUljb25TdHlsZWQgPSBzdHlsZWQoQ29weUljb24pIGBcbiAgbWFyZ2luLXJpZ2h0OiAwLjVyZW07XG5gO1xyXG5jb25zdCBET0NLRVJfU0lHVEVSTSA9IDE0MztcclxuZXhwb3J0IGNvbnN0IEVkaXRvciA9ICh7IGxhbmd1YWdlLCB0ZXh0LCBoaWRlQ29weUJ1dHRvbiwgb25DaGFuZ2UsIGNvcHlGb3JtYXR0ZXIsIHNuaXBwZXRzQmFzZVVybCwgdHJhY2tpbmdEYXRhLCB9KSA9PiB7XHJcbiAgICBjb25zdCBbb3V0cHV0LCBzZXRPdXRwdXRdID0gdXNlU3RhdGUoJycpO1xyXG4gICAgY29uc3QgW3N0YXR1cywgc2V0U3RhdHVzXSA9IHVzZVN0YXRlKCdyZWFkeScpO1xyXG4gICAgY29uc3QgW2lzQ29kZUJ5dGVDb3BpZWQsIHNldElzQ29kZUJ5dGVDb3BpZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xyXG4gICAgY29uc3Qgb25Db3B5Q2xpY2sgPSAoKSA9PiB7XHJcbiAgICAgICAgaWYgKCFpc0NvZGVCeXRlQ29waWVkKSB7XHJcbiAgICAgICAgICAgIG5hdmlnYXRvci5jbGlwYm9hcmRcclxuICAgICAgICAgICAgICAgIC53cml0ZVRleHQoY29weUZvcm1hdHRlciA/IGNvcHlGb3JtYXR0ZXIoeyB0ZXh0LCBsYW5ndWFnZSB9KSA6IHRleHQpXHJcbiAgICAgICAgICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tY29uc29sZVxyXG4gICAgICAgICAgICAgICAgLmNhdGNoKCgpID0+IGNvbnNvbGUuZXJyb3IoJ0ZhaWxlZCB0byBjb3B5JykpO1xyXG4gICAgICAgICAgICBzZXRJc0NvZGVCeXRlQ29waWVkKHRydWUpO1xyXG4gICAgICAgICAgICB0cmFja0NsaWNrKCdjb3B5JywgdHJhY2tpbmdEYXRhKTtcclxuICAgICAgICB9XHJcbiAgICB9O1xyXG4gICAgY29uc3Qgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQgPSAobWVzc2FnZSkgPT4ge1xyXG4gICAgICAgIHNldE91dHB1dChtZXNzYWdlKTtcclxuICAgICAgICBzZXRTdGF0dXMoJ2Vycm9yJyk7XHJcbiAgICB9O1xyXG4gICAgY29uc3QgaGFuZGxlU3VibWl0ID0gYXN5bmMgKCkgPT4ge1xyXG4gICAgICAgIGlmICh0ZXh0LnRyaW0oKS5sZW5ndGggPT09IDApIHtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuICAgICAgICBjb25zdCBkYXRhID0ge1xyXG4gICAgICAgICAgICBsYW5ndWFnZSxcclxuICAgICAgICAgICAgY29kZTogdGV4dCxcclxuICAgICAgICB9O1xyXG4gICAgICAgIHNldFN0YXR1cygnd2FpdGluZycpO1xyXG4gICAgICAgIHNldE91dHB1dCgnJyk7XHJcbiAgICAgICAgdHJhY2tDbGljaygncnVuJywgdHJhY2tpbmdEYXRhKTtcclxuICAgICAgICB0cnkge1xyXG4gICAgICAgICAgICBjb25zdCByZXNwb25zZSA9IGF3YWl0IHBvc3RTbmlwcGV0KGRhdGEsIHNuaXBwZXRzQmFzZVVybCk7XHJcbiAgICAgICAgICAgIGlmIChyZXNwb25zZS5zdGRlcnIubGVuZ3RoID4gMCkge1xyXG4gICAgICAgICAgICAgICAgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQocmVzcG9uc2Uuc3RkZXJyKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICBlbHNlIGlmIChyZXNwb25zZS5leGl0X2NvZGUgPT09IERPQ0tFUl9TSUdURVJNKSB7XHJcbiAgICAgICAgICAgICAgICBzZXRFcnJvclN0YXR1c0FuZE91dHB1dCgnWW91ciBjb2RlIHRvb2sgdG9vIGxvbmcgdG8gcmV0dXJuIGEgcmVzdWx0LiBEb3VibGUgY2hlY2sgeW91ciBjb2RlIGZvciBhbnkgaXNzdWVzIGFuZCB0cnkgYWdhaW4hJyk7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgZWxzZSBpZiAocmVzcG9uc2UuZXhpdF9jb2RlICE9PSAwKSB7XHJcbiAgICAgICAgICAgICAgICBzZXRFcnJvclN0YXR1c0FuZE91dHB1dCgnQW4gdW5rbm93biBlcnJvciBvY2N1cmVkLicpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIGVsc2Uge1xyXG4gICAgICAgICAgICAgICAgc2V0T3V0cHV0KHJlc3BvbnNlLnN0ZG91dCk7XHJcbiAgICAgICAgICAgICAgICBzZXRTdGF0dXMoJ3JlYWR5Jyk7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICAgICAgY2F0Y2ggKGVycm9yKSB7XHJcbiAgICAgICAgICAgIHNldEVycm9yU3RhdHVzQW5kT3V0cHV0KCdFcnJvcjogJyArIGVycm9yKTtcclxuICAgICAgICB9XHJcbiAgICB9O1xyXG4gICAgcmV0dXJuIChSZWFjdC5jcmVhdGVFbGVtZW50KFJlYWN0LkZyYWdtZW50LCBudWxsLFxyXG4gICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRHJhd2VycywgeyBsZWZ0Q2hpbGQ6IFJlYWN0LmNyZWF0ZUVsZW1lbnQoU2ltcGxlTW9uYWNvRWRpdG9yLCB7IHZhbHVlOiB0ZXh0LCBsYW5ndWFnZTogbGFuZ3VhZ2UsIG9uQ2hhbmdlOiBvbkNoYW5nZSB9KSwgcmlnaHRDaGlsZDogUmVhY3QuY3JlYXRlRWxlbWVudChPdXRwdXQsIHsgaGFzRXJyb3I6IHN0YXR1cyA9PT0gJ2Vycm9yJywgXCJhcmlhLWxpdmVcIjogXCJwb2xpdGVcIiB9LCBvdXRwdXQpIH0pLFxyXG4gICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRmxleEJveCwgeyBqdXN0aWZ5Q29udGVudDogaGlkZUNvcHlCdXR0b24gPyAnZmxleC1lbmQnIDogJ3NwYWNlLWJldHdlZW4nLCBwbDogOCB9LFxyXG4gICAgICAgICAgICAhaGlkZUNvcHlCdXR0b24gPyAoUmVhY3QuY3JlYXRlRWxlbWVudChUb29sVGlwLCB7IGlkOiBcImNvZGVieXRlLWNvcGllZFwiLCBhbGlnbm1lbnQ6IFwidG9wLXJpZ2h0XCIsIHRhcmdldDogUmVhY3QuY3JlYXRlRWxlbWVudChUZXh0QnV0dG9uLCB7IHZhcmlhbnQ6IFwic2Vjb25kYXJ5XCIsIG9uQ2xpY2s6IG9uQ29weUNsaWNrLCBvbkJsdXI6ICgpID0+IHNldElzQ29kZUJ5dGVDb3BpZWQoZmFsc2UpLCBcImRhdGEtdGVzdGlkXCI6IFwiY29weS1jb2RlYnl0ZS1idG5cIiB9LFxyXG4gICAgICAgICAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoQ29weUljb25TdHlsZWQsIHsgXCJhcmlhLWhpZGRlblwiOiBcInRydWVcIiB9KSxcclxuICAgICAgICAgICAgICAgICAgICBcIiBDb3B5IENvZGVieXRlXCIpIH0sIGlzQ29kZUJ5dGVDb3BpZWQgPyAoUmVhY3QuY3JlYXRlRWxlbWVudChcInNwYW5cIiwgeyBcImRhdGEtdGVzdGlkXCI6IFwiY29weS1jb25maXJtYXRpb24tdG9vbHRpcFwiLCByb2xlOiBcImFsZXJ0XCIgfSwgXCJDb3BpZWQhXCIpKSA6IChSZWFjdC5jcmVhdGVFbGVtZW50KFwic3BhblwiLCB7IFwiZGF0YS10ZXN0aWRcIjogXCJjb3B5LXByb21wdC10b29sdGlwXCIgfSwgXCJDb3B5IHRvIHlvdXIgY2xpcGJvYXJkXCIpKSkpIDogbnVsbCxcclxuICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChGaWxsQnV0dG9uLCB7IG9uQ2xpY2s6IGhhbmRsZVN1Ym1pdCB9LCBzdGF0dXMgPT09ICd3YWl0aW5nJyA/IFJlYWN0LmNyZWF0ZUVsZW1lbnQoU3Bpbm5lciwgbnVsbCkgOiAnUnVuJykpKSk7XHJcbn07XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWVkaXRvci5qcy5tYXAiXX0= */"));
+
+const CopyIconStyled = /*#__PURE__*/_styled(CopyIcon, {
+  target: "e1lzxy8e0",
+  label: "CopyIconStyled"
+})(process.env.NODE_ENV === "production" ? {
+  name: "u7ytkp",
+  styles: "margin-right:0.5rem"
+} : {
+  name: "u7ytkp",
+  styles: "margin-right:0.5rem",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ3QyIsImZpbGUiOiJlZGl0b3IudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmlsbEJ1dHRvbiwgRmxleEJveCwgU3Bpbm5lciwgVGV4dEJ1dHRvbiwgVG9vbFRpcCwgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XHJcbmltcG9ydCB7IENvcHlJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcclxuaW1wb3J0IHsgcG9zdFNuaXBwZXQgfSBmcm9tICcuL2FwaSc7XHJcbmltcG9ydCB7IERyYXdlcnMgfSBmcm9tICcuL2RyYXdlcnMnO1xyXG5pbXBvcnQgeyB0cmFja0NsaWNrIH0gZnJvbSAnLi9oZWxwZXJzJztcclxuaW1wb3J0IHsgU2ltcGxlTW9uYWNvRWRpdG9yIH0gZnJvbSAnLi9Nb25hY29FZGl0b3InO1xyXG5jb25zdCBPdXRwdXQgPSBzdHlsZWQucHJlIGBcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwIDFyZW07XG4gIGZvbnQtZmFtaWx5OiBNb25hY287XG4gIGZvbnQtc2l6ZTogMC44NzVyZW07XG4gIG92ZXJmbG93OiBhdXRvO1xuICAkeyh7IGhhc0Vycm9yLCB0aGVtZSB9KSA9PiBgXG4gIGNvbG9yOiAke2hhc0Vycm9yID8gdGhlbWUuY29sb3JzLm9yYW5nZSA6IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnNbJ25hdnktOTAwJ119O1xuYH1cbmA7XHJcbmNvbnN0IENvcHlJY29uU3R5bGVkID0gc3R5bGVkKENvcHlJY29uKSBgXG4gIG1hcmdpbi1yaWdodDogMC41cmVtO1xuYDtcclxuY29uc3QgRE9DS0VSX1NJR1RFUk0gPSAxNDM7XHJcbmV4cG9ydCBjb25zdCBFZGl0b3IgPSAoeyBsYW5ndWFnZSwgdGV4dCwgaGlkZUNvcHlCdXR0b24sIG9uQ2hhbmdlLCBjb3B5Rm9ybWF0dGVyLCBzbmlwcGV0c0Jhc2VVcmwsIHRyYWNraW5nRGF0YSwgfSkgPT4ge1xyXG4gICAgY29uc3QgW291dHB1dCwgc2V0T3V0cHV0XSA9IHVzZVN0YXRlKCcnKTtcclxuICAgIGNvbnN0IFtzdGF0dXMsIHNldFN0YXR1c10gPSB1c2VTdGF0ZSgncmVhZHknKTtcclxuICAgIGNvbnN0IFtpc0NvZGVCeXRlQ29waWVkLCBzZXRJc0NvZGVCeXRlQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcclxuICAgIGNvbnN0IG9uQ29weUNsaWNrID0gKCkgPT4ge1xyXG4gICAgICAgIGlmICghaXNDb2RlQnl0ZUNvcGllZCkge1xyXG4gICAgICAgICAgICBuYXZpZ2F0b3IuY2xpcGJvYXJkXHJcbiAgICAgICAgICAgICAgICAud3JpdGVUZXh0KGNvcHlGb3JtYXR0ZXIgPyBjb3B5Rm9ybWF0dGVyKHsgdGV4dCwgbGFuZ3VhZ2UgfSkgOiB0ZXh0KVxyXG4gICAgICAgICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcclxuICAgICAgICAgICAgICAgIC5jYXRjaCgoKSA9PiBjb25zb2xlLmVycm9yKCdGYWlsZWQgdG8gY29weScpKTtcclxuICAgICAgICAgICAgc2V0SXNDb2RlQnl0ZUNvcGllZCh0cnVlKTtcclxuICAgICAgICAgICAgdHJhY2tDbGljaygnY29weScsIHRyYWNraW5nRGF0YSk7XHJcbiAgICAgICAgfVxyXG4gICAgfTtcclxuICAgIGNvbnN0IHNldEVycm9yU3RhdHVzQW5kT3V0cHV0ID0gKG1lc3NhZ2UpID0+IHtcclxuICAgICAgICBzZXRPdXRwdXQobWVzc2FnZSk7XHJcbiAgICAgICAgc2V0U3RhdHVzKCdlcnJvcicpO1xyXG4gICAgfTtcclxuICAgIGNvbnN0IGhhbmRsZVN1Ym1pdCA9IGFzeW5jICgpID0+IHtcclxuICAgICAgICBpZiAodGV4dC50cmltKCkubGVuZ3RoID09PSAwKSB7XHJcbiAgICAgICAgICAgIHJldHVybjtcclxuICAgICAgICB9XHJcbiAgICAgICAgY29uc3QgZGF0YSA9IHtcclxuICAgICAgICAgICAgbGFuZ3VhZ2UsXHJcbiAgICAgICAgICAgIGNvZGU6IHRleHQsXHJcbiAgICAgICAgfTtcclxuICAgICAgICBzZXRTdGF0dXMoJ3dhaXRpbmcnKTtcclxuICAgICAgICBzZXRPdXRwdXQoJycpO1xyXG4gICAgICAgIHRyYWNrQ2xpY2soJ3J1bicsIHRyYWNraW5nRGF0YSk7XHJcbiAgICAgICAgdHJ5IHtcclxuICAgICAgICAgICAgY29uc3QgcmVzcG9uc2UgPSBhd2FpdCBwb3N0U25pcHBldChkYXRhLCBzbmlwcGV0c0Jhc2VVcmwpO1xyXG4gICAgICAgICAgICBpZiAocmVzcG9uc2Uuc3RkZXJyLmxlbmd0aCA+IDApIHtcclxuICAgICAgICAgICAgICAgIHNldEVycm9yU3RhdHVzQW5kT3V0cHV0KHJlc3BvbnNlLnN0ZGVycik7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgZWxzZSBpZiAocmVzcG9uc2UuZXhpdF9jb2RlID09PSBET0NLRVJfU0lHVEVSTSkge1xyXG4gICAgICAgICAgICAgICAgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQoJ1lvdXIgY29kZSB0b29rIHRvbyBsb25nIHRvIHJldHVybiBhIHJlc3VsdC4gRG91YmxlIGNoZWNrIHlvdXIgY29kZSBmb3IgYW55IGlzc3VlcyBhbmQgdHJ5IGFnYWluIScpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIGVsc2UgaWYgKHJlc3BvbnNlLmV4aXRfY29kZSAhPT0gMCkge1xyXG4gICAgICAgICAgICAgICAgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQoJ0FuIHVua25vd24gZXJyb3Igb2NjdXJlZC4nKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICBlbHNlIHtcclxuICAgICAgICAgICAgICAgIHNldE91dHB1dChyZXNwb25zZS5zdGRvdXQpO1xyXG4gICAgICAgICAgICAgICAgc2V0U3RhdHVzKCdyZWFkeScpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfVxyXG4gICAgICAgIGNhdGNoIChlcnJvcikge1xyXG4gICAgICAgICAgICBzZXRFcnJvclN0YXR1c0FuZE91dHB1dCgnRXJyb3I6ICcgKyBlcnJvcik7XHJcbiAgICAgICAgfVxyXG4gICAgfTtcclxuICAgIHJldHVybiAoUmVhY3QuY3JlYXRlRWxlbWVudChSZWFjdC5GcmFnbWVudCwgbnVsbCxcclxuICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KERyYXdlcnMsIHsgbGVmdENoaWxkOiBSZWFjdC5jcmVhdGVFbGVtZW50KFNpbXBsZU1vbmFjb0VkaXRvciwgeyB2YWx1ZTogdGV4dCwgbGFuZ3VhZ2U6IGxhbmd1YWdlLCBvbkNoYW5nZTogb25DaGFuZ2UgfSksIHJpZ2h0Q2hpbGQ6IFJlYWN0LmNyZWF0ZUVsZW1lbnQoT3V0cHV0LCB7IGhhc0Vycm9yOiBzdGF0dXMgPT09ICdlcnJvcicsIFwiYXJpYS1saXZlXCI6IFwicG9saXRlXCIgfSwgb3V0cHV0KSB9KSxcclxuICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KEZsZXhCb3gsIHsganVzdGlmeUNvbnRlbnQ6IGhpZGVDb3B5QnV0dG9uID8gJ2ZsZXgtZW5kJyA6ICdzcGFjZS1iZXR3ZWVuJywgcGw6IDggfSxcclxuICAgICAgICAgICAgIWhpZGVDb3B5QnV0dG9uID8gKFJlYWN0LmNyZWF0ZUVsZW1lbnQoVG9vbFRpcCwgeyBpZDogXCJjb2RlYnl0ZS1jb3BpZWRcIiwgYWxpZ25tZW50OiBcInRvcC1yaWdodFwiLCB0YXJnZXQ6IFJlYWN0LmNyZWF0ZUVsZW1lbnQoVGV4dEJ1dHRvbiwgeyB2YXJpYW50OiBcInNlY29uZGFyeVwiLCBvbkNsaWNrOiBvbkNvcHlDbGljaywgb25CbHVyOiAoKSA9PiBzZXRJc0NvZGVCeXRlQ29waWVkKGZhbHNlKSwgXCJkYXRhLXRlc3RpZFwiOiBcImNvcHktY29kZWJ5dGUtYnRuXCIgfSxcclxuICAgICAgICAgICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KENvcHlJY29uU3R5bGVkLCB7IFwiYXJpYS1oaWRkZW5cIjogXCJ0cnVlXCIgfSksXHJcbiAgICAgICAgICAgICAgICAgICAgXCIgQ29weSBDb2RlYnl0ZVwiKSB9LCBpc0NvZGVCeXRlQ29waWVkID8gKFJlYWN0LmNyZWF0ZUVsZW1lbnQoXCJzcGFuXCIsIHsgXCJkYXRhLXRlc3RpZFwiOiBcImNvcHktY29uZmlybWF0aW9uLXRvb2x0aXBcIiwgcm9sZTogXCJhbGVydFwiIH0sIFwiQ29waWVkIVwiKSkgOiAoUmVhY3QuY3JlYXRlRWxlbWVudChcInNwYW5cIiwgeyBcImRhdGEtdGVzdGlkXCI6IFwiY29weS1wcm9tcHQtdG9vbHRpcFwiIH0sIFwiQ29weSB0byB5b3VyIGNsaXBib2FyZFwiKSkpKSA6IG51bGwsXHJcbiAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoRmlsbEJ1dHRvbiwgeyBvbkNsaWNrOiBoYW5kbGVTdWJtaXQgfSwgc3RhdHVzID09PSAnd2FpdGluZycgPyBSZWFjdC5jcmVhdGVFbGVtZW50KFNwaW5uZXIsIG51bGwpIDogJ1J1bicpKSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1lZGl0b3IuanMubWFwIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+const DOCKER_SIGTERM = 143;
+const Editor = ({
+  language,
+  text,
+  hideCopyButton,
+  onChange,
+  copyFormatter,
+  snippetsBaseUrl,
+  trackingData
+}) => {
+  const [output, setOutput] = useState('');
+  const [status, setStatus] = useState('ready');
+  const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
+
+  const onCopyClick = () => {
+    if (!isCodeByteCopied) {
+      navigator.clipboard.writeText(copyFormatter ? copyFormatter({
+        text,
+        language
+      }) : text) // eslint-disable-next-line no-console
+      .catch(() => console.error('Failed to copy'));
+      setIsCodeByteCopied(true);
+      trackClick('copy', trackingData);
+    }
+  };
+
+  const setErrorStatusAndOutput = message => {
+    setOutput(message);
+    setStatus('error');
+  };
+
+  const handleSubmit = async () => {
+    if (text.trim().length === 0) {
+      return;
+    }
+
+    const data = {
+      language,
+      code: text
+    };
+    setStatus('waiting');
+    setOutput('');
+    trackClick('run', trackingData);
+
+    try {
+      const response = await postSnippet(data, snippetsBaseUrl);
+
+      if (response.stderr.length > 0) {
+        setErrorStatusAndOutput(response.stderr);
+      } else if (response.exit_code === DOCKER_SIGTERM) {
+        setErrorStatusAndOutput('Your code took too long to return a result. Double check your code for any issues and try again!');
+      } else if (response.exit_code !== 0) {
+        setErrorStatusAndOutput('An unknown error occured.');
+      } else {
+        setOutput(response.stdout);
+        setStatus('ready');
+      }
+    } catch (error) {
+      setErrorStatusAndOutput('Error: ' + error);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawers, {
+    leftChild: /*#__PURE__*/React.createElement(SimpleMonacoEditor, {
+      value: text,
+      language: language,
+      onChange: onChange
+    }),
+    rightChild: /*#__PURE__*/React.createElement(Output, {
+      hasError: status === 'error',
+      "aria-live": "polite"
+    }, output)
+  }), /*#__PURE__*/React.createElement(FlexBox, {
+    justifyContent: hideCopyButton ? 'flex-end' : 'space-between',
+    pl: 8
+  }, !hideCopyButton ? /*#__PURE__*/React.createElement(ToolTip, {
+    id: "codebyte-copied",
+    alignment: "top-right",
+    target: /*#__PURE__*/React.createElement(TextButton, {
+      variant: "secondary",
+      onClick: onCopyClick,
+      onBlur: () => setIsCodeByteCopied(false),
+      "data-testid": "copy-codebyte-btn"
+    }, /*#__PURE__*/React.createElement(CopyIconStyled, {
+      "aria-hidden": "true"
+    }), " Copy Codebyte")
+  }, isCodeByteCopied ? /*#__PURE__*/React.createElement("span", {
+    "data-testid": "copy-confirmation-tooltip",
+    role: "alert"
+  }, "Copied!") : /*#__PURE__*/React.createElement("span", {
+    "data-testid": "copy-prompt-tooltip"
+  }, "Copy to your clipboard")) : null, /*#__PURE__*/React.createElement(FillButton, {
+    onClick: handleSubmit
+  }, status === 'waiting' ? /*#__PURE__*/React.createElement(Spinner, null) : 'Run')));
+};
+
+const useIntersection = (ref, options) => {
+  const [intersectionObserverEntry, setIntersectionObserverEntry] = useState(null);
+  useEffect(() => {
+    if (ref.current && typeof IntersectionObserver === 'function') {
+      const handler = entries => {
+        setIntersectionObserverEntry(entries[0]);
+      };
+
+      const observer = new IntersectionObserver(handler, {
+        threshold: options.threshold,
+        root: options.root,
+        rootMargin: options.rootMargin
+      });
+      observer.observe(ref.current);
+      return () => {
+        setIntersectionObserverEntry(null);
+        observer.disconnect();
+      };
+    } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+    return () => {};
+  }, [ref, options.threshold, options.root, options.rootMargin]);
+  return intersectionObserverEntry;
+};
+
+// will determine the amount of the element that needs to come into the viewport
+// before the useEverInView hook is triggered. The rootMargin will determine the
+// size of the root element's bounding box.
+// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options
+
+const useEverInView = (rootMargin = '0px', threshold = 0.2) => {
+  const ref = useRef(null);
+  const [everInView, setEverInView] = useState(false);
+  const intersection = useIntersection(ref, {
+    root: null,
+    rootMargin,
+    threshold
+  });
+  const inView = intersection == null ? void 0 : intersection.isIntersecting;
+  useEffect(() => {
+    if (inView) {
+      setEverInView(true);
+    }
+  }, [inView]);
+  return {
+    everInView: Boolean(everInView || inView),
+    ref
+  };
+};
+
+const LanguageSelection = ({
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement(ColorMode, {
+    mode: "dark",
+    flex: 1,
+    px: 16,
+    pt: 48
+  }, /*#__PURE__*/React.createElement(Text, {
+    mb: 16
+  }, "Which language do you want to code in?"), /*#__PURE__*/React.createElement(Select, {
+    id: "language-select",
+    "aria-label": "Select a language",
+    options: LanguageOptions,
+    onChange: e => onChange(e.target.value)
+  }));
+};
+
+const _excluded = ["text", "language", "hideCopyButton", "snippetsBaseUrl", "onEdit", "onLanguageChange", "copyFormatter", "trackingData", "trackFirstEdit"];
+const editorBaseStyles = system.css({
+  border: 1,
+  borderColor: 'gray-900',
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '25rem'
+});
+
+const EditorContainer = /*#__PURE__*/_styled(Background, {
+  target: "e1epka4g0",
+  label: "EditorContainer"
+})(editorBaseStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvZGVCeXRlRWRpdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQndCIiwiZmlsZSI6ImNvZGVCeXRlRWRpdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgSWNvbkJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcclxuaW1wb3J0IHsgRmF2aWNvbkljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XHJcbmltcG9ydCB7IEJhY2tncm91bmQsIHN5c3RlbSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XHJcbmltcG9ydCB7IGhlbGxvV29ybGQgfSBmcm9tICcuL2NvbnN0cyc7XHJcbmltcG9ydCB7IEVkaXRvciB9IGZyb20gJy4vZWRpdG9yJztcclxuaW1wb3J0IHsgdHJhY2tDbGljayB9IGZyb20gJy4vaGVscGVycyc7XHJcbmltcG9ydCB7IHVzZUV2ZXJJblZpZXcgfSBmcm9tICcuL2hlbHBlcnMvdXNlRXZlckluVmlldyc7XHJcbmltcG9ydCB7IExhbmd1YWdlU2VsZWN0aW9uIH0gZnJvbSAnLi9sYW5ndWFnZVNlbGVjdGlvbic7XHJcbmltcG9ydCB7IHRyYWNrVXNlckltcHJlc3Npb24gfSBmcm9tICcuL2xpYnMvZXZlbnRUcmFja2luZyc7XHJcbmNvbnN0IGVkaXRvckJhc2VTdHlsZXMgPSBzeXN0ZW0uY3NzKHtcclxuICAgIGJvcmRlcjogMSxcclxuICAgIGJvcmRlckNvbG9yOiAnZ3JheS05MDAnLFxyXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxyXG4gICAgZmxleERpcmVjdGlvbjogJ2NvbHVtbicsXHJcbiAgICBtaW5IZWlnaHQ6ICcyNXJlbScsXHJcbn0pO1xyXG5jb25zdCBFZGl0b3JDb250YWluZXIgPSBzdHlsZWQoQmFja2dyb3VuZCkoZWRpdG9yQmFzZVN0eWxlcyk7XHJcbmV4cG9ydCBjb25zdCBDb2RlQnl0ZUVkaXRvciA9ICh7IHRleHQ6IGluaXRpYWxUZXh0LCBsYW5ndWFnZTogaW5pdGlhbExhbmd1YWdlLCBoaWRlQ29weUJ1dHRvbiA9IGZhbHNlLCBzbmlwcGV0c0Jhc2VVcmwsIG9uRWRpdCwgb25MYW5ndWFnZUNoYW5nZSwgY29weUZvcm1hdHRlciwgdHJhY2tpbmdEYXRhLCB0cmFja0ZpcnN0RWRpdCA9IGZhbHNlLCAuLi5yZXN0IH0pID0+IHtcclxuICAgIGNvbnN0IHsgZXZlckluVmlldywgcmVmIH0gPSB1c2VFdmVySW5WaWV3KCk7XHJcbiAgICBjb25zdCBnZXRJbml0aWFsVGV4dCA9ICgpID0+IHtcclxuICAgICAgICBpZiAoaW5pdGlhbFRleHQgIT09IHVuZGVmaW5lZClcclxuICAgICAgICAgICAgcmV0dXJuIGluaXRpYWxUZXh0O1xyXG4gICAgICAgIHJldHVybiBpbml0aWFsTGFuZ3VhZ2UgPyBoZWxsb1dvcmxkW2luaXRpYWxMYW5ndWFnZV0gOiAnJztcclxuICAgIH07XHJcbiAgICBjb25zdCBbdGV4dCwgc2V0VGV4dF0gPSB1c2VTdGF0ZShnZXRJbml0aWFsVGV4dCgpKTtcclxuICAgIGNvbnN0IFtsYW5ndWFnZSwgc2V0TGFuZ3VhZ2VdID0gdXNlU3RhdGUoaW5pdGlhbExhbmd1YWdlID8/ICcnKTtcclxuICAgIGNvbnN0IFtoYXNCZWVuRWRpdGVkLCBzZXRIYXNCZWVuRWRpdGVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcclxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XHJcbiAgICAgICAgaWYgKGV2ZXJJblZpZXcpIHtcclxuICAgICAgICAgICAgdHJhY2tVc2VySW1wcmVzc2lvbih7XHJcbiAgICAgICAgICAgICAgICBwYWdlX25hbWU6IHRyYWNraW5nRGF0YT8ucGFnZV9uYW1lID8/ICdVbmtub3duJyxcclxuICAgICAgICAgICAgICAgIGNvbnRleHQ6IHRyYWNraW5nRGF0YT8uY29udGV4dCA/PyBkb2N1bWVudC5yZWZlcnJlcixcclxuICAgICAgICAgICAgICAgIHRhcmdldDogJ2NvZGVieXRlJyxcclxuICAgICAgICAgICAgfSk7XHJcbiAgICAgICAgfVxyXG4gICAgfSwgW2V2ZXJJblZpZXcsIHRyYWNraW5nRGF0YV0pO1xyXG4gICAgcmV0dXJuIChSZWFjdC5jcmVhdGVFbGVtZW50KEVkaXRvckNvbnRhaW5lciwgeyBiZzogXCJibGFja1wiLCBtYXhXaWR0aDogXCI0M3JlbVwiLCAuLi5yZXN0LCBvdmVyZmxvdzogXCJoaWRkZW5cIiwgcmVmOiByZWYgfSxcclxuICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KEJveCwgeyBib3JkZXJCb3R0b206IDEsIGJvcmRlckNvbG9yOiBcImdyYXktOTAwXCIsIHB5OiA0LCBwbDogOCB9LFxyXG4gICAgICAgICAgICBSZWFjdC5jcmVhdGVFbGVtZW50KEljb25CdXR0b24sIHsgaWNvbjogRmF2aWNvbkljb24sIHZhcmlhbnQ6IFwic2Vjb25kYXJ5XCIsIGhyZWY6IFwiaHR0cHM6Ly93d3cuY29kZWNhZGVteS5jb20vXCIsIHRhcmdldDogXCJfYmxhbmtcIiwgcmVsOiBcIm5vcmVmZXJyZXJcIiwgXCJhcmlhLWxhYmVsXCI6IFwidmlzaXQgY29kZWNhZGVteS5jb21cIiwgb25DbGljazogKCkgPT4gdHJhY2tDbGljaygnbG9nbycsIHRyYWNraW5nRGF0YSkgfSkpLFxyXG4gICAgICAgIGxhbmd1YWdlID8gKFJlYWN0LmNyZWF0ZUVsZW1lbnQoRWRpdG9yLCB7IGxhbmd1YWdlOiBsYW5ndWFnZSwgdGV4dDogdGV4dCwgaGlkZUNvcHlCdXR0b246IGhpZGVDb3B5QnV0dG9uLCBvbkNoYW5nZTogKG5ld1RleHQpID0+IHtcclxuICAgICAgICAgICAgICAgIHNldFRleHQobmV3VGV4dCk7XHJcbiAgICAgICAgICAgICAgICBvbkVkaXQ/LihuZXdUZXh0LCBsYW5ndWFnZSk7XHJcbiAgICAgICAgICAgICAgICBpZiAodHJhY2tGaXJzdEVkaXQgJiYgaGFzQmVlbkVkaXRlZCA9PT0gZmFsc2UpIHtcclxuICAgICAgICAgICAgICAgICAgICBzZXRIYXNCZWVuRWRpdGVkKHRydWUpO1xyXG4gICAgICAgICAgICAgICAgICAgIHRyYWNrQ2xpY2soJ2VkaXQnLCB0cmFja2luZ0RhdGEpO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICB9LCBzbmlwcGV0c0Jhc2VVcmw6IHNuaXBwZXRzQmFzZVVybCwgY29weUZvcm1hdHRlcjogY29weUZvcm1hdHRlciwgdHJhY2tpbmdEYXRhOiB0cmFja2luZ0RhdGEgfSkpIDogKFJlYWN0LmNyZWF0ZUVsZW1lbnQoTGFuZ3VhZ2VTZWxlY3Rpb24sIHsgb25DaGFuZ2U6IChuZXdMYW5ndWFnZSkgPT4ge1xyXG4gICAgICAgICAgICAgICAgY29uc3QgbmV3VGV4dCA9IHRleHQgfHwgKG5ld0xhbmd1YWdlID8gaGVsbG9Xb3JsZFtuZXdMYW5ndWFnZV0gOiAnJyk7XHJcbiAgICAgICAgICAgICAgICBzZXRMYW5ndWFnZShuZXdMYW5ndWFnZSk7XHJcbiAgICAgICAgICAgICAgICBzZXRUZXh0KG5ld1RleHQpO1xyXG4gICAgICAgICAgICAgICAgdHJhY2tDbGljaygnbGFuZ19zZWxlY3QnLCB0cmFja2luZ0RhdGEpO1xyXG4gICAgICAgICAgICAgICAgb25MYW5ndWFnZUNoYW5nZT8uKG5ld1RleHQsIG5ld0xhbmd1YWdlKTtcclxuICAgICAgICAgICAgfSB9KSkpKTtcclxufTtcclxuZXhwb3J0IGRlZmF1bHQgQ29kZUJ5dGVFZGl0b3I7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWNvZGVCeXRlRWRpdG9yLmpzLm1hcCJdfQ== */");
+
+const CodeByteEditor = _ref => {
+  let {
+    text: initialText,
+    language: initialLanguage,
+    hideCopyButton = false,
+    snippetsBaseUrl,
+    onEdit,
+    onLanguageChange,
+    copyFormatter,
+    trackingData,
+    trackFirstEdit = false
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const {
+    everInView,
+    ref
+  } = useEverInView();
+
+  const getInitialText = () => {
+    if (initialText !== undefined) return initialText;
+    return initialLanguage ? helloWorld[initialLanguage] : '';
+  };
+
+  const [text, setText] = useState(getInitialText());
+  const [language, setLanguage] = useState(initialLanguage != null ? initialLanguage : '');
+  const [hasBeenEdited, setHasBeenEdited] = useState(false);
+  useEffect(() => {
+    if (everInView) {
+      var _trackingData$page_na, _trackingData$context;
+
+      trackUserImpression({
+        page_name: (_trackingData$page_na = trackingData == null ? void 0 : trackingData.page_name) != null ? _trackingData$page_na : 'Unknown',
+        context: (_trackingData$context = trackingData == null ? void 0 : trackingData.context) != null ? _trackingData$context : document.referrer,
+        target: 'codebyte'
+      });
+    }
+  }, [everInView, trackingData]);
+  return /*#__PURE__*/React.createElement(EditorContainer, _extends({
+    bg: "black",
+    maxWidth: "43rem"
+  }, rest, {
+    overflow: "hidden",
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Box, {
+    borderBottom: 1,
+    borderColor: "gray-900",
+    py: 4,
+    pl: 8
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: FaviconIcon,
+    variant: "secondary",
+    href: "https://www.codecademy.com/",
+    target: "_blank",
+    rel: "noreferrer",
+    "aria-label": "visit codecademy.com",
+    onClick: () => trackClick('logo', trackingData)
+  })), language ? /*#__PURE__*/React.createElement(Editor, {
+    language: language,
+    text: text,
+    hideCopyButton: hideCopyButton,
+    onChange: newText => {
+      setText(newText);
+      onEdit == null ? void 0 : onEdit(newText, language);
+
+      if (trackFirstEdit && hasBeenEdited === false) {
+        setHasBeenEdited(true);
+        trackClick('edit', trackingData);
+      }
+    },
+    snippetsBaseUrl: snippetsBaseUrl,
+    copyFormatter: copyFormatter,
+    trackingData: trackingData
+  }) : /*#__PURE__*/React.createElement(LanguageSelection, {
+    onChange: newLanguage => {
+      const newText = text || (newLanguage ? helloWorld[newLanguage] : '');
+      setLanguage(newLanguage);
+      setText(newText);
+      trackClick('lang_select', trackingData);
+      onLanguageChange == null ? void 0 : onLanguageChange(newText, newLanguage);
+    }
+  }));
+};
+
+export { CodeByteEditor, LanguageOptions, helloWorld, validLanguages };