@codecademy/codebytes 0.5.2-alpha.b9fc3a.0 → 0.6.2-alpha.0500c8.0

package/dist/__tests__/helpers-test.js

@@ -0,0 +1,117 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { encode } from 'js-base64';
+import { getOptions, trackClick } from '../helpers';
+import { trackUserClick } from '../libs/eventTracking';
+jest.mock('../libs/eventTracking');
+var initialUrl = window.location.href;
+
+var resetCodebytesParams = function resetCodebytesParams() {
+  return window.history.replaceState(null, '', initialUrl);
+};
+
+var setCodebytesParams = function setCodebytesParams(params) {
+  if (params.text) {
+    params.text = encode(params.text);
+  }
+
+  var url = new URL(window.location.href);
+  Object.entries(params).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    url.searchParams.set(key, value);
+  });
+  window.history.replaceState({}, '', url.toString());
+};
+
+describe('getOptions', function () {
+  afterEach(function () {
+    resetCodebytesParams();
+  });
+  it('parses props out of the window locations', function () {
+    var text = "\n    const msg = 'Sup?';\n    console.log(msg);\n    ".trim();
+    setCodebytesParams({
+      lang: 'javascript',
+      text: text,
+      'copy-mode': '',
+      'client-name': 'forum',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode: 'compose'
+    });
+    expect(getOptions()).toEqual({
+      clientName: 'forum',
+      parentPage: 'https://discuss.codecademy.com/some-interesting/post',
+      renderMode: 'compose'
+    });
+  });
+});
+describe('trackClick', function () {
+  afterEach(function () {
+    resetCodebytesParams();
+    trackUserClick.mockReset();
+  });
+  it('proxies to trackUserClick setting the page_name, context, and target', function () {
+    var target = 'foobar';
+    setCodebytesParams({
+      lang: 'javascript',
+      text: "\n      const msg = 'Sup?';\n      console.log(msg);\n      ".trim(),
+      'copy-mode': '',
+      'client-name': 'forum',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode: ''
+    });
+    trackClick(target);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      page_name: 'forum',
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target: target
+    });
+  });
+  it('defaults the client name to "Unknown"', function () {
+    var target = 'foobar';
+    setCodebytesParams({
+      lang: 'javascript',
+      text: "\n      const msg = 'Sup?';\n      console.log(msg);\n      ".trim(),
+      'copy-mode': '',
+      'client-name': '',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode: ''
+    });
+    trackClick(target);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      page_name: 'Unknown',
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target: target
+    });
+  });
+  it('embeds the render mode into the page_name', function () {
+    var mode = 'compose';
+    var target = 'foobar';
+    setCodebytesParams({
+      lang: 'javascript',
+      text: "\n      const msg = 'Sup?';\n      console.log(msg);\n      ".trim(),
+      'copy-mode': '',
+      'client-name': 'forum',
+      page: 'https://discuss.codecademy.com/some-interesting/post',
+      mode: mode
+    });
+    trackClick(target);
+    expect(trackUserClick).toHaveBeenCalledWith({
+      page_name: "forum_".concat(mode),
+      context: 'https://discuss.codecademy.com/some-interesting/post',
+      target: target
+    });
+  });
+});

package/dist/__tests__/language-selection-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/language-selection-test.js

@@ -0,0 +1,15 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import { LanguageSelection } from '../languageSelection';
+var renderWrapper = setupRtl(LanguageSelection, {
+  onChange: function onChange() {
+    return null;
+  }
+});
+describe('LanguageSelection', function () {
+  it('has placeholder text', function () {
+    var _renderWrapper = renderWrapper(),
+        view = _renderWrapper.view;
+
+    view.getByText('Which language do you want to code in?');
+  });
+});

package/dist/__tests__/mocks.js

@@ -0,0 +1,13 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+jest.mock('react-resize-observer');
+jest.mock('../libs/eventTracking');
+jest.mock('../helpers', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('../helpers')), {}, {
+    trackClick: jest.fn()
+  });
+});

package/dist/api.d.ts

@@ -0,0 +1,12 @@
+import type { LanguageOption } from './consts';
+interface Response {
+    stderr: string;
+    stdout: string;
+    exit_code: number;
+}
+interface PostSnippetData {
+    language: LanguageOption;
+    code: string;
+}
+export declare const postSnippet: (data: PostSnippetData, snippetsBaseUrl?: string | undefined) => Promise<Response>;
+export {};

package/dist/api.js

