diff --git a/addons/info/README.md b/addons/info/README.md
deleted file mode 100644
index 7a19479ec3f8..000000000000
--- a/addons/info/README.md
+++ /dev/null
@@ -1,338 +0,0 @@
-# Storybook Info Addon
-
-Storybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).
-Useful when you want to display usage or other types of documentation alongside your story.
-
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/info/docs/home-screenshot.png)
-
-## Installation
-
-Install the following npm module:
-
-```sh
-npm i -D @storybook/addon-info
-```
-
-## Basic usage
-
-Then, add `withInfo` as a decorator to your book of stories.
-It is possible to add `info` by default to all or a subsection of stories by using a global or story decorator.
-
-It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
-
-```js
-// Globally in your .storybook/preview.js.
-import { addDecorator } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-
-addDecorator(withInfo); 
-```
-
-or
-
-```js
-export default {
-  title: 'Component',
-  decorators: [withInfo],
-};
-```
-
-Then, you can use the `info` parameter to either pass certain options or specific documentation text to your stories.
-A complete list of possible configurations can be found [in a later section](#setting-global-options).
-This can be done per book of stories:
-
-```js
-import Component from './Component';
-
-export default {
-  title: 'Component',
-  parameters: {
-    info: {},
-  },
-};
-```
-
-...or for each story individually:
-
-```js
-import Component from './Component';
-
-export default {
-  title: 'Component',
-};
-
-export const defaultView = () => <Component />;
-defaultView = {
-  parameters: {
-    info: { inline: true },
-  },
-};
-```
-
-It is also possible to disable the `info` addon entirely.
-Depending on the scope at which you want to disable the addon, pass the following parameters object either to an individual story or to an `addParameters` call.
-
-```
-info: {
-  disable: true,
-}
-```
-
-## Markdown
-
-The `info` addon also supports markdown.
-To use markdown as additional textual documentation for your stories, either pass it directly as a String to the `info` parameters, or use the `text` option.
-
-```js
-info: {
-  text: `
-    description or documentation about my component, supports markdown
-
-    ~~~js
-    <Button>Click Here</Button>
-    ~~~
-  `,
-}
-```
-
-## Setting Global Options
-
-To configure default options for all usage of the info addon, pass a option object along with the decorator in `.storybook/preview.js`.
-
-```js
-import { withInfo } from '@storybook/addon-info';
-
-addDecorator(
-  withInfo({
-    header: false,
-  })
-);
-```
-
-Configuration parameters can be set at 3 different locations: passed as default options along the `addDecorator` call, passed as an object of parameters to a book of stories to the `addParameters` call, and passed as direct parameters to each individual story.
-In order, all of them will be combined together, with a later call overriding the previous set configurations on a per-key basis.
-
-## Options and Defaults
-
-```js
-{
-  /**
-   * Text to display with storybook component
-   */
-  text?: string;
-  /**
-   * Displays info inline vs click button to view
-   * @default false
-   */
-  inline: boolean,
-  /**
-   * Toggles display of header with component name and description
-   * @default true
-   */
-  header: boolean,
-  /**
-   * Displays the source of story Component
-   * @default true
-   */
-  source: boolean,
-  /**
-   * Components used in story
-   * Displays Prop Tables with these components
-   * @default []
-   */
-  propTables: Array<React.ComponentType>,
-  /**
-   * Exclude Components from being shown in Prop Tables section
-   * Accepts an array of component classes or functions
-   * @default []
-   */
-  propTablesExclude: Array<React.ComponentType>,
-  /**
-   * Overrides styles of addon. The object should follow this shape:
-   * https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.
-   * This prop can also accept a function which has the default stylesheet passed as an argument
-   */
-  styles: Object | Function,
-  /**
-   * Overrides components used to display markdown
-   * @default {}
-   */
-  components: { [key: string]: React.ComponentType },
-  /**
-   * Max props to display per line in source code
-   * @default 3
-   */
-  maxPropsIntoLine: number,
-  /**
-   * Displays the first 10 characters of the prop name
-   * @default 3
-   */
-  maxPropObjectKeys: number,
-  /**
-   * Displays the first 10 items in the default prop array
-   * @default 3
-   */
-  maxPropArrayLength: number,
-  /**
-   * Displays the first 100 characters in the default prop string
-   * @default 50
-   */
-  maxPropStringLength: number,
-  /**
-   * Override the component used to render the props table
-   * @default PropTable
-   */
-  TableComponent: React.ComponentType,
-  /**
-   * Will exclude any respective properties whose name is included in array
-   * @default []
-   */
-  excludedPropTypes: Array<string>,
-}
-```
-
-### Rendering a Custom Table
-
-The `TableComponent` option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.
-
-```js
-  {
-    propDefinitions: Array<{
-      property: string, // The name of the prop
-      propType: Object | string, // The prop type. TODO: info about what this object is...
-      required: boolean, // True if the prop is required
-      description: string, // The description of the prop
-      defaultValue: any // The default value of the prop
-    }>
-  }
-```
-
-Example:
-
-```js
-// button.js
-// @flow
-import React from 'react';
-
-const paddingStyles = {
-  small: '4px 8px',
-  medium: '8px 16px',
-};
-
-const Button = ({
-  size,
-  ...rest
-}: {
-  /** The size of the button */
-  size: 'small' | 'medium',
-}) => {
-  const style = {
-    padding: paddingStyles[size] || '',
-  };
-  return <button style={style} {...rest} />;
-};
-Button.defaultProps = {
-  size: 'medium',
-};
-
-export default Button;
-```
-
-```js
-// stories.js
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import Button from './button';
-
-export default {
-  title: 'Button',
-  component: Button,
-  parameters: {
-    info: TableComponent,
-  },
-};
-
-const Red = props => <span style={{ color: 'red' }} {...props} />;
-
-const TableComponent = ({ propDefinitions }) => {
-  const props = propDefinitions.map(
-    ({ property, propType, required, description, defaultValue }) => {
-      return (
-        <tr key={property}>
-          <td>
-            {property}
-            {required ? <Red>*</Red> : null}
-          </td>
-          <td>{propType.name}</td>
-          <td>{defaultValue}</td>
-          <td>{description}</td>
-        </tr>
-      );
-    }
-  );
-
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>name</th>
-          <th>type</th>
-          <th>default</th>
-          <th>description</th>
-        </tr>
-      </thead>
-      <tbody>{props}</tbody>
-    </table>
-  );
-};
-
-export const defaultView = () => <Button />;
-```
-
-### React Docgen Integration
-
-React Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.
-When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.
-
-```js
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/** Button component description */
-const DocgenButton = ({ disabled, label, style, onClick }) => (
-  <button disabled={disabled} style={style} onClick={onClick}>
-    {label}
-  </button>
-);
-
-DocgenButton.defaultProps = {
-  disabled: false,
-  onClick: () => {},
-  style: {},
-};
-
-DocgenButton.propTypes = {
-  /** Boolean indicating whether the button should render as disabled */
-  disabled: PropTypes.bool,
-  /** button label. */
-  label: PropTypes.string.isRequired,
-  /** onClick handler */
-  onClick: PropTypes.func,
-  /** component styles */
-  style: PropTypes.shape,
-};
-
-export default DocgenButton;
-```
-
-Comments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.
-
-## The FAQ
-
-**Components lose their names on static build**
-
-Component names also get minified with other javascript code when building for production.
-When creating components, set the `displayName` static property to show the correct component name on static builds.
diff --git a/addons/info/docs/home-screenshot.png b/addons/info/docs/home-screenshot.png
deleted file mode 100644
index e31189043753..000000000000
Binary files a/addons/info/docs/home-screenshot.png and /dev/null differ
diff --git a/addons/info/package.json b/addons/info/package.json
deleted file mode 100644
index 72e410117b22..000000000000
--- a/addons/info/package.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "name": "@storybook/addon-info",
-  "version": "6.0.0-alpha.2",
-  "description": "A Storybook addon to show additional information for your stories.",
-  "keywords": [
-    "addon",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/info",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/info"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/index.js",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.2",
-    "@storybook/client-logger": "6.0.0-alpha.2",
-    "@storybook/components": "6.0.0-alpha.2",
-    "@storybook/theming": "6.0.0-alpha.2",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "marksy": "^8.0.0",
-    "nested-object-assign": "^1.0.3",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.3",
-    "react-addons-create-fragment": "^15.6.2",
-    "react-element-to-jsx-string": "^14.0.2",
-    "react-is": "^16.8.3",
-    "react-lifecycles-compat": "^3.0.4",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "react-test-renderer": "^16.8.3"
-  },
-  "peerDependencies": {
-    "react": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
-}
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
deleted file mode 100644
index 7dc48103b4f2..000000000000
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,10004 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`addon Info should render <Info /> and external markdown 1`] = `
-<Component>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={Object {}}
-    excludedPropTypes={Array []}
-    info="<h1>HTML Mock</h1>"
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={Array []}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={false}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div
-      style={
-        Object {
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div>
-        It's a 
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <button
-      className="info__show-button"
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#027ac5",
-          "border": "none",
-          "borderRadius": "0 0 0 5px",
-          "color": "#fff",
-          "cursor": "pointer",
-          "display": "block",
-          "fontFamily": "sans-serif",
-          "fontSize": 12,
-          "padding": "5px 15px",
-          "position": "fixed",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      type="button"
-    >
-      Show Info
-    </button>
-  </Story>
-</Component>
-`;
-
-exports[`addon Info should render <Info /> and markdown 1`] = `
-<Component>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={Object {}}
-    excludedPropTypes={Array []}
-    info="# Test story
-## with markdown info
-containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={Array []}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={false}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div
-      style={
-        Object {
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div>
-        It's a 
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <button
-      className="info__show-button"
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#027ac5",
-          "border": "none",
-          "borderRadius": "0 0 0 5px",
-          "color": "#fff",
-          "cursor": "pointer",
-          "display": "block",
-          "fontFamily": "sans-serif",
-          "fontSize": 12,
-          "padding": "5px 15px",
-          "position": "fixed",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      type="button"
-    >
-      Show Info
-    </button>
-  </Story>
-</Component>
-`;
-
-exports[`addon Info should render <Info /> for memoized component 1`] = `
-<Component>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={Object {}}
-    excludedPropTypes={Array []}
-    info=""
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={null}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={false}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div
-      style={
-        Object {
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div>
-        It's a 
-         story:
-        <Memo(TestComponent)
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </Memo(TestComponent)>
-      </div>
-    </div>
-    <button
-      className="info__show-button"
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#027ac5",
-          "border": "none",
-          "borderRadius": "0 0 0 5px",
-          "color": "#fff",
-          "cursor": "pointer",
-          "display": "block",
-          "fontFamily": "sans-serif",
-          "fontSize": 12,
-          "padding": "5px 15px",
-          "position": "fixed",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      type="button"
-    >
-      Show Info
-    </button>
-  </Story>
-</Component>
-`;
-
-exports[`addon Info should render component description if story kind matches component 1`] = `
-.emotion-10 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-  border: 1px solid rgba(0,0,0,.1);
-  background: #FFFFFF;
-}
-
-.emotion-5 {
-  position: relative;
-}
-
-.emotion-5 code {
-  padding-right: 10px;
-}
-
-.emotion-5 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-5 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.string {
-  color: #A31515;
-}
-
-.emotion-5 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-5 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-5 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.function {
-  color: #393A34;
-}
-
-.emotion-5 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-5 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-5 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-5 * .token.tag {
-  color: #800000;
-}
-
-.emotion-5 * .token.selector {
-  color: #800000;
-}
-
-.emotion-5 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-5 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-5 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 10px;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-9 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  max-width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #FFFFFF;
-  z-index: 1;
-}
-
-.emotion-8 {
-  border: 0 none;
-  padding: 4px 10px;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #333333;
-  background: #FFFFFF;
-  font-size: 12px;
-  line-height: 16px;
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-weight: 700;
-  border-top: 1px solid rgba(0,0,0,.1);
-  border-left: 1px solid rgba(0,0,0,.1);
-  margin-left: -1px;
-  border-radius: 4px 0 0 0;
-}
-
-.emotion-8:not(:last-child) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-8 + * {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-radius: 0;
-}
-
-.emotion-8:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-<Info>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={
-      Object {
-        "kind": "TestComponent",
-        "name": "Basic test",
-      }
-    }
-    excludedPropTypes={Array []}
-    info=""
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={null}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={true}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "borderBottom": "1px solid #eee",
-              "marginBottom": 10,
-              "paddingTop": 10,
-            }
-          }
-        >
-          <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            TestComponent
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            Basic test
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div
-      id="story-root"
-      style={Object {}}
-    >
-      <div>
-        It's a 
-        Basic test
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <H1
-          context={Object {}}
-          id="awesome-test-component-description"
-          key="0"
-        >
-          <h1
-            id="awesome-test-component-description"
-            style={
-              Object {
-                "borderBottom": "1px solid #eee",
-                "fontSize": "40px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Awesome test component description
-          </h1>
-        </H1>
-        <H2
-          context={Object {}}
-          id="awesome-test-component-description-with-markdown-support"
-          key="1"
-        >
-          <h2
-            id="awesome-test-component-description-with-markdown-support"
-            style={
-              Object {
-                "fontSize": "30px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            with markdown support
-          </h2>
-        </H2>
-        <P
-          context={Object {}}
-          key="4"
-        >
-          <p>
-            <strong
-              key="2"
-            >
-              bold
-            </strong>
-             
-            <em
-              key="3"
-            >
-              cursive
-            </em>
-          </p>
-        </P>
-        <Code
-          code="a;"
-          key="5"
-          language="js"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="js"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="js"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    a
-                                                    <span
-                                                      className="token punctuation"
-                                                      key="code-segement1"
-                                                    >
-                                                      ;
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-        <h1
-          style={
-            Object {
-              "borderBottom": "1px solid #EEE",
-              "fontSize": "25px",
-              "margin": "20px 0 0 0",
-              "padding": "0 0 5px 0",
-            }
-          }
-        >
-          Story Source
-        </h1>
-        <Code
-          code="<div>
-  It's a Basic test story:
-  <TestComponent
-    array={[
-      1,
-      2,
-      3
-    ]}
-    bool
-    func={function noRefCheck() {}}
-    number={7}
-    obj={{
-      a: 'a',
-      b: 'b'
-    }}
-    string=\\"seven\\"
-  />
-</div>"
-          format={false}
-          language="jsx"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="jsx"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="jsx"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement0"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement1"
-                                                    >
-                                                      
-  It's a Basic test story:
-  
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement2"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        <span
-                                                          className="token class-name"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          TestComponent
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-2"
-                                                      >
-                                                        array
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-3"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          [
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          1
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          2
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          3
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-12"
-                                                        >
-                                                          ]
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-5"
-                                                      >
-                                                        bool
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-7"
-                                                      >
-                                                        func
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-8"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token keyword"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          function
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token function"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          noRefCheck
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          (
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          )
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-10"
-                                                      >
-                                                        number
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-11"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          7
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-13"
-                                                      >
-                                                        obj
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-14"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        
-      a
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          'a'
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      b
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-11"
-                                                        >
-                                                          'b'
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-14"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-16"
-                                                      >
-                                                        string
-                                                      </span>
-                                                      <span
-                                                        className="token attr-value"
-                                                        key="code-segment-1-17"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          "
-                                                        </span>
-                                                        seven
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          "
-                                                        </span>
-                                                      </span>
-                                                      
-  
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-19"
-                                                      >
-                                                        /&gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement3"
-                                                    >
-                                                      
-
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement4"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;/
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-      </div>
-    </div>
-  </Story>
-</Info>
-`;
-
-exports[`addon Info should render component description if story name matches component 1`] = `
-.emotion-10 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-  border: 1px solid rgba(0,0,0,.1);
-  background: #FFFFFF;
-}
-
-.emotion-5 {
-  position: relative;
-}
-
-.emotion-5 code {
-  padding-right: 10px;
-}
-
-.emotion-5 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-5 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-5 * .token.string {
-  color: #A31515;
-}
-
-.emotion-5 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-5 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-5 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-5 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-5 * .token.function {
-  color: #393A34;
-}
-
-.emotion-5 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-5 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-5 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-5 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-5 * .token.tag {
-  color: #800000;
-}
-
-.emotion-5 * .token.selector {
-  color: #800000;
-}
-
-.emotion-5 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-5 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-5 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-5 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-5 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 10px;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-9 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  max-width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #FFFFFF;
-  z-index: 1;
-}
-
-.emotion-8 {
-  border: 0 none;
-  padding: 4px 10px;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #333333;
-  background: #FFFFFF;
-  font-size: 12px;
-  line-height: 16px;
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-weight: 700;
-  border-top: 1px solid rgba(0,0,0,.1);
-  border-left: 1px solid rgba(0,0,0,.1);
-  margin-left: -1px;
-  border-radius: 4px 0 0 0;
-}
-
-.emotion-8:not(:last-child) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-8 + * {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-radius: 0;
-}
-
-.emotion-8:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-<Info>
-  <Story
-    PropTable={[Function]}
-    components={
-      Object {
-        "a": [Function],
-        "code": [Function],
-        "h1": [Function],
-        "h2": [Function],
-        "h3": [Function],
-        "h4": [Function],
-        "h5": [Function],
-        "h6": [Function],
-        "li": [Function],
-        "p": [Function],
-        "ul": [Function],
-      }
-    }
-    context={
-      Object {
-        "kind": "Test Components",
-        "name": "TestComponent",
-      }
-    }
-    excludedPropTypes={Array []}
-    info=""
-    maxPropArrayLength={3}
-    maxPropObjectKeys={3}
-    maxPropStringLength={50}
-    maxPropsIntoLine={3}
-    propTableCompare={[Function]}
-    propTables={null}
-    propTablesExclude={Array []}
-    showHeader={true}
-    showInline={true}
-    showSource={true}
-    styles={[Function]}
-  >
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "borderBottom": "1px solid #eee",
-              "marginBottom": 10,
-              "paddingTop": 10,
-            }
-          }
-        >
-          <h1
-            style={
-              Object {
-                "fontSize": "35px",
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Test Components
-          </h1>
-          <h2
-            style={
-              Object {
-                "fontSize": "22px",
-                "fontWeight": 400,
-                "margin": "0 0 10px 0",
-                "padding": 0,
-              }
-            }
-          >
-            TestComponent
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div
-      id="story-root"
-      style={Object {}}
-    >
-      <div>
-        It's a 
-        TestComponent
-         story:
-        <TestComponent
-          array={
-            Array [
-              1,
-              2,
-              3,
-            ]
-          }
-          bool={true}
-          func={[Function]}
-          number={7}
-          obj={
-            Object {
-              "a": "a",
-              "b": "b",
-            }
-          }
-          string="seven"
-        >
-          <div>
-            <h1>
-              x =&gt; x + 1
-            </h1>
-            <h2>
-              [object Object]
-            </h2>
-            <h3>
-              1,2,3
-            </h3>
-            <h4>
-              7
-            </h4>
-            <h5>
-              seven
-            </h5>
-            <h6>
-              true
-            </h6>
-            <p>
-              undefined
-            </p>
-            <a
-              href="#"
-            >
-              test
-            </a>
-            <code>
-              storiesOf
-            </code>
-            <ul>
-              <li>
-                1
-              </li>
-              <li>
-                2
-              </li>
-            </ul>
-          </div>
-        </TestComponent>
-      </div>
-    </div>
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <H1
-          context={Object {}}
-          id="awesome-test-component-description"
-          key="0"
-        >
-          <h1
-            id="awesome-test-component-description"
-            style={
-              Object {
-                "borderBottom": "1px solid #eee",
-                "fontSize": "40px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            Awesome test component description
-          </h1>
-        </H1>
-        <H2
-          context={Object {}}
-          id="awesome-test-component-description-with-markdown-support"
-          key="1"
-        >
-          <h2
-            id="awesome-test-component-description-with-markdown-support"
-            style={
-              Object {
-                "fontSize": "30px",
-                "fontWeight": 600,
-                "margin": 0,
-                "padding": 0,
-              }
-            }
-          >
-            with markdown support
-          </h2>
-        </H2>
-        <P
-          context={Object {}}
-          key="4"
-        >
-          <p>
-            <strong
-              key="2"
-            >
-              bold
-            </strong>
-             
-            <em
-              key="3"
-            >
-              cursive
-            </em>
-          </p>
-        </P>
-        <Code
-          code="a;"
-          key="5"
-          language="js"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="js"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="js"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    a
-                                                    <span
-                                                      className="token punctuation"
-                                                      key="code-segement1"
-                                                    >
-                                                      ;
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-        <h1
-          style={
-            Object {
-              "borderBottom": "1px solid #EEE",
-              "fontSize": "25px",
-              "margin": "20px 0 0 0",
-              "padding": "0 0 5px 0",
-            }
-          }
-        >
-          Story Source
-        </h1>
-        <Code
-          code="<div>
-  It's a TestComponent story:
-  <TestComponent
-    array={[
-      1,
-      2,
-      3
-    ]}
-    bool
-    func={function noRefCheck() {}}
-    number={7}
-    obj={{
-      a: 'a',
-      b: 'b'
-    }}
-    string=\\"seven\\"
-  />
-</div>"
-          format={false}
-          language="jsx"
-        >
-          <ThemeProvider
-            theme={
-              Object {
-                "addonActionsTheme": Object {
-                  "ARROW_ANIMATION_DURATION": "0",
-                  "ARROW_COLOR": "rgba(0,0,0,0.3)",
-                  "ARROW_FONT_SIZE": 8,
-                  "ARROW_MARGIN_RIGHT": 4,
-                  "BASE_BACKGROUND_COLOR": "transparent",
-                  "BASE_COLOR": "#333333",
-                  "BASE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "BASE_FONT_SIZE": 13,
-                  "BASE_LINE_HEIGHT": "18px",
-                  "HTML_ATTRIBUTE_NAME_COLOR": "rgb(153, 69, 0)",
-                  "HTML_ATTRIBUTE_VALUE_COLOR": "rgb(26, 26, 166)",
-                  "HTML_COMMENT_COLOR": "rgb(35, 110, 37)",
-                  "HTML_DOCTYPE_COLOR": "rgb(192, 192, 192)",
-                  "HTML_TAGNAME_COLOR": "rgb(136, 18, 128)",
-                  "HTML_TAGNAME_TEXT_TRANSFORM": "lowercase",
-                  "HTML_TAG_COLOR": "rgb(168, 148, 166)",
-                  "OBJECT_NAME_COLOR": "rgb(136, 19, 145)",
-                  "OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES": 10,
-                  "OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES": 5,
-                  "OBJECT_VALUE_BOOLEAN_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_FUNCTION_PREFIX_COLOR": "rgb(13, 34, 170)",
-                  "OBJECT_VALUE_NULL_COLOR": "rgb(128, 128, 128)",
-                  "OBJECT_VALUE_NUMBER_COLOR": "rgb(28, 0, 207)",
-                  "OBJECT_VALUE_REGEXP_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_STRING_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_SYMBOL_COLOR": "rgb(196, 26, 22)",
-                  "OBJECT_VALUE_UNDEFINED_COLOR": "rgb(128, 128, 128)",
-                  "TABLE_BORDER_COLOR": "#aaa",
-                  "TABLE_DATA_BACKGROUND_IMAGE": "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-                  "TABLE_DATA_BACKGROUND_SIZE": "128px 32px",
-                  "TABLE_SORT_ICON_COLOR": "#6e6e6e",
-                  "TABLE_TH_BACKGROUND_COLOR": "#eee",
-                  "TABLE_TH_HOVER_COLOR": "hsla(0, 0%, 90%, 1)",
-                  "TREENODE_FONT_FAMILY": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  "TREENODE_FONT_SIZE": 13,
-                  "TREENODE_LINE_HEIGHT": "18px",
-                  "TREENODE_PADDING_LEFT": 12,
-                },
-                "animation": Object {
-                  "float": Object {
-                    "anim": 1,
-                    "name": "animation-6tolu8",
-                    "styles": "@keyframes animation-6tolu8{
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-}",
-                    "toString": [Function],
-                  },
-                  "glow": Object {
-                    "anim": 1,
-                    "name": "animation-r0iffl",
-                    "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    "toString": [Function],
-                  },
-                  "hoverable": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "1o7rzh8-hoverable",
-                    "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;",
-                    "toString": [Function],
-                  },
-                  "inlineGlow": Object {
-                    "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
-                    "name": "x4tfcc-inlineGlow",
-                    "next": Object {
-                      "name": "animation-r0iffl",
-                      "next": undefined,
-                      "styles": "@keyframes animation-r0iffl{
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-}",
-                    },
-                    "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;",
-                    "toString": [Function],
-                  },
-                  "jiggle": Object {
-                    "anim": 1,
-                    "name": "animation-ynpq7w",
-                    "styles": "@keyframes animation-ynpq7w{
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-}",
-                    "toString": [Function],
-                  },
-                  "rotate360": Object {
-                    "anim": 1,
-                    "name": "animation-u07e3c",
-                    "styles": "@keyframes animation-u07e3c{
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}",
-                    "toString": [Function],
-                  },
-                },
-                "appBorderColor": "rgba(0,0,0,.1)",
-                "appBorderRadius": 4,
-                "background": Object {
-                  "app": "#F6F9FC",
-                  "bar": "#FFFFFF",
-                  "content": "#FFFFFF",
-                  "critical": "#FF4400",
-                  "gridCellSize": 10,
-                  "hoverable": "rgba(0,0,0,.05)",
-                  "negative": "#FEDED2",
-                  "positive": "#E1FFD4",
-                  "warning": "#FFF5CF",
-                },
-                "barBg": "#FFFFFF",
-                "barSelectedColor": "#1EA7FD",
-                "barTextColor": "#999999",
-                "base": "light",
-                "brand": Object {
-                  "image": undefined,
-                  "title": undefined,
-                  "url": undefined,
-                },
-                "code": Object {
-                  "language-json .token.boolean": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.number": Object {
-                    "color": "#0000ff",
-                  },
-                  "language-json .token.property": Object {
-                    "color": "#2B91AF",
-                  },
-                  "namespace": Object {
-                    "opacity": 0.7,
-                  },
-                  "token": Object {
-                    "&.atrule": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.attr-name": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.attr-value": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.bold": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.boolean": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.cdata": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.class-name": Object {
-                      "color": "#2B91AF",
-                    },
-                    "&.comment": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.constant": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.deleted": Object {
-                      "color": "#9a050f",
-                    },
-                    "&.directive.tag .tag": Object {
-                      "background": "#ffff00",
-                      "color": "#393A34",
-                    },
-                    "&.doctype": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.entity": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.function": Object {
-                      "color": "#393A34",
-                    },
-                    "&.important": Object {
-                      "fontWeight": "bold",
-                    },
-                    "&.inserted": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.italic": Object {
-                      "fontStyle": "italic",
-                    },
-                    "&.keyword": Object {
-                      "color": "#0000ff",
-                    },
-                    "&.number": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.operator": Object {
-                      "color": "#393A34",
-                    },
-                    "&.prolog": Object {
-                      "color": "#008000",
-                      "fontStyle": "italic",
-                    },
-                    "&.property": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.punctuation": Object {
-                      "color": "#393A34",
-                    },
-                    "&.regex": Object {
-                      "color": "#ff0000",
-                    },
-                    "&.selector": Object {
-                      "color": "#800000",
-                    },
-                    "&.string": Object {
-                      "color": "#A31515",
-                    },
-                    "&.symbol": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.tag": Object {
-                      "color": "#800000",
-                    },
-                    "&.url": Object {
-                      "color": "#36acaa",
-                    },
-                    "&.variable": Object {
-                      "color": "#36acaa",
-                    },
-                    "WebkitFontSmoothing": "antialiased",
-                    "fontFamily": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                },
-                "color": Object {
-                  "ancillary": "#22a699",
-                  "border": "rgba(0,0,0,.1)",
-                  "critical": "#FFFFFF",
-                  "dark": "#666666",
-                  "darker": "#444444",
-                  "darkest": "#333333",
-                  "defaultText": "#333333",
-                  "gold": "#FFAE00",
-                  "green": "#66BF3C",
-                  "inverseText": "#FFFFFF",
-                  "light": "#F3F3F3",
-                  "lighter": "#F8F8F8",
-                  "lightest": "#FFFFFF",
-                  "medium": "#DDDDDD",
-                  "mediumdark": "#999999",
-                  "mediumlight": "#EEEEEE",
-                  "negative": "#FF4400",
-                  "orange": "#FC521F",
-                  "positive": "#66BF3C",
-                  "primary": "#FF4785",
-                  "purple": "#6F2CAC",
-                  "seafoam": "#37D5D3",
-                  "secondary": "#1EA7FD",
-                  "tertiary": "#FAFBFC",
-                  "ultraviolet": "#2A0481",
-                  "warning": "#E69D00",
-                },
-                "easing": Object {
-                  "rubber": "cubic-bezier(0.175, 0.885, 0.335, 1.05)",
-                },
-                "input": Object {
-                  "background": "#FFFFFF",
-                  "border": "rgba(0,0,0,.1)",
-                  "borderRadius": 4,
-                  "color": "#333333",
-                },
-                "layoutMargin": 10,
-                "typography": Object {
-                  "fonts": Object {
-                    "base": "\\"Nunito Sans\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
-                    "mono": "\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace",
-                  },
-                  "size": Object {
-                    "code": 90,
-                    "l1": 32,
-                    "l2": 40,
-                    "l3": 48,
-                    "m1": 20,
-                    "m2": 24,
-                    "m3": 28,
-                    "s1": 12,
-                    "s2": 14,
-                    "s3": 16,
-                  },
-                  "weight": Object {
-                    "black": 900,
-                    "bold": 700,
-                    "regular": 400,
-                  },
-                },
-              }
-            }
-          >
-            <SyntaxHighlighter
-              bordered={true}
-              copyable={true}
-              format={false}
-              language="jsx"
-            >
-              <Styled(div)
-                bordered={true}
-                className={null}
-                padded={false}
-              >
-                <div
-                  className="emotion-10"
-                >
-                  <Styled(Component)>
-                    <Component
-                      className="emotion-5"
-                    >
-                      <ScrollArea
-                        className="emotion-5"
-                        horizontal={true}
-                        vertical={true}
-                      >
-                        <ForwardRef(render)
-                          styles={[Function]}
-                        >
-                          <InnerGlobal
-                            cache={
-                              Object {
-                                "insert": [Function],
-                                "inserted": Object {
-                                  "11xgcgt": true,
-                                  "1fhpnuv": true,
-                                  "1imo1gr": true,
-                                  "1maezg8": true,
-                                  "1si67pu": true,
-                                  "4zr3vl": true,
-                                  "esgpkx": true,
-                                },
-                                "key": "css",
-                                "nonce": undefined,
-                                "registered": Object {
-                                  "emotion-2": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                  "emotion-5": "position:relative;& code{padding-right:10px;}* .token{font-family:\\"Operator Mono\\", \\"Fira Code Retina\\", \\"Fira Code\\", \\"FiraCode-Retina\\", \\"Andale Mono\\", \\"Lucida Console\\", Consolas, Monaco, monospace;-webkit-font-smoothing:antialiased;&.comment{color:#008000;font-style:italic;}&.prolog{color:#008000;font-style:italic;}&.doctype{color:#008000;font-style:italic;}&.cdata{color:#008000;font-style:italic;}&.string{color:#A31515;}&.punctuation{color:#393A34;}&.operator{color:#393A34;}&.url{color:#36acaa;}&.symbol{color:#36acaa;}&.number{color:#36acaa;}&.boolean{color:#36acaa;}&.variable{color:#36acaa;}&.constant{color:#36acaa;}&.inserted{color:#36acaa;}&.atrule{color:#0000ff;}&.keyword{color:#0000ff;}&.attr-value{color:#0000ff;}&.function{color:#393A34;}&.deleted{color:#9a050f;}&.important{font-weight:bold;}&.bold{font-weight:bold;}&.italic{font-style:italic;}&.class-name{color:#2B91AF;}&.tag{color:#800000;}&.selector{color:#800000;}&.attr-name{color:#ff0000;}&.property{color:#ff0000;}&.regex{color:#ff0000;}&.entity{color:#ff0000;}&.directive.tag .tag{background:#ffff00;color:#393A34;}}* .language-json .token.boolean{color:#0000ff;}* .language-json .token.number{color:#0000ff;}* .language-json .token.property{color:#2B91AF;}* .namespace{opacity:0.7;}",
-                                },
-                                "sheet": StyleSheet {
-                                  "before": null,
-                                  "container": <head>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-scrollbar:before{position:absolute;content:"";border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical{top:0;width:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal{left:0;height:11px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
-                                    </style>
-                                    <style
-                                      data-emotion="css-global"
-                                    >
-                                      
-                                      [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>
-                                  </head>,
-                                  "ctr": 82,
-                                  "isSpeedy": false,
-                                  "key": "css",
-                                  "nonce": undefined,
-                                  "tags": Array [
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-10{position:relative;overflow:hidden;color:#333333;border:1px solid rgba(0,0,0,.1);background:#FFFFFF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5{position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-5 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2{overflow-y:auto;height:100%;overflow-x:auto;width:100%;position:relative;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 code{padding-right:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token{font-family:"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;-webkit-font-smoothing:antialiased;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.comment{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.prolog{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.doctype{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.cdata{color:#008000;font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.string{color:#A31515;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.punctuation{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.operator{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.url{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.symbol{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.number{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.boolean{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.variable{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.constant{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.inserted{color:#36acaa;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.atrule{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.keyword{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-value{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.function{color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.deleted{color:#9a050f;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.important{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.bold{font-weight:bold;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.italic{font-style:italic;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.class-name{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.tag{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.selector{color:#800000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.attr-name{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.property{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.regex{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.entity{color:#ff0000;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .token.directive.tag .tag{background:#ffff00;color:#393A34;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.boolean{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.number{color:#0000ff;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .language-json .token.property{color:#2B91AF;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-2 * .namespace{opacity:0.7;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin:0;padding:10px;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-0{-webkit-flex:1;-ms-flex:1;flex:1;padding-right:0;opacity:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-9{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
-                                    </style>,
-                                    <style
-                                      data-emotion="css"
-                                    >
-                                      
-                                      .emotion-8:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
-                                    </style>,
-                                  ],
-                                },
-                              }
-                            }
-                            serialized={
-                              Object {
-                                "map": undefined,
-                                "name": "nh5djz",
-                                "next": undefined,
-                                "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
-                                "toString": [Function],
-                              }
-                            }
-                          />
-                        </ForwardRef(render)>
-                        <Styled(Component)
-                          className="emotion-5"
-                          horizontal={true}
-                          vertical={true}
-                        >
-                          <Component
-                            className="emotion-2"
-                            horizontal={true}
-                            vertical={true}
-                          >
-                            <l
-                              className="emotion-2"
-                              scrollableNodeProps={
-                                Object {
-                                  "tabIndex": 0,
-                                }
-                              }
-                            >
-                              <div
-                                className="emotion-2"
-                                data-simplebar={true}
-                              >
-                                <div
-                                  className="simplebar-wrapper"
-                                >
-                                  <div
-                                    className="simplebar-height-auto-observer-wrapper"
-                                  >
-                                    <div
-                                      className="simplebar-height-auto-observer"
-                                    />
-                                  </div>
-                                  <div
-                                    className="simplebar-mask"
-                                  >
-                                    <div
-                                      className="simplebar-offset"
-                                    >
-                                      <div
-                                        className="simplebar-content-wrapper"
-                                        tabIndex={0}
-                                      >
-                                        <div
-                                          className="simplebar-content"
-                                        >
-                                          <SyntaxHighlighter
-                                            CodeTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "code",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  Object {
-                                                    "flex": 1,
-                                                    "opacity": 1,
-                                                    "paddingRight": 0,
-                                                  },
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(code)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            PreTag={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "__emotion_base": "pre",
-                                                "__emotion_forwardProp": undefined,
-                                                "__emotion_real": [Circular],
-                                                "__emotion_styles": Array [
-                                                  [Function],
-                                                ],
-                                                "defaultProps": undefined,
-                                                "displayName": "Styled(pre)",
-                                                "render": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            language="jsx"
-                                            lineNumberContainerStyle={Object {}}
-                                            padded={true}
-                                            useInlineStyles={false}
-                                          >
-                                            <Styled(pre)
-                                              className="hljs"
-                                              padded={true}
-                                            >
-                                              <pre
-                                                className="hljs emotion-1"
-                                              >
-                                                <Styled(code)>
-                                                  <code
-                                                    className="emotion-0"
-                                                  >
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement0"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement1"
-                                                    >
-                                                      
-  It's a TestComponent story:
-  
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement2"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;
-                                                        </span>
-                                                        <span
-                                                          className="token class-name"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          TestComponent
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-2"
-                                                      >
-                                                        array
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-3"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          [
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          1
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          2
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          3
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-12"
-                                                        >
-                                                          ]
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-5"
-                                                      >
-                                                        bool
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-7"
-                                                      >
-                                                        func
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-8"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token keyword"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          function
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token function"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          noRefCheck
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-5"
-                                                        >
-                                                          (
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          )
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-8"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-10"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-10"
-                                                      >
-                                                        number
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-11"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token number"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          7
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-13"
-                                                      >
-                                                        obj
-                                                      </span>
-                                                      <span
-                                                        className="token script language-javascript"
-                                                        key="code-segment-1-14"
-                                                      >
-                                                        <span
-                                                          className="token script-punctuation punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-2"
-                                                        >
-                                                          {
-                                                        </span>
-                                                        
-      a
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-4"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-6"
-                                                        >
-                                                          'a'
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-7"
-                                                        >
-                                                          ,
-                                                        </span>
-                                                        
-      b
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-9"
-                                                        >
-                                                          :
-                                                        </span>
-                                                         
-                                                        <span
-                                                          className="token string"
-                                                          key="code-segment-1-11"
-                                                        >
-                                                          'b'
-                                                        </span>
-                                                        
-    
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-13"
-                                                        >
-                                                          }
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-14"
-                                                        >
-                                                          }
-                                                        </span>
-                                                      </span>
-                                                      
-    
-                                                      <span
-                                                        className="token attr-name"
-                                                        key="code-segment-1-16"
-                                                      >
-                                                        string
-                                                      </span>
-                                                      <span
-                                                        className="token attr-value"
-                                                        key="code-segment-1-17"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          =
-                                                        </span>
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-1"
-                                                        >
-                                                          "
-                                                        </span>
-                                                        seven
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-3"
-                                                        >
-                                                          "
-                                                        </span>
-                                                      </span>
-                                                      
-  
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-19"
-                                                      >
-                                                        /&gt;
-                                                      </span>
-                                                    </span>
-                                                    <span
-                                                      className="token plain-text"
-                                                      key="code-segement3"
-                                                    >
-                                                      
-
-                                                    </span>
-                                                    <span
-                                                      className="token tag"
-                                                      key="code-segement4"
-                                                    >
-                                                      <span
-                                                        className="token tag"
-                                                        key="code-segment-1-0"
-                                                      >
-                                                        <span
-                                                          className="token punctuation"
-                                                          key="code-segment-1-0"
-                                                        >
-                                                          &lt;/
-                                                        </span>
-                                                        div
-                                                      </span>
-                                                      <span
-                                                        className="token punctuation"
-                                                        key="code-segment-1-1"
-                                                      >
-                                                        &gt;
-                                                      </span>
-                                                    </span>
-                                                  </code>
-                                                </Styled(code)>
-                                              </pre>
-                                            </Styled(pre)>
-                                          </SyntaxHighlighter>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="simplebar-placeholder"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-horizontal"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                                <div
-                                  className="simplebar-track simplebar-vertical"
-                                >
-                                  <div
-                                    className="simplebar-scrollbar"
-                                  />
-                                </div>
-                              </div>
-                            </l>
-                          </Component>
-                        </Styled(Component)>
-                      </ScrollArea>
-                    </Component>
-                  </Styled(Component)>
-                  <ActionBar
-                    actionItems={
-                      Array [
-                        Object {
-                          "onClick": [Function],
-                          "title": "Copy",
-                        },
-                      ]
-                    }
-                  >
-                    <Styled(div)>
-                      <div
-                        className="emotion-9"
-                      >
-                        <ActionButton
-                          key="0"
-                          onClick={[Function]}
-                        >
-                          <button
-                            className="emotion-8"
-                            onClick={[Function]}
-                          >
-                            Copy
-                          </button>
-                        </ActionButton>
-                      </div>
-                    </Styled(div)>
-                  </ActionBar>
-                </div>
-              </Styled(div)>
-            </SyntaxHighlighter>
-          </ThemeProvider>
-        </Code>
-      </div>
-    </div>
-  </Story>
-</Info>
-`;
diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
deleted file mode 100644
index f2ad6453a5de..000000000000
--- a/addons/info/src/components/PropTable.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import PropVal from './PropVal';
-import PrettyPropType from './types/PrettyPropType';
-
-const Table = props => <table {...props} />;
-const Td = props => <td style={{ paddingRight: 10, verticalAlign: 'top' }} {...props} />;
-const Tr = props => <tr {...props} />;
-const Th = props => <th style={{ textAlign: 'left', verticalAlign: 'top' }} {...props} />;
-const Tbody = props => <tbody {...props} />;
-const Thead = props => <thead {...props} />;
-
-export const multiLineText = input => {
-  if (!input) {
-    return input;
-  }
-  const text = String(input);
-  const arrayOfText = text.split(/\r?\n|\r/g);
-  const isSingleLine = arrayOfText.length < 2;
-  return isSingleLine
-    ? text
-    : arrayOfText.map((lineOfText, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <span key={`${lineOfText}.${i}`}>
-          {i > 0 && <br />} {lineOfText}
-        </span>
-      ));
-};
-
-const determineIncludedPropTypes = (propDefinitions, excludedPropTypes) => {
-  if (excludedPropTypes.length === 0) {
-    return propDefinitions;
-  }
-
-  return propDefinitions.filter(
-    propDefinition => !excludedPropTypes.includes(propDefinition.property)
-  );
-};
-
-export default function PropTable(props) {
-  const {
-    type,
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-    propDefinitions,
-    excludedPropTypes,
-  } = props;
-
-  if (!type) {
-    return null;
-  }
-
-  const includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes);
-
-  if (!includedPropDefinitions.length) {
-    return <small>No propTypes defined!</small>;
-  }
-
-  const propValProps = {
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-  };
-
-  return (
-    <Table>
-      <Thead>
-        <Tr>
-          <Th>property</Th>
-          <Th>propType</Th>
-          <Th>required</Th>
-          <Th>default</Th>
-          <Th>description</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {includedPropDefinitions.map(row => (
-          <Tr key={row.property}>
-            <Td>{row.property}</Td>
-            <Td>
-              <PrettyPropType propType={row.propType} />
-            </Td>
-            <Td>{row.required ? 'yes' : '-'}</Td>
-            <Td>
-              {row.defaultValue === undefined ? (
-                '-'
-              ) : (
-                <PropVal val={row.defaultValue} {...propValProps} valueStyles={{}} />
-              )}
-            </Td>
-            <Td>{multiLineText(row.description)}</Td>
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
-  );
-}
-
-PropTable.displayName = 'PropTable';
-PropTable.defaultProps = {
-  type: null,
-  propDefinitions: [],
-  excludedPropTypes: [],
-};
-PropTable.propTypes = {
-  type: PropTypes.func,
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  excludedPropTypes: PropTypes.arrayOf(PropTypes.string),
-  propDefinitions: PropTypes.arrayOf(
-    PropTypes.shape({
-      property: PropTypes.string.isRequired,
-      propType: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-      required: PropTypes.bool,
-      description: PropTypes.string,
-      defaultValue: PropTypes.any,
-    })
-  ),
-};
diff --git a/addons/info/src/components/PropTable.test.js b/addons/info/src/components/PropTable.test.js
deleted file mode 100644
index 43547f6b6eb7..000000000000
--- a/addons/info/src/components/PropTable.test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
-
-import PropTable, { multiLineText } from './PropTable';
-
-describe('PropTable', () => {
-  describe('multiLineText', () => {
-    const singleLine = 'Foo bar baz';
-    const unixMultiLineText = 'foo \n bar \n baz';
-    const windowsMultiLineText = 'foo \r bar \r baz';
-    const duplicatedMultiLine = 'foo\nfoo\nfoo';
-    const propDefinitions = [
-      {
-        defaultValue: undefined,
-        description: '',
-        propType: { name: 'string' },
-        property: 'foo',
-        required: false,
-      },
-    ];
-    const FooComponent = () => <div />;
-    const propTableProps = {
-      type: FooComponent,
-      maxPropArrayLength: 5,
-      maxPropObjectKeys: 5,
-      maxPropStringLength: 5,
-      propDefinitions,
-    };
-
-    it('should include all propTypes by default', () => {
-      const wrapper = shallow(<PropTable {...propTableProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should exclude excluded propTypes', () => {
-      const props = { ...propTableProps, excludedPropTypes: ['foo'] };
-      const wrapper = shallow(<PropTable {...props} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should return a blank string for a null input', () => {
-      expect(multiLineText(null)).toBe(null);
-    });
-    it('should return a blank string for an undefined input', () => {
-      expect(multiLineText(undefined)).toBe(undefined);
-    });
-    it('should cast a number to a string', () => {
-      expect(multiLineText(1)).toBe('1');
-    });
-    it('should return its input for a single line of text', () => {
-      expect(multiLineText(singleLine)).toBe(singleLine);
-    });
-    it('should return an array for unix multiline text', () => {
-      expect(multiLineText(unixMultiLineText)).toHaveLength(3);
-    });
-    it('should return an array for windows multiline text', () => {
-      expect(multiLineText(windowsMultiLineText)).toHaveLength(3);
-    });
-    it('should return an array with unique keys for duplicated multiline text', () => {
-      const wrappers = multiLineText(duplicatedMultiLine).map(tag => shallow(tag));
-      const keys = wrappers.map(wrapper => wrapper.key());
-      const deDup = new Set(keys);
-      expect(keys).toHaveLength(deDup.size);
-    });
-    it('should have 2 br tags for 3 lines of text', () => {
-      const tree = renderer.create(multiLineText(unixMultiLineText)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-});
diff --git a/addons/info/src/components/PropTable/__snapshots__/index.test.js.snap b/addons/info/src/components/PropTable/__snapshots__/index.test.js.snap
deleted file mode 100644
index d4aef4cc698a..000000000000
--- a/addons/info/src/components/PropTable/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable multiLineText should exclude excluded propTypes 1`] = `
-<small>
-  No propTypes defined!
-</small>
-`;
-
-exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = `
-Array [
-  <span>
-     
-    foo 
-  </span>,
-  <span>
-    <br />
-     
-     bar 
-  </span>,
-  <span>
-    <br />
-     
-     baz
-  </span>,
-]
-`;
-
-exports[`PropTable multiLineText should include all propTypes by default 1`] = `
-<Table>
-  <Thead>
-    <Tr>
-      <Th>
-        property
-      </Th>
-      <Th>
-        propType
-      </Th>
-      <Th>
-        required
-      </Th>
-      <Th>
-        default
-      </Th>
-      <Th>
-        description
-      </Th>
-    </Tr>
-  </Thead>
-  <Tbody>
-    <Tr
-      key="foo"
-    >
-      <Td
-        isMonospace={true}
-      >
-        foo
-      </Td>
-      <Td
-        isMonospace={true}
-      >
-        <PrettyPropType
-          depth={1}
-          propType={
-            Object {
-              "name": "string",
-            }
-          }
-        />
-      </Td>
-      <Td
-        isMonospace={false}
-      >
-        -
-      </Td>
-      <Td
-        isMonospace={false}
-      >
-        -
-      </Td>
-      <Td
-        isMonospace={false}
-      />
-    </Tr>
-  </Tbody>
-</Table>
-`;
diff --git a/addons/info/src/components/PropTable/components/Table.js b/addons/info/src/components/PropTable/components/Table.js
deleted file mode 100644
index 893470b04ab3..000000000000
--- a/addons/info/src/components/PropTable/components/Table.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import '../style.css';
-
-const Table = ({ children }) => <table className="info-table">{children}</table>;
-
-Table.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-    .isRequired,
-};
-
-export default Table;
diff --git a/addons/info/src/components/PropTable/components/Table.test.js b/addons/info/src/components/PropTable/components/Table.test.js
deleted file mode 100644
index 6910f2548e7c..000000000000
--- a/addons/info/src/components/PropTable/components/Table.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Table from './Table';
-
-describe('PropTable/Table', () => {
-  it('renders a table html node with one child element', () => {
-    const wrapper = shallow(
-      <Table>
-        <div>foo bar</div>
-      </Table>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a table html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Table>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Table>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Tbody.js b/addons/info/src/components/PropTable/components/Tbody.js
deleted file mode 100644
index ef77ac517bef..000000000000
--- a/addons/info/src/components/PropTable/components/Tbody.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Tbody = ({ children }) => <tbody>{children}</tbody>;
-
-Tbody.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-    .isRequired,
-};
-
-export default Tbody;
diff --git a/addons/info/src/components/PropTable/components/Tbody.test.js b/addons/info/src/components/PropTable/components/Tbody.test.js
deleted file mode 100644
index 901a7900ac59..000000000000
--- a/addons/info/src/components/PropTable/components/Tbody.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Tbody from './Tbody';
-
-describe('PropTable/Tbody', () => {
-  it('renders a tbody html node with children', () => {
-    const wrapper = shallow(
-      <Tbody>
-        <div>foo bar</div>
-      </Tbody>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a tbody html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Tbody>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Tbody>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Td.js b/addons/info/src/components/PropTable/components/Td.js
deleted file mode 100644
index a429e6bc633e..000000000000
--- a/addons/info/src/components/PropTable/components/Td.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import '../style.css';
-
-const Td = ({ isMonospace, children }) => (
-  <td className={isMonospace ? 'info-table-monospace' : null}>{children}</td>
-);
-
-Td.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.arrayOf(PropTypes.element),
-  ]),
-  isMonospace: PropTypes.bool,
-};
-
-Td.defaultProps = {
-  isMonospace: false,
-  children: null,
-};
-
-export default Td;
diff --git a/addons/info/src/components/PropTable/components/Td.test.js b/addons/info/src/components/PropTable/components/Td.test.js
deleted file mode 100644
index e5b8dc663253..000000000000
--- a/addons/info/src/components/PropTable/components/Td.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Td from './Td';
-
-describe('PropTable/Td', () => {
-  it('renders a td html node child element', () => {
-    const wrapper = shallow(
-      <Td>
-        <div>foo bar</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a monospace td html node child element', () => {
-    const wrapper = shallow(
-      <Td isMonospace>
-        <div>foo bar</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a td html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Td>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a monospace td html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Td isMonospace>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Td>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a td html node with one child node', () => {
-    const wrapper = shallow(<Td>foo bar</Td>);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a monospace td html node with one child node', () => {
-    const wrapper = shallow(<Td isMonospace>foo bar</Td>);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Th.js b/addons/info/src/components/PropTable/components/Th.js
deleted file mode 100644
index acf43b6664e0..000000000000
--- a/addons/info/src/components/PropTable/components/Th.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Th = ({ children }) => <th>{children}</th>;
-
-Th.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired,
-};
-
-export default Th;
diff --git a/addons/info/src/components/PropTable/components/Th.test.js b/addons/info/src/components/PropTable/components/Th.test.js
deleted file mode 100644
index cd84814d1721..000000000000
--- a/addons/info/src/components/PropTable/components/Th.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Th from './Th';
-
-describe('PropTable/Th', () => {
-  it('renders a th html node with react element children', () => {
-    const wrapper = shallow(
-      <Th>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Th>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a th html node with html node children', () => {
-    const wrapper = shallow(<Th>foo bar baz</Th>);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a th html node with one child node', () => {
-    const wrapper = shallow(<Th>foo bar</Th>);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Thead.js b/addons/info/src/components/PropTable/components/Thead.js
deleted file mode 100644
index 0abe57156f86..000000000000
--- a/addons/info/src/components/PropTable/components/Thead.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Thead = ({ children }) => <thead>{children}</thead>;
-
-Thead.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-    .isRequired,
-};
-
-export default Thead;
diff --git a/addons/info/src/components/PropTable/components/Thead.test.js b/addons/info/src/components/PropTable/components/Thead.test.js
deleted file mode 100644
index d1a96fccd72c..000000000000
--- a/addons/info/src/components/PropTable/components/Thead.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Thead from './Thead';
-
-describe('PropTable/Thead', () => {
-  it('renders a thead html node with children', () => {
-    const wrapper = shallow(
-      <Thead>
-        <div>foo bar</div>
-      </Thead>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a thead html node with multiple children elements', () => {
-    const wrapper = shallow(
-      <Thead>
-        <div>foo bar</div>
-        <div>baz</div>
-      </Thead>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/Tr.js b/addons/info/src/components/PropTable/components/Tr.js
deleted file mode 100644
index 103e8ad5449f..000000000000
--- a/addons/info/src/components/PropTable/components/Tr.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Tr = ({ children }) => <tr>{children}</tr>;
-
-Tr.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default Tr;
diff --git a/addons/info/src/components/PropTable/components/Tr.test.js b/addons/info/src/components/PropTable/components/Tr.test.js
deleted file mode 100644
index 071e87001f25..000000000000
--- a/addons/info/src/components/PropTable/components/Tr.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Tr from './Tr';
-import Td from './Td';
-
-describe('PropTable/Tr', () => {
-  it('renders a tr html node with react element children', () => {
-    const wrapper = shallow(
-      <Tr>
-        <Td>foo bar</Td>
-        <Td>baz</Td>
-      </Tr>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a tr html node with html node children', () => {
-    const wrapper = shallow(<Tr>foo bar baz</Tr>);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders a tr html node with one child node', () => {
-    const wrapper = shallow(<Tr>foo bar</Tr>);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Table.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Table.test.js.snap
deleted file mode 100644
index c245e98aca7a..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Table.test.js.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Table renders a table html node with multiple children elements 1`] = `
-<table
-  className="info-table"
->
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</table>
-`;
-
-exports[`PropTable/Table renders a table html node with one child element 1`] = `
-<table
-  className="info-table"
->
-  <div>
-    foo bar
-  </div>
-</table>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Tbody.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Tbody.test.js.snap
deleted file mode 100644
index 70840d14f0a8..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Tbody.test.js.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Tbody renders a tbody html node with children 1`] = `
-<tbody>
-  <div>
-    foo bar
-  </div>
-</tbody>
-`;
-
-exports[`PropTable/Tbody renders a tbody html node with multiple children elements 1`] = `
-<tbody>
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</tbody>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Td.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Td.test.js.snap
deleted file mode 100644
index 4e2d98f83b5f..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Td.test.js.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Td renders a monospace td html node child element 1`] = `
-<td
-  className="info-table-monospace"
->
-  <div>
-    foo bar
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a monospace td html node with multiple children elements 1`] = `
-<td
-  className="info-table-monospace"
->
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a monospace td html node with one child node 1`] = `
-<td
-  className="info-table-monospace"
->
-  foo bar
-</td>
-`;
-
-exports[`PropTable/Td renders a td html node child element 1`] = `
-<td
-  className={null}
->
-  <div>
-    foo bar
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a td html node with multiple children elements 1`] = `
-<td
-  className={null}
->
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</td>
-`;
-
-exports[`PropTable/Td renders a td html node with one child node 1`] = `
-<td
-  className={null}
->
-  foo bar
-</td>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Th.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Th.test.js.snap
deleted file mode 100644
index c7c55c291314..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Th.test.js.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Th renders a th html node with html node children 1`] = `
-<th>
-  foo bar baz
-</th>
-`;
-
-exports[`PropTable/Th renders a th html node with one child node 1`] = `
-<th>
-  foo bar
-</th>
-`;
-
-exports[`PropTable/Th renders a th html node with react element children 1`] = `
-<th>
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</th>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Thead.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Thead.test.js.snap
deleted file mode 100644
index a5ba8a5330f7..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Thead.test.js.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Thead renders a thead html node with children 1`] = `
-<thead>
-  <div>
-    foo bar
-  </div>
-</thead>
-`;
-
-exports[`PropTable/Thead renders a thead html node with multiple children elements 1`] = `
-<thead>
-  <div>
-    foo bar
-  </div>
-  <div>
-    baz
-  </div>
-</thead>
-`;
diff --git a/addons/info/src/components/PropTable/components/__snapshots__/Tr.test.js.snap b/addons/info/src/components/PropTable/components/__snapshots__/Tr.test.js.snap
deleted file mode 100644
index 9ba2d695e37b..000000000000
--- a/addons/info/src/components/PropTable/components/__snapshots__/Tr.test.js.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable/Tr renders a tr html node with html node children 1`] = `
-<tr>
-  foo bar baz
-</tr>
-`;
-
-exports[`PropTable/Tr renders a tr html node with one child node 1`] = `
-<tr>
-  foo bar
-</tr>
-`;
-
-exports[`PropTable/Tr renders a tr html node with react element children 1`] = `
-<tr>
-  <Td
-    isMonospace={false}
-  >
-    foo bar
-  </Td>
-  <Td
-    isMonospace={false}
-  >
-    baz
-  </Td>
-</tr>
-`;
diff --git a/addons/info/src/components/PropTable/index.js b/addons/info/src/components/PropTable/index.js
deleted file mode 100644
index 6e6a033943ee..000000000000
--- a/addons/info/src/components/PropTable/index.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import PrettyPropType from '../types/PrettyPropType';
-import PropVal from '../PropVal';
-import Table from './components/Table';
-import Tbody from './components/Tbody';
-import Td from './components/Td';
-import Th from './components/Th';
-import Thead from './components/Thead';
-import Tr from './components/Tr';
-
-export const multiLineText = input => {
-  if (!input) {
-    return input;
-  }
-  const text = String(input);
-  const arrayOfText = text.split(/\r?\n|\r/g);
-  const isSingleLine = arrayOfText.length < 2;
-  return isSingleLine
-    ? text
-    : arrayOfText.map((lineOfText, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <span key={`${lineOfText}.${i}`}>
-          {i > 0 && <br />} {lineOfText}
-        </span>
-      ));
-};
-
-const determineIncludedPropTypes = (propDefinitions, excludedPropTypes) => {
-  if (excludedPropTypes.length === 0) {
-    return propDefinitions;
-  }
-
-  return propDefinitions.filter(
-    propDefinition => !excludedPropTypes.includes(propDefinition.property)
-  );
-};
-
-export default function PropTable(props) {
-  const {
-    type,
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-    propDefinitions,
-    excludedPropTypes,
-  } = props;
-
-  if (!type) {
-    return null;
-  }
-
-  const includedPropDefinitions = determineIncludedPropTypes(propDefinitions, excludedPropTypes);
-
-  if (!includedPropDefinitions.length) {
-    return <small>No propTypes defined!</small>;
-  }
-
-  const propValProps = {
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-  };
-
-  return (
-    <Table>
-      <Thead>
-        <Tr>
-          <Th>property</Th>
-          <Th>propType</Th>
-          <Th>required</Th>
-          <Th>default</Th>
-          <Th>description</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {includedPropDefinitions.map(row => (
-          <Tr key={row.property}>
-            <Td isMonospace>{row.property}</Td>
-            <Td isMonospace>
-              <PrettyPropType propType={row.propType} />
-            </Td>
-            <Td>{row.required ? 'yes' : '-'}</Td>
-            <Td>
-              {row.defaultValue === undefined ? (
-                '-'
-              ) : (
-                <PropVal val={row.defaultValue} {...propValProps} valueStyles={{}} />
-              )}
-            </Td>
-            <Td>{multiLineText(row.description)}</Td>
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
-  );
-}
-
-PropTable.displayName = 'PropTable';
-PropTable.defaultProps = {
-  type: null,
-  propDefinitions: [],
-  excludedPropTypes: [],
-};
-PropTable.propTypes = {
-  type: PropTypes.func,
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  excludedPropTypes: PropTypes.arrayOf(PropTypes.string),
-  propDefinitions: PropTypes.arrayOf(
-    PropTypes.shape({
-      property: PropTypes.string.isRequired,
-      propType: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-      required: PropTypes.bool,
-      description: PropTypes.string,
-      defaultValue: PropTypes.any,
-    })
-  ),
-};
diff --git a/addons/info/src/components/PropTable/index.test.js b/addons/info/src/components/PropTable/index.test.js
deleted file mode 100644
index 0a6bb05eb1a7..000000000000
--- a/addons/info/src/components/PropTable/index.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { shallow } from 'enzyme';
-
-import PropTable, { multiLineText } from './index';
-
-describe('PropTable', () => {
-  describe('multiLineText', () => {
-    const singleLine = 'Foo bar baz';
-    const unixMultiLineText = 'foo \n bar \n baz';
-    const windowsMultiLineText = 'foo \r bar \r baz';
-    const duplicatedMultiLine = 'foo\nfoo\nfoo';
-    const propDefinitions = [
-      {
-        defaultValue: undefined,
-        description: '',
-        propType: { name: 'string' },
-        property: 'foo',
-        required: false,
-      },
-    ];
-    const FooComponent = () => <div />;
-    const propTableProps = {
-      type: FooComponent,
-      maxPropArrayLength: 5,
-      maxPropObjectKeys: 5,
-      maxPropStringLength: 5,
-      propDefinitions,
-    };
-
-    it('should include all propTypes by default', () => {
-      const wrapper = shallow(<PropTable {...propTableProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should exclude excluded propTypes', () => {
-      const props = { ...propTableProps, excludedPropTypes: ['foo'] };
-      const wrapper = shallow(<PropTable {...props} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should return a blank string for a null input', () => {
-      expect(multiLineText(null)).toBe(null);
-    });
-
-    it('should return a blank string for an undefined input', () => {
-      expect(multiLineText(undefined)).toBe(undefined);
-    });
-
-    it('should cast a number to a string', () => {
-      expect(multiLineText(1)).toBe('1');
-    });
-
-    it('should return its input for a single line of text', () => {
-      expect(multiLineText(singleLine)).toBe(singleLine);
-    });
-
-    it('should return an array for unix multiline text', () => {
-      expect(multiLineText(unixMultiLineText)).toHaveLength(3);
-    });
-
-    it('should return an array for windows multiline text', () => {
-      expect(multiLineText(windowsMultiLineText)).toHaveLength(3);
-    });
-
-    it('should return an array with unique keys for duplicated multiline text', () => {
-      const wrappers = multiLineText(duplicatedMultiLine).map(tag => shallow(tag));
-      const keys = wrappers.map(wrapper => wrapper.key());
-      const deDup = new Set(keys);
-      expect(keys).toHaveLength(deDup.size);
-    });
-
-    it('should have 2 br tags for 3 lines of text', () => {
-      const tree = renderer.create(multiLineText(unixMultiLineText)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-});
diff --git a/addons/info/src/components/PropTable/style.css b/addons/info/src/components/PropTable/style.css
deleted file mode 100644
index 010f200df8b4..000000000000
--- a/addons/info/src/components/PropTable/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.info-table {
-  width: 100%;
-}
-
-.info-table, .info-table td, .info-table th {
-  border-collapse: collapse;
-  border: 1px solid #cccccc;
-  color: #444444;
-  margin-top: 0.25rem;
-  padding-right: 0.5rem;
-  padding: 0.25rem;
-  text-align: left;
-  vertical-align: top;
-}
-
-.info-table-monospace {
-  font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 0.88em;
-}
diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js
deleted file mode 100644
index e7527d749566..000000000000
--- a/addons/info/src/components/PropVal.js
+++ /dev/null
@@ -1,274 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import createFragment from 'react-addons-create-fragment';
-
-const getValueStyles = (codeColors = {}) => ({
-  func: {
-    color: codeColors.func || '#170',
-  },
-
-  attr: {
-    color: codeColors.attr || '#666',
-  },
-
-  object: {
-    color: codeColors.object || '#666',
-  },
-
-  array: {
-    color: codeColors.array || '#666',
-  },
-
-  number: {
-    color: codeColors.number || '#a11',
-  },
-
-  string: {
-    color: codeColors.string || '#22a',
-    wordBreak: 'break-word',
-  },
-
-  bool: {
-    color: codeColors.bool || '#a11',
-  },
-
-  empty: {
-    color: '#444',
-  },
-});
-
-function indent(breakIntoNewLines, level, isBlock) {
-  return (
-    breakIntoNewLines && (
-      <span>
-        <br />
-        {`${Array(level).join('  ')}  `}
-        {!isBlock && '  '}
-      </span>
-    )
-  );
-}
-
-function PreviewArray({
-  val,
-  level,
-  maxPropArrayLength,
-  maxPropStringLength,
-  maxPropsIntoLine,
-  valueStyles,
-}) {
-  const items = {};
-  const breakIntoNewLines = val.length > maxPropsIntoLine;
-  val.slice(0, maxPropArrayLength).forEach((item, i) => {
-    items[`n${i}`] = (
-      <span>
-        {indent(breakIntoNewLines, level)}
-        <PropVal
-          val={item}
-          level={level + 1}
-          valueStyles={valueStyles}
-          maxPropStringLength={maxPropStringLength}
-          maxPropsIntoLine={maxPropsIntoLine}
-        />
-      </span>
-    );
-    items[`c${i}`] = ',';
-  });
-  if (val.length > maxPropArrayLength) {
-    items.last = <span>{indent(breakIntoNewLines, level)}…</span>;
-  } else {
-    delete items[`c${val.length - 1}`];
-  }
-
-  return (
-    <span style={valueStyles.array}>
-      [{createFragment(items)}
-      {indent(breakIntoNewLines, level, true)}]
-    </span>
-  );
-}
-
-PreviewArray.propTypes = {
-  val: PropTypes.any, // eslint-disable-line
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  maxPropsIntoLine: PropTypes.number.isRequired,
-  level: PropTypes.number.isRequired,
-  valueStyles: PropTypes.shape({
-    func: PropTypes.object,
-    attr: PropTypes.object,
-    object: PropTypes.object,
-    array: PropTypes.object,
-    number: PropTypes.object,
-    string: PropTypes.object,
-    bool: PropTypes.object,
-    empty: PropTypes.object,
-  }).isRequired,
-};
-
-function PreviewObject({
-  val,
-  level,
-  maxPropObjectKeys,
-  maxPropStringLength,
-  maxPropsIntoLine,
-  valueStyles,
-}) {
-  const names = Object.keys(val);
-  const items = {};
-  const breakIntoNewLines = names.length > maxPropsIntoLine;
-  names.slice(0, maxPropObjectKeys).forEach((name, i) => {
-    items[`k${i}`] = (
-      <span>
-        {indent(breakIntoNewLines, level)}
-        <span style={valueStyles.attr}>{name}</span>
-      </span>
-    );
-    items[`c${i}`] = ': ';
-    items[`v${i}`] = (
-      <PropVal
-        val={val[name]}
-        level={level + 1}
-        valueStyles={valueStyles}
-        maxPropStringLength={maxPropStringLength}
-        maxPropsIntoLine={maxPropsIntoLine}
-      />
-    );
-    items[`m${i}`] = ',';
-  });
-  if (names.length > maxPropObjectKeys) {
-    items.rest = <span>{indent(breakIntoNewLines, level)}…</span>;
-  } else {
-    delete items[`m${names.length - 1}`];
-  }
-  return (
-    <span style={valueStyles.object}>
-      {'{'}
-      {createFragment(items)}
-      {indent(breakIntoNewLines, level, true)}
-      {'}'}
-    </span>
-  );
-}
-
-PreviewObject.propTypes = {
-  val: PropTypes.any, // eslint-disable-line
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  maxPropsIntoLine: PropTypes.number.isRequired,
-  level: PropTypes.number.isRequired,
-  valueStyles: PropTypes.shape({
-    func: PropTypes.object,
-    attr: PropTypes.object,
-    object: PropTypes.object,
-    array: PropTypes.object,
-    number: PropTypes.object,
-    string: PropTypes.object,
-    bool: PropTypes.object,
-    empty: PropTypes.object,
-  }).isRequired,
-};
-
-function PropVal(props) {
-  const {
-    level,
-    maxPropObjectKeys,
-    maxPropArrayLength,
-    maxPropStringLength,
-    maxPropsIntoLine,
-    theme,
-  } = props;
-  let { val } = props;
-  const { codeColors } = theme || {};
-  let content = null;
-  const valueStyles = props.valueStyles || getValueStyles(codeColors);
-
-  if (typeof val === 'number') {
-    content = <span style={valueStyles.number}>{val}</span>;
-  } else if (typeof val === 'string') {
-    if (val.length > maxPropStringLength) {
-      val = `${val.slice(0, maxPropStringLength)}…`;
-    }
-    if (level > 1) {
-      val = `'${val}'`;
-    }
-    content = <span style={valueStyles.string}>{val}</span>;
-  } else if (typeof val === 'boolean') {
-    content = <span style={valueStyles.bool}>{`${val}`}</span>;
-  } else if (Array.isArray(val)) {
-    content = (
-      <PreviewArray
-        {...{
-          val,
-          level,
-          maxPropArrayLength,
-          maxPropStringLength,
-          maxPropsIntoLine,
-          valueStyles,
-        }}
-      />
-    );
-  } else if (typeof val === 'function') {
-    content = <span style={valueStyles.func}>{val.name || 'anonymous'}</span>;
-  } else if (!val) {
-    content = <span style={valueStyles.empty}>{`${val}`}</span>;
-  } else if (typeof val !== 'object') {
-    content = <span>…</span>;
-  } else if (React.isValidElement(val)) {
-    content = (
-      <span style={valueStyles.object}>
-        {`<${val.type.displayName || val.type.name || val.type} />`}
-      </span>
-    );
-  } else {
-    content = (
-      <PreviewObject
-        {...{
-          val,
-          level,
-          maxPropObjectKeys,
-          maxPropStringLength,
-          maxPropsIntoLine,
-          valueStyles,
-        }}
-      />
-    );
-  }
-
-  return content;
-}
-
-PropVal.defaultProps = {
-  val: null,
-  maxPropObjectKeys: 3,
-  maxPropArrayLength: 3,
-  maxPropStringLength: 50,
-  maxPropsIntoLine: 3,
-  level: 1,
-  theme: {},
-  valueStyles: null,
-};
-
-PropVal.propTypes = {
-  val: PropTypes.any, // eslint-disable-line
-  maxPropObjectKeys: PropTypes.number,
-  maxPropArrayLength: PropTypes.number,
-  maxPropStringLength: PropTypes.number,
-  maxPropsIntoLine: PropTypes.number,
-  level: PropTypes.number,
-  theme: PropTypes.shape({
-    codeColors: PropTypes.object,
-  }),
-  valueStyles: PropTypes.shape({
-    func: PropTypes.object,
-    attr: PropTypes.object,
-    object: PropTypes.object,
-    array: PropTypes.object,
-    number: PropTypes.object,
-    string: PropTypes.object,
-    bool: PropTypes.object,
-    empty: PropTypes.object,
-  }),
-};
-
-export default PropVal;
diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
deleted file mode 100644
index 722c4aa8be28..000000000000
--- a/addons/info/src/components/Props.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import PropVal from './PropVal';
-import { getType } from '../react-utils';
-
-const stylesheet = {
-  propStyle: {},
-  propNameStyle: {},
-  propValueStyle: {},
-};
-
-export default function Props(props) {
-  const {
-    maxPropsIntoLine,
-    maxPropArrayLength,
-    maxPropObjectKeys,
-    maxPropStringLength,
-    node,
-    singleLine,
-  } = props;
-  const nodeProps = node.props;
-  const { defaultProps } = getType(node.type);
-  if (!nodeProps || typeof nodeProps !== 'object') {
-    return <span />;
-  }
-
-  const { propValueStyle, propNameStyle } = stylesheet;
-
-  const names = Object.keys(nodeProps).filter(
-    name =>
-      name[0] !== '_' &&
-      name !== 'children' &&
-      (!defaultProps || nodeProps[name] !== defaultProps[name])
-  );
-
-  const breakIntoNewLines = names.length > maxPropsIntoLine;
-  const endingSpace = singleLine ? ' ' : '';
-
-  const items = [];
-  names.forEach((name, i) => {
-    items.push(
-      <span key={name}>
-        {breakIntoNewLines ? (
-          <span>
-            <br />
-            &nbsp;&nbsp;
-          </span>
-        ) : (
-          ' '
-        )}
-        <span style={propNameStyle}>{name}</span>
-        {/* Use implicit true: */}
-        {(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') && (
-          <span>
-            =
-            <span style={propValueStyle}>
-              {typeof nodeProps[name] === 'string' ? '"' : '{'}
-              <PropVal
-                val={nodeProps[name]}
-                maxPropObjectKeys={maxPropObjectKeys}
-                maxPropArrayLength={maxPropArrayLength}
-                maxPropStringLength={maxPropStringLength}
-                maxPropsIntoLine={maxPropsIntoLine}
-              />
-              {typeof nodeProps[name] === 'string' ? '"' : '}'}
-            </span>
-          </span>
-        )}
-
-        {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
-      </span>
-    );
-  });
-
-  return <span>{items}</span>;
-}
-
-Props.defaultProps = {
-  singleLine: false,
-};
-
-Props.propTypes = {
-  node: PropTypes.node.isRequired,
-  singleLine: PropTypes.bool,
-  maxPropsIntoLine: PropTypes.number.isRequired,
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-};
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
deleted file mode 100644
index 42f5026f0808..000000000000
--- a/addons/info/src/components/Story.js
+++ /dev/null
@@ -1,442 +0,0 @@
-/* eslint no-underscore-dangle: 0 */
-
-import React, { Fragment, Component, createElement } from 'react';
-import { isForwardRef } from 'react-is';
-import { polyfill } from 'react-lifecycles-compat';
-import PropTypes from 'prop-types';
-import global from 'global';
-
-import marksy from 'marksy';
-import jsxToString from 'react-element-to-jsx-string';
-import { Code } from './markdown';
-import { getDisplayName, getType } from '../react-utils';
-
-global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
-const { STORYBOOK_REACT_CLASSES } = global;
-
-const stylesheetBase = {
-  button: {
-    base: {
-      fontFamily: 'sans-serif',
-      fontSize: 12,
-      display: 'block',
-      position: 'fixed',
-      border: 'none',
-      background: '#027ac5',
-      color: '#fff',
-      padding: '5px 15px',
-      cursor: 'pointer',
-    },
-    topRight: {
-      top: 0,
-      right: 0,
-      borderRadius: '0 0 0 5px',
-    },
-  },
-  info: {
-    position: 'fixed',
-    background: 'white',
-    top: 0,
-    left: 0,
-    height: '100vh',
-    width: '100vw',
-    overflow: 'auto',
-    zIndex: 99999,
-  },
-  children: {
-    position: 'relative',
-    zIndex: 0,
-  },
-  infoBody: {
-    fontFamily: 'Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif',
-    color: 'black',
-    fontWeight: 300,
-    lineHeight: 1.45,
-    fontSize: '15px',
-    padding: '20px 40px 40px',
-    borderRadius: '2px',
-    backgroundColor: '#fff',
-  },
-  infoContent: {
-    marginBottom: 0,
-  },
-  infoStory: {},
-  jsxInfoContent: {
-    borderTop: '1px solid #eee',
-    margin: '20px 0 0 0',
-  },
-  header: {
-    h1: {
-      margin: 0,
-      padding: 0,
-      fontSize: '35px',
-    },
-    h2: {
-      margin: '0 0 10px 0',
-      padding: 0,
-      fontWeight: 400,
-      fontSize: '22px',
-    },
-    h3: {
-      margin: '0 0 10px 0',
-      padding: 0,
-      fontWeight: 400,
-      fontSize: '18px',
-    },
-    body: {
-      borderBottom: '1px solid #eee',
-      paddingTop: 10,
-      marginBottom: 10,
-    },
-  },
-  source: {
-    h1: {
-      margin: '20px 0 0 0',
-      padding: '0 0 5px 0',
-      fontSize: '25px',
-      borderBottom: '1px solid #EEE',
-    },
-  },
-  propTableHead: {
-    margin: '20px 0 0 0',
-  },
-};
-
-class Story extends Component {
-  constructor(props, ...args) {
-    super(props, ...args);
-    this.state = {
-      open: false,
-    };
-    this.marksy = marksy({
-      createElement,
-      elements: props.components,
-    });
-  }
-
-  _renderStory() {
-    const { stylesheet } = this.state;
-    const { children } = this.props;
-
-    return (
-      <div id="story-root" style={stylesheet.infoStory}>
-        {children}
-      </div>
-    );
-  }
-
-  _renderInline() {
-    const { stylesheet } = this.state;
-
-    return (
-      <Fragment>
-        {this._renderInlineHeader()}
-        {this._renderStory()}
-        <div style={stylesheet.infoPage}>
-          <div style={stylesheet.infoBody}>
-            {this._getInfoContent()}
-            {this._getComponentDescription()}
-            {this._getSourceCode()}
-            {this._getPropTables()}
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-
-  _renderInlineHeader() {
-    const { stylesheet } = this.state;
-
-    const infoHeader = this._getInfoHeader();
-
-    return (
-      infoHeader && (
-        <div style={stylesheet.infoPage}>
-          <div style={stylesheet.infoBody}>{infoHeader}</div>
-        </div>
-      )
-    );
-  }
-
-  _renderOverlay() {
-    const { stylesheet, open } = this.state;
-    const { children } = this.props;
-
-    const buttonStyle = {
-      ...stylesheet.button.base,
-      ...stylesheet.button.topRight,
-    };
-
-    const infoStyle = { ...stylesheet.info };
-    if (!open) {
-      infoStyle.display = 'none';
-    }
-
-    const openOverlay = () => {
-      this.setState({ open: true });
-      return false;
-    };
-
-    const closeOverlay = () => {
-      this.setState({ open: false });
-      return false;
-    };
-
-    return (
-      <Fragment>
-        <div style={stylesheet.children}>{children}</div>
-        <button
-          type="button"
-          style={buttonStyle}
-          onClick={openOverlay}
-          className="info__show-button"
-        >
-          Show Info
-        </button>
-        {open ? (
-          <div style={infoStyle} className="info__overlay">
-            <button
-              type="button"
-              style={buttonStyle}
-              onClick={closeOverlay}
-              className="info__close-button"
-            >
-              ×
-            </button>
-            <div style={stylesheet.infoPage}>
-              <div style={stylesheet.infoBody}>
-                {this._getInfoHeader()}
-                {this._getInfoContent()}
-                {this._getComponentDescription()}
-                {this._getSourceCode()}
-                {this._getPropTables()}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </Fragment>
-    );
-  }
-
-  _getInfoHeader() {
-    const { stylesheet } = this.state;
-    const { context, showHeader } = this.props;
-
-    if (!context || !showHeader) {
-      return null;
-    }
-
-    return (
-      <div style={stylesheet.header.body}>
-        <h1 style={stylesheet.header.h1}>{context.kind}</h1>
-        <h2 style={stylesheet.header.h2}>{context.name}</h2>
-      </div>
-    );
-  }
-
-  _getInfoContent() {
-    const { info, showInline } = this.props;
-    const { stylesheet } = this.state;
-
-    if (!info) {
-      return '';
-    }
-
-    if (React.isValidElement(info)) {
-      return (
-        <div style={showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent}>{info}</div>
-      );
-    }
-
-    const lines = info.split('\n');
-    while (lines[0].trim() === '') {
-      lines.shift();
-    }
-    let padding = 0;
-    const matches = lines[0].match(/^ */);
-    if (matches) {
-      padding = matches[0].length;
-    }
-    const source = lines.map(s => s.slice(padding)).join('\n');
-
-    return <Fragment>{this.marksy(source).tree}</Fragment>;
-  }
-
-  _getComponentDescription() {
-    const {
-      context: { kind, name },
-    } = this.props;
-    let retDiv = null;
-
-    const validMatches = [kind, name];
-
-    if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
-      Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
-        if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
-          const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
-          retDiv = <Fragment>{this.marksy(componentDescription).tree}</Fragment>;
-        }
-      });
-    }
-
-    return retDiv;
-  }
-
-  _getSourceCode() {
-    const { showSource, children } = this.props;
-    const { stylesheet } = this.state;
-
-    if (!showSource) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <h1 style={stylesheet.source.h1}>Story Source</h1>
-        <Code code={jsxToString(children)} language="jsx" format={false} />
-      </Fragment>
-    );
-  }
-
-  _getPropTables() {
-    const {
-      children,
-      propTablesExclude,
-      propTableCompare,
-      maxPropObjectKeys,
-      maxPropArrayLength,
-      maxPropStringLength,
-      excludedPropTypes,
-    } = this.props;
-    let { propTables } = this.props;
-    const { stylesheet } = this.state;
-    const types = new Map();
-
-    if (!propTables) {
-      return null;
-    }
-
-    if (!children) {
-      return null;
-    }
-
-    propTables.forEach(type => {
-      types.set(type, true);
-    });
-
-    // depth-first traverse and collect types
-    const extract = innerChildren => {
-      if (!innerChildren) {
-        return;
-      }
-      if (Array.isArray(innerChildren)) {
-        innerChildren.forEach(extract);
-        return;
-      }
-      if (innerChildren.props && innerChildren.props.children) {
-        extract(innerChildren.props.children);
-      }
-      if (isForwardRef(innerChildren)) {
-        try {
-          // this might fail because of hooks being used
-          extract(innerChildren.type.render(innerChildren.props));
-        } catch (e) {
-          // do nothing
-        }
-      }
-      if (
-        typeof innerChildren === 'string' ||
-        typeof innerChildren.type === 'string' ||
-        (propTables.length > 0 && // if propTables is set and has items in it
-          !propTables.includes(innerChildren.type)) || // ignore types that are missing from propTables
-        (Array.isArray(propTablesExclude) && // also ignore excluded types
-          propTablesExclude.some(Comp => propTableCompare(innerChildren, Comp)))
-      ) {
-        return;
-      }
-
-      if (innerChildren.type && !types.has(innerChildren.type)) {
-        types.set(innerChildren.type, true);
-      }
-    };
-
-    // extract components from children
-    extract(children);
-
-    const array = Array.from(types.keys());
-    array.sort((a, b) => (getDisplayName(a) > getDisplayName(b) ? 1 : -1));
-
-    propTables = array.map((type, i) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <div key={`${getDisplayName(type)}_${i}`}>
-        <h3 style={stylesheet.propTableHead}>"{getDisplayName(type)}" Component</h3>
-        <this.props.PropTable
-          type={getType(type)}
-          maxPropObjectKeys={maxPropObjectKeys}
-          maxPropArrayLength={maxPropArrayLength}
-          maxPropStringLength={maxPropStringLength}
-          excludedPropTypes={excludedPropTypes}
-        />
-      </div>
-    ));
-
-    if (!propTables || propTables.length === 0) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <h1 style={stylesheet.source.h1}>Prop Types</h1>
-        {propTables}
-      </Fragment>
-    );
-  }
-
-  render() {
-    const { showInline } = this.props;
-    return showInline ? this._renderInline() : this._renderOverlay();
-  }
-}
-
-Story.getDerivedStateFromProps = ({ styles }) => ({ stylesheet: styles(stylesheetBase) });
-
-Story.displayName = 'Story';
-
-Story.propTypes = {
-  context: PropTypes.shape({
-    kind: PropTypes.string,
-    name: PropTypes.string,
-  }),
-  info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  propTables: PropTypes.arrayOf(PropTypes.func),
-  propTablesExclude: PropTypes.arrayOf(PropTypes.func),
-  propTableCompare: PropTypes.func.isRequired,
-  showInline: PropTypes.bool,
-  showHeader: PropTypes.bool,
-  showSource: PropTypes.bool,
-  // eslint-disable-next-line react/no-unused-prop-types
-  styles: PropTypes.func.isRequired,
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  components: PropTypes.shape({}),
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
-  excludedPropTypes: PropTypes.arrayOf(PropTypes.string),
-};
-
-Story.defaultProps = {
-  context: null,
-  info: '',
-  children: null,
-  propTables: null,
-  propTablesExclude: [],
-  showInline: false,
-  showHeader: true,
-  showSource: true,
-  components: {},
-  excludedPropTypes: [],
-};
-
-polyfill(Story);
-
-export default Story;
diff --git a/addons/info/src/components/__snapshots__/PropTable.test.js.snap b/addons/info/src/components/__snapshots__/PropTable.test.js.snap
deleted file mode 100644
index d153afdfd080..000000000000
--- a/addons/info/src/components/__snapshots__/PropTable.test.js.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PropTable multiLineText should exclude excluded propTypes 1`] = `
-<small>
-  No propTypes defined!
-</small>
-`;
-
-exports[`PropTable multiLineText should have 2 br tags for 3 lines of text 1`] = `
-Array [
-  <span>
-     
-    foo 
-  </span>,
-  <span>
-    <br />
-     
-     bar 
-  </span>,
-  <span>
-    <br />
-     
-     baz
-  </span>,
-]
-`;
-
-exports[`PropTable multiLineText should include all propTypes by default 1`] = `
-<Table>
-  <Thead>
-    <Tr>
-      <Th>
-        property
-      </Th>
-      <Th>
-        propType
-      </Th>
-      <Th>
-        required
-      </Th>
-      <Th>
-        default
-      </Th>
-      <Th>
-        description
-      </Th>
-    </Tr>
-  </Thead>
-  <Tbody>
-    <Tr
-      key="foo"
-    >
-      <Td>
-        foo
-      </Td>
-      <Td>
-        <PrettyPropType
-          depth={1}
-          propType={
-            Object {
-              "name": "string",
-            }
-          }
-        />
-      </Td>
-      <Td>
-        -
-      </Td>
-      <Td>
-        -
-      </Td>
-      <Td />
-    </Tr>
-  </Tbody>
-</Table>
-`;
diff --git a/addons/info/src/components/makeTableComponent.js b/addons/info/src/components/makeTableComponent.js
deleted file mode 100644
index 8842bcbcaaef..000000000000
--- a/addons/info/src/components/makeTableComponent.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable no-underscore-dangle,react/forbid-foreign-prop-types */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const PropTypesMap = new Map();
-
-Object.keys(PropTypes).forEach(typeName => {
-  const type = PropTypes[typeName];
-
-  PropTypesMap.set(type, typeName);
-  PropTypesMap.set(type.isRequired, typeName);
-});
-
-const isNotEmpty = obj => obj && obj.props && Object.keys(obj.props).length > 0;
-
-const hasDocgen = type => isNotEmpty(type.__docgenInfo);
-
-const propsFromDocgen = type => {
-  const props = {};
-  const docgenInfoProps = type.__docgenInfo.props;
-
-  Object.keys(docgenInfoProps).forEach(property => {
-    const docgenInfoProp = docgenInfoProps[property];
-    const defaultValueDesc = docgenInfoProp.defaultValue || {};
-    const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
-
-    props[property] = {
-      property,
-      propType,
-      required: docgenInfoProp.required,
-      description: docgenInfoProp.description,
-      defaultValue: defaultValueDesc.value,
-    };
-  });
-
-  return props;
-};
-
-const propsFromPropTypes = type => {
-  const props = {};
-
-  if (type.propTypes) {
-    Object.keys(type.propTypes).forEach(property => {
-      const typeInfo = type.propTypes[property];
-      const required = typeInfo.isRequired === undefined;
-      const docgenInfo =
-        type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
-      const description = docgenInfo ? docgenInfo.description : null;
-      let propType = PropTypesMap.get(typeInfo) || 'other';
-
-      if (propType === 'other') {
-        if (docgenInfo && docgenInfo.type) {
-          propType = docgenInfo.type.name;
-        }
-      }
-
-      props[property] = { property, propType, required, description };
-    });
-  }
-
-  if (type.defaultProps) {
-    Object.keys(type.defaultProps).forEach(property => {
-      const value = type.defaultProps[property];
-
-      if (value === undefined) {
-        return;
-      }
-
-      if (!props[property]) {
-        props[property] = { property };
-      }
-
-      props[property].defaultValue = value;
-    });
-  }
-
-  return props;
-};
-
-export default function makeTableComponent(Component) {
-  const TableComponent = props => {
-    const { type } = props;
-    if (!type) {
-      return null;
-    }
-
-    const propDefinitionsMap = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type);
-    const propDefinitions = Object.values(propDefinitionsMap);
-
-    return <Component propDefinitions={propDefinitions} {...props} />;
-  };
-
-  TableComponent.propTypes = {
-    type: PropTypes.func.isRequired,
-  };
-
-  return TableComponent;
-}
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
deleted file mode 100644
index 4e6b24ba7de2..000000000000
--- a/addons/info/src/components/markdown/code.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SyntaxHighlighter } from '@storybook/components';
-import { ThemeProvider, convert } from '@storybook/theming';
-
-const Code = ({ code, language = 'plaintext', ...rest }) => (
-  <ThemeProvider theme={convert()}>
-    <SyntaxHighlighter bordered copyable format={false} language={language} {...rest}>
-      {code}
-    </SyntaxHighlighter>
-  </ThemeProvider>
-);
-Code.propTypes = {
-  language: PropTypes.string.isRequired,
-  code: PropTypes.string.isRequired,
-};
-
-export { Code };
-
-export function Blockquote({ children }) {
-  const style = {
-    fontSize: '1.88em',
-    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    borderLeft: '8px solid #fafafa',
-    padding: '1rem',
-  };
-  return <blockquote style={style}>{children}</blockquote>;
-}
-
-Blockquote.propTypes = { children: PropTypes.node };
-Blockquote.defaultProps = { children: null };
-
-export { default as Pre } from './pre/pre';
diff --git a/addons/info/src/components/markdown/htags.js b/addons/info/src/components/markdown/htags.js
deleted file mode 100644
index 57da398d6422..000000000000
--- a/addons/info/src/components/markdown/htags.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const defaultProps = {
-  children: null,
-  id: null,
-};
-const propTypes = {
-  children: PropTypes.node,
-  id: PropTypes.string,
-};
-
-export function H1({ id, children }) {
-  const styles = {
-    borderBottom: '1px solid #eee',
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '40px',
-  };
-  return (
-    <h1 id={id} style={styles}>
-      {children}
-    </h1>
-  );
-}
-
-H1.defaultProps = defaultProps;
-H1.propTypes = propTypes;
-
-export function H2({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '30px',
-  };
-  return (
-    <h2 id={id} style={styles}>
-      {children}
-    </h2>
-  );
-}
-
-H2.defaultProps = defaultProps;
-H2.propTypes = propTypes;
-
-export function H3({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '22px',
-    textTransform: 'uppercase',
-  };
-  return (
-    <h3 id={id} style={styles}>
-      {children}
-    </h3>
-  );
-}
-
-H3.defaultProps = defaultProps;
-H3.propTypes = propTypes;
-
-export function H4({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '20px',
-  };
-  return (
-    <h4 id={id} style={styles}>
-      {children}
-    </h4>
-  );
-}
-
-H4.defaultProps = defaultProps;
-H4.propTypes = propTypes;
-
-export function H5({ id, children }) {
-  const styles = {
-    fontWeight: 600,
-    margin: 0,
-    padding: 0,
-    fontSize: '18px',
-  };
-  return (
-    <h5 id={id} style={styles}>
-      {children}
-    </h5>
-  );
-}
-
-H5.defaultProps = defaultProps;
-H5.propTypes = propTypes;
-
-export function H6({ id, children }) {
-  const styles = {
-    fontWeight: 400,
-    margin: 0,
-    padding: 0,
-    fontSize: '18px',
-  };
-  return (
-    <h6 id={id} style={styles}>
-      {children}
-    </h6>
-  );
-}
-
-H6.defaultProps = defaultProps;
-H6.propTypes = propTypes;
diff --git a/addons/info/src/components/markdown/index.js b/addons/info/src/components/markdown/index.js
deleted file mode 100644
index 2c9ff6ea3064..000000000000
--- a/addons/info/src/components/markdown/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { H1, H2, H3, H4, H5, H6 } from './htags';
-export { Code, Pre } from './code';
-export { P, A, LI, UL } from './text';
diff --git a/addons/info/src/components/markdown/pre/copy.js b/addons/info/src/components/markdown/pre/copy.js
deleted file mode 100644
index 8142b089573e..000000000000
--- a/addons/info/src/components/markdown/pre/copy.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable no-undef */
-export default function copy(str) {
-  const tmp = document.createElement('TEXTAREA');
-  const focus = document.activeElement;
-
-  tmp.value = str;
-
-  document.body.appendChild(tmp);
-  tmp.select();
-  document.execCommand('copy');
-  document.body.removeChild(tmp);
-  focus.focus();
-}
diff --git a/addons/info/src/components/markdown/pre/copyButton.js b/addons/info/src/components/markdown/pre/copyButton.js
deleted file mode 100644
index cf44fa8c3b53..000000000000
--- a/addons/info/src/components/markdown/pre/copyButton.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function CopyButton({ onClick, toggled }) {
-  const toggleText = 'Copied!';
-  const text = 'Copy';
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      style={{
-        backgroundColor: 'rgb(255, 255, 255)',
-        cursor: 'pointer',
-        fontSize: '13px',
-        alignSelf: 'flex-start',
-        flexShrink: '0',
-        overflow: 'hidden',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'rgb(238, 238, 238)',
-        borderImage: 'initial',
-        borderRadius: 3,
-        padding: '3px 10px',
-      }}
-    >
-      {toggled ? toggleText : text}
-    </button>
-  );
-}
-
-CopyButton.propTypes = {
-  onClick: PropTypes.func,
-  toggled: PropTypes.bool,
-};
-
-CopyButton.defaultProps = {
-  onClick: () => {},
-  toggled: false,
-};
-
-export default CopyButton;
diff --git a/addons/info/src/components/markdown/pre/pre.js b/addons/info/src/components/markdown/pre/pre.js
deleted file mode 100644
index 160b2c09a964..000000000000
--- a/addons/info/src/components/markdown/pre/pre.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import CopyButton from './copyButton';
-import copy from './copy';
-
-const TOGGLE_TIMEOUT = 1800;
-
-class Pre extends React.Component {
-  state = {
-    copied: false,
-  };
-
-  setRef = elem => {
-    this.pre = elem;
-  };
-
-  handleClick = () => {
-    const text = this.pre && this.pre.innerText;
-
-    if (!text) {
-      return;
-    }
-
-    copy(text);
-    this.setState({ copied: true });
-
-    clearTimeout(this.timeout);
-
-    this.timeout = setTimeout(() => {
-      this.setState({ copied: false });
-    }, TOGGLE_TIMEOUT);
-  };
-
-  render() {
-    const { theme, children } = this.props;
-    const { pre } = theme;
-    const { copied } = this.state;
-
-    return (
-      <pre
-        style={{
-          ...{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            fontSize: '.88em',
-            fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-            backgroundColor: '#fafafa',
-            padding: '.5rem',
-            lineHeight: 1.5,
-            overflowX: 'scroll',
-          },
-          ...pre,
-        }}
-      >
-        <div ref={this.setRef}>{children}</div>
-        <CopyButton onClick={this.handleClick} toggled={copied} />
-      </pre>
-    );
-  }
-}
-
-Pre.propTypes = {
-  children: PropTypes.node,
-  theme: PropTypes.shape({
-    pre: PropTypes.object,
-  }),
-};
-
-Pre.defaultProps = {
-  children: null,
-  theme: {},
-};
-
-export default Pre;
diff --git a/addons/info/src/components/markdown/text.js b/addons/info/src/components/markdown/text.js
deleted file mode 100644
index 356a4575cd5e..000000000000
--- a/addons/info/src/components/markdown/text.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const defaultProps = { children: null };
-const propTypes = { children: PropTypes.node };
-
-export function P({ children }) {
-  return <p>{children}</p>;
-}
-
-P.defaultProps = defaultProps;
-P.propTypes = propTypes;
-
-export function LI({ children }) {
-  return <li>{children}</li>;
-}
-
-LI.defaultProps = defaultProps;
-LI.propTypes = propTypes;
-
-export function UL({ children }) {
-  return <ul>{children}</ul>;
-}
-
-UL.defaultProps = defaultProps;
-UL.propTypes = propTypes;
-
-export function A({ href, children }) {
-  const style = {
-    color: '#3498db',
-  };
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" style={style}>
-      {children}
-    </a>
-  );
-}
-
-A.defaultProps = defaultProps;
-A.propTypes = { children: PropTypes.node, href: PropTypes.string.isRequired };
diff --git a/addons/info/src/components/types/ArrayOf.js b/addons/info/src/components/types/ArrayOf.js
deleted file mode 100644
index 28f1dffe8156..000000000000
--- a/addons/info/src/components/types/ArrayOf.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable import/no-cycle */
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const ArrayOf = ({ propType }) => (
-  <span>
-    <span>[</span>
-    <span>
-      <PrettyPropType propType={getPropTypes(propType)} />
-    </span>
-    <span>]</span>
-  </span>
-);
-
-ArrayOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default ArrayOf;
diff --git a/addons/info/src/components/types/Enum.js b/addons/info/src/components/types/Enum.js
deleted file mode 100644
index 2de8d4830a87..000000000000
--- a/addons/info/src/components/types/Enum.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const Enum = ({ propType }) => (
-  <span>
-    {getPropTypes(propType)
-      .map(({ value }) => value)
-      .join(' | ')}
-  </span>
-);
-
-Enum.propTypes = {
-  propType: TypeInfo.isRequired,
-};
diff --git a/addons/info/src/components/types/InstanceOf.js b/addons/info/src/components/types/InstanceOf.js
deleted file mode 100644
index 786c77fdd399..000000000000
--- a/addons/info/src/components/types/InstanceOf.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const InstanceOf = ({ propType }) => <span>{getPropTypes(propType)}</span>;
-
-InstanceOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default InstanceOf;
diff --git a/addons/info/src/components/types/Literal.js b/addons/info/src/components/types/Literal.js
deleted file mode 100644
index 83b222e40788..000000000000
--- a/addons/info/src/components/types/Literal.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { TypeInfo } from './proptypes';
-
-const Literal = ({ propType }) => <span>{propType.value}</span>;
-
-Literal.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default Literal;
diff --git a/addons/info/src/components/types/ObjectOf.js b/addons/info/src/components/types/ObjectOf.js
deleted file mode 100644
index 48a56d91026f..000000000000
--- a/addons/info/src/components/types/ObjectOf.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable import/no-cycle */
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const ObjectOf = ({ propType }) => (
-  <span>
-    {'{[<key>]: '}
-    <PrettyPropType propType={getPropTypes(propType)} />
-    {'}'}
-  </span>
-);
-
-ObjectOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default ObjectOf;
diff --git a/addons/info/src/components/types/OneOf.js b/addons/info/src/components/types/OneOf.js
deleted file mode 100644
index deacfa4633e8..000000000000
--- a/addons/info/src/components/types/OneOf.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const joinValues = propTypes => propTypes.map(({ value }) => value).join(' | ');
-
-const OneOf = ({ propType }) => {
-  const propTypes = getPropTypes(propType);
-  return <span>{`oneOf ${Array.isArray(propTypes) ? joinValues(propTypes) : propTypes}`}</span>;
-};
-
-OneOf.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default OneOf;
diff --git a/addons/info/src/components/types/OneOfType.js b/addons/info/src/components/types/OneOfType.js
deleted file mode 100644
index 2b269d0dad68..000000000000
--- a/addons/info/src/components/types/OneOfType.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-disable import/no-cycle */
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const OneOfType = ({ propType }) => {
-  const propTypes = getPropTypes(propType);
-  return (
-    <span>
-      {propTypes
-        .map((value, i) => {
-          const key = `${value.name}${value.value ? `-${value.value}` : ''}`;
-          return [
-            <PrettyPropType key={key} propType={value} />,
-            i < propTypes.length - 1 ? <span key={`${key}-separator`}> | </span> : null,
-          ];
-        })
-        .reduce((acc, tuple) => acc.concat(tuple), [])}
-    </span>
-  );
-};
-OneOfType.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-export default OneOfType;
diff --git a/addons/info/src/components/types/PrettyPropType.js b/addons/info/src/components/types/PrettyPropType.js
deleted file mode 100644
index ff7ea413614b..000000000000
--- a/addons/info/src/components/types/PrettyPropType.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint-disable import/no-cycle */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import Shape from './Shape';
-import OneOfType from './OneOfType';
-import ArrayOf from './ArrayOf';
-import ObjectOf from './ObjectOf';
-import OneOf from './OneOf';
-import InstanceOf from './InstanceOf';
-import Signature from './Signature';
-import Literal from './Literal';
-
-import { TypeInfo } from './proptypes';
-
-// propType -> Component map - these are a bit more complex prop types to display
-const propTypeComponentMap = new Map([
-  ['shape', Shape],
-  ['union', OneOfType],
-  ['arrayOf', ArrayOf],
-  ['objectOf', ObjectOf],
-  // Might be overkill to have below proptypes as separate components *shrug*
-  ['literal', Literal],
-  ['enum', OneOf],
-  ['instanceOf', InstanceOf],
-  ['signature', Signature],
-]);
-
-const PrettyPropType = props => {
-  const { propType, depth } = props;
-  if (!propType) {
-    return <span>unknown</span>;
-  }
-
-  if (propTypeComponentMap.has(propType.name)) {
-    const Component = propTypeComponentMap.get(propType.name);
-    return <Component propType={propType} depth={depth} />;
-  }
-
-  // Otherwise, propType does not have a dedicated component, display proptype name by default
-  return <span>{propType.name || propType}</span>;
-};
-
-PrettyPropType.displayName = 'PrettyPropType';
-
-PrettyPropType.defaultProps = {
-  propType: null,
-  depth: 1,
-};
-
-PrettyPropType.propTypes = {
-  propType: TypeInfo,
-  depth: PropTypes.number,
-};
-
-export default PrettyPropType;
diff --git a/addons/info/src/components/types/PropertyLabel.js b/addons/info/src/components/types/PropertyLabel.js
deleted file mode 100644
index d5ad3d896fab..000000000000
--- a/addons/info/src/components/types/PropertyLabel.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const styles = {
-  hasProperty: {
-    whiteSpace: 'nowrap',
-  },
-};
-
-const PropertyLabel = ({ property, required }) => {
-  if (!property) return null;
-
-  return (
-    <span style={styles.hasProperty}>
-      {property}
-      {required ? '' : '?'}:&nbsp;
-    </span>
-  );
-};
-
-PropertyLabel.propTypes = {
-  property: PropTypes.string,
-  required: PropTypes.bool,
-};
-
-PropertyLabel.defaultProps = {
-  property: '',
-  required: false,
-};
-
-export default PropertyLabel;
diff --git a/addons/info/src/components/types/Shape.js b/addons/info/src/components/types/Shape.js
deleted file mode 100644
index a9f1b6c5affc..000000000000
--- a/addons/info/src/components/types/Shape.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/* eslint-disable import/no-cycle */
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import PrettyPropType from './PrettyPropType';
-import PropertyLabel from './PropertyLabel';
-
-import { TypeInfo, getPropTypes } from './proptypes';
-
-const MARGIN_SIZE = 15;
-
-const HighlightButton = props => (
-  <button
-    type="button"
-    {...props}
-    style={{
-      display: 'inline-block',
-      background: 'none',
-      border: '0 none',
-      color: 'gray',
-      cursor: 'pointer',
-    }}
-  />
-);
-
-class Shape extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      minimized: false,
-    };
-  }
-
-  handleToggle = () => {
-    const { minimized } = this.state;
-    this.setState({
-      minimized: !minimized,
-    });
-  };
-
-  render() {
-    const { propType, depth } = this.props;
-    const { minimized } = this.state;
-
-    const propTypes = getPropTypes(propType);
-    return (
-      <span>
-        <HighlightButton onClick={this.handleToggle}>{'{'}</HighlightButton>
-        <HighlightButton onClick={this.handleToggle}>...</HighlightButton>
-        {!minimized &&
-          Object.keys(propTypes).map(childProperty => (
-            <div key={childProperty} style={{ marginLeft: depth * MARGIN_SIZE }}>
-              <PropertyLabel
-                property={childProperty}
-                required={propTypes[childProperty].required}
-              />
-              <PrettyPropType depth={depth + 1} propType={propTypes[childProperty]} />,
-            </div>
-          ))}
-
-        <HighlightButton onClick={this.handleToggle}>{'}'}</HighlightButton>
-      </span>
-    );
-  }
-}
-
-Shape.propTypes = {
-  propType: TypeInfo,
-  depth: PropTypes.number.isRequired,
-};
-
-Shape.defaultProps = {
-  propType: null,
-};
-
-export default Shape;
diff --git a/addons/info/src/components/types/Signature.js b/addons/info/src/components/types/Signature.js
deleted file mode 100644
index 3e0de0fb570d..000000000000
--- a/addons/info/src/components/types/Signature.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { TypeInfo } from './proptypes';
-
-const Signature = ({ propType }) => <span>{propType.raw}</span>;
-
-Signature.propTypes = {
-  propType: TypeInfo.isRequired,
-};
-
-export default Signature;
diff --git a/addons/info/src/components/types/proptypes.js b/addons/info/src/components/types/proptypes.js
deleted file mode 100644
index ae5e28f942d1..000000000000
--- a/addons/info/src/components/types/proptypes.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import PropTypes, { oneOfType } from 'prop-types';
-
-export const TypeInfo = oneOfType([
-  PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.any,
-  }),
-  PropTypes.string,
-]);
-
-export const getPropTypes = propType =>
-  typeof propType === 'string' ? propType : propType.value || propType.elements;
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
deleted file mode 100644
index 32223bf6693d..000000000000
--- a/addons/info/src/index.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import nestedObjectAssign from 'nested-object-assign';
-import deprecate from 'util-deprecate';
-import { makeDecorator } from '@storybook/addons';
-import { logger } from '@storybook/client-logger';
-import Story from './components/Story';
-import PropTable from './components/PropTable/index';
-import makeTableComponent from './components/makeTableComponent';
-import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
-
-const defaultOptions = {
-  inline: false,
-  header: true,
-  source: true,
-  propTables: [],
-  propTableCompare: (element, Component) =>
-    // https://github.com/gaearon/react-hot-loader#checking-element-types
-    typeof reactHotLoaderGlobal === 'undefined'
-      ? element.type === Component
-      : // eslint-disable-next-line no-undef
-        reactHotLoaderGlobal.areComponentsEqual(element.type, Component),
-  TableComponent: PropTable,
-  maxPropsIntoLine: 3,
-  maxPropObjectKeys: 3,
-  maxPropArrayLength: 3,
-  maxPropStringLength: 50,
-};
-
-const defaultComponents = {
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6,
-  code: Code,
-  p: P,
-  a: A,
-  li: LI,
-  ul: UL,
-};
-
-let hasWarned = false;
-
-function addInfo(storyFn, context, infoOptions) {
-  const options = {
-    ...defaultOptions,
-    ...infoOptions,
-  };
-
-  // props.propTables can only be either an array of components or null
-  // propTables option is allowed to be set to 'false' (a boolean)
-  // if the option is false, replace it with null to avoid react warnings
-  if (!options.propTables) {
-    options.propTables = null;
-  }
-
-  const components = { ...defaultComponents };
-  if (options && options.components) {
-    Object.assign(components, options.components);
-  }
-  if (options && options.marksyConf) {
-    if (!hasWarned) {
-      logger.warn('@storybook/addon-info: "marksyConf" option has been renamed to "components"');
-      hasWarned = true;
-    }
-
-    Object.assign(components, options.marksyConf);
-  }
-  const props = {
-    info: options.text,
-    context,
-    showInline: Boolean(options.inline),
-    showHeader: Boolean(options.header),
-    showSource: Boolean(options.source),
-    styles:
-      typeof options.styles === 'function'
-        ? options.styles
-        : s => nestedObjectAssign({}, s, options.styles),
-    propTables: options.propTables,
-    propTablesExclude: options.propTablesExclude,
-    propTableCompare: options.propTableCompare,
-    PropTable: makeTableComponent(options.TableComponent),
-    components,
-    maxPropObjectKeys: options.maxPropObjectKeys,
-    maxPropArrayLength: options.maxPropArrayLength,
-    maxPropsIntoLine: options.maxPropsIntoLine,
-    maxPropStringLength: options.maxPropStringLength,
-    excludedPropTypes: options.excludedPropTypes,
-  };
-  return <Story {...props}>{storyFn(context)}</Story>;
-}
-
-export const withInfo = makeDecorator({
-  name: 'withInfo',
-  parameterName: 'info',
-  allowDeprecatedUsage: true,
-  wrapper: (getStory, context, { options, parameters }) => {
-    const storyOptions = parameters || options;
-    const infoOptions = typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
-    const mergedOptions =
-      typeof infoOptions === 'string' ? infoOptions : { ...options, ...infoOptions };
-    return addInfo(getStory, context, mergedOptions);
-  },
-});
-
-export { Story };
-
-export function setDefaults(newDefaults) {
-  return deprecate(
-    () => Object.assign(defaultOptions, newDefaults),
-    'setDefaults is deprecated. Instead, you can pass options into withInfo(options) directly, or use the info parameter.'
-  )();
-}
diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js
deleted file mode 100644
index 7152f4a58b82..000000000000
--- a/addons/info/src/index.test.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { withInfo, setDefaults } from '.';
-import externalMdDocs from '../README.md';
-
-const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
-  <div>
-    <h1>{String(func)}</h1>
-    <h2>{String(obj)}</h2>
-    <h3>{String(array)}</h3>
-    <h4>{String(number)}</h4>
-    <h5>{String(string)}</h5>
-    <h6>{String(bool)}</h6>
-    <p>{String(empty)}</p>
-    <a href="#">test</a>
-    <code>storiesOf</code>
-    <ul>
-      <li>1</li>
-      <li>2</li>
-    </ul>
-  </div>
-);
-
-const reactClassPath = 'some/path/TestComponent.jsx';
-const storybookReactClassMock = {
-  name: 'TestComponent',
-  path: reactClassPath,
-  docgenInfo: {
-    description: `
-# Awesome test component description
-## with markdown support
-**bold** *cursive*
-\`\`\`js
-a;
-\`\`\``,
-    name: 'TestComponent',
-  },
-};
-
-const testOptions = { propTables: false };
-
-const testMarkdown = `# Test story
-## with markdown info
-containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)`;
-
-describe('addon Info', () => {
-  const createStoryFn = Component => ({ name }) => (
-    <div>
-      It's a {name} story:
-      <Component
-        func={x => x + 1}
-        obj={{ a: 'a', b: 'b' }}
-        array={[1, 2, 3]}
-        number={7}
-        string="seven"
-        bool
-      />
-    </div>
-  );
-  const storyFn = createStoryFn(TestComponent);
-
-  it('should render <Info /> and markdown', () => {
-    const Info = withInfo(testMarkdown)(storyFn);
-
-    expect(mount(<Info />)).toMatchSnapshot();
-  });
-  it('should render <Info /> and external markdown', () => {
-    const Info = withInfo(externalMdDocs)(storyFn);
-
-    expect(mount(<Info />)).toMatchSnapshot();
-  });
-  it('should render with text options', () => {
-    const Info = withInfo({ text: 'some text here' })(storyFn);
-    mount(<Info />);
-  });
-  it('should render with missed info', () => {
-    setDefaults(testOptions);
-    const Info = withInfo()(storyFn);
-    mount(<Info />);
-  });
-  it('should render <Info /> for memoized component', () => {
-    const MemoizedTestComponent = React.memo(TestComponent);
-    const Info = withInfo()(createStoryFn(MemoizedTestComponent));
-
-    expect(mount(<Info />)).toMatchSnapshot();
-  });
-
-  it('should render component description if story kind matches component', () => {
-    const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
-
-    const Info = () =>
-      withInfo({ inline: true, propTables: false })(storyFn, {
-        kind: 'TestComponent',
-        name: 'Basic test',
-      });
-
-    expect(mount(<Info />)).toMatchSnapshot();
-
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
-  });
-
-  it('should render component description if story name matches component', () => {
-    const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
-
-    const Info = () =>
-      withInfo({ inline: true, propTables: false })(storyFn, {
-        kind: 'Test Components',
-        name: 'TestComponent',
-      });
-
-    expect(mount(<Info />)).toMatchSnapshot();
-
-    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
-  });
-});
diff --git a/addons/info/src/react-utils.js b/addons/info/src/react-utils.js
deleted file mode 100644
index c85ff7bb90eb..000000000000
--- a/addons/info/src/react-utils.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { isMemo } from 'react-is';
-
-export function getType(typeOrMemo) {
-  return isMemo(typeOrMemo) ? typeOrMemo.type : typeOrMemo;
-}
-
-export function getDisplayName(typeOrMemo) {
-  if (typeof typeOrMemo === 'string') {
-    return typeOrMemo;
-  }
-
-  const type = getType(typeOrMemo);
-  return type.displayName || type.name || 'Unknown';
-}
diff --git a/addons/notes/README.md b/addons/notes/README.md
deleted file mode 100644
index c0d5082e1401..000000000000
--- a/addons/notes/README.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# Storybook Addon Notes
-
-Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.js.org).
-
-[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
-
-![Storybook Addon Notes Demo](docs/demo.png)
-
-## Getting Started
-
-**NOTE: Documentation on `next` branch is for alpha version, stable release is on [master](https://github.com/storybookjs/storybook/tree/master/addons/)**
-
-```sh
-yarn add -D @storybook/addon-notes
-```
-
-within `.storybook/main.js`:
-
-```js
-module.exports = {
-  addons: ['@storybook/addon-notes/register']
-}
-```
-
-Alternatively register the notes addon into a panel. Choose only one, not both.
-
-```js
-module.exports = {
-  addons: ['@storybook/addon-notes/register-panel']
-}
-```
-
-Now, you can use the `notes` parameter to add a note to each story.
-
-
-```js
-import Component from './Component';
-
-export default {
-  title: 'Component',
-  parameters: {
-    notes: 'some documentation here',
-  },
-};
-```
-
-### Upgrading to CSF Format
-
-Add `notes` to the `parameters` object:
-
-```js
-export default {
-  parameters: {
-    notes: 'My notes',
-  }
-}
-```
-
-## Using Markdown
-
-Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
-
-```js
-import Component from './Component';
-import markdown from './someMarkdownText.md';
-
-export default {
-  title: 'Component',
-};
-
-export const withMarkdown = () => <Component />;
-withmarkdown.story = {
-  parameters: {
-    notes: { markdown },
-  }
-};
-```
-
-## Giphy
-
-When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value `cheese` of the query prop is used to search and return the first result returned by Giphy.
-
-```md
-# Title
-
-<Giphy query='cheese' />
-```
-
-## Multiple Notes Sections
-
-If you need to display different notes for different consumers of your storybook (e.g design, developers), you can configure multiple notes pages. The following will render a tab with unique notes for both `Introduction` and `Design`.
-
-```js
-import { storiesOf } from '@storybook/react';
-import Component from './Component';
-
-import intro from './intro.md';
-import design from './design.md';
-
-export default {
-  title: 'Component',
-  parameters: {
-    notes: { Introduction: intro, 'Design Notes': design },
-  },
-};
-```
diff --git a/addons/notes/docs/demo.png b/addons/notes/docs/demo.png
deleted file mode 100644
index 1584dcef9ad5..000000000000
Binary files a/addons/notes/docs/demo.png and /dev/null differ
diff --git a/addons/notes/package.json b/addons/notes/package.json
deleted file mode 100644
index 6fa53fbaaaf9..000000000000
--- a/addons/notes/package.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "@storybook/addon-notes",
-  "version": "6.0.0-alpha.2",
-  "description": "Write notes for your Storybook stories.",
-  "keywords": [
-    "addon",
-    "notes",
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/notes",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/notes"
-  },
-  "license": "MIT",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "main": "dist/public_api.js",
-  "types": "dist/public_api.d.ts",
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.2",
-    "@storybook/api": "6.0.0-alpha.2",
-    "@storybook/client-logger": "6.0.0-alpha.2",
-    "@storybook/components": "6.0.0-alpha.2",
-    "@storybook/core-events": "6.0.0-alpha.2",
-    "@storybook/router": "6.0.0-alpha.2",
-    "@storybook/theming": "6.0.0-alpha.2",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "markdown-to-jsx": "^6.10.3",
-    "memoizerific": "^1.11.3",
-    "prop-types": "^15.7.2",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@types/prop-types": "^15.5.9",
-    "@types/util-deprecate": "^1.0.0",
-    "@types/webpack-env": "^1.15.0"
-  },
-  "peerDependencies": {
-    "react": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
-}
diff --git a/addons/notes/register-panel.js b/addons/notes/register-panel.js
deleted file mode 100644
index b345979c2c39..000000000000
--- a/addons/notes/register-panel.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/register.js').default('panel');
diff --git a/addons/notes/register.js b/addons/notes/register.js
deleted file mode 100644
index 752a851655c2..000000000000
--- a/addons/notes/register.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./dist/register.js').default('tab');
diff --git a/addons/notes/src/Panel.test.js b/addons/notes/src/Panel.test.js
deleted file mode 100644
index 13ef69d336c9..000000000000
--- a/addons/notes/src/Panel.test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { Link } from '@reach/router';
-import { SyntaxHighlighter as SyntaxHighlighterBase } from '@storybook/components';
-import { SyntaxHighlighter, NotesLink } from './Panel';
-
-describe('NotesPanel', () => {
-  describe('SyntaxHighlighter component', () => {
-    it('should return code if className is undefined', () => {
-      const wrapper = shallow(<SyntaxHighlighter>some text</SyntaxHighlighter>);
-      const code = wrapper.find('code');
-      expect(code.exists()).toBeTruthy();
-      expect(code.text()).toBe('some text');
-    });
-    it('should return SyntaxHighlighterBase if there is a className prop', () => {
-      const wrapper = shallow(
-        <SyntaxHighlighter className="lang-jsx">some text</SyntaxHighlighter>
-      );
-      const syntaxHighlighterBase = wrapper.find(SyntaxHighlighterBase);
-      expect(syntaxHighlighterBase.exists()).toBeTruthy();
-      expect(syntaxHighlighterBase.prop('language')).toBe('jsx');
-    });
-  });
-
-  describe('NotesLink component', () => {
-    it('should render storybook links with @storybook/router Link', () => {
-      const component = mount(
-        <NotesLink href="/story/addon-notes" title="title">
-          Storybook Link
-        </NotesLink>
-      );
-      expect(component.find(Link).prop('to')).toBe('/?path=/story/addon-notes');
-      expect(component.find(Link).prop('title')).toBe('title');
-    });
-    it('should render absolute links as <a>', () => {
-      const component = mount(
-        <NotesLink href="https://example.com" title="title">
-          Storybook Link
-        </NotesLink>
-      );
-      expect(component.find('a').prop('href')).toBe('https://example.com');
-      expect(component.find('a').prop('title')).toBe('title');
-    });
-  });
-});
diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx
deleted file mode 100644
index d13879abd9f7..000000000000
--- a/addons/notes/src/Panel.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import React, { ReactElement, Fragment, ReactNode } from 'react';
-import { types } from '@storybook/addons';
-import { API, Consumer, Combo } from '@storybook/api';
-import { Link as RouterLink } from '@storybook/router';
-import { styled } from '@storybook/theming';
-
-import {
-  SyntaxHighlighter as SyntaxHighlighterBase,
-  Placeholder,
-  DocumentWrapper,
-  Link,
-  TabWrapper,
-  TabsState,
-} from '@storybook/components';
-import Markdown from 'markdown-to-jsx';
-import Giphy from './giphy';
-
-import { formatter } from './formatter';
-
-import { PARAM_KEY, Parameters } from './shared';
-
-const Panel = styled.div<{}>(({ theme }) => ({
-  padding: '3rem 40px',
-  boxSizing: 'border-box',
-  width: '100%',
-  maxWidth: 980,
-  margin: '0 auto',
-  ...(theme.addonNotesTheme || {}),
-}));
-
-interface Props {
-  active: boolean;
-  api: API;
-}
-
-function read(param: Parameters | undefined): Record<string, string> | string | undefined {
-  if (!param) {
-    return undefined;
-  }
-  if (typeof param === 'string') {
-    return param;
-  }
-  if ('disable' in param) {
-    return undefined;
-  }
-  if ('text' in param) {
-    return param.text;
-  }
-  if ('markdown' in param) {
-    return param.markdown;
-  }
-  if (typeof param === 'object') {
-    return param;
-  }
-  return undefined;
-}
-
-interface SyntaxHighlighterProps {
-  className?: string;
-  children: ReactElement;
-  [key: string]: any;
-}
-export const SyntaxHighlighter = ({ className, children, ...props }: SyntaxHighlighterProps) => {
-  // markdown-to-jsx does not add className to inline code
-  if (typeof className !== 'string') {
-    return <code>{children}</code>;
-  }
-  // className: "lang-jsx"
-  const language = className.split('-');
-  return (
-    <SyntaxHighlighterBase
-      language={language[1] || 'plaintext'}
-      bordered
-      format={false}
-      copyable
-      {...props}
-    >
-      {children}
-    </SyntaxHighlighterBase>
-  );
-};
-
-interface NotesLinkProps {
-  href: string;
-  children: ReactElement;
-}
-export const NotesLink = ({ href, children, ...props }: NotesLinkProps) => {
-  /* https://github.com/sindresorhus/is-absolute-url/blob/master/index.js */
-  const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/.test(href);
-  const isAnchorUrl = /^#.*/.test(href);
-
-  if (isAbsoluteUrl || isAnchorUrl) {
-    return (
-      <a href={href} {...props}>
-        {children}
-      </a>
-    );
-  }
-
-  return (
-    <RouterLink to={href} {...props}>
-      {children}
-    </RouterLink>
-  );
-};
-
-// use our SyntaxHighlighter component in place of a <code> element when
-// converting markdown to react elements
-const defaultOptions = {
-  overrides: {
-    code: SyntaxHighlighter,
-    a: NotesLink,
-    Giphy: {
-      component: Giphy,
-    },
-  },
-};
-
-interface Overrides {
-  overrides: {
-    [type: string]: ReactNode;
-  };
-}
-type Options = typeof defaultOptions & Overrides;
-
-const mapper = ({
-  state,
-  api,
-}: Combo): { value?: string | Record<string, string>; options: Options } => {
-  const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce(
-    (acc, [k, v]) => ({ ...acc, [k]: v.render }),
-    {}
-  );
-  const options = {
-    ...defaultOptions,
-    overrides: { ...defaultOptions.overrides, ...extraElements },
-  };
-
-  const story = state.storiesHash[state.storyId];
-  const value = read(story ? api.getParameters(story.id, PARAM_KEY) : undefined);
-
-  return { options, value };
-};
-
-const NotesPanel = ({ active }: Props) => {
-  if (!active) {
-    return null;
-  }
-
-  return (
-    <Consumer filter={mapper}>
-      {({ options, value }: { options: Options; value?: string | Record<string, string> }) => {
-        if (!value) {
-          return (
-            <Placeholder>
-              <Fragment>No notes yet</Fragment>
-              <Fragment>
-                Learn how to&nbsp;
-                <Link
-                  href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
-                  target="_blank"
-                  withArrow
-                  secondary
-                  cancel={false}
-                >
-                  document components in Markdown
-                </Link>
-              </Fragment>
-            </Placeholder>
-          );
-        }
-
-        if (typeof value === 'string' || Object.keys(value).length === 1) {
-          const md = typeof value === 'object' ? Object.values(value)[0] : value;
-
-          return (
-            <Panel className="addon-notes-container">
-              <DocumentWrapper>
-                <Markdown options={options}>{formatter(md)}</Markdown>
-              </DocumentWrapper>
-            </Panel>
-          );
-        }
-
-        const groups: { title: string; render: (props: { active: boolean }) => void }[] = [];
-
-        Object.entries(value).forEach(([title, docs]) => {
-          groups.push({
-            title,
-            render: ({ active: isActive }) => (
-              <TabWrapper key={title} active={isActive}>
-                <Panel>
-                  <DocumentWrapper>
-                    <Markdown options={options}>{formatter(docs)}</Markdown>
-                  </DocumentWrapper>
-                </Panel>
-              </TabWrapper>
-            ),
-          });
-        });
-
-        return (
-          <div className="addon-notes-container">
-            <TabsState>
-              {groups.map(group => (
-                <div id={group.title} key={group.title} title={group.title}>
-                  {group.render}
-                </div>
-              ))}
-            </TabsState>
-          </div>
-        );
-      }}
-    </Consumer>
-  );
-};
-
-export default NotesPanel;
diff --git a/addons/notes/src/formatter.ts b/addons/notes/src/formatter.ts
deleted file mode 100644
index cb2f406fb710..000000000000
--- a/addons/notes/src/formatter.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import memoize from 'memoizerific';
-
-export const formatter = memoize(2)((code: string) => {
-  // code provided to the component is often coming from template literals, which preserve whitespace.
-  // sometimes the first line doesn't have padding, but the second does.
-  // we split the code-string into lines, then if we find padding on line 0 or 1,
-  // we assume that padding is bad, and remove that much padding on all following lines
-  return code
-    .split(/\n/)
-    .reduce(
-      (acc, i, index) => {
-        const match = i.match(/^((:?\s|\t)+)/);
-        const padding = match ? match[1] : '';
-
-        if (acc.firstIndent === '' && padding && index < 3) {
-          return { result: `${acc.result}\n${i.replace(padding, '')}`, firstIndent: padding };
-        }
-        return {
-          result: `${acc.result}\n${i.replace(acc.firstIndent, '').replace(/\s*$/, '')}`,
-          firstIndent: acc.firstIndent,
-        };
-      },
-      { firstIndent: '', result: '' }
-    )
-    .result.trim();
-});
diff --git a/addons/notes/src/giphy.tsx b/addons/notes/src/giphy.tsx
deleted file mode 100644
index 1111ce453564..000000000000
--- a/addons/notes/src/giphy.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fetch } from 'global';
-import React, { Component } from 'react';
-
-import { logger } from '@storybook/client-logger';
-
-interface Props {
-  query: string;
-}
-interface State {
-  src: string | null;
-}
-export default class Giphy extends Component<Props, State> {
-  state: State = {
-    src: null,
-  };
-
-  componentDidMount() {
-    const { query } = this.props;
-    // TODO: replace this api_key, and make it configurable
-    // note: I have requested a production api_key:
-    // it's pending: bluXZc8ZAre19mvTtVi900CdsJhbVTEK
-    fetch(`http://api.giphy.com/v1/gifs/search?limit=1&api_key=dc6zaTOxFJmzC&q=${query}`)
-      .then((response: { ok: any; json: () => void }) => response.ok && response.json())
-      .then((data: { data: { images: { original: { url: string } } }[] }) => {
-        this.setState({
-          src: data.data[0].images.original.url,
-        });
-      })
-      .catch((e: any) => logger.error(e));
-  }
-
-  render() {
-    const { src } = this.state;
-    // TODO: we should have a nice looking <Img /> component
-    return src ? <img src={src} alt="" /> : null;
-  }
-}
diff --git a/addons/notes/src/index.ts b/addons/notes/src/index.ts
deleted file mode 100644
index f1ed9aea6602..000000000000
--- a/addons/notes/src/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons';
-import deprecate from 'util-deprecate';
-
-// todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript
-export const withNotes = makeDecorator({
-  name: 'withNotes',
-  parameterName: 'notes',
-  skipIfNoParametersOrOptions: true,
-  allowDeprecatedUsage: true,
-
-  wrapper: deprecate(
-    (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
-      const storyOptions = parameters || options;
-
-      const { text, markdown } =
-        typeof storyOptions === 'string'
-          ? {
-              text: storyOptions,
-              markdown: undefined,
-            }
-          : storyOptions;
-
-      if (!text && !markdown) {
-        throw new Error(
-          `Parameter 'notes' must must be a string or an object with 'text' or 'markdown' properties`
-        );
-      }
-
-      return getStory(context);
-    },
-    'withNotes is deprecated'
-  ),
-});
-
-export const withMarkdownNotes = deprecate((text: string, options: any) => {},
-'withMarkdownNotes is deprecated');
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
diff --git a/addons/notes/src/public_api.ts b/addons/notes/src/public_api.ts
deleted file mode 100644
index dc0dc8965a31..000000000000
--- a/addons/notes/src/public_api.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '.';
diff --git a/addons/notes/src/register.tsx b/addons/notes/src/register.tsx
deleted file mode 100644
index a5c6c0bf896a..000000000000
--- a/addons/notes/src/register.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import addons, { types } from '@storybook/addons';
-
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
-
-// TODO: fix eslint in tslint (igor said he fixed it, should ask him)
-import Panel from './Panel';
-
-export default function register(type: types) {
-  addons.register(ADDON_ID, api => {
-    addons.add(PANEL_ID, {
-      type,
-      title: 'Notes',
-      route: ({ storyId }) => `/info/${storyId}`, // todo add type
-      match: ({ viewMode }) => viewMode === 'info', // todo add type
-      render: ({ active, key }) => <Panel api={api} active={active} key={key} />,
-      paramKey: PARAM_KEY,
-    });
-  });
-}
diff --git a/addons/notes/src/shared.ts b/addons/notes/src/shared.ts
deleted file mode 100644
index 708819358328..000000000000
--- a/addons/notes/src/shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export const ADDON_ID = 'storybookjs/notes';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const PARAM_KEY = `notes`;
-
-interface TextParameter {
-  text: string;
-}
-interface MarkdownParameter {
-  markdown: string;
-}
-interface DisabledParameter {
-  disable: boolean;
-}
-type TabsParameter = Record<string, string>;
-
-export type Parameters =
-  | string
-  | TextParameter
-  | MarkdownParameter
-  | DisabledParameter
-  | TabsParameter;
diff --git a/addons/notes/src/typings.d.ts b/addons/notes/src/typings.d.ts
deleted file mode 100644
index 7d209326fbef..000000000000
--- a/addons/notes/src/typings.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// There are no types for markdown-to-jsx
-declare module 'markdown-to-jsx' {
-  const Markdown: any;
-  export default Markdown;
-}
-
-declare module 'global';
diff --git a/addons/notes/tsconfig.json b/addons/notes/tsconfig.json
deleted file mode 100644
index 8876bb6737a1..000000000000
--- a/addons/notes/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
-}
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index e0a151381438..87199e4c9eb8 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -5,7 +5,6 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-knobs',
     '@storybook/addon-options',
     '@storybook/addon-jest',
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index c0dd5701099d..2e5d40d18460 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -45,7 +45,6 @@
     "@storybook/addon-jest": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index 35fb1e998f62..000000000000
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon/Notes Note with HTML 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-button-component
-    _nghost-a-c19=""
-  >
-    <button
-      _ngcontent-a-c19=""
-    >
-      Notes with HTML
-    </button>
-  </storybook-button-component>
-</storybook-dynamic-app-root>
-`;
-
-exports[`Storyshots Addon/Notes Simple note 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-button-component
-    _nghost-a-c18=""
-  >
-    <button
-      _ngcontent-a-c18=""
-    >
-      Notes on some Button
-    </button>
-  </storybook-button-component>
-</storybook-dynamic-app-root>
-`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
index ebb28412d380..baa509cf0f47 100644
--- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
@@ -7,10 +7,10 @@ exports[`Storyshots Core/Parameters passed to story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c20=""
+    _nghost-a-c18=""
   >
     <button
