diff --git a/examples/typescript/README.md b/examples/typescript/README.md
index cf2908adc..db3a64b71 100644
--- a/examples/typescript/README.md
+++ b/examples/typescript/README.md
@@ -11,3 +11,5 @@ require = ["ts-node/register"]
 ## Environment Types
 
 You can specify types of environment variables by extending type declarations of `@kosko/env` module. See [environments](environments) folder for example.
+
+See [docs](https://kosko.dev/docs/typescript-support) for more details.
diff --git a/examples/web-parcel-1/README.md b/examples/web-parcel-1/README.md
index bbc6515b9..cbfd54475 100644
--- a/examples/web-parcel-1/README.md
+++ b/examples/web-parcel-1/README.md
@@ -1,3 +1,5 @@
 # Parcel 1 Example
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/tommy351/kosko/tree/master/examples/web-parcel-1)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-parcel-1)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.
diff --git a/examples/web-static/README.md b/examples/web-static/README.md
index 2dfbcbf0c..765f2ff2a 100644
--- a/examples/web-static/README.md
+++ b/examples/web-static/README.md
@@ -1,3 +1,5 @@
 # Static Site Example
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/tommy351/kosko/tree/master/examples/web-static)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-static)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.
diff --git a/examples/web-sync-environment/README.md b/examples/web-sync-environment/README.md
new file mode 100644
index 000000000..24ee0fa39
--- /dev/null
+++ b/examples/web-sync-environment/README.md
@@ -0,0 +1,5 @@
+# Sync Environment Example
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-sync-environment)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.
diff --git a/examples/web-sync-environment/package.json b/examples/web-sync-environment/package.json
new file mode 100644
index 000000000..812a685a0
--- /dev/null
+++ b/examples/web-sync-environment/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@kosko-example/web-sync-environment",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "webpack serve",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "@kosko/env": "^2.0.0",
+    "@kosko/generate": "^1.2.0",
+    "kubernetes-models": "^1.5.2"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^5.3.1",
+    "webpack": "^5.31.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
+  }
+}
diff --git a/examples/web-sync-environment/sandbox.config.json b/examples/web-sync-environment/sandbox.config.json
new file mode 100644
index 000000000..3c67638b0
--- /dev/null
+++ b/examples/web-sync-environment/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+  "template": "node",
+  "view": "browser",
+  "node": 14
+}
diff --git a/examples/web-sync-environment/src/components/nginx.js b/examples/web-sync-environment/src/components/nginx.js
new file mode 100644
index 000000000..b6764b285
--- /dev/null
+++ b/examples/web-sync-environment/src/components/nginx.js
@@ -0,0 +1,51 @@
+import { Deployment } from "kubernetes-models/apps/v1/Deployment";
+import { Service } from "kubernetes-models/v1/Service";
+import env from "../env";
+
+const params = env.component("nginx");
+const metadata = { name: "nginx" };
+const labels = { app: "nginx" };
+
+const deployment = new Deployment({
+  metadata,
+  spec: {
+    replicas: params.replicas,
+    selector: {
+      matchLabels: labels
+    },
+    template: {
+      metadata: {
+        labels
+      },
+      spec: {
+        containers: [
+          {
+            image: `${params.imageRegistry}/nginx:${params.imageTag}`,
+            name: "nginx",
+            ports: [
+              {
+                containerPort: 80
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+});
+
+const service = new Service({
+  metadata,
+  spec: {
+    selector: labels,
+    type: "ClusterIP",
+    ports: [
+      {
+        port: 80,
+        targetPort: 80
+      }
+    ]
+  }
+});
+
+export default [deployment, service];
diff --git a/examples/web-sync-environment/src/env.js b/examples/web-sync-environment/src/env.js
new file mode 100644
index 000000000..cb9a5cf57
--- /dev/null
+++ b/examples/web-sync-environment/src/env.js
@@ -0,0 +1,14 @@
+import { createSyncEnvironment, createSyncLoaderReducers } from "@kosko/env";
+
+const env = createSyncEnvironment();
+const dev = require.context("./environments/dev");
+
+env.setReducers((reducers) => [
+  ...reducers,
+  ...createSyncLoaderReducers({
+    global: () => dev("./index").default,
+    component: (name) => dev(`./${name}`).default
+  })
+]);
+
+export default env;
diff --git a/examples/web-sync-environment/src/environments/dev/index.js b/examples/web-sync-environment/src/environments/dev/index.js
new file mode 100644
index 000000000..6c4aecf9e
--- /dev/null
+++ b/examples/web-sync-environment/src/environments/dev/index.js
@@ -0,0 +1,3 @@
+export default {
+  imageRegistry: "gcr.io/image-dev"
+};
diff --git a/examples/web-sync-environment/src/environments/dev/nginx.js b/examples/web-sync-environment/src/environments/dev/nginx.js
new file mode 100644
index 000000000..1f8bc294b
--- /dev/null
+++ b/examples/web-sync-environment/src/environments/dev/nginx.js
@@ -0,0 +1,4 @@
+export default {
+  replicas: 1,
+  imageTag: "latest"
+};
diff --git a/examples/web-sync-environment/src/index.js b/examples/web-sync-environment/src/index.js
new file mode 100644
index 000000000..1734e88b9
--- /dev/null
+++ b/examples/web-sync-environment/src/index.js
@@ -0,0 +1,25 @@
+/* eslint-env browser */
+import { resolve, print, PrintFormat } from "@kosko/generate";
+
+(async () => {
+  const manifests = await resolve(
+    import("./components/nginx").then((mod) => mod.default)
+  );
+
+  console.log(manifests);
+
+  const element = document.createElement("pre");
+  document.body.appendChild(element);
+
+  print(
+    { manifests },
+    {
+      format: PrintFormat.YAML,
+      writer: {
+        write: (data) => {
+          element.innerText += data;
+        }
+      }
+    }
+  );
+})();
diff --git a/examples/web-sync-environment/webpack.config.js b/examples/web-sync-environment/webpack.config.js
new file mode 100644
index 000000000..8a586859a
--- /dev/null
+++ b/examples/web-sync-environment/webpack.config.js
@@ -0,0 +1,17 @@
+/* eslint-disable node/no-unpublished-require */
+"use strict";
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    index: "./src/index.js"
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js"
+  },
+  plugins: [new HtmlWebpackPlugin()]
+};
diff --git a/examples/web-webpack-5/README.md b/examples/web-webpack-5/README.md
index 41e87267f..42379f3e8 100644
--- a/examples/web-webpack-5/README.md
+++ b/examples/web-webpack-5/README.md
@@ -1,3 +1,5 @@
 # Webpack 5 Example
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/tommy351/kosko/tree/master/examples/web-webpack-5)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-webpack-5)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.
diff --git a/netlify.toml b/netlify.toml
index b52afcfd3..da1143928 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -38,3 +38,8 @@
 [[redirects]]
   from = "/api"
   to = "/docs/api"
+
+[[headers]]
+  for = "/assets/*"
+  [headers.values]
+    cache-control = "public, max-age=604800, immutable"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0662f334e..bd9379a33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -179,8 +179,8 @@ importers:
       typescript: ^4.0.3
   examples/web-parcel-1:
     dependencies:
-      '@kosko/env': link:../../packages/env
-      '@kosko/generate': link:../../packages/generate
+      '@kosko/env': 2.0.1
+      '@kosko/generate': 1.2.1
       kubernetes-models: 1.5.2
     devDependencies:
       parcel-bundler: 1.12.5
@@ -194,10 +194,28 @@ importers:
       serve: 11.3.2
     specifiers:
       serve: ^11.3.2
+  examples/web-sync-environment:
+    dependencies:
+      '@kosko/env': 2.0.1
+      '@kosko/generate': 1.2.1
+      kubernetes-models: 1.5.2
+    devDependencies:
+      html-webpack-plugin: 5.3.1_webpack@5.31.2
+      webpack: 5.31.2_webpack-cli@4.6.0
+      webpack-cli: 4.6.0_122c48df1bb4900de3c8d3856836cf3d
+      webpack-dev-server: 3.11.2_webpack-cli@4.6.0+webpack@5.31.2
+    specifiers:
+      '@kosko/env': ^2.0.0
+      '@kosko/generate': ^1.2.0
+      html-webpack-plugin: ^5.3.1
+      kubernetes-models: ^1.5.2
+      webpack: ^5.31.0
+      webpack-cli: ^4.6.0
+      webpack-dev-server: ^3.11.2
   examples/web-webpack-5:
     dependencies:
-      '@kosko/env': link:../../packages/env
-      '@kosko/generate': link:../../packages/generate
+      '@kosko/env': 2.0.1
+      '@kosko/generate': 1.2.1
       kubernetes-models: 1.5.2
     devDependencies:
       html-webpack-plugin: 5.3.1_webpack@5.31.2
@@ -448,58 +466,88 @@ importers:
       tslib: ^2.1.0
   website:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/preset-classic': 2.0.0-alpha.71_1d18ec48d56e323c6ed0865312478831
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/preset-classic': 2.0.0-alpha.73_7f53837c1fb7715cbd51937d57b7f4b7
       '@mdx-js/react': 1.6.22_react@17.0.1
       clsx: 1.1.1
-      docusaurus-plugin-sass: 0.1.12_@docusaurus+core@2.0.0-alpha.71
+      codemirror: 5.61.0
+      comlink: 4.3.0
+      docusaurus-plugin-sass: 0.1.12_@docusaurus+core@2.0.0-alpha.73
       fs-extra: 9.1.0
-      globby: 11.0.2
+      immer: 9.0.1
       lodash: 4.17.21
       prism-react-renderer: 1.2.0_react@17.0.1
       react: 17.0.1
+      react-codemirror2: 7.2.1_codemirror@5.61.0+react@17.0.1
       react-dom: 17.0.1_react@17.0.1
       react-icons: 4.2.0_react@17.0.1
+      react-simple-resizer: 2.1.0_react-dom@17.0.1+react@17.0.1
+      react-use: 17.2.3_react-dom@17.0.1+react@17.0.1
+      serialize-error: 8.1.0
+      use-debounce: 6.0.1_react@17.0.1
+      use-immer: 0.5.1_immer@9.0.1+react@17.0.1
     devDependencies:
-      '@docusaurus/module-type-aliases': 2.0.0-alpha.71
+      '@docusaurus/module-type-aliases': 2.0.0-alpha.73
       '@tsconfig/docusaurus': 1.0.2
+      '@types/codemirror': 0.0.109
       '@types/lodash': 4.14.168
       '@types/react': 17.0.3
       '@types/react-helmet': 6.1.0
       '@types/react-router-dom': 5.1.7
+      '@types/systemjs': 6.1.0
+      '@types/webpack-env': 1.16.0
+      babel-plugin-lodash: 3.3.4
+      globby: 11.0.2
+      lodash-webpack-plugin: 0.11.6
       raw-loader: 4.0.2
       read-pkg: 5.2.0
       resolve-pkg: 2.0.0
+      rollup: 2.45.2
       sass-loader: 10.1.1
       typedoc: 0.20.30_typescript@4.2.3
-      typedoc-plugin-markdown: 3.5.0_typedoc@0.20.30
+      typedoc-plugin-markdown: 3.7.2_typedoc@0.20.30
       typescript: 4.2.3
     specifiers:
-      '@docusaurus/core': 2.0.0-alpha.71
-      '@docusaurus/module-type-aliases': 2.0.0-alpha.71
-      '@docusaurus/preset-classic': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73
+      '@docusaurus/module-type-aliases': 2.0.0-alpha.73
+      '@docusaurus/preset-classic': 2.0.0-alpha.73
       '@mdx-js/react': ^1.6.22
       '@tsconfig/docusaurus': ^1.0.2
+      '@types/codemirror': ^0.0.109
       '@types/lodash': ^4.14.167
       '@types/react': ^17.0.0
       '@types/react-helmet': ^6.1.0
       '@types/react-router-dom': ^5.1.7
+      '@types/systemjs': ^6.1.0
+      '@types/webpack-env': ^1.16.0
+      babel-plugin-lodash: ^3.3.4
       clsx: ^1.1.1
+      codemirror: ^5.61.0
+      comlink: ^4.3.0
       docusaurus-plugin-sass: ^0.1.12
       fs-extra: ^9.1.0
       globby: ^11.0.2
+      immer: ^9.0.1
       lodash: ^4.17.20
+      lodash-webpack-plugin: ^0.11.6
       prism-react-renderer: ^1.1.1
       raw-loader: ^4.0.2
       react: ^17.0.1
+      react-codemirror2: ^7.2.1
       react-dom: ^17.0.1
       react-icons: ^4.1.0
+      react-simple-resizer: ^2.1.0
+      react-use: ^17.2.3
       read-pkg: ^5.2.0
       resolve-pkg: ^2.0.0
+      rollup: ^2.45.2
       sass-loader: ^10.0.2
+      serialize-error: ^8.1.0
       typedoc: ^0.20.28
-      typedoc-plugin-markdown: ~3.5.0
+      typedoc-plugin-markdown: ~3.7.2
       typescript: ^4.1.3
+      use-debounce: ^6.0.1
+      use-immer: ^0.5.1
 lockfileVersion: 5.2
 packages:
   /@algolia/autocomplete-core/1.0.0-alpha.44:
@@ -641,7 +689,7 @@ packages:
       '@babel/parser': 7.13.9
       '@babel/template': 7.12.13
       '@babel/traverse': 7.13.0
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
       convert-source-map: 1.7.0
       debug: 4.3.1
       gensync: 1.0.0-beta.2
@@ -679,7 +727,7 @@ packages:
       integrity: sha512-oYapIySGw1zGhEFRd6lzWNLWFX2s5dA/jm+Pw/+59ZdXtjyIuwlXbrId22Md0rgZVop+aVoqow2riXhBLNyuQg==
   /@babel/generator/7.13.9:
     dependencies:
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
       jsesc: 2.5.2
       source-map: 0.5.7
     resolution:
@@ -731,7 +779,7 @@ packages:
     dependencies:
       '@babel/core': 7.13.8
       '@babel/helper-compilation-targets': 7.13.8_@babel+core@7.13.8
-      '@babel/helper-module-imports': 7.12.13
+      '@babel/helper-module-imports': 7.13.12
       '@babel/helper-plugin-utils': 7.13.0
       '@babel/traverse': 7.13.0
       debug: 4.3.1
@@ -751,12 +799,12 @@ packages:
     dependencies:
       '@babel/helper-get-function-arity': 7.12.13
       '@babel/template': 7.12.13
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
     resolution:
       integrity: sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==
   /@babel/helper-get-function-arity/7.12.13:
     dependencies:
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
     resolution:
       integrity: sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==
   /@babel/helper-hoist-variables/7.13.0:
@@ -775,6 +823,11 @@ packages:
       '@babel/types': 7.13.0
     resolution:
       integrity: sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==
+  /@babel/helper-module-imports/7.13.12:
+    dependencies:
+      '@babel/types': 7.13.14
+    resolution:
+      integrity: sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
   /@babel/helper-module-transforms/7.13.0:
     dependencies:
       '@babel/helper-module-imports': 7.12.13
@@ -822,12 +875,12 @@ packages:
       integrity: sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==
   /@babel/helper-skip-transparent-expression-wrappers/7.12.1:
     dependencies:
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
     resolution:
       integrity: sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==
   /@babel/helper-split-export-declaration/7.12.13:
     dependencies:
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
     resolution:
       integrity: sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==
   /@babel/helper-validator-identifier/7.12.11:
@@ -1413,10 +1466,10 @@ packages:
     dependencies:
       '@babel/core': 7.13.8
       '@babel/helper-annotate-as-pure': 7.12.13
-      '@babel/helper-module-imports': 7.12.13
+      '@babel/helper-module-imports': 7.13.12
       '@babel/helper-plugin-utils': 7.13.0
       '@babel/plugin-syntax-jsx': 7.12.13_@babel+core@7.13.8
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
     peerDependencies:
       '@babel/core': ^7.0.0-0
     resolution:
@@ -1450,7 +1503,7 @@ packages:
   /@babel/plugin-transform-runtime/7.13.9_@babel+core@7.13.8:
     dependencies:
       '@babel/core': 7.13.8
-      '@babel/helper-module-imports': 7.12.13
+      '@babel/helper-module-imports': 7.13.12
       '@babel/helper-plugin-utils': 7.13.0
       babel-plugin-polyfill-corejs2: 0.1.10_@babel+core@7.13.8
       babel-plugin-polyfill-corejs3: 0.1.7_@babel+core@7.13.8
@@ -1661,6 +1714,12 @@ packages:
     dev: false
     resolution:
       integrity: sha512-p6WSr71+5u/VBf1KDS/Y4dK3ZwbV+DD6wQO3X2EbUVluEOiyXUk09DzcwSaUH4WomYXrEPC+i2rqzuthhZhOJw==
+  /@babel/runtime/7.13.17:
+    dependencies:
+      regenerator-runtime: 0.13.7
+    dev: false
+    resolution:
+      integrity: sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==
   /@babel/runtime/7.13.9:
     dependencies:
       regenerator-runtime: 0.13.7
@@ -1680,7 +1739,7 @@ packages:
       '@babel/helper-function-name': 7.12.13
       '@babel/helper-split-export-declaration': 7.12.13
       '@babel/parser': 7.13.9
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
       debug: 4.3.1
       globals: 11.12.0
       lodash: 4.17.21
@@ -1693,6 +1752,13 @@ packages:
       to-fast-properties: 2.0.0
     resolution:
       integrity: sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==
+  /@babel/types/7.13.14:
+    dependencies:
+      '@babel/helper-validator-identifier': 7.12.11
+      lodash: 4.17.21
+      to-fast-properties: 2.0.0
+    resolution:
+      integrity: sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==
   /@bcoe/v8-coverage/0.2.3:
     dev: true
     resolution:
@@ -1899,12 +1965,6 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
-  /@csstools/convert-colors/1.4.0:
-    dev: false
-    engines:
-      node: '>=4.0.0'
-    resolution:
-      integrity: sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
   /@discoveryjs/json-ext/0.5.2:
     dev: true
     engines:
@@ -1931,7 +1991,7 @@ packages:
       react-dom: '>= 16.8.0 < 18.0.0'
     resolution:
       integrity: sha512-XOhaUsxiq62umpGMfgzey45H6Id7qOa2DyJJOIpZHEeo5uFVkxc7Qamng+ETdUIn9ql8tWRPzjTh5OAtjJAgxw==
-  /@docusaurus/core/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+  /@docusaurus/core/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
       '@babel/core': 7.13.8
       '@babel/generator': 7.13.9
@@ -1942,17 +2002,17 @@ packages:
       '@babel/preset-env': 7.13.9_@babel+core@7.13.8
       '@babel/preset-react': 7.12.13_@babel+core@7.13.8
       '@babel/preset-typescript': 7.13.0_@babel+core@7.13.8
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       '@babel/runtime-corejs3': 7.13.9
       '@babel/traverse': 7.13.0
-      '@docusaurus/cssnano-preset': 2.0.0-alpha.71
+      '@docusaurus/cssnano-preset': 2.0.0-alpha.73
       '@docusaurus/react-loadable': 5.5.0_react@17.0.1
-      '@docusaurus/types': 2.0.0-alpha.71
-      '@docusaurus/utils': 2.0.0-alpha.71
-      '@docusaurus/utils-validation': 2.0.0-alpha.71
+      '@docusaurus/types': 2.0.0-alpha.73
+      '@docusaurus/utils': 2.0.0-alpha.73
+      '@docusaurus/utils-validation': 2.0.0-alpha.73
       '@endiliey/static-site-generator-webpack-plugin': 4.0.0
       '@svgr/webpack': 5.5.0
-      autoprefixer: 10.2.5_postcss@8.2.8
+      autoprefixer: 10.2.5_postcss@8.2.12
       babel-loader: 8.2.2_10cd6a7d04848c96a6e299bf325db7c9
       babel-plugin-dynamic-import-node: 2.3.0
       boxen: 5.0.0
@@ -1971,13 +2031,12 @@ packages:
       file-loader: 6.2.0_webpack@4.46.0
       fs-extra: 9.1.0
       github-slugger: 1.3.0
-      globby: 11.0.2
+      globby: 11.0.3
       html-minifier-terser: 5.1.1
       html-tags: 3.1.0
       html-webpack-plugin: 4.5.2_webpack@4.46.0
       import-fresh: 3.3.0
       is-root: 2.1.0
-      joi: 17.4.0
       leven: 3.1.0
       lodash: 4.17.21
       mini-css-extract-plugin: 0.8.2_webpack@4.46.0
@@ -1986,10 +2045,9 @@ packages:
       null-loader: 4.0.1_webpack@4.46.0
       optimize-css-assets-webpack-plugin: 5.0.4_webpack@4.46.0
       pnp-webpack-plugin: 1.6.4_typescript@4.2.3
-      postcss: 8.2.8
-      postcss-loader: 4.2.0_postcss@8.2.8+webpack@4.46.0
-      postcss-preset-env: 6.7.0
-      prompts: 2.4.0
+      postcss: 8.2.12
+      postcss-loader: 4.2.0_postcss@8.2.12+webpack@4.46.0
+      prompts: 2.4.1
       react: 17.0.1
       react-dev-utils: 11.0.4
       react-dom: 17.0.1_react@17.0.1
@@ -2000,11 +2058,13 @@ packages:
       react-router-config: 5.1.1_react-router@5.2.0+react@17.0.1
       react-router-dom: 5.2.0_react@17.0.1
       resolve-pathname: 3.0.0
+      rtl-detect: 1.0.2
       semver: 7.3.4
       serve-handler: 6.1.3
       shelljs: 0.8.4
       std-env: 2.3.0
       terser-webpack-plugin: 4.2.3_webpack@4.46.0
+      tslib: 2.2.0
       update-notifier: 5.1.0
       url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0
       wait-on: 5.2.1
@@ -2022,28 +2082,27 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-/NgI/asRz69KZ11juSpOzITeOxgNH4Tuyti5xha0wz12MPgB76fPjefcgEURrWGYBW3lvVhY36jK1pPgdbI9Qg==
-  /@docusaurus/cssnano-preset/2.0.0-alpha.71:
+      integrity: sha512-gUF5UOcy/5XmPWFOpLdiilI+7FEEYtvunB62xnvwEp/SNRvoL9PAs9dI2mFaDkme1RmUtPMXKzPZxwlntFnA9A==
+  /@docusaurus/cssnano-preset/2.0.0-alpha.73:
     dependencies:
       cssnano-preset-advanced: 4.0.7
       postcss: 7.0.35
       postcss-sort-media-queries: 1.31.21
     dev: false
     resolution:
-      integrity: sha512-MAoCfubVuNFpPW878j6nXlhSfV+BYS0Z8gxLKqSsZvaURoXiCF3dFzO2KAOqEqw1lKESuKoLL+Odvb8jfPgjWg==
-  /@docusaurus/mdx-loader/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-8DregwCCcKl5h3WAwK/NuTQ8BpXiKUnF8owVE4XAS7OnHXSobKfxz0wpF2Jzi0G8TdVfnZzPrXelnWWDL1mc3g==
+  /@docusaurus/mdx-loader/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
       '@babel/parser': 7.13.9
       '@babel/traverse': 7.13.0
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/utils': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/utils': 2.0.0-alpha.73
       '@mdx-js/mdx': 1.6.22
       '@mdx-js/react': 1.6.22_react@17.0.1
       escape-html: 1.0.3
       file-loader: 6.2.0_webpack@4.46.0
       fs-extra: 9.1.0
       github-slugger: 1.3.0
-      gray-matter: 4.0.2
       loader-utils: 2.0.0
       mdast-util-to-string: 2.0.0
       react: 17.0.1
@@ -2061,29 +2120,29 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-4Zp+T0IpuyX+If/Z1lhzwWd2aMkAkjUn8CNiqHU7IIf3lbyjWDVJvYAgJhmoVojvxdxGB0c5gc4uGROhZOJmng==
-  /@docusaurus/module-type-aliases/2.0.0-alpha.71:
+      integrity: sha512-cteoaLe8rFLULAjRy8iOyKwo9LBupu6VPEvQbjhrM23EWap15LD5b66MmfRsCS8ubTdB1i5uYTVhwg1j41Fxjw==
+  /@docusaurus/module-type-aliases/2.0.0-alpha.73:
     dev: true
     resolution:
-      integrity: sha512-7f38VZ1z6rD3SuSOjovCxlLa1ZiAEbcArSf022ga8QQJmlS1dAP1o23MLE1wvurfaGiluQomzjwVAsafgHKUFw==
-  /@docusaurus/plugin-content-blog/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-JHhRRxcn9Gwn1sFqaZtx0Yna8SeDBZypjtjuu1nulXXwaWr1L8fc1RHp1PXy+DNXQ3XkTMEqCX6HFniG271ipg==
+  /@docusaurus/plugin-content-blog/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/mdx-loader': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/types': 2.0.0-alpha.71
-      '@docusaurus/utils': 2.0.0-alpha.71
-      '@docusaurus/utils-validation': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/mdx-loader': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/types': 2.0.0-alpha.73
+      '@docusaurus/utils': 2.0.0-alpha.73
+      '@docusaurus/utils-validation': 2.0.0-alpha.73
       chalk: 4.1.0
       feed: 4.2.2
       fs-extra: 9.1.0
-      globby: 11.0.2
-      joi: 17.4.0
+      globby: 11.0.3
       loader-utils: 1.4.0
       lodash: 4.17.21
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
       reading-time: 1.3.0
       remark-admonitions: 1.2.1
+      tslib: 2.2.0
       webpack: 4.46.0
     dev: false
     engines:
@@ -2093,26 +2152,28 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-/hLuKZliHnpC4fSiEfg5Wai1UyOwjgiHj4ZN2Mv9Su9wLQuDR33rhiJUXKOiVYHeBtlaSacdEPbovrUV+CO4gw==
-  /@docusaurus/plugin-content-docs/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-1G5lV+hIhZJPS+Z1/QWEVBB26MtTpgA3V9nMXrivet88LBi97X/O4auat4gzCd1ZAAAIssBqvjJZux3iYYuTZg==
+  /@docusaurus/plugin-content-docs/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/mdx-loader': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/types': 2.0.0-alpha.71
-      '@docusaurus/utils': 2.0.0-alpha.71
-      '@docusaurus/utils-validation': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/mdx-loader': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/types': 2.0.0-alpha.73
+      '@docusaurus/utils': 2.0.0-alpha.73
+      '@docusaurus/utils-validation': 2.0.0-alpha.73
       chalk: 4.1.0
+      combine-promises: 1.1.0
       execa: 5.0.0
       fs-extra: 9.1.0
-      globby: 11.0.2
+      globby: 11.0.3
       import-fresh: 3.3.0
-      joi: 17.4.0
+      js-yaml: 4.1.0
       loader-utils: 1.4.0
       lodash: 4.17.21
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
       remark-admonitions: 1.2.1
       shelljs: 0.8.4
+      tslib: 2.2.0
       utility-types: 3.10.0
       webpack: 4.46.0
     dev: false
@@ -2123,16 +2184,15 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-27VvmeZh43vy9VIjA7BO84vZ8R+hwB/3iltvCqxw0cp2TQrJIBabbhGEitP5XxbWsRJErbaComCUsp25GU96vw==
-  /@docusaurus/plugin-content-pages/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-exMBKvTgJ//AazsXNYx/rSlIOt/8nMebOYNd0YMOrY1HNH3SFiTMln2nf6DhZlqDnC+e3DHxBV1mJJnZCef8xQ==
+  /@docusaurus/plugin-content-pages/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/mdx-loader': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/types': 2.0.0-alpha.71
-      '@docusaurus/utils': 2.0.0-alpha.71
-      '@docusaurus/utils-validation': 2.0.0-alpha.71
-      globby: 11.0.2
-      joi: 17.4.0
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/mdx-loader': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/types': 2.0.0-alpha.73
+      '@docusaurus/utils': 2.0.0-alpha.73
+      '@docusaurus/utils-validation': 2.0.0-alpha.73
+      globby: 11.0.3
       loader-utils: 1.4.0
       lodash: 4.17.21
       minimatch: 3.0.4
@@ -2140,6 +2200,7 @@ packages:
       react-dom: 17.0.1_react@17.0.1
       remark-admonitions: 1.2.1
       slash: 3.0.0
+      tslib: 2.2.0
       webpack: 4.46.0
     dev: false
     engines:
@@ -2149,15 +2210,16 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-JnZQDMh2YLvY+CsGACGYlLrUeaIWky8yrBHlLsfWXj6mVZ4GjqEDVg2Ci2VuVGtPV83rwp+udIFteUdCNUV9hg==
-  /@docusaurus/plugin-debug/2.0.0-alpha.71_1d18ec48d56e323c6ed0865312478831:
+      integrity: sha512-/q9B+N3ICWlnI5mm58lMXhzWit7IP3ntY1snfy8qD98wEfWKLZwefdxnB1HI+qJXBQq5uQTWIe9lULaN/gbDzw==
+  /@docusaurus/plugin-debug/2.0.0-alpha.73_1d18ec48d56e323c6ed0865312478831:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/types': 2.0.0-alpha.71
-      '@docusaurus/utils': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/types': 2.0.0-alpha.73
+      '@docusaurus/utils': 2.0.0-alpha.73
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
       react-json-view: 1.21.2_e342ee84aa4c58264377ee43e7695221
+      tslib: 2.2.0
     dev: false
     engines:
       node: '>=12.13.0'
@@ -2167,10 +2229,10 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-MnLQao7nZQ2riQUfYU1iyRZQJUPumGMTkaB2H61lJhGnTn70KSVGG+f8rIShCt7pCkJjk/5yk3hjoBIP1qA42Q==
-  /@docusaurus/plugin-google-analytics/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-EdovLNi8oxLFZDi/7lfLwfmgbaWFR/wOZqOYuyrHJto/TlqCCIOziX4dHYqUPHItbnwV1PGGR49DUrqyNYuLBQ==
+  /@docusaurus/plugin-google-analytics/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
     dev: false
@@ -2181,10 +2243,10 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-rMU6VYQPeJjt2Xa47WEQq69cdXVaKzV3IOeBsAJyLPcsZ1yEABMgBXsus2UYGszyp7b96BYm02jHl+skaqaPNA==
-  /@docusaurus/plugin-google-gtag/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-t3Noo80wT412IMI4vnapWVpfm5PBhYPQpXQxVIZap61K2CT1lAkelyi43vREWt80HwCjXh5HvoR2TxCdGwi6nA==
+  /@docusaurus/plugin-google-gtag/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
     dev: false
@@ -2195,17 +2257,18 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-cXUWKqHxYN84is56VxLzX7Ik32iKP2D19E9Rrbl+JigpN7/+m4hZwx3h5X11xHF3QMWv0Ok/dw0yIruBrhr3YA==
-  /@docusaurus/plugin-sitemap/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-DqrmV4eW81DzlAJrqMiki+m4tTUlpPkUL7sNemVjzqVl4616tng7wa93FcNw3sZbVm1Kp69Hep3uN2OgRmEqRQ==
+  /@docusaurus/plugin-sitemap/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/types': 2.0.0-alpha.71
-      '@docusaurus/utils': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/types': 2.0.0-alpha.73
+      '@docusaurus/utils': 2.0.0-alpha.73
+      '@docusaurus/utils-validation': 2.0.0-alpha.73
       fs-extra: 9.1.0
-      joi: 17.4.0
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
       sitemap: 6.4.0
+      tslib: 2.2.0
     dev: false
     engines:
       node: '>=12.13.0'
@@ -2214,19 +2277,19 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-G6g31/mzOuQxN50ErOjDx0KTC4WqayOuk4jFVmRLfuNU0WW6hsCZevAVJppdvi3BzDlGVCVaYafF0G9QnbaeoA==
-  /@docusaurus/preset-classic/2.0.0-alpha.71_1d18ec48d56e323c6ed0865312478831:
-    dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-blog': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-docs': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-pages': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-debug': 2.0.0-alpha.71_1d18ec48d56e323c6ed0865312478831
-      '@docusaurus/plugin-google-analytics': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-google-gtag': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-sitemap': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/theme-classic': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/theme-search-algolia': 2.0.0-alpha.71_1d18ec48d56e323c6ed0865312478831
+      integrity: sha512-APBI/l8T5lsfEYvRZ0ipzZlUlKX/4x47w3WfIvlqS78vk7WHAXa0tEp3S8FK36TqeTjmdmCP0F4DJCY7UJZCSw==
+  /@docusaurus/preset-classic/2.0.0-alpha.73_7f53837c1fb7715cbd51937d57b7f4b7:
+    dependencies:
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-blog': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-docs': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-pages': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-debug': 2.0.0-alpha.73_1d18ec48d56e323c6ed0865312478831
+      '@docusaurus/plugin-google-analytics': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-google-gtag': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-sitemap': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/theme-classic': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/theme-search-algolia': 2.0.0-alpha.73_7f53837c1fb7715cbd51937d57b7f4b7
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
     dev: false
@@ -2234,11 +2297,12 @@ packages:
       node: '>=12.13.0'
     peerDependencies:
       '@types/react': '*'
+      prism-react-renderer: '*'
       react: ^16.8.4 || ^17.0.0
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-NTAGdJv6aBA+yWg+zJF7apmwqfp6JG6ZrdD9NjprayHnIpRO/ejw3ClHpuEEnk1fKfJXtVt70XmcQIYakijPYw==
+      integrity: sha512-eXgwPVMXA9K9FmGrXwOeec9Uqr0KXMdHvx3C5Ocm4E7b/mylMGwykOgR9iaSLYdVY12EKrO7T9Lm3Z37Gll7Zw==
   /@docusaurus/react-loadable/5.5.0_react@17.0.1:
     dependencies:
       prop-types: 15.7.2
@@ -2248,26 +2312,24 @@ packages:
       react: '*'
     resolution:
       integrity: sha512-Ld/kwUE6yATIOTLq3JCsWiTa/drisajwKqBQ2Rw6IcT+sFsKfYek8F2jSH8f68AT73xX97UehduZeCSlnuCBIg==
-  /@docusaurus/theme-classic/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
-    dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-blog': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-docs': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-pages': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/theme-common': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/types': 2.0.0-alpha.71
-      '@docusaurus/utils': 2.0.0-alpha.71
-      '@docusaurus/utils-validation': 2.0.0-alpha.71
+  /@docusaurus/theme-classic/2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1:
+    dependencies:
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-blog': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-docs': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-pages': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/theme-common': 2.0.0-alpha.73_950b23211a18350ace83519f2593392e
+      '@docusaurus/types': 2.0.0-alpha.73
+      '@docusaurus/utils': 2.0.0-alpha.73
+      '@docusaurus/utils-validation': 2.0.0-alpha.73
       '@mdx-js/mdx': 1.6.22
       '@mdx-js/react': 1.6.22_react@17.0.1
-      '@types/react-toggle': 4.0.2
       chalk: 4.1.0
       clsx: 1.1.1
       copy-text-to-clipboard: 3.0.1
       fs-extra: 9.1.0
-      globby: 11.0.2
-      infima: 0.2.0-alpha.20
-      joi: 17.4.0
+      globby: 11.0.3
+      infima: 0.2.0-alpha.22
       lodash: 4.17.21
       parse-numeric-range: 1.2.0
       postcss: 7.0.35
@@ -2277,7 +2339,6 @@ packages:
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
       react-router-dom: 5.2.0_react@17.0.1
-      react-toggle: 4.1.1_738bb8f954d12b6833bcb33fcfa7848e
       rtlcss: 2.6.2
     dev: false
     engines:
@@ -2287,36 +2348,39 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-f5abm+KgoMm+B5uYRoLK/wmQA69lUH0JOfP+KalhoUifw2m9Ly/alcrHe/d4XGfCEGZLx5RLAEc/Xj0m4uaNAg==
-  /@docusaurus/theme-common/2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1:
+      integrity: sha512-SVjq3xPIFQ/Uzs6WJn+8Gm1b47jLV7YBbcUXpIGd3NBKj16yZml9t7YNpos6Vt7Y5mCVhIP4IqWYJshArw6Aog==
+  /@docusaurus/theme-common/2.0.0-alpha.73_950b23211a18350ace83519f2593392e:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-blog': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-docs': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/plugin-content-pages': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/types': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-blog': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-docs': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/plugin-content-pages': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/types': 2.0.0-alpha.73
+      prism-react-renderer: 1.2.0_react@17.0.1
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
+      tslib: 2.2.0
     dev: false
     engines:
       node: '>=12.13.0'
     peerDependencies:
+      prism-react-renderer: ^1.1.1
       react: ^16.8.4 || ^17.0.0
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-XI7wC5mN//05UEjv0LJDTfsgl4rQZW4GgSoRWm9pexrSC/kiSgvjTLrD2yiIu3wvt+fR/lF05MS5N9QzivhCdw==
-  /@docusaurus/theme-search-algolia/2.0.0-alpha.71_1d18ec48d56e323c6ed0865312478831:
+      integrity: sha512-ePteJFQkQRkK+J1FKDhmczq+yiEmORTW9YJgYceQVq+9L6unr0XxeOBBNC27BxSabUI+A9YXjQbtdmOHFM8LKA==
+  /@docusaurus/theme-search-algolia/2.0.0-alpha.73_7f53837c1fb7715cbd51937d57b7f4b7:
     dependencies:
       '@docsearch/react': 3.0.0-alpha.33_e342ee84aa4c58264377ee43e7695221
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/theme-common': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
-      '@docusaurus/utils': 2.0.0-alpha.71
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/theme-common': 2.0.0-alpha.73_950b23211a18350ace83519f2593392e
+      '@docusaurus/utils': 2.0.0-alpha.73
+      '@docusaurus/utils-validation': 2.0.0-alpha.73
       algoliasearch: 4.8.5
       algoliasearch-helper: 3.4.4_algoliasearch@4.8.5
       clsx: 1.1.1
       eta: 1.12.1
-      joi: 17.4.0
       lodash: 4.17.21
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
@@ -2325,47 +2389,49 @@ packages:
       node: '>=12.13.0'
     peerDependencies:
       '@types/react': '*'
+      prism-react-renderer: '*'
       react: ^16.8.4 || ^17.0.0
       react-dom: ^16.8.4 || ^17.0.0
       typescript: '*'
     resolution:
-      integrity: sha512-pHtuSvott+AdUTiLAu3VjjMNfPAoodTITd8xWiUFlCmED9oEu7aswM1YkwQMAWKguueJ8PdslKHqU1E9FK+70A==
-  /@docusaurus/types/2.0.0-alpha.71:
+      integrity: sha512-SMfeGYZb85GIcuUjefMN+RunLDK+x6ETnlGuY9LU2S6bvoaZ4YTcqBPOt0iyZ1LH+XZmFuz78lFDW1gklaNmfg==
+  /@docusaurus/types/2.0.0-alpha.73:
     dependencies:
-      '@types/webpack': 4.41.26
+      '@types/webpack': 4.41.27
       commander: 5.1.0
+      joi: 17.4.0
       querystring: 0.2.0
       webpack-merge: 4.2.2
     dev: false
     resolution:
-      integrity: sha512-LpYcaYU2NdAfYGKFIlXUtXw3R8HuQpyyDwdXk4dxN7VQXKO1dHDIl9JinuI5p9+95Go0F76T9qNrElAxNIORzQ==
-  /@docusaurus/utils-validation/2.0.0-alpha.71:
+      integrity: sha512-+q7q178LS2mMTGD/U5KgloLGKtG8yzpqj+NOp2QprjFVqTfkwTFcMhN33PTZTUcDunMDuUt+LOo9hi9Vz9+r5Q==
+  /@docusaurus/utils-validation/2.0.0-alpha.73:
     dependencies:
-      '@docusaurus/utils': 2.0.0-alpha.71
+      '@docusaurus/utils': 2.0.0-alpha.73
       chalk: 4.1.0
       joi: 17.4.0
+      tslib: 2.2.0
     dev: false
     engines:
       node: '>=12.13.0'
     resolution:
-      integrity: sha512-+bps3QZrZ72OWmH8DhC1PsZBn2uWJWEOKAqM6Y/c/24Ka+ptUzUVfCwb62YKhZZiitXp2JgmAsLq3ly9aVdD7w==
-  /@docusaurus/utils/2.0.0-alpha.71:
+      integrity: sha512-A36kKC+tCy/MGXdaK7emH2CHyHKru/+Td9zCm6fvNdNbu+dDNvEddTZ3ecjB0zNdDZM25Er4+KIo9GV3vnJ8Rg==
+  /@docusaurus/utils/2.0.0-alpha.73:
     dependencies:
-      '@docusaurus/types': 2.0.0-alpha.71
+      '@docusaurus/types': 2.0.0-alpha.73
       '@types/github-slugger': 1.3.0
       chalk: 4.1.0
       escape-string-regexp: 4.0.0
       fs-extra: 9.1.0
       gray-matter: 4.0.2
-      intl: 1.2.5
-      intl-locales-supported: 1.8.12
       lodash: 4.17.21
       resolve-pathname: 3.0.0
+      tslib: 2.2.0
     dev: false
     engines:
       node: '>=12.13.0'
     resolution:
-      integrity: sha512-X0mTSG9vF5ZIC705yVm9YFMucxnp15PgcPYjPMMN/qFNf1lDrxIc3DV4giDBOcQYaQ5kIq9appm3VL/G3qIftg==
+      integrity: sha512-kUHnE1b/3yNWNAn0V8owLgCrxqyxfolkCbkPFfnRT+4m+agyn3riEcr+ZVObs7K9nxCla8oklX5RKSJGzyqWww==
   /@endiliey/static-site-generator-webpack-plugin/4.0.0:
     dependencies:
       bluebird: 3.7.2
@@ -2681,6 +2747,39 @@ packages:
       node: '>= 10.14.2'
     resolution:
       integrity: sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+  /@kosko/env/2.0.1:
+    dependencies:
+      '@kosko/require': 2.0.2
+      debug: 4.3.1
+      deepmerge: 4.2.2
+      is-plain-object: 5.0.0
+      tslib: 2.2.0
+    dev: false
+    engines:
+      node: '>=10'
+    resolution:
+      integrity: sha512-4XsKXKppgyrM35HwD1nAUWbb3wxCc89Aec6s+onSbiL4B7jesDI8n/pSQZEBbn5MePJh5O0DTEjCnIBEjzdCaQ==
+  /@kosko/generate/1.2.1:
+    dependencies:
+      '@kosko/require': 2.0.2
+      debug: 4.3.1
+      fast-glob: 3.2.5
+      fs-extra: 9.1.0
+      js-yaml: 4.1.0
+      tslib: 2.2.0
+    dev: false
+    engines:
+      node: '>=10'
+    resolution:
+      integrity: sha512-sblRjvJP6vDfFT1wq8bvt6Az1ZpKnLC+Gs+tjM7fPuxoCpu7nS7LyDFyTRhMM4O7h6aR/VDhOSDVNJ0oLw1qLw==
+  /@kosko/require/2.0.2:
+    dependencies:
+      resolve: 1.20.0
+    dev: false
+    engines:
+      node: '>=10'
+    resolution:
+      integrity: sha512-pewGQxNtaj/piJYHbiV4jXXRVS+Hcz9wv0bVNwOL1lz1IqlKS20tsjvkuzENQG2MMX2cJq3JDQ3RYNPrN32Q3Q==
   /@kubernetes-models/base/1.5.2:
     dependencies:
       '@kubernetes-models/validate': 1.4.2
@@ -2953,7 +3052,7 @@ packages:
       integrity: sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==
   /@svgr/hast-util-to-babel-ast/5.5.0:
     dependencies:
-      '@babel/types': 7.13.0
+      '@babel/types': 7.13.14
     dev: false
     engines:
       node: '>=10'
@@ -3046,6 +3145,12 @@ packages:
     dev: true
     resolution:
       integrity: sha512-1TdA9IXOy4sdqn8vgieQ6GZAiHiPNrOiO1s2GJjuYPw4QVY7gYoVjkW049avj33Ez7IcIvu43hQsMsoUFbCn2g==
+  /@types/codemirror/0.0.109:
+    dependencies:
+      '@types/tern': 0.23.3
+    dev: true
+    resolution:
+      integrity: sha512-cSdiHeeLjvGn649lRTNeYrVCDOgDrtP+bDDSFDd1TF+i0jKGPDRozno2NOJ9lTniso+taiv4kiVS8dgM8Jm5lg==
   /@types/debug/4.1.5:
     dev: true
     resolution:
@@ -3068,6 +3173,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==
+  /@types/estree/0.0.47:
+    dev: true
+    resolution:
+      integrity: sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==
   /@types/exit/0.1.31:
     dependencies:
       '@types/node': 14.14.32
@@ -3167,6 +3276,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-eeWwWjlqxvBxc4oQdkueW5OF/gtfSceKk4OnOAGlUSwS/liBRtZppbJuz1YkgbrbfGOoeBHun9fOvXnjNwrSOw==
+  /@types/js-cookie/2.2.6:
+    dev: false
+    resolution:
+      integrity: sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==
   /@types/js-yaml/4.0.0:
     dev: true
     resolution:
@@ -3207,6 +3320,7 @@ packages:
     resolution:
       integrity: sha512-xRCgeE0Q4pT5UZ189TJ3SpYuX/QGl6QIAOAIeDSbAVAd2gX1NxSZup4jNVK7cxIeP8KDSbJgcckun495isP1jQ==
   /@types/node/14.14.32:
+    dev: true
     resolution:
       integrity: sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==
   /@types/node/14.14.37:
@@ -3228,6 +3342,7 @@ packages:
     resolution:
       integrity: sha512-i99hy7Ki19EqVOl77WplDrvgNugHnsSjECVR/wUrzw2TJXz1zlUfT2ngGckR6xN7yFYaijsMAqPkOLx9HgUqHg==
   /@types/prop-types/15.7.3:
+    dev: true
     resolution:
       integrity: sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
   /@types/puppeteer/5.4.3:
@@ -3260,26 +3375,22 @@ packages:
     dev: true
     resolution:
       integrity: sha512-0bhXQwHYfMeJlCh7mGhc0VJTRm0Gk+Z8T00aiP4702mDUuLs9SMhnd2DitpjWFjdOecx2UXtICK14H9iMnziGA==
-  /@types/react-toggle/4.0.2:
-    dependencies:
-      '@types/react': 17.0.3
-    dev: false
-    resolution:
-      integrity: sha512-sHqfoKFnL0YU2+OC4meNEC8Ptx9FE8/+nFeFvNcdBa6ANA8KpAzj3R9JN8GtrvlLgjKDoYgI7iILgXYcTPo2IA==
   /@types/react/17.0.3:
     dependencies:
       '@types/prop-types': 15.7.3
       '@types/scheduler': 0.16.1
       csstype: 3.0.7
+    dev: true
     resolution:
       integrity: sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
   /@types/sax/1.2.1:
     dependencies:
-      '@types/node': 14.14.32
+      '@types/node': 14.14.37
     dev: false
     resolution:
       integrity: sha512-dqYdvN7Sbw8QT/0Ci5rhjE4/iCMJEM0Y9rHpCu+gGXD9Lwbz28t6HI2yegsB6BoV1sShRMU6lAmAcgRjmFy7LA==
   /@types/scheduler/0.16.1:
+    dev: true
     resolution:
       integrity: sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
   /@types/semver/6.2.2:
@@ -3304,10 +3415,20 @@ packages:
     dev: true
     resolution:
       integrity: sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
-  /@types/tapable/1.0.6:
+  /@types/systemjs/6.1.0:
+    dev: true
+    resolution:
+      integrity: sha512-akhlviqwowzRNiz3ooAbkjvyMO8cikBqap9z/0yfvMAb6vIsp91Rfox67qtgIhZosWP01MVSTwsgSFYWo4SWQA==
+  /@types/tapable/1.0.7:
     dev: false
     resolution:
-      integrity: sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
+      integrity: sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==
+  /@types/tern/0.23.3:
+    dependencies:
+      '@types/estree': 0.0.47
+    dev: true
+    resolution:
+      integrity: sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==
   /@types/tmp/0.2.0:
     dev: true
     resolution:
@@ -3322,6 +3443,10 @@ packages:
     dev: false
     resolution:
       integrity: sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
+  /@types/webpack-env/1.16.0:
+    dev: true
+    resolution:
+      integrity: sha512-Fx+NpfOO0CpeYX2g9bkvX8O5qh9wrU1sOF4g8sft4Mu7z+qfe387YlyY8w8daDyDsKY5vUxM0yxkAYnbkRbZEw==
   /@types/webpack-sources/2.1.0:
     dependencies:
       '@types/node': 14.14.37
@@ -3330,17 +3455,17 @@ packages:
     dev: false
     resolution:
       integrity: sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==
-  /@types/webpack/4.41.26:
+  /@types/webpack/4.41.27:
     dependencies:
       '@types/anymatch': 1.3.1
-      '@types/node': 14.14.32
-      '@types/tapable': 1.0.6
+      '@types/node': 14.14.37
+      '@types/tapable': 1.0.7
       '@types/uglify-js': 3.13.0
       '@types/webpack-sources': 2.1.0
       source-map: 0.6.1
     dev: false
     resolution:
-      integrity: sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA==
+      integrity: sha512-wK/oi5gcHi72VMTbOaQ70VcDxSQ1uX8S2tukBK9ARuGXrYM/+u4ou73roc7trXDNmCxCoerE8zruQqX/wuHszA==
   /@types/yargs-parser/20.2.0:
     dev: true
     resolution:
@@ -3813,6 +3938,10 @@ packages:
         optional: true
     resolution:
       integrity: sha512-0qXvpeYO6vaNoRBI52/UsbcaBydJCggoBBnIo/ovQQdn6fug0BgwsjorV1hVS7fMqGVTZGcVxv8334gjmbj5hw==
+  /@xobotyi/scrollbar-width/1.9.5:
+    dev: false
+    resolution:
+      integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
   /@xtuc/ieee754/1.2.0:
     resolution:
       integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
@@ -3893,13 +4022,13 @@ packages:
     resolution:
       integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
   /acorn/8.0.5:
+    dev: true
     engines:
       node: '>=0.4.0'
     hasBin: true
     resolution:
       integrity: sha512-v+DieK/HJkJOpFBETDJioequtc3PfxsWMaxIdIwujtF7FEV/MAyDQLlm6/zPvr7Mix07mLh6ccVwIsloceodlg==
   /acorn/8.1.0:
-    dev: true
     engines:
       node: '>=0.4.0'
     hasBin: true
@@ -4094,7 +4223,7 @@ packages:
   /anymatch/3.1.1:
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.2.2
+      picomatch: 2.2.3
     engines:
       node: '>= 8'
     resolution:
@@ -4285,14 +4414,14 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-  /autoprefixer/10.2.5_postcss@8.2.8:
+  /autoprefixer/10.2.5_postcss@8.2.12:
     dependencies:
       browserslist: 4.16.3
-      caniuse-lite: 1.0.30001197
+      caniuse-lite: 1.0.30001208
       colorette: 1.2.2
       fraction.js: 4.0.13
       normalize-range: 0.1.2
-      postcss: 8.2.8
+      postcss: 8.2.12
       postcss-value-parser: 4.1.0
     dev: false
     engines:
@@ -4305,7 +4434,7 @@ packages:
   /autoprefixer/9.8.6:
     dependencies:
       browserslist: 4.16.3
-      caniuse-lite: 1.0.30001197
+      caniuse-lite: 1.0.30001208
       colorette: 1.2.2
       normalize-range: 0.1.2
       num2fraction: 1.2.2
@@ -4411,6 +4540,16 @@ packages:
       node: '>= 10.14.2'
     resolution:
       integrity: sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
+  /babel-plugin-lodash/3.3.4:
+    dependencies:
+      '@babel/helper-module-imports': 7.13.12
+      '@babel/types': 7.13.14
+      glob: 7.1.6
+      lodash: 4.17.21
+      require-package-name: 2.0.1
+    dev: true
+    resolution:
+      integrity: sha512-yDZLjK7TCkWl1gpBeBGmuaDIFhZKmkoL+Cu2MUUjv5VxUZx/z7tBGBCBcQs5RI1Bkz5LLmNdjx7paOyQtMovyg==
   /babel-plugin-polyfill-corejs2/0.1.10_@babel+core@7.13.8:
     dependencies:
       '@babel/compat-data': 7.13.8
@@ -4742,8 +4881,8 @@ packages:
       integrity: sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
   /browserslist/4.14.2:
     dependencies:
-      caniuse-lite: 1.0.30001197
-      electron-to-chromium: 1.3.682
+      caniuse-lite: 1.0.30001208
+      electron-to-chromium: 1.3.712
       escalade: 3.1.1
       node-releases: 1.1.71
     dev: false
@@ -4842,13 +4981,13 @@ packages:
       move-concurrently: 1.0.1
       promise-inflight: 1.0.1
       rimraf: 2.7.1
-      ssri: 6.0.1
+      ssri: 6.0.2
       unique-filename: 1.1.1
-      y18n: 4.0.1
+      y18n: 4.0.3
     dev: false
     resolution:
       integrity: sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
-  /cacache/15.0.5:
+  /cacache/15.0.6:
     dependencies:
       '@npmcli/move-file': 1.1.2
       chownr: 2.0.0
@@ -4871,7 +5010,7 @@ packages:
     engines:
       node: '>= 10'
     resolution:
-      integrity: sha512-lloiL22n7sOjEEXdL8NAjTgv9a1u43xICE9/203qonkZUCj5X1UEWIdf2/Y0d6QcCtMzbKQyhrcDbdvlZTs/+A==
+      integrity: sha512-g1WYDMct/jzW+JdWEyjaX2zoBkZ6ZT9VpOyp2I/VMtDsNLffNat3kqPFfi1eDRSK9/SuKGyORDHcQMcPF8sQ/w==
   /cache-base/1.0.1:
     dependencies:
       collection-visit: 1.0.0
@@ -5011,10 +5150,6 @@ packages:
       lodash.uniq: 4.5.0
     resolution:
       integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
-  /caniuse-lite/1.0.30001197:
-    dev: false
-    resolution:
-      integrity: sha512-8aE+sqBqtXz4G8g35Eg/XEaFr2N7rd/VQ6eABGBmNtcB8cN6qNJhMi6oSFy4UWWZgqgL3filHT8Nha4meu3tsw==
   /caniuse-lite/1.0.30001208:
     resolution:
       integrity: sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA==
@@ -5168,16 +5303,7 @@ packages:
       node: '>=10'
     resolution:
       integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-  /chrome-trace-event/1.0.2:
-    dependencies:
-      tslib: 1.14.1
-    dev: false
-    engines:
-      node: '>=6.0'
-    resolution:
-      integrity: sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
   /chrome-trace-event/1.0.3:
-    dev: true
     engines:
       node: '>=6.0'
     resolution:
@@ -5209,10 +5335,6 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  /classnames/2.2.6:
-    dev: false
-    resolution:
-      integrity: sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
   /clean-css/4.2.3:
     dependencies:
       source-map: 0.6.1
@@ -5391,6 +5513,10 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+  /codemirror/5.61.0:
+    dev: false
+    resolution:
+      integrity: sha512-D3wYH90tYY1BsKlUe0oNj2JAhQ9TepkD51auk3N7q+4uz7A/cgJ5JsWHreT0PqieW1QhOuqxQ2reCXV1YXzecg==
   /collapse-white-space/1.0.6:
     dev: false
     resolution:
@@ -5446,6 +5572,12 @@ packages:
       node: '>=0.1.90'
     resolution:
       integrity: sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
+  /combine-promises/1.1.0:
+    dev: false
+    engines:
+      node: '>=10'
+    resolution:
+      integrity: sha512-ZI9jvcLDxqwaXEixOhArm3r7ReIivsXkpbyEWyeOhzz1QS0iSgBPnWvEqvIQtYyamGCYA88gFhmUrs9hrrQ0pg==
   /combined-stream/1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -5453,6 +5585,10 @@ packages:
       node: '>= 0.8'
     resolution:
       integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  /comlink/4.3.0:
+    dev: false
+    resolution:
+      integrity: sha512-mu4KKKNuW8TvkfpW/H88HBPeILubBS6T94BdD1VWBXNXfiyqVtwUCVNO1GeNOBTsIswzsMjWlycYr+77F5b84g==
   /comma-separated-tokens/1.0.8:
     dev: false
     resolution:
@@ -5631,13 +5767,19 @@ packages:
       node: '>=12'
     resolution:
       integrity: sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==
+  /copy-to-clipboard/3.3.1:
+    dependencies:
+      toggle-selection: 1.0.6
+    dev: false
+    resolution:
+      integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
   /copy-webpack-plugin/6.4.1_webpack@4.46.0:
     dependencies:
-      cacache: 15.0.5
+      cacache: 15.0.6
       fast-glob: 3.2.5
       find-cache-dir: 3.3.1
       glob-parent: 5.1.2
-      globby: 11.0.2
+      globby: 11.0.3
       loader-utils: 2.0.0
       normalize-path: 3.0.0
       p-limit: 3.1.0
@@ -5798,15 +5940,6 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
-  /css-blank-pseudo/0.1.4:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    hasBin: true
-    resolution:
-      integrity: sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==
   /css-color-names/0.0.4:
     resolution:
       integrity: sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
@@ -5818,27 +5951,24 @@ packages:
       node: '>4'
     resolution:
       integrity: sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
-  /css-has-pseudo/0.10.0:
+  /css-in-js-utils/2.0.1:
     dependencies:
-      postcss: 7.0.35
-      postcss-selector-parser: 5.0.0
+      hyphenate-style-name: 1.0.4
+      isobject: 3.0.1
     dev: false
-    engines:
-      node: '>=6.0.0'
-    hasBin: true
     resolution:
-      integrity: sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==
+      integrity: sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
   /css-loader/5.1.1_webpack@4.46.0:
     dependencies:
       camelcase: 6.2.0
       cssesc: 3.0.0
-      icss-utils: 5.1.0_postcss@8.2.8
+      icss-utils: 5.1.0_postcss@8.2.12
       loader-utils: 2.0.0
-      postcss: 8.2.8
-      postcss-modules-extract-imports: 3.0.0_postcss@8.2.8
-      postcss-modules-local-by-default: 4.0.0_postcss@8.2.8
-      postcss-modules-scope: 3.0.0_postcss@8.2.8
-      postcss-modules-values: 4.0.0_postcss@8.2.8
+      postcss: 8.2.12
+      postcss-modules-extract-imports: 3.0.0_postcss@8.2.12
+      postcss-modules-local-by-default: 4.0.0_postcss@8.2.12
+      postcss-modules-scope: 3.0.0_postcss@8.2.12
+      postcss-modules-values: 4.0.0_postcss@8.2.12
       postcss-value-parser: 4.1.0
       schema-utils: 3.0.0
       semver: 7.3.4
@@ -5861,15 +5991,6 @@ packages:
     dev: true
     resolution:
       integrity: sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=
-  /css-prefers-color-scheme/3.1.1:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    hasBin: true
-    resolution:
-      integrity: sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
   /css-select-base-adapter/0.1.1:
     resolution:
       integrity: sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
@@ -5905,14 +6026,14 @@ packages:
       node: '>=8.0.0'
     resolution:
       integrity: sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
-  /css-tree/1.1.2:
+  /css-tree/1.1.3:
     dependencies:
       mdn-data: 2.0.14
       source-map: 0.6.1
     engines:
       node: '>=8.0.0'
     resolution:
-      integrity: sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==
+      integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
   /css-what/2.1.3:
     dev: false
     resolution:
@@ -5922,17 +6043,6 @@ packages:
       node: '>= 6'
     resolution:
       integrity: sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
-  /cssdb/4.4.0:
-    dev: false
-    resolution:
-      integrity: sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==
-  /cssesc/2.0.0:
-    dev: false
-    engines:
-      node: '>=4'
-    hasBin: true
-    resolution:
-      integrity: sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
   /cssesc/3.0.0:
     engines:
       node: '>=4'
@@ -5942,7 +6052,7 @@ packages:
   /cssnano-preset-advanced/4.0.7:
     dependencies:
       autoprefixer: 9.8.6
-      cssnano-preset-default: 4.0.7
+      cssnano-preset-default: 4.0.8
       postcss-discard-unused: 4.0.1
       postcss-merge-idents: 4.0.1
       postcss-reduce-idents: 4.0.2
@@ -5952,43 +6062,6 @@ packages:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-j1O5/DQnaAqEyFFQfC+Z/vRlLXL3LxJHN+lvsfYqr7KgPH74t69+Rsy2yXkovWNaJjZYBpdz2Fj8ab2nH7pZXw==
-  /cssnano-preset-default/4.0.7:
-    dependencies:
-      css-declaration-sorter: 4.0.1
-      cssnano-util-raw-cache: 4.0.1
-      postcss: 7.0.35
-      postcss-calc: 7.0.5
-      postcss-colormin: 4.0.3
-      postcss-convert-values: 4.0.1
-      postcss-discard-comments: 4.0.2
-      postcss-discard-duplicates: 4.0.2
-      postcss-discard-empty: 4.0.1
-      postcss-discard-overridden: 4.0.1
-      postcss-merge-longhand: 4.0.11
-      postcss-merge-rules: 4.0.3
-      postcss-minify-font-values: 4.0.2
-      postcss-minify-gradients: 4.0.2
-      postcss-minify-params: 4.0.2
-      postcss-minify-selectors: 4.0.2
-      postcss-normalize-charset: 4.0.1
-      postcss-normalize-display-values: 4.0.2
-      postcss-normalize-positions: 4.0.2
-      postcss-normalize-repeat-style: 4.0.2
-      postcss-normalize-string: 4.0.2
-      postcss-normalize-timing-functions: 4.0.2
-      postcss-normalize-unicode: 4.0.1
-      postcss-normalize-url: 4.0.1
-      postcss-normalize-whitespace: 4.0.2
-      postcss-ordered-values: 4.1.2
-      postcss-reduce-initial: 4.0.3
-      postcss-reduce-transforms: 4.0.2
-      postcss-svgo: 4.0.2
-      postcss-unique-selectors: 4.0.1
-    dev: false
-    engines:
-      node: '>=6.9.0'
-    resolution:
-      integrity: sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
   /cssnano-preset-default/4.0.8:
     dependencies:
       css-declaration-sorter: 4.0.1
@@ -6021,7 +6094,6 @@ packages:
       postcss-reduce-transforms: 4.0.2
       postcss-svgo: 4.0.3
       postcss-unique-selectors: 4.0.1
-    dev: true
     engines:
       node: '>=6.9.0'
     resolution:
@@ -6048,31 +6120,19 @@ packages:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
-  /cssnano/4.1.10:
-    dependencies:
-      cosmiconfig: 5.2.1
-      cssnano-preset-default: 4.0.7
-      is-resolvable: 1.1.0
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.9.0'
-    resolution:
-      integrity: sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
   /cssnano/4.1.11:
     dependencies:
       cosmiconfig: 5.2.1
       cssnano-preset-default: 4.0.8
       is-resolvable: 1.1.0
       postcss: 7.0.35
-    dev: true
     engines:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
   /csso/4.2.0:
     dependencies:
-      css-tree: 1.1.2
+      css-tree: 1.1.3
     engines:
       node: '>=8.0.0'
     resolution:
@@ -6100,8 +6160,13 @@ packages:
     resolution:
       integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
   /csstype/3.0.7:
+    dev: true
     resolution:
       integrity: sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
+  /csstype/3.0.8:
+    dev: false
+    resolution:
+      integrity: sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
   /csv-generate/3.3.0:
     dev: true
     resolution:
@@ -6355,7 +6420,7 @@ packages:
       integrity: sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
   /del/6.0.0:
     dependencies:
-      globby: 11.0.2
+      globby: 11.0.3
       graceful-fs: 4.2.6
       is-glob: 4.0.1
       is-path-cwd: 2.2.0
@@ -6503,9 +6568,9 @@ packages:
       node: '>=6.0.0'
     resolution:
       integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  /docusaurus-plugin-sass/0.1.12_@docusaurus+core@2.0.0-alpha.71:
+  /docusaurus-plugin-sass/0.1.12_@docusaurus+core@2.0.0-alpha.73:
     dependencies:
-      '@docusaurus/core': 2.0.0-alpha.71_5347ba9dae72bc17e95cc7756ff465f1
+      '@docusaurus/core': 2.0.0-alpha.73_5347ba9dae72bc17e95cc7756ff465f1
       node-sass: 4.14.1
       sass-loader: 10.1.1_node-sass@4.14.1
     dev: false
@@ -6580,7 +6645,7 @@ packages:
       integrity: sha512-/6/kmsGlMY4Tup/nGVutdrK9yQi4YjWVcVeoQmixpzjOUK1U7pQkvAPHBJeUxOgxF0J8f8lwCJSlCfD0V4CMGQ==
   /domutils/1.5.1:
     dependencies:
-      dom-serializer: 0.1.1
+      dom-serializer: 0.2.2
       domelementtype: 1.3.1
     dev: false
     resolution:
@@ -6660,10 +6725,6 @@ packages:
   /ee-first/1.1.1:
     resolution:
       integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
-  /electron-to-chromium/1.3.682:
-    dev: false
-    resolution:
-      integrity: sha512-zok2y37qR00U14uM6qBz/3iIjWHom2eRfC2S1StA0RslP7x34jX+j4mxv80t8OEOHLJPVG54ZPeaFxEI7gPrwg==
   /electron-to-chromium/1.3.712:
     resolution:
       integrity: sha512-3kRVibBeCM4vsgoHHGKHmPocLqtFAGTrebXxxtgKs87hNUzXrX2NuS3jnBys7IozCnw7viQlozxKkmty2KNfrw==
@@ -6764,6 +6825,12 @@ packages:
       is-arrayish: 0.2.1
     resolution:
       integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  /error-stack-parser/2.0.6:
+    dependencies:
+      stackframe: 1.2.0
+    dev: false
+    resolution:
+      integrity: sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
   /es-abstract/1.18.0:
     dependencies:
       call-bind: 1.0.2
@@ -7419,8 +7486,8 @@ packages:
       '@nodelib/fs.walk': 1.2.6
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.2
-      picomatch: 2.2.2
+      micromatch: 4.0.4
+      picomatch: 2.2.3
     engines:
       node: '>=8'
     resolution:
@@ -7431,6 +7498,10 @@ packages:
   /fast-levenshtein/2.0.6:
     resolution:
       integrity: sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+  /fast-shallow-equal/1.0.0:
+    dev: false
+    resolution:
+      integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
   /fast-url-parser/1.1.3:
     dependencies:
       punycode: 1.4.1
@@ -7441,6 +7512,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
+  /fastest-stable-stringify/2.0.2:
+    dev: false
+    resolution:
+      integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
   /fastparse/1.1.2:
     dev: true
     resolution:
@@ -7720,10 +7795,6 @@ packages:
     dev: true
     resolution:
       integrity: sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
-  /flatten/1.0.3:
-    dev: false
-    resolution:
-      integrity: sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
   /flush-write-stream/1.1.1:
     dependencies:
       inherits: 2.0.4
@@ -8155,10 +8226,24 @@ packages:
       ignore: 5.1.8
       merge2: 1.4.1
       slash: 3.0.0
+    dev: true
     engines:
       node: '>=10'
     resolution:
       integrity: sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==
+  /globby/11.0.3:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.2.5
+      ignore: 5.1.8
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: false
+    engines:
+      node: '>=10'
+    resolution:
+      integrity: sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
   /globby/6.1.0:
     dependencies:
       array-union: 1.0.2
@@ -8473,7 +8558,7 @@ packages:
       integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
   /history/4.10.1:
     dependencies:
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       loose-envify: 1.4.0
       resolve-pathname: 3.0.0
       tiny-invariant: 1.1.0
@@ -8520,10 +8605,6 @@ packages:
   /hsla-regex/1.0.0:
     resolution:
       integrity: sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-  /html-comment-regex/1.1.2:
-    dev: false
-    resolution:
-      integrity: sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
   /html-encoding-sniffer/1.0.2:
     dependencies:
       whatwg-encoding: 1.0.5
@@ -8578,8 +8659,8 @@ packages:
   /html-webpack-plugin/4.5.2_webpack@4.46.0:
     dependencies:
       '@types/html-minifier-terser': 5.1.1
-      '@types/tapable': 1.0.6
-      '@types/webpack': 4.41.26
+      '@types/tapable': 1.0.7
+      '@types/webpack': 4.41.27
       html-minifier-terser: 5.1.1
       loader-utils: 1.4.0
       lodash: 4.17.21
@@ -8763,6 +8844,10 @@ packages:
     requiresBuild: true
     resolution:
       integrity: sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==
+  /hyphenate-style-name/1.0.4:
+    dev: false
+    resolution:
+      integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
   /iconv-lite/0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -8774,9 +8859,9 @@ packages:
     dev: true
     resolution:
       integrity: sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
-  /icss-utils/5.1.0_postcss@8.2.8:
+  /icss-utils/5.1.0_postcss@8.2.12:
     dependencies:
-      postcss: 8.2.8
+      postcss: 8.2.12
     dev: false
     engines:
       node: ^10 || ^12 || >= 14
@@ -8806,6 +8891,10 @@ packages:
     dev: false
     resolution:
       integrity: sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==
+  /immer/9.0.1:
+    dev: false
+    resolution:
+      integrity: sha512-7CCw1DSgr8kKYXTYOI1qMM/f5qxT5vIVMeGLDCDX8CSxsggr1Sjdoha4OhsP0AZ1UvWbyZlILHvLjaynuu02Mg==
   /import-fresh/2.0.0:
     dependencies:
       caller-path: 2.0.0
@@ -8876,12 +8965,12 @@ packages:
     dev: false
     resolution:
       integrity: sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-  /infima/0.2.0-alpha.20:
+  /infima/0.2.0-alpha.22:
     dev: false
     engines:
       node: '>=12'
     resolution:
-      integrity: sha512-HSAyIW4/iMq85dJC8PircFA530yEsxqSK/3lXjhSZY+4dms84Izi6sKGdl5V0mDxVaikjAt1oexITtj8T4B0KQ==
+      integrity: sha512-wKOWp4C1lTFG/h54UWD3Uf6VEsj5qYehM3ZVio3GBzIQuY8B3cTiwG7ZRNoobg+LvdQA21p5BJTugpTLQJLIrA==
   /inflight/1.0.6:
     dependencies:
       once: 1.4.0
@@ -8910,6 +8999,12 @@ packages:
     dev: false
     resolution:
       integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+  /inline-style-prefixer/6.0.0:
+    dependencies:
+      css-in-js-utils: 2.0.1
+    dev: false
+    resolution:
+      integrity: sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==
   /internal-ip/4.3.0:
     dependencies:
       default-gateway: 4.2.0
@@ -8939,15 +9034,6 @@ packages:
       node: '>= 0.10'
     resolution:
       integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
-  /intl-locales-supported/1.8.12:
-    deprecated: bad publish
-    dev: false
-    resolution:
-      integrity: sha512-FJPl7p1LYO/C+LpwlDcvVpq7AeFTdFgwnq1JjdNYKjb51xkIxssXRR8LaA0fJFogjwRRztqw1ahgSJMSZsSFdw==
-  /intl/1.2.5:
-    dev: false
-    resolution:
-      integrity: sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=
   /ip-regex/2.1.0:
     engines:
       node: '>=4'
@@ -9342,14 +9428,6 @@ packages:
     dev: true
     resolution:
       integrity: sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=
-  /is-svg/3.0.0:
-    dependencies:
-      html-comment-regex: 1.1.2
-    dev: false
-    engines:
-      node: '>=4'
-    resolution:
-      integrity: sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
   /is-symbol/1.0.3:
     dependencies:
       has-symbols: 1.0.2
@@ -10029,6 +10107,10 @@ packages:
     dev: false
     resolution:
       integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
+  /js-cookie/2.2.1:
+    dev: false
+    resolution:
+      integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
   /js-tokens/4.0.0:
     resolution:
       integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -10046,6 +10128,13 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==
+  /js-yaml/4.1.0:
+    dependencies:
+      argparse: 2.0.1
+    dev: false
+    hasBin: true
+    resolution:
+      integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
   /jsbn/0.1.1:
     resolution:
       integrity: sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
@@ -10462,10 +10551,14 @@ packages:
       node: '>=10'
     resolution:
       integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
-  /lodash._reinterpolate/3.0.0:
-    dev: false
+  /lodash-webpack-plugin/0.11.6:
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+    peerDependencies:
+      webpack: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.1.0
     resolution:
-      integrity: sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+      integrity: sha512-nsHN/+IxZK/C425vGC8pAxkKJ8KQH2+NJnhDul14zYNWr6HJcA95w+oRR7Cp0oZpOdMplDZXmjVROp8prPk7ig==
   /lodash.assignin/4.2.0:
     dev: false
     resolution:
@@ -10552,19 +10645,6 @@ packages:
     dev: true
     resolution:
       integrity: sha1-lDbjTtJgk+1/+uGTYUQ1CRXZrdg=
-  /lodash.template/4.5.0:
-    dependencies:
-      lodash._reinterpolate: 3.0.0
-      lodash.templatesettings: 4.2.0
-    dev: false
-    resolution:
-      integrity: sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
-  /lodash.templatesettings/4.2.0:
-    dependencies:
-      lodash._reinterpolate: 3.0.0
-    dev: false
-    resolution:
-      integrity: sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
   /lodash.toarray/4.4.0:
     dev: false
     resolution:
@@ -10892,10 +10972,19 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.2.2
+    dev: true
     engines:
       node: '>=8'
     resolution:
       integrity: sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  /micromatch/4.0.4:
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.2.3
+    engines:
+      node: '>=8.6'
+    resolution:
+      integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
   /miller-rabin/4.0.1:
     dependencies:
       bn.js: 4.12.0
@@ -10910,6 +10999,7 @@ packages:
     resolution:
       integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==
   /mime-db/1.46.0:
+    dev: true
     engines:
       node: '>= 0.6'
     resolution:
@@ -10930,6 +11020,7 @@ packages:
   /mime-types/2.1.29:
     dependencies:
       mime-db: 1.46.0
+    dev: true
     engines:
       node: '>= 0.6'
     resolution:
@@ -10978,7 +11069,7 @@ packages:
       integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
   /mini-create-react-context/0.4.1_prop-types@15.7.2+react@17.0.1:
     dependencies:
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       prop-types: 15.7.2
       react: 17.0.1
       tiny-warning: 1.0.3
@@ -11163,13 +11254,31 @@ packages:
   /nan/2.14.2:
     resolution:
       integrity: sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
-  /nanoid/3.1.20:
+  /nano-css/5.3.1_react-dom@17.0.1+react@17.0.1:
+    dependencies:
+      css-tree: 1.1.3
+      csstype: 3.0.8
+      fastest-stable-stringify: 2.0.2
+      inline-style-prefixer: 6.0.0
+      react: 17.0.1
+      react-dom: 17.0.1_react@17.0.1
+      rtl-css-js: 1.14.1
+      sourcemap-codec: 1.4.8
+      stacktrace-js: 2.0.2
+      stylis: 4.0.10
+    dev: false
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    resolution:
+      integrity: sha512-ENPIyNzANQRyYVvb62ajDd7PAyIgS2LIUnT9ewih4yrXSZX4hKoUwssy8WjUH++kEOA5wUTMgNnV7ko5n34kUA==
+  /nanoid/3.1.22:
     dev: false
     engines:
       node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1
     hasBin: true
     resolution:
-      integrity: sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+      integrity: sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
   /nanomatch/1.2.13:
     dependencies:
       arr-diff: 4.0.0
@@ -11627,7 +11736,7 @@ packages:
       integrity: sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
   /optimize-css-assets-webpack-plugin/5.0.4_webpack@4.46.0:
     dependencies:
-      cssnano: 4.1.10
+      cssnano: 4.1.11
       last-call-webpack-plugin: 3.0.0
       webpack: 4.46.0
     dev: false
@@ -12116,10 +12225,16 @@ packages:
     resolution:
       integrity: sha1-GN4vl+S/epVRrXURlCtUlverpmA=
   /picomatch/2.2.2:
+    dev: true
     engines:
       node: '>=8.6'
     resolution:
       integrity: sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+  /picomatch/2.2.3:
+    engines:
+      node: '>=8.6'
+    resolution:
+      integrity: sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
   /pidtree/0.3.1:
     dev: true
     engines:
@@ -12235,13 +12350,6 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-  /postcss-attribute-case-insensitive/4.0.2:
-    dependencies:
-      postcss: 7.0.35
-      postcss-selector-parser: 6.0.4
-    dev: false
-    resolution:
-      integrity: sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==
   /postcss-calc/7.0.5:
     dependencies:
       postcss: 7.0.35
@@ -12249,53 +12357,6 @@ packages:
       postcss-value-parser: 4.1.0
     resolution:
       integrity: sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
-  /postcss-color-functional-notation/2.0.1:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
-  /postcss-color-gray/5.0.0:
-    dependencies:
-      '@csstools/convert-colors': 1.4.0
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
-  /postcss-color-hex-alpha/5.0.3:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==
-  /postcss-color-mod-function/3.0.3:
-    dependencies:
-      '@csstools/convert-colors': 1.4.0
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
-  /postcss-color-rebeccapurple/4.0.1:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
   /postcss-colormin/4.0.3:
     dependencies:
       browserslist: 4.16.3
@@ -12315,41 +12376,6 @@ packages:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
-  /postcss-custom-media/7.0.8:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==
-  /postcss-custom-properties/8.0.11:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
-  /postcss-custom-selectors/5.1.2:
-    dependencies:
-      postcss: 7.0.35
-      postcss-selector-parser: 5.0.0
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
-  /postcss-dir-pseudo-class/5.0.0:
-    dependencies:
-      postcss: 7.0.35
-      postcss-selector-parser: 5.0.0
-    dev: false
-    engines:
-      node: '>=4.0.0'
-    resolution:
-      integrity: sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
   /postcss-discard-comments/4.0.2:
     dependencies:
       postcss: 7.0.35
@@ -12388,86 +12414,12 @@ packages:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-/3vq4LU0bLH2Lj4NYN7BTf2caly0flUB7Xtrk9a5K3yLuXMkHMqMO/x3sDq8W2b1eQFSCyY0IVz2L+0HP8kUUA==
-  /postcss-double-position-gradients/1.0.0:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
-  /postcss-env-function/2.0.2:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
-  /postcss-focus-visible/4.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
-  /postcss-focus-within/3.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
-  /postcss-font-variant/4.0.1:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    resolution:
-      integrity: sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==
-  /postcss-gap-properties/2.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
-  /postcss-image-set-function/3.0.1:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
-  /postcss-initial/3.0.2:
-    dependencies:
-      lodash.template: 4.5.0
-      postcss: 7.0.35
-    dev: false
-    resolution:
-      integrity: sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==
-  /postcss-lab-function/2.0.1:
-    dependencies:
-      '@csstools/convert-colors': 1.4.0
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
-  /postcss-loader/4.2.0_postcss@8.2.8+webpack@4.46.0:
+  /postcss-loader/4.2.0_postcss@8.2.12+webpack@4.46.0:
     dependencies:
       cosmiconfig: 7.0.0
       klona: 2.0.4
       loader-utils: 2.0.0
-      postcss: 8.2.8
+      postcss: 8.2.12
       schema-utils: 3.0.0
       semver: 7.3.4
       webpack: 4.46.0
@@ -12479,22 +12431,6 @@ packages:
       webpack: ^4.0.0 || ^5.0.0
     resolution:
       integrity: sha512-mqgScxHqbiz1yxbnNcPdKYo/6aVt+XExURmEbQlviFVWogDbM4AJ0A/B+ZBpYsJrTRxKw7HyRazg9x0Q9SWwLA==
-  /postcss-logical/3.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
-  /postcss-media-minmax/4.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
   /postcss-merge-idents/4.0.1:
     dependencies:
       cssnano-util-same-parent: 4.0.1
@@ -12574,9 +12510,9 @@ packages:
     dev: true
     resolution:
       integrity: sha1-thTJcgvmgW6u41+zpfqh26agXds=
-  /postcss-modules-extract-imports/3.0.0_postcss@8.2.8:
+  /postcss-modules-extract-imports/3.0.0_postcss@8.2.12:
     dependencies:
-      postcss: 8.2.8
+      postcss: 8.2.12
     dev: false
     engines:
       node: ^10 || ^12 || >= 14
@@ -12591,10 +12527,10 @@ packages:
     dev: true
     resolution:
       integrity: sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
-  /postcss-modules-local-by-default/4.0.0_postcss@8.2.8:
+  /postcss-modules-local-by-default/4.0.0_postcss@8.2.12:
     dependencies:
-      icss-utils: 5.1.0_postcss@8.2.8
-      postcss: 8.2.8
+      icss-utils: 5.1.0_postcss@8.2.12
+      postcss: 8.2.12
       postcss-selector-parser: 6.0.4
       postcss-value-parser: 4.1.0
     dev: false
@@ -12611,9 +12547,9 @@ packages:
     dev: true
     resolution:
       integrity: sha1-1upkmUx5+XtipytCb75gVqGUu5A=
-  /postcss-modules-scope/3.0.0_postcss@8.2.8:
+  /postcss-modules-scope/3.0.0_postcss@8.2.12:
     dependencies:
-      postcss: 8.2.8
+      postcss: 8.2.12
       postcss-selector-parser: 6.0.4
     dev: false
     engines:
@@ -12629,10 +12565,10 @@ packages:
     dev: true
     resolution:
       integrity: sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
-  /postcss-modules-values/4.0.0_postcss@8.2.8:
+  /postcss-modules-values/4.0.0_postcss@8.2.12:
     dependencies:
-      icss-utils: 5.1.0_postcss@8.2.8
-      postcss: 8.2.8
+      icss-utils: 5.1.0_postcss@8.2.12
+      postcss: 8.2.12
     dev: false
     engines:
       node: ^10 || ^12 || >= 14
@@ -12640,14 +12576,6 @@ packages:
       postcss: ^8.1.0
     resolution:
       integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
-  /postcss-nesting/7.0.1:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
   /postcss-normalize-charset/4.0.1:
     dependencies:
       postcss: 7.0.35
@@ -12738,82 +12666,6 @@ packages:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
-  /postcss-overflow-shorthand/2.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
-  /postcss-page-break/2.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    resolution:
-      integrity: sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
-  /postcss-place/4.0.1:
-    dependencies:
-      postcss: 7.0.35
-      postcss-values-parser: 2.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
-  /postcss-preset-env/6.7.0:
-    dependencies:
-      autoprefixer: 9.8.6
-      browserslist: 4.16.3
-      caniuse-lite: 1.0.30001197
-      css-blank-pseudo: 0.1.4
-      css-has-pseudo: 0.10.0
-      css-prefers-color-scheme: 3.1.1
-      cssdb: 4.4.0
-      postcss: 7.0.35
-      postcss-attribute-case-insensitive: 4.0.2
-      postcss-color-functional-notation: 2.0.1
-      postcss-color-gray: 5.0.0
-      postcss-color-hex-alpha: 5.0.3
-      postcss-color-mod-function: 3.0.3
-      postcss-color-rebeccapurple: 4.0.1
-      postcss-custom-media: 7.0.8
-      postcss-custom-properties: 8.0.11
-      postcss-custom-selectors: 5.1.2
-      postcss-dir-pseudo-class: 5.0.0
-      postcss-double-position-gradients: 1.0.0
-      postcss-env-function: 2.0.2
-      postcss-focus-visible: 4.0.0
-      postcss-focus-within: 3.0.0
-      postcss-font-variant: 4.0.1
-      postcss-gap-properties: 2.0.0
-      postcss-image-set-function: 3.0.1
-      postcss-initial: 3.0.2
-      postcss-lab-function: 2.0.1
-      postcss-logical: 3.0.0
-      postcss-media-minmax: 4.0.0
-      postcss-nesting: 7.0.1
-      postcss-overflow-shorthand: 2.0.0
-      postcss-page-break: 2.0.0
-      postcss-place: 4.0.1
-      postcss-pseudo-class-any-link: 6.0.0
-      postcss-replace-overflow-wrap: 3.0.0
-      postcss-selector-matches: 4.0.0
-      postcss-selector-not: 4.0.1
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==
-  /postcss-pseudo-class-any-link/6.0.0:
-    dependencies:
-      postcss: 7.0.35
-      postcss-selector-parser: 5.0.0
-    dev: false
-    engines:
-      node: '>=6.0.0'
-    resolution:
-      integrity: sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
   /postcss-reduce-idents/4.0.2:
     dependencies:
       postcss: 7.0.35
@@ -12843,26 +12695,6 @@ packages:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
-  /postcss-replace-overflow-wrap/3.0.0:
-    dependencies:
-      postcss: 7.0.35
-    dev: false
-    resolution:
-      integrity: sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
-  /postcss-selector-matches/4.0.0:
-    dependencies:
-      balanced-match: 1.0.0
-      postcss: 7.0.35
-    dev: false
-    resolution:
-      integrity: sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
-  /postcss-selector-not/4.0.1:
-    dependencies:
-      balanced-match: 1.0.0
-      postcss: 7.0.35
-    dev: false
-    resolution:
-      integrity: sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==
   /postcss-selector-parser/3.1.2:
     dependencies:
       dot-prop: 5.3.0
@@ -12872,16 +12704,6 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
-  /postcss-selector-parser/5.0.0:
-    dependencies:
-      cssesc: 2.0.0
-      indexes-of: 1.0.1
-      uniq: 1.0.1
-    dev: false
-    engines:
-      node: '>=4'
-    resolution:
-      integrity: sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
   /postcss-selector-parser/6.0.2:
     dependencies:
       cssesc: 3.0.0
@@ -12911,23 +12733,11 @@ packages:
       node: '>=8.0.0'
     resolution:
       integrity: sha512-h+HbXXfOVFeLvCJOzl/Z9SqQ25MNpG/73k71756ftisaaJy75h06/Dn6KOwC4OCMN10ewT2PXMzHV03JNKwBbg==
-  /postcss-svgo/4.0.2:
-    dependencies:
-      is-svg: 3.0.0
-      postcss: 7.0.35
-      postcss-value-parser: 3.3.1
-      svgo: 1.3.2
-    dev: false
-    engines:
-      node: '>=6.9.0'
-    resolution:
-      integrity: sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
   /postcss-svgo/4.0.3:
     dependencies:
       postcss: 7.0.35
       postcss-value-parser: 3.3.1
       svgo: 1.3.2
-    dev: true
     engines:
       node: '>=6.9.0'
     resolution:
@@ -12947,16 +12757,6 @@ packages:
   /postcss-value-parser/4.1.0:
     resolution:
       integrity: sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-  /postcss-values-parser/2.0.1:
-    dependencies:
-      flatten: 1.0.3
-      indexes-of: 1.0.1
-      uniq: 1.0.1
-    dev: false
-    engines:
-      node: '>=6.14.4'
-    resolution:
-      integrity: sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
   /postcss-zindex/4.0.1:
     dependencies:
       has: 1.0.3
@@ -13005,16 +12805,16 @@ packages:
       node: '>=6.0.0'
     resolution:
       integrity: sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
-  /postcss/8.2.8:
+  /postcss/8.2.12:
     dependencies:
       colorette: 1.2.2
-      nanoid: 3.1.20
+      nanoid: 3.1.22
       source-map: 0.6.1
     dev: false
     engines:
       node: ^10 || ^12 || >=14
     resolution:
-      integrity: sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==
+      integrity: sha512-BJnGT5+0q2tzvs6oQfnY2NpEJ7rIXNfBnZtQOKCIsweeWXBXeDd5k31UgTdS3d/c02ouspufn37mTaHWkJyzMQ==
   /posthtml-parser/0.4.2:
     dependencies:
       htmlparser2: 3.10.1
@@ -13200,7 +13000,6 @@ packages:
     dependencies:
       kleur: 3.0.3
       sisteransi: 1.0.5
-    dev: true
     engines:
       node: '>= 6'
     resolution:
@@ -13367,9 +13166,9 @@ packages:
   /querystringify/2.2.0:
     resolution:
       integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
-  /queue-microtask/1.2.2:
+  /queue-microtask/1.2.3:
     resolution:
-      integrity: sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==
+      integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
   /quick-lru/4.0.1:
     dev: true
     engines:
@@ -13447,6 +13246,16 @@ packages:
     dev: false
     resolution:
       integrity: sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=
+  /react-codemirror2/7.2.1_codemirror@5.61.0+react@17.0.1:
+    dependencies:
+      codemirror: 5.61.0
+      react: 17.0.1
+    dev: false
+    peerDependencies:
+      codemirror: 5.x
+      react: '>=15.5 <=16.x'
+    resolution:
+      integrity: sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==
   /react-dev-utils/11.0.4:
     dependencies:
       '@babel/code-frame': 7.10.4
@@ -13545,7 +13354,7 @@ packages:
       integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
   /react-loadable-ssr-addon/0.3.0_a36ef9e00c6a4042d75d363eaf7d686c:
     dependencies:
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       react-loadable: 5.5.0_react@17.0.1
       webpack: 4.46.0
     dev: false
@@ -13567,7 +13376,7 @@ packages:
       integrity: sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==
   /react-router-config/5.1.1_react-router@5.2.0+react@17.0.1:
     dependencies:
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       react: 17.0.1
       react-router: 5.2.0_react@17.0.1
     dev: false
@@ -13578,7 +13387,7 @@ packages:
       integrity: sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==
   /react-router-dom/5.2.0_react@17.0.1:
     dependencies:
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       history: 4.10.1
       loose-envify: 1.4.0
       prop-types: 15.7.2
@@ -13593,7 +13402,7 @@ packages:
       integrity: sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
   /react-router/5.2.0_react@17.0.1:
     dependencies:
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       history: 4.10.1
       hoist-non-react-statics: 3.3.2
       loose-envify: 1.4.0
@@ -13617,9 +13426,20 @@ packages:
       react: ^16.3.0 || ^17.0.0
     resolution:
       integrity: sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+  /react-simple-resizer/2.1.0_react-dom@17.0.1+react@17.0.1:
+    dependencies:
+      react: 17.0.1
+      react-dom: 17.0.1_react@17.0.1
+      rxjs: 6.6.7
+    dev: false
+    peerDependencies:
+      react: ^16.3.0
+      react-dom: ^16.4.2
+    resolution:
+      integrity: sha512-iiPER+vuKsW5+6+HroNnahc2Cah6UpO4w9SeuGw1pf/6p/F/vAD4+4288yJS5fLY4xJpDNEiOiRBk2kLUui6nw==
   /react-textarea-autosize/8.3.2_@types+react@17.0.3+react@17.0.1:
     dependencies:
-      '@babel/runtime': 7.13.9
+      '@babel/runtime': 7.13.17
       react: 17.0.1
       use-composed-ref: 1.1.0_react@17.0.1
       use-latest: 1.2.0_@types+react@17.0.3+react@17.0.1
@@ -13631,19 +13451,40 @@ packages:
       react: ^16.8.0 || ^17.0.0
     resolution:
       integrity: sha512-JrMWVgQSaExQByP3ggI1eA8zF4mF0+ddVuX7acUeK2V7bmrpjVOY72vmLz2IXFJSAXoY3D80nEzrn0GWajWK3Q==
-  /react-toggle/4.1.1_738bb8f954d12b6833bcb33fcfa7848e:
+  /react-universal-interface/0.6.2_react@17.0.1+tslib@2.2.0:
     dependencies:
-      classnames: 2.2.6
-      prop-types: 15.7.2
+      react: 17.0.1
+      tslib: 2.2.0
+    dev: false
+    peerDependencies:
+      react: '*'
+      tslib: '*'
+    resolution:
+      integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
+  /react-use/17.2.3_react-dom@17.0.1+react@17.0.1:
+    dependencies:
+      '@types/js-cookie': 2.2.6
+      '@xobotyi/scrollbar-width': 1.9.5
+      copy-to-clipboard: 3.3.1
+      fast-deep-equal: 3.1.3
+      fast-shallow-equal: 1.0.0
+      js-cookie: 2.2.1
+      nano-css: 5.3.1_react-dom@17.0.1+react@17.0.1
       react: 17.0.1
       react-dom: 17.0.1_react@17.0.1
+      react-universal-interface: 0.6.2_react@17.0.1+tslib@2.2.0
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.1.0
+      set-harmonic-interval: 1.0.1
+      throttle-debounce: 3.0.1
+      ts-easing: 0.2.0
+      tslib: 2.2.0
     dev: false
     peerDependencies:
-      prop-types: ^15.3.0 || ^16.0.0
-      react: ^15.3.0 || ^16.0.0
-      react-dom: ^15.3.0 || ^16.0.0
+      react: ^16.8.0  || ^17.0.0
+      react-dom: ^16.8.0  || ^17.0.0
     resolution:
-      integrity: sha512-+wXlMcSpg8SmnIXauMaZiKpR+r2wp2gMUteroejp2UTSqGTVvZLN+m9EhMzFARBKEw7KpQOwzCyfzeHeAndQGw==
+      integrity: sha512-cHLG5mwv9NSkydhlY3J1B/Z5gGzRF43QXzFaMisSaFClg0o1VeWJaYj2d9HJIiTGC+imt47FY4TpnZNRhbOyaQ==
   /react/17.0.1:
     dependencies:
       loose-envify: 1.4.0
@@ -13745,7 +13586,7 @@ packages:
       integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
   /readdirp/3.5.0:
     dependencies:
-      picomatch: 2.2.2
+      picomatch: 2.2.3
     dev: false
     engines:
       node: '>=8.10.0'
@@ -14065,9 +13906,17 @@ packages:
   /require-main-filename/2.0.0:
     resolution:
       integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+  /require-package-name/2.0.1:
+    dev: true
+    resolution:
+      integrity: sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk=
   /requires-port/1.0.0:
     resolution:
       integrity: sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+  /resize-observer-polyfill/1.5.1:
+    dev: false
+    resolution:
+      integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
   /resolve-cwd/2.0.0:
     dependencies:
       resolve-from: 3.0.0
@@ -14192,12 +14041,31 @@ packages:
       inherits: 2.0.4
     resolution:
       integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  /rollup/2.45.2:
+    dev: true
+    engines:
+      node: '>=10.0.0'
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    resolution:
+      integrity: sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==
   /rsvp/4.8.5:
     dev: true
     engines:
       node: 6.* || >= 7.*
     resolution:
       integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+  /rtl-css-js/1.14.1:
+    dependencies:
+      '@babel/runtime': 7.13.17
+    dev: false
+    resolution:
+      integrity: sha512-G9N1s/6329FpJr8k9e1U/Lg0IDWThv99sb7k0IrXHjSnubxe01h52/ajsPRafJK1/2Vqrhz3VKLe3E1dx6jS9Q==
+  /rtl-detect/1.0.2:
+    dev: false
+    resolution:
+      integrity: sha512-5X1422hvphzg2a/bo4tIDbjFjbJUOaPZwqE6dnyyxqwFqfR+tBcvfqapJr0o0VygATVCGKiODEewhZtKF+90AA==
   /rtlcss/2.6.2:
     dependencies:
       '@choojs/findup': 0.2.1
@@ -14211,7 +14079,7 @@ packages:
       integrity: sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==
   /run-parallel/1.2.0:
     dependencies:
-      queue-microtask: 1.2.2
+      queue-microtask: 1.2.3
     resolution:
       integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   /run-queue/1.0.3:
@@ -14227,10 +14095,19 @@ packages:
   /rxjs/6.6.6:
     dependencies:
       tslib: 1.14.1
+    dev: true
     engines:
       npm: '>=2.0.0'
     resolution:
       integrity: sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
+  /rxjs/6.6.7:
+    dependencies:
+      tslib: 1.14.1
+    dev: false
+    engines:
+      npm: '>=2.0.0'
+    resolution:
+      integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   /safe-buffer/5.1.2:
     resolution:
       integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -14375,6 +14252,12 @@ packages:
       node: '>= 10.13.0'
     resolution:
       integrity: sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==
+  /screenfull/5.1.0:
+    dev: false
+    engines:
+      node: '>=0.10.0'
+    resolution:
+      integrity: sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==
   /scss-tokenizer/0.2.3:
     dependencies:
       js-base64: 2.6.4
@@ -14466,6 +14349,14 @@ packages:
       node: '>= 0.8.0'
     resolution:
       integrity: sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+  /serialize-error/8.1.0:
+    dependencies:
+      type-fest: 0.20.2
+    dev: false
+    engines:
+      node: '>=10'
+    resolution:
+      integrity: sha512-3NnuWfM6vBYoy5gZFvHiYsVbafvI9vZv/+jlIigFn4oP4zjNPK3LhcY0xSCgeb1a5L8jO71Mit9LlNoi2UfDDQ==
   /serialize-javascript/4.0.0:
     dependencies:
       randombytes: 2.1.0
@@ -14537,6 +14428,12 @@ packages:
   /set-blocking/2.0.0:
     resolution:
       integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+  /set-harmonic-interval/1.0.1:
+    dev: false
+    engines:
+      node: '>=6.9'
+    resolution:
+      integrity: sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
   /set-value/2.0.1:
     dependencies:
       extend-shallow: 2.0.1
@@ -14676,7 +14573,7 @@ packages:
       integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
   /sitemap/6.4.0:
     dependencies:
-      '@types/node': 14.14.32
+      '@types/node': 14.14.37
       '@types/sax': 1.2.1
       arg: 5.0.0
       sax: 1.2.4
@@ -14820,6 +14717,12 @@ packages:
       node: '>=0.8.0'
     resolution:
       integrity: sha1-66T12pwNyZneaAMti092FzZSA2s=
+  /source-map/0.5.6:
+    dev: false
+    engines:
+      node: '>=0.10.0'
+    resolution:
+      integrity: sha1-dc449SvwczxafwwRjYEzSiu19BI=
   /source-map/0.5.7:
     engines:
       node: '>=0.10.0'
@@ -14835,6 +14738,10 @@ packages:
       node: '>= 8'
     resolution:
       integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+  /sourcemap-codec/1.4.8:
+    dev: false
+    resolution:
+      integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
   /space-separated-tokens/1.1.5:
     dev: false
     resolution:
@@ -14930,12 +14837,12 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
-  /ssri/6.0.1:
+  /ssri/6.0.2:
     dependencies:
       figgy-pudding: 3.5.2
     dev: false
     resolution:
-      integrity: sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+      integrity: sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
   /ssri/8.0.1:
     dependencies:
       minipass: 3.1.3
@@ -14947,6 +14854,12 @@ packages:
   /stable/0.1.8:
     resolution:
       integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+  /stack-generator/2.0.5:
+    dependencies:
+      stackframe: 1.2.0
+    dev: false
+    resolution:
+      integrity: sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==
   /stack-utils/1.0.4:
     dependencies:
       escape-string-regexp: 2.0.0
@@ -14963,6 +14876,25 @@ packages:
       node: '>=10'
     resolution:
       integrity: sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
+  /stackframe/1.2.0:
+    dev: false
+    resolution:
+      integrity: sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
+  /stacktrace-gps/3.0.4:
+    dependencies:
+      source-map: 0.5.6
+      stackframe: 1.2.0
+    dev: false
+    resolution:
+      integrity: sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==
+  /stacktrace-js/2.0.2:
+    dependencies:
+      error-stack-parser: 2.0.6
+      stack-generator: 2.0.5
+      stacktrace-gps: 3.0.4
+    dev: false
+    resolution:
+      integrity: sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
   /state-toggle/1.0.3:
     dev: false
     resolution:
@@ -15277,6 +15209,10 @@ packages:
       node: '>=6.9.0'
     resolution:
       integrity: sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
+  /stylis/4.0.10:
+    dev: false
+    resolution:
+      integrity: sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
   /superstruct/0.14.2:
     resolution:
       integrity: sha512-nPewA6m9mR3d6k7WkZ8N8zpTWfenFH3q9pA2PkuiZxINr9DKB2+40wEQf0ixn8VaGuJ78AB6iWOtStI+/4FKZQ==
@@ -15473,14 +15409,14 @@ packages:
       integrity: sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
   /terser-webpack-plugin/4.2.3_webpack@4.46.0:
     dependencies:
-      cacache: 15.0.5
+      cacache: 15.0.6
       find-cache-dir: 3.3.1
       jest-worker: 26.6.2
       p-limit: 3.1.0
       schema-utils: 3.0.0
       serialize-javascript: 5.0.1
       source-map: 0.6.1
-      terser: 5.6.0
+      terser: 5.6.1
       webpack: 4.46.0
       webpack-sources: 1.4.3
     dev: false
@@ -15527,23 +15463,11 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
-  /terser/5.6.0:
-    dependencies:
-      commander: 2.20.3
-      source-map: 0.7.3
-      source-map-support: 0.5.19
-    dev: false
-    engines:
-      node: '>=10'
-    hasBin: true
-    resolution:
-      integrity: sha512-vyqLMoqadC1uR0vywqOZzriDYzgEkNJFK4q9GeyOBHIbiECHiWLKcWfbQWAUaPfxkjDhapSlZB9f7fkMrvkVjA==
   /terser/5.6.1:
     dependencies:
       commander: 2.20.3
       source-map: 0.7.3
       source-map-support: 0.5.19
-    dev: true
     engines:
       node: '>=10'
     hasBin: true
@@ -15566,6 +15490,12 @@ packages:
     dev: true
     resolution:
       integrity: sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
+  /throttle-debounce/3.0.1:
+    dev: false
+    engines:
+      node: '>=10'
+    resolution:
+      integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
   /through/2.3.8:
     dev: true
     resolution:
@@ -15682,6 +15612,10 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  /toggle-selection/1.0.6:
+    dev: false
+    resolution:
+      integrity: sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
   /toidentifier/1.0.0:
     engines:
       node: '>=0.6'
@@ -15760,6 +15694,10 @@ packages:
     dev: false
     resolution:
       integrity: sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==
+  /ts-easing/0.2.0:
+    dev: false
+    resolution:
+      integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
   /ts-essentials/2.0.12:
     dev: false
     resolution:
@@ -15973,7 +15911,7 @@ packages:
       node: '>= 8'
     resolution:
       integrity: sha512-tyjyDTKy/JLnBSwvhoqd99VIjrP33SdOtwcMD32b+OqnrjZWe8HmZECbfBoacqoxjHd58gfeNw6wA7uvqWFa4w==
-  /typedoc-plugin-markdown/3.5.0_typedoc@0.20.30:
+  /typedoc-plugin-markdown/3.7.2_typedoc@0.20.30:
     dependencies:
       handlebars: 4.7.7
       typedoc: 0.20.30_typescript@4.2.3
@@ -15983,7 +15921,7 @@ packages:
     peerDependencies:
       typedoc: '>=0.20.0'
     resolution:
-      integrity: sha512-UzSTK5RpQVbIrcxV1ypHt3Pqr4O3DObYZIhcAXBazitHnpdl500cggXFHmxH7F/j3P3P2IBvPKpfnU6lzRdk8w==
+      integrity: sha512-SBGYKSJO48oGEXF9vC1ldcuqNyOC17st6LXy9/KMQ5tSGY0NRW8ldlBXI0PYrci+IbeXlkUfyhN0n3ud/2/VjQ==
   /typedoc/0.20.30_typescript@4.2.3:
     dependencies:
       colors: 1.4.0
@@ -16284,7 +16222,7 @@ packages:
     dependencies:
       file-loader: 6.2.0_webpack@4.46.0
       loader-utils: 2.0.0
-      mime-types: 2.1.29
+      mime-types: 2.1.30
       schema-utils: 3.0.0
       webpack: 4.46.0
     dev: false
@@ -16327,6 +16265,26 @@ packages:
       react: ^16.8.0 || ^17.0.0
     resolution:
       integrity: sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==
+  /use-debounce/6.0.1_react@17.0.1:
+    dependencies:
+      react: 17.0.1
+    dev: false
+    engines:
+      node: '>= 10.0.0'
+    peerDependencies:
+      react: '>=16.8.0'
+    resolution:
+      integrity: sha512-kpvIxpa0vOLz/2I2sfNJ72mUeaT2CMNCu5BT1f2HkV9qZK27UVSOFf1sSSu+wjJE4TcR2VTXS2SM569+m3TN7Q==
+  /use-immer/0.5.1_immer@9.0.1+react@17.0.1:
+    dependencies:
+      immer: 9.0.1
+      react: 17.0.1
+    dev: false
+    peerDependencies:
+      immer: '>=2.0.0'
+      react: ^16.8.0 || ^17.0.1
+    resolution:
+      integrity: sha512-Orb7PokM+jiLQfA1oJ3B3P7Guq0c2IxUHHmBpLeEMnJiz4ZOMlj9mkqq6D7iXJsnurRX0EOB134annf3RjEWHw==
   /use-isomorphic-layout-effect/1.1.1_@types+react@17.0.3+react@17.0.1:
     dependencies:
       '@types/react': 17.0.3
@@ -16524,7 +16482,7 @@ packages:
       joi: 17.4.0
       lodash: 4.17.21
       minimist: 1.2.5
-      rxjs: 6.6.6
+      rxjs: 6.6.7
     dev: false
     engines:
       node: '>=8.9.0'
@@ -16607,7 +16565,7 @@ packages:
       integrity: sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
   /webpack-bundle-analyzer/4.4.0:
     dependencies:
-      acorn: 8.0.5
+      acorn: 8.1.0
       acorn-walk: 8.0.2
       chalk: 4.1.0
       commander: 6.2.1
@@ -16874,7 +16832,7 @@ packages:
       acorn: 6.4.2
       ajv: 6.12.6
       ajv-keywords: 3.5.2_ajv@6.12.6
-      chrome-trace-event: 1.0.2
+      chrome-trace-event: 1.0.3
       enhanced-resolve: 4.5.0
       eslint-scope: 4.0.3
       json-parse-better-errors: 1.0.2
@@ -17184,6 +17142,7 @@ packages:
     resolution:
       integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
   /y18n/4.0.1:
+    dev: true
     resolution:
       integrity: sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
   /y18n/4.0.3:
diff --git a/website/.eslintrc.js b/website/.eslintrc.js
index 1d9438372..c75642832 100644
--- a/website/.eslintrc.js
+++ b/website/.eslintrc.js
@@ -9,19 +9,10 @@ module.exports = {
   rules: {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "node/no-unpublished-import": "off",
+    "node/no-missing-import": "off",
     "react/prop-types": "off"
   },
   settings: {
-    node: {
-      allowModules: [
-        "@theme/Layout",
-        "@theme/CodeBlock",
-        "@theme/hooks/usePrismTheme",
-        "@docusaurus/Link",
-        "@docusaurus/useDocusaurusContext",
-        "@docusaurus/useBaseUrl"
-      ]
-    },
     react: {
       version: readPkg.sync({
         cwd: resolvePkg("react", { cwd: __dirname })
diff --git a/website/babel.config.js b/website/babel.config.js
index df99bdba1..10827a3d5 100644
--- a/website/babel.config.js
+++ b/website/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
-  presets: [require.resolve("@docusaurus/core/lib/babel/preset")]
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+  plugins: ["lodash"]
 };
diff --git a/website/blog/2021-04-29-browser.md b/website/blog/2021-04-29-browser.md
new file mode 100644
index 000000000..76445f76f
--- /dev/null
+++ b/website/blog/2021-04-29-browser.md
@@ -0,0 +1,77 @@
+---
+title: Running Kosko in Browser
+---
+
+Last month, ECMAScript modules (ESM) support was shipped in Kosko 1.1. Today, you can use ESM not only in Node.js, but also in browsers. Currently only the following packages are browser-ready. Please make sure to update these packages before using Kosko in a browser.
+
+- `@kosko/env` - 2.0.0
+- `@kosko/generate` - 1.2.0
+
+## Programmatic API
+
+Kosko can be used in browsers via the programmatic API. In the following example, first we use dynamic import to load environment variables. Then, use the `resolve` function to resolve and validate components. And finally, print the resolved manifests with the `print` function.
+
+```js
+import env, { createAsyncLoaderReducers } from "@kosko/env";
+import { resolve, print, PrintFormat } from "@kosko/generate";
+
+// Load environment variables with dynamic import
+env.setReducers((reducers) => [
+  ...reducers,
+  ...createAsyncLoaderReducers({
+    global: () =>
+      import("./environments/dev/index.js").then((mod) => mod.default),
+    component: (name) =>
+      import(`./environments/dev/${name}.js`).then((mod) => mod.default)
+  })
+]);
+
+(async () => {
+  // Resolve and validate components
+  const manifests = await resolve(
+    import("./components/nginx.js").then((mod) => mod.default)
+  );
+
+  // Print resolved manifests
+  print(
+    { manifests },
+    {
+      format: PrintFormat.YAML,
+      writer: { write: (data) => console.log(data) }
+    }
+  );
+})();
+```
+
+See [using in browser](/docs/using-in-browser) for more details.
+
+## More Examples
+
+You can try Kosko in the [playground](/play), or check the following examples.
+
+- Webpack 5 - [GitHub](https://github.com/tommy351/kosko/tree/master/examples/web-webpack-5) / [CodeSandbox](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-webpack-5)
+- Parcel 1 - [GitHub](https://github.com/tommy351/kosko/tree/master/examples/web-parcel-1) / [CodeSandbox](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-parcel-1)
+- Static - [GitHub](https://github.com/tommy351/kosko/tree/master/examples/web-static) / [CodeSandbox](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-static)
+- Sync Environment - [GitHub](https://github.com/tommy351/kosko/tree/master/examples/web-sync-environment) / [CodeSandbox](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-sync-environment)
+
+## Breaking Changes
+
+### `@kosko/env`
+
+The following APIs were changed in this release.
+
+- `Environment` class → `Environment` interface
+- `SyncEnvironment` class → `createNodeCJSEnvironment` function
+- `AsyncEnvironment` class → `createNodeESMEnvironment` function
+
+You don't have to change anything, unless you initialize these classes manually.
+
+```js
+// Before
+const { Environment } = require("@kosko/env");
+const env = new Environment(process.cwd());
+
+// After
+const { createNodeCJSEnvironment } = require("@kosko/env");
+const env = createNodeCJSEnvironment({ cwd: process.cwd() });
+```
diff --git a/website/docs/api-archives/env-1.0/classes/_kosko_env.asyncenvironment.md b/website/docs/api-archives/env-1.0/classes/_kosko_env.asyncenvironment.md
index d2db8e55e..b51b1dcce 100644
--- a/website/docs/api-archives/env-1.0/classes/_kosko_env.asyncenvironment.md
+++ b/website/docs/api-archives/env-1.0/classes/_kosko_env.asyncenvironment.md
@@ -1,11 +1,7 @@
 ---
-id: "_kosko_env.asyncenvironment"
-title: "AsyncEnvironment"
-hide_title: true
+title: "Class: AsyncEnvironment"
 ---
 
-# Class: AsyncEnvironment
-
 [@kosko/env](../modules/_kosko_env.md).AsyncEnvironment
 
 ## Hierarchy
diff --git a/website/docs/api-archives/env-1.0/classes/_kosko_env.environment.md b/website/docs/api-archives/env-1.0/classes/_kosko_env.environment.md
index f79da06f8..a501498f3 100644
--- a/website/docs/api-archives/env-1.0/classes/_kosko_env.environment.md
+++ b/website/docs/api-archives/env-1.0/classes/_kosko_env.environment.md
@@ -1,11 +1,7 @@
 ---
-id: "_kosko_env.environment"
-title: "Environment"
-hide_title: true
+title: "Class: Environment"
 ---
 
-# Class: Environment
-
 [@kosko/env](../modules/_kosko_env.md).Environment
 
 ## Hierarchy
diff --git a/website/docs/api-archives/env-1.0/interfaces/_kosko_env.paths.md b/website/docs/api-archives/env-1.0/interfaces/_kosko_env.paths.md
index b1c91f789..df9d142a9 100644
--- a/website/docs/api-archives/env-1.0/interfaces/_kosko_env.paths.md
+++ b/website/docs/api-archives/env-1.0/interfaces/_kosko_env.paths.md
@@ -1,11 +1,7 @@
 ---
-id: "_kosko_env.paths"
-title: "Paths"
-hide_title: true
+title: "Interface: Paths"
 ---
 
-# Interface: Paths
-
 [@kosko/env](../modules/_kosko_env.md).Paths
 
 ## Properties
diff --git a/website/docs/api-archives/env-1.0/interfaces/_kosko_env.reducer.md b/website/docs/api-archives/env-1.0/interfaces/_kosko_env.reducer.md
index 9231dac65..750c2aeef 100644
--- a/website/docs/api-archives/env-1.0/interfaces/_kosko_env.reducer.md
+++ b/website/docs/api-archives/env-1.0/interfaces/_kosko_env.reducer.md
@@ -1,11 +1,7 @@
 ---
-id: "_kosko_env.reducer"
-title: "Reducer"
-hide_title: true
+title: "Interface: Reducer"
 ---
 
-# Interface: Reducer
-
 [@kosko/env](../modules/_kosko_env.md).Reducer
 
 Describes a step in the variables overriding chain.
diff --git a/website/docs/api-archives/env-1.0/modules/_kosko_env.md b/website/docs/api-archives/env-1.0/modules/_kosko_env.md
index 4ec687d14..a06dc7674 100644
--- a/website/docs/api-archives/env-1.0/modules/_kosko_env.md
+++ b/website/docs/api-archives/env-1.0/modules/_kosko_env.md
@@ -1,11 +1,7 @@
 ---
-id: "_kosko_env"
-title: "@kosko/env"
-hide_title: true
+title: "Module: @kosko/env"
 ---
 
-# Module: @kosko/env
-
 ## Table of contents
 
 ### Classes
diff --git a/website/docs/commands.md b/website/docs/commands.md
index 076de72eb..211cbef40 100644
--- a/website/docs/commands.md
+++ b/website/docs/commands.md
@@ -1,5 +1,4 @@
 ---
-id: commands
 title: Commands
 ---
 
diff --git a/website/docs/components.md b/website/docs/components.md
index e5c1acf1f..dba46ceb7 100644
--- a/website/docs/components.md
+++ b/website/docs/components.md
@@ -1,5 +1,4 @@
 ---
-id: components
 title: Components
 ---
 
diff --git a/website/docs/configuration.md b/website/docs/configuration.md
index 64880505e..9fe142397 100644
--- a/website/docs/configuration.md
+++ b/website/docs/configuration.md
@@ -1,5 +1,4 @@
 ---
-id: configuration
 title: Configuration
 ---
 
diff --git a/website/docs/ecmascript-modules.md b/website/docs/ecmascript-modules.md
index 14ad07711..9a2b71d7c 100644
--- a/website/docs/ecmascript-modules.md
+++ b/website/docs/ecmascript-modules.md
@@ -1,5 +1,4 @@
 ---
-id: ecmascript-modules
 title: ECMAScript Modules
 ---
 
diff --git a/website/docs/environments.md b/website/docs/environments.md
index 1abf9ef71..dc05b1968 100644
--- a/website/docs/environments.md
+++ b/website/docs/environments.md
@@ -1,5 +1,4 @@
 ---
-id: environments
 title: Environments
 ---
 
diff --git a/website/docs/getting-started.md b/website/docs/getting-started.md
index ce9512e0f..7a8e8631e 100644
--- a/website/docs/getting-started.md
+++ b/website/docs/getting-started.md
@@ -1,5 +1,4 @@
 ---
-id: getting-started
 title: Getting Started
 slug: /
 ---
diff --git a/website/docs/loading-helm-chart.md b/website/docs/loading-helm-chart.md
index 441c63325..7dd627940 100644
--- a/website/docs/loading-helm-chart.md
+++ b/website/docs/loading-helm-chart.md
@@ -1,5 +1,4 @@
 ---
-id: loading-helm-chart
 title: Loading Helm Chart
 ---
 
diff --git a/website/docs/loading-kubernetes-yaml.md b/website/docs/loading-kubernetes-yaml.md
index 0acf47931..c396e7bf3 100644
--- a/website/docs/loading-kubernetes-yaml.md
+++ b/website/docs/loading-kubernetes-yaml.md
@@ -1,5 +1,4 @@
 ---
-id: loading-kubernetes-yaml
 title: Loading Kubernetes YAML
 ---
 
diff --git a/website/docs/overview.md b/website/docs/overview.md
index 1a89e8f34..304bff679 100644
--- a/website/docs/overview.md
+++ b/website/docs/overview.md
@@ -1,5 +1,4 @@
 ---
-id: overview
 title: Overview
 ---
 
diff --git a/website/docs/programmatic-usage.md b/website/docs/programmatic-usage.md
index c4b126af2..d5c883430 100644
--- a/website/docs/programmatic-usage.md
+++ b/website/docs/programmatic-usage.md
@@ -1,5 +1,4 @@
 ---
-id: programmatic-usage
 title: Programmatic Usage
 ---
 
diff --git a/website/docs/templates.md b/website/docs/templates.md
index 8222ee7ec..066110673 100644
--- a/website/docs/templates.md
+++ b/website/docs/templates.md
@@ -1,5 +1,4 @@
 ---
-id: templates
 title: Templates
 ---
 
diff --git a/website/docs/troubleshooting.md b/website/docs/troubleshooting.md
index f47076ffc..3ba641888 100644
--- a/website/docs/troubleshooting.md
+++ b/website/docs/troubleshooting.md
@@ -1,5 +1,4 @@
 ---
-id: troubleshooting
 title: Troubleshooting
 ---
 
@@ -12,17 +11,3 @@ This error may occurred when some of components can't be dumped by [js-yaml](htt
 ```shell
 YAMLException: unacceptable kind of an object to dump
 ```
-
-For example, you may accidentally export a `Promise` rather than a `() => Promise`. The former is an `Object` and can't be stringified, while the latter is a `Function` and its return value can be flattened.
-
-```js
-async function createApp() {
-  return [new Deployment(), new Service()];
-}
-
-// Don't
-module.exports = createApp();
-
-// Do
-module.exports = createApp;
-```
diff --git a/website/docs/typescript-support.md b/website/docs/typescript-support.md
index f7fe5040d..ce504d7ad 100644
--- a/website/docs/typescript-support.md
+++ b/website/docs/typescript-support.md
@@ -1,5 +1,4 @@
 ---
-id: typescript-support
 title: TypeScript Support
 ---
 
diff --git a/website/docs/using-in-browser.md b/website/docs/using-in-browser.md
new file mode 100644
index 000000000..2fba019f9
--- /dev/null
+++ b/website/docs/using-in-browser.md
@@ -0,0 +1,165 @@
+---
+title: Using in Browser
+---
+
+:::note Examples
+
+- [Webpack 5](https://github.com/tommy351/kosko/tree/master/examples/web-webpack-5)
+- [Parcel 1](https://github.com/tommy351/kosko/tree/master/examples/web-parcel-1)
+- [Static](https://github.com/tommy351/kosko/tree/master/examples/web-static)
+- [Sync Environment](https://github.com/tommy351/kosko/tree/master/examples/web-sync-environment)
+
+:::
+
+Kosko can be used in browsers via the programmatic API. Currently only `@kosko/env` and `@kosko/generate` packages are browser-ready.
+
+## Prerequisites
+
+The browser support was introduced in the following versions. Make sure to update these packages before getting started.
+
+- `@kosko/env` - 2.0.0
+- `@kosko/generate` - 1.2.0
+
+## Entry File
+
+`@kosko/env` doesn't come with any default environment loaders in browser. You have to set one manually. This is because bundlers (e.g. Webpack, Parcel) transpile `import` statements and bundlers can't parse dynamic import paths without any contexts. Import paths are much simpler in userland. (`import(path)` v.s. `import("./envs/" + name)`)
+
+Another difference is that you can't use the `generate` function exported from the `@kosko/generate` package. Instead, use the `resolve` function to resolve and validate components. This is because the `generate` function finds matched components with [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>), which is not available in browsers.
+
+Below is a basic example of an entry file. First, we use dynamic import to load environment variables. Then, use the `resolve` function to resolve and validate components. And finally, print the resolved manifests with the `print` function.
+
+```js
+import env, { createAsyncLoaderReducers } from "@kosko/env";
+import { resolve, print, PrintFormat } from "@kosko/generate";
+
+// Load environment variables with dynamic import
+env.setReducers((reducers) => [
+  ...reducers,
+  ...createAsyncLoaderReducers({
+    global: () =>
+      import("./environments/dev/index.js").then((mod) => mod.default),
+    component: (name) =>
+      import(`./environments/dev/${name}.js`).then((mod) => mod.default)
+  })
+]);
+
+(async () => {
+  // Resolve and validate components
+  const manifests = await resolve(
+    import("./components/nginx.js").then((mod) => mod.default)
+  );
+
+  // Print resolved manifests
+  print(
+    { manifests },
+    {
+      format: PrintFormat.YAML,
+      writer: { write: (data) => console.log(data) }
+    }
+  );
+})();
+```
+
+See [API docs](/docs/api) for more details.
+
+## Environments
+
+### Async
+
+`@kosko/env` is asynchronous by default in browser. You **MUST** add `await` when retrieving environment variables.
+
+```js
+import env from "@kosko/env";
+
+const globalParams = await env.global();
+const componentParams = await env.component("demo");
+
+export default [new Deployment()];
+```
+
+However, [top-level await](https://github.com/tc39/proposal-top-level-await) is only available on Webpack 5 and Chrome (as of April 2021). If your bundler or browser doesn't support top-level await yet, you must wrap components with an async function.
+
+```js
+import env from "@kosko/env";
+
+export default async function () {
+  const params = await env.component("demo");
+
+  return [new Deployment()];
+}
+```
+
+### Sync
+
+:::note Examples
+
+- [Sync Environment](https://github.com/tommy351/kosko/tree/master/examples/web-sync-environment)
+
+:::
+
+The other way is to create a synchronous environment, so you don't have to add `await` when retrieving environment variables.
+
+```js
+import { createSyncEnvironment, createSyncLoaderReducers } from "@kosko/env";
+
+const env = createSyncEnvironment();
+
+env.setReducers((reducers) => [
+  ...reducers,
+  ...createSyncLoaderReducers({
+    global: () => {},
+    component: (name) => {}
+  })
+]);
+
+export default env;
+```
+
+One caveat is that you can't use dynamic imports in the environment loader anymore. In Webpack, you can use [`require.context`](https://webpack.js.org/guides/dependency-management/#requirecontext) to import files in a folder.
+
+```js
+const dev = require.context("./environments/dev");
+
+env.setReducers((reducers) => [
+  ...reducers,
+  ...createSyncLoaderReducers({
+    global: () => dev("./index"),
+    component: (name) => dev(`./${name}`)
+  })
+]);
+```
+
+Another caveat is that you have to rewrite the `@kosko/env` import paths in components, or use aliases.
+
+## Without Bundlers
+
+:::note Examples
+
+- [Static](https://github.com/tommy351/kosko/tree/master/examples/web-static)
+
+:::
+
+Kosko can also be used without a bundler. You can import modules from a CDN that supports ECMAScript modules (e.g. [Skypack](https://www.skypack.dev/), [JSPM](https://jspm.org/), etc.).
+
+```js
+import env from "https://cdn.skypack.dev/@kosko/env";
+import { Deployment } from "https://cdn.skypack.dev/kubernetes-models/apps/v1/Deployment";
+
+const params = await env.component("demo");
+
+export default [new Deployment()];
+```
+
+You can also use [import maps](https://github.com/WICG/import-maps) so you don't have to rewrite import paths. Noted that it is only supported on Chrome (as of April 2021). You may need a polyfill such as [es-module-shims](https://github.com/guybedford/es-module-shims).
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "@kosko/env": "https://cdn.skypack.dev/@kosko/env",
+      "@kosko/generate": "https://cdn.skypack.dev/@kosko/generate",
+      "kubernetes-models/": "https://cdn.skypack.dev/kubernetes-models/"
+    }
+  }
+</script>
+```
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index aa3a50219..eb6a0c736 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -34,6 +34,7 @@ module.exports = {
           docId: "api/modules"
         },
         { to: "blog", label: "Blog", position: "left" },
+        { to: "play", label: "Playground", position: "left" },
         {
           href: githubUrl,
           label: "GitHub",
@@ -77,5 +78,8 @@ module.exports = {
       }
     ]
   ],
-  plugins: ["docusaurus-plugin-sass"]
+  plugins: [
+    "docusaurus-plugin-sass",
+    require.resolve("./plugins/lodash-webpack-plugin")
+  ]
 };
diff --git a/website/package.json b/website/package.json
index 9155aaf88..d55eb843c 100644
--- a/website/package.json
+++ b/website/package.json
@@ -27,32 +27,47 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.71",
-    "@docusaurus/preset-classic": "2.0.0-alpha.71",
+    "@docusaurus/core": "2.0.0-alpha.73",
+    "@docusaurus/preset-classic": "2.0.0-alpha.73",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
+    "codemirror": "^5.61.0",
+    "comlink": "^4.3.0",
     "docusaurus-plugin-sass": "^0.1.12",
     "fs-extra": "^9.1.0",
-    "globby": "^11.0.2",
+    "immer": "^9.0.1",
     "lodash": "^4.17.20",
     "prism-react-renderer": "^1.1.1",
     "react": "^17.0.1",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.1",
-    "react-icons": "^4.1.0"
+    "react-icons": "^4.1.0",
+    "react-simple-resizer": "^2.1.0",
+    "react-use": "^17.2.3",
+    "serialize-error": "^8.1.0",
+    "use-debounce": "^6.0.1",
+    "use-immer": "^0.5.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-alpha.71",
+    "@docusaurus/module-type-aliases": "2.0.0-alpha.73",
     "@tsconfig/docusaurus": "^1.0.2",
+    "@types/codemirror": "^0.0.109",
     "@types/lodash": "^4.14.167",
     "@types/react": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.7",
+    "@types/systemjs": "^6.1.0",
+    "@types/webpack-env": "^1.16.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "globby": "^11.0.2",
+    "lodash-webpack-plugin": "^0.11.6",
     "raw-loader": "^4.0.2",
     "read-pkg": "^5.2.0",
     "resolve-pkg": "^2.0.0",
+    "rollup": "^2.45.2",
     "sass-loader": "^10.0.2",
     "typedoc": "^0.20.28",
-    "typedoc-plugin-markdown": "~3.5.0",
+    "typedoc-plugin-markdown": "~3.7.2",
     "typescript": "^4.1.3"
   }
 }
diff --git a/website/plugins/lodash-webpack-plugin/index.js b/website/plugins/lodash-webpack-plugin/index.js
new file mode 100644
index 000000000..2ac00214f
--- /dev/null
+++ b/website/plugins/lodash-webpack-plugin/index.js
@@ -0,0 +1,15 @@
+/* eslint-disable node/no-unpublished-require */
+"use strict";
+
+const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
+
+module.exports = function () {
+  return {
+    name: "lodash-webpack-plugin",
+    configureWebpack() {
+      return {
+        plugins: [new LodashModuleReplacementPlugin()]
+      };
+    }
+  };
+};
diff --git a/website/scripts/typedoc.js b/website/scripts/typedoc.js
index 5621415e0..e4dc661a3 100644
--- a/website/scripts/typedoc.js
+++ b/website/scripts/typedoc.js
@@ -6,31 +6,54 @@ const fs = require("fs-extra");
 const { join, dirname, extname } = require("path");
 const { Application, TSConfigReader } = require("typedoc");
 const {
-  FrontMatterComponent
-} = require("typedoc-plugin-markdown/dist/components/front-matter");
+  getPageTitle,
+  prependYAML
+} = require("typedoc-plugin-markdown/dist/utils/front-matter");
+const {
+  Component,
+  ContextAwareRendererComponent
+} = require("typedoc/dist/lib/output/components");
+const { PageEvent } = require("typedoc/dist/lib/output/events");
 
 const WEBSITE_DIR = dirname(__dirname);
 const ROOT_DIR = dirname(WEBSITE_DIR);
 
-class DocsaurusFrontMatterComponent extends FrontMatterComponent {
-  getYamlItems(page) {
-    const path = page.url.substring(
-      0,
-      page.url.length - extname(page.url).length
-    );
-
-    const isGlobals = path === "modules";
-    const title = isGlobals ? "Overview" : page.model.name;
-
-    return {
-      id: this.getId(page),
-      title,
-      hide_title: true,
-      ...(isGlobals && { slug: "/api" })
-    };
+class FrontMatter extends ContextAwareRendererComponent {
+  initialize() {
+    super.initialize();
+
+    this.listenTo(this.application.renderer, {
+      [PageEvent.END]: this.onPageEnd
+    });
+  }
+
+  /**
+   * @param {PageEvent} page
+   */
+  onPageEnd(page) {
+    if (page.contents) {
+      const path = page.url.substring(
+        0,
+        page.url.length - extname(page.url).length
+      );
+
+      const isGlobals = path === "modules";
+
+      page.contents = prependYAML(page.contents, {
+        title: getPageTitle(page),
+        sidebar_label: page.model.name,
+        ...(isGlobals && {
+          slug: "/api",
+          title: "Overview",
+          sidebar_label: "Overview"
+        })
+      });
+    }
   }
 }
 
+Component({ name: "frontmatter" })(FrontMatter);
+
 async function getEntryPoints() {
   const tsconfigs = await globby("packages/*/tsconfig.json", {
     cwd: ROOT_DIR,
@@ -60,16 +83,13 @@ async function getEntryPoints() {
     plugin: ["typedoc-plugin-markdown"],
     excludePrivate: true,
     hideBreadcrumbs: true,
-    hideProjectName: true,
     hideInPageTOC: true,
+    hidePageTitle: true,
     entryPoints: await getEntryPoints(),
     tsconfig: join(__dirname, "../tsconfig.typedoc.json")
   });
 
-  app.renderer.addComponent(
-    "frontmatter",
-    new DocsaurusFrontMatterComponent(app.renderer)
-  );
+  app.renderer.addComponent("frontmatter", new FrontMatter(app.renderer));
 
   const project = app.convert();
   const outDir = join(WEBSITE_DIR, "docs", "api");
diff --git a/website/sidebars.js b/website/sidebars.js
index df7f354b7..cc988b3da 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -1,18 +1,5 @@
 "use strict";
 
-const globby = require("globby");
-const { groupBy, startCase } = require("lodash");
-const { extname } = require("path");
-
-const apiDocIds = globby
-  .sync(["docs/api/**/*.md", "!docs/api/*.md"], {
-    cwd: __dirname
-  })
-  .map((path) => path.split("/").slice(1).join("/"))
-  .map((path) => path.substring(0, path.length - extname(path).length));
-
-const apiDocGroups = groupBy(apiDocIds, (path) => path.split("/")[1]);
-
 module.exports = {
   docs: [
     {
@@ -37,6 +24,7 @@ module.exports = {
         "typescript-support",
         "ecmascript-modules",
         "programmatic-usage",
+        "using-in-browser",
         "troubleshooting"
       ]
     },
@@ -49,11 +37,46 @@ module.exports = {
   ],
   api: [
     "api/modules",
-    ...Object.entries(apiDocGroups).map(([key, values]) => ({
+    {
+      type: "category",
+      label: "Modules",
+      collapsed: false,
+      items: [
+        {
+          type: "autogenerated",
+          dirName: "api/modules"
+        }
+      ]
+    },
+    {
       type: "category",
-      label: startCase(key),
-      items: values,
-      collapsed: key !== "modules"
-    }))
+      label: "Classes",
+      items: [
+        {
+          type: "autogenerated",
+          dirName: "api/classes"
+        }
+      ]
+    },
+    {
+      type: "category",
+      label: "Enums",
+      items: [
+        {
+          type: "autogenerated",
+          dirName: "api/enums"
+        }
+      ]
+    },
+    {
+      type: "category",
+      label: "Interfaces",
+      items: [
+        {
+          type: "autogenerated",
+          dirName: "api/interfaces"
+        }
+      ]
+    }
   ]
 };
diff --git a/website/src/components/CodeBlock/index.tsx b/website/src/modules/common/components/CodeBlock/index.tsx
similarity index 98%
rename from website/src/components/CodeBlock/index.tsx
rename to website/src/modules/common/components/CodeBlock/index.tsx
index 88bc60a5f..f174a119a 100644
--- a/website/src/components/CodeBlock/index.tsx
+++ b/website/src/modules/common/components/CodeBlock/index.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent, useMemo } from "react";
 import clsx from "clsx";
 import Highlight, { defaultProps, Language } from "prism-react-renderer";
-// eslint-disable-next-line node/no-missing-import
 import usePrismTheme from "@theme/hooks/usePrismTheme";
 
 import styles from "./styles.module.scss";
diff --git a/website/src/components/CodeBlock/styles.module.scss b/website/src/modules/common/components/CodeBlock/styles.module.scss
similarity index 100%
rename from website/src/components/CodeBlock/styles.module.scss
rename to website/src/modules/common/components/CodeBlock/styles.module.scss
diff --git a/website/src/components/LinkButton/index.tsx b/website/src/modules/common/components/LinkButton/index.tsx
similarity index 85%
rename from website/src/components/LinkButton/index.tsx
rename to website/src/modules/common/components/LinkButton/index.tsx
index 2c3755372..748f2d98b 100644
--- a/website/src/components/LinkButton/index.tsx
+++ b/website/src/modules/common/components/LinkButton/index.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from "react";
-import Link, { LinkProps } from "@docusaurus/Link";
+import Link from "@docusaurus/Link";
 import clsx from "clsx";
 
 type ButtonColor =
@@ -13,7 +13,11 @@ type ButtonColor =
 
 type ButtonSize = "sm" | "lg";
 
-type LinkButtonProps = LinkProps & {
+type LinkButtonProps = {
+  to?: string;
+  className?: string;
+  activeClassName?: string;
+  isNavLink?: boolean;
   color?: ButtonColor;
   size?: ButtonSize;
   outline?: boolean;
diff --git a/website/src/components/HomePage/DeployEverywhere/examples/components/nginx.js b/website/src/modules/home/components/DeployEverywhere/examples/components/nginx.js
similarity index 100%
rename from website/src/components/HomePage/DeployEverywhere/examples/components/nginx.js
rename to website/src/modules/home/components/DeployEverywhere/examples/components/nginx.js
diff --git a/website/src/components/HomePage/DeployEverywhere/examples/environments/prod.js b/website/src/modules/home/components/DeployEverywhere/examples/environments/prod.js
similarity index 100%
rename from website/src/components/HomePage/DeployEverywhere/examples/environments/prod.js
rename to website/src/modules/home/components/DeployEverywhere/examples/environments/prod.js
diff --git a/website/src/components/HomePage/DeployEverywhere/examples/environments/stage.js b/website/src/modules/home/components/DeployEverywhere/examples/environments/stage.js
similarity index 100%
rename from website/src/components/HomePage/DeployEverywhere/examples/environments/stage.js
rename to website/src/modules/home/components/DeployEverywhere/examples/environments/stage.js
diff --git a/website/src/components/HomePage/DeployEverywhere/examples/results/prod.yml b/website/src/modules/home/components/DeployEverywhere/examples/results/prod.yml
similarity index 100%
rename from website/src/components/HomePage/DeployEverywhere/examples/results/prod.yml
rename to website/src/modules/home/components/DeployEverywhere/examples/results/prod.yml
diff --git a/website/src/components/HomePage/DeployEverywhere/examples/results/stage.yml b/website/src/modules/home/components/DeployEverywhere/examples/results/stage.yml
similarity index 100%
rename from website/src/components/HomePage/DeployEverywhere/examples/results/stage.yml
rename to website/src/modules/home/components/DeployEverywhere/examples/results/stage.yml
diff --git a/website/src/components/HomePage/DeployEverywhere/index.tsx b/website/src/modules/home/components/DeployEverywhere/index.tsx
similarity index 96%
rename from website/src/components/HomePage/DeployEverywhere/index.tsx
rename to website/src/modules/home/components/DeployEverywhere/index.tsx
index d74c1ce74..54aee29ee 100644
--- a/website/src/components/HomePage/DeployEverywhere/index.tsx
+++ b/website/src/modules/home/components/DeployEverywhere/index.tsx
@@ -12,7 +12,10 @@ import environmentProd from "!!raw-loader!./examples/environments/prod.js";
 import environmentStage from "!!raw-loader!./examples/environments/stage.js";
 import resultProd from "!!raw-loader!./examples/results/prod.yml";
 import resultStage from "!!raw-loader!./examples/results/stage.yml";
-import CodeBlock, { CodeBlockProps, usePrismTheme } from "../../CodeBlock";
+import CodeBlock, {
+  CodeBlockProps,
+  usePrismTheme
+} from "@site/src/modules/common/components/CodeBlock";
 
 const Pane: FunctionComponent<{
   tabs: Record<string, CodeBlockProps>;
diff --git a/website/src/components/HomePage/DeployEverywhere/styles.module.scss b/website/src/modules/home/components/DeployEverywhere/styles.module.scss
similarity index 100%
rename from website/src/components/HomePage/DeployEverywhere/styles.module.scss
rename to website/src/modules/home/components/DeployEverywhere/styles.module.scss
diff --git a/website/src/components/HomePage/Feature/index.tsx b/website/src/modules/home/components/Feature/index.tsx
similarity index 100%
rename from website/src/components/HomePage/Feature/index.tsx
rename to website/src/modules/home/components/Feature/index.tsx
diff --git a/website/src/components/HomePage/Feature/styles.module.scss b/website/src/modules/home/components/Feature/styles.module.scss
similarity index 100%
rename from website/src/components/HomePage/Feature/styles.module.scss
rename to website/src/modules/home/components/Feature/styles.module.scss
diff --git a/website/src/components/HomePage/Header/index.tsx b/website/src/modules/home/components/Header/index.tsx
similarity index 79%
rename from website/src/components/HomePage/Header/index.tsx
rename to website/src/modules/home/components/Header/index.tsx
index c25346e72..71bcf67c5 100644
--- a/website/src/components/HomePage/Header/index.tsx
+++ b/website/src/modules/home/components/Header/index.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 import clsx from "clsx";
 import styles from "./styles.module.scss";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import LinkButton from "../../LinkButton";
+import LinkButton from "@site/src/modules/common/components/LinkButton";
 
 const Header: FunctionComponent = () => {
   return (
@@ -15,6 +15,9 @@ const Header: FunctionComponent = () => {
         <LinkButton color="primary" size="lg" to={useBaseUrl("docs/")}>
           Get Started
         </LinkButton>
+        <LinkButton color="info" size="lg" to={useBaseUrl("play")}>
+          Playground
+        </LinkButton>
         <div className={styles.install}>npm install kosko -g</div>
       </div>
     </header>
diff --git a/website/src/components/HomePage/Header/styles.module.scss b/website/src/modules/home/components/Header/styles.module.scss
similarity index 100%
rename from website/src/components/HomePage/Header/styles.module.scss
rename to website/src/modules/home/components/Header/styles.module.scss
diff --git a/website/src/components/HomePage/index.tsx b/website/src/modules/home/components/HomePage/index.tsx
similarity index 70%
rename from website/src/components/HomePage/index.tsx
rename to website/src/modules/home/components/HomePage/index.tsx
index 36e00d4df..b92fdc194 100644
--- a/website/src/components/HomePage/index.tsx
+++ b/website/src/modules/home/components/HomePage/index.tsx
@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from "react";
 import Layout from "@theme/Layout";
-import Header from "./Header";
-import WriteLess from "./WriteLess";
-import DeployEverywhere from "./DeployEverywhere";
-import TypeSafe from "./TypeSafe";
+import Header from "../Header";
+import WriteLess from "../WriteLess";
+import DeployEverywhere from "../DeployEverywhere";
+import TypeSafe from "../TypeSafe";
 
 const HomePage: FunctionComponent = () => {
   return (
diff --git a/website/src/components/HomePage/TypeSafe/examples/component.js b/website/src/modules/home/components/TypeSafe/examples/component.js
similarity index 100%
rename from website/src/components/HomePage/TypeSafe/examples/component.js
rename to website/src/modules/home/components/TypeSafe/examples/component.js
diff --git a/website/src/components/HomePage/TypeSafe/index.tsx b/website/src/modules/home/components/TypeSafe/index.tsx
similarity index 97%
rename from website/src/components/HomePage/TypeSafe/index.tsx
rename to website/src/modules/home/components/TypeSafe/index.tsx
index 83e3d1079..b0dea84c5 100644
--- a/website/src/components/HomePage/TypeSafe/index.tsx
+++ b/website/src/modules/home/components/TypeSafe/index.tsx
@@ -3,7 +3,7 @@ import CodeBlock, {
   defaultTokenRenderer,
   TokenRenderer,
   usePrismTheme
-} from "../../CodeBlock";
+} from "@site/src/modules/common/components/CodeBlock";
 import {
   Feature,
   FeatureDescription,
diff --git a/website/src/components/HomePage/TypeSafe/styles.module.scss b/website/src/modules/home/components/TypeSafe/styles.module.scss
similarity index 100%
rename from website/src/components/HomePage/TypeSafe/styles.module.scss
rename to website/src/modules/home/components/TypeSafe/styles.module.scss
diff --git a/website/src/components/HomePage/WriteLess/examples/deployment.yml b/website/src/modules/home/components/WriteLess/examples/deployment.yml
similarity index 100%
rename from website/src/components/HomePage/WriteLess/examples/deployment.yml
rename to website/src/modules/home/components/WriteLess/examples/deployment.yml
diff --git a/website/src/components/HomePage/WriteLess/examples/service.yml b/website/src/modules/home/components/WriteLess/examples/service.yml
similarity index 100%
rename from website/src/components/HomePage/WriteLess/examples/service.yml
rename to website/src/modules/home/components/WriteLess/examples/service.yml
diff --git a/website/src/components/HomePage/WriteLess/index.tsx b/website/src/modules/home/components/WriteLess/index.tsx
similarity index 95%
rename from website/src/components/HomePage/WriteLess/index.tsx
rename to website/src/modules/home/components/WriteLess/index.tsx
index 2dda9caa8..4834820f5 100644
--- a/website/src/components/HomePage/WriteLess/index.tsx
+++ b/website/src/modules/home/components/WriteLess/index.tsx
@@ -5,7 +5,7 @@ import {
   FeatureExample,
   FeatureTitle
 } from "../Feature";
-import CodeBlock from "../../CodeBlock";
+import CodeBlock from "@site/src/modules/common/components/CodeBlock";
 import styles from "./styles.module.scss";
 import deployment from "!!raw-loader!./examples/deployment.yml";
 import service from "!!raw-loader!./examples/service.yml";
diff --git a/website/src/components/HomePage/WriteLess/styles.module.scss b/website/src/modules/home/components/WriteLess/styles.module.scss
similarity index 100%
rename from website/src/components/HomePage/WriteLess/styles.module.scss
rename to website/src/modules/home/components/WriteLess/styles.module.scss
diff --git a/website/src/modules/playground/components/Bar/index.tsx b/website/src/modules/playground/components/Bar/index.tsx
new file mode 100644
index 000000000..c2ad2feb3
--- /dev/null
+++ b/website/src/modules/playground/components/Bar/index.tsx
@@ -0,0 +1,33 @@
+import React, { FunctionComponent, useMemo, useState } from "react";
+import { Bar as ResizerBar } from "react-simple-resizer";
+import clsx from "clsx";
+import styles from "./styles.module.scss";
+import { useContainer } from "../Container";
+
+const EXPAND_SIZE = 2;
+
+const Bar: FunctionComponent = (props) => {
+  const [active, setActive] = useState(false);
+  const { vertical } = useContainer();
+  const expandInteractiveArea = useMemo(
+    () =>
+      vertical
+        ? { top: EXPAND_SIZE, bottom: EXPAND_SIZE }
+        : { left: EXPAND_SIZE, right: EXPAND_SIZE },
+    [vertical]
+  );
+
+  return (
+    <ResizerBar
+      size={2}
+      expandInteractiveArea={expandInteractiveArea}
+      onStatusChanged={setActive}
+      className={clsx(styles.bar, {
+        [styles.barActive]: active
+      })}
+      {...props}
+    />
+  );
+};
+
+export default Bar;
diff --git a/website/src/modules/playground/components/Bar/styles.module.scss b/website/src/modules/playground/components/Bar/styles.module.scss
new file mode 100644
index 000000000..6af403ff0
--- /dev/null
+++ b/website/src/modules/playground/components/Bar/styles.module.scss
@@ -0,0 +1,22 @@
+.bar {
+  background: var(--ifm-color-emphasis-200);
+  z-index: 10;
+
+  > * {
+    background: var(--ifm-color-primary-light);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &:hover {
+    > * {
+      opacity: 1;
+    }
+  }
+}
+
+.barActive {
+  > * {
+    opacity: 1;
+  }
+}
diff --git a/website/src/modules/playground/components/CodeMirrorEditor/index.tsx b/website/src/modules/playground/components/CodeMirrorEditor/index.tsx
new file mode 100644
index 000000000..573a6da95
--- /dev/null
+++ b/website/src/modules/playground/components/CodeMirrorEditor/index.tsx
@@ -0,0 +1,81 @@
+/// <reference types="codemirror/addon/edit/matchbrackets"/>
+/// <reference types="codemirror/addon/edit/closebrackets"/>
+
+import React, {
+  FunctionComponent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Controlled as CodeMirror,
+  IControlledCodeMirror
+} from "react-codemirror2";
+import styles from "./styles.module.scss";
+import { Editor, EditorConfiguration } from "codemirror";
+import useThemeContext from "@theme/hooks/useThemeContext";
+import { usePrevious } from "react-use";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/seti.css";
+
+try {
+  require("codemirror/addon/edit/matchbrackets.js");
+  require("codemirror/addon/edit/closebrackets.js");
+} catch {
+  // Ignore errors
+}
+
+export interface CodeMirrorEditorProps extends IControlledCodeMirror {
+  path?: string;
+}
+
+const CodeMirrorEditor: FunctionComponent<CodeMirrorEditorProps> = ({
+  options: inputOptions,
+  value,
+  editorDidMount,
+  path,
+  ...props
+}) => {
+  const { isDarkTheme } = useThemeContext();
+  const [mounted, setMounted] = useState(false);
+  const options = useMemo(
+    (): EditorConfiguration => ({
+      tabSize: 2,
+      theme: isDarkTheme ? "seti" : "default",
+      lineNumbers: true,
+      matchBrackets: true,
+      autoCloseBrackets: true,
+      ...inputOptions
+    }),
+    [inputOptions, isDarkTheme]
+  );
+  const editorRef = useRef<Editor>(null);
+  const previousPath = usePrevious(path);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+    if (previousPath === path) return;
+
+    editorRef.current.setCursor(0, 0);
+  }, [path, previousPath]);
+
+  return (
+    <div className={styles.container}>
+      <CodeMirror
+        {...props}
+        options={options}
+        // Update value after the editor is mounted, otherwise some of
+        // lines may not be rendered.
+        value={mounted ? value : ""}
+        editorDidMount={(editor, value, callback) => {
+          editorRef.current = editor;
+          setMounted(true);
+          editorDidMount?.(editor, value, callback);
+        }}
+      />
+    </div>
+  );
+};
+
+export default CodeMirrorEditor;
diff --git a/website/src/modules/playground/components/CodeMirrorEditor/styles.module.scss b/website/src/modules/playground/components/CodeMirrorEditor/styles.module.scss
new file mode 100644
index 000000000..635ad6b36
--- /dev/null
+++ b/website/src/modules/playground/components/CodeMirrorEditor/styles.module.scss
@@ -0,0 +1,18 @@
+.container {
+  height: 100%;
+  position: relative;
+
+  :global {
+    .CodeMirror {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: auto;
+      font-family: var(--ifm-font-family-monospace);
+      font-size: var(--ifm-code-font-size);
+      line-height: var(--ifm-pre-line-height);
+    }
+  }
+}
diff --git a/website/src/modules/playground/components/Container/index.tsx b/website/src/modules/playground/components/Container/index.tsx
new file mode 100644
index 000000000..39dbeb4f7
--- /dev/null
+++ b/website/src/modules/playground/components/Container/index.tsx
@@ -0,0 +1,41 @@
+import React, {
+  FunctionComponent,
+  createContext,
+  RefObject,
+  createRef,
+  useRef,
+  useMemo,
+  useContext
+} from "react";
+import {
+  Container as ResizerContainer,
+  ContainerProps
+} from "react-simple-resizer";
+
+const ContainerContext = createContext<{
+  vertical: boolean;
+  ref: RefObject<ResizerContainer>;
+}>({
+  vertical: false,
+  ref: createRef()
+});
+
+export function useContainer() {
+  return useContext(ContainerContext);
+}
+
+const Container: FunctionComponent<ContainerProps> = ({
+  vertical = false,
+  ...props
+}) => {
+  const ref = useRef<ResizerContainer>(null);
+  const value = useMemo(() => ({ vertical, ref }), [vertical, ref]);
+
+  return (
+    <ContainerContext.Provider value={value}>
+      <ResizerContainer {...props} ref={ref} vertical={vertical} />
+    </ContainerContext.Provider>
+  );
+};
+
+export default Container;
diff --git a/website/src/modules/playground/components/Editor/index.tsx b/website/src/modules/playground/components/Editor/index.tsx
new file mode 100644
index 000000000..430bb6d08
--- /dev/null
+++ b/website/src/modules/playground/components/Editor/index.tsx
@@ -0,0 +1,52 @@
+import React, { FunctionComponent, useMemo } from "react";
+import styles from "./styles.module.scss";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import { ToolbarContainer, ToolbarTitle } from "../Toolbar";
+import CodeMirrorEditor from "../CodeMirrorEditor";
+import { EditorConfiguration } from "codemirror";
+
+try {
+  require("codemirror/mode/javascript/javascript.js");
+} catch {
+  // ignore error
+}
+
+const Editor: FunctionComponent = () => {
+  const {
+    value: { activePath, files },
+    updateValue
+  } = usePlaygroundContext();
+  const value = useMemo(() => files[activePath] || "", [activePath, files]);
+  const editorOptions = useMemo(
+    (): EditorConfiguration => ({
+      mode: "javascript",
+      readOnly: !activePath
+    }),
+    [activePath]
+  );
+
+  return (
+    <div className={styles.container}>
+      <ToolbarContainer>
+        <ToolbarTitle>Editor</ToolbarTitle>
+        {activePath && <div className={styles.activePath}>{activePath}</div>}
+      </ToolbarContainer>
+      <div className={styles.editor}>
+        <CodeMirrorEditor
+          path={activePath}
+          value={value}
+          options={editorOptions}
+          onBeforeChange={(editor, data, value) => {
+            if (!activePath) return;
+
+            updateValue((draft) => {
+              draft.files[activePath] = value;
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Editor;
diff --git a/website/src/modules/playground/components/Editor/styles.module.scss b/website/src/modules/playground/components/Editor/styles.module.scss
new file mode 100644
index 000000000..8d1cc39b3
--- /dev/null
+++ b/website/src/modules/playground/components/Editor/styles.module.scss
@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.editor {
+  flex: 1;
+}
+
+.activePath {
+  overflow: hidden;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 0.75rem;
+}
diff --git a/website/src/modules/playground/components/Playground/Provider.tsx b/website/src/modules/playground/components/Playground/Provider.tsx
new file mode 100644
index 000000000..525f14e82
--- /dev/null
+++ b/website/src/modules/playground/components/Playground/Provider.tsx
@@ -0,0 +1,54 @@
+import { sep } from "@site/src/utils/path";
+import React, { FunctionComponent, useMemo } from "react";
+import { useImmer } from "use-immer";
+import { DIRECTORY_PLACEHOLDER } from "../../constants";
+import { PlaygroundContext, PlaygroundContextValue } from "../../context";
+
+const fixturesContext = require.context(
+  "!!raw-loader!../../fixtures",
+  true,
+  /\.js$/
+);
+const fixtures = Object.fromEntries(
+  fixturesContext
+    .keys()
+    .map((key) => [key.substring(1), fixturesContext(key).default])
+);
+
+function insertPlaceholder(
+  files: Record<string, string>
+): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [k, v] of Object.entries(files)) {
+    result[k] = v;
+
+    const parts = k.split(sep);
+
+    for (let i = 1; i < parts.length; i++) {
+      const path = [...parts.slice(0, i), DIRECTORY_PLACEHOLDER].join(sep);
+      result[path] = "";
+    }
+  }
+
+  return result;
+}
+
+const Provider: FunctionComponent = ({ children }) => {
+  const [value, updateValue] = useImmer<PlaygroundContextValue>(() => ({
+    activePath: Object.keys(fixtures)[0],
+    files: insertPlaceholder(fixtures),
+    component: "mongo",
+    environment: "dev",
+    editorMounted: false
+  }));
+  const ctx = useMemo(() => ({ value, updateValue }), [value, updateValue]);
+
+  return (
+    <PlaygroundContext.Provider value={ctx}>
+      {children}
+    </PlaygroundContext.Provider>
+  );
+};
+
+export default Provider;
diff --git a/website/src/modules/playground/components/Playground/index.tsx b/website/src/modules/playground/components/Playground/index.tsx
new file mode 100644
index 000000000..4851fd9d9
--- /dev/null
+++ b/website/src/modules/playground/components/Playground/index.tsx
@@ -0,0 +1,61 @@
+import React, { FunctionComponent, useEffect, useRef } from "react";
+import Layout from "@theme/Layout";
+import Provider from "./Provider";
+import { Container, Section } from "react-simple-resizer";
+import Bar from "../Bar";
+import styles from "./styles.module.scss";
+import Sidebar from "../Sidebar";
+import Editor from "../Editor";
+import Preview from "../Preview";
+
+const Content: FunctionComponent = () => {
+  return (
+    <Container className={styles.container}>
+      <Section defaultSize={200}>
+        <Sidebar />
+      </Section>
+      <Bar />
+      <Section>
+        <Editor />
+      </Section>
+      <Bar />
+      <Section>
+        <Preview />
+      </Section>
+    </Container>
+  );
+};
+
+const Playground: FunctionComponent = () => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const target = ref.current;
+    if (!target) return;
+
+    const parent = target.parentElement;
+    if (!parent) return;
+
+    parent.classList.add(styles.mainWrapper);
+
+    return () => {
+      parent.classList.remove(styles.mainWrapper);
+    };
+  }, [ref]);
+
+  return (
+    <Layout title="Playground">
+      <Provider>
+        <main className={styles.main} ref={ref}>
+          {typeof window === "undefined" ? (
+            <noscript>Please enable JavaScript to use the playground.</noscript>
+          ) : (
+            <Content />
+          )}
+        </main>
+      </Provider>
+    </Layout>
+  );
+};
+
+export default Playground;
diff --git a/website/src/modules/playground/components/Playground/styles.module.scss b/website/src/modules/playground/components/Playground/styles.module.scss
new file mode 100644
index 000000000..3b9c84445
--- /dev/null
+++ b/website/src/modules/playground/components/Playground/styles.module.scss
@@ -0,0 +1,13 @@
+.mainWrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  display: contents;
+}
+
+.container {
+  flex: 1;
+}
diff --git a/website/src/modules/playground/components/Preview/ComponentSelect.tsx b/website/src/modules/playground/components/Preview/ComponentSelect.tsx
new file mode 100644
index 000000000..0a2fdbe8e
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/ComponentSelect.tsx
@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from "react";
+import Select from "./Select";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import useComponentList from "../../hooks/useComponentList";
+
+const ComponentSelect: FunctionComponent = () => {
+  const {
+    value: { component },
+    updateValue
+  } = usePlaygroundContext();
+  const components = useComponentList();
+
+  return (
+    <Select
+      label="Component"
+      value={component}
+      options={components}
+      onChange={(value) => {
+        updateValue((draft) => {
+          draft.component = value;
+        });
+      }}
+    />
+  );
+};
+
+export default ComponentSelect;
diff --git a/website/src/modules/playground/components/Preview/EnvironmentSelect.tsx b/website/src/modules/playground/components/Preview/EnvironmentSelect.tsx
new file mode 100644
index 000000000..d595293c0
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/EnvironmentSelect.tsx
@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from "react";
+import Select from "./Select";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import useEnvironmentList from "../../hooks/useEnvironmentList";
+
+const EnvironmentSelect: FunctionComponent = () => {
+  const {
+    value: { environment },
+    updateValue
+  } = usePlaygroundContext();
+  const environments = useEnvironmentList();
+
+  return (
+    <Select
+      label="Environment"
+      value={environment}
+      options={environments}
+      onChange={(value) => {
+        updateValue((draft) => {
+          draft.environment = value;
+        });
+      }}
+    />
+  );
+};
+
+export default EnvironmentSelect;
diff --git a/website/src/modules/playground/components/Preview/ErrorIcon.tsx b/website/src/modules/playground/components/Preview/ErrorIcon.tsx
new file mode 100644
index 000000000..781fd0e69
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/ErrorIcon.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+import styles from "./styles.module.scss";
+import { VscError } from "react-icons/vsc";
+
+const ErrorIcon: FunctionComponent = () => {
+  return (
+    <div className={styles.errorIcon}>
+      <VscError />
+    </div>
+  );
+};
+
+export default ErrorIcon;
diff --git a/website/src/modules/playground/components/Preview/ErrorPane.tsx b/website/src/modules/playground/components/Preview/ErrorPane.tsx
new file mode 100644
index 000000000..f11ee89fe
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/ErrorPane.tsx
@@ -0,0 +1,96 @@
+import React, { FunctionComponent, ReactNode, useMemo } from "react";
+import styles from "./styles.module.scss";
+import { ToolbarContainer, ToolbarTitle } from "../Toolbar";
+import { usePreviewContext } from "./context";
+import ErrorIcon from "./ErrorIcon";
+import WarningIcon from "./WarningIcon";
+import { serializeError } from "serialize-error";
+import { useContainer } from "../Container";
+
+export const DEFAULT_SIZE = 40;
+export const EXPANDED_SIZE = 200;
+
+const Summary: FunctionComponent<{
+  icon: ReactNode;
+  value: number;
+}> = ({ icon, value }) => {
+  if (!value) return null;
+
+  return (
+    <div className={styles.errorPaneSummaryContainer}>
+      {icon}
+      <div className={styles.errorPaneSummaryValue}>{value}</div>
+    </div>
+  );
+};
+
+const Cell: FunctionComponent<{
+  icon: ReactNode;
+  message: ReactNode;
+  detail?: ReactNode;
+}> = ({ icon, message, detail }) => {
+  return (
+    <details className={styles.errorPaneCellContainer}>
+      <summary className={styles.errorPaneCellSummary}>
+        <div className={styles.errorPaneCellIcon}>{icon}</div>
+        <div className={styles.errorPaneCellMessage}>{message}</div>
+      </summary>
+      {detail && <div className={styles.errorPaneCellDetail}>{detail}</div>}
+    </details>
+  );
+};
+
+const ErrorCell: FunctionComponent<{ error: any }> = ({ error }) => {
+  const { name = "Error", message = "", stack } = useMemo(
+    () => serializeError(error),
+    [error]
+  );
+
+  return (
+    <Cell
+      icon={<ErrorIcon />}
+      message={`${name}: ${message}`}
+      detail={stack && <pre>{stack}</pre>}
+    />
+  );
+};
+
+const ErrorPane: FunctionComponent = () => {
+  const {
+    value: { errors, warnings }
+  } = usePreviewContext();
+  const { ref: containerRef } = useContainer();
+
+  return (
+    <div className={styles.pane}>
+      <ToolbarContainer
+        className={styles.errorPaneToolbar}
+        onClick={() => {
+          const container = containerRef.current;
+          const resizer = container.getResizer();
+          const toSize =
+            resizer.getSectionSize(1) <= DEFAULT_SIZE
+              ? EXPANDED_SIZE
+              : DEFAULT_SIZE;
+
+          resizer.resizeSection(1, { toSize });
+          container.applyResizer(resizer);
+        }}
+      >
+        <ToolbarTitle>Errors</ToolbarTitle>
+        <Summary icon={<ErrorIcon />} value={errors.length} />
+        <Summary icon={<WarningIcon />} value={warnings.length} />
+      </ToolbarContainer>
+      <div className={styles.errorPaneList}>
+        {errors.map((err, i) => (
+          <ErrorCell key={i} error={err} />
+        ))}
+        {warnings.map((warning, i) => (
+          <Cell key={i} icon={<WarningIcon />} message={warning} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ErrorPane;
diff --git a/website/src/modules/playground/components/Preview/Executor.tsx b/website/src/modules/playground/components/Preview/Executor.tsx
new file mode 100644
index 000000000..357cb57be
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/Executor.tsx
@@ -0,0 +1,195 @@
+import { FunctionComponent, useEffect, useMemo, useState } from "react";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import { usePreviewContext } from "./context";
+import { createBundler } from "../../worker";
+import { useDebounce } from "use-debounce";
+
+const EVENT_SOURCE = "kosko-playground";
+const EVENT_CALLBACK = "window.__postMessageToParent";
+
+let EVENT_ID = 0;
+
+const Executor: FunctionComponent = () => {
+  const { updateValue } = usePreviewContext();
+  const {
+    value: { files: filesValue, component, environment }
+  } = usePlaygroundContext();
+  const [files] = useDebounce(filesValue, 300);
+  const bundler = useMemo(() => createBundler(), []);
+  const [frame, setFrame] = useState<HTMLIFrameElement | undefined>(undefined);
+  const [frameLoaded, setFrameLoaded] = useState(false);
+
+  // Create an iframe
+  useEffect(() => {
+    const element = document.createElement("iframe");
+    const blob = new Blob(
+      [
+        `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script>
+(function(){
+  "use strict";
+
+  let currentId = -1;
+
+  ${EVENT_CALLBACK} = (id, data) => {
+    if (id !== currentId) return;
+
+    window.parent.postMessage(Object.assign({
+      source: "${EVENT_SOURCE}"
+    }, data));
+  };
+
+  window.addEventListener("error", event => {
+    ${EVENT_CALLBACK}(currentId, {
+      type: "error",
+      payload: {
+        name: event.error.name,
+        message: event.error.message,
+        stack: event.error.stack
+      }
+    });
+  });
+
+  window.addEventListener("message", event => {
+    if (event.origin !== "${location.origin}") return;
+
+    currentId = event.data.id;
+
+    const script = document.createElement("script");
+
+    script.type = "module";
+    script.innerHTML = event.data.code;
+
+    script.addEventListener("error", () => {
+      ${EVENT_CALLBACK}(currentId, {
+        type: "error",
+        payload: {
+          name: "Error",
+          message: "Script load failed. Open the console for more details."
+        }
+      });
+    });
+
+    document.body.appendChild(script);
+  }, false);
+})();
+</script>
+</head>
+</html>`
+      ],
+      { type: "text/html" }
+    );
+    const src = URL.createObjectURL(blob);
+
+    element.style.display = "none";
+    element.src = src;
+
+    document.body.appendChild(element);
+    setFrame(element);
+
+    return () => {
+      setFrame(undefined);
+      element.remove();
+      URL.revokeObjectURL(src);
+    };
+  }, []);
+
+  // Detect if iframe is loaded
+  useEffect(() => {
+    if (!frame) return;
+
+    function handleLoad() {
+      setFrameLoaded(true);
+    }
+
+    frame.addEventListener("load", handleLoad);
+
+    return () => {
+      frame.removeEventListener("load", handleLoad);
+      setFrameLoaded(false);
+    };
+  }, [frame]);
+
+  // Handle iframe messages
+  useEffect(() => {
+    function handleMessage(event: MessageEvent) {
+      if (event.origin !== location.origin) return;
+      if (event.data.source !== EVENT_SOURCE) return;
+
+      updateValue((draft) => {
+        draft.updating = false;
+
+        switch (event.data.type) {
+          case "success":
+            draft.content = event.data.payload;
+            break;
+          case "error":
+            draft.errors.push(event.data.payload);
+            break;
+        }
+      });
+    }
+
+    window.addEventListener("message", handleMessage, false);
+
+    return () => {
+      window.removeEventListener("message", handleMessage, false);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!frame || !frameLoaded) return;
+
+    let canceled = false;
+
+    const update: typeof updateValue = (callback) => {
+      if (canceled) return;
+
+      updateValue(callback);
+    };
+
+    (async () => {
+      // Reset state
+      update((draft) => {
+        draft.updating = true;
+        draft.errors = [];
+        draft.warnings = [];
+      });
+
+      try {
+        const id = EVENT_ID++;
+        const result = await bundler.bundle({
+          files,
+          component,
+          environment,
+          callback: `${EVENT_CALLBACK}.bind(null, ${id})`
+        });
+
+        if (canceled) return;
+
+        update((draft) => {
+          draft.warnings.push(...result.warnings);
+        });
+
+        // Send data to iframe
+        frame.contentWindow.postMessage({ code: result.code, id }, "*");
+      } catch (err) {
+        update((draft) => {
+          draft.updating = false;
+          draft.errors.push(err);
+        });
+      }
+    })();
+
+    return () => {
+      canceled = true;
+    };
+  }, [frame, frameLoaded, files, component, environment]);
+
+  return null;
+};
+
+export default Executor;
diff --git a/website/src/modules/playground/components/Preview/PreviewPane.tsx b/website/src/modules/playground/components/Preview/PreviewPane.tsx
new file mode 100644
index 000000000..2743412ba
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/PreviewPane.tsx
@@ -0,0 +1,52 @@
+import React, { FunctionComponent } from "react";
+import { ToolbarContainer, ToolbarTitle } from "../Toolbar";
+import ComponentSelect from "./ComponentSelect";
+import { usePreviewContext } from "./context";
+import EnvironmentSelect from "./EnvironmentSelect";
+import ProgressBar from "./ProgressBar";
+import styles from "./styles.module.scss";
+import CodeMirrorEditor from "../CodeMirrorEditor";
+import { noop } from "lodash";
+import { EditorConfiguration } from "codemirror";
+
+try {
+  require("codemirror/mode/yaml/yaml.js");
+} catch {
+  // ignore error
+}
+
+const EDITOR_OPTIONS: EditorConfiguration = {
+  readOnly: true,
+  mode: "yaml"
+};
+
+const PreviewPane: FunctionComponent = () => {
+  const {
+    value: { updating, content }
+  } = usePreviewContext();
+
+  return (
+    <div className={styles.pane}>
+      <ToolbarContainer>
+        <ToolbarTitle>Preview</ToolbarTitle>
+        <ComponentSelect />
+        <EnvironmentSelect />
+      </ToolbarContainer>
+      <div className={styles.previewPaneContent}>
+        <CodeMirrorEditor
+          className={styles.previewPaneEditor}
+          value={content}
+          options={EDITOR_OPTIONS}
+          onBeforeChange={noop}
+        />
+        {updating && (
+          <div className={styles.previewPaneProgressBar}>
+            <ProgressBar />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PreviewPane;
diff --git a/website/src/modules/playground/components/Preview/ProgressBar.tsx b/website/src/modules/playground/components/Preview/ProgressBar.tsx
new file mode 100644
index 000000000..e731a2257
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/ProgressBar.tsx
@@ -0,0 +1,12 @@
+import React, { FunctionComponent } from "react";
+import styles from "./styles.module.scss";
+
+const ProgressBar: FunctionComponent = () => {
+  return (
+    <div className={styles.progressBarContainer}>
+      <div className={styles.progressBarBlock} />
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/website/src/modules/playground/components/Preview/Select.tsx b/website/src/modules/playground/components/Preview/Select.tsx
new file mode 100644
index 000000000..415be1b60
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/Select.tsx
@@ -0,0 +1,36 @@
+import React, { FunctionComponent, ReactNode } from "react";
+import styles from "./styles.module.scss";
+
+interface SelectProps {
+  label: ReactNode;
+  value: string;
+  options: readonly string[];
+  onChange(value: string): void;
+}
+
+const Select: FunctionComponent<SelectProps> = ({
+  label,
+  value,
+  options,
+  onChange
+}) => {
+  return (
+    <label className={styles.selectContainer}>
+      <div className={styles.selectLabel}>{label}</div>
+      <select
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+      >
+        {options.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+};
+
+export default Select;
diff --git a/website/src/modules/playground/components/Preview/WarningIcon.tsx b/website/src/modules/playground/components/Preview/WarningIcon.tsx
new file mode 100644
index 000000000..d012240d8
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/WarningIcon.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+import styles from "./styles.module.scss";
+import { VscWarning } from "react-icons/vsc";
+
+const WarningIcon: FunctionComponent = () => {
+  return (
+    <div className={styles.warningIcon}>
+      <VscWarning />
+    </div>
+  );
+};
+
+export default WarningIcon;
diff --git a/website/src/modules/playground/components/Preview/context.tsx b/website/src/modules/playground/components/Preview/context.tsx
new file mode 100644
index 000000000..67ffc264e
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/context.tsx
@@ -0,0 +1,47 @@
+import { Draft } from "immer";
+import { noop } from "lodash";
+import React, {
+  createContext,
+  FunctionComponent,
+  useContext,
+  useMemo
+} from "react";
+import { useImmer } from "use-immer";
+
+export interface PreviewContextValue {
+  updating: boolean;
+  content: string;
+  warnings: string[];
+  errors?: any[];
+}
+
+export const PreviewContext = createContext<{
+  value: PreviewContextValue;
+  updateValue(callback: (draft: Draft<PreviewContextValue>) => void): void;
+}>({
+  value: {
+    updating: false,
+    content: "",
+    warnings: [],
+    errors: []
+  },
+  updateValue: noop
+});
+
+export function usePreviewContext() {
+  return useContext(PreviewContext);
+}
+
+export const PreviewContextProvider: FunctionComponent = ({ children }) => {
+  const [value, updateValue] = useImmer<PreviewContextValue>({
+    updating: false,
+    content: "",
+    warnings: [],
+    errors: []
+  });
+  const ctx = useMemo(() => ({ value, updateValue }), [value, updateValue]);
+
+  return (
+    <PreviewContext.Provider value={ctx}>{children}</PreviewContext.Provider>
+  );
+};
diff --git a/website/src/modules/playground/components/Preview/index.tsx b/website/src/modules/playground/components/Preview/index.tsx
new file mode 100644
index 000000000..aaf056eff
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/index.tsx
@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from "react";
+import styles from "./styles.module.scss";
+import { PreviewContextProvider } from "./context";
+import { Section } from "react-simple-resizer";
+import Bar from "../Bar";
+import Container from "../Container";
+import PreviewPane from "./PreviewPane";
+import ErrorPane, { DEFAULT_SIZE } from "./ErrorPane";
+import Executor from "./Executor";
+
+const Preview: FunctionComponent = () => {
+  return (
+    <PreviewContextProvider>
+      <Container vertical className={styles.container}>
+        <Section minSize={40}>
+          <PreviewPane />
+        </Section>
+        <Bar />
+        <Section
+          defaultSize={DEFAULT_SIZE}
+          minSize={DEFAULT_SIZE}
+          disableResponsive
+        >
+          <ErrorPane />
+        </Section>
+      </Container>
+      <Executor />
+    </PreviewContextProvider>
+  );
+};
+
+export default Preview;
diff --git a/website/src/modules/playground/components/Preview/styles.module.scss b/website/src/modules/playground/components/Preview/styles.module.scss
new file mode 100644
index 000000000..6afcbdc81
--- /dev/null
+++ b/website/src/modules/playground/components/Preview/styles.module.scss
@@ -0,0 +1,123 @@
+.container {
+  height: 100%;
+  overflow: hidden;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.previewPaneContent {
+  flex: 1;
+  position: relative;
+}
+
+.previewPaneEditor {
+  height: 100%;
+}
+
+.previewPaneProgressBar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.progressBarContainer {
+  height: 0.375rem;
+  pointer-events: none;
+  opacity: 0.75;
+}
+
+.progressBarBlock {
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    var(--ifm-color-primary-lightest),
+    var(--ifm-color-primary)
+  );
+  width: 50%;
+  animation-name: progressBarBlock;
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes progressBarBlock {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+.selectContainer {
+  display: flex;
+  align-items: center;
+  border-left: 1px solid var(--ifm-color-emphasis-500);
+  padding-left: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+.selectLabel {
+  font-size: 0.875rem;
+  padding-right: 0.5rem;
+}
+
+.errorIcon {
+  color: var(--ifm-color-danger);
+}
+
+.warningIcon {
+  color: var(--ifm-color-warning);
+}
+
+.errorPaneSummaryContainer {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+  font-size: 0.875rem;
+  line-height: 1;
+}
+
+.errorPaneSummaryValue {
+  padding-left: 0.25rem;
+}
+
+.errorPaneList {
+  flex: 1;
+  overflow: auto;
+}
+
+.errorPaneCellContainer {
+  padding: 0.25rem 0.75rem;
+  cursor: pointer;
+}
+
+.errorPaneCellSummary {
+  display: flex;
+}
+
+.errorPaneCellIcon {
+  flex-shrink: 0;
+}
+
+.errorPaneCellMessage {
+  font-size: 0.875rem;
+  padding-left: 0.5rem;
+  flex: 1;
+}
+
+.errorPaneCellDetail {
+  font-size: 0.875rem;
+  padding-left: 1.375rem;
+}
+
+.errorPaneToolbar {
+  cursor: pointer;
+}
diff --git a/website/src/modules/playground/components/Sidebar/Action.tsx b/website/src/modules/playground/components/Sidebar/Action.tsx
new file mode 100644
index 000000000..edd2ff7da
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/Action.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent, ReactNode } from "react";
+import styles from "./styles.module.scss";
+
+export const ActionContainer: FunctionComponent = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+export const ActionButton: FunctionComponent<{
+  title: string;
+  onClick?(): void;
+  icon: ReactNode;
+}> = ({ icon, title, onClick }) => {
+  return (
+    <button
+      type="button"
+      title={title}
+      onClick={onClick}
+      className={styles.actionButton}
+    >
+      {icon}
+    </button>
+  );
+};
diff --git a/website/src/modules/playground/components/Sidebar/Cell.tsx b/website/src/modules/playground/components/Sidebar/Cell.tsx
new file mode 100644
index 000000000..3dc992656
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/Cell.tsx
@@ -0,0 +1,37 @@
+import React, { FunctionComponent, ReactNode } from "react";
+import clsx from "clsx";
+import styles from "./styles.module.scss";
+import { Entry } from "./types";
+
+const Cell: FunctionComponent<{
+  entry: Entry;
+  icon: ReactNode;
+  depth: number;
+  onClick?(): void;
+  action?: ReactNode;
+  active?: boolean;
+}> = ({ children, entry, icon, depth, onClick, action, active }) => {
+  return (
+    <div>
+      <div
+        className={clsx(styles.cellMain, {
+          [styles.cellMainActive]: active
+        })}
+      >
+        <button
+          type="button"
+          className={styles.cellButton}
+          style={{ paddingLeft: `${(depth + 1) * 0.75}rem` }}
+          onClick={onClick}
+        >
+          <div className={styles.cellIcon}>{icon}</div>
+          <div className={styles.cellLabel}>{entry.name}</div>
+        </button>
+        {action && <div className={styles.cellAction}>{action}</div>}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default Cell;
diff --git a/website/src/modules/playground/components/Sidebar/DirectoryAction.tsx b/website/src/modules/playground/components/Sidebar/DirectoryAction.tsx
new file mode 100644
index 000000000..a1be3d002
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/DirectoryAction.tsx
@@ -0,0 +1,140 @@
+import React, { FunctionComponent } from "react";
+import { ActionButton, ActionContainer } from "./Action";
+import { VscNewFolder, VscNewFile, VscEdit, VscTrash } from "react-icons/vsc";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import { dirname, sep } from "@site/src/utils/path";
+import { DIRECTORY_PLACEHOLDER } from "../../constants";
+import { isValidName } from "./utils";
+
+const DirectoryAction: FunctionComponent<{
+  path: string;
+  showFileActions?: boolean;
+}> = ({ path, showFileActions }) => {
+  const {
+    value: { files },
+    updateValue
+  } = usePlaygroundContext();
+
+  return (
+    <ActionContainer>
+      <ActionButton
+        title="New file"
+        icon={<VscNewFile />}
+        onClick={() => {
+          const name = prompt("Name of new file");
+          if (!name) return;
+
+          if (!isValidName(name)) {
+            alert(`File name "${name}" is invalid`);
+            return;
+          }
+
+          const newPath = `${path}${sep}${name}.js`;
+
+          if (files[newPath] != null) {
+            alert(`File "${newPath}" already exists`);
+            return;
+          }
+
+          updateValue((draft) => {
+            draft.files[newPath] = "";
+            draft.activePath = newPath;
+          });
+        }}
+      />
+      <ActionButton
+        title="New folder"
+        icon={<VscNewFolder />}
+        onClick={() => {
+          const name = prompt("Name of new folder");
+          if (!name) return;
+
+          if (!isValidName(name)) {
+            alert(`Folder name "${name}" is invalid`);
+            return;
+          }
+
+          const dir = `${path}${sep}${name}`;
+          const newPath = `${dir}${sep}${DIRECTORY_PLACEHOLDER}`;
+
+          if (files[newPath] != null) {
+            alert(`Folder "${dir}" already exists`);
+            return;
+          }
+
+          updateValue((draft) => {
+            draft.files[newPath] = "";
+          });
+        }}
+      />
+      {showFileActions && (
+        <>
+          <ActionButton
+            title="Rename"
+            icon={<VscEdit />}
+            onClick={() => {
+              const name = prompt("New name of the folder");
+              if (!name) return;
+
+              if (!isValidName(name)) {
+                alert(`Folder name "${name}" is invalid`);
+                return;
+              }
+
+              const parentDir = dirname(path);
+              const newDirPath = `${parentDir}${
+                parentDir.endsWith(sep) ? "" : sep
+              }${name}`;
+              const newPlaceholderPath = `${newDirPath}${sep}${DIRECTORY_PLACEHOLDER}`;
+
+              if (files[newPlaceholderPath] != null) {
+                alert(`Folder "${newDirPath}" already exists`);
+                return;
+              }
+
+              updateValue((draft) => {
+                for (const key of Object.keys(draft.files)) {
+                  if (!key.startsWith(`${path}${sep}`)) continue;
+
+                  const newPath = `${newDirPath}${key.substring(path.length)}`;
+
+                  if (draft.activePath === key) {
+                    draft.activePath = newPath;
+                  }
+
+                  draft.files[newPath] = draft.files[key];
+                  delete draft.files[key];
+                }
+              });
+            }}
+          />
+          <ActionButton
+            title="Delete"
+            icon={<VscTrash />}
+            onClick={() => {
+              if (!confirm("Are you sure to delete this folder?")) {
+                return;
+              }
+
+              updateValue((draft) => {
+                const pathsToDelete = Object.keys(draft.files).filter((key) =>
+                  key.startsWith(`${path}${sep}`)
+                );
+
+                if (pathsToDelete.includes(draft.activePath)) {
+                  draft.activePath = undefined;
+                }
+
+                for (const path of pathsToDelete) {
+                  delete draft.files[path];
+                }
+              });
+            }}
+          />
+        </>
+      )}
+    </ActionContainer>
+  );
+};
+
+export default DirectoryAction;
diff --git a/website/src/modules/playground/components/Sidebar/DirectoryCell.tsx b/website/src/modules/playground/components/Sidebar/DirectoryCell.tsx
new file mode 100644
index 000000000..ba15a598d
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/DirectoryCell.tsx
@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from "react";
+import { Directory } from "./types";
+import { FcFolder } from "react-icons/fc";
+import Cell from "./Cell";
+import Tree from "./Tree";
+import DirectoryAction from "./DirectoryAction";
+
+const DirectoryCell: FunctionComponent<{ entry: Directory; depth: number }> = ({
+  entry,
+  depth
+}) => {
+  return (
+    <Cell
+      entry={entry}
+      icon={<FcFolder />}
+      depth={depth}
+      action={<DirectoryAction path={entry.path} showFileActions />}
+    >
+      <Tree entries={entry.children} depth={depth + 1} />
+    </Cell>
+  );
+};
+
+export default DirectoryCell;
diff --git a/website/src/modules/playground/components/Sidebar/FileAction.tsx b/website/src/modules/playground/components/Sidebar/FileAction.tsx
new file mode 100644
index 000000000..36e77d611
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/FileAction.tsx
@@ -0,0 +1,68 @@
+import React, { FunctionComponent } from "react";
+import { ActionButton, ActionContainer } from "./Action";
+import { VscEdit, VscTrash } from "react-icons/vsc";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import { dirname, sep } from "@site/src/utils/path";
+import { isValidName } from "./utils";
+
+const FileAction: FunctionComponent<{ path: string }> = ({ path }) => {
+  const {
+    value: { files },
+    updateValue
+  } = usePlaygroundContext();
+
+  return (
+    <ActionContainer>
+      <ActionButton
+        title="Rename"
+        icon={<VscEdit />}
+        onClick={() => {
+          const name = prompt("New name of the file");
+          if (!name) return;
+
+          if (!isValidName(name)) {
+            alert(`File name "${name}" is invalid`);
+            return;
+          }
+
+          const dir = dirname(path);
+          const newPath = `${dir}${dir.endsWith(sep) ? "" : sep}${name}.js`;
+          if (path === newPath) return;
+
+          if (files[newPath] != null) {
+            alert(`File "${newPath}" already exists`);
+            return;
+          }
+
+          updateValue((draft) => {
+            draft.files[newPath] = draft.files[path];
+            delete draft.files[path];
+
+            if (draft.activePath === path) {
+              draft.activePath = newPath;
+            }
+          });
+        }}
+      />
+      <ActionButton
+        title="Delete"
+        icon={<VscTrash />}
+        onClick={() => {
+          if (!confirm("Are you sure to delete this file?")) {
+            return;
+          }
+
+          updateValue((draft) => {
+            if (draft.activePath === path) {
+              draft.activePath = undefined;
+            }
+
+            delete draft.files[path];
+          });
+        }}
+      />
+    </ActionContainer>
+  );
+};
+
+export default FileAction;
diff --git a/website/src/modules/playground/components/Sidebar/FileCell.tsx b/website/src/modules/playground/components/Sidebar/FileCell.tsx
new file mode 100644
index 000000000..873103396
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/FileCell.tsx
@@ -0,0 +1,33 @@
+import React, { FunctionComponent } from "react";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import { File } from "./types";
+import { FcFile } from "react-icons/fc";
+import Cell from "./Cell";
+import FileAction from "./FileAction";
+
+const FileCell: FunctionComponent<{ entry: File; depth: number }> = ({
+  entry,
+  depth
+}) => {
+  const {
+    value: { activePath },
+    updateValue
+  } = usePlaygroundContext();
+
+  return (
+    <Cell
+      entry={entry}
+      icon={<FcFile />}
+      depth={depth}
+      action={<FileAction path={entry.path} />}
+      active={activePath === entry.path}
+      onClick={() => {
+        updateValue((draft) => {
+          draft.activePath = entry.path;
+        });
+      }}
+    />
+  );
+};
+
+export default FileCell;
diff --git a/website/src/modules/playground/components/Sidebar/Tree.tsx b/website/src/modules/playground/components/Sidebar/Tree.tsx
new file mode 100644
index 000000000..9bfc4a34e
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/Tree.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+import { Entry, EntryType } from "./types";
+import DirectoryCell from "./DirectoryCell";
+import FileCell from "./FileCell";
+
+const Tree: FunctionComponent<{
+  entries: readonly Entry[];
+  depth?: number;
+}> = ({ entries, depth = 0 }) => {
+  return (
+    <div>
+      {entries.map((entry) =>
+        entry.type === EntryType.Directory ? (
+          <DirectoryCell key={entry.name} entry={entry} depth={depth} />
+        ) : (
+          <FileCell key={entry.name} entry={entry} depth={depth} />
+        )
+      )}
+    </div>
+  );
+};
+
+export default Tree;
diff --git a/website/src/modules/playground/components/Sidebar/generateEntries.ts b/website/src/modules/playground/components/Sidebar/generateEntries.ts
new file mode 100644
index 000000000..97057a663
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/generateEntries.ts
@@ -0,0 +1,59 @@
+import { groupBy } from "lodash";
+import { sep } from "@site/src/utils/path";
+import { Entry, EntryType, File, Directory } from "./types";
+import { DIRECTORY_PLACEHOLDER } from "../../constants";
+
+function doGenerateEntries(
+  paths: readonly string[],
+  prefix: string
+): readonly Entry[] {
+  const { "": files = [], ...dirs } = groupBy(paths, (path) => {
+    const index = path.indexOf(sep);
+    return index === -1 ? "" : path.substring(0, index);
+  });
+
+  return [
+    ...Object.entries(dirs).map(
+      ([name, children]): Directory => {
+        return {
+          type: EntryType.Directory,
+          name,
+          path: prefix + name,
+          children: doGenerateEntries(
+            children.map((v) => v.substring(name.length + 1)),
+            prefix + name + sep
+          )
+        };
+      }
+    ),
+    ...files
+      .filter((name) => name !== DIRECTORY_PLACEHOLDER)
+      .map(
+        (name): File => ({
+          type: EntryType.File,
+          name,
+          path: prefix + name
+        })
+      )
+  ].sort((a, b) => {
+    // Move directories to the front
+    if (a.type !== b.type) {
+      if (a.type === EntryType.Directory) return -1;
+      if (b.type === EntryType.Directory) return 1;
+    }
+
+    // Sort by name
+    if (a.name > b.name) return 1;
+    if (a.name < b.name) return -1;
+    return 0;
+  });
+}
+
+export default function generateEntries(
+  paths: readonly string[]
+): readonly Entry[] {
+  return doGenerateEntries(
+    paths.map((path) => path.substring(1)),
+    sep
+  );
+}
diff --git a/website/src/modules/playground/components/Sidebar/index.tsx b/website/src/modules/playground/components/Sidebar/index.tsx
new file mode 100644
index 000000000..436a15900
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/index.tsx
@@ -0,0 +1,31 @@
+import React, { FunctionComponent, useMemo } from "react";
+import usePlaygroundContext from "../../hooks/usePlaygroundContext";
+import { ToolbarContainer, ToolbarTitle } from "../Toolbar";
+import styles from "./styles.module.scss";
+import generateEntries from "./generateEntries";
+import Tree from "./Tree";
+import DirectoryAction from "./DirectoryAction";
+
+const Sidebar: FunctionComponent = () => {
+  const {
+    value: { files }
+  } = usePlaygroundContext();
+  const entries = useMemo(() => generateEntries(Object.keys(files)), [files]);
+
+  return (
+    <aside className={styles.container}>
+      <ToolbarContainer>
+        <ToolbarTitle>Files</ToolbarTitle>
+        <div className={styles.toolbarSpacing} />
+        <DirectoryAction path="" />
+      </ToolbarContainer>
+      <div className={styles.treeContainer}>
+        <div className={styles.tree}>
+          <Tree entries={entries} />
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;
diff --git a/website/src/modules/playground/components/Sidebar/styles.module.scss b/website/src/modules/playground/components/Sidebar/styles.module.scss
new file mode 100644
index 000000000..95e97dbca
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/styles.module.scss
@@ -0,0 +1,79 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+.treeContainer {
+  flex: 1;
+  position: relative;
+}
+
+.tree {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+}
+
+.cellMain {
+  display: flex;
+}
+
+.cellMainActive {
+  background: var(--ifm-color-emphasis-200);
+}
+
+.cellButton {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ifm-font-color-base);
+  padding: 0;
+  font: inherit;
+  appearance: none;
+  vertical-align: middle;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+.cellIcon {
+  padding-top: 0.25rem;
+  padding-right: 0.375rem;
+}
+
+.cellLabel {
+  flex: 1;
+}
+
+.cellAction {
+  display: flex;
+  display: none;
+  padding: 0 0.25rem;
+
+  .cellMain:hover & {
+    display: block;
+  }
+}
+
+.actionButton {
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: var(--ifm-font-color-base);
+}
+
+.toolbarSpacing {
+  flex: 1;
+}
diff --git a/website/src/modules/playground/components/Sidebar/types.ts b/website/src/modules/playground/components/Sidebar/types.ts
new file mode 100644
index 000000000..f92f692e1
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/types.ts
@@ -0,0 +1,21 @@
+export enum EntryType {
+  File,
+  Directory
+}
+
+interface BaseEntry {
+  type: EntryType;
+  name: string;
+  path: string;
+}
+
+export interface File extends BaseEntry {
+  type: EntryType.File;
+}
+
+export interface Directory extends BaseEntry {
+  type: EntryType.Directory;
+  children: readonly Entry[];
+}
+
+export type Entry = File | Directory;
diff --git a/website/src/modules/playground/components/Sidebar/utils.ts b/website/src/modules/playground/components/Sidebar/utils.ts
new file mode 100644
index 000000000..92aa9914d
--- /dev/null
+++ b/website/src/modules/playground/components/Sidebar/utils.ts
@@ -0,0 +1,3 @@
+export function isValidName(value: string): boolean {
+  return /^[\w-_.]+$/.test(value);
+}
diff --git a/website/src/modules/playground/components/Toolbar/index.tsx b/website/src/modules/playground/components/Toolbar/index.tsx
new file mode 100644
index 000000000..2f7745366
--- /dev/null
+++ b/website/src/modules/playground/components/Toolbar/index.tsx
@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from "react";
+import clsx from "clsx";
+import styles from "./styles.module.scss";
+
+export const ToolbarContainer: FunctionComponent<{
+  onClick?(): void;
+  className?: string;
+}> = ({ children, onClick, className }) => {
+  return (
+    <div className={clsx(styles.container, className)} onClick={onClick}>
+      {children}
+    </div>
+  );
+};
+
+export const ToolbarTitle: FunctionComponent = ({ children }) => {
+  return <div className={styles.title}>{children}</div>;
+};
diff --git a/website/src/modules/playground/components/Toolbar/styles.module.scss b/website/src/modules/playground/components/Toolbar/styles.module.scss
new file mode 100644
index 000000000..d8ad3f845
--- /dev/null
+++ b/website/src/modules/playground/components/Toolbar/styles.module.scss
@@ -0,0 +1,12 @@
+.container {
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: bold;
+}
diff --git a/website/src/modules/playground/constants.ts b/website/src/modules/playground/constants.ts
new file mode 100644
index 000000000..f83bf8963
--- /dev/null
+++ b/website/src/modules/playground/constants.ts
@@ -0,0 +1,5 @@
+export const COMPONENT_DIR = "/components/";
+export const ENVIRONMENT_DIR = "/environments/";
+export const JS_EXT = ".js";
+export const MODULE_ENTRY = `index${JS_EXT}`;
+export const DIRECTORY_PLACEHOLDER = "%dir%";
diff --git a/website/src/modules/playground/context.ts b/website/src/modules/playground/context.ts
new file mode 100644
index 000000000..2b5699437
--- /dev/null
+++ b/website/src/modules/playground/context.ts
@@ -0,0 +1,22 @@
+import { Draft } from "immer";
+import { createContext } from "react";
+import { noop } from "lodash";
+
+export interface PlaygroundContextValue {
+  activePath?: string;
+  files: Record<string, string>;
+  component: string;
+  environment: string;
+}
+
+export const PlaygroundContext = createContext<{
+  value: PlaygroundContextValue;
+  updateValue(callback: (draft: Draft<PlaygroundContextValue>) => void): void;
+}>({
+  value: {
+    files: {},
+    component: "",
+    environment: ""
+  },
+  updateValue: noop
+});
diff --git a/website/src/modules/playground/fixtures/.eslintrc b/website/src/modules/playground/fixtures/.eslintrc
new file mode 100644
index 000000000..f34cb12b0
--- /dev/null
+++ b/website/src/modules/playground/fixtures/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../.eslintrc",
+  "rules": {
+    "node/no-extraneous-import": "off"
+  }
+}
diff --git a/website/src/modules/playground/fixtures/components/mongo.js b/website/src/modules/playground/fixtures/components/mongo.js
new file mode 100644
index 000000000..75401658c
--- /dev/null
+++ b/website/src/modules/playground/fixtures/components/mongo.js
@@ -0,0 +1,76 @@
+import { Deployment } from "kubernetes-models/apps/v1/Deployment";
+import { Service } from "kubernetes-models/v1/Service";
+import { PersistentVolumeClaim } from "kubernetes-models/v1/PersistentVolumeClaim";
+import env from "@kosko/env";
+
+const params = env.component("mongo");
+
+const metadata = { name: "mongo", namespace: params.namespace };
+const labels = { app: "mongo" };
+
+const pvc = new PersistentVolumeClaim({
+  metadata,
+  spec: {
+    accessModes: ["ReadWriteOnce"],
+    resources: {
+      requests: {
+        storage: params.storageSize
+      }
+    }
+  }
+});
+
+const deployment = new Deployment({
+  metadata,
+  spec: {
+    replicas: 1,
+    strategy: {
+      type: "Recreate"
+    },
+    selector: {
+      matchLabels: labels
+    },
+    template: {
+      metadata: { labels },
+      spec: {
+        containers: [
+          {
+            image: "mongo:4.4",
+            name: "mongo",
+            ports: [{ containerPort: 27017 }],
+            env: [
+              {
+                name: "MONGO_INITDB_DATABASE",
+                value: params.database
+              }
+            ],
+            volumeMounts: [
+              {
+                name: "data",
+                mountPath: "/data/db"
+              }
+            ]
+          }
+        ],
+        volumes: [
+          {
+            name: "data",
+            persistentVolumeClaim: {
+              claimName: metadata.name
+            }
+          }
+        ]
+      }
+    }
+  }
+});
+
+const service = new Service({
+  metadata,
+  spec: {
+    selector: labels,
+    ports: [{ port: 27017 }]
+  }
+});
+
+export default [pvc, deployment, service];
diff --git a/website/src/modules/playground/fixtures/components/nginx.js b/website/src/modules/playground/fixtures/components/nginx.js
new file mode 100644
index 000000000..3140ef0fa
--- /dev/null
+++ b/website/src/modules/playground/fixtures/components/nginx.js
@@ -0,0 +1,40 @@
+import { Deployment } from "kubernetes-models/apps/v1/Deployment";
+import { Service } from "kubernetes-models/v1/Service";
+import env from "@kosko/env";
+
+const params = env.component("nginx");
+
+const metadata = { name: "nginx", namespace: params.namespace };
+const labels = { app: "nginx" };
+
+const deployment = new Deployment({
+  metadata,
+  spec: {
+    replicas: params.replicas,
+    selector: {
+      matchLabels: labels
+    },
+    template: {
+      metadata: { labels },
+      spec: {
+        containers: [
+          {
+            image: `nginx:${params.imageTag}`,
+            name: "nginx",
+            ports: [{ containerPort: 80 }]
+          }
+        ]
+      }
+    }
+  }
+});
+
+const service = new Service({
+  metadata,
+  spec: {
+    selector: labels,
+    ports: [{ port: 80 }]
+  }
+});
+
+export default [deployment, service];
diff --git a/website/src/modules/playground/fixtures/environments/dev/index.js b/website/src/modules/playground/fixtures/environments/dev/index.js
new file mode 100644
index 000000000..97e44776e
--- /dev/null
+++ b/website/src/modules/playground/fixtures/environments/dev/index.js
@@ -0,0 +1,3 @@
+export default {
+  namespace: "dev"
+};
diff --git a/website/src/modules/playground/fixtures/environments/dev/mongo.js b/website/src/modules/playground/fixtures/environments/dev/mongo.js
new file mode 100644
index 000000000..4ef41e57e
--- /dev/null
+++ b/website/src/modules/playground/fixtures/environments/dev/mongo.js
@@ -0,0 +1,4 @@
+export default {
+  database: "app-dev",
+  storageSize: "10Gi"
+};
diff --git a/website/src/modules/playground/fixtures/environments/dev/nginx.js b/website/src/modules/playground/fixtures/environments/dev/nginx.js
new file mode 100644
index 000000000..1f8bc294b
--- /dev/null
+++ b/website/src/modules/playground/fixtures/environments/dev/nginx.js
@@ -0,0 +1,4 @@
+export default {
+  replicas: 1,
+  imageTag: "latest"
+};
diff --git a/website/src/modules/playground/fixtures/environments/prod/index.js b/website/src/modules/playground/fixtures/environments/prod/index.js
new file mode 100644
index 000000000..97a399cf5
--- /dev/null
+++ b/website/src/modules/playground/fixtures/environments/prod/index.js
@@ -0,0 +1,3 @@
+export default {
+  namespace: "prod"
+};
diff --git a/website/src/modules/playground/fixtures/environments/prod/mongo.js b/website/src/modules/playground/fixtures/environments/prod/mongo.js
new file mode 100644
index 000000000..0b53431f1
--- /dev/null
+++ b/website/src/modules/playground/fixtures/environments/prod/mongo.js
@@ -0,0 +1,4 @@
+export default {
+  database: "app-prod",
+  storageSize: "100Gi"
+};
diff --git a/website/src/modules/playground/fixtures/environments/prod/nginx.js b/website/src/modules/playground/fixtures/environments/prod/nginx.js
new file mode 100644
index 000000000..9f50b4ffe
--- /dev/null
+++ b/website/src/modules/playground/fixtures/environments/prod/nginx.js
@@ -0,0 +1,4 @@
+export default {
+  replicas: 3,
+  imageTag: "stable"
+};
diff --git a/website/src/modules/playground/hooks/useComponentList.ts b/website/src/modules/playground/hooks/useComponentList.ts
new file mode 100644
index 000000000..d565e4d06
--- /dev/null
+++ b/website/src/modules/playground/hooks/useComponentList.ts
@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import usePlaygroundContext from "./usePlaygroundContext";
+import { sep } from "@site/src/utils/path";
+import { COMPONENT_DIR, JS_EXT } from "../constants";
+
+export default function useComponentList(): readonly string[] {
+  const {
+    value: { files }
+  } = usePlaygroundContext();
+
+  return useMemo(() => {
+    const result: string[] = [];
+
+    for (const key of Object.keys(files)) {
+      // The path must be placed in the components directory.
+      if (!key.startsWith(COMPONENT_DIR)) continue;
+
+      const name = key.substring(COMPONENT_DIR.length);
+
+      // The path must not be a directory.
+      if (name.includes(sep)) continue;
+
+      // The path must be a .js file.
+      if (!name.endsWith(JS_EXT)) continue;
+
+      result.push(name.substring(0, name.length - JS_EXT.length));
+    }
+
+    return result.sort();
+  }, [files]);
+}
diff --git a/website/src/modules/playground/hooks/useEnvironmentList.ts b/website/src/modules/playground/hooks/useEnvironmentList.ts
new file mode 100644
index 000000000..80e60c88d
--- /dev/null
+++ b/website/src/modules/playground/hooks/useEnvironmentList.ts
@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import usePlaygroundContext from "./usePlaygroundContext";
+import { sep } from "@site/src/utils/path";
+import { ENVIRONMENT_DIR } from "../constants";
+
+export default function useEnvironmentList(): readonly string[] {
+  const {
+    value: { files }
+  } = usePlaygroundContext();
+
+  return useMemo(() => {
+    const result: Record<string, boolean> = {};
+
+    for (const key of Object.keys(files)) {
+      // The path must be placed in the components directory.
+      if (!key.startsWith(ENVIRONMENT_DIR)) continue;
+
+      const [name, ...rest] = key.substring(ENVIRONMENT_DIR.length).split(sep);
+
+      // If `rest` is empty, it means the path is not a directory, so skip it.
+      if (!rest.length) continue;
+
+      result[name] = true;
+    }
+
+    return Object.keys(result).sort();
+  }, [files]);
+}
diff --git a/website/src/modules/playground/hooks/usePlaygroundContext.ts b/website/src/modules/playground/hooks/usePlaygroundContext.ts
new file mode 100644
index 000000000..d1c11816e
--- /dev/null
+++ b/website/src/modules/playground/hooks/usePlaygroundContext.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { PlaygroundContext } from "../context";
+
+export default function usePlaygroundContext() {
+  return useContext(PlaygroundContext);
+}
diff --git a/website/src/modules/playground/worker/index.ts b/website/src/modules/playground/worker/index.ts
new file mode 100644
index 000000000..4a4824c47
--- /dev/null
+++ b/website/src/modules/playground/worker/index.ts
@@ -0,0 +1,17 @@
+// import { wrap } from "comlink";
+import type { Bundler } from "./types";
+
+export function createBundler(): Bundler {
+  // FIXME: Currently the worker build failed on production.
+  // const worker = new Worker(new URL("./worker", import.meta.url));
+  // return wrap<PlaygroundWorker>(worker);
+
+  return {
+    async bundle(options) {
+      const { bundle } = await import("./rollup");
+      return bundle(options);
+    }
+  };
+}
+
+export * from "./types";
diff --git a/website/src/modules/playground/worker/rollup/index.ts b/website/src/modules/playground/worker/rollup/index.ts
new file mode 100644
index 000000000..498865d46
--- /dev/null
+++ b/website/src/modules/playground/worker/rollup/index.ts
@@ -0,0 +1,35 @@
+import { BundleOptions, BundleResult } from "../types";
+import * as rollup from "rollup/dist/rollup.browser";
+import type { SourceMap } from "rollup";
+import entry from "./plugins/entry";
+import virtualFS from "./plugins/virtualFS";
+import cdn from "./plugins/cdn";
+
+function generateInlineSourceMap(map: SourceMap): string {
+  return `//# sourceMappingURL=data:application/json;base64,${btoa(
+    JSON.stringify(map)
+  )}`;
+}
+
+export async function bundle(options: BundleOptions): Promise<BundleResult> {
+  const warnings: string[] = [];
+  const build = await rollup.rollup({
+    plugins: [entry(options), virtualFS(options.files), cdn()],
+    onwarn(warning) {
+      warnings.push(warning.toString());
+    }
+  });
+
+  const result = await build.generate({
+    sourcemap: true
+  });
+
+  const output = result.output[0];
+
+  return {
+    code: output.map
+      ? output.code + "\n" + generateInlineSourceMap(output.map)
+      : output.code,
+    warnings
+  };
+}
diff --git a/website/src/modules/playground/worker/rollup/plugins/alias.ts b/website/src/modules/playground/worker/rollup/plugins/alias.ts
new file mode 100644
index 000000000..ae1d8a448
--- /dev/null
+++ b/website/src/modules/playground/worker/rollup/plugins/alias.ts
@@ -0,0 +1,11 @@
+import type { Plugin } from "rollup";
+
+export default function alias(aliases: Record<string, string>): Plugin {
+  return {
+    name: "alias",
+    resolveId(source) {
+      const alias = aliases[source];
+      if (alias) return alias;
+    }
+  };
+}
diff --git a/website/src/modules/playground/worker/rollup/plugins/cdn.ts b/website/src/modules/playground/worker/rollup/plugins/cdn.ts
new file mode 100644
index 000000000..506da0e9f
--- /dev/null
+++ b/website/src/modules/playground/worker/rollup/plugins/cdn.ts
@@ -0,0 +1,27 @@
+import type { Plugin } from "rollup";
+import { isRelative, isAbsolute } from "@site/src/utils/path";
+import { getModuleURLForCDN } from "../utils";
+
+function isURL(url: string): boolean {
+  return url.includes(":");
+}
+
+export default function cdn(): Plugin {
+  return {
+    name: "cdn",
+    resolveId(source) {
+      if (isRelative(source) || isAbsolute(source)) {
+        return;
+      }
+
+      if (isURL(source)) {
+        return false;
+      }
+
+      return {
+        id: getModuleURLForCDN(source),
+        external: true
+      };
+    }
+  };
+}
diff --git a/website/src/modules/playground/worker/rollup/plugins/entry.ts b/website/src/modules/playground/worker/rollup/plugins/entry.ts
new file mode 100644
index 000000000..109385fcd
--- /dev/null
+++ b/website/src/modules/playground/worker/rollup/plugins/entry.ts
@@ -0,0 +1,124 @@
+import type { Plugin } from "rollup";
+import { BundleOptions } from "../../types";
+import { COMPONENT_DIR, ENVIRONMENT_DIR, JS_EXT } from "../../../constants";
+import { getModuleURLForCDN } from "../utils";
+import { sep } from "@site/src/utils/path";
+
+const PREFIX = "kosko:";
+const ENTRY_ID = `${PREFIX}/entry.js`;
+const ENV_ID = `${PREFIX}/env.js`;
+const KOSKO_ENV = "@kosko/env";
+
+function generateEntry({
+  component,
+  callback
+}: Pick<BundleOptions, "component" | "callback">): string {
+  const componentPath = `${COMPONENT_DIR}${component}${JS_EXT}`;
+
+  return `
+import "${ENV_ID}";
+import { resolve, print, PrintFormat } from "@kosko/generate";
+import component from "${componentPath}";
+
+(async () => {
+  try {
+    const manifests = await resolve(component, {
+      path: "${componentPath}"
+    });
+
+    const result = [];
+
+    print({ manifests }, {
+      format: PrintFormat.YAML,
+      writer: {
+        write(data) {
+          result.push(data);
+        }
+      }
+    });
+
+    ${callback}({
+      type: "success",
+      payload: result.join("")
+    });
+  } catch (err) {
+    ${callback}({
+      type: "error",
+      payload: {
+        name: err.name,
+        message: err.message,
+        stack: err.stack
+      }
+    });
+  }
+})();
+`;
+}
+
+function generateEnv({
+  files,
+  environment
+}: Pick<BundleOptions, "files" | "environment">): string {
+  const koskoEnv = getModuleURLForCDN(KOSKO_ENV);
+  const envs: Record<string, string> = {};
+
+  for (const path of Object.keys(files)) {
+    if (!path.startsWith(ENVIRONMENT_DIR)) continue;
+
+    const [env, name] = path.substring(ENVIRONMENT_DIR.length).split(sep);
+    if (env !== environment) continue;
+    if (!name || !name.endsWith(JS_EXT)) continue;
+
+    envs[name.substring(0, name.length - JS_EXT.length)] = path;
+  }
+
+  return `
+import { createSyncEnvironment, createSyncLoaderReducers } from "${koskoEnv}";
+${Object.entries(envs)
+  .map(([, path], i) => `import env${i} from "${path}";`)
+  .join("\n")}
+
+const envMap = {
+  ${Object.entries(envs)
+    .map(([name], i) => `"${name}": env${i}`)
+    .join(",\n")}
+};
+const env = createSyncEnvironment();
+
+env.setReducers(reducers => reducers.concat(createSyncLoaderReducers({
+  global: () => envMap.index || {},
+  component: (name) => envMap[name] || {},
+})));
+
+export default env;
+`;
+}
+
+export default function entry(options: BundleOptions): Plugin {
+  return {
+    name: "entry",
+    options(options) {
+      return {
+        ...options,
+        input: ENTRY_ID
+      };
+    },
+    resolveId(source) {
+      if (source.startsWith(PREFIX)) {
+        return source;
+      }
+
+      if (source === KOSKO_ENV) {
+        return ENV_ID;
+      }
+    },
+    load(source) {
+      switch (source) {
+        case ENTRY_ID:
+          return generateEntry(options);
+        case ENV_ID:
+          return generateEnv(options);
+      }
+    }
+  };
+}
diff --git a/website/src/modules/playground/worker/rollup/plugins/virtualFS.ts b/website/src/modules/playground/worker/rollup/plugins/virtualFS.ts
new file mode 100644
index 000000000..dc49193ff
--- /dev/null
+++ b/website/src/modules/playground/worker/rollup/plugins/virtualFS.ts
@@ -0,0 +1,36 @@
+import type { Plugin } from "rollup";
+import {
+  isRelative,
+  isAbsolute,
+  relative,
+  dirname,
+  sep
+} from "@site/src/utils/path";
+
+export default function virtualFS(files: Record<string, string>): Plugin {
+  return {
+    name: "virtual-fs",
+    resolveId(source, importer) {
+      if (isAbsolute(source)) {
+        if (files[source] != null) {
+          return source;
+        }
+
+        return;
+      }
+
+      if (isRelative(source) && importer) {
+        const path = sep + relative(dirname(importer), source);
+
+        if (files[source] != null) {
+          return path;
+        }
+      }
+    },
+    load(id) {
+      if (files[id] != null) {
+        return files[id];
+      }
+    }
+  };
+}
diff --git a/website/src/modules/playground/worker/rollup/utils.ts b/website/src/modules/playground/worker/rollup/utils.ts
new file mode 100644
index 000000000..1e2082bc4
--- /dev/null
+++ b/website/src/modules/playground/worker/rollup/utils.ts
@@ -0,0 +1,3 @@
+export function getModuleURLForCDN(module: string) {
+  return `https://jspm.dev/${module}`;
+}
diff --git a/website/src/modules/playground/worker/types.ts b/website/src/modules/playground/worker/types.ts
new file mode 100644
index 000000000..32ee65f49
--- /dev/null
+++ b/website/src/modules/playground/worker/types.ts
@@ -0,0 +1,15 @@
+export interface BundleOptions {
+  files: Record<string, string>;
+  component: string;
+  environment: string;
+  callback: string;
+}
+
+export interface BundleResult {
+  code: string;
+  warnings: string[];
+}
+
+export interface Bundler {
+  bundle(options: BundleOptions): Promise<BundleResult>;
+}
diff --git a/website/src/modules/playground/worker/worker.ts b/website/src/modules/playground/worker/worker.ts
new file mode 100644
index 000000000..e9c28202c
--- /dev/null
+++ b/website/src/modules/playground/worker/worker.ts
@@ -0,0 +1,9 @@
+import { expose } from "comlink";
+import { Bundler } from "./types";
+import { bundle } from "./rollup";
+
+const worker: Bundler = {
+  bundle
+};
+
+expose(worker, self);
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 046332cfe..3d11db1b7 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,3 +1,3 @@
-import HomePage from "../components/HomePage";
+import HomePage from "@site/src/modules/home/components/HomePage";
 
 export default HomePage;
diff --git a/website/src/pages/play.tsx b/website/src/pages/play.tsx
new file mode 100644
index 000000000..616727b9f
--- /dev/null
+++ b/website/src/pages/play.tsx
@@ -0,0 +1,3 @@
+import Playground from "@site/src/modules/playground/components/Playground";
+
+export default Playground;
diff --git a/website/src/types.d.ts b/website/src/types.d.ts
index f58439ad4..e272cc723 100644
--- a/website/src/types.d.ts
+++ b/website/src/types.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="@types/webpack-env"/>
+
 declare module "*.module.scss" {
   const classes: { readonly [key: string]: string };
   export default classes;
@@ -7,3 +9,7 @@ declare module "!!raw-loader!*" {
   const content: string;
   export default content;
 }
+
+declare module "rollup/dist/rollup.browser" {
+  export * from "rollup";
+}
diff --git a/website/src/utils/path.ts b/website/src/utils/path.ts
new file mode 100644
index 000000000..ee5307091
--- /dev/null
+++ b/website/src/utils/path.ts
@@ -0,0 +1,56 @@
+export const sep = "/";
+
+export function isAbsolute(path: string): boolean {
+  return path.startsWith(sep);
+}
+
+export function isRelative(path: string): boolean {
+  return path.startsWith(`.${sep}`) || path.startsWith(`../${sep}`);
+}
+
+export function dirname(path: string): string {
+  const index = path.lastIndexOf(sep);
+  if (index === -1) return ".";
+  return path.substring(0, index) || sep;
+}
+
+export function extname(path: string): string {
+  const index = path.lastIndexOf(".");
+  if (index === -1) return "";
+  return path.substring(index);
+}
+
+export function basename(path: string, ext?: string): string {
+  const index = path.lastIndexOf(sep);
+  const base = index === -1 ? path : path.substring(index + 1);
+
+  if (base.endsWith(ext)) {
+    return base.substring(0, base.length - ext.length);
+  }
+
+  return base;
+}
+
+export function relative(from: string, to: string): string {
+  const fromParts = from.split(sep).filter(Boolean);
+  const toParts = to.split(sep).filter(Boolean);
+
+  while (fromParts[0] && toParts[0]) {
+    fromParts.shift();
+    toParts.shift();
+  }
+
+  while (toParts[0] === "." || toParts[0] === "..") {
+    const toPart = toParts.shift();
+
+    if (toPart === "..") {
+      fromParts.pop();
+    }
+  }
+
+  while (fromParts.pop()) {
+    toParts.unshift("..");
+  }
+
+  return toParts.join(sep);
+}
diff --git a/website/static/img/ts-logo-256.svg b/website/static/img/ts-logo-256.svg
deleted file mode 100644
index 1233b3860..000000000
--- a/website/static/img/ts-logo-256.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" height="256" viewBox="0 0 256 256" width="256" xmlns="http://www.w3.org/2000/svg"><rect fill="#3178c6" height="256" rx="20" width="256"/><path clip-rule="evenodd" d="m150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179s12.597 1.726 19.393 1.726c6.622 0 12.914-.633 18.874-1.899s11.187-3.352 15.678-6.257c4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163s-3.657-7.121-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661s-1.641-3.495-1.641-5.567c0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597 2.591.719 5.11 1.625 7.558 2.719 2.447 1.093 4.708 2.359 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582s-10.697-1.165-17.147-1.165c-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759 3.801 1.554 7.343 3.078 10.625 4.575 3.283 1.496 6.119 3.049 8.509 4.66s4.276 3.366 5.658 5.265 2.073 4.057 2.073 6.474c0 1.783-.432 3.438-1.296 4.963-.863 1.524-2.174 2.848-3.93 3.97s-3.945 1.999-6.565 2.632-5.687.95-9.2.95c-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451zm-46.036-68.733h35.518v-22.742h-99v22.742h35.3447v101.258h28.1373z" fill="#fff" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/website/static/img/undraw_Checklist__re_2w7v.svg b/website/static/img/undraw_Checklist__re_2w7v.svg
deleted file mode 100644
index 90e037b50..000000000
--- a/website/static/img/undraw_Checklist__re_2w7v.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="ee370ff1-147c-4ceb-b530-4ba4072ed128" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="800.12205" height="541.4453" viewBox="0 0 800.12205 541.4453"><path d="M931.831,368.72265c-.83984.69-1.68017,1.35-2.54,2H717.15087q-2.37012-.975-4.71973-2a249.80684,249.80684,0,0,1-61.87012-38.52c-12.37011-10.48-23.75-21.3-32-31.44-11.50976-14.15-22.10986-29.57-27.04-47.13995-4.91992-17.57-3.45019-37.71,7.54-52.28a46.79519,46.79519,0,0,1,12.3501-11.31c.79-.5,1.58985-.98,2.40967-1.43,13.18018-7.4,29.81006-9.2,44.65039-5.37,21.25,5.49,38.90967,20.82,51.50977,38.8,12.60009,17.97,20.78027,38.61,28.83984,59.02,8.18018-36.43,32.95019-69.06,66.41016-85.65,33.45019-16.59,75.01025-16.39,107.75,1.58a108.29189,108.29189,0,0,1,27.55029,21.7c.78955.85,1.56006,1.72,2.31982,2.6,15.96973,18.49,25.96,42.17,26.77979,66.59C970.68114,317.33264,956.10106,348.93267,931.831,368.72265Z" transform="translate(-199.93898 -179.27735)" fill="#f2f2f2"/><path d="M725.63085,370.72265h-3c-.03955-.67-.08985-1.33-.1499-2a224.18,224.18,0,0,0-6.56006-38.74,238.8167,238.8167,0,0,0-38.31006-80.46,228.5998,228.5998,0,0,0-65.5-60.46,1.42,1.42,0,0,1-.69971-1.03,1.49571,1.49571,0,0,1,2.21-1.56,2.25584,2.25584,0,0,1,.19971.13,226.457,226.457,0,0,1,40.12012,31.12,240.89806,240.89806,0,0,1,51.71,74.13,233.59238,233.59238,0,0,1,19.82031,76.87C725.53124,369.39263,725.581,370.06268,725.63085,370.72265Z" transform="translate(-199.93898 -179.27735)" fill="#fff"/><path d="M942.85106,219.28265a.18442.18442,0,0,1-.06982.02c-2.18994.4-4.39014.82-6.57031,1.27a296.83934,296.83934,0,0,0-52.33008,15.89,308.80792,308.80792,0,0,0-48.5,25,313.78428,313.78428,0,0,0-43.44971,33.08,307.5251,307.5251,0,0,0-36.99023,40.12,297.483,297.483,0,0,0-22.60987,34.06c-.37988.66-.75,1.33-1.12011,2h-3.42969c.35986-.67.73-1.34,1.10986-2a299.923,299.923,0,0,1,27.98-41.33,310.83961,310.83961,0,0,1,38.31006-39.75,317.8396,317.8396,0,0,1,44.37988-32.28,311.85339,311.85339,0,0,1,49.52-24.16,297.10379,297.10379,0,0,1,51.4502-14.52c.48974-.09.96973-.18,1.46-.27C943.86083,216.07263,944.66112,218.89263,942.85106,219.28265Z" transform="translate(-199.93898 -179.27735)" fill="#fff"/><path d="M397.61864,376.66758c5.33472-10.07067,6.21531-23.18724-.41809-32.45416-3.94861-5.51625-10.114-9.13731-16.5831-11.17974s-13.29352-2.64274-20.05919-3.13909c-6.69738-.49134-13.51391-.88463-20.05622.63013s-12.87936,5.21528-16.06641,11.12621c-5.384,9.98545-.47945,22.78941-4.43391,33.42231-3.629,9.75779-13.95725,15.46248-24.11029,17.76466s-20.7502,2.05718-30.90827,4.337-20.50358,7.93161-24.19689,17.66525c-2.67075,7.03869-1.3438,15.14634,2.17543,21.8015s9.03083,12.04315,14.88123,16.78118c8.72778,7.06833,18.9387,13.122,30.153,13.73469,11.81633.64564,23.37009-4.97924,31.87484-13.20795s14.29474-18.86236,18.92069-29.75469c2.93464-6.91,5.70733-14.34655,11.58833-19.01277,4.32141-3.42878,9.81777-4.93092,15.14811-6.35168l6.03579-1.60878a41.44067,41.44067,0,0,0,25.89412-20.25286Q397.53861,376.81864,397.61864,376.66758Z" transform="translate(-199.93898 -179.27735)" fill="#2f2e41"/><polygon points="150.079 528.665 137.82 528.665 131.987 481.377 150.082 481.377 150.079 528.665" fill="#ffb8b8"/><path d="M129.06244,525.16164h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H114.17558a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,129.06244,525.16164Z" fill="#2f2e41"/><polygon points="252.079 528.665 239.82 528.665 233.987 481.377 252.082 481.377 252.079 528.665" fill="#ffb8b8"/><path d="M231.06244,525.16164h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H216.17558a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,231.06244,525.16164Z" fill="#2f2e41"/><path d="M373.58482,670.35742a4.83433,4.83433,0,0,1-.512-.02749l-49.87738-5.34411a4.69083,4.69083,0,0,1-4.06331-5.75129l44.16249-167.97008A4.71833,4.71833,0,0,1,366.84,487.772l40.968-11.42012a4.722,4.722,0,0,1,4.54861,1.4821c26.34037,29.71022,46.19019,95.57108,61.227,178.585a4.69166,4.69166,0,0,1-4.02183,5.48968l-40.86771,5.21789a4.67848,4.67848,0,0,1-5.17081-3.62687l-19.88367-88.64816a3.64829,3.64829,0,0,0-7.13744.08245l-18.33031,91.651A4.66624,4.66624,0,0,1,373.58482,670.35742Z" transform="translate(-199.93898 -179.27735)" fill="#2f2e41"/><circle cx="166.05906" cy="195.89412" r="24.56103" fill="#ffb8b8"/><path d="M365.31214,491.73677a4.68072,4.68072,0,0,1-4.52138-3.48538L346.015,432.74183a16.77836,16.77836,0,0,1,10.11005-19.96459c11.894-4.64277,23.22577-6.3651,33.68038-5.12119h0c9.29189,1.1075,20.75451,56.11828,19.99615,57.29195l3.66683,10.99972a4.69093,4.69093,0,0,1-3.44212,6.0648l-43.695,9.61228A4.732,4.732,0,0,1,365.31214,491.73677Z" transform="translate(-199.93898 -179.27735)" fill="#ccc"/><path d="M378.55437,548.5036a7.61039,7.61039,0,0,0-7.36811-9.04937l-8.51288-25.67-8.70071,11.03671,9.41789,22.68464a7.65163,7.65163,0,0,0,15.16381.998Z" transform="translate(-199.93898 -179.27735)" fill="#ffb8b8"/><path d="M488.00168,486.81137a7.61039,7.61039,0,0,0-11.385-2.56171L454.061,469.32786l-.02058,14.05386,21.42241,12.01539a7.65163,7.65163,0,0,0,12.53883-8.58574Z" transform="translate(-199.93898 -179.27735)" fill="#ffb8b8"/><path d="M360.7065,536.64362a4.6899,4.6899,0,0,1-4.45394-3.21767l-19.95679-42.21646a24.39872,24.39872,0,0,1-1.23475-7.66906l6-54.87133a12.059,12.059,0,0,1,24.02994-1.45563l-9.17975,62.631,14.64881,38.44a4.68142,4.68142,0,0,1-2.47839,5.225l-5.278,2.63948A4.68456,4.68456,0,0,1,360.7065,536.64362Z" transform="translate(-199.93898 -179.27735)" fill="#ccc"/><path d="M467.29051,492.35386a4.681,4.681,0,0,1-2.115-.50387l-39.68768-20.04705a24.36835,24.36835,0,0,1-6.289-4.56031l-38.73694-38.86239a12.05881,12.05881,0,0,1,15.99239-17.99389l41.96249,46.60271,33.263,21.11994a4.67994,4.67994,0,0,1,1.933,5.45l-1.875,5.59554a4.692,4.692,0,0,1-4.44732,3.19934Z" transform="translate(-199.93898 -179.27735)" fill="#ccc"/><path d="M338.061,362.473a28.60013,28.60013,0,0,0,16.89515,10.63127,29.8702,29.8702,0,0,0,20.06006-2.87413c4.94657-2.67271,8.905-6.68407,12.782-10.63335,1.618-1.64821,3.3414-3.549,3.26-5.79747-.12611-3.48365-4.31416-5.38825-7.90863-6.148a56.43491,56.43491,0,0,0-35.03266,3.93979c-4.88,2.26681-9.96448,6.3679-9.23175,11.46579" transform="translate(-199.93898 -179.27735)" fill="#2f2e41"/><path d="M983.061,368.72265h-482a17.02412,17.02412,0,0,0-17,17v186a17.02411,17.02411,0,0,0,17,17h482a17.0241,17.0241,0,0,0,17-17v-186A17.02411,17.02411,0,0,0,983.061,368.72265Zm15,203a15.01828,15.01828,0,0,1-15,15h-482a15.01828,15.01828,0,0,1-15-15v-186a15.01828,15.01828,0,0,1,15-15h482a15.01828,15.01828,0,0,1,15,15Z" transform="translate(-199.93898 -179.27735)" fill="#3f3d56"/><path d="M588.5747,536.72265a58,58,0,1,1,58-58A58.06566,58.06566,0,0,1,588.5747,536.72265Zm0-114a56,56,0,1,0,56,56A56.06353,56.06353,0,0,0,588.5747,422.72265Z" transform="translate(-199.93898 -179.27735)" fill="#3f3d56"/><path d="M940.04724,441.72265h-231a12.4967,12.4967,0,0,0-12.48,12.01,4.01078,4.01078,0,0,0-.02.49,12.51762,12.51762,0,0,0,12.5,12.5h231a12.5,12.5,0,0,0,0-25Z" transform="translate(-199.93898 -179.27735)" fill="#f9a826"/><path d="M940.04724,490.72265h-231a12.4967,12.4967,0,0,0-12.48,12.01,4.01078,4.01078,0,0,0-.02.49,12.51762,12.51762,0,0,0,12.5,12.5h231a12.5,12.5,0,0,0,0-25Z" transform="translate(-199.93898 -179.27735)" fill="#f9a826"/><path d="M582.10406,504.06438a7.45991,7.45991,0,0,1-4.48864-1.491l-.08027-.06027-16.904-12.94229a7.51006,7.51006,0,1,1,9.13524-11.92273l10.94913,8.39563,25.87453-33.74415a7.50978,7.50978,0,0,1,10.52941-1.38993l-.16087.21843.165-.21525a7.51849,7.51849,0,0,1,1.38994,10.52948L588.07894,501.1335A7.5131,7.5131,0,0,1,582.10406,504.06438Z" transform="translate(-199.93898 -179.27735)" fill="#f9a826"/><path d="M581.939,720.72265h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-199.93898 -179.27735)" fill="#3f3d56"/><path d="M883.19672,323.67208a198.22844,198.22844,0,0,0-62.84517,1.41695,202.3421,202.3421,0,0,0-59.17277,20.68847,195.19962,195.19962,0,0,0-29.529,19.50926c-1.50813,1.2048.62683,3.31522,2.12132,2.12132a193.80848,193.80848,0,0,1,53.78714-30.23554,199.64709,199.64709,0,0,1,60.06423-12.18517,191.075,191.075,0,0,1,34.77677,1.57754,1.55392,1.55392,0,0,0,1.84518-1.04765,1.50922,1.50922,0,0,0-1.04766-1.84518Z" transform="translate(-199.93898 -179.27735)" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/website/static/img/undraw_Portfolio_update_re_jqnp.svg b/website/static/img/undraw_Portfolio_update_re_jqnp.svg
deleted file mode 100644
index 6e6de7d8b..000000000
--- a/website/static/img/undraw_Portfolio_update_re_jqnp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="bb43b303-7783-4b20-84ac-89898836e9dc" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="794.1218" height="505.34514" viewBox="0 0 794.1218 505.34514"><path d="M247.4579,701.19842c-12.25095-1.00787-23.067-9.87117-29.218-20.51384-2.06275-3.569-3.47609-8.25063-1.14018-11.64717a6.40928,6.40928,0,0,1,11.315,1.47119,62.04539,62.04539,0,0,1-.96485-12.64086c.09416-3.586.77176-7.64052,3.75358-9.6347,3.45928-2.31349,8.44549-.47663,10.96167,2.83815s3.19894,7.62671,3.80283,11.74426a10.83041,10.83041,0,0,1,12.03865-13.65713c5.06672.76515,9.03581,5.1519,10.58457,10.03641s1.06522,10.18071.06842,15.207c-1.16883,5.89373-3.06582,11.74062-6.481,16.68417s-8.488,8.929-14.37353,10.13822Z" transform="translate(-202.9391 -197.32743)" fill="#f2f2f2"/><path d="M997.0609,303.32743a106.03391,106.03391,0,0,1-71,100.08c-.66016.23-1.33008.46-2,.67v-107.71h-138.77c.04-.67.08984-1.34.1499-2H924.0609v-21.04a5.002,5.002,0,0,0-5-5H790.98082c.23-.67.47021-1.34.73-2a106.01022,106.01022,0,0,1,205.3501,37Z" transform="translate(-202.9391 -197.32743)" fill="#f2f2f2"/><path d="M919.0609,266.32743h-487a7.00778,7.00778,0,0,0-7,7v330a7.00778,7.00778,0,0,0,7,7h487a7.00779,7.00779,0,0,0,7-7v-330A7.00778,7.00778,0,0,0,919.0609,266.32743Zm5,337a5.002,5.002,0,0,1-5,5h-487a5.002,5.002,0,0,1-5-5v-330a5.002,5.002,0,0,1,5-5h487a5.002,5.002,0,0,1,5,5Z" transform="translate(-202.9391 -197.32743)" fill="#3f3d56"/><rect x="223.1218" y="97.03998" width="499" height="2" fill="#3f3d56"/><circle cx="240.1218" cy="84" r="6" fill="#3f3d56"/><circle cx="257.3718" cy="84" r="6" fill="#3f3d56"/><circle cx="274.6218" cy="84" r="6" fill="#3f3d56"/><path d="M562.0609,335.32743h-88a7.00778,7.00778,0,0,0-7,7v88a7.00778,7.00778,0,0,0,7,7h88a7.00779,7.00779,0,0,0,7-7v-88A7.00778,7.00778,0,0,0,562.0609,335.32743Zm5,95a5.002,5.002,0,0,1-5,5h-88a5.002,5.002,0,0,1-5-5v-88a5.002,5.002,0,0,1,5-5h88a5.002,5.002,0,0,1,5,5Z" transform="translate(-202.9391 -197.32743)" fill="#3f3d56"/><path d="M720.0609,335.82743h-88a6.51259,6.51259,0,0,0-6.5,6.5v88a6.51259,6.51259,0,0,0,6.5,6.5h88a6.51259,6.51259,0,0,0,6.5-6.5v-88A6.51259,6.51259,0,0,0,720.0609,335.82743Z" transform="translate(-202.9391 -197.32743)" fill="#f9a826"/><path d="M878.0609,335.82743h-88a6.51259,6.51259,0,0,0-6.5,6.5v88a6.51259,6.51259,0,0,0,6.5,6.5h88a6.51259,6.51259,0,0,0,6.5-6.5v-88A6.51259,6.51259,0,0,0,878.0609,335.82743Z" transform="translate(-202.9391 -197.32743)" fill="#e6e6e6"/><path d="M562.0609,467.82743h-88a6.51259,6.51259,0,0,0-6.5,6.5v88a6.51259,6.51259,0,0,0,6.5,6.5h88a6.51259,6.51259,0,0,0,6.5-6.5v-88A6.51259,6.51259,0,0,0,562.0609,467.82743Z" transform="translate(-202.9391 -197.32743)" fill="#e6e6e6"/><path d="M720.0609,467.82743h-88a6.51259,6.51259,0,0,0-6.5,6.5v88a6.51259,6.51259,0,0,0,6.5,6.5h88a6.51259,6.51259,0,0,0,6.5-6.5v-88A6.51259,6.51259,0,0,0,720.0609,467.82743Z" transform="translate(-202.9391 -197.32743)" fill="#f9a826"/><path d="M878.0609,467.82743h-88a6.51259,6.51259,0,0,0-6.5,6.5v88a6.51259,6.51259,0,0,0,6.5,6.5h88a6.51259,6.51259,0,0,0,6.5-6.5v-88A6.51259,6.51259,0,0,0,878.0609,467.82743Z" transform="translate(-202.9391 -197.32743)" fill="#e6e6e6"/><path d="M540.5609,482.32743h-88a6.50745,6.50745,0,0,1-6.5-6.5v-88a6.50744,6.50744,0,0,1,6.5-6.5h88a6.50745,6.50745,0,0,1,6.5,6.5v88A6.50745,6.50745,0,0,1,540.5609,482.32743Z" transform="translate(-202.9391 -197.32743)" fill="#f9a826"/><polygon points="202.746 492.088 214.466 488.491 206.17 441.573 188.872 446.881 202.746 492.088" fill="#a0616a"/><path d="M403.482,680.85789h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H418.36887A14.88686,14.88686,0,0,1,403.482,680.8579v0A0,0,0,0,1,403.482,680.85789Z" transform="translate(825.89112 1024.95669) rotate(162.93912)" fill="#2f2e41"/><polygon points="102.748 492.358 115.008 492.357 120.84 445.069 102.746 445.07 102.748 492.358" fill="#a0616a"/><path d="M303.06,686.18167h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H317.94689A14.88686,14.88686,0,0,1,303.06,686.18168v0a0,0,0,0,1,0,0Z" transform="translate(441.74335 1189.90807) rotate(179.99738)" fill="#2f2e41"/><path d="M304.80743,552.60788a9.16224,9.16224,0,0,1,.318-14.04558l9.50536-119.69459,19.33086,4.8297L318.48407,540.45594a9.21188,9.21188,0,0,1-13.67664,12.15194Z" transform="translate(-202.9391 -197.32743)" fill="#a0616a"/><circle cx="140.57921" cy="150.55523" r="24.56103" fill="#a0616a"/><path d="M322.16166,415.18605c-5.54194-7.60815-5.71269-18.08683.25708-25.36412,3.89587-4.74914,10.41248-8.54951,21.29248-8.54951,29,0,40,23,40,23s12,22,5,42-7,22-7,22l-46-4S343.47142,444.44079,322.16166,415.18605Z" transform="translate(-202.9391 -197.32743)" fill="#ccc"/><path d="M307.9766,435.09469l9.90967-32.4209a15.50189,15.50189,0,0,1,21.93018-9.24512h0a15.53,15.53,0,0,1,7.08789,20.00977L334.306,442.12984Z" transform="translate(-202.9391 -197.32743)" fill="#ccc"/><path d="M380.71122,463.27242l39,202-21,6-51-133-23,136-22,3s-9.65032-179.945,33-213Z" transform="translate(-202.9391 -197.32743)" fill="#2f2e41"/><path d="M436.84246,453.80485a10.52712,10.52712,0,0,0-.96265,1.3493l-49.53505,2.40166-9.53834-29.11951-16.56185,7.87143,15.58776,43.3713,61.26206-11.98076a10.49579,10.49579,0,1,0-.25193-13.89342Z" transform="translate(-202.9391 -197.32743)" fill="#a0616a"/><path d="M353.31425,407.17672a15.50085,15.50085,0,0,1,16.3623-17.28223h0a15.52954,15.52954,0,0,1,14.53467,15.47168v31.335l-26.936,4.14453Z" transform="translate(-202.9391 -197.32743)" fill="#ccc"/><path d="M348.91975,372.66645c-3.68637-.01605-6.53017-3.89721-6.36494-7.57991s2.63867-6.92285,5.61866-9.09293,6.47479-3.49191,9.798-5.08739,6.61743-3.58561,8.66924-6.64822a14.71557,14.71557,0,0,0,1.02332-13.50438,21.66865,21.66865,0,0,0-9.3332-10.22418,28.37777,28.37777,0,0,0-37.60707,8.25038l-4.20808,11.45787c-4.28786,5.15613-4.968,12.81333-2.33217,18.97968s8.24814,10.80579,14.58112,13.0114a35.79392,35.79392,0,0,0,19.8411.59488" transform="translate(-202.9391 -197.32743)" fill="#2f2e41"/><path d="M326.47317,334.50613c-1.80894-2.89931-4.94439-4.74325-8.18587-5.82543a25.72431,25.72431,0,0,0-33.83244,23.00283c-.34357,6.31437,1.63365,12.48912,2.79545,18.70518s1.39291,13.08161-2.03446,18.396c-2.61053,4.0478-6.96387,6.59634-11.26083,8.77251-3.58128,1.81371-7.45507,3.51578-11.45314,3.1544s-8.01642-3.52812-7.91033-7.54108a32.0544,32.0544,0,0,0-2.68163,9.08033c-.28127,3.15593.49659,6.56125,2.77606,8.76193,3.3131,3.19859,8.56255,2.9646,13.1157,2.27441,9.85694-1.49417,19.83818-4.29543,27.62552-10.52031s12.95465-16.47494,10.90388-26.23127c-.85666-4.07547-2.86993-7.796-4.49677-11.62968s-2.89692-8.027-2.14959-12.124a14.73513,14.73513,0,0,1,7.49255-9.98176,19.60142,19.60142,0,0,1,12.52266-1.899c2.79906.45932,6.29406,1.17251,7.95419-1.12742a4.50752,4.50752,0,0,0-.09367-4.80858,13.24754,13.24754,0,0,0-3.59259-3.5596" transform="translate(-202.9391 -197.32743)" fill="#2f2e41"/><path d="M511.4238,702.67257h-307.294a1.19069,1.19069,0,1,1,0-2.38137h307.294a1.19069,1.19069,0,1,1,0,2.38137Z" transform="translate(-202.9391 -197.32743)" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/website/static/img/undraw_environmental_study_skau.svg b/website/static/img/undraw_environmental_study_skau.svg
deleted file mode 100644
index 03da56689..000000000
--- a/website/static/img/undraw_environmental_study_skau.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="b7d8d657-bdb0-4cab-bef3-dbc27e5f057f" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1011.66744" height="692.79302" viewBox="0 0 1011.66744 692.79302"><title>environmental_study</title><path d="M1051.34427,667.2931c-4.36676,0-8.55719,2.12251-12.4624,5.9791-10.62165-38.27736-27.0647-62.87563-45.5376-62.87563s-34.916,24.59827-45.5376,62.87563c-3.90521-3.85659-8.09564-5.9791-12.4624-5.9791-20.98682,0-38,48.39956-38,108.10341h192C1089.34427,715.69266,1072.33108,667.2931,1051.34427,667.2931Z" transform="translate(-94.16628 -103.60349)" fill="#d0cde1"/><path d="M483.34373,606.12065a21.13606,21.13606,0,0,0-12.4624,4.38468c-10.62164-28.07008-27.0647-46.10882-45.5376-46.10882s-34.916,18.03874-45.5376,46.10882a21.13606,21.13606,0,0,0-12.4624-4.38468c-20.98682,0-38,35.493-38,79.27586h192C521.34373,641.61367,504.33055,606.12065,483.34373,606.12065Z" transform="translate(-94.16628 -103.60349)" fill="#d0cde1"/><path d="M1105.83372,796.39651H95.85374c.91-82.06,226.66-148.5,504.99-148.5S1104.92381,714.33651,1105.83372,796.39651Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><circle cx="129.17745" cy="240.97047" r="129.17745" fill="#d0cde1"/><path d="M227.51075,714.39651h-7.29228V359.60736a122.11809,122.11809,0,0,1,3.64613-29.61793v0a122.1176,122.1176,0,0,1,3.64614,29.61793Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M224.27419,454.43239l-3.8411-6.19865,53.956-33.4348a22.97361,22.97361,0,0,1,12.47721-3.44231h0a22.97361,22.97361,0,0,1-8.63612,9.641Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M221.73239,420.73644l3.8411-6.19864L188.44264,391.529a13.81615,13.81615,0,0,0-9.86988-1.82663h0a13.81618,13.81618,0,0,0,6.02878,8.02526Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M221.73239,562.41494l3.8411-6.19865-37.13085-23.00883a13.81615,13.81615,0,0,0-9.86988-1.82663h0a13.81617,13.81617,0,0,0,6.02878,8.02527Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><circle cx="814.17745" cy="242.79302" r="124" fill="#d0cde1"/><path d="M904.34373,701.39651h7V360.82737a117.22326,117.22326,0,0,0-3.5-28.43085h0a117.22326,117.22326,0,0,0-3.5,28.43085Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M907.45056,451.85179l3.68716-5.9502-51.7934-32.09473a22.053,22.053,0,0,0-11.97713-3.30435h0a22.0529,22.0529,0,0,0,8.29,9.25454Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M909.89049,419.50638l-3.68715-5.9502L941.846,391.46955a13.26236,13.26236,0,0,1,9.47429-1.75342h0a13.26238,13.26238,0,0,1-5.78714,7.70361Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M909.89049,555.50638l-3.68715-5.9502L941.846,527.46955a13.26236,13.26236,0,0,1,9.47429-1.75342h0a13.26238,13.26238,0,0,1-5.78714,7.70361Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M242.4479,783.94824a8.0728,8.0728,0,0,0-3.24542.6885c-2.76605-4.4077-7.0481-7.24023-11.85875-7.24023s-9.0927,2.83253-11.85875,7.24023a8.0728,8.0728,0,0,0-3.24542-.6885c-5.46531,0-9.89583,5.57328-9.89583,12.44827h50C252.34373,789.52152,247.91321,783.94824,242.4479,783.94824Z" transform="translate(-94.16628 -103.60349)" fill="#d0cde1"/><path d="M552.4479,775.431a5.45088,5.45088,0,0,0-3.24542,1.15959c-2.76605-7.42349-7.0481-12.19407-11.85875-12.19407s-9.0927,4.77058-11.85875,12.19407a5.45088,5.45088,0,0,0-3.24542-1.15959c-5.46531,0-9.89583,9.38659-9.89583,20.96552h50C562.34373,784.81758,557.91321,775.431,552.4479,775.431Z" transform="translate(-94.16628 -103.60349)" fill="#d0cde1"/><path d="M983.4479,775.431a5.45088,5.45088,0,0,0-3.24542,1.15959c-2.76605-7.42349-7.0481-12.19407-11.85875-12.19407s-9.0927,4.77058-11.85875,12.19407a5.45088,5.45088,0,0,0-3.24542-1.15959c-5.46531,0-9.89583,9.38659-9.89583,20.96552h50C993.34373,784.81758,988.91321,775.431,983.4479,775.431Z" transform="translate(-94.16628 -103.60349)" fill="#f9a826"/><polygon points="621.362 482.069 619.774 489.614 617.788 497.159 611.435 586.905 633.276 588.494 643.203 490.408 641.615 485.246 621.362 482.069" fill="#2f2e41"/><path d="M696.86463,678.19837l-9.13344,13.89872s-25.41479,20.64952-7.14791,21.84083S705.601,701.62763,705.601,701.62763s6.35369-1.98553,7.14791-3.97106-1.58843-19.4582-1.58843-19.4582Z" transform="translate(-94.16628 -103.60349)" fill="#2f2e41"/><path d="M707.18939,688.92024s-9.13344,23.03215-7.94212,27.00321,3.17685,3.97107,2.77974,7.545-1.58842,11.91318,13.50161,12.31029,7.94212-19.85531,7.94212-19.85531l-1.98553-27.00321Z" transform="translate(-94.16628 -103.60349)" fill="#2f2e41"/><path d="M679.392,518.56172s-5.55948,9.53054-4.76527,15.48714S686.937,603.93953,686.937,603.93953l9.13344,77.8328,20.25241-1.58843-7.94212-71.8762,1.98553-57.18328,3.574,42.09325,23.42926.79421,13.89872-59.963s-10.32476-16.67846-12.31029-17.86978S679.392,518.56172,679.392,518.56172Z" transform="translate(-94.16628 -103.60349)" fill="#2f2e41"/><circle cx="612.82456" cy="277.36096" r="17.07556" fill="#ffb8b8"/><polygon points="607.861 288.281 610.243 310.916 636.452 306.945 622.157 280.339 607.861 288.281" fill="#ffb8b8"/><path d="M728.63312,403.79805s-13.50161,9.92765-26.60611,4.36817l-19.8553,50.43247v63.13988s29.783,8.73633,46.46141-1.58843c0,0,11.91318-2.38263,13.89871-1.98553s-7.14791-107.61575-7.14791-107.61575Z" transform="translate(-94.16628 -103.60349)" fill="#d0cde1"/><path d="M716.32283,406.18069l9.13344,13.1045a15.80706,15.80706,0,0,1,1.58843,10.72186c-1.19132,6.3537-2.38264,89.34888,8.73633,92.52573s18.26688,2.77974,18.26688,2.77974-9.92765-47.65273-6.3537-55.992l11.119-50.03537-29.38585-16.67846s-1.83735-7.545-4.88974-3.3754A28.22941,28.22941,0,0,1,716.32283,406.18069Z" transform="translate(-94.16628 -103.60349)" fill="#575a89"/><path d="M689.71672,480.04242,703.281,403.79805,689.71672,410.946s-15.48714,6.3537-18.664,13.89872-15.88424,43.68167-15.88424,43.68167,3.17685,21.84083,15.09,12.70739,9.13344-13.5016,9.13344-13.5016-10.32476,42.09324-8.73633,43.28456,2.38263,12.31029,2.38263,12.31029l12.31029-2.38264Z" transform="translate(-94.16628 -103.60349)" fill="#575a89"/><path d="M674.22958,437.55207l5.16238-7.545s11.67555-23.42926,20.1336-15.48713-15.76543,26.209-15.76543,26.209Z" transform="translate(-94.16628 -103.60349)" fill="#ffb8b8"/><polygon points="649.954 416.15 646.777 420.226 654.719 430.445 658.293 423.297 649.954 416.15" fill="#ffb8b8"/><path d="M700.14486,366.81971c-1.75072.01763-3.28421,1.10238-4.72307,2.09988s-3.06982,1.99257-4.80958,1.79622a5.18371,5.18371,0,0,1-3.771-2.87972,15.31547,15.31547,0,0,1-1.32357-4.733l1.981.69838-1.60482-1.82379,17.05779-5.18253c5.1611-1.56806,10.99426-3.07915,15.7223-.48275a15.49441,15.49441,0,0,1,5.71162,6.22584,32.45691,32.45691,0,0,1-.45346,31.95824c-2.6161-.22267-4.32145-2.96271-4.74568-5.55377s-.011-5.27506-.53481-7.84783-2.48665-5.2081-5.111-5.12722l-1.38185,2.94641c.8843-1.88552-4.36753-6.49-5.61993-7.34581a17.07428,17.07428,0,0,1-3.05976-2.22959C702.39467,368.20467,702.12192,366.79979,700.14486,366.81971Z" transform="translate(-94.16628 -103.60349)" fill="#2f2e41"/><path d="M675.818,433.1839l9.53054,5.9566L675.818,478.85111s-15.09,18.664-20.64952,0c-4.65354-15.6226,12.95134-37.088,18.81251-43.669C675.122,433.901,675.818,433.1839,675.818,433.1839Z" transform="translate(-94.16628 -103.60349)" fill="#575a89"/><path d="M749.67974,418.491h9.13344s7.94213,15.48714,8.73634,23.82636.79421,41.299.79421,41.299l-15.48714,46.06431-11.91318-8.73634,9.92765-27.40032s-1.19132-5.95659,0-8.73633-3.574-17.07556-4.36816-17.86978S749.67974,418.491,749.67974,418.491Z" transform="translate(-94.16628 -103.60349)" fill="#575a89"/><rect x="533.90574" y="224.30867" width="107.45571" height="9.57526" transform="translate(1081.10091 354.58911) rotate(-180)" fill="#3f3d56"/><rect x="533.90574" y="259.58248" width="107.45571" height="9.57526" transform="translate(1081.10091 425.13673) rotate(-180)" fill="#3f3d56"/><rect x="533.90574" y="291.18194" width="107.45571" height="9.57526" transform="translate(1081.10091 488.33565) rotate(-180)" fill="#3f3d56"/><polygon points="265.286 217.735 317.992 164.032 377.574 164.032 377.574 162.032 317.157 162.032 316.863 162.329 263.863 216.329 265.286 217.735" fill="#3f3d56"/><circle cx="405.93539" cy="128.43229" r="11.75794" fill="#f9a826"/><circle cx="405.93539" cy="163.70611" r="11.75794" fill="#f9a826"/><circle cx="405.93539" cy="195.30557" r="11.75794" fill="#f9a826"/><path d="M493.48783,229.0963a12.49281,12.49281,0,1,1,12.49281,12.49281A12.50678,12.50678,0,0,1,493.48783,229.0963Zm1.46974,0a11.02307,11.02307,0,1,0,11.02307-11.02307A11.03559,11.03559,0,0,0,494.95757,229.0963Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M493.48783,264.37011a12.49281,12.49281,0,1,1,12.49281,12.49281A12.50678,12.50678,0,0,1,493.48783,264.37011Zm1.46974,0a11.02307,11.02307,0,1,0,11.02307-11.02306A11.03558,11.03558,0,0,0,494.95757,264.37011Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M493.48783,295.96957a12.49281,12.49281,0,1,1,12.49281,12.49281A12.50678,12.50678,0,0,1,493.48783,295.96957Zm1.46974,0a11.02307,11.02307,0,1,0,11.02307-11.02307A11.03558,11.03558,0,0,0,494.95757,295.96957Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><rect x="536.28376" y="7.70518" width="107.45571" height="9.57526" fill="#3f3d56"/><rect x="536.28376" y="42.97899" width="107.45571" height="9.57526" fill="#3f3d56"/><rect x="536.28376" y="74.57845" width="107.45571" height="9.57526" fill="#3f3d56"/><polygon points="808.193 114.735 765.487 51.032 705.905 51.032 705.905 49.032 766.322 49.032 766.616 49.329 809.616 113.329 808.193 114.735" fill="#3f3d56"/><circle cx="677.54353" cy="15.43229" r="11.75794" fill="#f9a826"/><circle cx="677.54353" cy="50.70611" r="11.75794" fill="#f9a826"/><circle cx="677.54353" cy="82.30557" r="11.75794" fill="#f9a826"/><path d="M765.83084,128.58911a12.49281,12.49281,0,1,1,12.49281-12.49281A12.50678,12.50678,0,0,1,765.83084,128.58911Zm0-23.51588a11.02307,11.02307,0,1,0,11.02307,11.02307A11.03558,11.03558,0,0,0,765.83084,105.07323Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M765.83084,163.86292a12.49281,12.49281,0,1,1,12.49281-12.49281A12.50678,12.50678,0,0,1,765.83084,163.86292Zm0-23.51587a11.02307,11.02307,0,1,0,11.02307,11.02306A11.03558,11.03558,0,0,0,765.83084,140.34705Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M765.83084,195.46238a12.49281,12.49281,0,1,1,12.49281-12.49281A12.50678,12.50678,0,0,1,765.83084,195.46238Zm0-23.51588a11.02307,11.02307,0,1,0,11.02307,11.02307A11.03558,11.03558,0,0,0,765.83084,171.9465Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><rect x="548.58853" y="480.77795" width="75.04911" height="6.68754" transform="translate(1078.0599 864.63996) rotate(-180)" fill="#3f3d56"/><rect x="548.58853" y="505.41386" width="75.04911" height="6.68754" transform="translate(1078.0599 913.91177) rotate(-180)" fill="#3f3d56"/><rect x="548.58853" y="527.48352" width="75.04911" height="6.68754" transform="translate(1078.0599 958.0511) rotate(-180)" fill="#3f3d56"/><polygon points="332.58 444.942 369.391 407.435 411.005 407.435 411.005 406.038 368.808 406.038 368.603 406.245 331.587 443.96 332.58 444.942" fill="#3f3d56"/><circle cx="430.81285" cy="382.57123" r="8.21197" fill="#f9a826"/><circle cx="430.81285" cy="407.20713" r="8.21197" fill="#f9a826"/><circle cx="430.81285" cy="429.2768" r="8.21197" fill="#f9a826"/><path d="M520.3599,484.12173a8.72522,8.72522,0,1,1,8.72521,8.72521A8.735,8.735,0,0,1,520.3599,484.12173Zm1.02649,0a7.69872,7.69872,0,1,0,7.69872-7.69872A7.70746,7.70746,0,0,0,521.38639,484.12173Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M520.3599,508.75763a8.72522,8.72522,0,1,1,8.72521,8.72522A8.735,8.735,0,0,1,520.3599,508.75763Zm1.02649,0a7.69872,7.69872,0,1,0,7.69872-7.69872A7.70746,7.70746,0,0,0,521.38639,508.75763Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/><path d="M520.3599,530.82729a8.72522,8.72522,0,1,1,8.72521,8.72522A8.735,8.735,0,0,1,520.3599,530.82729Zm1.02649,0a7.69872,7.69872,0,1,0,7.69872-7.69872A7.70746,7.70746,0,0,0,521.38639,530.82729Z" transform="translate(-94.16628 -103.60349)" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/website/tsconfig.json b/website/tsconfig.json
index af7ec2bb4..a5f16d586 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,4 +1,13 @@
 {
   "extends": "./node_modules/@tsconfig/docusaurus/tsconfig.json",
-  "include": ["src/"]
+  "include": ["src/"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["WebWorker", "DOM"],
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@site/*": ["./*"]
+    }
+  }
 }