From 45088187a7321e8d6b8f127c278a8e16d2ab7af2 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Thu, 13 Jul 2023 14:08:07 -0700
Subject: [PATCH] Docusaurus: Replant Playground (#1331)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1331

This lifts and copies code from the Yoga Playground component of the old website, to the new one, using a live workspace version of JS Yoga. This may eventually be used if the new website is fleshed out, but this also gives us real-world validation of the Yoga bindings in a web scenario, compared to the Node test runner. There is still some cleanup here needed, but we are able to bundle, typecheck, and render the playground now.

The code here is mostly the same as before, but I removed some of the cruftier bits (e.g. URL shortener that goes to some private Heroku instance), and needed to do some tweaks for the new Yoga package, and TypeScript.

This is currently using `yoga-layout/sync`, the asmjs bindings. But I had previously checked bundling against the wasm ones.

Reviewed By: cortinico

Differential Revision: D46884439

fbshipit-source-id: f53f0855c131cd2b81975bf05f71c43713600616
---
 website-next/package.json                     |   6 +-
 .../src/components/Playground/EditValue.tsx   |  44 +
 .../src/components/Playground/Editor.css      |  63 ++
 .../src/components/Playground/Editor.tsx      | 369 +++++++
 .../src/components/Playground/InfoText.css    |  22 +
 .../src/components/Playground/InfoText.tsx    |  38 +
 .../components/Playground/LayoutRecord.tsx    |  81 ++
 .../components/Playground/PositionGuide.css   |  16 +
 .../components/Playground/PositionGuide.tsx   | 161 +++
 .../components/Playground/PositionRecord.tsx  |  28 +
 .../src/components/Playground/Sidebar.css     |  22 +
 .../src/components/Playground/Sidebar.tsx     |  26 +
 .../components/Playground/YogaEnumSelect.css  |  25 +
 .../components/Playground/YogaEnumSelect.tsx  | 110 ++
 .../src/components/Playground/YogaNode.css    |  57 +
 .../src/components/Playground/YogaNode.tsx    | 302 ++++++
 .../Playground/YogaPositionEditor.css         |  30 +
 .../Playground/YogaPositionEditor.tsx         |  72 ++
 .../src/components/Playground/index.css       |  74 ++
 .../src/components/Playground/index.tsx       | 300 ++++++
 website-next/src/pages/index.tsx              |   7 +
 yarn.lock                                     | 984 +++++++++++++++++-
 22 files changed, 2826 insertions(+), 11 deletions(-)
 create mode 100644 website-next/src/components/Playground/EditValue.tsx
 create mode 100644 website-next/src/components/Playground/Editor.css
 create mode 100644 website-next/src/components/Playground/Editor.tsx
 create mode 100644 website-next/src/components/Playground/InfoText.css
 create mode 100644 website-next/src/components/Playground/InfoText.tsx
 create mode 100644 website-next/src/components/Playground/LayoutRecord.tsx
 create mode 100644 website-next/src/components/Playground/PositionGuide.css
 create mode 100644 website-next/src/components/Playground/PositionGuide.tsx
 create mode 100644 website-next/src/components/Playground/PositionRecord.tsx
 create mode 100644 website-next/src/components/Playground/Sidebar.css
 create mode 100644 website-next/src/components/Playground/Sidebar.tsx
 create mode 100644 website-next/src/components/Playground/YogaEnumSelect.css
 create mode 100644 website-next/src/components/Playground/YogaEnumSelect.tsx
 create mode 100644 website-next/src/components/Playground/YogaNode.css
 create mode 100644 website-next/src/components/Playground/YogaNode.tsx
 create mode 100644 website-next/src/components/Playground/YogaPositionEditor.css
 create mode 100644 website-next/src/components/Playground/YogaPositionEditor.tsx
 create mode 100644 website-next/src/components/Playground/index.css
 create mode 100644 website-next/src/components/Playground/index.tsx

diff --git a/website-next/package.json b/website-next/package.json
index 78e748b7..71d85d8c 100644
--- a/website-next/package.json
+++ b/website-next/package.json
@@ -18,10 +18,14 @@
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@mdx-js/react": "^1.6.22",
+    "antd": "^3.6.5",
     "clsx": "^1.2.1",
+    "immutable": "^4.0.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-syntax-highlighter": "^8.0.0",
+    "yoga-layout": "^2.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.1",
diff --git a/website-next/src/components/Playground/EditValue.tsx b/website-next/src/components/Playground/EditValue.tsx
new file mode 100644
index 00000000..037a57dd
--- /dev/null
+++ b/website-next/src/components/Playground/EditValue.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React  from 'react';
+import YogaEnumSelect from './YogaEnumSelect';
+import YogaPositionEditor from './YogaPositionEditor';
+import {Input} from 'antd';
+
+type Props<T> = {
+  property: string,
+  disabled?: boolean,
+  value?: T,
+  onChange: (property: string, value: T) => void,
+  placeholder?: string,
+};
+
+export default (props: Props<any>) => {
+  if (YogaEnumSelect.availableProperties.indexOf(props.property) > -1) {
+    // @ts-ignore
+    return <YogaEnumSelect {...props} />;
+  } else if (
+    YogaPositionEditor.availableProperties.indexOf(props.property) > -1
+  ) {
+    // @ts-ignore
+    return <YogaPositionEditor {...props} />;
+  } else {
+    return (
+      <Input
+        type="text"
+        {...props}
+        onChange={e => props.onChange(props.property, e.target.value)}
+        placeholder={props.placeholder || 'undefined'}
+        onFocus={e => e.target.select()}
+        value={Number.isNaN(props.value) ? '' : props.value}
+      />
+    );
+  }
+};
diff --git a/website-next/src/components/Playground/Editor.css b/website-next/src/components/Playground/Editor.css
new file mode 100644
index 00000000..b9fa310b
--- /dev/null
+++ b/website-next/src/components/Playground/Editor.css
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .Editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-top: 1px solid #E8E8E8;
+}
+
+.Editor .field {
+  display: flex;
+}
+
+.Editor .ant-btn {
+  width: 100%;
+}
+
+.Editor h2 {
+  margin-bottom: 8px;
+  margin-top: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #444950;
+  text-transform: uppercase;
+}
+
+.Editor h2:first-child {
+  margin-top: 0;
+}
+
+.Editor .ant-tabs-nav .ant-tabs-tab {
+  margin-left: 16px;
+}
+
+.Editor .EditorTabs {
+  flex-grow: 1;
+}
+
+.Editor .ant-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.Editor .ant-tabs-bar {
+  margin-bottom: 0;
+}
+
+.Editor .ant-tabs-tabpane {
+  overflow-y: auto;
+  min-height: 320px;
+  height: 100%;
+  max-height: 25vh;
+  padding: 15px;
+}
+
+.Editor .EditorButtons {
+  padding: 15px;
+}
diff --git a/website-next/src/components/Playground/Editor.tsx b/website-next/src/components/Playground/Editor.tsx
new file mode 100644
index 00000000..7aac369b
--- /dev/null
+++ b/website-next/src/components/Playground/Editor.tsx
@@ -0,0 +1,369 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import {Row, Col, Button, Tabs} from 'antd';
+import EditValue from './EditValue';
+import type {LayoutRecordType} from './LayoutRecord';
+import type {Direction} from 'yoga-layout/sync';
+import InfoText from './InfoText';
+import './Editor.css';
+const TabPane = Tabs.TabPane;
+
+type Props = {
+  node: LayoutRecordType,
+  onChangeLayout: (key: string, value: any) => void,
+  onChangeSetting: (key: string, value: any) => void,
+  direction: Direction,
+  selectedNodeIsRoot: boolean,
+  onRemove?: () => void,
+  onAdd?: () => void,
+};
+
+export default class Editor extends Component<Props> {
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+
+  onKeyDown = (e: KeyboardEvent) => {
+    if (
+      (e.key === 'Delete' || e.key === 'Backspace') &&
+      this.props.onRemove &&
+      !(e.target instanceof HTMLInputElement)
+    ) {
+      this.props.onRemove();
+    }
+  };
+
+  render() {
+    const {node, selectedNodeIsRoot} = this.props;
+    const disabled = !Boolean(node);
+
+    return (
+      <div className="Editor">
+        {/* @ts-ignore */}
+        <Tabs defaultActiveKey="1" className="EditorTabs">
+          {/* @ts-ignore */}
+          <TabPane tab="Flex" key="1">
+            <h2>
+              Direction
+              <InfoText doclink="/docs/layout-direction">
+                Defines the direction of which text and items are laid out
+              </InfoText>
+            </h2>
+            <EditValue
+              property="direction"
+              value={this.props.direction}
+              onChange={this.props.onChangeSetting}
+            />
+            <h2>
+              Flex Direction
+              <InfoText doclink="/docs/flex-direction">
+                Defines the direction of the main-axis
+              </InfoText>
+            </h2>
+            <EditValue
+              disabled={disabled}
+              property="flexDirection"
+              value={node ? node.flexDirection : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+
+            <Row gutter={15} style={{marginTop: 30}}>
+              <Col span={8}>
+                <h2>
+                  Basis
+                  <InfoText doclink="/docs/flex">
+                    Default size of a node along the main axis
+                  </InfoText>
+                </h2>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  property="flexBasis"
+                  placeholder="auto"
+                  disabled={disabled || selectedNodeIsRoot}
+                  value={node ? node.flexBasis : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+              <Col span={8}>
+                <h2>
+                  Grow
+                  <InfoText doclink="/docs/flex">
+                    The factor of remaining space should be given to this node
+                  </InfoText>
+                </h2>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  property="flexGrow"
+                  placeholder="0"
+                  disabled={disabled || selectedNodeIsRoot}
+                  value={node ? node.flexGrow : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+              <Col span={8}>
+                <h2>
+                  Shrink
+                  <InfoText doclink="/docs/flex">
+                    The shrink factor of this element if parent has no space
+                    left
+                  </InfoText>
+                </h2>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  property="flexShrink"
+                  placeholder="1"
+                  disabled={disabled || selectedNodeIsRoot}
+                  value={node ? node.flexShrink : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+            </Row>
+
+            <h2>
+              Flex Wrap
+              <InfoText doclink="/docs/flex-wrap">
+                Wrapping behaviour when child nodes don't fit into a single line
+              </InfoText>
+            </h2>
+            <EditValue
+              disabled={disabled}
+              property="flexWrap"
+              value={node ? node.flexWrap : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+          </TabPane>
+          {/* @ts-ignore */}
+          <TabPane tab="Alignment" key="2">
+            <h2>
+              Justify Content
+              <InfoText doclink="/docs/justify-content">
+                Aligns child nodes along the main-axis
+              </InfoText>
+            </h2>
+            <EditValue
+              disabled={disabled}
+              property="justifyContent"
+              value={node ? node.justifyContent : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+
+            <h2>
+              Align Items
+              <InfoText doclink="/docs/align-items">
+                Aligns child nodes along the cross-axis
+              </InfoText>
+            </h2>
+            <EditValue
+              disabled={disabled}
+              property="alignItems"
+              value={node ? node.alignItems : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+
+            <h2>
+              Align Self
+              <InfoText doclink="/docs/align-items">
+                Override align items of parent
+              </InfoText>
+            </h2>
+            <EditValue
+              disabled={disabled || selectedNodeIsRoot}
+              property="alignSelf"
+              value={node ? node.alignSelf : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+
+            <h2>
+              Align Content
+              <InfoText doclink="/docs/align-content">
+                Alignment of lines along the cross-axis when wrapping
+              </InfoText>
+            </h2>
+            <EditValue
+              disabled={disabled}
+              property="alignContent"
+              value={node ? node.alignContent : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+          </TabPane>
+          {/* @ts-ignore */}
+          <TabPane tab="Layout" key="3" className="ant-tabs-tabpane">
+            <h2>
+              Width &times; Height
+              <InfoText doclink="/docs/width-height">
+                Dimensions of the node
+              </InfoText>
+            </h2>
+            <Row gutter={15}>
+              <Col span={12}>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  placeholder="auto"
+                  property="width"
+                  disabled={disabled}
+                  value={node ? node.width : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+              <Col span={12}>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  placeholder="auto"
+                  property="height"
+                  disabled={disabled}
+                  value={node ? node.height : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+            </Row>
+            <h2>
+              Max-Width &times; Max-Height
+              <InfoText doclink="/docs/min-max">
+                Maximum dimensions of the node
+              </InfoText>
+            </h2>
+            <Row gutter={15}>
+              <Col span={12}>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  placeholder="none"
+                  property="maxWidth"
+                  disabled={disabled}
+                  value={node ? node.maxWidth : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+              <Col span={12}>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  placeholder="none"
+                  property="maxHeight"
+                  disabled={disabled}
+                  value={node ? node.maxHeight : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+            </Row>
+            <h2>
+              Min-Width &times; Min-Height
+              <InfoText doclink="/docs/min-max">
+                Minimum dimensions of the node
+              </InfoText>
+            </h2>
+            <Row gutter={15}>
+              <Col span={12}>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  placeholder="0"
+                  property="minWidth"
+                  disabled={disabled}
+                  value={node ? node.minWidth : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+              <Col span={12}>
+                <EditValue
+                  // @ts-ignore
+                  type="text"
+                  placeholder="0"
+                  property="minHeight"
+                  disabled={disabled}
+                  value={node ? node.minHeight : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+            </Row>
+
+            <h2>
+              Aspect Ratio
+              <InfoText doclink="/docs/aspect-ratio">
+                Width/Height aspect ratio of node
+              </InfoText>
+            </h2>
+            <EditValue
+              // @ts-ignore
+              type="text"
+              placeholder="auto"
+              property="aspectRatio"
+              disabled={disabled}
+              value={node ? node.aspectRatio : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+
+            {['padding', 'border', 'margin'].map(property => (
+              <EditValue
+                property={property}
+                key={property}
+                value={node ? node[property] : undefined}
+                onChange={this.props.onChangeLayout}
+                disabled={property === 'margin' && selectedNodeIsRoot}
+              />
+            ))}
+            <h2>
+              Position Type
+              <InfoText doclink="/docs/absolute-relative-layout">
+                Relative position offsets the node from it's calculated
+                position. Absolute position removes the node from the flexbox
+                flow and positions it at the given position.
+              </InfoText>
+            </h2>
+
+            <EditValue
+              disabled={disabled || selectedNodeIsRoot}
+              property="positionType"
+              value={node ? node.positionType : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+            <EditValue
+              disabled={selectedNodeIsRoot}
+              property="position"
+              value={node ? node.position : undefined}
+              onChange={this.props.onChangeLayout}
+            />
+          </TabPane>
+        </Tabs>
+
+        <Row gutter={15} className="EditorButtons">
+          <Col span={12}>
+            <Button
+              icon="plus-circle-o"
+              disabled={!Boolean(this.props.onAdd)}
+              onClick={this.props.onAdd}
+              type="primary">
+              add child node
+            </Button>
+          </Col>
+          <Col span={12}>
+            <Button
+              icon="close-circle-o"
+              disabled={!Boolean(this.props.onRemove)}
+              onClick={this.props.onRemove}
+              type="danger">
+              remove node
+            </Button>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
diff --git a/website-next/src/components/Playground/InfoText.css b/website-next/src/components/Playground/InfoText.css
new file mode 100644
index 00000000..3193f265
--- /dev/null
+++ b/website-next/src/components/Playground/InfoText.css
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .InfoText {
+  max-width: 230px;
+  line-height: 130%;
+}
+
+.InfoText .docs-link {
+  margin-top: 0px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.InfoTextIcon {
+  margin-left: 5px;
+  opacity: 0.5;
+}
diff --git a/website-next/src/components/Playground/InfoText.tsx b/website-next/src/components/Playground/InfoText.tsx
new file mode 100644
index 00000000..6b792eef
--- /dev/null
+++ b/website-next/src/components/Playground/InfoText.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import {Popover, Icon} from 'antd';
+import Link from '@docusaurus/Link';
+import './InfoText.css';
+
+type Props = {
+  children: any,
+  doclink: string,
+};
+
+export default class InfoText extends Component<Props> {
+  render() {
+    return (
+      <Popover
+        content={
+          <div className="InfoText">
+            <p>{this.props.children}</p>
+            <Link className="docs-link" to={this.props.doclink}>
+              DOCUMENTATION
+            </Link>
+          </div>
+        }
+        trigger="hover">
+        {/*@ts-ignore*/}
+        <Icon className="InfoTextIcon" type="info-circle-o" />
+      </Popover>
+    );
+  }
+}
diff --git a/website-next/src/components/Playground/LayoutRecord.tsx b/website-next/src/components/Playground/LayoutRecord.tsx
new file mode 100644
index 00000000..8da3d19c
--- /dev/null
+++ b/website-next/src/components/Playground/LayoutRecord.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+
+import {Record, List} from 'immutable';
+import PositionRecord from './PositionRecord';
+import type {PositionRecordType} from './PositionRecord';
+import yoga from 'yoga-layout/sync';
+
+import type {
+  Align,
+  Justify,
+  FlexDirection,
+  Wrap,
+  PositionType,
+} from 'yoga-layout/sync';
+
+export type LayoutRecordType = ReturnType<LayoutRecordFactory>;
+
+export type LayoutRecordFactory = Record.Factory<{
+  width?: number | 'auto',
+  height?: number | 'auto',
+  minWidth?: number,
+  minHeight?: number,
+  maxWidth?: number,
+  maxHeight?: number,
+  justifyContent?: Justify,
+  padding: PositionRecordType,
+  border: PositionRecordType,
+  margin: PositionRecordType,
+  position: PositionRecordType,
+  positionType: PositionType,
+  alignItems?: Align,
+  alignSelf?: Align,
+  alignContent?: Align,
+  flexDirection?: FlexDirection,
+  flexBasis?: number | 'auto',
+  flexGrow?: number,
+  flexShrink?: number,
+  flexWrap?: Wrap,
+  aspectRatio?: number | 'auto',
+  children?: List<LayoutRecordType>,
+}>;
+
+const r: LayoutRecordFactory = Record({
+  width: 'auto',
+  height: 'auto',
+  justifyContent: yoga.JUSTIFY_FLEX_START,
+  alignItems: yoga.ALIGN_STRETCH,
+  alignSelf: yoga.ALIGN_AUTO,
+  alignContent: yoga.ALIGN_STRETCH,
+  flexDirection: yoga.FLEX_DIRECTION_ROW,
+  padding: PositionRecord(),
+  margin: PositionRecord(),
+  border: PositionRecord(),
+  position: PositionRecord({
+    left: NaN,
+    top: NaN,
+    right: NaN,
+    bottom: NaN,
+  }),
+  positionType: yoga.POSITION_TYPE_RELATIVE,
+  flexWrap: yoga.WRAP_NO_WRAP,
+  flexBasis: 'auto',
+  flexGrow: 0,
+  flexShrink: 1,
+  children: List(),
+  aspectRatio: 'auto',
+  minWidth: NaN,
+  maxWidth: NaN,
+  minHeight: NaN,
+  maxHeight: NaN,
+});
+
+export default r;
diff --git a/website-next/src/components/Playground/PositionGuide.css b/website-next/src/components/Playground/PositionGuide.css
new file mode 100644
index 00000000..fcb11eac
--- /dev/null
+++ b/website-next/src/components/Playground/PositionGuide.css
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .PositionGuide {
+  position: absolute;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  user-select: none;
+}
diff --git a/website-next/src/components/Playground/PositionGuide.tsx b/website-next/src/components/Playground/PositionGuide.tsx
new file mode 100644
index 00000000..c86aba06
--- /dev/null
+++ b/website-next/src/components/Playground/PositionGuide.tsx
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import PositionRecord from './PositionRecord';
+import type {PositionRecordType} from './PositionRecord';
+import './PositionGuide.css';
+
+type Props = {
+  inset?: boolean,
+  reverse?: boolean,
+  position: PositionRecordType,
+  offset: PositionRecordType,
+  color: string,
+};
+
+export default class PositionGuide extends Component<Props> {
+  static defaultProps = {
+    offset: PositionRecord({}),
+  };
+
+  render() {
+    const {position, offset, inset, color, reverse} = this.props;
+    let {top, left, right, bottom} = position;
+    let {top: oTop, left: oLeft, right: oRight, bottom: oBottom} = offset;
+
+    if (
+      typeof top !== 'number' ||
+      typeof left !== 'number' ||
+      typeof right !== 'number' ||
+      typeof bottom !== 'number' ||
+      typeof oTop !== 'number' ||
+      typeof oLeft !== 'number' ||
+      typeof oRight !== 'number' ||
+      typeof oBottom !== 'number'
+    ) {
+      return null;
+    }
+
+
+    if (reverse) {
+      let temp1 = left;
+      left = right;
+      right = temp1;
+      temp1 = oLeft;
+      oLeft = oRight;
+      oRight = temp1;
+    }
+
+    if (!top) {
+      top = 0;
+    }
+    if (!left) {
+      left = 0;
+    }
+    if (!right) {
+      right = 0;
+    }
+    if (!bottom) {
+      bottom = 0;
+    }
+    if (!oTop) {
+      oTop = 0;
+    }
+    if (!oLeft) {
+      oLeft = 0;
+    }
+    if (!oRight) {
+      oRight = 0;
+    }
+    if (!oBottom) {
+      oBottom = 0;
+    }
+
+    if (!inset) {
+      if (typeof top === 'number' && typeof bottom === 'number') {
+        if (top < 0) {
+          bottom -= top;
+          top = 0;
+        }
+        if (bottom < 0) {
+          top -= bottom;
+          bottom = 0;
+        }
+      }
+      if (left < 0) {
+        right -= left;
+        left = 0;
+      }
+      if (right < 0) {
+        left -= right;
+        right = 0;
+      }
+    }
+
+    return [
+      top !== 0 ? (
+        <div
+          key="top"
+          className="PositionGuide"
+          style={{
+            backgroundColor: color,
+            height: top,
+            top: inset ? oTop : -top - oTop,
+            left: inset ? left + oLeft : -left - oLeft,
+            right: inset ? right + oRight : -right - oRight,
+          }}>
+          {top}
+        </div>
+      ) : null,
+      left !== 0 ? (
+        <div
+          key="left"
+          className="PositionGuide"
+          style={{
+            backgroundColor: color,
+            width: left,
+            top: inset ? oTop : -oTop,
+            bottom: inset ? oBottom : -oBottom,
+            left: inset ? oLeft : -left - oLeft,
+          }}>
+          {left}
+        </div>
+      ) : null,
+      right !== 0 ? (
+        <div
+          key="right"
+          className="PositionGuide"
+          style={{
+            backgroundColor: color,
+            width: right,
+            top: inset ? oTop : -oTop,
+            bottom: inset ? oBottom : -oBottom,
+            right: inset ? oRight : -right - oRight,
+          }}>
+          {right}
+        </div>
+      ) : null,
+      bottom !== 0 ? (
+        <div
+          key="bottom"
+          className="PositionGuide"
+          style={{
+            backgroundColor: color,
+            height: bottom,
+            bottom: inset ? oBottom : -bottom - oBottom,
+            left: inset ? left + oLeft : -left - oLeft,
+            right: inset ? right + oRight : -right - oRight,
+          }}>
+          {bottom}
+        </div>
+      ) : null,
+    ];
+  }
+}
diff --git a/website-next/src/components/Playground/PositionRecord.tsx b/website-next/src/components/Playground/PositionRecord.tsx
new file mode 100644
index 00000000..6e3398e5
--- /dev/null
+++ b/website-next/src/components/Playground/PositionRecord.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Record} from 'immutable';
+
+export type PositionRecordType = ReturnType<PositionRecordFactory>;
+
+export type PositionRecordFactory = Record.Factory<{
+  top: string | number,
+  right: string | number,
+  bottom: string | number,
+  left: string | number,
+}>;
+
+const r: PositionRecordFactory = Record({
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+});
+
+export default r;
diff --git a/website-next/src/components/Playground/Sidebar.css b/website-next/src/components/Playground/Sidebar.css
new file mode 100644
index 00000000..d086825a
--- /dev/null
+++ b/website-next/src/components/Playground/Sidebar.css
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .Sidebar {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: 0;
+  width: 350px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  margin: 25px;
+  max-height: calc(100% - 50px);
+  border-radius: 6px;
+  bottom: auto;
+  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.15);
+}
diff --git a/website-next/src/components/Playground/Sidebar.tsx b/website-next/src/components/Playground/Sidebar.tsx
new file mode 100644
index 00000000..3d2c3a4a
--- /dev/null
+++ b/website-next/src/components/Playground/Sidebar.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import './Sidebar.css';
+
+type Props = {
+  width?: number,
+  children: any,
+};
+
+export default class Sidebar extends Component<Props> {
+  render() {
+    return (
+      <div className="Sidebar" style={{width: this.props.width}}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
diff --git a/website-next/src/components/Playground/YogaEnumSelect.css b/website-next/src/components/Playground/YogaEnumSelect.css
new file mode 100644
index 00000000..3e68d12a
--- /dev/null
+++ b/website-next/src/components/Playground/YogaEnumSelect.css
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .YogaEnumSelect {
+  display: flex;
+}
+
+.YogaEnumSelect.ant-radio-group .ant-radio-button-wrapper {
+  flex-grow: 1;
+  flex-basis: 0;
+  text-align: center;
+}
+
+.YogaEnumSelect .ant-btn {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.YogaEnumSelect .ant-radio-button-wrapper {
+  white-space: nowrap;
+}
diff --git a/website-next/src/components/Playground/YogaEnumSelect.tsx b/website-next/src/components/Playground/YogaEnumSelect.tsx
new file mode 100644
index 00000000..68ed6046
--- /dev/null
+++ b/website-next/src/components/Playground/YogaEnumSelect.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import Yoga from 'yoga-layout/sync';
+import {Radio, Menu, Dropdown, Button, Icon} from 'antd';
+import './YogaEnumSelect.css';
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+
+const PROPERTY_LOOKUP = {
+  flexDirection: 'FLEX_DIRECTION',
+  direction: 'DIRECTION',
+  justifyContent: 'JUSTIFY',
+  alignSelf: 'ALIGN',
+  alignContent: 'ALIGN',
+  alignItems: 'ALIGN',
+  positionType: 'POSITION_TYPE',
+  flexWrap: 'WRAP',
+};
+
+type Property = keyof(typeof PROPERTY_LOOKUP);
+
+type Props = {
+  property: Property,
+  disabled?: boolean,
+  value: string | number,
+  onChange: (property: Property, value: number) => void,
+};
+
+export default class YogaEnumSelect extends Component<Props> {
+  static availableProperties = Object.keys(PROPERTY_LOOKUP);
+
+  values: Array<{key: string, value: number}>;
+
+  constructor(props: Props) {
+    super(props);
+
+    const property = PROPERTY_LOOKUP[props.property];
+
+    this.values = Object.keys(Yoga)
+      .map(key => ({key, value: Yoga[key]}))
+      .filter(
+        ({key}) => key.startsWith(property) && key !== `${property}_COUNT`,
+      );
+  }
+
+  handleMenuClick = ({key}: {key: string}) => {
+    this.props.onChange(this.props.property, Yoga[key]);
+  };
+
+  getTitle = (property: string, key: string): string => {
+    const replacer = new RegExp(`^${property}_`);
+    return key
+      .replace(replacer, '')
+      .replace('_', ' ')
+      .toLowerCase();
+  };
+
+  render() {
+    const property = PROPERTY_LOOKUP[this.props.property];
+    const selected = this.values.find(
+      ({key, value}) => value === this.props.value,
+    );
+
+    return this.values.length > 3 ? (
+      <div className="YogaEnumSelect">
+        {/*@ts-ignore*/}
+        <Dropdown
+          trigger={['click']}
+          disabled={this.props.disabled}
+          overlay={
+            // @ts-ignore
+            <Menu onClick={this.handleMenuClick}>
+              {this.values.map(({key, value}) => (
+                // @ts-ignore
+                <Menu.Item key={key} value={value}>
+                  {this.getTitle(property, key)}
+                </Menu.Item>
+              ))}
+            </Menu>
+          }>
+          <Button>
+            {selected ? this.getTitle(property, selected.key) : ''}
+            {/*@ts-ignore*/}
+            <Icon type="down" />
+          </Button>
+        </Dropdown>
+      </div>
+    ) : (
+      <RadioGroup
+        {...this.props}
+        onChange={e => this.props.onChange(this.props.property, e.target.value)}
+        defaultValue="a"
+        className="YogaEnumSelect">
+        {this.values.map(({key, value}) => (
+          <RadioButton key={key} value={value}>
+            {this.getTitle(property, key)}
+          </RadioButton>
+        ))}
+      </RadioGroup>
+    );
+  }
+}
diff --git a/website-next/src/components/Playground/YogaNode.css b/website-next/src/components/Playground/YogaNode.css
new file mode 100644
index 00000000..b22e2867
--- /dev/null
+++ b/website-next/src/components/Playground/YogaNode.css
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .YogaNode {
+  background: white;
+  position: absolute;
+  transform: scale(1);
+  box-shadow: inset 0 0 0px 1px rgba(48, 56, 69, 0.2);
+  transition: 0.2s all, 0s outline, 0s box-shadow;
+  cursor: pointer;
+}
+
+.YogaNode.hover {
+  background-color: #F0FFF9;
+}
+
+.YogaNode .YogaNode {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.YogaNode .YogaNode.hover{
+  background: rgba(240, 255, 249, 0.7);
+}
+
+.YogaNode:focus {
+  outline: 0;
+}
+
+.YogaNode.focused {
+  box-shadow: 0 0 0 2px #68CFBB, 0 0 15px rgba(0, 0, 0, 0.2),
+    inset 0 0 0px 1px rgba(255, 255, 255, 0.2);
+  z-index: 2;
+}
+
+.YogaNode.invisible {
+  transform: scale(0);
+}
+
+.YogaNode .label {
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 300;
+  letter-spacing: 1px;
+}
diff --git a/website-next/src/components/Playground/YogaNode.tsx b/website-next/src/components/Playground/YogaNode.tsx
new file mode 100644
index 00000000..c401b048
--- /dev/null
+++ b/website-next/src/components/Playground/YogaNode.tsx
@@ -0,0 +1,302 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import Yoga from 'yoga-layout/sync';
+import PositionGuide from './PositionGuide';
+import PositionRecord from './PositionRecord';
+import LayoutRecord from './LayoutRecord';
+import type {LayoutRecordType} from './LayoutRecord';
+import {Direction, Display, Edge, Node, Wrap} from 'yoga-layout/sync';
+
+import './YogaNode.css';
+
+type ComputedLayout = {
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  children: Array<ComputedLayout>,
+  node: Node,
+};
+
+type Props = {
+  layoutDefinition: LayoutRecordType,
+  className?: string,
+  computedLayout?: ComputedLayout,
+  path: Array<number>,
+  selectedNodePath?: Array<number>,
+  direction?: Direction,
+  label?: string,
+  showGuides: boolean,
+  onClick?: (path: Array<number>) => void,
+  onDoubleClick?: (path: Array<number>) => void,
+};
+
+type State = {
+  visible?: boolean,
+  hovered: boolean,
+};
+
+export default class YogaNode extends Component<Props, State> {
+  node: Node;
+  _ref: HTMLDivElement;
+
+  static defaultProps = {
+    path: [],
+    label: 'root',
+    showGuides: true,
+  };
+
+  state = {
+    hovered: false,
+    visible: false,
+  };
+  computedLayout?: ComputedLayout;
+  rootNode?: Node;
+
+  constructor(props: Props) {
+    super(props);
+    if (!props.computedLayout) {
+      // is root node
+      this.calculateLayout(props);
+      this.state = {
+        hovered: false,
+        visible: !Boolean(props.computedLayout),
+      };
+    }
+  }
+
+  componentDidMount() {
+    setTimeout(() => this.setState({visible: true}), 200);
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (
+      !nextProps.computedLayout &&
+      (!this.props.layoutDefinition.equals(nextProps.layoutDefinition) ||
+        this.props.direction !== nextProps.direction)
+    ) {
+      // is root node and the layout definition or settings changed
+      this.calculateLayout(nextProps);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.rootNode) {
+      this.rootNode.freeRecursive();
+    }
+  }
+
+  onMouseMove = e => {
+    this.setState({hovered: e.target === this._ref});
+  };
+
+  calculateLayout(props: Props) {
+    const root = this.createYogaNodes(props.layoutDefinition);
+    root.calculateLayout(
+      props.layoutDefinition.width,
+      props.layoutDefinition.height,
+      props.direction,
+    );
+    this.computedLayout = this.getComputedLayout(root);
+    this.rootNode = root;
+  }
+
+  createYogaNodes = (layoutDefinition: LayoutRecordType): Node => {
+    const root = Yoga.Node.create();
+
+    const defaultLayout = LayoutRecord({});
+    [
+      'width',
+      'height',
+      'minWidth',
+      'maxWidth',
+      'minHeight',
+      'maxHeight',
+      'justifyContent',
+      'alignItems',
+      'alignSelf',
+      'alignContent',
+      'flexGrow',
+      'flexShrink',
+      'positionType',
+      'aspectRatio',
+      'flexWrap',
+      'flexDirection',
+    ].forEach(key => {
+      try {
+        const value =
+          layoutDefinition[key] === ''
+            ? defaultLayout[key]
+            : layoutDefinition[key];
+        root[`set${key[0].toUpperCase()}${key.substr(1)}`](value);
+      } catch (e) {}
+    });
+
+    ['padding', 'margin', 'position', 'border'].forEach(key => {
+      ['top', 'right', 'bottom', 'left'].forEach(direction => {
+        try {
+          root[`set${key[0].toUpperCase()}${key.substr(1)}`](
+            Yoga[`EDGE_${direction.toUpperCase()}`],
+            layoutDefinition[key][direction],
+          );
+        } catch (e) {}
+      });
+    });
+
+    root.setDisplay(Display.Flex);
+
+    (layoutDefinition.children || [])
+      .map(this.createYogaNodes)
+      .forEach((node, i) => {
+        root.insertChild(node, i);
+      });
+    return root;
+  };
+
+  getComputedLayout = (node: Node): ComputedLayout => {
+    return {
+      ...node.getComputedLayout(),
+      node,
+      children: Array.apply(null, Array(node.getChildCount())).map((_, i) =>
+        this.getComputedLayout(node.getChild(i)),
+      ),
+    };
+  };
+
+  onClick = (e: React.MouseEvent) => {
+    const {onClick} = this.props;
+    if (onClick) {
+      e.stopPropagation();
+      onClick(this.props.path);
+    }
+  };
+
+  onDoubleClick = (e: React.MouseEvent) => {
+    const {onDoubleClick} = this.props;
+    if (onDoubleClick) {
+      e.stopPropagation();
+      onDoubleClick(this.props.path);
+    }
+  };
+
+  onMouseLeave = (e: React.MouseEvent) => this.setState({hovered: false});
+
+  showPositionGuides({node}: ComputedLayout) {
+    const padding = PositionRecord({
+      top: node.getComputedPadding(Edge.Top),
+      left: node.getComputedPadding(Edge.Left),
+      right: node.getComputedPadding(Edge.Right),
+      bottom: node.getComputedPadding(Edge.Bottom),
+    });
+    const border = PositionRecord({
+      top: node.getComputedBorder(Edge.Top),
+      left: node.getComputedBorder(Edge.Left),
+      right: node.getComputedBorder(Edge.Right),
+      bottom: node.getComputedBorder(Edge.Bottom),
+    });
+    const margin = PositionRecord({
+      top: node.getComputedMargin(Edge.Top),
+      left: node.getComputedMargin(Edge.Left),
+      right: node.getComputedMargin(Edge.Right),
+      bottom: node.getComputedMargin(Edge.Bottom),
+    });
+    const position = PositionRecord({
+      top: node.getPosition(Edge.Top).value,
+      left: node.getPosition(Edge.Left).value,
+      right: node.getPosition(Edge.Right).value,
+      bottom: node.getPosition(Edge.Bottom).value,
+    });
+
+    return [
+      <PositionGuide
+        key="border"
+        inset
+        position={border}
+        color="rgba(251, 170, 51, 0.15)"
+        reverse={node.getFlexWrap() === Wrap.WrapReverse}
+      />,
+      <PositionGuide
+        key="padding"
+        inset
+        offset={border}
+        position={padding}
+        color="rgba(123, 179, 41, 0.1)"
+        reverse={node.getFlexWrap() === Wrap.WrapReverse}
+      />,
+      <PositionGuide
+        key="margin"
+        position={margin}
+        color="rgba(214, 43, 28, 0.1)"
+      />,
+      <PositionGuide
+        key="position"
+        offset={margin}
+        position={position}
+        color="rgba(115, 51, 205, 0.1)"
+      />,
+    ];
+  }
+
+  render() {
+    const {
+      layoutDefinition,
+      className,
+      path,
+      selectedNodePath,
+      label,
+    } = this.props;
+
+    const computedLayout: ComputedLayout =
+      this.props.computedLayout || this.computedLayout;
+    const {left, top, width, height, children} = computedLayout;
+
+    const isFocused = selectedNodePath && selectedNodePath.length === 0;
+
+    return (
+      <div
+        className={`YogaNode ${isFocused ? 'focused' : ''} ${className || ''} ${
+          this.state.visible ? '' : 'invisible'
+        } ${this.state.hovered ? 'hover' : ''}`}
+        style={path.length == 0 ? {width, height} : {left, top, width, height}}
+        onDoubleClick={this.onDoubleClick}
+        onMouseMove={this.onMouseMove}
+        onMouseLeave={this.onMouseLeave}
+        ref={ref => {
+          this._ref = ref;
+        }}
+        onClick={this.onClick}>
+        {label && <div className="label">{label}</div>}
+        {isFocused &&
+          this.props.showGuides &&
+          this.showPositionGuides(computedLayout)}
+        {(children || []).map((child: ComputedLayout, i) => (
+          <YogaNode
+            key={i}
+            computedLayout={child}
+            label={String(i + 1)}
+            layoutDefinition={layoutDefinition.children.get(i)}
+            selectedNodePath={
+              selectedNodePath &&
+              selectedNodePath.length > 0 &&
+              selectedNodePath[0] === i
+                ? selectedNodePath.slice(1)
+                : null
+            }
+            path={path.concat(i)}
+            onClick={this.props.onClick}
+            onDoubleClick={this.props.onDoubleClick}
+            showGuides={this.props.showGuides}
+          />
+        ))}
+      </div>
+    );
+  }
+}
diff --git a/website-next/src/components/Playground/YogaPositionEditor.css b/website-next/src/components/Playground/YogaPositionEditor.css
new file mode 100644
index 00000000..0280e953
--- /dev/null
+++ b/website-next/src/components/Playground/YogaPositionEditor.css
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .YogaPositionEditor {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 60%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.YogaPositionEditor input {
+  width: 55px;
+  text-align: center;
+}
+
+.YogaPositionEditorRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  font-size: 12px;
+  font-weight: 700;
+  color: #444950;
+}
diff --git a/website-next/src/components/Playground/YogaPositionEditor.tsx b/website-next/src/components/Playground/YogaPositionEditor.tsx
new file mode 100644
index 00000000..76ac160a
--- /dev/null
+++ b/website-next/src/components/Playground/YogaPositionEditor.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import {Input} from 'antd';
+import PositionRecord from './PositionRecord';
+import type {PositionRecordType} from './PositionRecord';
+import './YogaPositionEditor.css';
+
+type Property = 'position' | 'margin' | 'padding' | 'border';
+
+type Props = {
+  value: PositionRecordType,
+  property: Property,
+  disabled?: boolean,
+  onChange: (property: Property, value: PositionRecordType) => void,
+};
+
+export default class YogaPositionEditor extends Component<Props> {
+  static availableProperties = ['position', 'margin', 'padding', 'border'];
+
+  static defaultProps = {
+    value: PositionRecord(),
+  };
+
+  render() {
+    const {onChange, value, property, disabled} = this.props;
+    return (
+      <div className="YogaPositionEditor">
+        <Input
+          type="text"
+          value={Number.isNaN(value.top) ? '' : value.top}
+          disabled={disabled}
+          onChange={e => onChange(property, value.set('top', e.target.value))}
+        />
+        <div className="YogaPositionEditorRow">
+          <Input
+            type="text"
+            value={Number.isNaN(value.left) ? '' : value.left}
+            disabled={disabled}
+            onChange={e =>
+              onChange(property, value.set('left', e.target.value))
+            }
+          />
+          {property.toUpperCase()}
+          <Input
+            type="text"
+            value={Number.isNaN(value.right) ? '' : value.right}
+            disabled={disabled}
+            onChange={e =>
+              onChange(property, value.set('right', e.target.value))
+            }
+          />
+        </div>
+        <Input
+          type="text"
+          value={Number.isNaN(value.bottom) ? '' : value.bottom}
+          disabled={disabled}
+          onChange={e =>
+            onChange(property, value.set('bottom', e.target.value))
+          }
+        />
+      </div>
+    );
+  }
+}
diff --git a/website-next/src/components/Playground/index.css b/website-next/src/components/Playground/index.css
new file mode 100644
index 00000000..d81174de
--- /dev/null
+++ b/website-next/src/components/Playground/index.css
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ .PlaygroundContainer {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.Playground {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
+    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
+    linear-gradient(-90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(
+      transparent 4px,
+      #f5f5f5 4px,
+      #f5f5f5 97px,
+      transparent 97px
+    ),
+    linear-gradient(-90deg, #e5e5e5 1px, transparent 1px),
+    linear-gradient(
+      -90deg,
+      transparent 4px,
+      #f5f5f5 4px,
+      #f5f5f5 97px,
+      transparent 97px
+    ),
+    linear-gradient(#e5e5e5 1px, transparent 1px), #f5f5f5;
+  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px, 100px 100px,
+    100px 100px, 100px 100px, 100px 100px;
+}
+
+.Playground > .YogaNode {
+  margin: auto;
+  position: static;
+  align-self: center;
+}
+
+.Playground.standalone > .YogaNode {
+  transform: translateX(-175px);
+}
+
+.Playground .Actions {
+  padding: 15px;
+}
+
+.Playground .Actions .ant-btn {
+  width: 100%;
+}
+
+.Playground .NoContent {
+  border-top: 1px solid #E8E8E8;
+  font-size: 18px;
+  padding: 30px 50px;
+  text-align: center;
+  color: #D9D9D9;
+  font-weight: 300;
+  line-height: 130%;
+}
+
+.ant-modal-content {
+  overflow: hidden;
+}
diff --git a/website-next/src/components/Playground/index.tsx b/website-next/src/components/Playground/index.tsx
new file mode 100644
index 00000000..c6bc9271
--- /dev/null
+++ b/website-next/src/components/Playground/index.tsx
@@ -0,0 +1,300 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import {Direction} from 'yoga-layout/sync';
+import YogaNode from './YogaNode';
+import Editor from './Editor';
+import {List, setIn} from 'immutable';
+import PositionRecord from './PositionRecord';
+import LayoutRecord from './LayoutRecord';
+import Sidebar from './Sidebar';
+import {Row, Col} from 'antd';
+import type {LayoutRecordType} from './LayoutRecord';
+import './index.css';
+
+type Props = {
+  layoutDefinition: Object,
+  direction: Direction,
+  maxDepth: number,
+  maxChildren?: number,
+  minChildren?: number,
+  selectedNodePath?: Array<number>,
+  showGuides: boolean,
+  className?: string,
+  height?: string | number,
+  persist?: boolean,
+  renderSidebar?: (layoutDefinition: LayoutRecordType, onChange: Function) => any,
+};
+
+type State = {
+  selectedNodePath?: Array<number>,
+  layoutDefinition: LayoutRecordType,
+  direction: Direction,
+};
+
+function getPath(path: Array<number>): Array<unknown> {
+  return path.reduce((acc, cv) => acc.concat('children', cv), []);
+}
+
+export default class Playground extends Component<Props, State> {
+  _containerRef?: HTMLElement;
+
+  static defaultProps = {
+    layoutDefinition: {
+      width: 500,
+      height: 500,
+      children: [
+        {width: 100, height: 100},
+        {width: 100, height: 100},
+        {width: 100, height: 100},
+      ],
+    },
+    direction: Direction.LTR,
+    maxDepth: 3,
+    showGuides: true,
+    persist: false,
+  };
+
+  rehydrate = (node: Object): LayoutRecordType => {
+    let record = LayoutRecord(node);
+    record = record.set('padding', PositionRecord(record.padding));
+    record = record.set('border', PositionRecord(record.border));
+    record = record.set('margin', PositionRecord(record.margin));
+    record = record.set('position', PositionRecord(record.position));
+    record = record.set('children', List(record.children.map(this.rehydrate)));
+    return record;
+  };
+
+  state = {
+    selectedNodePath: this.props.selectedNodePath,
+    layoutDefinition: this.rehydrate(this.props.layoutDefinition),
+    direction: this.props.direction,
+  };
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown);
+
+    // rehydrate
+    if (window.location.search && window.location.search.length > 1) {
+      try {
+        const restoredState = JSON.parse(
+          atob(window.location.search.substr(1)),
+        );
+        this.setState({layoutDefinition: this.rehydrate(restoredState)});
+      } catch (e) {
+        window.history.replaceState(
+          {},
+          null,
+          window.location.origin + window.location.pathname,
+        );
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+
+  onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this.hideSidePanes();
+    }
+  };
+
+  onMouseDown = (e: React.MouseEvent) => {
+    if (e.target === this._containerRef) {
+      this.hideSidePanes();
+    }
+  };
+
+  hideSidePanes() {
+    if (!Boolean(this.props.renderSidebar)) {
+      // only unselect if we don't have an external sidebar, otherwise the
+      // sidebar may rely on a certain node to be selected
+      this.setState({
+        selectedNodePath: null,
+      });
+    }
+  }
+
+  onChangeLayout = (key: string, value: any) => {
+    const {selectedNodePath} = this.state;
+    if (selectedNodePath) {
+      this.modifyAtPath([...getPath(selectedNodePath), key], value);
+    }
+  };
+
+  onRemove = () => {
+    const {selectedNodePath, layoutDefinition} = this.state;
+    if (selectedNodePath) {
+      const index = selectedNodePath.pop();
+      const path = getPath(selectedNodePath).concat('children');
+      // @ts-ignore
+      const updatedChildren = layoutDefinition.getIn(path).delete(index);
+      this.modifyAtPath(path, updatedChildren);
+      this.setState({selectedNodePath: null});
+    }
+  };
+
+  onAdd = () => {
+    const {selectedNodePath, layoutDefinition} = this.state;
+    if (selectedNodePath) {
+      const path = getPath(selectedNodePath).concat('children');
+      const updatedChildren = layoutDefinition
+        .getIn(path)
+        // @ts-ignore
+        .push(LayoutRecord({width: 100, height: 100}));
+      this.modifyAtPath(path, updatedChildren);
+    }
+  };
+
+  modifyAtPath(
+    path: Array<any>,
+    value: any,
+    selectedNodePath: Array<number> = this.state.selectedNodePath,
+  ) {
+    const layoutDefinition = setIn(this.state.layoutDefinition, path, value);
+    this.setState({
+      layoutDefinition,
+      selectedNodePath,
+    });
+
+    if (this.props.persist) {
+      window.history.replaceState(
+        {},
+        null,
+        window.location.origin +
+          window.location.pathname +
+          '?' +
+          this.getHash(layoutDefinition),
+      );
+    }
+  }
+
+  getHash = (
+    layoutDefinition: LayoutRecordType = this.state.layoutDefinition,
+  ): string =>
+    btoa(JSON.stringify(this.removeUnchangedProperties(layoutDefinition)));
+
+  removeUnchangedProperties = (node: LayoutRecordType): Object => {
+    const untouchedLayout = LayoutRecord({});
+    const untouchedPosition = PositionRecord({});
+    const result: {children?: unknown} = {};
+    if (!node.equals(untouchedLayout)) {
+      Object.keys(node.toJS()).forEach(key => {
+        if (key === 'children' && node.children.size > 0) {
+          result.children = node.children
+            .toJSON()
+            .map(this.removeUnchangedProperties);
+        } else if (
+          node[key] instanceof PositionRecord &&
+          !node[key].equals(untouchedPosition)
+        ) {
+          result[key] = {};
+          Object.keys(untouchedPosition.toJS()).forEach(position => {
+            if (node[key][position] !== untouchedPosition[position]) {
+              result[key][position] = node[key][position];
+            }
+          });
+        } else if (node[key] !== untouchedLayout[key]) {
+          result[key] = node[key];
+        }
+      });
+    }
+    return result;
+  };
+
+  getChildrenCountForSelectedPath = (): number => {
+    const selectedNode: LayoutRecordType = (
+      this.state.selectedNodePath || []
+    ).reduce(
+      (node: LayoutRecordType, cv) => node.children.get(cv),
+      this.state.layoutDefinition,
+    );
+    return selectedNode ? selectedNode.children.size : 0;
+  };
+
+  render() {
+    const {layoutDefinition, selectedNodePath, direction} = this.state;
+    const {height} = this.props;
+
+    // @ts-ignore
+    const selectedNode: LayoutRecordType | null = selectedNodePath
+      ? layoutDefinition.getIn(getPath(selectedNodePath))
+      : null;
+
+    const playground = (
+      <div
+        className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
+        onMouseDown={this.onMouseDown}
+        style={{height, maxHeight: height}}
+        ref={ref => {
+          this._containerRef = ref;
+        }}>
+        <YogaNode
+          layoutDefinition={layoutDefinition}
+          selectedNodePath={selectedNodePath}
+          onClick={selectedNodePath => this.setState({selectedNodePath})}
+          onDoubleClick={this.onAdd}
+          direction={direction}
+          showGuides={this.props.showGuides}
+        />
+        {!this.props.renderSidebar && (
+          <Sidebar>
+            {this.state.selectedNodePath ? (
+              <Editor
+                node={selectedNode}
+                selectedNodeIsRoot={
+                  selectedNodePath ? selectedNodePath.length === 0 : false
+                }
+                onChangeLayout={this.onChangeLayout}
+                // @ts-ignore
+                onChangeSetting={(key, value) => this.setState({[key]: value})}
+                direction={direction}
+                onRemove={
+                  selectedNodePath && selectedNodePath.length > 0
+                    ? this.onRemove
+                    : undefined
+                }
+                onAdd={
+                  selectedNodePath &&
+                  selectedNodePath.length < this.props.maxDepth
+                    ? this.onAdd
+                    : undefined
+                }
+              />
+            ) : (
+              <div className="NoContent">
+                Select a node to edit its properties
+              </div>
+            )}
+          </Sidebar>
+        )}
+      </div>
+    );
+
+    if (this.props.renderSidebar) {
+      return (
+        <div className={`PlaygroundContainer ${this.props.className || ''}`}>
+          <div>
+            {this.props.renderSidebar(
+              // @ts-ignore
+              layoutDefinition.getIn(getPath(selectedNodePath)),
+              this.onChangeLayout,
+            )}
+          </div>
+          {playground}
+        </div>
+      );
+    } else {
+      return playground;
+    }
+  }
+}
diff --git a/website-next/src/pages/index.tsx b/website-next/src/pages/index.tsx
index 82cb2f57..c011234c 100644
--- a/website-next/src/pages/index.tsx
+++ b/website-next/src/pages/index.tsx
@@ -11,6 +11,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import styles from './index.module.css';
 
@@ -42,6 +43,12 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <BrowserOnly fallback={null}>
+          {() => {
+            const Playground = require('../components/Playground');
+            return <Playground />;
+          }}
+        </BrowserOnly>
       </main>
     </Layout>
   );
diff --git a/yarn.lock b/yarn.lock
index 6efd9aad..097b47ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -154,6 +154,39 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@ant-design/colors@^3.1.0":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
+  integrity sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==
+  dependencies:
+    tinycolor2 "^1.4.1"
+
+"@ant-design/create-react-context@^0.2.4":
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@ant-design/create-react-context/-/create-react-context-0.2.6.tgz#4833a1e4422e5bda5211965e6fed984659c6e4a1"
+  integrity sha512-pHUuaE50/WEek4w2Q+QYVieLPIGfXM+nUsGSsg8xO6oHBw7dfd14Ws/6q3/L6eZ60zjUiv3WUlSzpWyCOXLqbQ==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
+"@ant-design/css-animation@^1.7.2":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@ant-design/css-animation/-/css-animation-1.7.3.tgz#60a1c970014e86b28f940510d69e503e428f1136"
+  integrity sha512-LrX0OGZtW+W6iLnTAqnTaoIsRelYeuLZWsrmBJFUXDALQphPsN8cE5DCsmoSlL0QYb94BQxINiuS70Ar/8BNgA==
+
+"@ant-design/icons-react@~2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons-react/-/icons-react-2.0.1.tgz#17a2513571ab317aca2927e58cea25dd31e536fb"
+  integrity sha512-r1QfoltMuruJZqdiKcbPim3d8LNsVPB733U0gZEUSxBLuqilwsW28K2rCTWSMTjmFX7Mfpf+v/wdiFe/XCqThw==
+  dependencies:
+    "@ant-design/colors" "^3.1.0"
+    babel-runtime "^6.26.0"
+
+"@ant-design/icons@~2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-2.1.1.tgz#7b9c08dffd4f5d41db667d9dbe5e0107d0bd9a4a"
+  integrity sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w==
+
 "@babel/cli@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.20.7.tgz#8fc12e85c744a1a617680eacb488fab1fcd35b7c"
@@ -3469,6 +3502,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-slick@^0.23.4":
+  version "0.23.10"
+  resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.10.tgz#56126e6e4e95cdce7771535b2811c2c1931a7caa"
+  integrity sha512-ZiqdencANDZy6sWOWJ54LDvebuXFEhDlHtXU9FFipQR2BcYU2QJxZhvJPW6YK7cocibUiNn+YvDTbt1HtCIBVA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.2.12"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97"
@@ -3807,6 +3847,13 @@ acorn@^8.0.4, acorn@^8.4.1, acorn@^8.7.1, acorn@^8.8.0, acorn@^8.8.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
+add-dom-event-listener@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
+  integrity sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==
+  dependencies:
+    object-assign "4.x"
+
 address@^1.0.1, address@^1.1.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
@@ -3944,6 +3991,66 @@ ansicolors@~0.3.2:
   resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
   integrity sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg==
 
+antd@^3.6.5:
+  version "3.26.20"
+  resolved "https://registry.yarnpkg.com/antd/-/antd-3.26.20.tgz#f3f570efaaa5950a144942f21eb2aaaa088e9407"
+  integrity sha512-VIous4ofZfxFtd9K1h9MpRX2sDDpj3QcOFi3YgIc9B/uyDli/GlLb8SWKfQfJaMkaxwatIv503dag2Tog+hiEg==
+  dependencies:
+    "@ant-design/create-react-context" "^0.2.4"
+    "@ant-design/icons" "~2.1.1"
+    "@ant-design/icons-react" "~2.0.1"
+    "@types/react-slick" "^0.23.4"
+    array-tree-filter "^2.1.0"
+    babel-runtime "6.x"
+    classnames "~2.2.6"
+    copy-to-clipboard "^3.2.0"
+    css-animation "^1.5.0"
+    dom-closest "^0.2.0"
+    enquire.js "^2.1.6"
+    is-mobile "^2.1.0"
+    lodash "^4.17.13"
+    moment "^2.24.0"
+    omit.js "^1.0.2"
+    prop-types "^15.7.2"
+    raf "^3.4.1"
+    rc-animate "^2.10.2"
+    rc-calendar "~9.15.7"
+    rc-cascader "~0.17.4"
+    rc-checkbox "~2.1.6"
+    rc-collapse "~1.11.3"
+    rc-dialog "~7.6.0"
+    rc-drawer "~3.1.1"
+    rc-dropdown "~2.4.1"
+    rc-editor-mention "^1.1.13"
+    rc-form "^2.4.10"
+    rc-input-number "~4.5.0"
+    rc-mentions "~0.4.0"
+    rc-menu "~7.5.1"
+    rc-notification "~3.3.1"
+    rc-pagination "~1.20.11"
+    rc-progress "~2.5.0"
+    rc-rate "~2.5.0"
+    rc-resize-observer "^0.1.0"
+    rc-select "~9.2.0"
+    rc-slider "~8.7.1"
+    rc-steps "~3.5.0"
+    rc-switch "~1.9.0"
+    rc-table "~6.10.5"
+    rc-tabs "~9.7.0"
+    rc-time-picker "~3.7.1"
+    rc-tooltip "~3.7.3"
+    rc-tree "~2.1.0"
+    rc-tree-select "~2.9.1"
+    rc-trigger "^2.6.2"
+    rc-upload "~2.9.1"
+    rc-util "^4.16.1"
+    react-lazy-load "^3.0.13"
+    react-lifecycles-compat "^3.0.4"
+    react-slick "~0.25.2"
+    resize-observer-polyfill "^1.5.1"
+    shallowequal "^1.1.0"
+    warning "~4.0.3"
+
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -4036,6 +4143,11 @@ array-slice@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-1.1.0.tgz#e368ea15f89bc7069f7ffb89aec3a6c7d4ac22d4"
   integrity sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==
 
+array-tree-filter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -4090,6 +4202,11 @@ async-settle@^2.0.0:
   dependencies:
     async-done "^2.0.0"
 
+async-validator@~1.11.3:
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.11.5.tgz#9d43cf49ef6bb76be5442388d19fb9a6e47597ea"
+  integrity sha512-XNtCsMAeAH1pdLMEg1z8/Bb3a8cdCbui9QbJATRFHHHW5kT6+NPI3zSVQUXgikTFITzsg+kYY5NTWhM2Orwt9w==
+
 async@^3.2.3:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
@@ -4264,6 +4381,14 @@ babel-preset-jest@^29.2.0:
     babel-plugin-jest-hoist "^29.2.0"
     babel-preset-current-node-syntax "^1.0.0"
 
+babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 bach@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880"
@@ -4636,6 +4761,16 @@ clang-format@^1.8.0:
     glob "^7.0.0"
     resolve "^1.1.6"
 
+classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
+classnames@~2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@^5.2.2, clean-css@^5.3.0:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224"
@@ -4667,6 +4802,15 @@ cli-table3@^0.6.0, cli-table3@^0.6.2:
   optionalDependencies:
     "@colors/colors" "1.5.0"
 
+clipboard@^2.0.0:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
@@ -4814,6 +4958,18 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
+component-classes@1.x, component-classes@^1.2.5, component-classes@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
+  integrity sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==
+  dependencies:
+    component-indexof "0.0.3"
+
+component-indexof@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
+  integrity sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw==
+
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -4903,6 +5059,13 @@ copy-text-to-clipboard@^3.0.1:
   resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz#6bf40deef0a51ac6858efb0d76ded2c6d6a15059"
   integrity sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==
 
+copy-to-clipboard@^3.2.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a"
@@ -4934,6 +5097,16 @@ core-js-pure@^3.30.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.31.0.tgz#052fd9e82fbaaf86457f5db1fadcd06f15966ff2"
   integrity sha512-/AnE9Y4OsJZicCzIe97JP5XoPKQJfTuEG43aEVLFJGOJpyqELod+pE6LEl63DfG1Mp8wX97LDaDpy1GmLEUxlg==
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==
+
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.23.3:
   version "3.31.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.31.0.tgz#4471dd33e366c79d8c0977ed2d940821719db344"
@@ -4981,6 +5154,14 @@ cosmiconfig@^8.2.0:
     parse-json "^5.0.0"
     path-type "^4.0.0"
 
+create-react-class@^15.5.3:
+  version "15.7.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
+  integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
@@ -5007,6 +5188,14 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-animation@1.x, css-animation@^1.3.2, css-animation@^1.5.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/css-animation/-/css-animation-1.6.1.tgz#162064a3b0d51f958b7ff37b3d6d4de18e17039e"
+  integrity sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==
+  dependencies:
+    babel-runtime "6.x"
+    component-classes "^1.2.5"
+
 css-declaration-sorter@^6.3.1:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz#630618adc21724484b3e9505bce812def44000ad"
@@ -5244,6 +5433,11 @@ del@^6.1.1:
     rimraf "^3.0.2"
     slash "^3.0.0"
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -5333,6 +5527,18 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-align@^1.7.0:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.4.tgz#3503992eb2a7cfcb2ed3b2a6d21e0b9c00d54511"
+  integrity sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==
+
+dom-closest@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-closest/-/dom-closest-0.2.0.tgz#ebd9f91d1bf22e8d6f477876bbcd3ec90216c0cf"
+  integrity sha512-6neTn1BtJlTSt+XSISXpnOsF1uni1CHsP/tmzZMGWxasYFHsBOqrHPnzmneqEgKhpagnfnfSfbvRRW0xFsBHAA==
+  dependencies:
+    dom-matches ">=1.0.1"
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -5340,6 +5546,16 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-matches@>=1.0.1:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-matches/-/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c"
+  integrity sha512-2VI856xEDCLXi19W+4BechR5/oIS6bKCKqcf16GR8Pg7dGLJ/eBOWVbCmQx2ISvYH6wTNx5Ef7JTOw1dRGRx6A==
+
+dom-scroll-into-view@1.x, dom-scroll-into-view@^1.2.0, dom-scroll-into-view@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
+  integrity sha512-LwNVg3GJOprWDO+QhLL1Z9MMgWe/KAFLxVWKzjRTxNSPn8/LLDIfmuG71YHznXCqaqTjvHJDYO1MEAgX6XCNbQ==
+
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -5410,6 +5626,15 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+draft-js@^0.10.0, draft-js@~0.10.0:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
+  integrity sha512-LE6jSCV9nkPhfVX2ggcRLA4FKs6zWq9ceuO/88BpXdNCS7mjRTgs0NsV6piUCJX9YxMsB9An33wnkMmU2sD2Zg==
+  dependencies:
+    fbjs "^0.8.15"
+    immutable "~3.7.4"
+    object-assign "^4.1.0"
+
 duplexer3@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
@@ -5470,6 +5695,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.1.0, end-of-stream@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -5485,6 +5717,11 @@ enhanced-resolve@^5.14.1:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -5799,6 +6036,11 @@ eventemitter3@^4.0.0:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
+eventlistener@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/eventlistener/-/eventlistener-0.0.1.tgz#ed2baabb852227af2bcf889152c72c63ca532eb8"
+  integrity sha512-hXZ5N9hmp3n7ovmVgG+2vIO6KcjSU10/d0A1Ixcf0i29dxCwAGTNGrSJCfLmlvmgQD8FYzyp//S8+Hpq4Nd7uA==
+
 events@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -5941,6 +6183,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
@@ -5967,6 +6216,19 @@ fbjs-css-vars@^1.0.0:
   resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
   integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
 
+fbjs@^0.8.15:
+  version "0.8.18"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a"
+  integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.30"
+
 fbjs@^3.0.0, fbjs@^3.0.1:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.5.tgz#aa0edb7d5caa6340011790bd9249dbef8a81128d"
@@ -6132,6 +6394,11 @@ fork-ts-checker-webpack-plugin@^6.5.0:
     semver "^7.3.2"
     tapable "^1.0.0"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -6390,6 +6657,13 @@ globby@^13.1.1:
     merge2 "^1.4.1"
     slash "^4.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -6439,6 +6713,11 @@ gray-matter@^4.0.3:
     section-matter "^1.0.0"
     strip-bom-string "^1.0.0"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@@ -6446,6 +6725,11 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -6559,6 +6843,16 @@ hast-util-to-parse5@^6.0.0:
     xtend "^4.0.0"
     zwitch "^1.0.0"
 
+hastscript@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.2.tgz#bde2c2e56d04c62dd24e8c5df288d050a355fb8a"
+  integrity sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 hastscript@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
@@ -6575,6 +6869,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+highlight.js@~9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
+  integrity sha512-qNnYpBDO/FQwYVur1+sQBQw7v0cxso1nOYLklqWh6af8ROwwTVoII5+kf/BVa8354WL4ad6rURHYGUXCbD9mMg==
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -6587,7 +6886,12 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+  integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6743,6 +7047,13 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -6765,6 +7076,21 @@ immer@^9.0.7:
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
 
+immutable@^3.7.4:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+  integrity sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==
+
+immutable@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"
+  integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==
+
+immutable@~3.7.4:
+  version "3.7.6"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
+  integrity sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==
+
 import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -7007,6 +7333,11 @@ is-installed-globally@^0.4.0:
     global-dirs "^3.0.0"
     is-path-inside "^3.0.2"
 
+is-mobile@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
+  integrity sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg==
+
 is-negative-zero@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
@@ -7096,6 +7427,11 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -7185,6 +7521,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@@ -7688,6 +8032,13 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
+  dependencies:
+    string-convert "^0.2.0"
+
 json5@^2.1.2, json5@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
@@ -7879,7 +8230,7 @@ lodash.curry@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
   integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
 
-lodash.debounce@^4.0.8:
+lodash.debounce@^4.0.0, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -7909,12 +8260,17 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.throttle@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.16.5, lodash@^4.17.13, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7943,6 +8299,14 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
+lowlight@~1.9.1:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
+  integrity sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.12.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -8142,6 +8506,16 @@ mini-css-extract-plugin@^2.6.1:
   dependencies:
     schema-utils "^4.0.0"
 
+mini-store@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mini-store/-/mini-store-2.0.0.tgz#0843c048d6942ce55e3e78b1b67fc063022b5488"
+  integrity sha512-EG0CuwpQmX+XL4QVS0kxNwHW5ftSbhygu1qxQH0pipugjnPkbvkalCdQbEihMwtQY6d3MTN+MS0q+aurs+RfLQ==
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.0.2"
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -8193,6 +8567,11 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@2.x, moment@^2.24.0:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 mrmime@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
@@ -8221,6 +8600,11 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+mutationobserver-shim@^0.3.2:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz#8bf633b0c0b0291a1107255ed32c13088a8c5bf3"
+  integrity sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ==
+
 nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
@@ -8274,6 +8658,14 @@ node-environment-flags@^1.0.5:
     object.getownpropertydescriptors "^2.0.3"
     semver "^5.7.0"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-fetch@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.11.tgz#cde7fc71deef3131ef80a738919f999e6edfff25"
@@ -8354,7 +8746,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@4.x, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -8413,6 +8805,13 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
+omit.js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-1.0.2.tgz#91a14f0eba84066dfa015bf30e474c47f30bc858"
+  integrity sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==
+  dependencies:
+    babel-runtime "^6.23.0"
+
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -8550,6 +8949,18 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-entities@^1.1.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
+  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-entities@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
@@ -8667,6 +9078,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -9047,11 +9463,18 @@ prism-react-renderer@^1.3.5:
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz#786bb69aa6f73c32ba1ee813fbe17a0115435085"
   integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
 
-prismjs@^1.28.0:
+prismjs@^1.28.0, prismjs@^1.8.4:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
+prismjs@~1.17.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
+  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -9072,7 +9495,7 @@ prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9145,6 +9568,13 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
+raf@^3.4.0, raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -9172,6 +9602,434 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+rc-align@^2.4.0, rc-align@^2.4.1:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-2.4.5.tgz#c941a586f59d1017f23a428f0b468663fb7102ab"
+  integrity sha512-nv9wYUYdfyfK+qskThf4BQUSIadeI/dCsfaMZfNEoxm9HwOIioQ+LyqmMK6jWHAZQgOzMLaqawhuBXlF63vgjw==
+  dependencies:
+    babel-runtime "^6.26.0"
+    dom-align "^1.7.0"
+    prop-types "^15.5.8"
+    rc-util "^4.0.4"
+
+rc-animate@2.x, rc-animate@^2.10.1, rc-animate@^2.10.2, rc-animate@^2.3.0, rc-animate@^2.6.0, rc-animate@^2.8.2:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.11.1.tgz#2666eeb6f1f2a495a13b2af09e236712278fdb2c"
+  integrity sha512-1NyuCGFJG/0Y+9RKh5y/i/AalUCA51opyyS/jO2seELpgymZm2u9QV3xwODwEuzkmeQ1BDPxMLmYLcTJedPlkQ==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.6"
+    css-animation "^1.3.2"
+    prop-types "15.x"
+    raf "^3.4.0"
+    rc-util "^4.15.3"
+    react-lifecycles-compat "^3.0.4"
+
+rc-animate@^3.0.0-rc.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-3.1.1.tgz#defdd863f56816c222534e4dc68feddecd081386"
+  integrity sha512-8wg2Zg3EETy0k/9kYuis30NJNQg1D6/WSQwnCiz6SvyxQXNet/rVraRz3bPngwY6rcU2nlRvoShiYOorXyF7Sg==
+  dependencies:
+    "@ant-design/css-animation" "^1.7.2"
+    classnames "^2.2.6"
+    raf "^3.4.0"
+    rc-util "^4.15.3"
+
+rc-calendar@~9.15.7:
+  version "9.15.11"
+  resolved "https://registry.yarnpkg.com/rc-calendar/-/rc-calendar-9.15.11.tgz#ce1e5ea8e4d77435be66a8c77db12f1f0f9a345f"
+  integrity sha512-qv0VXfAAnysMWJigxaP6se4bJHvr17D9qsLbi8BOpdgEocsS0RkgY1IUiFaOVYKJDy/EyLC447O02sV/y5YYBg==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "2.x"
+    moment "2.x"
+    prop-types "^15.5.8"
+    rc-trigger "^2.2.0"
+    rc-util "^4.1.1"
+    react-lifecycles-compat "^3.0.4"
+
+rc-cascader@~0.17.4:
+  version "0.17.5"
+  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-0.17.5.tgz#4fde91d23b7608c420263c38eee9c0687f80f7dc"
+  integrity sha512-WYMVcxU0+Lj+xLr4YYH0+yXODumvNXDcVEs5i7L1mtpWwYkubPV/zbQpn+jGKFCIW/hOhjkU4J1db8/P/UKE7A==
+  dependencies:
+    array-tree-filter "^2.1.0"
+    prop-types "^15.5.8"
+    rc-trigger "^2.2.0"
+    rc-util "^4.0.4"
+    react-lifecycles-compat "^3.0.4"
+    shallow-equal "^1.0.0"
+    warning "^4.0.1"
+
+rc-checkbox@~2.1.6:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/rc-checkbox/-/rc-checkbox-2.1.8.tgz#eedd9ef9c2f3af5b3b8e5cde5254aa89ad1a880a"
+  integrity sha512-6qOgh0/by0nVNASx6LZnhRTy17Etcgav+IrI7kL9V9kcDZ/g7K14JFlqrtJ3NjDq/Kyn+BPI1st1XvbkhfaJeg==
+  dependencies:
+    babel-runtime "^6.23.0"
+    classnames "2.x"
+    prop-types "15.x"
+    react-lifecycles-compat "^3.0.4"
+
+rc-collapse@~1.11.3:
+  version "1.11.8"
+  resolved "https://registry.yarnpkg.com/rc-collapse/-/rc-collapse-1.11.8.tgz#66a40089d469519e9424009ab1c927e214041d80"
+  integrity sha512-8EhfPyScTYljkbRuIoHniSwZagD5UPpZ3CToYgoNYWC85L2qCbPYF7+OaC713FOrIkp6NbfNqXsITNxmDAmxog==
+  dependencies:
+    classnames "2.x"
+    css-animation "1.x"
+    prop-types "^15.5.6"
+    rc-animate "2.x"
+    react-is "^16.7.0"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+
+rc-dialog@~7.6.0:
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/rc-dialog/-/rc-dialog-7.6.1.tgz#11545ccc0b945934fa76079726e0d853e52d705f"
+  integrity sha512-KUKf+2eZ4YL+lnXMG3hR4ZtIhC9glfH27NtTVz3gcoDIPAf3uUvaXVRNoDCiSi+OGKLyIb/b6EoidFh6nQC5Wg==
+  dependencies:
+    babel-runtime "6.x"
+    rc-animate "2.x"
+    rc-util "^4.16.1"
+
+rc-drawer@~3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-3.1.3.tgz#cbcb04d4c07f0b66f2ece11d847f4a1bd80ea0b7"
+  integrity sha512-2z+RdxmzXyZde/1OhVMfDR1e/GBswFeWSZ7FS3Fdd0qhgVdpV1wSzILzzxRaT481ItB5hOV+e8pZT07vdJE8kg==
+  dependencies:
+    classnames "^2.2.6"
+    rc-util "^4.16.1"
+    react-lifecycles-compat "^3.0.4"
+
+rc-dropdown@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/rc-dropdown/-/rc-dropdown-2.4.1.tgz#aaef6eb3a5152cdd9982895c2a78d9b5f046cdec"
+  integrity sha512-p0XYn0wrOpAZ2fUGE6YJ6U8JBNc5ASijznZ6dkojdaEfQJAeZtV9KMEewhxkVlxGSbbdXe10ptjBlTEW9vEwEg==
+  dependencies:
+    babel-runtime "^6.26.0"
+    classnames "^2.2.6"
+    prop-types "^15.5.8"
+    rc-trigger "^2.5.1"
+    react-lifecycles-compat "^3.0.2"
+
+rc-editor-core@~0.8.3:
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/rc-editor-core/-/rc-editor-core-0.8.10.tgz#6f215bc5df9c33ffa9f6c5b30ca73a7dabe8ab7c"
+  integrity sha512-T3aHpeMCIYA1sdAI7ynHHjXy5fqp83uPlD68ovZ0oClTSc3tbHmyCxXlA+Ti4YgmcpCYv7avF6a+TIbAka53kw==
+  dependencies:
+    babel-runtime "^6.26.0"
+    classnames "^2.2.5"
+    draft-js "^0.10.0"
+    immutable "^3.7.4"
+    lodash "^4.16.5"
+    prop-types "^15.5.8"
+    setimmediate "^1.0.5"
+
+rc-editor-mention@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/rc-editor-mention/-/rc-editor-mention-1.1.13.tgz#9f1cab1065f86b01523840321790c2ab12ac5e8b"
+  integrity sha512-3AOmGir91Fi2ogfRRaXLtqlNuIwQpvla7oUnGHS1+3eo7b+fUp5IlKcagqtwUBB5oDNofoySXkLBxzWvSYNp/Q==
+  dependencies:
+    babel-runtime "^6.23.0"
+    classnames "^2.2.5"
+    dom-scroll-into-view "^1.2.0"
+    draft-js "~0.10.0"
+    immutable "~3.7.4"
+    prop-types "^15.5.8"
+    rc-animate "^2.3.0"
+    rc-editor-core "~0.8.3"
+
+rc-form@^2.4.10:
+  version "2.4.12"
+  resolved "https://registry.yarnpkg.com/rc-form/-/rc-form-2.4.12.tgz#4ee8711e90a2584baa7ac276de96bee0d9b0f5f1"
+  integrity sha512-sHfyWRrnjCHkeCYfYAGop2GQBUC6CKMPcJF9h/gL/vTmZB/RN6fNOGKjXrXjFbwFwKXUWBoPtIDDDmXQW9xNdw==
+  dependencies:
+    async-validator "~1.11.3"
+    babel-runtime "6.x"
+    create-react-class "^15.5.3"
+    dom-scroll-into-view "1.x"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.4"
+    rc-util "^4.15.3"
+    react-is "^16.13.1"
+    warning "^4.0.3"
+
+rc-hammerjs@~0.6.0:
+  version "0.6.10"
+  resolved "https://registry.yarnpkg.com/rc-hammerjs/-/rc-hammerjs-0.6.10.tgz#1831a3bd8f2199700bfcc5ad6b20a35630aeb5e0"
+  integrity sha512-Vgh9qIudyN5CHRop4M+v+xUniQBFWXKrsJxQRVtJOi2xgRrCeI52/bkpaL5HWwUhqTK9Ayq0n7lYTItT6ld5rg==
+  dependencies:
+    babel-runtime "6.x"
+    hammerjs "^2.0.8"
+    prop-types "^15.5.9"
+
+rc-input-number@~4.5.0:
+  version "4.5.9"
+  resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-4.5.9.tgz#1cbf735e24fe23c4eb9a4301031720b95f2a3e3d"
+  integrity sha512-wAT4EBpLDW4+27c935k4F1JLk+gnhyGBkpzBmtkNvIHLG8yTndZSJ2bFfSYfkA6C82IxmAztXs3ffCeUd/rkbg==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.0"
+    prop-types "^15.5.7"
+    rc-util "^4.5.1"
+    rmc-feedback "^2.0.0"
+
+rc-mentions@~0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/rc-mentions/-/rc-mentions-0.4.2.tgz#c18ab701efb9e4b75b3851a0c0d2dd698640e246"
+  integrity sha512-DTZurQzacLXOfVuiHydGzqkq7cFMHXF18l2jZ9PhWUn2cqvOSY3W4osN0Pq29AOMOBpcxdZCzgc7Lb0r/bgkDw==
+  dependencies:
+    "@ant-design/create-react-context" "^0.2.4"
+    classnames "^2.2.6"
+    rc-menu "^7.4.22"
+    rc-trigger "^2.6.2"
+    rc-util "^4.6.0"
+    react-lifecycles-compat "^3.0.4"
+
+rc-menu@^7.3.0, rc-menu@^7.4.22, rc-menu@~7.5.1:
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/rc-menu/-/rc-menu-7.5.5.tgz#78cdc817d86fc353a1430b864d3d96c7489600ca"
+  integrity sha512-4YJXJgrpUGEA1rMftXN7bDhrV5rPB8oBJoHqT+GVXtIWCanfQxEnM3fmhHQhatL59JoAFMZhJaNzhJIk4FUWCQ==
+  dependencies:
+    classnames "2.x"
+    dom-scroll-into-view "1.x"
+    mini-store "^2.0.0"
+    mutationobserver-shim "^0.3.2"
+    rc-animate "^2.10.1"
+    rc-trigger "^2.3.0"
+    rc-util "^4.13.0"
+    resize-observer-polyfill "^1.5.0"
+    shallowequal "^1.1.0"
+
+rc-notification@~3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/rc-notification/-/rc-notification-3.3.1.tgz#0baa3e70f8d40ab015ce8fa78c260c490fc7beb4"
+  integrity sha512-U5+f4BmBVfMSf3OHSLyRagsJ74yKwlrQAtbbL5ijoA0F2C60BufwnOcHG18tVprd7iaIjzZt1TKMmQSYSvgrig==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "2.x"
+    prop-types "^15.5.8"
+    rc-animate "2.x"
+    rc-util "^4.0.4"
+
+rc-pagination@~1.20.11:
+  version "1.20.15"
+  resolved "https://registry.yarnpkg.com/rc-pagination/-/rc-pagination-1.20.15.tgz#ccb4cd0e9bd4e47f72f29ea432c0350bf7b3d807"
+  integrity sha512-/Xr4/3GOa1DtL8iCYl7qRUroEMrRDhZiiuHwcVFfSiwa9LYloMlUWcOJsnr8LN6A7rLPdm3/CHStUNeYd+2pKw==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.6"
+    prop-types "^15.5.7"
+    react-lifecycles-compat "^3.0.4"
+
+rc-progress@~2.5.0:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-2.5.3.tgz#00f01b95bdbe1856d3a5f82242051902e8b7a8e7"
+  integrity sha512-K2fa4CnqGehLZoMrdmBeZ86ONSTVcdk5FlqetbwJ3R/+42XfqhwQVOjWp2MH4P7XSQOMAGcNOy1SFfCP3415sg==
+  dependencies:
+    babel-runtime "6.x"
+    prop-types "^15.5.8"
+
+rc-rate@~2.5.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/rc-rate/-/rc-rate-2.5.1.tgz#55fc5fd23ea9dcc72250b9a889803479f4842961"
+  integrity sha512-3iJkNJT8xlHklPCdeZtUZmJmRVUbr6AHRlfSsztfYTXVlHrv2TcPn3XkHsH+12j812WVB7gvilS2j3+ffjUHXg==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.8"
+    rc-util "^4.3.0"
+    react-lifecycles-compat "^3.0.4"
+
+rc-resize-observer@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-0.1.3.tgz#097191f9c3ab186ed907b553ba6ef565df11c249"
+  integrity sha512-uzOQEwx83xdQSFOkOAM7x7GHIQKYnrDV4dWxtCxyG1BS1pkfJ4EvDeMfsvAJHSYkQXVBu+sgRHGbRtLG3qiuUg==
+  dependencies:
+    classnames "^2.2.1"
+    rc-util "^4.13.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-select@~9.2.0:
+  version "9.2.3"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-9.2.3.tgz#64340e2d6ef64e8bc3cfc6f468ffd28625589ac2"
+  integrity sha512-WhswxOMWiNnkXRbxyrj0kiIvyCfo/BaRPaYbsDetSIAU2yEDwKHF798blCP5u86KLOBKBvtxWLFCkSsQw1so5w==
+  dependencies:
+    babel-runtime "^6.23.0"
+    classnames "2.x"
+    component-classes "1.x"
+    dom-scroll-into-view "1.x"
+    prop-types "^15.5.8"
+    raf "^3.4.0"
+    rc-animate "2.x"
+    rc-menu "^7.3.0"
+    rc-trigger "^2.5.4"
+    rc-util "^4.0.4"
+    react-lifecycles-compat "^3.0.2"
+    warning "^4.0.2"
+
+rc-slider@~8.7.1:
+  version "8.7.1"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-8.7.1.tgz#9ed07362dc93489a38e654b21b8122ad70fd3c42"
+  integrity sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.5"
+    prop-types "^15.5.4"
+    rc-tooltip "^3.7.0"
+    rc-util "^4.0.4"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+    warning "^4.0.3"
+
+rc-steps@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/rc-steps/-/rc-steps-3.5.0.tgz#36b2a7f1f49907b0d90363884b18623caf9fb600"
+  integrity sha512-2Vkkrpa7PZbg7qPsqTNzVDov4u78cmxofjjnIHiGB9+9rqKS8oTLPzbW2uiWDr3Lk+yGwh8rbpGO1E6VAgBCOg==
+  dependencies:
+    babel-runtime "^6.23.0"
+    classnames "^2.2.3"
+    lodash "^4.17.5"
+    prop-types "^15.5.7"
+
+rc-switch@~1.9.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/rc-switch/-/rc-switch-1.9.2.tgz#7921c766411fe9a6426510c3429022d6ba4dfde2"
+  integrity sha512-qaK7mY4FLDKy99Hq3A1tf8CcqfzKtHp9LPX8WTnZ0MzdHCTneSARb1XD7Eqeu8BactasYGsi2bF9p18Q+/5JEw==
+  dependencies:
+    classnames "^2.2.1"
+    prop-types "^15.5.6"
+    react-lifecycles-compat "^3.0.4"
+
+rc-table@~6.10.5:
+  version "6.10.15"
+  resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-6.10.15.tgz#181f4c70c4fd74f657ee8f23196e7eb08a0365ca"
+  integrity sha512-LAr0M/gqt+irOjvPNBLApmQ0CUHNOfKsEBhu1uIuB3OlN1ynA9z+sdoTQyNd9+8NSl0MYnQOOfhtLChAY7nU0A==
+  dependencies:
+    classnames "^2.2.5"
+    component-classes "^1.2.6"
+    lodash "^4.17.5"
+    mini-store "^2.0.0"
+    prop-types "^15.5.8"
+    rc-util "^4.13.0"
+    react-lifecycles-compat "^3.0.2"
+    shallowequal "^1.0.2"
+
+rc-tabs@~9.7.0:
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/rc-tabs/-/rc-tabs-9.7.0.tgz#ae09695bef5963d6e64e7bc10521c76dfdd8448b"
+  integrity sha512-kvmgp8/MfLzFZ06hWHignqomFQ5nF7BqKr5O1FfhE4VKsGrep52YSF/1MvS5oe0NPcI9XGNS2p751C5v6cYDpQ==
+  dependencies:
+    "@ant-design/create-react-context" "^0.2.4"
+    babel-runtime "6.x"
+    classnames "2.x"
+    lodash "^4.17.5"
+    prop-types "15.x"
+    raf "^3.4.1"
+    rc-hammerjs "~0.6.0"
+    rc-util "^4.0.4"
+    react-lifecycles-compat "^3.0.4"
+    resize-observer-polyfill "^1.5.1"
+    warning "^4.0.3"
+
+rc-time-picker@~3.7.1:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/rc-time-picker/-/rc-time-picker-3.7.3.tgz#65a8de904093250ae9c82b02a4905e0f995e23e2"
+  integrity sha512-Lv1Mvzp9fRXhXEnRLO4nW6GLNxUkfAZ3RsiIBsWjGjXXvMNjdr4BX/ayElHAFK0DoJqOhm7c5tjmIYpEOwcUXg==
+  dependencies:
+    classnames "2.x"
+    moment "2.x"
+    prop-types "^15.5.8"
+    raf "^3.4.1"
+    rc-trigger "^2.2.0"
+    react-lifecycles-compat "^3.0.4"
+
+rc-tooltip@^3.7.0, rc-tooltip@~3.7.3:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-3.7.3.tgz#280aec6afcaa44e8dff0480fbaff9e87fc00aecc"
+  integrity sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==
+  dependencies:
+    babel-runtime "6.x"
+    prop-types "^15.5.8"
+    rc-trigger "^2.2.2"
+
+rc-tree-select@~2.9.1:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-2.9.4.tgz#6aa794e1f0e65c66c406aa0a2a0e74fd0a557b09"
+  integrity sha512-0HQkXAN4XbfBW20CZYh3G+V+VMrjX42XRtDCpyv6PDUm5vikC0Ob682ZBCVS97Ww2a5Hf6Ajmu0ahWEdIEpwhg==
+  dependencies:
+    classnames "^2.2.1"
+    dom-scroll-into-view "^1.2.1"
+    prop-types "^15.5.8"
+    raf "^3.4.0"
+    rc-animate "^2.8.2"
+    rc-tree "~2.1.0"
+    rc-trigger "^3.0.0"
+    rc-util "^4.5.0"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.0.2"
+    warning "^4.0.1"
+
+rc-tree@~2.1.0:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-2.1.4.tgz#ef759f3e799a21b43c1ecf9c794ea1c14e70b59b"
+  integrity sha512-Xey794Iavgs8YldFlXcZLOhfcIhlX5Oz/yfKufknBXf2AlZCOkc7aHqSM9uTF7fBPtTGPhPxNEfOqHfY7b7xng==
+  dependencies:
+    "@ant-design/create-react-context" "^0.2.4"
+    classnames "2.x"
+    prop-types "^15.5.8"
+    rc-animate "^2.6.0"
+    rc-util "^4.5.1"
+    react-lifecycles-compat "^3.0.4"
+    warning "^4.0.3"
+
+rc-trigger@^2.2.0, rc-trigger@^2.2.2, rc-trigger@^2.3.0, rc-trigger@^2.5.1, rc-trigger@^2.5.4, rc-trigger@^2.6.2:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-2.6.5.tgz#140a857cf28bd0fa01b9aecb1e26a50a700e9885"
+  integrity sha512-m6Cts9hLeZWsTvWnuMm7oElhf+03GOjOLfTuU0QmdB9ZrW7jR2IpI5rpNM7i9MvAAlMAmTx5Zr7g3uu/aMvZAw==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.6"
+    prop-types "15.x"
+    rc-align "^2.4.0"
+    rc-animate "2.x"
+    rc-util "^4.4.0"
+    react-lifecycles-compat "^3.0.4"
+
+rc-trigger@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-3.0.0.tgz#f6d9b1da8a26b2b2d1d912a06876c1a486f5980f"
+  integrity sha512-hQxbbJpo23E2QnYczfq3Ec5J5tVl2mUDhkqxrEsQAqk16HfADQg+iKNWzEYXyERSncdxfnzYuaBgy764mNRzTA==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.6"
+    prop-types "15.x"
+    raf "^3.4.0"
+    rc-align "^2.4.1"
+    rc-animate "^3.0.0-rc.1"
+    rc-util "^4.15.7"
+
+rc-upload@~2.9.1:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-2.9.4.tgz#8e34a73a468d7907fe31982c38100e4593857d32"
+  integrity sha512-WXt0HGxXyzLrPV6iec/96Rbl/6dyrAW8pKuY6wwD7yFYwfU5bjgKjv7vC8KNMJ6wzitFrZjnoiogNL3dF9dj3Q==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.5"
+    prop-types "^15.5.7"
+    warning "4.x"
+
+rc-util@^4.0.4, rc-util@^4.1.1, rc-util@^4.13.0, rc-util@^4.15.3, rc-util@^4.15.7, rc-util@^4.16.1, rc-util@^4.3.0, rc-util@^4.4.0, rc-util@^4.5.0, rc-util@^4.5.1, rc-util@^4.6.0:
+  version "4.21.1"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.21.1.tgz#88602d0c3185020aa1053d9a1e70eac161becb05"
+  integrity sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==
+  dependencies:
+    add-dom-event-listener "^1.1.0"
+    prop-types "^15.5.10"
+    react-is "^16.12.0"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+
 rc@1.2.8, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -9252,7 +10110,7 @@ react-helmet-async@*, react-helmet-async@^1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9272,7 +10130,17 @@ react-json-view@^1.21.3:
     react-lifecycles-compat "^3.0.4"
     react-textarea-autosize "^8.3.2"
 
-react-lifecycles-compat@^3.0.4:
+react-lazy-load@^3.0.13:
+  version "3.1.14"
+  resolved "https://registry.yarnpkg.com/react-lazy-load/-/react-lazy-load-3.1.14.tgz#536047d295f578614540a5b417b70b1155f36d9a"
+  integrity sha512-7tsOItf2HmEwhEWMaA/a2XlShuya7rBxqWAR0TPMO1XSf6ybxSDI2bMV8M6vtWkveX9TlSpb0qLB7NMMpDHVDQ==
+  dependencies:
+    eventlistener "0.0.1"
+    lodash.debounce "^4.0.0"
+    lodash.throttle "^4.0.0"
+    prop-types "^15.5.8"
+
+react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -9319,6 +10187,28 @@ react-router@5.3.4, react-router@^5.3.3:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-slick@~0.25.2:
+  version "0.25.2"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.25.2.tgz#56331b67d47d8bcfe2dceb6acab1c8fd5bd1f6bc"
+  integrity sha512-8MNH/NFX/R7zF6W/w+FS5VXNyDusF+XDW1OU0SzODEU7wqYB+ZTGAiNJ++zVNAVqCAHdyCybScaUB+FCZOmBBw==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
+react-syntax-highlighter@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"
+  integrity sha512-G2bkZxmF3VOa4atEdXIDSfwwCqjw6ZQX5znfTaHcErA1WqHIS0o6DaSCDKFPVaOMXQEB9Hf1UySYQvuJmV8CXg==
+  dependencies:
+    babel-runtime "^6.18.0"
+    highlight.js "~9.12.0"
+    lowlight "~1.9.1"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
+
 react-textarea-autosize@^8.3.2:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.1.tgz#bcfc5462727014b808b14ee916c01e275e8a8335"
@@ -9391,6 +10281,15 @@ redeyed@~2.1.0:
   dependencies:
     esprima "~4.0.0"
 
+refractor@^2.4.1:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
+  integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
+  dependencies:
+    hastscript "^5.0.0"
+    parse-entities "^1.1.2"
+    prismjs "~1.17.0"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -9403,6 +10302,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regenerator-runtime@^0.13.11:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
@@ -9577,6 +10481,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -9653,6 +10562,14 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rmc-feedback@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rmc-feedback/-/rmc-feedback-2.0.0.tgz#cbc6cb3ae63c7a635eef0e25e4fbaf5ac366eeaa"
+  integrity sha512-5PWOGOW7VXks/l3JzlOU9NIxRpuaSS8d9zA3UULUCuTKnpwBHNvv1jSJzxgbbCQeYzROWUpgKI4za3X4C/mKmQ==
+  dependencies:
+    babel-runtime "6.x"
+    classnames "^2.2.5"
+
 rtl-detect@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.4.tgz#40ae0ea7302a150b96bc75af7d749607392ecac6"
@@ -9718,7 +10635,7 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -9786,6 +10703,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
 selfsigned@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.1.1.tgz#18a7613d714c0cd3385c48af0075abf3f266af61"
@@ -9909,7 +10831,12 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
+shallow-equal@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
+shallowequal@^1.0.2, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -10108,6 +11035,11 @@ stream-exhaust@^1.0.1, stream-exhaust@^1.0.2:
   resolved "https://registry.yarnpkg.com/stream-exhaust/-/stream-exhaust-1.0.2.tgz#acdac8da59ef2bc1e17a2c0ccf6c320d120e555d"
   integrity sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw==
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -10352,6 +11284,11 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-invariant@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
@@ -10362,6 +11299,11 @@ tiny-warning@^1.0.0:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tinycolor2@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -10384,6 +11326,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
@@ -10521,6 +11468,11 @@ typescript@^4.7.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+ua-parser-js@^0.7.30:
+  version "0.7.35"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
+  integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==
+
 ua-parser-js@^1.0.35:
   version "1.0.35"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"
@@ -10880,6 +11832,13 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
+warning@4.x, warning@^4.0.1, warning@^4.0.2, warning@^4.0.3, warning@~4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
@@ -11043,6 +12002,11 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+whatwg-fetch@>=0.10.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"