-      _ngcontent-a-c20=""
+      _ngcontent-a-c18=""
     >
       Parameters are {"docs":{"iframeHeight":"60px"},"options":{},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter","__id":"core-parameters--passed-to-story"}
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
index f9628db33bf5..7aaa2e151141 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
@@ -8,11 +8,11 @@ exports[`Storyshots Custom/Style Default 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c21=""
+      _nghost-a-c19=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c21=""
+        _ngcontent-a-c19=""
       >
         Button with custom styles
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Custom/Style With Knobs 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c22=""
+      _nghost-a-c20=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c22=""
+        _ngcontent-a-c20=""
       >
         Button with custom styles
       </button>
diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts
deleted file mode 100644
index 87f7bb7d69c9..000000000000
--- a/examples/angular-cli/src/stories/addon-notes.stories.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Button } from '@storybook/angular/demo';
-
-export default {
-  title: 'Addon/Notes',
-};
-
-export const SimpleNote = () => ({
-  component: Button,
-  props: {
-    text: 'Notes on some Button',
-    onClick: () => {},
-  },
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some button' },
-};
-
-export const NoteWithHtml = () => ({
-  component: Button,
-  props: {
-    text: 'Notes with HTML',
-    onClick: () => {},
-  },
-});
-
-NoteWithHtml.story = {
-  name: 'Note with HTML',
-  parameters: {
-    notes: `
-    <h2>My notes on emojis</h2>
-
-    <em>It's not all that important to be honest, but..</em>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
index bb93d416ef2f..e4a7ae06b432 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
@@ -1,10 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { CustomCvaComponent } from './custom-cva.component';
 
-const description = `
-  This is an example of component that implements ControlValueAccessor interface
-`;
-
 export default {
   title: 'Custom/ngModel',
 };
@@ -19,5 +15,4 @@ export const CustomControlValueAccessor = () => ({
 
 CustomControlValueAccessor.story = {
   name: 'custom ControlValueAccessor',
-  parameters: { notes: description },
 };
diff --git a/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts b/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts
index 91039deff0f6..10438400c401 100644
--- a/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts
+++ b/examples/angular-cli/src/stories/module-context/module-context-forRoot.stories.ts
@@ -13,33 +13,26 @@ storiesOf('Custom/Feature Module as Context with forRoot', module)
       imports: [ChipsModule.forRoot()],
     })
   )
-  .add(
-    'Component with self and dependencies declared in its feature module',
-    () => {
-      const props: { [K in keyof ChipsGroupComponent]?: any } = {
-        chips: object('Chips', [
-          {
-            id: 1,
-            text: 'Chip 1',
-          },
-          {
-            id: 2,
-            text: 'Chip 2',
-          },
-        ]),
-        removeChipClick: action('Remove chip'),
-        removeAllChipsClick: action('Remove all chips clicked'),
-      };
-      return {
-        component: ChipsGroupComponent,
-        props,
-      };
-    },
-    {
-      notes: `This component includes a child component, a pipe, and a default provider, all which come from
-        the specified feature module.`,
-    }
-  )
+  .add('Component with self and dependencies declared in its feature module', () => {
+    const props: { [K in keyof ChipsGroupComponent]?: any } = {
+      chips: object('Chips', [
+        {
+          id: 1,
+          text: 'Chip 1',
+        },
+        {
+          id: 2,
+          text: 'Chip 2',
+        },
+      ]),
+      removeChipClick: action('Remove chip'),
+      removeAllChipsClick: action('Remove all chips clicked'),
+    };
+    return {
+      component: ChipsGroupComponent,
+      props,
+    };
+  })
   .add('Component with default providers', () => {
     const props: { [K in keyof ChipComponent]?: any } = {
       displayText: text('Display Text', 'My Chip'),
diff --git a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
index bc7d043ffef1..ab226b47795a 100644
--- a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
+++ b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Core/OnPush Class-specified component with OnPush and Knobs
   target={[Function ViewContainerRef_]}
 >
   <storybook-on-push-box
-    _nghost-a-c23=""
+    _nghost-a-c21=""
     style="background-color: rgb(255, 240, 0);"
   >
      Word of the day: OnPush 
diff --git a/examples/angular-cli/src/stories/on-push/on-push.stories.ts b/examples/angular-cli/src/stories/on-push/on-push.stories.ts
index 0246c5e87a36..543a6187e630 100644
--- a/examples/angular-cli/src/stories/on-push/on-push.stories.ts
+++ b/examples/angular-cli/src/stories/on-push/on-push.stories.ts
@@ -16,9 +16,4 @@ export const ClassSpecifiedComponentWithOnPushAndKnobs = () => ({
 
 ClassSpecifiedComponentWithOnPushAndKnobs.story = {
   name: 'Class-specified component with OnPush and Knobs',
-  parameters: {
-    notes: `
-      This component is specified by class and uses OnPush change detection. It has two properties, one being a HostBinding. Both should be updatable using knobs.
-    `.trim(),
-  },
 };
diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js
index 3cb41fc807f7..cded0ccb8265 100644
--- a/examples/cra-kitchen-sink/.storybook/main.js
+++ b/examples/cra-kitchen-sink/.storybook/main.js
@@ -10,7 +10,6 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-events',
-    '@storybook/addon-notes',
     '@storybook/addon-options',
     '@storybook/addon-knobs',
     '@storybook/addon-backgrounds',
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 34045f78ea37..96b5cd1dcba1 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -24,11 +24,9 @@
     "@storybook/addon-centered": "6.0.0-alpha.2",
     "@storybook/addon-docs": "6.0.0-alpha.2",
     "@storybook/addon-events": "6.0.0-alpha.2",
-    "@storybook/addon-info": "6.0.0-alpha.2",
     "@storybook/addon-jest": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addons": "6.0.0-alpha.2",
diff --git a/examples/cra-kitchen-sink/src/stories/button.stories.js b/examples/cra-kitchen-sink/src/stories/button.stories.js
index 4a6563d040f4..d4045dc185b2 100644
--- a/examples/cra-kitchen-sink/src/stories/button.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/button.stories.js
@@ -1,28 +1,7 @@
-/* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
 
-import Container from '../components/Container';
-
-const InfoButton = () => (
-  <span
-    style={{
-      fontFamily: 'sans-serif',
-      fontSize: 12,
-      textDecoration: 'none',
-      background: '#027ac5',
-      color: '#fff',
-      padding: '5px 15px',
-      margin: 10,
-      borderRadius: '0px 0px 0px 5px',
-    }}
-  >
-    &nbsp;Show Info&nbsp;
-  </span>
-);
-
 export default {
   title: 'Button',
   component: Button,
@@ -49,32 +28,3 @@ Story2.story = {
     options: { selectedPanel: 'storybook/actions/panel' },
   },
 };
-
-export const Story3 = () => <Button>Check my notes in the notes panel</Button>;
-Story3.story = {
-  name: 'with notes',
-  parameters: {
-    notes: 'A very simple button',
-    options: { selectedPanel: 'storybook/notes/panel' },
-  },
-};
-
-export const Story4 = context => (
-  <Container>
-    <span>
-      click the <InfoButton /> label in top right for info about "{context.name}"
-    </span>
-  </Container>
-);
-Story4.story = {
-  name: 'with new info',
-  parameters: {
-    notes: 'Composition: Info(Notes())',
-    options: { selectedPanel: 'storybook/info/panel' },
-  },
-  decorators: [
-    withInfo(
-      'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
-    ),
-  ],
-};
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 754ec97f4790..94e55238304f 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -36,7 +36,6 @@
   "devDependencies": {
     "@storybook/addon-a11y": "6.0.0-alpha.2",
     "@storybook/addon-actions": "6.0.0-alpha.2",
-    "@storybook/addon-info": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
diff --git a/examples/ember-cli/.storybook/main.js b/examples/ember-cli/.storybook/main.js
index f57119476336..989dc9ee719b 100644
--- a/examples/ember-cli/.storybook/main.js
+++ b/examples/ember-cli/.storybook/main.js
@@ -7,7 +7,6 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-docs',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-knobs',
     '@storybook/addon-viewport',
     '@storybook/addon-options',
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 19db23a55661..8cd7a57a410d 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -23,7 +23,6 @@
     "@storybook/addon-docs": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
     "@storybook/addon-viewport": "6.0.0-alpha.2",
diff --git a/examples/ember-cli/stories/addon-notes.stories.js b/examples/ember-cli/stories/addon-notes.stories.js
deleted file mode 100644
index c413870dad1d..000000000000
--- a/examples/ember-cli/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Addon/Notes',
-};
-
-export const SimpleNote = () => ({
-  template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some bold text' },
-};
-
-export const NoteWithHtml = () => ({
-  template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
-});
-
-NoteWithHtml.story = {
-  name: 'Note with HTML',
-
-  parameters: {
-    notes: `
-    <h2>My notes on emojies</h2>
-
-    <em>It's not all that important to be honest, but..</em>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.js
index 66ab602a73cd..042b87f86daf 100644
--- a/examples/html-kitchen-sink/.storybook/main.js
+++ b/examples/html-kitchen-sink/.storybook/main.js
@@ -10,7 +10,6 @@ module.exports = {
     '@storybook/addon-jest',
     '@storybook/addon-knobs',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-options',
     '@storybook/addon-storysource',
     '@storybook/addon-viewport',
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index cd316a0248a1..0c8391b6c76c 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -22,7 +22,6 @@
     "@storybook/addon-jest": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index 229ca7197d45..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Notes Simple note 1`] = `
-<p>
-  
-      
-  <strong>
-    
-        This is a fragment of HTML
-      
-  </strong>
-  
-    
-</p>
-`;
diff --git a/examples/html-kitchen-sink/stories/addon-notes.stories.js b/examples/html-kitchen-sink/stories/addon-notes.stories.js
deleted file mode 100644
index 9129457c82d5..000000000000
--- a/examples/html-kitchen-sink/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
-  title: 'Addons/Notes',
-};
-
-export const Story1 = () =>
-  `<p>
-      <strong>
-        This is a fragment of HTML
-      </strong>
-    </p>`;
-Story1.story = {
-  name: 'Simple note',
-  parameters: {
-    notes: 'My notes on some bold text',
-  },
-};
diff --git a/examples/mithril-kitchen-sink/.storybook/main.js b/examples/mithril-kitchen-sink/.storybook/main.js
index 3a53130947d7..0a070fa00ad2 100644
--- a/examples/mithril-kitchen-sink/.storybook/main.js
+++ b/examples/mithril-kitchen-sink/.storybook/main.js
@@ -6,7 +6,6 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-knobs',
     '@storybook/addon-viewport',
     '@storybook/addon-options',
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 4a875364c661..841dae795db9 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -16,7 +16,6 @@
     "@storybook/addon-centered": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
deleted file mode 100644
index 26a9b8a401db..000000000000
--- a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/** @jsx m */
-
-import m from 'mithril';
-
-export default {
-  title: 'Addons/Notes',
-};
-
-export const Story1 = () => ({
-  view: () => (
-    <p>
-      <strong>
-        Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
-        vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur
-        velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit
-        amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla
-        sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi
-        urna id urna.
-      </strong>
-    </p>
-  ),
-});
-
-Story1.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some bold text' },
-};
-
-export const Story2 = () => ({
-  view: () => (
-    <p>
-      <span>🤔😳😯😮</span>
-      <br />
-      <span>😄😩😓😱</span>
-      <br />
-      <span>🤓😑😶😊</span>
-    </p>
-  ),
-});
-
-Story2.story = {
-  name: 'Note with HTML',
-  parameters: {
-    notes: `
-    <h2>My notes on emojies</h2>
-
-    <em>It's not all that important to be honest, but..</em>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js
index cd5ac9d75050..0e2cf6ee5151 100644
--- a/examples/official-storybook/main.js
+++ b/examples/official-storybook/main.js
@@ -12,7 +12,6 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-events',
-    '@storybook/addon-notes',
     '@storybook/addon-options',
     '@storybook/addon-knobs',
     '@storybook/addon-cssresources',
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index e5b94f3be5f6..334c149947f1 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -24,11 +24,9 @@
     "@storybook/addon-docs": "6.0.0-alpha.2",
     "@storybook/addon-events": "6.0.0-alpha.2",
     "@storybook/addon-graphql": "6.0.0-alpha.2",
-    "@storybook/addon-info": "6.0.0-alpha.2",
     "@storybook/addon-jest": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-queryparams": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index c8ef59f5683d..074c294f18c0 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -3,7 +3,6 @@ import { addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 import { withCssResources } from '@storybook/addon-cssresources';
 import { withA11y } from '@storybook/addon-a11y';
-import { withNotes } from '@storybook/addon-notes';
 import { DocsPage } from '@storybook/addon-docs/blocks';
 
 import addHeadWarning from './head-warning';
@@ -27,7 +26,6 @@ addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');
 
 addDecorator(withCssResources);
 addDecorator(withA11y);
-addDecorator(withNotes);
 
 addDecorator(storyFn => (
   <ThemeProvider theme={convert(themes.light)}>
diff --git a/examples/official-storybook/stories/addon-info/EXAMPLE.md b/examples/official-storybook/stories/addon-info/EXAMPLE.md
deleted file mode 100644
index fc965844dda0..000000000000
--- a/examples/official-storybook/stories/addon-info/EXAMPLE.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# external
-## markdown 
-file
diff --git a/examples/official-storybook/stories/addon-info/decorators.stories.js b/examples/official-storybook/stories/addon-info/decorators.stories.js
deleted file mode 100644
index 780fb3a0b6db..000000000000
--- a/examples/official-storybook/stories/addon-info/decorators.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import BaseButton from '../../components/BaseButton';
-
-export default {
-  title: 'Addons/Info/Decorator',
-  decorators: [withInfo('Info can take options via the global or local decorator as well.')],
-};
-
-export const UseInfo = () => <BaseButton label="Button" />;
-UseInfo.story = { name: 'Use Info as story decorator' };
diff --git a/examples/official-storybook/stories/addon-info/forward-ref.stories.js b/examples/official-storybook/stories/addon-info/forward-ref.stories.js
deleted file mode 100644
index 1aa8da24c022..000000000000
--- a/examples/official-storybook/stories/addon-info/forward-ref.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import ForwardedRefButton from '../../components/ForwardedRefButton';
-import ForwardedRefButtonWDisplayName from '../../components/ForwardedRefButtonWDisplayName';
-
-export default {
-  title: 'Addons/Info/ForwardRef',
-  decorators: [withInfo],
-};
-
-export const DisplaysCorrectly = () => <ForwardedRefButton label="Forwarded Ref Button" />;
-DisplaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };
-
-export const DisplayName = () => (
-  <ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
-);
-DisplayName.story = { name: 'Uses forwardRef displayName if available' };
diff --git a/examples/official-storybook/stories/addon-info/github-issues.js b/examples/official-storybook/stories/addon-info/github-issues.js
deleted file mode 100644
index 3b96ca11eded..000000000000
--- a/examples/official-storybook/stories/addon-info/github-issues.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-
-const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
-
-const Input = hoc(() => <input type="text" />);
-
-const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
-
-export default {
-  title: 'Addons/Info/GitHub issues',
-  decorators: [withInfo],
-};
-
-export const issue1814 = () => (
-  <div>
-    <Input />
-    <TextArea />
-  </div>
-);
-
-issue1814.story = {
-  name: '#1814',
-  parameters: {
-    info: 'Allow Duplicate DisplayNames for HOC #1814',
-  },
-};
diff --git a/examples/official-storybook/stories/addon-info/jsx.stories.js b/examples/official-storybook/stories/addon-info/jsx.stories.js
deleted file mode 100644
index 7db0a4ee09b5..000000000000
--- a/examples/official-storybook/stories/addon-info/jsx.stories.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-import BaseButton from '../../components/BaseButton';
-
-const JSXDescription = (
-  <div>
-    <h2>This is a JSX info section</h2>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
-      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
-      libero nulla.
-    </p>
-    <p>
-      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
-    </p>
-    <p>
-      <img alt="350x150" src="http://placehold.it/350x150" />
-    </p>
-  </div>
-);
-
-export default {
-  title: 'Addons/Info/JSX',
-  decorators: [withInfo],
-};
-
-export const DisplaysJsxInDescription = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-
-DisplaysJsxInDescription.story = {
-  name: 'Displays JSX in description',
-
-  parameters: {
-    info: { text: JSXDescription },
-  },
-};
diff --git a/examples/official-storybook/stories/addon-info/markdown.stories.js b/examples/official-storybook/stories/addon-info/markdown.stories.js
deleted file mode 100644
index 38038e50703f..000000000000
--- a/examples/official-storybook/stories/addon-info/markdown.stories.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-
-import BaseButton from '../../components/BaseButton';
-import externalMdDocs from './EXAMPLE.md';
-
-export default {
-  title: 'Addons/Info/Markdown',
-  decorators: [withInfo],
-  excludeStories: ['markdownDescription'],
-};
-
-export const markdownDescription = `
-#### You can use markdown in your withInfo description.
-
-Sometimes you might want to manually include some \`code\` examples:
-
-~~~js
-const Button = () => <button />;
-~~~
-
-classes in javascript
-
-~~~javascript
-export class FromComponent {
-  form = new FormControl({
-    searchTerm: new FromControl(''),
-    searchDate: new FromControl(''),
-    endDate: new FromControl(''),
-  })
-}
-~~~
-
-html with special formatting
-
-~~~html
-<foo-outer property-a="value"
-           property-b="value"
-           property-c="value">
-  <foo-inner property-a="value"
-             property-b="value" />
-</foo-outer>
-~~~
-
-
-Maybe include a [link](http://storybook.js.org) to your project as well.
-`;
-
-export const DisplaysMarkdownInDescription = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-
-DisplaysMarkdownInDescription.story = {
-  name: 'Displays Markdown in description',
-  parameters: { info: markdownDescription },
-};
-
-export const FromInternalMarkdownFile = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-
-FromInternalMarkdownFile.story = {
-  name: 'From internal Markdown file',
-
-  parameters: {
-    info: `
-    # internal
-    ## markdown
-    file
-  `,
-  },
-};
-
-export const FromExternalMarkdownFile = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-
-FromExternalMarkdownFile.story = {
-  name: 'From external Markdown file',
-  parameters: { info: externalMdDocs },
-};
diff --git a/examples/official-storybook/stories/addon-info/options.stories.js b/examples/official-storybook/stories/addon-info/options.stories.js
deleted file mode 100644
index f75e3b825607..000000000000
--- a/examples/official-storybook/stories/addon-info/options.stories.js
+++ /dev/null
@@ -1,198 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-
-import FlowTypeButton from '../../components/FlowTypeButton';
-import BaseButton from '../../components/BaseButton';
-import TableComponent from '../../components/TableComponent';
-import { markdownDescription } from './markdown.stories';
-
-export default {
-  title: 'Addons/Info/Options',
-  decorators: [withInfo],
-};
-
-export const InlinesComponentInsideStory = () => <BaseButton label="Button" />;
-InlinesComponentInsideStory.story = {
-  name: 'Inlines component inside story',
-  parameters: {
-    info: {
-      text: 'Component should be inlined between description and PropType table',
-      inline: true, // Displays info inline vs click button to view
-    },
-  },
-};
-
-export const ExcludesPropTypesThatAreInTheExcludedPropTypesArray = () => (
-  <BaseButton label="Button" />
-);
-ExcludesPropTypesThatAreInTheExcludedPropTypesArray.story = {
-  name: 'Excludes propTypes that are in the excludedPropTypes array',
-  parameters: {
-    info: {
-      text: 'Label propType should be excluded',
-      excludedPropTypes: ['label'],
-    },
-  },
-};
-
-export const ShowsOrHidesInfoAddonHeader = () => <BaseButton label="Button" />;
-ShowsOrHidesInfoAddonHeader.story = {
-  name: 'Shows or hides Info Addon header',
-  parameters: {
-    info: {
-      text: 'The Info Addon header should be hidden',
-      header: false, // Toggles display of header with component name and description
-    },
-  },
-};
-
-export const ShowsOrHidesInfoAddonSource = () => <BaseButton label="Button" />;
-ShowsOrHidesInfoAddonSource.story = {
-  name: 'Shows or hides Info Addon source',
-  parameters: {
-    info: {
-      text: 'The Info Addon source section should be hidden',
-      source: false, // Displays the source of story Component
-    },
-  },
-};
-
-export const ShowsAdditionalComponentPropTables = () => <BaseButton label="Button" />;
-ShowsAdditionalComponentPropTables.story = {
-  name: 'Shows additional component prop tables',
-  parameters: {
-    info: {
-      text: 'There should be a prop table added for a component not included in the story',
-      propTables: [FlowTypeButton],
-    },
-  },
-};
-
-export const ExcludeComponentFromPropTables = () => (
-  <div>
-    <BaseButton label="Button" />
-    <FlowTypeButton label="Flow Typed Button" />
-  </div>
-);
-ExcludeComponentFromPropTables.story = {
-  name: 'Exclude component from prop tables',
-  parameters: {
-    info: {
-      text: 'This can exclude extraneous components from being displayed in prop tables.',
-      propTablesExclude: [FlowTypeButton],
-    },
-  },
-};
-
-export const ExtendInfoStylesWithAnObject = () => <BaseButton label="Button" />;
-ExtendInfoStylesWithAnObject.story = {
-  name: 'Extend info styles with an object',
-  parameters: {
-    info: {
-      styles: {
-        button: {
-          base: {
-            background: 'purple',
-          },
-        },
-        header: {
-          h1: {
-            color: 'green',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const FullControlOverStylesUsingAFunction = () => <BaseButton label="Button" />;
-FullControlOverStylesUsingAFunction.story = {
-  name: 'Full control over styles using a function',
-  parameters: {
-    info: {
-      styles: stylesheet => ({
-        ...stylesheet,
-        header: {
-          ...stylesheet.header,
-          h1: {
-            ...stylesheet.header.h1,
-            color: 'red',
-          },
-        },
-      }),
-    },
-  },
-};
-
-export const UseACustomComponentForTheTable = () => <BaseButton label="Button" />;
-UseACustomComponentForTheTable.story = {
-  name: 'Use a custom component for the table',
-  component: TableComponent,
-  parameters: {
-    info: {
-      TableComponent,
-    },
-  },
-};
-
-export const UseInfoAsStoryDecorator = () => <BaseButton label="Button" />;
-
-UseInfoAsStoryDecorator.story = {
-  name: 'Use Info as story decorator',
-  decorators: [withInfo('Info can take options via the global or local decorator as well.')],
-};
-
-export const UsingParametersAcrossAllStories = () => <BaseButton label="Button" />;
-UsingParametersAcrossAllStories.story = {
-  name: 'Using parameters across all stories',
-};
-
-export const OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
-  <BaseButton label="Button" />
-);
-OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
-  name: 'Overwriting and extending the parameters and options set stories-wise',
-  parameters: {
-    info: {
-      text: 'Label propType should be excluded',
-      excludedPropTypes: ['label'],
-    },
-  },
-};
-
-export const OverwriteTheParametersWithMarkdownVariable = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-
-OverwriteTheParametersWithMarkdownVariable.story = {
-  name: 'Overwrite the parameters with markdown variable',
-  parameters: { info: markdownDescription },
-};
-
-export const OverwriteTheTextParameterWithMarkdownInline = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-
-OverwriteTheTextParameterWithMarkdownInline.story = {
-  name: 'Overwrite the text parameter with markdown inline',
-  parameters: {
-    info: {
-      text: `
-      description or documentation about my component, supports markdown
-
-      ~~~js
-      <Button>Click Here</Button>
-      ~~~
-    `,
-    },
-  },
-};
-
-export const DisableTheAddonEntirely = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-DisableTheAddonEntirely.story = {
-  name: 'Disable the addon entirely',
-  parameters: { info: { disable: true } },
-};
diff --git a/examples/official-storybook/stories/addon-info/parameters.stories.js b/examples/official-storybook/stories/addon-info/parameters.stories.js
deleted file mode 100644
index 9e36b966b5f7..000000000000
--- a/examples/official-storybook/stories/addon-info/parameters.stories.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-
-import BaseButton from '../../components/BaseButton';
-import { markdownDescription } from './markdown.stories';
-
-export default {
-  title: 'Addons/Info/Parameters',
-  decorators: [
-    withInfo({
-      styles: {
-        header: {
-          h1: {
-            color: 'green',
-          },
-        },
-      },
-    }),
-  ],
-  parameters: {
-    info: {
-      text:
-        'This text should be displayed on every story and the component should be inlined between description and PropType table',
-      inline: true, // Displays info inline vs click button to view
-    },
-  },
-};
-
-export const UsingParametersAcrossAllStories = () => <BaseButton label="Button" />;
-UsingParametersAcrossAllStories.story = {
-  name: 'Using parameters across all stories',
-};
-
-export const OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
-  <BaseButton label="Button" />
-);
-OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
-  name: 'Overwriting and extending the parameters and options set stories-wise',
-  parameters: {
-    info: {
-      text: 'Label propType should be excluded',
-      excludedPropTypes: ['label'],
-    },
-  },
-};
-
-export const OverwriteTheParametersWithMarkdownVariable = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-OverwriteTheParametersWithMarkdownVariable.story = {
-  name: 'Overwrite the parameters with markdown variable',
-  parameters: { info: markdownDescription },
-};
-
-export const OverwriteTheTextParameterWithMarkdownInline = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-OverwriteTheTextParameterWithMarkdownInline.story = {
-  name: 'Overwrite the text parameter with markdown inline',
-  parameters: {
-    info: {
-      text: `
-      description or documentation about my component, supports markdown
-
-      ~~~js
-      <Button>Click Here</Button>
-      ~~~
-    `,
-    },
-  },
-};
-
-export const DisableTheAddonEntirely = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-DisableTheAddonEntirely.story = {
-  name: 'Disable the addon entirely',
-  parameters: { info: { disable: true } },
-};
diff --git a/examples/official-storybook/stories/addon-info/react-docgen.stories.js b/examples/official-storybook/stories/addon-info/react-docgen.stories.js
deleted file mode 100644
index deef915f0478..000000000000
--- a/examples/official-storybook/stories/addon-info/react-docgen.stories.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-
-import { DocgenButton } from '../../components/DocgenButton';
-import FlowTypeButton from '../../components/FlowTypeButton';
-import BaseButton from '../../components/BaseButton';
-import { NamedExportButton } from '../../components/NamedExportButton';
-
-export default {
-  title: 'Addons/Info/React Docgen',
-  component: DocgenButton,
-  decorators: [withInfo],
-};
-
-export const CommentsFromPropTypeDeclarations = () => (
-  <DocgenButton
-    onClick={action('clicked')}
-    label="Docgen Button"
-    disabled={false}
-    one={{ key: 1 }}
-    shape={{
-      id: 3,
-      arr: [],
-      shape: {
-        shape: {
-          foo: 'bar',
-        },
-      },
-      func: () => {},
-    }}
-    arrayOf={[1, 2, 3]}
-  />
-);
-
-CommentsFromPropTypeDeclarations.story = {
-  name: 'Comments from PropType declarations',
-
-  parameters: {
-    info:
-      'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
-  },
-};
-
-export const CommentsFromFlowDeclarations = () => (
-  <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
-);
-
-CommentsFromFlowDeclarations.story = {
-  name: 'Comments from Flow declarations',
-
-  parameters: {
-    info:
-      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
-  },
-};
-
-export const CommentsFromComponentDeclaration = () => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-);
-
-CommentsFromComponentDeclaration.story = {
-  name: 'Comments from component declaration',
-
-  parameters: {
-    info:
-      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
-  },
-};
-
-export const CommentsFromNamedExportComponentDeclaration = () => (
-  <NamedExportButton onClick={action('clicked')} label="Button" />
-);
-
-CommentsFromNamedExportComponentDeclaration.story = {
-  name: 'Comments from named export component declaration',
-
-  parameters: {
-    info:
-      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
-  },
-};
-
-const markdownDescription = `
-#### You can use markdown in your withInfo description.
-
-Sometimes you might want to manually include some \`code\` examples:
-
-~~~js
-const Button = () => <button />;
-~~~
-
-classes in javascript
-
-~~~javascript
-export class FromComponent {
-  form = new FormControl({
-    searchTerm: new FromControl(''),
-    searchDate: new FromControl(''),
-    endDate: new FromControl(''),
-  })
-}
-~~~
-
-html with special formatting
-
-~~~html
-<foo-outer property-a="value"
-           property-b="value"
-           property-c="value">
-  <foo-inner property-a="value"
-             property-b="value" />
-</foo-outer>
-~~~
-
-
-Maybe include a [link](http://storybook.js.org) to your project as well.
-`;
diff --git a/examples/official-storybook/stories/addon-info/story-source.stories.js b/examples/official-storybook/stories/addon-info/story-source.stories.js
deleted file mode 100644
index b3ab034e9ecb..000000000000
--- a/examples/official-storybook/stories/addon-info/story-source.stories.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-
-import BaseButton from '../../components/BaseButton';
-import TableComponent from '../../components/TableComponent';
-
-export default {
-  title: 'Addons/Info/Story Source',
-  decorators: [withInfo],
-};
-
-export const OneProp = () => <BaseButton label="Button" />;
-OneProp.story = { name: 'One prop' };
-
-export const ManyProps = () => <BaseButton label="Button" onClick={action('clicked')} disabled />;
-ManyProps.story = { name: 'Many props' };
-
-export const Children = () => (
-  <div>
-    <p>Here is my nice button:</p>
-    <BaseButton label="Button" onClick={action('clicked')} />
-  </div>
-);
-Children.story = { name: 'Children' };
-
-export const ArrayProp = () => {
-  const propDefs = [
-    {
-      property: 'label',
-      propType: { name: 'string' },
-      required: true,
-      description: 'Text to display inside button',
-    },
-    {
-      property: 'disabled',
-      propType: { name: 'boolean' },
-      required: false,
-      defaultValue: false,
-    },
-    {
-      property: 'onClick',
-      propType: { name: 'function' },
-      description: 'Callback for when button is clicked',
-      required: true,
-      defaultValue: () => {},
-    },
-    {
-      property: 'style',
-      propType: { name: 'object' },
-      description: 'Styles to apply to button',
-      required: false,
-      defaultValue: {},
-    },
-  ];
-  return <TableComponent propDefinitions={propDefs} />;
-};
-ArrayProp.story = { name: 'Array prop' };
-
-export const ObjectProp = () => (
-  <BaseButton
-    label="Button"
-    style={{
-      color: 'midnightblue',
-      backgroundColor: 'powderblue',
-      fontSize: '16px',
-      boxShadow: '1px 1px rgba(0, 0, 0, .07)',
-      borderRadius: 5,
-      padding: '4px 8px',
-    }}
-  />
-);
-ObjectProp.story = { name: 'Object prop' };
diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js
index 00c6c19bf082..df76d23bc9ab 100644
--- a/examples/official-storybook/stories/core/errors.stories.js
+++ b/examples/official-storybook/stories/core/errors.stories.js
@@ -27,7 +27,6 @@ export const badComponent = () => (
 badComponent.story = {
   name: 'story errors - invariant error',
   parameters: {
-    notes: 'Story does not return something react can render',
     storyshots: { disable: true },
     chromatic: { disable: true },
   },
@@ -37,7 +36,6 @@ export const BadStory = () => badOutput;
 BadStory.story = {
   name: 'story errors - story un-renderable type',
   parameters: {
-    notes: 'Story does not return something react can render',
     storyshots: { disable: true },
     chromatic: { disable: true },
   },
diff --git a/examples/official-storybook/stories/deprecated/addon-info.stories.js b/examples/official-storybook/stories/deprecated/addon-info.stories.js
deleted file mode 100644
index f63fadce4b12..000000000000
--- a/examples/official-storybook/stories/deprecated/addon-info.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-import BaseButton from '../../components/BaseButton';
-
-import { markdownDescription } from '../addon-info/markdown.stories';
-
-export default {
-  title: 'Addons/Info/deprecated',
-};
-
-export const DisplaysMarkdown = withInfo(markdownDescription)(() => (
-  <BaseButton onClick={action('clicked')} label="Button" />
-));
-
-DisplaysMarkdown.story = { name: 'Displays Markdown in description' };
diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.js
index 6f83f3c3e6ce..d0974d637901 100644
--- a/examples/preact-kitchen-sink/.storybook/main.js
+++ b/examples/preact-kitchen-sink/.storybook/main.js
@@ -6,7 +6,6 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-knobs',
     '@storybook/addon-viewport',
     '@storybook/addon-options',
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 6885705668ea..b66a3037a7af 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -22,7 +22,6 @@
     "@storybook/addon-contexts": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index c2244acf527d..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Notes Note with HTML 1`] = `
-<p>
-  <span>
-    🤔😳😯😮
-  </span>
-  <br />
-  <span>
-    😄😩😓😱
-  </span>
-  <br />
-  <span>
-    🤓😑😶😊
-  </span>
-</p>
-`;
-
-exports[`Storyshots Addons/Notes Simple note 1`] = `
-<p>
-  <strong>
-    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-  </strong>
-</p>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
deleted file mode 100644
index 9f5b05b996b6..000000000000
--- a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
-import { withNotes } from '@storybook/addon-notes';
-
-export default {
-  title: 'Addons/Notes',
-  decorators: [withNotes],
-};
-
-export const SimpleNote = () => (
-  <p>
-    <strong>
-      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
-      vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur
-      velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit
-      amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla
-      sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna
-      id urna.
-    </strong>
-  </p>
-);
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some bold text' },
-};
-
-export const NoteWithHtml = () => (
-  <p>
-    <span>🤔😳😯😮</span>
-    <br />
-    <span>😄😩😓😱</span>
-    <br />
-    <span>🤓😑😶😊</span>
-  </p>
-);
-
-NoteWithHtml.story = {
-  name: 'Note with HTML',
-
-  parameters: {
-    notes: `
-    <h2>My notes on emojies</h2>
-
-    <em>It's not all that important to be honest, but..</em>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/rax-kitchen-sink/.storybook/main.js b/examples/rax-kitchen-sink/.storybook/main.js
index 08801da7c620..95b6c60c5a0c 100644
--- a/examples/rax-kitchen-sink/.storybook/main.js
+++ b/examples/rax-kitchen-sink/.storybook/main.js
@@ -7,7 +7,6 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-events',
-    '@storybook/addon-notes',
     '@storybook/addon-options',
     '@storybook/addon-knobs',
     '@storybook/addon-backgrounds',
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index 62ffc8e895f3..04aa4c3ab06a 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -25,11 +25,9 @@
     "@storybook/addon-backgrounds": "6.0.0-alpha.2",
     "@storybook/addon-centered": "6.0.0-alpha.2",
     "@storybook/addon-events": "6.0.0-alpha.2",
-    "@storybook/addon-info": "6.0.0-alpha.2",
     "@storybook/addon-jest": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
index 49b953eff4f1..30f8003dd711 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
@@ -2,7 +2,6 @@ import { createElement } from 'rax';
 import { withA11Y } from '@storybook/addon-a11y';
 import Text from 'rax-text';
 import View from 'rax-view';
-import markdown from './note.md';
 
 export default {
   title: 'Addon/addon-a11y',
@@ -11,17 +10,10 @@ export default {
 
 export const Basic = () => <Text>RAX TEXT NODE</Text>;
 
-Basic.story = {
-  parameters: { notes: 'super awesome note' },
-};
-
 export const WithStyle = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
 
 WithStyle.story = {
   name: 'with style',
-  parameters: {
-    notes: ' this is a note with emojis 🚀🚀🚀🚀🚀',
-  },
 };
 
 export const WithMarkdown = () => (
@@ -37,9 +29,4 @@ export const WithMarkdown = () => (
 
 WithMarkdown.story = {
   name: 'with markdown',
-  parameters: {
-    notes: {
-      markdown,
-    },
-  },
 };
diff --git a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
deleted file mode 100644
index dfdbf8b90f62..000000000000
--- a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { createElement } from 'rax';
-import { withNotes } from '@storybook/addon-notes';
-import Text from 'rax-text';
-import markdown from './note.md';
-
-export default {
-  title: 'Addon/addon-notes',
-  decorators: [withNotes],
-};
-
-export const Basic = () => <Text>RAX TEXT NODE</Text>;
-
-Basic.story = {
-  parameters: { notes: 'super awesome note' },
-};
-
-export const WithEmojies = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
-
-WithEmojies.story = {
-  name: 'with emojies',
-  parameters: {
-    notes: ' this is a note with emojies 🚀🚀🚀🚀🚀',
-  },
-};
-
-export const WithMarkdown = () => <Text>😀 😎 👍 💯</Text>;
-
-WithMarkdown.story = {
-  name: 'with markdown',
-  parameters: {
-    notes: {
-      markdown,
-    },
-  },
-};
diff --git a/examples/rax-kitchen-sink/src/stories/note.md b/examples/rax-kitchen-sink/src/stories/note.md
deleted file mode 100644
index 3b17035bc753..000000000000
--- a/examples/rax-kitchen-sink/src/stories/note.md
+++ /dev/null
@@ -1,11 +0,0 @@
- #markdown note
-
-Hello **Rax**
-
-- works with notes
-- works with knobs
-- ...
-
-```js
-const hi = require('greeting');
-```
diff --git a/examples/riot-kitchen-sink/.storybook/main.js b/examples/riot-kitchen-sink/.storybook/main.js
index 20617194dd99..77685d79e14d 100644
--- a/examples/riot-kitchen-sink/.storybook/main.js
+++ b/examples/riot-kitchen-sink/.storybook/main.js
@@ -6,7 +6,6 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-knobs',
     '@storybook/addon-viewport',
     '@storybook/addon-options',
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index 4c459dc64a09..652617da7725 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -21,7 +21,6 @@
     "@storybook/addon-centered": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index 399887ec1487..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon/Notes Note with HTML 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    <p>
-      🤔😳😯😮
-      <br />
-      😄😩😓😱
-      <br />
-      🤓😑😶😊
-    </p>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon/Notes Simple note 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <p>
-    <strong>
-      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-    </strong>
-  </p>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
deleted file mode 100644
index cd8f2ad23633..000000000000
--- a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  title: 'Addon/Notes',
-};
-
-export const SimpleNote = () => ({
-  tags: [
-    '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-  ],
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some bold text' },
-};
-
-export const NoteWithHtml = () => ({
-  tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
-});
-
-NoteWithHtml.story = {
-  name: 'Note with HTML',
-  parameters: {
-    notes: `
-    <h2>My notes on emojies</h2>
-
-    <em>It's not all that important to be honest, but..</em>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/riot-kitchen-sink/src/stories/story-code.stories.js b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
index 7a06796e7cd9..20ef03a408ce 100644
--- a/examples/riot-kitchen-sink/src/stories/story-code.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
@@ -36,10 +36,6 @@ export const BuiltFromTagsAndTemplate = () => ({
 
 BuiltFromTagsAndTemplate.story = {
   name: 'built from tags and template',
-  parameters: {
-    notes:
-      'WARN : the tag file root element must have exactly the same name (or else you will see nothing)',
-  },
 };
 
 export const TagsTemplateAndTagConstructorAtOnce = () => ({
@@ -65,9 +61,6 @@ export const BuiltFromThePrecompilation = () => mount('anothertest', {});
 
 BuiltFromThePrecompilation.story = {
   name: 'built from the precompilation',
-  parameters: {
-    notes: 'WARN, only works in lower case, never upper case with precompiled templates',
-  },
 };
 
 export const TheMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
diff --git a/examples/svelte-kitchen-sink/.storybook/main.js b/examples/svelte-kitchen-sink/.storybook/main.js
index 05e4ce3f0c53..2f3f49da9ad8 100644
--- a/examples/svelte-kitchen-sink/.storybook/main.js
+++ b/examples/svelte-kitchen-sink/.storybook/main.js
@@ -6,7 +6,6 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-knobs',
     '@storybook/addon-backgrounds',
     '@storybook/addon-viewport',
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index ecba85cb0649..ebc063e15dc1 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -16,7 +16,6 @@
     "@storybook/addon-centered": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index c0e7c6be1f23..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon/Notes Note with HTML 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    🤔😳😯😮😄😩😓😱🤓😑😶😊
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Addon/Notes Simple note 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
deleted file mode 100644
index 220ac04ad61e..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import ButtonView from './views/ButtonView.svelte';
-
-export default {
-  title: 'Addon/Notes',
-};
-
-export const SimpleNote = () => ({
-  Component: ButtonView,
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' },
-};
-
-export const NoteWithHtml = () => ({
-  Component: ButtonView,
-  props: {
-    text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
-  },
-});
-
-NoteWithHtml.story = {
-  name: 'Note with HTML',
-  parameters: {
-    notes: `
-    <h2>My notes on emojies</h2>
-
-    <em>It's not all that important to be honest, but..</em>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/vue-kitchen-sink/.storybook/main.js b/examples/vue-kitchen-sink/.storybook/main.js
index 1b0c3c5a231c..b4ef787c935b 100644
--- a/examples/vue-kitchen-sink/.storybook/main.js
+++ b/examples/vue-kitchen-sink/.storybook/main.js
@@ -5,7 +5,6 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-notes',
     '@storybook/addon-knobs',
     '@storybook/addon-viewport',
     '@storybook/addon-options',
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 25510c1e0966..9dde17dc0c9f 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -22,7 +22,6 @@
     "@storybook/addon-docs": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index b32786b702de..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon/Notes Note with HTML 1`] = `
-<p>
-  🤔😳😯😮
-  <br />
-  😄😩😓😱
-  <br />
-  🤓😑😶😊
-</p>
-`;
-
-exports[`Storyshots Addon/Notes Simple note 1`] = `
-<p>
-  <strong>
-    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-  </strong>
-</p>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
deleted file mode 100644
index 809d459a88ca..000000000000
--- a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  title: 'Addon/Notes',
-};
-
-export const SimpleNote = () => ({
-  template:
-    '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-});
-
-SimpleNote.story = {
-  name: 'Simple note',
-  parameters: { notes: 'My notes on some bold text' },
-};
-
-export const NoteWithHtml = () => ({
-  template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
-});
-
-NoteWithHtml.story = {
-  name: 'Note with HTML',
-
-  parameters: {
-    notes: `
-    <h2>My notes on emojies</h2>
-
-    <em>It's not all that important to be honest, but..</em>
-
-    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-  `,
-  },
-};
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index a7f4a7016cfa..a048b0f08b8f 100644
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@@ -21,7 +21,6 @@
     "@storybook/addon-jest": "6.0.0-alpha.2",
     "@storybook/addon-knobs": "6.0.0-alpha.2",
     "@storybook/addon-links": "6.0.0-alpha.2",
-    "@storybook/addon-notes": "6.0.0-alpha.2",
     "@storybook/addon-options": "6.0.0-alpha.2",
     "@storybook/addon-storyshots": "6.0.0-alpha.2",
     "@storybook/addon-storysource": "6.0.0-alpha.2",
diff --git a/yarn.lock b/yarn.lock
index c0e7ea0a07a1..835eaa986551 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3308,6 +3308,46 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@storybook/addon-info@6.0.0-alpha.2":
+  version "6.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-info/-/addon-info-6.0.0-alpha.2.tgz#2ee4e45f0692996afeeaa199ded5d6f3c3176383"
+  integrity sha512-isr+LdrXVnJ2GODvrgyHN1pZF1lwDbSgCkLn9o04qe5SK9mP+3yyXjLinnF4KEfpc3WmQIffz3soZcqJ2osugw==
+  dependencies:
+    "@storybook/addons" "6.0.0-alpha.2"
+    "@storybook/client-logger" "6.0.0-alpha.2"
+    "@storybook/components" "6.0.0-alpha.2"
+    "@storybook/theming" "6.0.0-alpha.2"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    marksy "^8.0.0"
+    nested-object-assign "^1.0.3"
+    prop-types "^15.7.2"
+    react "^16.8.3"
+    react-addons-create-fragment "^15.6.2"
+    react-element-to-jsx-string "^14.0.2"
+    react-is "^16.8.3"
+    react-lifecycles-compat "^3.0.4"
+    util-deprecate "^1.0.2"
+
+"@storybook/addon-notes@6.0.0-alpha.2":
+  version "6.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-notes/-/addon-notes-6.0.0-alpha.2.tgz#c836b1b9a7374f2c830a12030ba69250924c51a2"
+  integrity sha512-hg98JqgavnARbp8WA77zb5p5YNmMB+Xi+qsc3QxqEiWHdqqtnOJpU9eqs/eJPOHL2Tny49jipDmo7nVFNmOETA==
+  dependencies:
+    "@storybook/addons" "6.0.0-alpha.2"
+    "@storybook/api" "6.0.0-alpha.2"
+    "@storybook/client-logger" "6.0.0-alpha.2"
+    "@storybook/components" "6.0.0-alpha.2"
+    "@storybook/core-events" "6.0.0-alpha.2"
+    "@storybook/router" "6.0.0-alpha.2"
+    "@storybook/theming" "6.0.0-alpha.2"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    markdown-to-jsx "^6.10.3"
+    memoizerific "^1.11.3"
+    prop-types "^15.7.2"
+    util-deprecate "^1.0.2"
+
 "@storybook/addons@6.0.0-alpha.0":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.0.0-alpha.0.tgz#f4416a8c9c081961e5950a7962d7a5102138717e"