@@ -0,0 +1,39 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+export var postSnippet = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, snippetsBaseUrl) {
+    var snippetsEndpoint, response;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            snippetsEndpoint = "https://".concat(snippetsBaseUrl, "/snippets");
+            _context.next = 3;
+            return fetch(snippetsEndpoint, {
+              method: 'POST',
+              body: JSON.stringify(data),
+              headers: {
+                'x-codecademy-user-id': 'codebytes-anon-user'
+              }
+            });
+
+          case 3:
+            response = _context.sent;
+            return _context.abrupt("return", response.json());
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function postSnippet(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/codeByteEditor.d.ts

@@ -0,0 +1,13 @@
+import { StyleProps } from '@codecademy/variance';
+import React from 'react';
+import { CodeByteEditorProps } from './types';
+declare const editorStates: (props: Partial<Record<"isIFrame", boolean>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) => import("@codecademy/variance").CSSObject;
+declare const editorBaseStyles: (props: {
+    theme?: import("@emotion/react").Theme | undefined;
+}) => import("@codecademy/variance").CSSObject;
+export interface EditorStyleProps extends StyleProps<typeof editorBaseStyles>, StyleProps<typeof editorStates> {
+}
+export declare const CodeByteEditor: React.FC<CodeByteEditorProps>;
+export default CodeByteEditor;

package/dist/codeByteEditor.js

@@ -0,0 +1,133 @@
+import _styled from "@emotion/styled/base";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { Box, IconButton } from '@codecademy/gamut';
+import { FaviconIcon } from '@codecademy/gamut-icons';
+import { Background, states, system } from '@codecademy/gamut-styles';
+import React, { useEffect, useState } from 'react';
+import { helloWorld } from './consts';
+import { Editor } from './editor';
+import { getOptions, trackClick } from './helpers';
+import { LanguageSelection } from './languageSelection';
+import { trackUserImpression } from './libs/eventTracking';
+var editorStates = states({
+  isIFrame: {
+    height: '100vh'
+  }
+});
+var editorBaseStyles = system.css({
+  border: 1,
+  borderColor: 'gray-900',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '25rem',
+  width: '43rem',
+  overflow: 'hidden'
+});
+
+var EditorContainer = /*#__PURE__*/_styled(Background, {
+  target: "e1epka4g0",
+  label: "EditorContainer"
+})(editorBaseStyles, editorStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9jb2RlQnl0ZUVkaXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0J3QiIsImZpbGUiOiIuLi9zcmMvY29kZUJ5dGVFZGl0b3IudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBJY29uQnV0dG9uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgRmF2aWNvbkljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBzdGF0ZXMsIHN5c3RlbSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTdHlsZVByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IGhlbGxvV29ybGQsIExhbmd1YWdlT3B0aW9uIH0gZnJvbSAnLi9jb25zdHMnO1xuaW1wb3J0IHsgRWRpdG9yIH0gZnJvbSAnLi9lZGl0b3InO1xuaW1wb3J0IHsgZ2V0T3B0aW9ucywgdHJhY2tDbGljayB9IGZyb20gJy4vaGVscGVycyc7XG5pbXBvcnQgeyBMYW5ndWFnZVNlbGVjdGlvbiB9IGZyb20gJy4vbGFuZ3VhZ2VTZWxlY3Rpb24nO1xuaW1wb3J0IHsgdHJhY2tVc2VySW1wcmVzc2lvbiB9IGZyb20gJy4vbGlicy9ldmVudFRyYWNraW5nJztcbmltcG9ydCB7IENvZGVCeXRlRWRpdG9yUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgZWRpdG9yU3RhdGVzID0gc3RhdGVzKHtcbiAgaXNJRnJhbWU6IHsgaGVpZ2h0OiAnMTAwdmgnIH0sXG59KTtcblxuY29uc3QgZWRpdG9yQmFzZVN0eWxlcyA9IHN5c3RlbS5jc3Moe1xuICBib3JkZXI6IDEsXG4gIGJvcmRlckNvbG9yOiAnZ3JheS05MDAnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nLFxuICBoZWlnaHQ6ICcyNXJlbScsXG4gIHdpZHRoOiAnNDNyZW0nLFxuICBvdmVyZmxvdzogJ2hpZGRlbicsXG59KTtcbmV4cG9ydCBpbnRlcmZhY2UgRWRpdG9yU3R5bGVQcm9wc1xuICBleHRlbmRzIFN0eWxlUHJvcHM8dHlwZW9mIGVkaXRvckJhc2VTdHlsZXM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIGVkaXRvclN0YXRlcz4ge31cblxuY29uc3QgRWRpdG9yQ29udGFpbmVyID0gc3R5bGVkKEJhY2tncm91bmQpPEVkaXRvclN0eWxlUHJvcHM+KFxuICBlZGl0b3JCYXNlU3R5bGVzLFxuICBlZGl0b3JTdGF0ZXNcbik7XG5cbmV4cG9ydCBjb25zdCBDb2RlQnl0ZUVkaXRvcjogUmVhY3QuRkM8Q29kZUJ5dGVFZGl0b3JQcm9wcz4gPSAoe1xuICB0ZXh0OiBpbml0aWFsVGV4dCxcbiAgbGFuZ3VhZ2U6IGluaXRpYWxMYW5ndWFnZSxcbiAgaGlkZUNvcHlCdXR0b24gPSBmYWxzZSxcbiAgaXNJRnJhbWUgPSBmYWxzZSxcbiAgc25pcHBldHNCYXNlVXJsLFxuICBvbkVkaXQsXG4gIG9uTGFuZ3VhZ2VDaGFuZ2UsXG4gIG9uQ29weSxcbn0pID0+IHtcbiAgY29uc3QgZ2V0SW5pdGlhbFRleHQgPSAoKSA9PiB7XG4gICAgaWYgKGluaXRpYWxUZXh0ICE9PSB1bmRlZmluZWQpIHJldHVybiBpbml0aWFsVGV4dDtcbiAgICByZXR1cm4gaW5pdGlhbExhbmd1YWdlID8gaGVsbG9Xb3JsZFtpbml0aWFsTGFuZ3VhZ2VdIDogJyc7XG4gIH07XG5cbiAgY29uc3QgW3RleHQsIHNldFRleHRdID0gdXNlU3RhdGU8c3RyaW5nPihnZXRJbml0aWFsVGV4dCgpKTtcbiAgY29uc3QgW2xhbmd1YWdlLCBzZXRMYW5ndWFnZV0gPSB1c2VTdGF0ZTxMYW5ndWFnZU9wdGlvbj4oXG4gICAgaW5pdGlhbExhbmd1YWdlID8/ICcnXG4gICk7XG4gIGNvbnN0IFtoYXNCZWVuRWRpdGVkLCBzZXRIYXNCZWVuRWRpdGVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IG9wdGlvbnMgPSBnZXRPcHRpb25zKCk7XG4gICAgY29uc3QgcGFnZV9uYW1lID0gb3B0aW9ucy5yZW5kZXJNb2RlXG4gICAgICA/IGAke29wdGlvbnMuY2xpZW50TmFtZX1fJHtvcHRpb25zLnJlbmRlck1vZGV9YFxuICAgICAgOiBvcHRpb25zLmNsaWVudE5hbWU7XG5cbiAgICB0cmFja1VzZXJJbXByZXNzaW9uKHtcbiAgICAgIHBhZ2VfbmFtZSxcbiAgICAgIGNvbnRleHQ6IG9wdGlvbnMucGFyZW50UGFnZSxcbiAgICAgIHRhcmdldDogJ2NvZGVieXRlJyxcbiAgICB9KTtcbiAgfSwgW10pO1xuXG4gIHJldHVybiAoXG4gICAgPEVkaXRvckNvbnRhaW5lciBiZz1cImJsYWNrXCIgYXM9XCJtYWluXCIgaXNJRnJhbWU9e2lzSUZyYW1lfT5cbiAgICAgIDxCb3ggYm9yZGVyQm90dG9tPXsxfSBib3JkZXJDb2xvcj1cImdyYXktOTAwXCIgcHk9ezR9IHBsPXs4fT5cbiAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICBpY29uPXtGYXZpY29uSWNvbn1cbiAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICBocmVmPVwiaHR0cHM6Ly93d3cuY29kZWNhZGVteS5jb20vXCJcbiAgICAgICAgICB0YXJnZXQ9XCJfYmxhbmtcIlxuICAgICAgICAgIHJlbD1cIm5vcmVmZXJyZXJcIlxuICAgICAgICAgIGFyaWEtbGFiZWw9XCJ2aXNpdCBjb2RlY2FkZW15LmNvbVwiXG4gICAgICAgICAgb25DbGljaz17KCkgPT4gdHJhY2tDbGljaygnbG9nbycpfVxuICAgICAgICAvPlxuICAgICAgPC9Cb3g+XG4gICAgICB7bGFuZ3VhZ2UgPyAoXG4gICAgICAgIDxFZGl0b3JcbiAgICAgICAgICBsYW5ndWFnZT17bGFuZ3VhZ2V9XG4gICAgICAgICAgdGV4dD17dGV4dH1cbiAgICAgICAgICBoaWRlQ29weUJ1dHRvbj17aGlkZUNvcHlCdXR0b259XG4gICAgICAgICAgb25DaGFuZ2U9eyhuZXdUZXh0OiBzdHJpbmcpID0+IHtcbiAgICAgICAgICAgIHNldFRleHQobmV3VGV4dCk7XG4gICAgICAgICAgICBvbkVkaXQ/LihuZXdUZXh0LCBsYW5ndWFnZSk7XG4gICAgICAgICAgICBjb25zdCB7IHJlbmRlck1vZGUgfSA9IGdldE9wdGlvbnMoKTtcbiAgICAgICAgICAgIGlmICghcmVuZGVyTW9kZSAmJiBoYXNCZWVuRWRpdGVkID09PSBmYWxzZSkge1xuICAgICAgICAgICAgICBzZXRIYXNCZWVuRWRpdGVkKHRydWUpO1xuICAgICAgICAgICAgICB0cmFja0NsaWNrKCdlZGl0Jyk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgfX1cbiAgICAgICAgICBzbmlwcGV0c0Jhc2VVcmw9e3NuaXBwZXRzQmFzZVVybH1cbiAgICAgICAgICBvbkNvcHk9e29uQ29weX1cbiAgICAgICAgLz5cbiAgICAgICkgOiAoXG4gICAgICAgIDxMYW5ndWFnZVNlbGVjdGlvblxuICAgICAgICAgIG9uQ2hhbmdlPXsobmV3TGFuZ3VhZ2UpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IG5ld1RleHQ6IHN0cmluZyA9XG4gICAgICAgICAgICAgIHRleHQgfHwgKG5ld0xhbmd1YWdlID8gaGVsbG9Xb3JsZFtuZXdMYW5ndWFnZV0gOiAnJyk7XG4gICAgICAgICAgICBzZXRMYW5ndWFnZShuZXdMYW5ndWFnZSk7XG4gICAgICAgICAgICBzZXRUZXh0KG5ld1RleHQpO1xuICAgICAgICAgICAgdHJhY2tDbGljaygnbGFuZ19zZWxlY3QnKTtcbiAgICAgICAgICAgIG9uTGFuZ3VhZ2VDaGFuZ2U/LihuZXdUZXh0LCBuZXdMYW5ndWFnZSk7XG4gICAgICAgICAgICB0cmFja0NsaWNrKCdsYW5nX3NlbGVjdCcpO1xuICAgICAgICAgIH19XG4gICAgICAgIC8+XG4gICAgICApfVxuICAgIDwvRWRpdG9yQ29udGFpbmVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ29kZUJ5dGVFZGl0b3I7XG4iXX0= */");
+
+export var CodeByteEditor = function CodeByteEditor(_ref) {
+  var initialText = _ref.text,
+      initialLanguage = _ref.language,
+      _ref$hideCopyButton = _ref.hideCopyButton,
+      hideCopyButton = _ref$hideCopyButton === void 0 ? false : _ref$hideCopyButton,
+      _ref$isIFrame = _ref.isIFrame,
+      isIFrame = _ref$isIFrame === void 0 ? false : _ref$isIFrame,
+      snippetsBaseUrl = _ref.snippetsBaseUrl,
+      onEdit = _ref.onEdit,
+      onLanguageChange = _ref.onLanguageChange,
+      onCopy = _ref.onCopy;
+
+  var getInitialText = function getInitialText() {
+    if (initialText !== undefined) return initialText;
+    return initialLanguage ? helloWorld[initialLanguage] : '';
+  };
+
+  var _useState = useState(getInitialText()),
+      _useState2 = _slicedToArray(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  var _useState3 = useState(initialLanguage !== null && initialLanguage !== void 0 ? initialLanguage : ''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      language = _useState4[0],
+      setLanguage = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasBeenEdited = _useState6[0],
+      setHasBeenEdited = _useState6[1];
+
+  useEffect(function () {
+    var options = getOptions();
+    var page_name = options.renderMode ? "".concat(options.clientName, "_").concat(options.renderMode) : options.clientName;
+    trackUserImpression({
+      page_name: page_name,
+      context: options.parentPage,
+      target: 'codebyte'
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(EditorContainer, {
+    bg: "black",
+    as: "main",
+    isIFrame: isIFrame
+  }, /*#__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: function onClick() {
+      return trackClick('logo');
+    }
+  })), language ? /*#__PURE__*/React.createElement(Editor, {
+    language: language,
+    text: text,
+    hideCopyButton: hideCopyButton,
+    onChange: function onChange(newText) {
+      setText(newText);
+      onEdit === null || onEdit === void 0 ? void 0 : onEdit(newText, language);
+
+      var _getOptions = getOptions(),
+          renderMode = _getOptions.renderMode;
+
+      if (!renderMode && hasBeenEdited === false) {
+        setHasBeenEdited(true);
+        trackClick('edit');
+      }
+    },
+    snippetsBaseUrl: snippetsBaseUrl,
+    onCopy: onCopy
+  }) : /*#__PURE__*/React.createElement(LanguageSelection, {
+    onChange: function onChange(newLanguage) {
+      var newText = text || (newLanguage ? helloWorld[newLanguage] : '');
+      setLanguage(newLanguage);
+      setText(newText);
+      trackClick('lang_select');
+      onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(newText, newLanguage);
+      trackClick('lang_select');
+    }
+  }));
+};
+export default CodeByteEditor;

package/dist/consts.d.ts

@@ -0,0 +1,23 @@
+export declare const LanguageOptions: {
+    '': string;
+    cpp: string;
+    csharp: string;
+    golang: string;
+    javascript: string;
+    php: string;
+    python: string;
+    ruby: string;
+    scheme: string;
+};
+export declare type LanguageOption = keyof typeof LanguageOptions;
+export declare const validLanguages: ("cpp" | "csharp" | "golang" | "javascript" | "php" | "python" | "ruby" | "scheme")[];
+export declare const helloWorld: {
+    readonly cpp: "#include <iostream>\nint main() {\n  std::cout << \"Hello world!\";\n  return 0;\n}";
+    readonly csharp: "namespace HelloWorld {\n  class Hello {\n    static void Main(string[] args) {\n      System.Console.WriteLine(\"Hello world!\");\n    }\n  }\n}";
+    readonly golang: "package main\nimport \"fmt\"\nfunc main() {\n  fmt.Println(\"Hello world!\")\n}";
+    readonly javascript: "console.log('Hello world!');";
+    readonly php: "<?php\n  echo \"Hello world!\";\n?>";
+    readonly python: "print('Hello world!')";
+    readonly ruby: "puts \"Hello world!\"";
+    readonly scheme: "(begin\n  (display \"Hello world!\")\n  (newline))";
+};

package/dist/consts.js

@@ -0,0 +1,34 @@
+// key = language param to send to snippets service
+// val = label in language selection drop down
+export var LanguageOptions = {
+  '': 'Select a language',
+  cpp: 'C++',
+  csharp: 'C#',
+  golang: 'Go',
+  javascript: 'JavaScript',
+  php: 'PHP',
+  python: 'Python 3',
+  ruby: 'Ruby',
+  scheme: 'Scheme'
+};
+export var validLanguages = Object.keys(LanguageOptions).filter(function (option) {
+  return !!option;
+});
+var cpp = "#include <iostream>\nint main() {\n  std::cout << \"Hello world!\";\n  return 0;\n}";
+var csharp = "namespace HelloWorld {\n  class Hello {\n    static void Main(string[] args) {\n      System.Console.WriteLine(\"Hello world!\");\n    }\n  }\n}";
+var golang = "package main\nimport \"fmt\"\nfunc main() {\n  fmt.Println(\"Hello world!\")\n}";
+var javascript = "console.log('Hello world!');";
+var php = "<?php\n  echo \"Hello world!\";\n?>";
+var python = "print('Hello world!')";
+var ruby = 'puts "Hello world!"';
+var scheme = "(begin\n  (display \"Hello world!\")\n  (newline))";
+export var helloWorld = {
+  cpp: cpp,
+  csharp: csharp,
+  golang: golang,
+  javascript: javascript,
+  php: php,
+  python: python,
+  ruby: ruby,
+  scheme: scheme
+};

package/dist/drawers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type DrawersProps = {
+    leftChild: React.ReactNode;
+    rightChild: React.ReactNode;
+};
+export declare const Drawers: React.FC<DrawersProps>;

package/dist/drawers.js

@@ -0,0 +1,148 @@
+import _styled from "@emotion/styled/base";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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)."; }
+
+import { FlexBox, IconButton } from '@codecademy/gamut';
+import { ArrowChevronLeftIcon, ArrowChevronRightIcon } from '@codecademy/gamut-icons';
+import React, { useState } from 'react';
+
+var 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9kcmF3ZXJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRK0IiLCJmaWxlIjoiLi4vc3JjL2RyYXdlcnMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmxleEJveCwgSWNvbkJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEFycm93Q2hldnJvbkxlZnRJY29uLFxuICBBcnJvd0NoZXZyb25SaWdodEljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuY29uc3QgRHJhd2VyTGFiZWwgPSBzdHlsZWQuc3BhbmBcbiAgcGFkZGluZzogMC44NzVyZW0gMC41cmVtO1xuYDtcblxuY29uc3QgTGVmdERyYXdlckljb24gPSBzdHlsZWQoQXJyb3dDaGV2cm9uTGVmdEljb24pPHsgb3Blbj86IGJvb2xlYW4gfT5gXG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2UtaW4tb3V0O1xuYDtcbmNvbnN0IFJpZ2h0RHJhd2VySWNvbiA9IExlZnREcmF3ZXJJY29uLndpdGhDb21wb25lbnQoQXJyb3dDaGV2cm9uUmlnaHRJY29uKTtcblxuY29uc3QgRHJhd2VyID0gc3R5bGVkKEZsZXhCb3gpPHsgb3Blbj86IGJvb2xlYW47IGhpZGVPbkNsb3NlPzogYm9vbGVhbiB9PmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAkeyh7IG9wZW4sIGhpZGVPbkNsb3NlIH0pID0+IGBcbiAgICBmbGV4LWJhc2lzOiAke29wZW4gPyAnMTAwJScgOiAnMCUnfTtcbiAgICB2aXNpYmlsaXR5OiAkeyFvcGVuICYmIGhpZGVPbkNsb3NlID8gJ2hpZGRlbicgOiAndmlzaWJsZSd9O1xuICAgIHRyYW5zaXRpb246IGZsZXgtYmFzaXMgMC4ycyAke1xuICAgICAgb3BlbiA/ICdlYXNlLW91dCcgOiAnZWFzZS1pbiwgdmlzaWJpbGl0eSAwcyAwLjJzJ1xuICAgIH07XG5cbiAgICAke0xlZnREcmF3ZXJJY29ufSwgJHtSaWdodERyYXdlckljb259IHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlWigke29wZW4gPyAnMCcgOiAnMTgwJ31kZWcpfTtcbiAgICB9XG4gIGB9XG5gO1xuXG5leHBvcnQgdHlwZSBEcmF3ZXJzUHJvcHMgPSB7XG4gIGxlZnRDaGlsZDogUmVhY3QuUmVhY3ROb2RlO1xuICByaWdodENoaWxkOiBSZWFjdC5SZWFjdE5vZGU7XG59O1xuXG5leHBvcnQgY29uc3QgRHJhd2VyczogUmVhY3QuRkM8RHJhd2Vyc1Byb3BzPiA9ICh7IGxlZnRDaGlsZCwgcmlnaHRDaGlsZCB9KSA9PiB7XG4gIGNvbnN0IFtvcGVuLCBzZXRPcGVuXSA9IHVzZVN0YXRlPCdsZWZ0JyB8ICdyaWdodCcgfCAnYm90aCc+KCdib3RoJyk7XG5cbiAgbGV0IGFyaWFMYWJlbENvZGVCdXR0b24gPSAnaGlkZSBjb2RlJztcbiAgbGV0IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiA9ICdoaWRlIG91dHB1dCc7XG4gIGxldCBpc0xlZnRPcGVuID0gZmFsc2U7XG4gIGxldCBpc1JpZ2h0T3BlbiA9IGZhbHNlO1xuXG4gIGlmIChvcGVuID09PSAnbGVmdCcpIHtcbiAgICBhcmlhTGFiZWxDb2RlQnV0dG9uID0gYXJpYUxhYmVsT3V0cHV0QnV0dG9uID0gJ3Nob3cgb3V0cHV0JztcbiAgICBpc0xlZnRPcGVuID0gdHJ1ZTtcbiAgfSBlbHNlIGlmIChvcGVuID09PSAncmlnaHQnKSB7XG4gICAgYXJpYUxhYmVsQ29kZUJ1dHRvbiA9IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiA9ICdzaG93IGNvZGUnO1xuICAgIGlzUmlnaHRPcGVuID0gdHJ1ZTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxGbGV4Qm94PlxuICAgICAgICA8RHJhd2VyXG4gICAgICAgICAgb3Blbj17IWlzUmlnaHRPcGVufVxuICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgIGZsZXhXcmFwPVwibm93cmFwXCJcbiAgICAgICAgICB0ZXh0QWxpZ249XCJsZWZ0XCJcbiAgICAgICAgICBib3JkZXJSaWdodD17MX1cbiAgICAgICAgICBib3JkZXJDb2xvcj1cImdyYXktOTAwXCJcbiAgICAgICAgICBweD17OH1cbiAgICAgICAgPlxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICBpY29uPXtMZWZ0RHJhd2VySWNvbn1cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+XG4gICAgICAgICAgICAgIHNldE9wZW4oKHN0YXRlKSA9PiAoc3RhdGUgPT09ICdib3RoJyA/ICdyaWdodCcgOiAnYm90aCcpKVxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsQ29kZUJ1dHRvbn1cbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9XCJjb2RlLWRyYXdlclwiXG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXshaXNSaWdodE9wZW59XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8RHJhd2VyTGFiZWwgaWQ9XCJjb2RlLWRyYXdlci1sYWJlbFwiPkNvZGU8L0RyYXdlckxhYmVsPlxuICAgICAgICA8L0RyYXdlcj5cbiAgICAgICAgPERyYXdlclxuICAgICAgICAgIG9wZW49eyFpc0xlZnRPcGVufVxuICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgIGZsZXhXcmFwPVwibm93cmFwXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cImZsZXgtZW5kXCJcbiAgICAgICAgICBweD17OH1cbiAgICAgICAgPlxuICAgICAgICAgIDxEcmF3ZXJMYWJlbCBpZD1cIm91dHB1dC1kcmF3ZXItbGFiZWxcIj5PdXRwdXQ8L0RyYXdlckxhYmVsPlxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICBpY29uPXtSaWdodERyYXdlckljb259XG4gICAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PlxuICAgICAgICAgICAgICBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAnbGVmdCcgOiAnYm90aCcpKVxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsT3V0cHV0QnV0dG9ufVxuICAgICAgICAgICAgYXJpYS1jb250cm9scz1cIm91dHB1dC1kcmF3ZXJcIlxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17IWlzTGVmdE9wZW59XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9EcmF3ZXI+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgICA8RmxleEJveFxuICAgICAgICBmbGV4R3Jvdz17MX1cbiAgICAgICAgYm9yZGVyWT17MX1cbiAgICAgICAgYm9yZGVyQ29sb3I9XCJncmF5LTkwMFwiXG4gICAgICAgIGFsaWduSXRlbXM9XCJzdHJldGNoXCJcbiAgICAgICAgb3ZlcmZsb3c9XCJoaWRkZW5cIlxuICAgICAgPlxuICAgICAgICA8RHJhd2VyXG4gICAgICAgICAgaGlkZU9uQ2xvc2VcbiAgICAgICAgICBpZD1cImNvZGUtZHJhd2VyXCJcbiAgICAgICAgICBhcmlhLWxhYmVsbGVkYnk9XCJjb2RlLWRyYXdlci1sYWJlbFwiXG4gICAgICAgICAgb3Blbj17IWlzUmlnaHRPcGVufVxuICAgICAgICAgIGZsZXhHcm93PXswfVxuICAgICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgICBib3JkZXJDb2xvcj1cImdyYXktOTAwXCJcbiAgICAgICAgICBib3JkZXJTdHlsZVJpZ2h0PVwic29saWRcIlxuICAgICAgICAgIGJvcmRlcldpZHRoUmlnaHQ9XCJ0aGluXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtsZWZ0Q2hpbGR9XG4gICAgICAgIDwvRHJhd2VyPlxuICAgICAgICA8RHJhd2VyXG4gICAgICAgICAgaGlkZU9uQ2xvc2VcbiAgICAgICAgICBpZD1cIm91dHB1dC1kcmF3ZXJcIlxuICAgICAgICAgIGFyaWEtbGFiZWxsZWRieT1cIm91dHB1dC1kcmF3ZXItbGFiZWxcIlxuICAgICAgICAgIG9wZW49eyFpc0xlZnRPcGVufVxuICAgICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtyaWdodENoaWxkfVxuICAgICAgICA8L0RyYXdlcj5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9kcmF3ZXJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZdUUiLCJmaWxlIjoiLi4vc3JjL2RyYXdlcnMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmxleEJveCwgSWNvbkJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEFycm93Q2hldnJvbkxlZnRJY29uLFxuICBBcnJvd0NoZXZyb25SaWdodEljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuY29uc3QgRHJhd2VyTGFiZWwgPSBzdHlsZWQuc3BhbmBcbiAgcGFkZGluZzogMC44NzVyZW0gMC41cmVtO1xuYDtcblxuY29uc3QgTGVmdERyYXdlckljb24gPSBzdHlsZWQoQXJyb3dDaGV2cm9uTGVmdEljb24pPHsgb3Blbj86IGJvb2xlYW4gfT5gXG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2UtaW4tb3V0O1xuYDtcbmNvbnN0IFJpZ2h0RHJhd2VySWNvbiA9IExlZnREcmF3ZXJJY29uLndpdGhDb21wb25lbnQoQXJyb3dDaGV2cm9uUmlnaHRJY29uKTtcblxuY29uc3QgRHJhd2VyID0gc3R5bGVkKEZsZXhCb3gpPHsgb3Blbj86IGJvb2xlYW47IGhpZGVPbkNsb3NlPzogYm9vbGVhbiB9PmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAkeyh7IG9wZW4sIGhpZGVPbkNsb3NlIH0pID0+IGBcbiAgICBmbGV4LWJhc2lzOiAke29wZW4gPyAnMTAwJScgOiAnMCUnfTtcbiAgICB2aXNpYmlsaXR5OiAkeyFvcGVuICYmIGhpZGVPbkNsb3NlID8gJ2hpZGRlbicgOiAndmlzaWJsZSd9O1xuICAgIHRyYW5zaXRpb246IGZsZXgtYmFzaXMgMC4ycyAke1xuICAgICAgb3BlbiA/ICdlYXNlLW91dCcgOiAnZWFzZS1pbiwgdmlzaWJpbGl0eSAwcyAwLjJzJ1xuICAgIH07XG5cbiAgICAke0xlZnREcmF3ZXJJY29ufSwgJHtSaWdodERyYXdlckljb259IHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlWigke29wZW4gPyAnMCcgOiAnMTgwJ31kZWcpfTtcbiAgICB9XG4gIGB9XG5gO1xuXG5leHBvcnQgdHlwZSBEcmF3ZXJzUHJvcHMgPSB7XG4gIGxlZnRDaGlsZDogUmVhY3QuUmVhY3ROb2RlO1xuICByaWdodENoaWxkOiBSZWFjdC5SZWFjdE5vZGU7XG59O1xuXG5leHBvcnQgY29uc3QgRHJhd2VyczogUmVhY3QuRkM8RHJhd2Vyc1Byb3BzPiA9ICh7IGxlZnRDaGlsZCwgcmlnaHRDaGlsZCB9KSA9PiB7XG4gIGNvbnN0IFtvcGVuLCBzZXRPcGVuXSA9IHVzZVN0YXRlPCdsZWZ0JyB8ICdyaWdodCcgfCAnYm90aCc+KCdib3RoJyk7XG5cbiAgbGV0IGFyaWFMYWJlbENvZGVCdXR0b24gPSAnaGlkZSBjb2RlJztcbiAgbGV0IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiA9ICdoaWRlIG91dHB1dCc7XG4gIGxldCBpc0xlZnRPcGVuID0gZmFsc2U7XG4gIGxldCBpc1JpZ2h0T3BlbiA9IGZhbHNlO1xuXG4gIGlmIChvcGVuID09PSAnbGVmdCcpIHtcbiAgICBhcmlhTGFiZWxDb2RlQnV0dG9uID0gYXJpYUxhYmVsT3V0cHV0QnV0dG9uID0gJ3Nob3cgb3V0cHV0JztcbiAgICBpc0xlZnRPcGVuID0gdHJ1ZTtcbiAgfSBlbHNlIGlmIChvcGVuID09PSAncmlnaHQnKSB7XG4gICAgYXJpYUxhYmVsQ29kZUJ1dHRvbiA9IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiA9ICdzaG93IGNvZGUnO1xuICAgIGlzUmlnaHRPcGVuID0gdHJ1ZTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxGbGV4Qm94PlxuICAgICAgICA8RHJhd2VyXG4gICAgICAgICAgb3Blbj17IWlzUmlnaHRPcGVufVxuICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgIGZsZXhXcmFwPVwibm93cmFwXCJcbiAgICAgICAgICB0ZXh0QWxpZ249XCJsZWZ0XCJcbiAgICAgICAgICBib3JkZXJSaWdodD17MX1cbiAgICAgICAgICBib3JkZXJDb2xvcj1cImdyYXktOTAwXCJcbiAgICAgICAgICBweD17OH1cbiAgICAgICAgPlxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICBpY29uPXtMZWZ0RHJhd2VySWNvbn1cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+XG4gICAgICAgICAgICAgIHNldE9wZW4oKHN0YXRlKSA9PiAoc3RhdGUgPT09ICdib3RoJyA/ICdyaWdodCcgOiAnYm90aCcpKVxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsQ29kZUJ1dHRvbn1cbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9XCJjb2RlLWRyYXdlclwiXG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXshaXNSaWdodE9wZW59XG4gICAgICAgICAgLz5cbiAgICAgICAgICA8RHJhd2VyTGFiZWwgaWQ9XCJjb2RlLWRyYXdlci1sYWJlbFwiPkNvZGU8L0RyYXdlckxhYmVsPlxuICAgICAgICA8L0RyYXdlcj5cbiAgICAgICAgPERyYXdlclxuICAgICAgICAgIG9wZW49eyFpc0xlZnRPcGVufVxuICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgIGZsZXhXcmFwPVwibm93cmFwXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cImZsZXgtZW5kXCJcbiAgICAgICAgICBweD17OH1cbiAgICAgICAgPlxuICAgICAgICAgIDxEcmF3ZXJMYWJlbCBpZD1cIm91dHB1dC1kcmF3ZXItbGFiZWxcIj5PdXRwdXQ8L0RyYXdlckxhYmVsPlxuICAgICAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgICAgICBpY29uPXtSaWdodERyYXdlckljb259XG4gICAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PlxuICAgICAgICAgICAgICBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAnbGVmdCcgOiAnYm90aCcpKVxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsT3V0cHV0QnV0dG9ufVxuICAgICAgICAgICAgYXJpYS1jb250cm9scz1cIm91dHB1dC1kcmF3ZXJcIlxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17IWlzTGVmdE9wZW59XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9EcmF3ZXI+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgICA8RmxleEJveFxuICAgICAgICBmbGV4R3Jvdz17MX1cbiAgICAgICAgYm9yZGVyWT17MX1cbiAgICAgICAgYm9yZGVyQ29sb3I9XCJncmF5LTkwMFwiXG4gICAgICAgIGFsaWduSXRlbXM9XCJzdHJldGNoXCJcbiAgICAgICAgb3ZlcmZsb3c9XCJoaWRkZW5cIlxuICAgICAgPlxuICAgICAgICA8RHJhd2VyXG4gICAgICAgICAgaGlkZU9uQ2xvc2VcbiAgICAgICAgICBpZD1cImNvZGUtZHJhd2VyXCJcbiAgICAgICAgICBhcmlhLWxhYmVsbGVkYnk9XCJjb2RlLWRyYXdlci1sYWJlbFwiXG4gICAgICAgICAgb3Blbj17IWlzUmlnaHRPcGVufVxuICAgICAgICAgIGZsZXhHcm93PXswfVxuICAgICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgICBib3JkZXJDb2xvcj1cImdyYXktOTAwXCJcbiAgICAgICAgICBib3JkZXJTdHlsZVJpZ2h0PVwic29saWRcIlxuICAgICAgICAgIGJvcmRlcldpZHRoUmlnaHQ9XCJ0aGluXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtsZWZ0Q2hpbGR9XG4gICAgICAgIDwvRHJhd2VyPlxuICAgICAgICA8RHJhd2VyXG4gICAgICAgICAgaGlkZU9uQ2xvc2VcbiAgICAgICAgICBpZD1cIm91dHB1dC1kcmF3ZXJcIlxuICAgICAgICAgIGFyaWEtbGFiZWxsZWRieT1cIm91dHB1dC1kcmF3ZXItbGFiZWxcIlxuICAgICAgICAgIG9wZW49eyFpc0xlZnRPcGVufVxuICAgICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgICAgPlxuICAgICAgICAgIHtyaWdodENoaWxkfVxuICAgICAgICA8L0RyYXdlcj5cbiAgICAgIDwvRmxleEJveD5cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var RightDrawerIcon = LeftDrawerIcon.withComponent(ArrowChevronRightIcon, {
+  target: "e1keub6a3",
+  label: "RightDrawerIcon"
+});
+
+var Drawer = /*#__PURE__*/_styled(FlexBox, {
+  target: "e1keub6a0",
+  label: "Drawer"
+})("position:relative;", function (_ref) {
+  var open = _ref.open,
+      hideOnClose = _ref.hideOnClose;
+  return "\n    flex-basis: ".concat(open ? '100%' : '0%', ";\n    visibility: ").concat(!open && hideOnClose ? 'hidden' : 'visible', ";\n    transition: flex-basis 0.2s ").concat(open ? 'ease-out' : 'ease-in, visibility 0s 0.2s', ";\n\n    ").concat(LeftDrawerIcon, ", ").concat(RightDrawerIcon, " {\n      transform: rotateZ(").concat(open ? '0' : '180', "deg)};\n    }\n  ");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9kcmF3ZXJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnlFIiwiZmlsZSI6Ii4uL3NyYy9kcmF3ZXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZsZXhCb3gsIEljb25CdXR0b24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBBcnJvd0NoZXZyb25MZWZ0SWNvbixcbiAgQXJyb3dDaGV2cm9uUmlnaHRJY29uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IERyYXdlckxhYmVsID0gc3R5bGVkLnNwYW5gXG4gIHBhZGRpbmc6IDAuODc1cmVtIDAuNXJlbTtcbmA7XG5cbmNvbnN0IExlZnREcmF3ZXJJY29uID0gc3R5bGVkKEFycm93Q2hldnJvbkxlZnRJY29uKTx7IG9wZW4/OiBib29sZWFuIH0+YFxuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlLWluLW91dDtcbmA7XG5jb25zdCBSaWdodERyYXdlckljb24gPSBMZWZ0RHJhd2VySWNvbi53aXRoQ29tcG9uZW50KEFycm93Q2hldnJvblJpZ2h0SWNvbik7XG5cbmNvbnN0IERyYXdlciA9IHN0eWxlZChGbGV4Qm94KTx7IG9wZW4/OiBib29sZWFuOyBoaWRlT25DbG9zZT86IGJvb2xlYW4gfT5gXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgJHsoeyBvcGVuLCBoaWRlT25DbG9zZSB9KSA9PiBgXG4gICAgZmxleC1iYXNpczogJHtvcGVuID8gJzEwMCUnIDogJzAlJ307XG4gICAgdmlzaWJpbGl0eTogJHshb3BlbiAmJiBoaWRlT25DbG9zZSA/ICdoaWRkZW4nIDogJ3Zpc2libGUnfTtcbiAgICB0cmFuc2l0aW9uOiBmbGV4LWJhc2lzIDAuMnMgJHtcbiAgICAgIG9wZW4gPyAnZWFzZS1vdXQnIDogJ2Vhc2UtaW4sIHZpc2liaWxpdHkgMHMgMC4ycydcbiAgICB9O1xuXG4gICAgJHtMZWZ0RHJhd2VySWNvbn0sICR7UmlnaHREcmF3ZXJJY29ufSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZVooJHtvcGVuID8gJzAnIDogJzE4MCd9ZGVnKX07XG4gICAgfVxuICBgfVxuYDtcblxuZXhwb3J0IHR5cGUgRHJhd2Vyc1Byb3BzID0ge1xuICBsZWZ0Q2hpbGQ6IFJlYWN0LlJlYWN0Tm9kZTtcbiAgcmlnaHRDaGlsZDogUmVhY3QuUmVhY3ROb2RlO1xufTtcblxuZXhwb3J0IGNvbnN0IERyYXdlcnM6IFJlYWN0LkZDPERyYXdlcnNQcm9wcz4gPSAoeyBsZWZ0Q2hpbGQsIHJpZ2h0Q2hpbGQgfSkgPT4ge1xuICBjb25zdCBbb3Blbiwgc2V0T3Blbl0gPSB1c2VTdGF0ZTwnbGVmdCcgfCAncmlnaHQnIHwgJ2JvdGgnPignYm90aCcpO1xuXG4gIGxldCBhcmlhTGFiZWxDb2RlQnV0dG9uID0gJ2hpZGUgY29kZSc7XG4gIGxldCBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnaGlkZSBvdXRwdXQnO1xuICBsZXQgaXNMZWZ0T3BlbiA9IGZhbHNlO1xuICBsZXQgaXNSaWdodE9wZW4gPSBmYWxzZTtcblxuICBpZiAob3BlbiA9PT0gJ2xlZnQnKSB7XG4gICAgYXJpYUxhYmVsQ29kZUJ1dHRvbiA9IGFyaWFMYWJlbE91dHB1dEJ1dHRvbiA9ICdzaG93IG91dHB1dCc7XG4gICAgaXNMZWZ0T3BlbiA9IHRydWU7XG4gIH0gZWxzZSBpZiAob3BlbiA9PT0gJ3JpZ2h0Jykge1xuICAgIGFyaWFMYWJlbENvZGVCdXR0b24gPSBhcmlhTGFiZWxPdXRwdXRCdXR0b24gPSAnc2hvdyBjb2RlJztcbiAgICBpc1JpZ2h0T3BlbiA9IHRydWU7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8RmxleEJveD5cbiAgICAgICAgPERyYXdlclxuICAgICAgICAgIG9wZW49eyFpc1JpZ2h0T3Blbn1cbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgICBmbGV4V3JhcD1cIm5vd3JhcFwiXG4gICAgICAgICAgdGV4dEFsaWduPVwibGVmdFwiXG4gICAgICAgICAgYm9yZGVyUmlnaHQ9ezF9XG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJncmF5LTkwMFwiXG4gICAgICAgICAgcHg9ezh9XG4gICAgICAgID5cbiAgICAgICAgICA8SWNvbkJ1dHRvblxuICAgICAgICAgICAgaWNvbj17TGVmdERyYXdlckljb259XG4gICAgICAgICAgICB2YXJpYW50PVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICBvbkNsaWNrPXsoKSA9PlxuICAgICAgICAgICAgICBzZXRPcGVuKChzdGF0ZSkgPT4gKHN0YXRlID09PSAnYm90aCcgPyAncmlnaHQnIDogJ2JvdGgnKSlcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9e2FyaWFMYWJlbENvZGVCdXR0b259XG4gICAgICAgICAgICBhcmlhLWNvbnRyb2xzPVwiY29kZS1kcmF3ZXJcIlxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17IWlzUmlnaHRPcGVufVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPERyYXdlckxhYmVsIGlkPVwiY29kZS1kcmF3ZXItbGFiZWxcIj5Db2RlPC9EcmF3ZXJMYWJlbD5cbiAgICAgICAgPC9EcmF3ZXI+XG4gICAgICAgIDxEcmF3ZXJcbiAgICAgICAgICBvcGVuPXshaXNMZWZ0T3Blbn1cbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgICBmbGV4V3JhcD1cIm5vd3JhcFwiXG4gICAgICAgICAganVzdGlmeUNvbnRlbnQ9XCJmbGV4LWVuZFwiXG4gICAgICAgICAgcHg9ezh9XG4gICAgICAgID5cbiAgICAgICAgICA8RHJhd2VyTGFiZWwgaWQ9XCJvdXRwdXQtZHJhd2VyLWxhYmVsXCI+T3V0cHV0PC9EcmF3ZXJMYWJlbD5cbiAgICAgICAgICA8SWNvbkJ1dHRvblxuICAgICAgICAgICAgaWNvbj17UmlnaHREcmF3ZXJJY29ufVxuICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgb25DbGljaz17KCkgPT5cbiAgICAgICAgICAgICAgc2V0T3Blbigoc3RhdGUpID0+IChzdGF0ZSA9PT0gJ2JvdGgnID8gJ2xlZnQnIDogJ2JvdGgnKSlcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGFyaWEtbGFiZWw9e2FyaWFMYWJlbE91dHB1dEJ1dHRvbn1cbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9XCJvdXRwdXQtZHJhd2VyXCJcbiAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9eyFpc0xlZnRPcGVufVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvRHJhd2VyPlxuICAgICAgPC9GbGV4Qm94PlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAgZmxleEdyb3c9ezF9XG4gICAgICAgIGJvcmRlclk9ezF9XG4gICAgICAgIGJvcmRlckNvbG9yPVwiZ3JheS05MDBcIlxuICAgICAgICBhbGlnbkl0ZW1zPVwic3RyZXRjaFwiXG4gICAgICAgIG92ZXJmbG93PVwiaGlkZGVuXCJcbiAgICAgID5cbiAgICAgICAgPERyYXdlclxuICAgICAgICAgIGhpZGVPbkNsb3NlXG4gICAgICAgICAgaWQ9XCJjb2RlLWRyYXdlclwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PVwiY29kZS1kcmF3ZXItbGFiZWxcIlxuICAgICAgICAgIG9wZW49eyFpc1JpZ2h0T3Blbn1cbiAgICAgICAgICBmbGV4R3Jvdz17MH1cbiAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJncmF5LTkwMFwiXG4gICAgICAgICAgYm9yZGVyU3R5bGVSaWdodD1cInNvbGlkXCJcbiAgICAgICAgICBib3JkZXJXaWR0aFJpZ2h0PVwidGhpblwiXG4gICAgICAgID5cbiAgICAgICAgICB7bGVmdENoaWxkfVxuICAgICAgICA8L0RyYXdlcj5cbiAgICAgICAgPERyYXdlclxuICAgICAgICAgIGhpZGVPbkNsb3NlXG4gICAgICAgICAgaWQ9XCJvdXRwdXQtZHJhd2VyXCJcbiAgICAgICAgICBhcmlhLWxhYmVsbGVkYnk9XCJvdXRwdXQtZHJhd2VyLWxhYmVsXCJcbiAgICAgICAgICBvcGVuPXshaXNMZWZ0T3Blbn1cbiAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgID5cbiAgICAgICAgICB7cmlnaHRDaGlsZH1cbiAgICAgICAgPC9EcmF3ZXI+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */"));
+
+export var Drawers = function Drawers(_ref2) {
+  var leftChild = _ref2.leftChild,
+      rightChild = _ref2.rightChild;
+
+  var _useState = useState('both'),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var ariaLabelCodeButton = 'hide code';
+  var ariaLabelOutputButton = 'hide output';
+  var isLeftOpen = false;
+  var 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: function onClick() {
+      return setOpen(function (state) {
+        return 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: function onClick() {
+      return setOpen(function (state) {
+        return 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",
+    open: !isLeftOpen,
+    overflow: "hidden"
+  }, rightChild)));
+};

package/dist/editor.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { LanguageOption } from './consts';
+import { CodebytesChangeHandler } from './types';
+declare type EditorProps = {
+    hideCopyButton: boolean;
+    language: LanguageOption;
+    text: string;
+    onChange: (text: string) => void;
+    snippetsBaseUrl?: string;
+    onCopy?: CodebytesChangeHandler;
+};
+export declare const Editor: React.FC<EditorProps>;
+export {};